/* ══════════════════════════════════════════════
   Flashcards LearnDash v1.6 — Verde
   Sin CSS 3D flip (show/hide via JS)
   ══════════════════════════════════════════════ */

/* ── Filter bar ─────────────────────────── */
.fld-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1b2e1c;
}

.fld-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    align-items: flex-start;
}
.fld-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 6px;
    background: #e8f5e9;
    border: 1.5px solid #a5d6a7;
    border-radius: 99px;
}
.fld-filter-btn {
    padding: 6px 16px;
    border-radius: 99px;
    border: 1.5px solid #a5d6a7;
    background: #fff;
    color: #2e7d32;
    font-size: .83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    font-family: inherit;
    line-height: 1.4;
}
.fld-filter-btn:hover,
.fld-filter-btn.active {
    background: #2e7d32 !important;
    color: #fff !important;
    border-color: #2e7d32 !important;
}
.fld-filter-parent {
    background: #c8e6c9;
    border-color: #66bb6a;
    color: #1b5e20;
    font-weight: 700;
}
.fld-filter-child {
    font-size: .78rem;
    padding: 4px 12px;
    border-style: dashed;
}

/* ── Group cards grid ───────────────────── */
.fld-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 18px;
}
.fld-group-card {
    background: #fff;
    border: 2px solid #c8e6c9;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    font-family: inherit;
}
.fld-group-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2e7d32, #66bb6a);
    border-radius: 16px 16px 0 0;
}
.fld-group-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(46,125,50,.15);
    border-color: #43a047;
}

.fld-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fld-card-icon { font-size: 1.9rem; line-height: 1; }
.fld-card-count {
    font-size: .76rem;
    font-weight: 700;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 2px 10px;
    border-radius: 99px;
}
.fld-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1b2e1c;
    margin: 2px 0 0;
    line-height: 1.3;
}
.fld-card-sp {
    font-size: .78rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}
.fld-sp-parent { color: #2e7d32; font-weight: 700; }
.fld-sp-arrow  { color: #81c784; }
.fld-sp-child  {
    background: #e8f5e9;
    color: #388e3c;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 99px;
}
.fld-group-btn {
    margin-top: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #2e7d32, #43a047) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(46,125,50,.28) !important;
    transition: opacity .15s, transform .15s !important;
    font-family: inherit !important;
}
.fld-group-btn:hover {
    opacity: .9 !important;
    transform: scale(1.03) !important;
}

.fld-single-title { font-size: 1.5rem; font-weight: 800; color: #2e7d32; margin: 0 0 6px; }
.fld-single-sub   { color: #4a6b4c; margin: 0 0 18px; }
.fld-empty { text-align: center; padding: 40px; color: #4a6b4c; }

/* ══════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════ */
#fldModal {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #1b2e1c !important;
}
#fldModal.open { display: flex !important; }

#fldBackdrop {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background: rgba(10,30,12,.78) !important;
    backdrop-filter: blur(7px) !important;
    cursor: pointer !important;
}

.fld-modal-inner {
    position: relative !important;
    background: #f4faf4 !important;
    border-radius: 24px !important;
    width: 100% !important;
    max-width: 860px !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding: 28px 34px 28px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.3) !important;
    animation: fldPop .26s cubic-bezier(.34,1.56,.64,1) !important;
    font-family: inherit !important;
}
@keyframes fldPop {
    from { opacity: 0; transform: scale(.9) translateY(20px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* Modal header */
.fld-modal-hdr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
}
.fld-modal-hdr-title {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #2e7d32 !important;
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-right: 12px !important;
    margin: 0 !important;
}
.fld-modal-hdr-btns { display: flex !important; gap: 8px !important; flex-shrink: 0 !important; }
.fld-ico-btn {
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid #c8e6c9 !important;
    background: #fff !important;
    color: #2e7d32 !important;
    font-size: .9rem !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: background .15s !important;
    font-family: inherit !important;
    padding: 0 !important;
}
.fld-ico-btn:hover { background: #2e7d32 !important; color: #fff !important; border-color: #2e7d32 !important; }

/* Progress */
.fld-prog-bar {
    background: #c8e6c9 !important;
    border-radius: 99px !important;
    height: 7px !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
}
.fld-prog-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #2e7d32, #66bb6a) !important;
    border-radius: 99px !important;
    transition: width .35s ease !important;
    min-width: 5px !important;
}
.fld-prog-label {
    text-align: right !important;
    font-size: .76rem !important;
    color: #4a6b4c !important;
    font-weight: 600 !important;
    margin-bottom: 18px !important;
    display: block !important;
}

/* ── Card zone ─────────────────────────── */
.fld-card-zone {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}
.fld-nav-btn {
    flex-shrink: 0 !important;
    width: 46px !important; height: 46px !important;
    border-radius: 50% !important;
    border: 2px solid #c8e6c9 !important;
    background: #fff !important;
    color: #2e7d32 !important;
    font-size: 2rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: background .15s !important;
    font-family: inherit !important;
    padding: 0 !important;
}
.fld-nav-btn:hover:not([disabled]) { background: #2e7d32 !important; color: #fff !important; border-color: #2e7d32 !important; }
.fld-nav-btn[disabled] { opacity: .2 !important; cursor: default !important; }

/* ── THE CARD FACES (no 3D, simple show/hide) ── */
.fld-flipwrap {
    flex: 1 !important;
    position: relative !important;
    min-height: 380px !important;
}

/* Each face: full width, white card, NOT positioned absolute */
/* Only one face is shown at a time via JS .fld-hidden */
.fld-face {
    width: 100% !important;
    min-height: 380px !important;
    background: #fff !important;
    border-radius: 20px !important;
    padding: 28px 30px 24px !important;
    box-shadow: 0 8px 32px rgba(46,125,50,.13) !important;
    display: flex !important;
    flex-direction: column !important;
    border: 2px solid #c8e6c9 !important;
    box-sizing: border-box !important;
    transition: border-color .3s !important;
}
/* Hidden face */
.fld-face.fld-hidden {
    display: none !important;
}

/* Fade-in animation when a face appears */
@keyframes fldFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fld-face:not(.fld-hidden) {
    animation: fldFadeIn .22s ease;
}

/* Face label (PREGUNTA / RESPUESTA) */
.fld-face-tag {
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: #2e7d32 !important;
    margin-bottom: 14px !important;
    display: block !important;
}

/* Card body */
.fld-face-body {
    flex: 1 !important;
    font-size: 1.12rem !important;
    line-height: 1.8 !important;
    color: #1b2e1c !important;
    overflow-y: auto !important;
}
.fld-face-body p:first-child { margin-top: 0 !important; }
.fld-face-body p:last-child  { margin-bottom: 0 !important; }
.fld-face-body img { max-width: 100% !important; border-radius: 8px !important; }

/* Hint */
.fld-hint-wrap  { margin-top: 14px !important; flex-shrink: 0 !important; }
.fld-hint-toggle {
    background: none !important;
    border: 1.5px dashed #a5d6a7 !important;
    color: #4a6b4c !important;
    border-radius: 8px !important;
    padding: 5px 14px !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all .15s !important;
}
.fld-hint-toggle:hover { border-color: #2e7d32 !important; color: #2e7d32 !important; background: #e8f5e9 !important; }
.fld-hint-content {
    display: none;
    margin-top: 8px !important;
    font-size: .83rem !important;
    color: #4a6b4c !important;
    background: #e8f5e9 !important;
    border-left: 3px solid #2e7d32 !important;
    padding: 8px 12px !important;
    border-radius: 0 6px 6px 0 !important;
    line-height: 1.5 !important;
}

/* "Ver respuesta" button */
.fld-flip-btn {
    margin-top: 20px !important;
    align-self: center !important;
    padding: 12px 38px !important;
    background: linear-gradient(135deg, #2e7d32, #43a047) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 99px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(46,125,50,.3) !important;
    transition: transform .15s !important;
    font-family: inherit !important;
    flex-shrink: 0 !important;
}
.fld-flip-btn:hover { transform: scale(1.05) !important; }

/* Difficulty badge */
.fld-diff-badge {
    align-self: flex-start !important;
    padding: 3px 12px !important;
    border-radius: 99px !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    flex-shrink: 0 !important;
}
.fld-diff-badge.easy   { background: #c8e6c9 !important; color: #1b5e20 !important; }
.fld-diff-badge.medium { background: #fff9c4 !important; color: #e65100 !important; }
.fld-diff-badge.hard   { background: #ffcdd2 !important; color: #b71c1c !important; }

/* Answer buttons */
.fld-answers {
    display: flex !important;
    gap: 10px !important;
    margin-top: 20px !important;
    flex-shrink: 0 !important;
}
.fld-ans {
    flex: 1 !important;
    padding: 12px 8px !important;
    border-radius: 12px !important;
    font-size: .85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-align: center !important;
    border: 2px solid transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: inherit !important;
    transition: all .15s !important;
}
.fld-ans span { font-size: .78rem !important; font-weight: 600 !important; }
.fld-ans-no    { background: #fef2f2 !important; color: #c62828 !important; border-color: #ffcdd2 !important; }
.fld-ans-no:hover    { background: #e53935 !important; color: #fff !important; transform: scale(1.04) !important; border-color: #e53935 !important; }
.fld-ans-doubt { background: #fffde7 !important; color: #bf360c !important; border-color: #ffe082 !important; }
.fld-ans-doubt:hover { background: #f9a825 !important; color: #fff !important; transform: scale(1.04) !important; border-color: #f9a825 !important; }
.fld-ans-yes   { background: #f1f8e9 !important; color: #2e7d32 !important; border-color: #c5e1a5 !important; }
.fld-ans-yes:hover   { background: #2e7d32 !important; color: #fff !important; transform: scale(1.04) !important; border-color: #2e7d32 !important; }

/* Stats bar */
.fld-stats-bar {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 16px !important;
}
.fld-stat {
    padding: 5px 14px !important;
    border-radius: 99px !important;
    font-size: .81rem !important;
    font-weight: 700 !important;
}
.fld-stat-no    { background: #fef2f2 !important; color: #c62828 !important; }
.fld-stat-doubt { background: #fffde7 !important; color: #bf360c !important; }
.fld-stat-yes   { background: #f1f8e9 !important; color: #2e7d32 !important; }
.fld-stat-pend  { background: #e8f5e9 !important; color: #4a6b4c !important; }

/* Results */
.fld-results {
    display: none;
    text-align: center !important;
    padding: 20px 0 8px !important;
}
.fld-res-emoji  { font-size: 3.5rem !important; margin-bottom: 8px !important; display: block !important; }
.fld-res-title  { font-size: 1.45rem !important; font-weight: 800 !important; margin: 0 0 18px !important; color: #1b2e1c !important; }
.fld-res-boxes  { display: flex !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; margin-bottom: 22px !important; }
.fld-res-box {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    background: #e8f5e9 !important; border-radius: 12px !important; padding: 14px 18px !important;
    min-width: 76px !important; border: 1.5px solid #c8e6c9 !important;
}
.fld-res-box .rn { font-size: 1.85rem !important; font-weight: 800 !important; display: block !important; }
.fld-res-box .rl { font-size: .7rem !important; color: #4a6b4c !important; font-weight: 600 !important; margin-top: 3px !important; display: block !important; }
.rno .rn    { color: #c62828 !important; }
.rdoubt .rn { color: #bf360c !important; }
.ryes .rn   { color: #2e7d32 !important; }
.rscore .rn { color: #2e7d32 !important; }
.fld-res-actions { display: flex !important; gap: 12px !important; justify-content: center !important; flex-wrap: wrap !important; }
.fld-btn {
    padding: 11px 28px !important;
    border-radius: 99px !important;
    border: none !important;
    font-size: .93rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: transform .15s !important;
}
.fld-btn-pri { background: linear-gradient(135deg, #2e7d32, #43a047) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(46,125,50,.25) !important; }
.fld-btn-pri:hover { transform: scale(1.04) !important; color: #fff !important; }
.fld-btn-sec { background: #fff !important; color: #2e7d32 !important; border: 2px solid #2e7d32 !important; }
.fld-btn-sec:hover { background: #2e7d32 !important; color: #fff !important; }

/* Slide animations */
@keyframes fldR { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
@keyframes fldL { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }
.fld-face.anim-r { animation: fldR .22s ease !important; }
.fld-face.anim-l { animation: fldL .22s ease !important; }

/* Responsive */
@media (max-width: 640px) {
    .fld-modal-inner { padding: 16px 12px !important; max-height: 96vh !important; }
    .fld-face        { padding: 18px 14px !important; min-height: 300px !important; }
    .fld-card-zone   { gap: 5px !important; }
    .fld-nav-btn     { width: 36px !important; height: 36px !important; font-size: 1.5rem !important; }
    .fld-groups-grid { grid-template-columns: 1fr !important; }
    .fld-answers     { gap: 6px !important; }
    .fld-ans         { padding: 9px 5px !important; font-size: .78rem !important; }
}