/* ═══════════════════════════════════════════════════════════════
   FICHAS TÉCNICAS · EscandUP — capa visual compartida
   SYM HostelGestión

   Una sola hoja que hace tres cosas, en este orden:
     1. Remapea los tokens de las pantallas (--ground, --surface, --ink,
        --accent…) a la paleta de EscandUP (navy, dorado, crema), en claro,
        oscuro e impresión. Las pantallas no tocan sus estilos: heredan.
     2. Dibuja el armazón propio: sidebar navy colapsable, topbar, botonera
        inferior en móvil, iconos SVG.
     3. Afina los componentes que las pantallas ya tienen (botones, paneles,
        tarjetas, asistente, modales) para que parezcan de EscandUP.

   Se carga DESPUÉS del <style> propio de cada pantalla.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root{
  --navy:#0f2340; --navy-mid:#1a3a5c; --navy-light:#244d7a; --navy-ink:#0a1628;
  --gold:#c9a84c; --gold-light:#e8c96a; --gold-deep:#b8943d; --gold-dim:rgba(201,168,76,.15);
  --cream:#faf8f3; --cream-2:#f2ede3; --cream-3:#e9e2d2;
  --gray:#6b7280; --gray-light:#e5e7eb;

  --ground:var(--cream); --surface:#ffffff; --surface-2:var(--cream-2); --surface-3:var(--cream-3);
  --ink:var(--navy); --ink-2:#4a5568; --ink-3:#6b7280;
  --line:#e6e0d2; --line-2:#cfc6b2;
  --accent:var(--navy); --accent-soft:#eef1f6;
  --good:#2d7d46; --good-soft:#e3f1e7;
  --warn:#9a5f06; --warn-soft:#fbefd9;
  --bad:#c0392b;  --bad-soft:#f9e3e0;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Playfair Display',Georgia,serif;
  --mono:'DM Sans',system-ui,sans-serif;
  --r:10px;
  --shadow:0 2px 12px rgba(15,35,64,.08);
  --shadow-md:0 6px 24px rgba(15,35,64,.14);
  --ft-sb-w:250px;
  --ft-tb-h:54px;
  --ft-bn-h:calc(56px + env(safe-area-inset-bottom));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0d1726; --surface:#15233a; --surface-2:#1a2b45; --surface-3:#22375a;
    --ink:#eceef2; --ink-2:#b9c2cf; --ink-3:#8b97a8;
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.22);
    --accent:var(--gold-light); --accent-soft:rgba(201,168,76,.12);
    --good:#7fd39a; --good-soft:#123322;
    --warn:#e8b45a; --warn-soft:#3a2a0d;
    --bad:#f08a7c;  --bad-soft:#42201b;
    --gray-light:#2d3d57;
    --shadow:0 2px 12px rgba(0,0,0,.35); --shadow-md:0 6px 24px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --ground:#0d1726; --surface:#15233a; --surface-2:#1a2b45; --surface-3:#22375a;
  --ink:#eceef2; --ink-2:#b9c2cf; --ink-3:#8b97a8;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.22);
  --accent:var(--gold-light); --accent-soft:rgba(201,168,76,.12);
  --good:#7fd39a; --good-soft:#123322;
  --warn:#e8b45a; --warn-soft:#3a2a0d;
  --bad:#f08a7c;  --bad-soft:#42201b;
  --gray-light:#2d3d57;
  --shadow:0 2px 12px rgba(0,0,0,.35); --shadow-md:0 6px 24px rgba(0,0,0,.45);
}

/* ── 2. BASE ───────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--ground);color:var(--ink);
  padding-left:var(--ft-sb-w);transition:padding-left .25s;overscroll-behavior-y:none}
body.ft-sb-collapsed{--ft-sb-w:64px}
*{-webkit-tap-highlight-color:transparent}
button,a,.btn{-webkit-user-select:none;user-select:none}
.wrap{max-width:1040px;padding-block:22px 92px}
h1,h2,h3,.step-title,.dish-h h2,.intro-card .step-title{font-family:var(--serif);letter-spacing:0}

/* Iconos SVG (sprite inyectado por ft-shell.js) */
.ft-ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.22em;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
/* el "papel" de los iconos toma el color del fondo donde viven: superficie en el contenido, navy en el armazón */
.ft-ic{--ft-icon-paper:var(--surface)}
.ft-sidebar .ft-ic,.ft-topbar .ft-ic,.ft-bottom-nav .ft-ic,.ping-head .ft-ic,.ft-modal-h .ft-ic{--ft-icon-paper:var(--navy)}
.btn:not(.ghost) .ft-ic,.ft-volver .ft-ic{--ft-icon-paper:var(--gold-light)}
.ft-sidebar .ft-ic,.ft-topbar .ft-ic,.ft-bottom-nav .ft-ic{color:rgba(255,255,255,.82)}
.sb-nav-a.active .ft-ic,.ft-bn-item.active .ft-ic{color:#fff}
.ft-ic.lg{width:40px;height:40px;vertical-align:middle;stroke-width:1.5}
.ft-ic.xl{width:52px;height:52px;vertical-align:middle;stroke-width:1.4}
.btn .ft-ic,.sb-nav-a .ft-ic{margin-right:.45em}
.btn .ft-ic.tail{margin:0 0 0 .45em}
.ft-ic.tail{margin-left:.35em}
.ft-ic.solo{margin:0}
.modo-tabs button .ft-ic,.demo-banner-txt .ft-ic,.mf-nueva .ft-ic,.lock-tag .ft-ic{margin-right:.4em}
.lock-tag .ft-ic:only-child{margin:0}
.sb-nav-a:focus-visible,.ft-bn-item:focus-visible,.ft-volver:focus-visible,.ft-theme:focus-visible,.ft-conexion:focus-visible,.ft-tb-volver:focus-visible{outline:2px solid var(--gold-light);outline-offset:-2px}

/* ── 3. SIDEBAR ────────────────────────────────────────────── */
.ft-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--ft-sb-w);background:var(--navy);
  display:flex;flex-direction:column;z-index:100;transition:width .25s;overflow:hidden;
  font-family:var(--sans);color:#fff}
.ft-sb-head{padding:12px 14px 10px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;
  align-items:center;gap:8px;min-height:54px}
.ft-sb-brand{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;text-decoration:none;color:#fff}
.ft-sb-brand img{height:26px;width:auto;max-width:150px;object-fit:contain;display:block}
.ft-sb-app{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.ft-sb-toggle{background:none;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);width:28px;height:28px;
  border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.15s;padding:0}
.ft-sb-toggle:hover{background:rgba(255,255,255,.1);color:#fff}
.ft-sb-toggle .ft-ic{width:16px;height:16px;margin:0}
.ft-sb-nav{flex:1;padding:4px 0;overflow-y:auto;overflow-x:hidden}
.ft-sb-nav::-webkit-scrollbar{width:4px}
.ft-sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
.ft-sb-sec{font-size:10px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.9px;
  padding:10px 14px 3px;white-space:nowrap;overflow:hidden}
.sb-nav-a{display:flex;align-items:center;gap:10px;padding:8px 14px;color:rgba(255,255,255,.6);font-family:inherit;
  font-size:13px;font-weight:500;transition:.15s;border-left:3px solid transparent;text-decoration:none;cursor:pointer;
  background:none;border-top:0;border-right:0;border-bottom:0;width:100%;text-align:left}
.sb-nav-a:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-nav-a.active{background:var(--gold-dim);color:var(--gold-light);border-left-color:var(--gold)}
.sb-nav-a .ft-ic{width:20px;height:20px;margin:0}
.sb-nav-a .sb-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}
.sb-nav-a .sb-n{font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.7);flex:0 0 auto}
.sb-nav-a .sb-n.gold{background:var(--gold);color:var(--navy)}
.ft-sb-bottom{padding:10px 14px 12px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px}
.ft-volver{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:9px 10px;border-radius:8px;
  background:var(--gold);color:var(--navy);font-family:inherit;font-size:12.5px;font-weight:700;text-decoration:none;
  border:0;cursor:pointer;transition:.15s;white-space:nowrap}
.ft-volver:hover{background:var(--gold-light)}
.ft-volver .ft-ic{width:18px;height:18px;margin:0}
.ft-socio{font-size:11.5px;color:rgba(255,255,255,.5);text-align:center;line-height:1.4}
.ft-socio a{color:var(--gold-light);text-decoration:none;font-weight:600;white-space:nowrap}
.ft-socio a:hover{text-decoration:underline}
.ft-theme{display:flex;align-items:center;gap:8px;width:100%;height:34px;border-radius:17px;padding:0 5px;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);cursor:pointer;font-family:inherit;
  color:rgba(255,255,255,.6);font-size:11px;font-weight:600;transition:.2s}
.ft-theme:hover{background:rgba(255,255,255,.1);color:#fff}
.ft-theme .knob{width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;
  align-items:center;justify-content:center;flex:0 0 auto;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ft-theme .knob .ft-ic{width:15px;height:15px;margin:0;stroke-width:2}
.ft-theme .lbl{flex:1;text-align:left;white-space:nowrap;overflow:hidden}
:root[data-theme="dark"] .ft-theme .knob{background:var(--navy-light);color:var(--gold-light)}
/* colapsada */
body.ft-sb-collapsed .ft-sb-brand,body.ft-sb-collapsed .ft-sb-sec,body.ft-sb-collapsed .sb-label,
body.ft-sb-collapsed .sb-n,body.ft-sb-collapsed .ft-socio,body.ft-sb-collapsed .ft-theme .lbl,
body.ft-sb-collapsed .ft-volver span{display:none}
body.ft-sb-collapsed .ft-sb-head{justify-content:center;padding:12px 8px 10px}
body.ft-sb-collapsed .sb-nav-a{justify-content:center;padding:9px 0;gap:0}
body.ft-sb-collapsed .ft-sb-bottom{padding:10px 8px;align-items:center}
body.ft-sb-collapsed .ft-volver{padding:9px 0}
body.ft-sb-collapsed .ft-theme{width:34px;justify-content:center;padding:0}
body.ft-sb-collapsed .ft-sb-toggle .ft-ic{transform:rotate(180deg)}

/* ── 4. TOPBAR ─────────────────────────────────────────────── */
.ft-topbar{position:sticky;top:0;z-index:50;height:var(--ft-tb-h);background:var(--navy);display:flex;align-items:center;
  gap:12px;padding:0 20px;color:#fff;font-family:var(--sans);box-shadow:0 2px 10px rgba(15,35,64,.18)}
.ft-tb-logo{display:none;align-items:center;text-decoration:none;flex:0 0 auto}
.ft-tb-logo img{height:24px;width:auto;max-width:140px;object-fit:contain;display:block}
body.ft-sb-collapsed .ft-tb-logo{display:flex}
.ft-tb-title{font-size:13px;font-weight:600;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;flex:1;display:flex;align-items:center;gap:8px}
.ft-tb-title i{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.ft-tb-title small{font-weight:500;font-size:12px;color:rgba(255,255,255,.65)}
.ft-tb-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ft-conexion{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:20px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;
  transition:.15s;max-width:260px}
.ft-conexion:hover{background:rgba(255,255,255,.12);color:#fff}
.ft-conexion .ft-ic{width:16px;height:16px;margin:0}
.ft-conexion .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-conexion.on{border-color:rgba(201,168,76,.5);background:var(--gold-dim);color:var(--gold-light)}
.ft-conexion .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);flex:0 0 auto}
.ft-conexion.on .dot{background:#7fd39a;box-shadow:0 0 0 3px rgba(127,211,154,.2)}
.ft-tb-volver{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:8px;border:1.5px solid var(--gold);
  color:var(--gold-light);font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;transition:.15s}
.ft-tb-volver:hover{background:var(--gold);color:var(--navy)}
.ft-tb-volver .ft-ic{width:16px;height:16px;margin:0}

/* ── 5. BOTONERA INFERIOR (móvil) + overlay ────────────────── */
.ft-bottom-nav{position:fixed;left:0;right:0;bottom:0;height:var(--ft-bn-h);padding-bottom:env(safe-area-inset-bottom);
  background:var(--navy);border-top:1px solid rgba(255,255,255,.08);display:none;justify-content:space-around;
  align-items:center;z-index:9000;box-shadow:0 -4px 16px rgba(0,0,0,.15);font-family:var(--sans)}
.ft-bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:rgba(255,255,255,.5);text-decoration:none;font-size:10.5px;font-weight:600;background:none;border:0;
  cursor:pointer;padding:6px 0;font-family:inherit;transition:color .15s}
.ft-bn-item .ft-ic{width:22px;height:22px;margin:0}
.ft-bn-item.active,.ft-bn-item:hover{color:var(--gold)}
.ft-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:998;touch-action:none;overscroll-behavior:contain}
.ft-overlay.open{display:block}

@media (max-width:900px){
  html,body{max-width:100vw;overflow-x:hidden}
  body,body.ft-sb-collapsed{--ft-sb-w:0px;padding-left:0;padding-bottom:var(--ft-bn-h)}
  .ft-sidebar{left:auto;right:0;width:280px;bottom:var(--ft-bn-h);transform:translateX(110%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:999;box-shadow:-4px 0 24px rgba(0,0,0,.35);overflow-y:auto}
  .ft-sidebar.mobile-open{transform:translateX(0)}
  body.ft-sb-collapsed .ft-sb-brand,body.ft-sb-collapsed .ft-sb-sec,body.ft-sb-collapsed .sb-label,
  body.ft-sb-collapsed .sb-n,body.ft-sb-collapsed .ft-socio,body.ft-sb-collapsed .ft-theme .lbl,
  body.ft-sb-collapsed .ft-volver span{display:revert}
  body.ft-sb-collapsed .sb-nav-a{justify-content:flex-start;padding:8px 14px;gap:10px}
  body.ft-sb-collapsed .ft-sb-head{justify-content:flex-start;padding:12px 14px 10px}
  body.ft-sb-collapsed .ft-sb-bottom{padding:10px 14px 12px;align-items:stretch}
  body.ft-sb-collapsed .ft-theme{width:100%;padding:0 5px;justify-content:flex-start}
  .ft-sb-toggle{display:none}
  .ft-sb-nav{flex:none;overflow:visible}
  .ft-sb-bottom{position:sticky;bottom:0;background:var(--navy);z-index:2}
  .ft-topbar{padding:0 12px}
  .ft-tb-logo{display:flex}
  .ft-tb-title{display:none}
  .ft-tb-volver span{display:none}
  .ft-tb-volver{padding:7px 9px}
  .ft-conexion{max-width:46vw}
  .ft-bottom-nav{display:flex}
  .wrap{padding-block:16px 100px}
  /* iOS hace zoom en cualquier campo con menos de 16px */
  input,select,textarea{font-size:16px!important}
}

/* ── 6. COMPONENTES DE LAS PANTALLAS ───────────────────────── */
/* cabecera de página (sustituye a header.top) */
.ft-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.ft-page-header h1{margin:0;font-size:26px;font-weight:700;color:var(--ink);line-height:1.15}
.ft-page-header p{margin:4px 0 0;color:var(--ink-3);font-size:13.5px;line-height:1.5;max-width:64ch}
.ft-page-header .ft-tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;
  border-radius:20px;background:var(--gold-dim);color:var(--gold-deep);white-space:nowrap}
:root[data-theme="dark"] .ft-page-header .ft-tag{color:var(--gold-light)}
.ft-tag:empty{display:none}
.count{font-family:var(--sans);font-weight:600}

/* botones: dorado = acción principal (como EscandUP), fantasma = secundaria */
.btn{border-radius:8px;border:1.5px solid var(--gold);background:var(--gold);color:var(--navy);font-family:var(--sans);
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:0;transition:.18s;line-height:1.2;
  min-height:38px;padding:8px 16px;font-size:13.5px}
.btn:hover{background:var(--gold-light);border-color:var(--gold-light);filter:none}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--gray-light);font-weight:600}
.btn.ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn.sm{min-height:34px;padding:6px 12px;font-size:12.5px}
.btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:default}
/* .btn es inline-flex: sin esta regla, el atributo hidden dejaría de ocultar botones */
[hidden]{display:none!important}
.btn:active{transform:scale(.97)}

/* paneles y tarjetas: blanco, sombra suave, sin borde duro */
.panel,.intro-card,.wiz-top,.toolbar,.menu-filtros{background:var(--surface);border:1px solid transparent;box-shadow:var(--shadow);border-radius:var(--r)}
:root[data-theme="dark"] .panel,:root[data-theme="dark"] .intro-card,:root[data-theme="dark"] .wiz-top,
:root[data-theme="dark"] .toolbar,:root[data-theme="dark"] .menu-filtros{border-color:var(--line)}
.panel-h{border-bottom:1px solid var(--line)}
.panel-h h2{font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--ink-2)}
.toolbar{padding:10px 12px;gap:8px}
.toolbar .sep{background:var(--line)}
.toolbar .msg{color:var(--ink-3)}

/* tarjetas de inicio y del modal de ingredientes */
.inicio-cards,.ping-cards{gap:12px}
.inicio-card,.ping-card{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:20px 14px 16px;
  transition:.18s;box-shadow:none}
.inicio-card:hover,.ping-card:hover,.inicio-card:focus-visible,.ping-card:focus-visible{border-color:var(--gold);
  background:var(--surface);box-shadow:var(--shadow-md);transform:translateY(-2px);outline:none}
.inicio-card .ic,.ping-card .ic{display:flex;justify-content:center;margin-bottom:10px;font-size:0}
.inicio-card .tt,.ping-card .tt{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.25}
.inicio-card .sb,.ping-card .sb{font-size:12px;color:var(--ink-3);margin-top:5px}
.intro-steps .it{background:var(--surface-2);border:0;border-radius:9px}
.intro-steps .it .k{font-family:var(--sans);color:var(--gold-deep);letter-spacing:.06em;text-transform:uppercase;font-size:10px}
:root[data-theme="dark"] .intro-steps .it .k{color:var(--gold-light)}
.intro-import{border-top-color:var(--line)}

/* etiquetas del asistente */
.step-title{font-size:24px;font-weight:700}
.intro-card .step-title{font-size:28px}
.step-sub{color:var(--ink-2)}
.why{background:var(--surface-2);border:1px solid var(--line);border-left:1px solid var(--line);border-radius:9px;
  color:var(--ink-2);position:relative;padding-left:40px}
.why::before{content:'';position:absolute;left:13px;top:11px;width:18px;height:18px;background:var(--gold);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center/100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center/100% no-repeat;
  background:var(--gold-deep)}
.why b{color:var(--ink)}
.field label b{color:var(--bad)}

/* barra de progreso del asistente */
.wiz-track{background:var(--surface-3)}
.wiz-fill{background:linear-gradient(90deg,var(--gold-deep),var(--gold-light))}
.wiz-dot .c{font-family:var(--sans);background:var(--surface-3);color:var(--ink-3)}
.wiz-dot.done .c{background:var(--good-soft);color:var(--good)}
.wiz-dot.now .c{background:var(--gold);color:var(--navy)}
.wiz-dot .c .ft-ic{width:13px;height:13px;margin:0;stroke-width:2.4}
.wiz-bar{left:var(--ft-sb-w);background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(15,35,64,.08);transition:left .25s}
.wiz-bar-in{max-width:1040px}
@media (max-width:900px){.wiz-bar{left:0;bottom:var(--ft-bn-h)}}

/* campos */
.field input,.field select,.field textarea,.in-nombre,.in-num,.i-min,.i-txt,.ping-search,.ping-form .field input,
.mf-field input,.mf-field select,.search input,.toolbar select,.ft-modal input{
  border:1.5px solid var(--gray-light);background:var(--surface);color:var(--ink);font-family:var(--sans);border-radius:7px}
.field input:focus,.field select:focus,.field textarea:focus,.in-nombre:focus,.in-num:focus,.i-min:focus,.i-txt:focus,
.ping-search:focus,.ping-form .field input:focus,.mf-field input:focus,.mf-field select:focus,.search input:focus,.ft-modal input:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--gold-dim)}
:root[data-theme="dark"] .field input:focus,:root[data-theme="dark"] .in-nombre:focus,:root[data-theme="dark"] .in-num:focus,
:root[data-theme="dark"] .i-txt:focus,:root[data-theme="dark"] .search input:focus{border-color:var(--gold)}
.field label{color:var(--ink-2)}
.in-num,.i-min,.ro,.pz,.field input[type=number]{font-family:var(--sans);font-variant-numeric:tabular-nums}
.in-buscar{border:1.5px solid var(--gray-light);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center}
.in-buscar:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-dim)}
.in-buscar .ft-ic{width:15px;height:15px;margin:0}

/* tablas y totales */
thead th{color:var(--ink-3);background:var(--surface-2);letter-spacing:.06em}
tbody td{font-family:var(--sans);font-variant-numeric:tabular-nums}
.tbl-foot,.foot,.thead-hlp,.note{background:var(--surface-2);border-color:var(--line)}
.stat .k{color:var(--ink-3)}
.stat .v{font-family:var(--serif);font-weight:700;letter-spacing:0}
.resumen-grid .stat .v{font-family:var(--serif)}
.sub-badge{font-family:var(--sans);background:var(--gold-dim);color:var(--gold-deep)}
:root[data-theme="dark"] .sub-badge{color:var(--gold-light)}
.tag{font-family:var(--sans)}
.hit[aria-current="true"]{background:var(--gold-dim)}
.hit .cs,.hit .pa{font-family:var(--sans)}

/* pasos de elaboración */
.instr-list li::before{font-family:var(--sans);background:var(--gold-dim);color:var(--gold-deep)}
:root[data-theme="dark"] .instr-list li::before{color:var(--gold-light)}
.instr-list .min{font-family:var(--sans);background:var(--gold-dim);color:var(--gold-deep)}
.i-handle{display:inline-flex;align-items:center;color:var(--ink-3);padding:6px 2px}
.i-handle .ft-ic{width:16px;height:16px;margin:0}
.i-up,.i-down{display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-2)}
.i-up .ft-ic,.i-down .ft-ic{width:12px;height:12px;margin:0;stroke-width:2.2}
.i-up:hover,.i-down:hover{background:var(--gold-dim);color:var(--gold-deep)}
.i-del,.row-del,.foto-x,.carta .x,.fichas-menu .it .del{display:inline-flex;align-items:center;justify-content:center}
.i-del .ft-ic,.row-del .ft-ic,.carta .x .ft-ic,.fichas-menu .it .del .ft-ic{width:15px;height:15px;margin:0}
.foto-x .ft-ic{width:12px;height:12px;margin:0;stroke-width:2.2}

/* foto */
.foto-add{border-color:var(--line-2);color:var(--ink-3)}
.foto-add:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-dim)}

/* modales de la app (ping-*) al estilo de los de EscandUP: cabecera navy, título dorado */
.ping-box{border-radius:14px;box-shadow:0 4px 24px rgba(15,35,64,.25)}
.ping-head{background:var(--navy);color:#fff}
.ping-head h3{font-family:var(--serif);color:var(--gold-light);font-size:17px;display:flex;align-items:center;gap:9px}
.ping-head h3 .ft-ic{width:20px;height:20px;margin:0;color:#fff}
.ping-head .pp{font-family:var(--sans);color:rgba(255,255,255,.55)}
.ping-x{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12)}
.ping-x .ft-ic{width:14px;height:14px;margin:0;stroke-width:2.2}
.ping-foot{background:var(--surface-2);border-top-color:var(--line)}
.ping-back{color:var(--ink-3)} .ping-back:hover{color:var(--ink)}
.ping-back .ft-ic{width:14px;height:14px;margin:0}
.ping-info,.ping-elegido{background:var(--surface-2);border-color:var(--line)}
.ping-list{border-color:var(--line)} .ping-item{border-color:var(--line)}
.ping-item .pr{font-family:var(--sans)}
.ping-precio-fijo{font-family:var(--serif)}
.fichas-menu{box-shadow:var(--shadow-md);border-color:var(--line)}
.ia-estado.cargando{border-color:var(--line)}
.ia-estado.ok{background:var(--good-soft);border-color:transparent}
.ia-estado.error{background:var(--bad-soft);border-color:transparent}
.ia-estado .ft-ic{margin-right:6px}
.ia-estado.cargando .ft-ic{animation:ft-spin 1.1s linear infinite}
@keyframes ft-spin{to{transform:rotate(360deg)}}
.badge-virgen{display:none}
.hlp,.instr-hint{color:var(--ink-3)}
.instr-hint .ft-ic{width:14px;height:14px}

/* modal propio del armazón (conectar con EscandUP) */
.ft-modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9500;display:none;align-items:center;justify-content:center;padding:20px}
.ft-modal-ov.open{display:flex}
.ft-modal{background:var(--surface);color:var(--ink);border-radius:14px;max-width:460px;width:100%;box-shadow:0 4px 24px rgba(15,35,64,.25);
  overflow:hidden;font-family:var(--sans)}
.ft-modal-h{background:var(--navy);color:#fff;padding:16px 20px;display:flex;align-items:center;gap:10px}
.ft-modal-h h2{margin:0;font-family:var(--serif);font-size:18px;color:var(--gold-light);flex:1}
.ft-modal-h .ft-ic{width:22px;height:22px;margin:0}
.ft-modal-b{padding:20px}
.ft-modal-b p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ft-modal-b label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.ft-modal-b input{width:100%;padding:10px 12px;font-size:15px}
.ft-modal-note{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--surface-2);font-size:12px;color:var(--ink-3);line-height:1.5}
.ft-modal-f{padding:12px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:var(--surface-2)}
.ft-modal-f .btn.danger{background:transparent;border-color:var(--bad);color:var(--bad);margin-right:auto}
@media (max-width:900px){
  .ft-modal-ov{align-items:flex-end;padding:0;padding-bottom:var(--ft-bn-h)}
  .ft-modal{max-width:100%;border-radius:18px 18px 0 0;animation:ft-sheet .24s cubic-bezier(.25,1,.5,1)}
  .ping-ov{padding:0;align-items:flex-end;padding-bottom:var(--ft-bn-h)}
  .ping-box{width:100%;border-radius:18px 18px 0 0;max-height:85vh;animation:ft-sheet .24s cubic-bezier(.25,1,.5,1)}
}
@keyframes ft-sheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* toast del armazón */
.ft-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(18px);background:#233845;color:#fff;
  padding:12px 18px;border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.45);font-family:var(--sans);font-size:13.5px;
  max-width:92vw;z-index:11000;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;text-align:center}
.ft-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ft-toast b{color:var(--gold-light)}
@media (max-width:900px){.ft-toast{bottom:calc(var(--ft-bn-h) + 14px)}}

/* ── 7. IMPRESIÓN: el armazón desaparece, paleta clara de EscandUP ── */
@media print{
  :root{
    --ground:#fff!important; --surface:#fff!important; --surface-2:#f4f1ea!important; --surface-3:#e9e2d2!important;
    --ink:#0f2340!important; --ink-2:#4a5568!important; --ink-3:#6b7280!important;
    --line:#d9d2c2!important; --line-2:#bfb6a0!important;
    --accent:#0f2340!important; --accent-soft:#eef1f6!important;
    --good:#2d7d46!important; --good-soft:#e3f1e7!important;
    --warn:#9a5f06!important; --warn-soft:#fbefd9!important;
    --bad:#c0392b!important; --bad-soft:#f9e3e0!important;
  }
  body{padding:0!important;background:#fff!important}
  .ft-sidebar,.ft-topbar,.ft-bottom-nav,.ft-overlay,.ft-modal-ov,.ft-toast,.ft-page-header{display:none!important}
  .panel,.intro-card{box-shadow:none!important}
}

/* ── 8. CONEXIÓN CON ESCANDUP (modal de cuenta y selector de origen) ── */
.ft-modal-err{margin-top:10px;padding:9px 12px;border-radius:8px;background:var(--bad-soft);color:var(--bad);font-size:12.5px;line-height:1.45}
.ft-modal-err .ft-ic{margin-right:6px}
.ft-modal-note a{color:var(--gold-deep);font-weight:600;text-decoration:none}
:root[data-theme="dark"] .ft-modal-note a{color:var(--gold-light)}
.ft-cx-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--surface-2);margin-bottom:12px}
.ft-cx-logo{width:44px;height:44px;border-radius:10px;object-fit:contain;background:var(--surface);flex:0 0 auto;border:1px solid var(--line)}
.ft-cx-ini{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:20px;color:var(--gold-deep)}
.ft-cx-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ft-cx-txt b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-cx-txt span{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-cx-ok{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;background:var(--good-soft);color:var(--good);font-size:11.5px;font-weight:700;white-space:nowrap}
.ft-cx-ok .ft-ic{width:14px;height:14px;margin:0;stroke-width:2.2}
.ft-src-tabs{display:flex;gap:4px;padding:3px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);margin-bottom:10px}
.ft-src-tabs button{flex:1;padding:8px 10px;border:0;background:transparent;border-radius:7px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px}
.ft-src-tabs button[aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(15,35,64,.12)}
.ft-src-tabs button .ft-ic{margin:0}
.ft-src-vacio{padding:22px 14px;text-align:center;color:var(--ink-3);font-size:13px;line-height:1.55}
.ft-src-vacio .btn{margin-top:10px}
/* los modales de las pantallas (z 80/90) quedaban por debajo de la sidebar (z 100) */
.ping-ov,.lightbox-ov{z-index:1000}