/* ==========================================================================
   FicVault · componentes "Grabado" (kit + menú ⋯ + ventanas y hojas)
   Copiar a app/static/css/componentes.css y enlazar DESPUÉS de tokens.css.
   Fuente de verdad: los .dc.html de Page 3 (referencia/Ventana.dc.html y
   referencia/LibroMenu.dc.html). Son las mismas clases (prefijo fv-): aquí solo
   cambia que los colores salen de tokens.css (claro/oscuro con data-theme) y que
   las ventanas y menús ya flotan de verdad. Si hay diferencia, manda el .dc.html.

   Uso mínimo:
   - Todo lo nuevo va dentro de un elemento con class="fv" (fija letra, color y resets).
   - Los íconos son <svg class="fv-ic"><use href="#fv-i-NOMBRE"></use></svg> y piden
     incluir una vez por página la plantilla iconos.html.
   - Tema y acento: los mismos <html data-theme data-accent> de tokens.css.
   Parte 1: valores nuevos · Parte 2: componentes (idénticos al diseño) ·
   Parte 3: la capa de la web (controles reales, ventana/hoja, menú, avisos).
   ========================================================================== */

/* ---------- Parte 1 · valores que tokens.css no trae ---------- */
:root{
  --pri-h:#46423C;            /* botón principal al pasar el cursor */
  --pri-a:#14130F;            /* botón principal presionado */
  --on-pri-link:#E0C99A;      /* enlace dentro del toast (fondo oscuro) */
  --on-error:#F8F4EB;         /* texto sobre rojo lleno */
  --err-bg:rgba(142,59,47,.10);
  --gold-bg:rgba(197,164,109,.30);
  --ring:rgba(197,164,109,.35);
  --hov:#E6DDCA;             /* fila o botón con el cursor encima */
  --veil:rgba(241,234,221,.66);  /* velo detrás de ventanas (con 6 px de desenfoque) */
  --shadow:0 34px 60px -38px rgba(0,0,0,.45);
  --shadow-pop:0 24px 44px -22px rgba(0,0,0,.45);
}
[data-theme="dark"]{
  --pri-h:#FFFDF6;
  --pri-a:#D8CFBD;
  --on-pri-link:#7A5C24;
  --on-error:#232124;
  --err-bg:rgba(231,160,146,.14);
  --gold-bg:rgba(197,164,109,.28);
  --ring:rgba(197,164,109,.35);
  --hov:rgba(239,232,218,.10);
  --veil:rgba(35,33,36,.68);
  --shadow:0 34px 60px -38px rgba(0,0,0,.85);
  --shadow-pop:0 24px 44px -22px rgba(0,0,0,.8);
}

/* ---------- Parte 2 · componentes ---------- */

.fv,.fv *{box-sizing:border-box}
.fv{font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.45;color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.fv :where(button,input,select,textarea){font:inherit;color:inherit}
.fv :where(button){margin:0;cursor:pointer}
.fv :where(p,h1,h2,h3,h4){margin:0}

.fv-ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.fv-ic-s{width:18px;height:18px}
.fv-ic-l{width:26px;height:26px}
.fv-serif{font-family:'Cormorant Garamond',Georgia,serif}
.fv-lora{font-family:Lora,Georgia,serif}
.fv-eyebrow{margin:0;font:700 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink)}
.fv-cap{font:700 10.5px/1.25 Inter,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.fv-hl{box-shadow:inset 0 -.3em 0 rgba(197,164,109,.5)}
.fv-muted{color:var(--muted)}
.fv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fv-link{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--hl);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.fv-link:hover{text-decoration-color:var(--text)}
.fv :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.is-focus{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- botones ---------- */
.fv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:99px;background:none;color:var(--text);font:600 15px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .06s}
.fv-btn .fv-ic{width:20px;height:20px}
.fv-form{min-height:50px;padding:0 26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.fv-sm{min-height:40px;padding:0 16px;font-size:13px}
.fv-pri{background:var(--pri);color:var(--on-pri)}
.fv-pri:hover,.fv-pri.is-hover{background:var(--pri-h)}
.fv-pri:active,.fv-pri.is-active{background:var(--pri-a);transform:translateY(1px)}
.fv-out{border-color:var(--text);color:var(--text)}
.fv-out:hover,.fv-out.is-hover{background:var(--hov)}
.fv-out:active,.fv-out.is-active{background:var(--gold-bg);transform:translateY(1px)}
.fv-gh{color:var(--text);text-decoration:underline;text-decoration-color:var(--hl);text-decoration-thickness:2px;text-underline-offset:5px;padding:0 14px}
.fv-gh:hover,.fv-gh.is-hover{background:var(--hov);text-decoration-color:var(--text)}
.fv-gh:active,.fv-gh.is-active{background:var(--gold-bg)}
.fv-dg{border-color:var(--error);color:var(--error)}
.fv-dg:hover,.fv-dg.is-hover{background:var(--err-bg)}
.fv-dg:active,.fv-dg.is-active{background:var(--err-bg);box-shadow:inset 0 0 0 1px var(--error);transform:translateY(1px)}
.fv-dgf{background:var(--error);color:var(--on-error)}
.fv-dgf:hover,.fv-dgf.is-hover{filter:brightness(1.12)}
.fv-dgf:active,.fv-dgf.is-active{filter:brightness(.88);transform:translateY(1px)}
.fv-btn:disabled,.fv-btn.is-off{background:none;border:1px dashed var(--line);color:var(--muted);opacity:.8;cursor:not-allowed;text-decoration:none;transform:none;filter:none;box-shadow:none}
.fv-btn.is-busy{pointer-events:none}
.fv-spin{display:inline-block;flex:none;width:20px;height:20px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:fv-rot .9s linear infinite}
.fv-spin-s{width:14px;height:14px;border-width:2px}
.fv-spin-l{width:34px;height:34px;border-width:2.5px}
@keyframes fv-rot{to{transform:rotate(360deg)}}
.fv-ib{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid transparent;border-radius:50%;background:none;color:var(--text);cursor:pointer;transition:background-color .15s}
.fv-ib:hover,.fv-ib.is-hover{background:var(--hov)}
.fv-ib:active,.fv-ib.is-active{background:var(--gold-bg)}
.fv-ib.line{border-color:var(--text)}
.fv-ib.is-open{background:var(--hov)}
.fv-fab{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 22px;border:0;border-radius:99px;background:var(--pri);color:var(--on-pri);font:600 15px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;box-shadow:0 14px 28px -12px rgba(0,0,0,.55)}

/* ---------- campos ---------- */
.fv-fld{display:block}
.fv-lb{display:block;margin-bottom:6px;font:700 10.5px/1.25 Inter,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.fv-lb i{font-style:normal;font-weight:500;letter-spacing:.06em;text-transform:none}
.fv-in{display:flex;align-items:center;width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--input);color:var(--text);font:400 16px/1 Inter,system-ui,sans-serif;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.fv-in::placeholder,.fv-in .ph{color:var(--muted);opacity:.75}
.fv-in:hover,.fv-in.is-hover{border-color:var(--text)}
.fv-in:focus,.fv-in.is-focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--ring);outline:none}
.fv-in.is-bad{border-color:var(--error)}
.fv-in:disabled,.fv-in.is-off{background:none;border-style:dashed;color:var(--muted);cursor:not-allowed}
.fv-in .caret{display:inline-block;width:1px;height:20px;margin-left:1px;background:var(--text)}
.fv-help{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.fv-err{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:13.5px;line-height:1.4;color:var(--error)}
.fv-err .fv-ic{width:18px;height:18px;margin-top:1px}
.fv-pw{position:relative;display:block}
.fv-pw .fv-in{padding-right:48px}
.fv-eye{position:absolute;right:2px;top:1px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--muted)}
.fv-search{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 8px 0 16px;border:1px solid var(--text);border-radius:99px;background:none;color:var(--muted);transition:box-shadow .15s}
.fv-search .v{flex:1;min-width:0;font:400 15px/1 Inter,system-ui,sans-serif;color:var(--text)}
.fv-search .v.ph{color:var(--muted);opacity:.85}
.fv-search:hover,.fv-search.is-hover{background:var(--hov)}
.fv-search.is-focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--ring);outline:none;background:none}
.fv-sel{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:46px;padding:0 12px 0 14px;border:1px solid var(--line);border-radius:12px;background:var(--input);color:var(--text);font:400 16px/1 Inter,system-ui,sans-serif;text-align:left}
.fv-sel:hover,.fv-sel.is-hover{border-color:var(--text)}
.fv-sel.is-open{border-color:var(--ink);box-shadow:0 0 0 3px var(--ring)}
.fv-sel.is-off{background:none;border-style:dashed;color:var(--muted);cursor:not-allowed}
.fv-sel .fv-ic{color:var(--muted);width:20px;height:20px}
.fv-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:190px;padding:18px;border:1px dashed var(--text);border-radius:16px;background:none;text-align:center;color:var(--muted);font-size:14px}
.fv-drop .big{font:600 19px/1.15 'Cormorant Garamond',Georgia,serif;color:var(--text)}
.fv-drop .disc{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--text);border-radius:50%;color:var(--text)}
.fv-drop.is-over{background:var(--gold-bg);border-style:solid;border-color:var(--ink)}
.fv-drop.is-bad{border-color:var(--error);background:var(--err-bg)}

/* ---------- casillas, opciones, interruptor ---------- */
.fv-chk{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.4;cursor:pointer}
.fv-box{position:relative;flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:-1px;border:1px solid var(--text);border-radius:6px;background:var(--input);color:#1F1D1B;transition:box-shadow .15s}
.fv-box .fv-ic{width:18px;height:18px;stroke-width:2.4;opacity:0}
.fv-box.on{background:var(--gold)}
.fv-box.on .fv-ic{opacity:1}
.fv-box:hover,.fv-box.is-hover{box-shadow:0 0 0 4px var(--ring)}
.fv-box.is-bad{border-color:var(--error);box-shadow:0 0 0 3px var(--err-bg)}
.fv-box.is-off{border-style:dashed;border-color:var(--line);background:none;color:var(--muted)}
.fv-rad{position:relative;flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:-1px;border:1px solid var(--text);border-radius:50%;background:var(--input)}
.fv-rad i{display:block;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1px var(--text);opacity:0}
.fv-rad.on i{opacity:1}
.fv-rad:hover,.fv-rad.is-hover{box-shadow:0 0 0 4px var(--ring)}
.fv-rad.is-off{border-style:dashed;border-color:var(--line);background:none}
.fv-sw{position:relative;flex:none;display:inline-block;width:46px;height:26px;padding:0;border:0;border-radius:13px;background:none;box-shadow:inset 0 0 0 1px var(--text);transition:background-color .2s}
.fv-sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--text);transition:left .2s}
.fv-sw.on{background:var(--gold);box-shadow:inset 0 0 0 1px var(--text)}
.fv-sw.on i{left:23px;background:#1F1D1B}
.fv-sw:hover,.fv-sw.is-hover{box-shadow:inset 0 0 0 1px var(--text),0 0 0 4px var(--ring)}
.fv-sw.is-off{box-shadow:inset 0 0 0 1px var(--line);opacity:.7;cursor:not-allowed}
.fv-sw.is-off i{background:var(--muted)}
.fv-sw.on.is-off{background:var(--gold-bg)}

/* ---------- selectores ---------- */
.fv-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:99px;background:none}
.fv-seg button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:0;border-radius:99px;background:none;color:var(--muted);font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.fv-seg button:hover,.fv-seg button.is-hover{background:var(--hov);color:var(--text)}
.fv-seg button.on{background:var(--pri);color:var(--on-pri)}
.fv-seg button.is-off{color:var(--muted);opacity:.55;cursor:not-allowed;background:none}
.fv-seg.big{display:flex}
.fv-seg.big button{flex:1;min-height:44px}
.fv-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:99px;background:none;color:var(--text);font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.fv-chip:hover,.fv-chip.is-hover{border-color:var(--text);background:var(--hov)}
.fv-chip.on{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}
.fv-chip .n{font-size:12px;font-weight:500;opacity:.85}
.fv-chip .dot{width:10px;height:10px;border-radius:50%;flex:none}
.fv-chip.add{border-style:dashed;color:var(--gold-ink)}
.fv-chip.is-off{border-style:dashed;color:var(--muted);opacity:.8;cursor:not-allowed;background:none}
.fv-opt{display:flex;align-items:center;gap:16px;width:100%;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:none;color:var(--text);text-align:left;text-decoration:none;transition:border-color .15s,background-color .15s}
.fv-opt .ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--ink)}
.fv-opt .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.fv-opt .t{font:600 21px/1.1 'Cormorant Garamond',Georgia,serif}
.fv-opt .d{font-size:13.5px;line-height:1.4;color:var(--muted)}
.fv-opt .go{margin-left:auto;flex:none;display:grid;place-items:center;width:40px;height:40px;color:var(--text)}
.fv-opt:hover,.fv-opt.is-hover{border-color:var(--text);background:var(--hov)}
.fv-opt:active,.fv-opt.is-active{background:var(--gold-bg)}
.fv-opt.sel{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.fv-opt.pri{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}
.fv-opt.pri .d{color:var(--on-pri);opacity:.85}
.fv-opt.pri .ico{border-color:var(--on-pri);color:var(--on-pri)}
.fv-opt.pri .go{color:var(--on-pri)}
.fv-opt.pri:hover,.fv-opt.pri.is-hover{background:var(--pri-h)}
.fv-opt.is-off{border-style:dashed;color:var(--muted);cursor:not-allowed;background:none}
.fv-opt.is-off .ico{border-style:dashed;color:var(--muted)}

/* ---------- progreso, insignias, avisos ---------- */
.fv-bar{display:block;position:relative;height:10px;border:1px solid var(--line);border-radius:99px;overflow:hidden;background:none}
.fv-bar i{display:block;height:100%;border-radius:99px;background:var(--hl)}
.fv-bar.thin{height:6px}
.fv-bar.good{border-color:var(--good)}
.fv-bar.good i{background:var(--good)}
.fv-bar.bad{border-color:var(--error)}
.fv-bar.bad i{background:var(--error)}
.fv-bar.ind i{width:36%;animation:fv-slide 1.5s ease-in-out infinite}
@keyframes fv-slide{0%{margin-left:-36%}100%{margin-left:100%}}
.fv-bar.cv{position:absolute;left:0;right:0;bottom:0;height:6px;border:0;border-radius:0;background:rgba(0,0,0,.4)}
.fv-bar.cv i{border-radius:0}
.fv-bar.off{border-style:dashed;background:none}
.fv-badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border:1px solid transparent;border-radius:99px;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;white-space:nowrap}
.fv-badge .fv-ic{width:14px;height:14px;stroke-width:2.2}
.fv-badge.cv{background:rgba(41,40,43,.88);color:#F7F3EC}
.fv-badge.line{border-color:var(--line);color:var(--text)}
.fv-badge.gold{border-color:var(--gold);color:var(--gold-ink);background:rgba(197,164,109,.14)}
.fv-badge.ok{border-color:var(--good);color:var(--good)}
.fv-badge.bad{border-color:var(--error);color:var(--error)}
.fv-badge.wait{border-style:dashed;border-color:var(--line);color:var(--muted)}
.fv-badge.n{min-width:24px;justify-content:center;background:var(--sunken);color:var(--text);font-size:12px}
.fv-done{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--good);color:var(--on-good)}
.fv-done .fv-ic{width:16px;height:16px;stroke-width:2.4}
.fv-al{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--al,var(--ink));border-radius:16px;background:var(--card);color:var(--text)}
.fv-al>.fv-ic{margin-top:1px;color:var(--al,var(--ink))}
.fv-al .tx{flex:1;min-width:0}
.fv-al b{display:block;font:600 15px/1.3 Inter,system-ui,sans-serif}
.fv-al p{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.fv-al .act{display:inline-block;margin-top:8px;font-size:14px}
.fv-al .x{margin:-8px -8px -8px 0}
.fv-al.ok{--al:var(--good)}
.fv-al.warn{--al:var(--gold-ink)}
.fv-al.bad{--al:var(--error)}
.fv-toast{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:6px 8px 6px 18px;border-radius:99px;background:var(--pri);color:var(--on-pri);font:500 14.5px/1.3 Inter,system-ui,sans-serif;box-shadow:0 18px 34px -14px rgba(0,0,0,.55)}
.fv-toast>.fv-ic{width:20px;height:20px}
.fv-toast .act{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:99px;color:var(--on-pri-link);font-weight:700;letter-spacing:.06em;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.fv-toast .x{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:var(--on-pri)}
.fv-sk{border:1px solid var(--line);background:repeating-linear-gradient(135deg,transparent 0 6px,var(--line) 6px 7px);opacity:.55;animation:fv-pulse 1.6s ease-in-out infinite}
@keyframes fv-pulse{0%,100%{opacity:.35}50%{opacity:.65}}
.fv-dots{display:inline-flex;gap:6px;align-items:center}
.fv-dots i{display:block;width:7px;height:7px;border-radius:50%;background:var(--ink);animation:fv-dot 1.2s ease-in-out infinite}
.fv-dots i:nth-child(2){animation-delay:.15s}
.fv-dots i:nth-child(3){animation-delay:.3s}
@keyframes fv-dot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}

/* ---------- menús ---------- */
.fv-menu{display:flex;flex-direction:column;min-width:240px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-pop)}
.fv-mi{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--text);font:500 15px/1.2 Inter,system-ui,sans-serif;text-align:left;text-decoration:none;cursor:pointer}
.fv-mi>.fv-ic{width:20px;height:20px;color:var(--ink)}
.fv-mi .r{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.fv-mi .r .fv-ic{width:18px;height:18px;color:var(--muted)}
.fv-mi:hover,.fv-mi.is-hover{background:var(--hov)}
.fv-mi:active,.fv-mi.is-active{background:var(--gold-bg)}
.fv-mi:focus-visible,.fv-mi.is-focus{outline:2px solid var(--focus);outline-offset:-2px}
.fv-mi.is-off{color:var(--muted);opacity:.6;cursor:not-allowed}
.fv-mi.is-off:hover{background:none}
.fv-mi.dg{color:var(--error)}
.fv-mi.dg>.fv-ic{color:var(--error)}
.fv-mi.dg:hover,.fv-mi.dg.is-hover{background:var(--err-bg)}
.fv-mi.sel{font-weight:700}
.fv-mi.sel .r .fv-ic{color:var(--text)}
.fv-hr{display:block;height:1px;margin:6px 8px;border:0;background:var(--line)}
.fv-mh{padding:10px 12px 6px}

/* ---------- portadas ---------- */
.fv-mc{position:relative;flex:none;display:block;overflow:hidden;border-radius:2px 4px 4px 2px;box-shadow:0 1px 0 rgba(0,0,0,.35),0 8px 14px -10px rgba(0,0,0,.5)}
.fv-mc .sp{position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(255,255,255,.2) 45%,rgba(0,0,0,0))}
.fv-mc .ttl{position:absolute;left:12%;right:8%;bottom:9%;padding-top:5px;border-top:1px solid currentColor;font:600 11px/1.15 'Cormorant Garamond',Georgia,serif}
.fv-mc.big .ttl{font-size:21px;padding-top:9px;bottom:10%}
.fv-mc.big .sp{width:12px}

/* ---------- ventana y hoja inferior ---------- */
.fv-veil{position:absolute;inset:0;background:var(--veil);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fv-win{position:relative;display:flex;flex-direction:column;width:var(--w,560px);max-width:100%;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:28px 32px 26px}
.fv-wh{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.fv-wt{display:flex;align-items:center;gap:14px;margin:0;font:500 32px/1.1 'Cormorant Garamond',Georgia,serif;letter-spacing:0}
.fv-wt .sp{display:block;width:48px;color:var(--ink)}
.fv-wx{margin:-8px -12px 0 0}
.fv-bk{display:flex;align-items:center;gap:14px;margin-top:18px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fv-bk .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.fv-bk b{font:600 20px/1.15 'Cormorant Garamond',Georgia,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv-bk small{font-size:13px;color:var(--muted)}
.fv-bk .r{margin-left:auto;text-align:right}
.fv-wb{display:flex;flex-direction:column;gap:18px;padding-top:18px}
.fv-wf{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.fv-wf.split{justify-content:space-between;align-items:center}

/* ---------- contenido de las ventanas ---------- */
.fv-bag{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:16px}
.fv-bag .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fv-bag .top>div{display:flex;flex-direction:column;gap:6px}
.fv-bag .num{font:500 14px/1.2 Inter,system-ui,sans-serif;color:var(--muted)}
.fv-bag .num b{margin-right:6px;font:600 32px/1 'Cormorant Garamond',Georgia,serif;color:var(--text)}
.fv-langs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:end}
.fv-langs .arr{display:grid;place-items:center;width:30px;height:46px;color:var(--muted)}
.fv-cost{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.fv-cost .row{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;border-top:1px solid var(--line)}
.fv-cost .row:first-child{border-top:0}
.fv-cost .n{flex:none;width:26px;font:italic 500 21px/1 'Cormorant Garamond',Georgia,serif;color:var(--muted)}
.fv-cost .t{flex:1;min-width:0;font:600 15px/1.2 Lora,Georgia,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv-cost .w{flex:none;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.fv-cost .sum{background:var(--sunken)}
.fv-cost .sum .t{font:600 14px/1.2 Inter,system-ui,sans-serif}
.fv-cost .sum .w{font-size:14px;font-weight:700;color:var(--text)}
.fv-cost .sum.bad .w{color:var(--error)}
/* ventana Traducir: «Todo lo posible» / «Elegir páginas» y la barra de páginas */
.fv-tr-modo{display:flex;flex-direction:column;gap:8px}
.fv-tr-modo .fv-help{margin:0}
.fv-tr-pags{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:16px}
.fv-tr-pags .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fv-tr-pags .fv-in.sm{width:84px;height:40px;text-align:center;font-variant-numeric:tabular-nums}
.fv-tr-pags .fv-help{margin:0}
/* Traducir, vista simple: la frase de cuánto alcanza hoy y el plegado «Más opciones» */
.fv-tr-resumen{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--sunken);font:400 15.5px/1.5 Lora,Georgia,serif;color:var(--text)}
.fv-tr-resumen b{font-weight:600}
.fv-tr-mas{border-top:1px solid var(--line)}
.fv-tr-mas>summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font:500 14px/1.2 Inter,system-ui,sans-serif;color:var(--muted)}
.fv-tr-mas>summary::-webkit-details-marker{display:none}
.fv-tr-mas>summary:hover{color:var(--text)}
.fv-tr-mas>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
.fv-tr-mas>summary .chev{width:18px;height:18px;transition:transform .2s}
.fv-tr-mas[open]>summary .chev{transform:rotate(180deg)}
.fv-tr-mas-in{display:flex;flex-direction:column;gap:18px;padding:4px 0 6px}
@media (prefers-reduced-motion:reduce){.fv-tr-mas>summary .chev{transition:none}}
.fv-range{width:100%;height:28px;margin:0;background:none;accent-color:var(--pri);cursor:pointer}
.fv-range:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.fv-range-m{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fv-cost .w.parte{color:var(--text)}
.fv-chl{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 26px),rgba(0,0,0,.25));mask-image:linear-gradient(#000 calc(100% - 26px),rgba(0,0,0,.25))}
.fv-chl .row{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 16px;border-top:1px solid var(--line)}
.fv-chl .row:first-child{border-top:0}
.fv-chl .n{flex:none;width:30px;font:italic 500 22px/1 'Cormorant Garamond',Georgia,serif;color:var(--muted)}
.fv-chl .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.fv-chl .tx b{font:600 15.5px/1.2 Lora,Georgia,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv-chl .tx small{font-size:12.5px;color:var(--muted)}
.fv-chl .thumb{position:absolute;right:3px;top:8px;width:3px;height:92px;border-radius:3px;background:var(--line)}
.fv-sum{display:flex;flex-direction:column;gap:8px}
.fv-sum .l{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.fv-sum .l b{font:600 22px/1 'Cormorant Garamond',Georgia,serif;color:var(--text)}
.fv-cvr{display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:start}
.fv-cvr .col{display:flex;flex-direction:column;gap:8px}
.fv-fileok{display:flex;gap:16px;align-items:flex-start;min-height:190px;padding:14px;border:1px solid var(--text);border-radius:16px}
.fv-fileok .tx{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:4px}
.fv-fileok .tx b{font:600 14.5px/1.3 Inter,system-ui,sans-serif;word-break:break-all}
.fv-fileok .tx small{font-size:13px;color:var(--muted)}
.fv-fileok .tx .fv-btn{align-self:flex-start;margin-top:10px}
.fv-cfm{font:400 16px/1.55 Lora,Georgia,serif;color:var(--text)}
.fv-cfm b{font-weight:600}
.fv-list{display:flex;flex-direction:column;gap:12px}
.fv-colrow{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;font:500 15px/1.2 Inter,system-ui,sans-serif}

.fv-win .fv-hd{display:none}
.fv-wh,.fv-bk,.fv-wf{flex:none}

/* --- ajustes del contenido de las ventanas --- */
.fv-cost .t small{display:block;margin-top:2px;font:400 12.5px/1.2 Inter,system-ui,sans-serif;color:var(--muted)}
.fv-cost .row.sum{min-height:58px}

/* --- pie con resumen de costo (Traducir) --- */
.fv-wf.has-sum{justify-content:space-between;align-items:center;gap:20px}
.fv-wf .btns{display:flex;gap:12px}
.fv-sumline{display:flex;flex-direction:column;gap:3px;min-width:0}
.fv-sumline>div{display:flex;flex-direction:column;gap:3px}
.fv-sumline b{font:600 25px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:0}
.fv-sumline small{font-size:12.5px;line-height:1.3;color:var(--muted)}
.fv-sumline.bad b{color:var(--error)}



.fv-btn.is-busy.fv-gh{text-decoration:none}
.fv-btn.is-busy{opacity:.92}
@media (prefers-reduced-motion:reduce){
  .fv-spin,.fv-dots i,.fv-sk,.fv-bar.ind i{animation:none}
  .fv-btn,.fv-in,.fv-sw,.fv-sw i,.fv-opt{transition:none}
}

/* ==========================================================================
   PARTE 3 · LO QUE EL DISEÑO DIBUJA QUIETO, YA FUNCIONANDO EN LA WEB
   Controles reales (input, select, casilla…), capas (ventana, hoja, menú,
   aviso) y el paso de ventana a hoja inferior en celular (menos de 860 px).
   No cambia ninguna medida del diseño: solo la hace posible con elementos reales.
   ========================================================================== */

/* ---------- controles reales ---------- */
.fv-in[aria-invalid="true"]{border-color:var(--error)}
textarea.fv-in{height:auto;min-height:96px;padding:12px 14px;line-height:1.45;resize:vertical;display:block}
.fv-selw{position:relative;display:block}
.fv-selw .fv-sel{display:block;padding-right:42px;cursor:pointer;text-overflow:ellipsis;-webkit-appearance:none;appearance:none}
.fv-selw .chev{position:absolute;right:12px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--muted);pointer-events:none}
.fv-selw .fv-sel:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--ring)}
.fv-selw .fv-sel:disabled{background:none;border-style:dashed;color:var(--muted);cursor:not-allowed}
.fv-sel option{background:var(--card);color:var(--text)}
.fv-search input{flex:1;min-width:0;height:46px;padding:0;border:0;background:none;outline:none;font:400 15px/1 Inter,system-ui,sans-serif;color:var(--text)}
.fv-search input::placeholder{color:var(--muted);opacity:.85}
.fv-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--ring)}
.fv-eye[aria-pressed="true"]{color:var(--text)}

/* casilla y opción: el <input> real va oculto (clase fv-sr) y la marca se pinta con el hermano que sigue */
.fv-chk{position:relative}
.fv-err[hidden],.fv-help[hidden]{display:none}
.fv [hidden]{display:none!important}   /* cualquier cosa del kit con el atributo hidden se oculta de verdad (filas del menú, separadores, etc.) */
.fv-chk:hover .fv-box,.fv-chk:hover .fv-rad{box-shadow:0 0 0 4px var(--ring)}
.fv-chk input:checked+.fv-box{background:var(--gold)}
.fv-chk input:checked+.fv-box .fv-ic{opacity:1}
.fv-chk input:indeterminate+.fv-box{background:var(--gold)}
.fv-box .mn{display:none}
.fv-chk input:indeterminate+.fv-box .ck{display:none}
.fv-chk input:indeterminate+.fv-box .mn{display:block;opacity:1}
.fv-chk input:checked+.fv-rad i{opacity:1}
.fv-chk input:focus-visible+.fv-box,.fv-chk input:focus-visible+.fv-rad{outline:2px solid var(--focus);outline-offset:2px}
.fv-chk input[aria-invalid="true"]+.fv-box{border-color:var(--error);box-shadow:0 0 0 3px var(--err-bg)}
.fv-chk input:disabled+.fv-box,.fv-chk input:disabled+.fv-rad{border-style:dashed;border-color:var(--line);background:none;color:var(--muted);box-shadow:none}
.fv-chk input:disabled~span{color:var(--muted)}
.fv-chk:has(input:disabled){cursor:not-allowed}
.fv-chk.sw{align-items:center;justify-content:space-between;gap:16px}
/* interruptor: <button role="switch" aria-checked> */
.fv-sw[aria-checked="true"]{background:var(--gold);box-shadow:inset 0 0 0 1px var(--text)}
.fv-sw[aria-checked="true"] i{left:23px;background:#1F1D1B}
.fv-sw:disabled{box-shadow:inset 0 0 0 1px var(--line);opacity:.7;cursor:not-allowed}
.fv-sw:disabled i{background:var(--muted)}
.fv-sw[aria-checked="true"]:disabled{background:var(--gold-bg)}

/* selectores */
.fv-seg button[aria-checked="true"],.fv-seg button[aria-pressed="true"]{background:var(--pri);color:var(--on-pri)}
.fv-seg button:disabled{color:var(--muted);opacity:.55;cursor:not-allowed;background:none}
.fv-seg.big button{min-width:0}
.fv-chip[aria-pressed="true"]{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}
.fv-chip:disabled{border-style:dashed;color:var(--muted);opacity:.8;cursor:not-allowed;background:none}
.fv-opt[aria-checked="true"],.fv-opt[aria-pressed="true"]{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.fv-opt[aria-disabled="true"],.fv-opt.is-off{border-style:dashed;color:var(--muted);cursor:not-allowed;background:none}
.fv-opt[aria-disabled="true"] .ico,.fv-opt.is-off .ico{border-style:dashed;color:var(--muted)}
.fv-opt{cursor:pointer;font:inherit}
.fv-opt[aria-disabled="true"],.fv-opt.is-off{cursor:not-allowed}
.fv-opt.is-off .fv-link{cursor:pointer;color:var(--text)}

/* zona para soltar archivos: <label class="fv-drop"> con el <input type="file" class="fv-sr"> adentro */
.fv-drop[data-over="true"]{background:var(--gold-bg);border-style:solid;border-color:var(--ink)}
.fv-drop .st-idle,.fv-drop .st-over{display:flex;flex-direction:column;align-items:center;gap:8px}
.fv-drop .st-over{display:none}
.fv-drop[data-over="true"] .st-idle{display:none}
.fv-drop[data-over="true"] .st-over{display:flex}
.fv-hidden{display:none!important}

/* ---------- capa: ventana (escritorio) ---------- */
html.fv-lock{overflow:hidden;padding-right:var(--fv-sbw,0)}
.fv-ov{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}
.fv-ov[hidden],.fv-mpop[hidden]{display:none!important}
.fv-ov .fv-win{max-height:100%}
.fv-win .fv-wb{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px;padding-bottom:4px}
.fv-win:focus{outline:none}
.fv-win>form{display:contents}
.fv-mc img{display:block;width:100%;height:100%;object-fit:cover}
@keyframes fv-fade{from{opacity:0}to{opacity:1}}
@keyframes fv-pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fv-rise{from{opacity:.6;transform:translateY(28px)}to{opacity:1;transform:none}}
.fv-ov:not([hidden]) .fv-veil{animation:fv-fade .15s ease-out}
.fv-ov:not([hidden]) .fv-win{animation:fv-pop .18s ease-out}
/* lista de capítulos con desplazamiento real: el degradado de abajo solo mientras queda lista por ver */
.fv-chl{max-height:min(420px,46dvh);overflow:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:none;-ms-overflow-style:none}
.fv-chl::-webkit-scrollbar{display:none;width:0;height:0}
.fv-chl.fade{-webkit-mask-image:linear-gradient(#000 calc(100% - 26px),rgba(0,0,0,.25));mask-image:linear-gradient(#000 calc(100% - 26px),rgba(0,0,0,.25))}
.fv-chl .row{position:relative}
.fv-chl .row.is-now{background:var(--gold-bg)}

/* ---------- capa: menú ⋯ (escritorio: tarjeta flotante; celular: hoja) ---------- */
.fv-mpop{position:fixed;inset:0;z-index:1150}
.fv-mpop .fv-veil{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.fv-mpop .fv-menu{position:fixed;left:0;top:0;width:264px;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.fv-mpop:not([hidden]) .fv-menu{animation:fv-pop .14s ease-out}
.fv-mhead{display:none}
.fv-mi[role="menuitemradio"] .r{visibility:hidden}
.fv-mi[role="menuitemradio"][aria-checked="true"]{font-weight:700}
.fv-mi[role="menuitemradio"][aria-checked="true"] .r{visibility:visible}
.fv-mi[role="menuitemradio"][aria-checked="true"] .r .fv-ic{color:var(--text)}

/* ---------- capa: avisos (toast) ---------- */
.fv-toasts{position:fixed;left:50%;bottom:24px;z-index:1300;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:calc(100vw - 24px);transform:translateX(-50%);pointer-events:none}
.fv-toasts .fv-toast{pointer-events:auto;max-width:100%;animation:fv-pop .18s ease-out}
.fv-toast>span:not(.act){min-width:0}
.fv-toast .act{border:0;background:none;font:inherit;font-weight:700}

/* ---------- celular: la ventana pasa a ser una hoja inferior (menos de 860 px) ---------- */
@media (max-width:859px){
  .fv-ov{align-items:flex-end;padding:0 0 var(--fv-kb,0px)}
  .fv-ov:not([hidden]) .fv-win{animation:fv-rise .2s ease-out}
  .fv-mpop:not([hidden]) .fv-menu{animation:fv-rise .2s ease-out}
  .fv-win{width:100%;max-width:560px;max-height:calc(100dvh - 44px - var(--fv-kb,0px));border-bottom:0;border-radius:30px 30px 0 0;box-shadow:0 -24px 50px -10px rgba(0,0,0,.35);padding:10px 22px 0}
  .fv-win .fv-hd{display:block;flex:none;width:40px;height:4px;margin:0 auto 12px;border-radius:3px;background:var(--line)}
  .fv-win .fv-wt{font-size:28px}
  .fv-win .fv-wt .sp{width:40px}
  .fv-win .fv-wx{margin:-6px -10px 0 0}
  .fv-win .fv-bk{margin-top:14px}
  .fv-win .fv-wb{flex:1 1 auto;overflow:auto;padding-top:16px;gap:18px;min-height:0;scrollbar-width:none}
  .fv-win .fv-wb::-webkit-scrollbar{display:none}
  .fv-win .fv-wb.fade{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent)}
  .fv-win .fv-wf{flex-direction:column-reverse;gap:10px;margin-top:0;padding:16px 0 max(30px,env(safe-area-inset-bottom));border-top:0}
  .fv-win .fv-wf .fv-btn{width:100%;min-height:50px}
  .fv-win .fv-mi,.fv-mpop .fv-mi{min-height:56px;gap:16px;padding:0 8px;font-size:16px}
  .fv-win .fv-mi>.fv-ic,.fv-mpop .fv-mi>.fv-ic{width:22px;height:22px}
  .fv-win .fv-mi .r,.fv-mpop .fv-mi .r{font-size:14px}
  .fv-win .fv-opt{padding:14px 16px}
  .fv-win .fv-seg button{flex:1;min-width:0;padding:0 4px;font-size:11.5px;letter-spacing:.05em}
  .fv-win .fv-cvr{grid-template-columns:minmax(0,1fr);gap:16px}
  .fv-win .fv-cvr .cur{flex-direction:row;align-items:center;justify-content:space-between}
  .fv-win .fv-cvr .cur .fv-mc{width:72px!important;height:108px!important}
  .fv-win .fv-cvr .cur .fv-mc .ttl{font-size:12px;padding-top:5px}
  .fv-win .fv-drop{min-height:170px}
  .fv-win .fv-fileok{min-height:0}
  .fv-win .fv-sum .l{font-size:13.5px}
  .fv-win .fv-wf.has-sum{flex-direction:column;align-items:stretch;gap:12px;padding-top:12px}
  .fv-win .fv-wf.has-sum .btns{flex-direction:column-reverse;gap:10px}
  .fv-win .fv-wf.has-sum .btns .fv-btn{width:100%}
  .fv-win .fv-sumline{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:2px}
  .fv-win .fv-sumline small{text-align:right;max-width:150px}
  .fv-win .fv-bk{margin-top:12px;padding:10px 0}
  .fv-win .fv-wb{padding-top:14px;gap:16px}
  .fv-win .fv-bk .fv-mc{width:34px!important;height:51px!important}
  .fv-win .fv-bag{padding:14px 16px}
  .fv-win .fv-wb .fv-al{order:-1}
  .fv-mpop .fv-veil{background:var(--veil);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .fv-mpop .fv-menu{left:0;top:auto;bottom:0;right:0;width:100%;max-width:560px;min-width:0;max-height:calc(100dvh - 44px);margin:0 auto;padding:10px 22px max(30px,env(safe-area-inset-bottom));border-bottom:0;border-radius:30px 30px 0 0;box-shadow:0 -24px 50px -10px rgba(0,0,0,.35)}
  .fv-mhead{display:block;position:sticky;top:0;z-index:1;margin:-10px -22px 0;padding:10px 22px 10px;background:var(--card)}
  .fv-mhead .fv-hd{display:block;width:40px;height:4px;margin:0 auto 12px;border-radius:3px;background:var(--line)}
  .fv-mhead .fv-wh{align-items:center}
  .fv-mhead .fv-bk{flex:1;margin:0;padding:0;border:0}
  .fv-mhead .fv-wx{margin:0 -10px 0 0}
  .fv-mpop .fv-hr{margin:6px 0}
  .fv-mpop .fv-mh{display:none}
  .fv-seg.big button{padding:0 4px;font-size:11.5px;letter-spacing:.05em}
  .fv-win .fv-hd,.fv-win .fv-wh,.fv-mhead{touch-action:none}
  .fv-win .fv-hd{position:relative}
  .fv-win .fv-hd::after{content:"";position:absolute;left:-60px;right:-60px;top:-10px;bottom:-12px}
  .fv-toasts{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:859px) and (min-width:561px){
  .fv-ov{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .fv-ov .fv-veil,.fv-ov .fv-win,.fv-mpop .fv-menu,.fv-toasts .fv-toast{animation:none!important}
}

/* ---------- convivencia con la web actual (base.html) ----------
   base.html da borde, color y esquinas de 7 px a todos los input de texto, y un aro dorado de foco con !important
   a todos los input, select y textarea. Estas reglas son más específicas que esas, así que dentro de .fv manda el kit.
   Cuando base.html ya no tenga esas reglas se pueden borrar sin que nada cambie. */
.fv input.fv-in{background-color:var(--input);color:var(--text);border:1px solid var(--line);border-radius:12px}
.fv input.fv-in:hover{border-color:var(--text)}
.fv input.fv-in[aria-invalid="true"],.fv input.fv-in.is-bad{border-color:var(--error)}
.fv input.fv-in:disabled,.fv input.fv-in.is-off{background:none;border-style:dashed;color:var(--muted)}
.fv .fv-in:focus,.fv .fv-selw .fv-sel:focus{border-color:var(--ink)!important;box-shadow:0 0 0 3px var(--ring)!important}
.fv .fv-in[aria-invalid="true"]:focus{border-color:var(--error)!important}
.fv .fv-search input,.fv .fv-search input:focus{border:0!important;border-radius:0;box-shadow:none!important;background:none}

/* ==========================================================================
   FicVault · PWA y estilos sin conexión
   ========================================================================== */
.fv-badge.off {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 4;
  background: rgba(43, 41, 38, .92);
  color: #F1EADD;
  border: 1px solid var(--gold);
  font-size: 10px;
  padding: 0 8px;
  min-height: 20px;
}
.fv-offline-banner {
  display: none;
  background: #2B2926;
  color: #F1EADD;
  border-bottom: 1px solid var(--gold);
  padding: 8px 16px;
  font: 500 13px/1.4 Inter, system-ui, sans-serif;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.fv-offline-banner.visible {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body.is-offline [data-ventana="traducir"],
body.is-offline [data-fv-open="w-traducir"],
body.is-offline [data-fv-open="w-importar"],
body.is-offline .fv-fab {
  opacity: .45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Aviso «Hay una versión nueva · Recargar» en pantallas sin fv-ui.js (el lector). En las demás se usa el toast normal. */
.fv-version-nueva{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:1300;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px 0 18px;border-radius:99px;
  background:#2B2926;color:#F1EADD;font:500 14px/1.3 Inter,system-ui,sans-serif;box-shadow:0 18px 34px -14px rgba(0,0,0,.55);transform:translateX(-50%);animation:fv-version-pop .18s ease-out}
@keyframes fv-version-pop{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%)}}
.fv-version-nueva button{min-height:36px;padding:0 12px;border:0;border-radius:99px;background:none;color:#F1EADD;font:700 13px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.fv-version-nueva button:hover{background:rgba(255,255,255,.1)}

/* Ventana «Reportar un problema» (shell/ventana_reportar.html): contador, casillas, aviso de lo que se envía y «Gracias» */
.fv-rep .fv-rep-cnt{text-align:right;font-variant-numeric:tabular-nums}
.fv-rep .fv-rep-tags{display:grid;gap:10px;margin:14px 0 0;padding:0;border:0;min-width:0}
.fv-rep .fv-rep-tags legend{padding:0;margin-bottom:8px}
.fv-rep .fv-rep-opc{font-weight:400;color:var(--muted)}
.fv-rep .fv-rep-auto{margin:16px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.fv-rep .fv-rep-ok{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 0 32px;text-align:center;animation:fv-pop .18s ease-out}
.fv-rep .fv-rep-ok[hidden]{display:none}
.fv-rep .fv-rep-ok .fv-ic{width:40px;height:40px;color:var(--good);stroke-width:1.6}
.fv-rep .fv-rep-ok b{font:600 22px/1.2 var(--ff-display,'Cormorant Garamond',Georgia,serif)}
@media (prefers-reduced-motion:reduce){.fv-rep .fv-rep-ok{animation:none}}