/* ===========================================================================
   app.css — Sistema de diseño GRIS unificado (estilo eAPIS / FlashPass).
   Tanda 0: única fuente del gris. Reúne (verbatim, mismo look) los estilos que
   estaban DUPLICADOS inline en /app/home/eapis (.fp-*) y /app/home + /app/datos
   (sistema "home"), añade componentes compartidos .app-* y RE-DEFINE las clases
   existentes (.admin-*, .card, .fp-*) a la paleta gris para que cada página migre
   con solo cambiar el <link>. CSP: style-src 'self'.
   =========================================================================== */

:root {
  --hdr: #042C53;        /* header gris neutro */
  --page: #EEF2F7;       /* fondo de página */
  --card: #ffffff;       /* tarjeta */
  --card-bd: #d9d9de;    /* borde de tarjeta */
  --line: #E4E4E8;       /* líneas/separadores */
  --sec: #F2F2F5;        /* fondo de sección/etiqueta */
  --accent: #1466B8;     /* acento (azul eAPIS) */
  --accent-dk: #0F4E88;  /* acento oscuro (hover/active) */
  --txt: #1C1C1E;        /* texto principal */
  --muted: #6B6B70;      /* texto secundario */
  --chev: #C5C5CA;       /* chevrons */
  --ph: #B0B0B5;         /* placeholders */
}

body { background: var(--page); color: var(--txt);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ===========================================================================
   1) Sistema FlashPass (.fp-*)  — verbatim de templates/eapis_armar.html
   =========================================================================== */
.fp-card{max-width:420px;margin:.6rem auto 1rem;background:#fff;border:0.5px solid #d9d9de;border-radius:14px;overflow:hidden;font-size:14px}
.fp-card .fp-hdr{background:#042C53;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:13px 15px}
.fp-card .fp-hdr .t{font-size:15px;font-weight:500}
.fp-card .fp-hdr a,.fp-card .fp-hdr .s{color:#fff;font-size:14px;text-decoration:none;cursor:pointer}
.fp-card .fp-sec{padding:14px 15px 5px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#6B6B70;background:#F2F2F5}
.fp-card .fp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px;border-top:0.5px solid #E4E4E8;background:#fff}
.fp-card .fp-sub{padding-left:30px}
.fp-card .fp-lbl{color:#1C1C1E;white-space:nowrap}
.fp-card .fp-val{color:#1C1C1E;text-align:right;min-height:1em}
.fp-card input.fp-in{border:0;background:transparent;outline:none;font-size:14px;color:#1466B8;text-align:right;width:60%}
.fp-card input.fp-in::placeholder{color:#B0B0B5}
.fp-card select{border:0;background:transparent;outline:none;font-size:14px;color:#1466B8;text-align:right;max-width:65%}
.fp-card .fp-icao{width:7rem;text-align:right;text-transform:uppercase;border:0;font-size:14px;font-weight:500;color:#1466B8;background:transparent;outline:none;letter-spacing:.08em}
.fp-card .fp-icao::placeholder{color:#B0B0B5;font-weight:400;letter-spacing:normal}
.fp-card .fp-time{display:flex;gap:6px;align-items:center}
.fp-card .fp-time input[type=date],.fp-card .fp-time input[type=time]{border:0.5px solid #E4E4E8;border-radius:6px;padding:3px 6px;font-size:13px;color:#1C1C1E}
.fp-card .fp-people{max-height:212px;overflow-y:auto;border-top:0.5px solid #E4E4E8}
.fp-card .fp-pitem{display:flex;align-items:center;gap:10px;padding:10px 15px;border-bottom:0.5px solid #E4E4E8;font-size:14px}
.fp-card .fp-pname{flex:1;min-width:0}
.fp-card .fp-role{font-size:11px;color:#6B6B70;background:#F2F2F5;padding:1px 7px;border-radius:6px;white-space:nowrap}
.fp-card .fp-empty{padding:11px 15px;color:#6B6B70}
.fp-card .fp-soul{background:#F2F2F5}
.fp-card .fp-bar{display:flex;justify-content:flex-end;padding:11px 15px;border-top:0.5px solid #dcdce1;background:#F2F2F5}
.fp-card .fp-pv{display:flex;align-items:center;gap:7px;font-size:14px;color:#1C1C1E;background:#fff;border:0.5px solid #d2d2d8;border-radius:8px;padding:7px 14px;cursor:pointer}
.fp-card .fp-iconbtn{background:none;border:0;cursor:pointer;padding:4px;line-height:0;display:inline-flex}
.fp-card .fp-chip{display:inline-block;background:#EEF3F9;color:#1466B8;border-radius:11px;padding:2px 10px;margin:0 0 4px 6px;font-size:13px;cursor:pointer}
.fp-card .fp-chips{padding:0 9px 8px;background:#fff;display:flex;flex-wrap:wrap}
.fp-card .fp-chips:empty{display:none}
.fp-card #people-search::placeholder{color:#B0B0B5}
.fp-below{max-width:420px;margin:.4rem auto}

/* ===========================================================================
   2) Sistema "home" — verbatim de templates/app_eapis.html (= app_datos.html)
   =========================================================================== */
.card { background:#fff; border:0.5px solid #d9d9de; border-top:2px solid var(--accent); border-radius:12px; padding:1rem; margin-bottom:1rem; }
.card h2 { margin:0 0 .6rem; font-size:1rem; color:#1C1C1E; }
.page-hdr { background:#042C53; color:#fff; display:flex; align-items:center; justify-content:space-between;
            padding:13px 15px; border-radius:12px; margin:.2rem 0 1rem; }
.page-hdr .t { font-size:15px; font-weight:500; } .page-hdr .s { font-size:14px; opacity:.9; }
.sec-label { font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#6B6B70; margin:.4rem 0 .5rem; }
/* Acciones del hub como tiles tipo botón (tarjeta con franja de acento). */
.act-grid { display:grid; grid-template-columns:1fr; gap:.7rem; margin-bottom:1rem; }
@media (min-width:620px) { .act-grid { grid-template-columns:repeat(3, 1fr); } }
.act { display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; padding:16px;
       background:rgba(4,44,83,.055); border:0.5px solid var(--card-bd); border-top:2px solid var(--accent);
       border-radius:12px; text-decoration:none; color:var(--txt);
       transition:border-color .12s ease, background .12s ease, transform .12s ease, box-shadow .12s ease; }
.act:hover { border-color:var(--accent); background:rgba(4,44,83,.10); transform:translateY(-1px);
       box-shadow:0 4px 14px rgba(4,44,83,.10); }
.act .chev { display:none; }
.act-ic { font-size:23px; width:46px; height:46px; border-radius:11px; background:#EAF1FB;
          display:flex; align-items:center; justify-content:center; }
.act-tx { flex:1; display:flex; flex-direction:column; gap:2px; }
.act-t { font-size:15px; font-weight:500; color:var(--txt); }
.act-s { font-size:12px; color:var(--muted); }
.chev { color:#C5C5CA; font-size:20px; line-height:1; }
.cta { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; }
/* Home v2: paquetes de UNA sola entrada (USA→MX / MX→USA) + accesos individuales */
.card.pkg { display:flex; flex-direction:column; }
.pkg-lead { font-size:.82rem; color:var(--muted); margin:.1rem 0 .85rem; line-height:1.5; }
.pkg-incl { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.pkg-it { display:flex; align-items:baseline; gap:.5rem; font-size:.9rem; font-weight:500; color:var(--txt); }
.pkg-step { flex:none; width:18px; height:18px; line-height:18px; text-align:center; border-radius:50%;
            background:#EAF1FB; color:var(--accent-dk); font-size:11px; font-weight:700; }
.pkg-ck { color:#0A7D3C; font-weight:700; }
.pkg-sub { font-weight:400; font-size:.75rem; color:var(--muted); }
.pkg-subitems { display:flex; flex-direction:column; gap:.2rem; margin:-.2rem 0 .15rem 2.75rem;
                font-size:.78rem; color:var(--muted); }
.pkg-go { margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:1px; text-align:center;
          background:var(--hdr); color:#fff; font-weight:700; border-radius:10px; padding:.7rem 1rem;
          font-size:.95rem; text-decoration:none; }
.pkg-go:hover { background:#063A6E; }
.pkg-go span { font-size:.7rem; font-weight:400; opacity:.85; }
.act-grid.cols-auto { grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
@media (max-width:619px){ .act-grid.cols-auto { grid-template-columns:1fr; } }
/* Paquete AFAC (/scan): adjuntos y vista previa con scroll interno, para no empujar
   el botón «Enviar correo» fuera de vista cuando hay muchas páginas/fotos. */
#files-list { max-height: 320px; overflow-y: auto; }
#preview-images { max-height: 60vh; overflow-y: auto; }
a.create { display:inline-block; background:#1466B8; color:#fff; text-decoration:none; font-weight:700;
           border-radius:10px; padding:.8rem 1.2rem; font-size:1.05rem; }
a.create:hover { background:#0F4E88; }
.addupdate { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.addupdate label { min-width:170px; font-weight:600; color:#1C1C1E; }
.addupdate select { flex:1; min-width:200px; }
.row { display:flex; justify-content:space-between; align-items:center; gap:.5rem;
       padding:.45rem .2rem; border-bottom:0.5px solid #E4E4E8; }
.row:last-child { border-bottom:none; }
.grid { display:grid; grid-template-columns:1fr; gap:.6rem; }
@media (min-width:680px){ .grid { grid-template-columns:1fr 1fr; } }
.fld { display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.fld label { font-size:.8rem; color:#6B6B70; }
.fld label .req { color:#b91c1c; }
/* Los campos (Entidades/Datos) SIEMPRE caben en su columna: el <select> de País,
   con nombres de país larguísimos, ya no ensancha la rejilla ni se sale de la
   tarjeta. min-width:0 deja encoger la pista; border-box mete el padding adentro. */
.fld input, .fld select, .fld textarea { width:100%; max-width:100%; box-sizing:border-box; }
input, select { min-height:42px; padding:.3rem .5rem; border:1px solid #cbd5e1; border-radius:8px; font-size:1rem; }
input.bad { border-color:#ef4444; background:#fef2f2; }
input.ok { border-color:#86efac; }
.pill { background:#F2F2F5; color:#475569; border-radius:6px; padding:0 .4rem; font-size:.78rem; }
.muted { color:#6B6B70; } .hide { display:none; }
.banner { background:#F2F2F5; border:0.5px solid #E4E4E8; color:#334155; border-radius:8px;
          padding:.6rem .8rem; font-size:.85rem; margin:.2rem 0 .7rem; }
.doc-row { border:0.5px solid #E4E4E8; border-radius:8px; padding:.6rem; margin-bottom:.5rem; background:#F7F7F9; }
button.primary { background:#1466B8; color:#fff; border:none; border-radius:8px; padding:0 1rem; min-height:44px; font-weight:600; }
button.primary:disabled { background:#94a3b8; }
button.danger { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; border-radius:8px; min-height:38px; }
button.ghost { background:#fff; color:#1466B8; border:1px solid #cbd5e1; border-radius:8px; min-height:38px; }
button.go { background:#1466B8; color:#fff; border:1px solid #1466B8; border-radius:8px;
            min-height:42px; padding:.4rem 1rem; font-weight:700; cursor:pointer; }
button.go:hover { background:#0F4E88; }
#msg { font-size:.9rem; }
.home-grid { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1rem; }
@media (min-width:760px){ .home-grid { grid-template-columns:1fr 1fr; } }
.alert { display:flex; justify-content:space-between; gap:.5rem; padding:.45rem .2rem;
         border-bottom:0.5px solid #E4E4E8; font-size:.92rem; }
.badge { border-radius:6px; padding:0 .4rem; font-size:.78rem; white-space:nowrap; }
.b-red { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.b-amber { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }

/* /app/home: botones de acción compactos (paquetes) + resumen "Mis datos". */
.gobtn { display:inline-flex; align-items:center; gap:.35rem; background:#1466B8; color:#fff;
         text-decoration:none; font-weight:600; font-size:.9rem; border-radius:9px; padding:.5rem .85rem; }
.gobtn:hover { background:#0F4E88; }
.gobtn.ghost { background:#EAF1FB; color:#0F4E88; }
.statg { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin:.1rem 0 .8rem; }
@media (min-width:620px){ .statg { grid-template-columns:repeat(5,1fr); } }
.stat { background:#F2F2F5; border-radius:10px; padding:.6rem; text-align:center; }
.stat .n { display:block; font-size:1.35rem; font-weight:700; color:#0F4E88; line-height:1.1; }
.stat .l { display:block; font-size:.72rem; color:#6B6B70; margin-top:.15rem; }

/* ===========================================================================
   3) Componentes compartidos .app-*  (para las tandas 1-3)
   =========================================================================== */
.app-hdr { background: var(--hdr); color: #fff; display: flex; align-items: center;
           justify-content: space-between; padding: 13px 15px; border-radius: 12px; margin: .2rem 0 1rem; }
.app-hdr .t { font-size: 15px; font-weight: 500; } .app-hdr .s { font-size: 14px; opacity: .9; color:#fff; }
.app-sec { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: .4rem 0 .5rem; }
.app-card { background: var(--card); border: 0.5px solid var(--card-bd); border-top: 2px solid var(--accent); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; }
.app-card > h2 { margin: 0 0 .6rem; font-size: 1rem; color: var(--txt); }
.app-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
           padding: 11px 4px; border-bottom: 0.5px solid var(--line); }
.app-row:last-child { border-bottom: none; }
.app-lbl { color: var(--txt); } .app-val { color: var(--txt); text-align: right; }
.app-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.app-chip { display: inline-block; background: #EEF3F9; color: var(--accent); border-radius: 11px;
            padding: 2px 10px; font-size: 13px; }
/* botones compartidos */
.app-btn { display: inline-block; border-radius: 8px; padding: .5rem 1rem; min-height: 42px; font-weight: 600;
           cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.app-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.app-btn.primary:hover { background: var(--accent-dk); }
.app-btn.ghost { background: #fff; color: var(--accent); border-color: #cbd5e1; }
.app-btn.danger { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.app-btn:disabled { background: #94a3b8; border-color: #94a3b8; color:#fff; }
/* badges semánticas compartidas */
.app-badge { display: inline-block; border-radius: 999px; padding: .08rem .5rem; font-size: .74rem;
             font-weight: 700; white-space: nowrap; background: var(--sec); color: var(--muted); }
.app-badge.ok { background: #dcfce7; color: #166534; }
.app-badge.warn { background: #fef3c7; color: #92400e; }
.app-badge.bad { background: #fee2e2; color: #991b1b; }

/* ===========================================================================
   4) TABLAS/listas admin en gris  (.app-table) — densas, recoloreadas
   =========================================================================== */
.app-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff;
             border: 0.5px solid var(--line); border-radius: 12px; overflow: hidden; table-layout: auto; }
.app-table th { text-align: left; background: var(--sec); color: var(--txt); font-size: .72rem;
                text-transform: uppercase; letter-spacing: .03em; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.app-table td { padding: .55rem .6rem; border-bottom: 0.5px solid var(--line); vertical-align: top;
                color: var(--txt); font-size: .86rem; overflow-wrap: anywhere; word-break: break-word; }
.app-table tbody tr:nth-child(even) td { background: #FAFAFB; }
.app-table tbody tr:hover td { background: var(--sec); }
.app-table tbody tr:last-child td { border-bottom: none; }

/* ===========================================================================
   5) RE-DEFINICIÓN de las clases admin existentes a GRIS (migrar con el <link>)
   Las páginas admin pasan a gris en la Tanda 2 con solo añadir este app.css.
   =========================================================================== */
.admin-card { background: var(--card); border: 0.5px solid var(--card-bd); border-top: 2px solid var(--accent); box-shadow: none;
              border-radius: 12px; padding: .9rem 1rem; display: flex; flex-direction: column;
              min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.admin-card h2, .admin-card .admin-title { color: var(--txt); }
.admin-table { border: 0.5px solid var(--line); box-shadow: none; }
.admin-table th { background: var(--sec); color: var(--txt); border-bottom: 1px solid var(--line); }
.admin-table td { border-bottom: 0.5px solid var(--line); color: var(--txt); }
.admin-table tbody tr:nth-child(even) td { background: #FAFAFB; }
.admin-table tbody tr:hover td { background: var(--sec); }
.admin-badge { background: var(--sec); color: var(--muted); }
.admin-muted { color: var(--muted); }
/* 2A: selectores que el viejo admin.css definía y que app.css aún no cubría
   (layout puro, neutral al color — se portan tal cual para que el swap de <link>
   sea equivalente). */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .9rem; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.breakable { overflow-wrap: anywhere; word-break: break-word; }

/* Barra de navegación compartida (_nav.html) — GRIS. Antes era azul inline
   (#E6EEF7/#C7D8EE/#0F4E88), inmune a app.css; ahora vive aquí. La estructura,
   hrefs, ids y el <script> CSRF del nav NO cambian — solo style="" -> class. */
.appnav { display: flex; justify-content: space-between; align-items: center; gap: .5rem .9rem;
  flex-wrap: wrap; padding: .65rem 1rem; background: var(--hdr); color: #fff;
  border-radius: 12px; margin: 0 0 1.1rem; font-size: .9rem; }
.appnav .nl { color: #CFE0F2; font-weight: 600; text-decoration: none; }
.appnav .nl:hover { color: #fff; text-decoration: underline; }
.appnav .ng { color: rgba(255,255,255,.55); font-weight: 700; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; margin-left: .4rem; }
.appnav strong { color: #fff; }

/* ===========================================================================
   2B) Estilos page-specific de las páginas admin, REUBICADOS desde su <style>
   inline (sin perder reglas), scopeados por clase de body para no colisionar
   entre páginas (cada una define su .muted/.badge/.help/.pill con valores
   distintos). El gris de tarjetas/tablas viene de .admin-card/.admin-table de
   arriba; aquí solo van las utilidades propias. ids/JS/clases intactos.
   =========================================================================== */

/* box-sizing scopeado (las 3 páginas con tabla/grid lo traían en su inline) */
.dash-page *, .users-page *, .pkg-page * { box-sizing: border-box; }

/* --- /admin/dashboard --- */
.dash-page { max-width:1120px; margin:0 auto; padding:1rem 1rem 4rem; color:#111827; background:#EEF2F7; }
.dash-page h1 { font-size:1.4rem; margin:.3rem 0 .2rem; }
.dash-page .admin-grid { margin-top:.8rem; }
.dash-page .admin-card h2 { font-size:1rem; margin:0 0 .5rem; display:flex; align-items:center; gap:.5rem; }
.dash-page .nums { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.5rem; }
.dash-page .pill { display:inline-flex; align-items:baseline; gap:.3rem; border-radius:999px; padding:.2rem .6rem; font-size:.82rem; font-weight:700; }
.dash-page .pill b { font-size:1rem; }
.dash-page .red { background:#fee2e2; color:#991b1b; } .dash-page .yellow { background:#fef9c3; color:#854d0e; }
.dash-page .green { background:#dcfce7; color:#166534; } .dash-page .grey { background:#E6EEF7; color:#0F4E88; }
.dash-page table { width:100%; border-collapse:collapse; font-size:.82rem; margin-top:.2rem; }
.dash-page th, .dash-page td { text-align:left; padding:.3rem .4rem; border-bottom:1px solid #f0f1f4; vertical-align:top; }
.dash-page th { color:#64748b; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; }
.dash-page .badge { display:inline-block; padding:.05rem .4rem; border-radius:999px; font-size:.7rem; font-weight:700; white-space:nowrap; }
.dash-page .muted { color:#94a3b8; }
.dash-page .empty { color:#6b7280; font-size:.85rem; padding:.3rem 0; }
.dash-page .more { margin-top:auto; padding-top:.6rem; }
.dash-page .more a { color:#0F4E88; font-weight:600; text-decoration:none; font-size:.85rem; }
.dash-page .alert { background:#fef9c3; border:1px solid #fde047; border-radius:8px; padding:.4rem .6rem; font-size:.8rem; margin:.3rem 0; color:#854d0e; }

/* --- /admin/users (tablas son .admin-table -> el gris lo da app.css; las reglas
       genéricas table/th/td del inline eran inertes y NO se reubican) --- */
.users-page { max-width:1000px; margin:0 auto; padding:1rem 1rem 4rem; color:#1f2937; background:#EEF2F7; }
.users-page h1 { font-size:1.4rem; margin:.3rem 0; }
.users-page h2 { font-size:1.1rem; margin:1.4rem 0 .4rem; }
.users-page .userbar { display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  padding:.5rem .7rem; background:#E6EEF7; border:1px solid #C7D8EE; border-radius:8px; margin-bottom:.75rem; font-size:.9rem; }
.users-page .userbar a { color:#0F4E88; font-weight:600; text-decoration:none; }
.users-page .help { background:#eff6ff; border:1px solid #93c5fd; border-radius:8px; padding:.7rem .9rem; margin:.5rem 0; font-size:.92rem; }
.users-page .panel { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:.9rem 1rem; margin-bottom:1rem; }
.users-page label.block { display:block; font-weight:600; margin:.7rem 0 .25rem; }
.users-page input[type="text"], .users-page input[type="password"] { width:100%; max-width:24rem; padding:.55rem; border:1px solid #d1d5db; border-radius:8px; font-size:1rem; }
.users-page .tails { display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:.3rem; }
.users-page .tails label { font-weight:600; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:.35rem .6rem; cursor:pointer; }
.users-page button { border:none; border-radius:8px; padding:.5rem .75rem; font-weight:600; cursor:pointer; font-size:.88rem; }
.users-page .b-ok { background:#1466B8; color:#fff; } .users-page .b-no { background:#fee2e2; color:#991b1b; }
.users-page .b-go { background:#16a34a; color:#fff; } .users-page .b-view { background:#E6EEF7; color:#0F4E88; }
.users-page .badge { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.76rem; font-weight:700; }
.users-page .b-act { background:#dcfce7; color:#166534; } .users-page .b-ina { background:#fee2e2; color:#991b1b; }
.users-page .role { color:#475569; }
.users-page .muted { color:#6b7280; font-size:.88rem; }
.users-page .acts { display:flex; flex-direction:column; gap:.35rem; }
.users-page .msg { margin-top:.5rem; font-weight:600; } .users-page .ok { color:#166534; } .users-page .err { color:#991b1b; }
/* Lista de clientes en un panel con scroll (estilo Entidades); orden alfabético
   lo da la plantilla con |sort. Encabezado fijo al hacer scroll en escritorio. */
.listbox { max-height:60vh; overflow:auto; border:0.5px solid var(--line); border-radius:12px; background:#fff; }
.listbox table.admin-table { border:0; border-radius:0; }
.listbox thead th { position:sticky; top:0; z-index:2; background:var(--sec); }
/* Hub "elige y GO" (Clientes): barra de selección + utilidad para ocultar filas. */
.is-hidden { display:none !important; }
.hubpick { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:.2rem 0 .4rem; }
.hubpick select { max-width:22rem; }
/* Papelera (borrado reversible): lista de filas con Restaurar / Borrar definitivo. */
details.trash > summary { cursor:pointer; font-weight:700; color:#1466B8; }
.trow { display:flex; justify-content:space-between; align-items:center; gap:.6rem;
        padding:.45rem .2rem; border-bottom:0.5px solid #E4E4E8; font-size:.92rem; }
.trow:last-child { border-bottom:none; }
.trow .tact { display:flex; gap:.4rem; flex-wrap:wrap; }
/* Tablero de operación: barras horizontales (render server-side, sin JS · CSP-safe). */
.barrow { display:flex; align-items:center; gap:.5rem; margin:.3rem 0; font-size:.85rem; }
.barlbl { flex:0 0 38%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--txt); }
.barwrap { flex:1; height:.7rem; background:var(--sec); border-radius:6px; overflow:hidden; }
.bar { display:block; height:100%; background:var(--accent); border-radius:6px; }
.barn { flex:0 0 auto; min-width:1.6rem; text-align:right; color:var(--muted); font-weight:600; }

/* --- /admin/package-history (tabla es .admin-table -> gris vía app.css; las
       reglas genéricas table/th/td del inline eran inertes y NO se reubican) --- */
.pkg-page { max-width:1180px; margin:0 auto; padding:1rem 1rem 4rem; color:#1f2937; background:#EEF2F7; }
.pkg-page h1 { font-size:1.4rem; margin:.3rem 0; }
.pkg-page .help { background:#eff6ff; border:1px solid #93c5fd; border-radius:8px; padding:.6rem .9rem; margin:.5rem 0; font-size:.92rem; }
.pkg-page form.filters { display:flex; flex-wrap:wrap; gap:.5rem; align-items:end; margin:.6rem 0 1rem;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:.7rem .9rem; }
.pkg-page .filters label { display:flex; flex-direction:column; font-size:.78rem; color:#475569; font-weight:600; gap:.2rem; }
.pkg-page .filters input, .pkg-page .filters select { padding:.4rem .5rem; border:1px solid #d1d5db; border-radius:7px; font-size:.9rem; }
.pkg-page .filters button { border:none; border-radius:8px; padding:.5rem .8rem; font-weight:600; cursor:pointer; background:#1466B8; color:#fff; }
.pkg-page .filters a.clear { color:#475569; font-size:.85rem; align-self:center; text-decoration:none; }
.pkg-page .badge { display:inline-block; padding:.08rem .45rem; border-radius:999px; font-size:.74rem; font-weight:700; }
.pkg-page .b-ok { background:#dcfce7; color:#166534; } .pkg-page .b-no { background:#fee2e2; color:#991b1b; } .pkg-page .b-sk { background:#fef9c3; color:#854d0e; }
.pkg-page .muted { color:#94a3b8; font-size:.78rem; }
.pkg-page a.dl { background:#E6EEF7; color:#0F4E88; border-radius:7px; padding:.3rem .55rem; font-weight:600; text-decoration:none; font-size:.82rem; }
.pkg-page .empty { color:#6b7280; padding:.8rem; }

/* --- /admin/sistema --- */
.sistema-page .card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:1rem; margin-bottom:.7rem; }
.sistema-page a { color:#0F4E88; text-decoration:none; font-weight:600; }

/* --- /admin/sistema/integraciones --- */
.integ-page .row { display:flex; justify-content:space-between; padding:.5rem .2rem; border-bottom:1px solid #f1f5f9; }
.integ-page .pill { border-radius:6px; padding:0 .4rem; font-size:.8rem; }
.integ-page .ok { background:#dcfce7; color:#166534; } .integ-page .off { background:#fee2e2; color:#991b1b; } .integ-page .muted { color:#64748b; }

/* ===========================================================================
   2C) Páginas admin SENSIBLES (solo presentación; ids/forms/CSRF/JS intactos).
   Reubicado verbatim desde su <style> inline, scopeado por clase de body. La
   tabla de /admin/security usa .admin-table (gris de arriba). NOTA: las stat-cards
   azules de security se conservan tal cual (no es recoloreo, es reubicación).
   =========================================================================== */
.security-page *, .backups-page * { box-sizing: border-box; }

/* --- /admin/security (solo lectura) --- */
.security-page { max-width:1180px; margin:0 auto; padding:1rem 1rem 4rem; color:#111827; background:#EEF2F7; }
.security-page h1 { font-size:1.4rem; margin:.3rem 0; }
.security-page .help { background:#eff6ff; border:1px solid #93c5fd; border-radius:8px; padding:.6rem .9rem; margin:.5rem 0; font-size:.92rem; }
.security-page .cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:.6rem; margin:.6rem 0 1rem; }
.security-page .card { background:#e8f1fb; border:1px solid #8fb5e3; border-radius:10px; padding:.55rem .7rem; }
.security-page .card .num { font-size:1.5rem; font-weight:800; color:#1e3a66; } .security-page .card .lbl { font-size:.78rem; color:#475569; }
.security-page .card.crit { background:#fef2f2; border-color:#ef4444; } .security-page .card.crit .num { color:#991b1b; }
.security-page form.filters { display:flex; flex-wrap:wrap; gap:.5rem; align-items:end; margin:.4rem 0 1rem;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:.7rem .9rem; }
.security-page .filters label { display:flex; flex-direction:column; font-size:.74rem; color:#475569; font-weight:600; gap:.2rem; }
.security-page .filters .chk { flex-direction:row; align-items:center; gap:.35rem; }
.security-page .filters input, .security-page .filters select { padding:.4rem .5rem; border:1px solid #d1d5db; border-radius:7px; font-size:.88rem; }
.security-page .filters button { border:none; border-radius:8px; padding:.5rem .8rem; font-weight:600; cursor:pointer; background:#1466B8; color:#fff; }
.security-page .filters a.clear { color:#475569; font-size:.85rem; align-self:center; text-decoration:none; }
.security-page .badge { display:inline-block; padding:.05rem .4rem; border-radius:999px; font-size:.7rem; font-weight:700; white-space:nowrap; }
.security-page .b-crit { background:#fee2e2; color:#991b1b; } .security-page .b-ok { background:#dcfce7; color:#166534; } .security-page .b-n { background:#E6EEF7; color:#0F4E88; }
.security-page .muted { color:#6b7280; } .security-page .empty { color:#6b7280; padding:.8rem; }
.security-page td.bk { word-break:break-word; overflow-wrap:anywhere; }

/* --- /admin/backups (solo lectura) --- */
.backups-page { max-width:760px; margin:0 auto; padding:1rem 1rem 4rem; color:#111827; background:#EEF2F7; }
.backups-page h1 { font-size:1.4rem; margin:.3rem 0; }
.backups-page .help { background:#eff6ff; border:1px solid #93c5fd; border-radius:8px; padding:.6rem .9rem; margin:.5rem 0; font-size:.92rem; }
.backups-page .state { display:inline-block; padding:.25rem .8rem; border-radius:999px; font-weight:800; font-size:1rem; }
.backups-page .ok { background:#dcfce7; color:#166534; } .backups-page .failed { background:#fee2e2; color:#991b1b; } .backups-page .missing { background:#fef9c3; color:#854d0e; }
.backups-page table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #cbddf4; border-radius:10px; overflow:hidden; margin-top:.8rem; }
.backups-page th, .backups-page td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid #eef0f3; font-size:.92rem; }
.backups-page th { width:42%; color:#475569; background:#f4f8fd; }
.backups-page .rec { margin-top:1rem; padding:.7rem .9rem; border-radius:8px; font-weight:600; }
.backups-page .rec.ok { background:#ecfdf5; border:1px solid #10b981; color:#065f46; }
.backups-page .rec.failed { background:#fef2f2; border:1px solid #ef4444; color:#991b1b; }
.backups-page .rec.missing { background:#fffbeb; border:1px solid #f59e0b; color:#854d0e; }
.backups-page .muted { color:#6b7280; }

/* ===========================================================================
   3) AUTH de cliente (login / password-reset / index). Solo presentación;
   ids/forms/CSRF/JS/campos-token intactos. Reubicado VERBATIM desde el <style>
   inline, scopeado por clase de body. login_2fa queda INLINE (secreto 2FA, 100%
   inline sin <style> que mover — ver 2C/admin_2fa).
   =========================================================================== */
.login-page *, .pwreset-page * { box-sizing: border-box; }

/* --- /login --- */
.login-page { font-family: -apple-system, system-ui, sans-serif; max-width: 420px; margin: 0 auto;
  padding: 2rem 1rem; color: #1f2937; background: #EEF2F7; }
.login-page h1 { font-size: 1.4rem; margin: 0 0 1rem; }
.login-page label { display: block; font-weight: 600; margin: 1rem 0 0.4rem; }
.login-page input[type="text"], .login-page input[type="password"] {
  width: 100%; padding: 0.75rem; font-size: 1rem; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; }
.login-page button { width: 100%; padding: 0.9rem; font-size: 1.1rem; font-weight: 700; border: none;
  border-radius: 10px; background: #1466B8; color: #fff; margin-top: 1.5rem; cursor: pointer; }
.login-page button:active { background: #0F4E88; }
.login-page .error { margin-top: 1rem; padding: 0.7rem 0.9rem; border-radius: 8px; background: #fef2f2;
  border: 1px solid #ef4444; color: #991b1b; font-size: 0.95rem; }
.login-page .brand { color: #4b5563; margin: 0 0 1.5rem; font-size: 0.95rem; }

/* --- /password-reset y /password-reset/confirm (CSS idéntico -> scope compartido) --- */
.pwreset-page { font-family:-apple-system,system-ui,sans-serif; max-width:420px; margin:0 auto;
  padding:2rem 1rem; color:#1f2937; background:#EEF2F7; }
.pwreset-page h1 { font-size:1.3rem; margin:0 0 .4rem; }
.pwreset-page .brand { color:#4b5563; margin:0 0 1.2rem; font-size:.95rem; }
.pwreset-page label { display:block; font-weight:600; margin:1rem 0 .4rem; }
.pwreset-page input[type="text"], .pwreset-page input[type="password"] { width:100%; padding:.75rem;
  font-size:1rem; border:1px solid #d1d5db; border-radius:8px; background:#fff; }
.pwreset-page button { width:100%; padding:.9rem; font-size:1.1rem; font-weight:700; border:none;
  border-radius:10px; background:#1466B8; color:#fff; margin-top:1.5rem; cursor:pointer; }
.pwreset-page button:active { background:#0F4E88; }
.pwreset-page .error { margin-top:1rem; padding:.7rem .9rem; border-radius:8px; background:#fef2f2;
  border:1px solid #ef4444; color:#991b1b; font-size:.95rem; }
.pwreset-page .ok { margin-top:1rem; padding:.7rem .9rem; border-radius:8px; background:#ecfdf5;
  border:1px solid #10b981; color:#065f46; font-size:.97rem; }
.pwreset-page .back { margin-top:1.4rem; text-align:center; }
.pwreset-page .back a { color:#1466B8; font-weight:600; text-decoration:none; }

/* --- / (index: generador APIS, legacy) --- */
.index-page { font-family: system-ui, sans-serif; max-width: 900px; margin: 2rem auto; padding: 0 1rem; color: #222; }
.index-page h1 { margin-bottom: 0.25rem; }
.index-page .sub { color: #555; margin-top: 0; margin-bottom: 1.5rem; }
.index-page textarea { width: 100%; min-height: 280px; font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; padding: 0.5rem; box-sizing: border-box; }
.index-page button { margin-top: 0.75rem; padding: 0.6rem 1.2rem; font-size: 1rem; cursor: pointer; }
.index-page button[disabled] { opacity: 0.5; cursor: wait; }
.index-page .box { margin-top: 1.5rem; padding: 1rem; border-radius: 6px; border: 1px solid #ddd; }
.index-page .ok { background: #ecfdf5; border-color: #10b981; }
.index-page .err { background: #fef2f2; border-color: #ef4444; }
.index-page .warn { background: #fffbeb; border-color: #f59e0b; }
.index-page .muted { color: #666; font-size: 0.9rem; }
.index-page ul { margin: 0.25rem 0 0.25rem 1.25rem; padding: 0; }
.index-page code { background: #f3f4f6; padding: 0 0.25rem; border-radius: 3px; }
.index-page .download-link { display: inline-block; margin-top: 0.5rem; padding: 0.4rem 0.9rem;
  background: #1466B8; color: #fff; text-decoration: none; border-radius: 4px; }


/* ===========================================================================
   Tanda 1 — extras de cliente
   =========================================================================== */
/* entidad_crud: badge de vigencia (semántico) + subtítulo de grupo */
.vb { border-radius:6px; padding:0 .4rem; font-size:.74rem; background:#dcfce7; color:#166534; }
.vb.soon { background:#fef9c3; color:#854d0e; } .vb.bad { background:#fee2e2; color:#991b1b; }
h3.grp { font-size:.85rem; color:#334155; margin:.9rem 0 .2rem; }

/* ===========================================================================
   /scan — page-specific, SCOPEADO bajo body.scan-page (el body max-width:720px
   queda como .scan-page; el cropper/modal/pasos quedan EXACTOS). Migrado desde
   el <style> inline de templates/scan.html.
   =========================================================================== */
:root { color-scheme: light; }
.scan-page * { box-sizing: border-box; }
.scan-page { font-family: -apple-system, system-ui, sans-serif;
      max-width: 720px;
      margin: 0 auto;
      padding: 1rem 1rem 4rem;
      color: #1f2937;
      background: #EEF2F7; }
.scan-page h1 { font-size: 1.05rem; font-weight: 600; color: #fff; background: #042C53;
         margin: 0.2rem 0 1rem; padding: 13px 15px; border-radius: 12px; }
.scan-page .sub { color: #4b5563; margin: 0 0 1rem; }
.scan-page .review { background: #fffbeb;
      border: 1px solid #f59e0b;
      border-radius: 8px;
      padding: 0.7rem 0.9rem;
      margin: 0.5rem 0 1rem;
      font-size: 0.95rem; }
.scan-page label.block { display: block; font-weight: 600; margin: 1rem 0 0.4rem; }
.scan-page select, .scan-page input[type="text"], .scan-page input[type="date"], .scan-page input[type="file"] { width: 100%;
      padding: 0.7rem;
      font-size: 1rem;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      background: #fff; }
.scan-page .grid-2 { display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.6rem; }
.scan-page .file-input-wrapper { border: 2px dashed #C5C5CA;
      background: #F2F2F5;
      border-radius: 10px;
      padding: 1rem;
      text-align: center; }
.scan-page .file-input-wrapper p { margin: 0.25rem 0; color: #0F4E88; font-weight: 600; }
.scan-page .file-input-wrapper small { color: #475569; }
.scan-page .preview-box { margin-top: 1rem;
      padding: 0.85rem 0.95rem;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #fff;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 0.92rem;
      word-break: break-all;
      color: #0f172a; }
.scan-page .preview-box .lbl { color: #64748b; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
.scan-page .preview-box .val.invalid { color: #b91c1c; }
.scan-page button.primary, .scan-page #generate-btn { width: 100%;
      padding: 1rem;
      font-size: 1.15rem;
      font-weight: 700;
      border: none;
      border-radius: 12px;
      background: #1466B8;
      color: #fff;
      margin-top: 1.5rem;
      -webkit-tap-highlight-color: transparent; }
.scan-page button.primary:active, .scan-page #generate-btn:active { background: #0F4E88; }
.scan-page button[disabled] { opacity: 0.5; }
.scan-page .files-list { margin-top: 0.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.45rem; }
.scan-page .file-row { display: flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.4rem 0.55rem;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      font-size: 0.92rem; }
.scan-page .file-row .thumb { width: 52px; height: 52px;
      object-fit: cover; border-radius: 4px;
      flex-shrink: 0;
      background: #f3f4f6;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; color: #6b7280; font-size: 0.75rem; }
.scan-page .file-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-page .file-row .actions { display: flex; gap: 0.3rem; flex-shrink: 0; }
.scan-page .file-row .crop-btn { background: #dbeafe; color: #1e3a8a;
      border: none; border-radius: 4px; padding: 6px 10px;
      cursor: pointer; pointer-events: auto;
      font-weight: 600; font-size: 0.9rem; font-family: inherit;
      user-select: none; -webkit-user-select: none;
      position: relative; z-index: 2; margin: 0; }
.scan-page .file-row .remove { background: #fee2e2; color: #991b1b;
      border: none; border-radius: 4px; padding: 6px 10px;
      cursor: pointer; pointer-events: auto;
      font-weight: 600; font-size: 0.9rem; font-family: inherit;
      user-select: none; -webkit-user-select: none;
      position: relative; z-index: 2; margin: 0; }
.scan-page .file-row .crop-btn:active { background: #E4E4E8; }
.scan-page .file-row .remove:active { background: #fecaca; }
.scan-page .cropper-error { margin-top: 0.6rem;
      padding: 0.55rem 0.8rem;
      background: #fef2f2;
      border: 1px solid #ef4444;
      border-radius: 6px;
      color: #991b1b;
      font-size: 0.92rem;
      display: none; }
.scan-page .cropper-error.show { display: block; }
.scan-page .badge-cropped { background: #dcfce7; color: #166534;
      border-radius: 4px; padding: 1px 6px;
      margin-left: 0.35rem; font-size: 0.72rem; font-weight: 700;
      vertical-align: middle; }
.scan-page .box { margin-top: 1.25rem;
      padding: 0.9rem 1rem;
      border-radius: 8px;
      border: 1px solid #ddd; }
.scan-page .ok { background: #ecfdf5; border-color: #10b981; }
.scan-page .err { background: #fef2f2; border-color: #ef4444; }
.scan-page .warn { background: #fffbeb; border-color: #f59e0b; }
.scan-page .download-link { display: inline-block;
      margin-top: 0.6rem;
      padding: 0.6rem 1rem;
      background: #1466B8;
      color: #fff !important;
      text-decoration: none;
      border-radius: 8px;
      font-weight: 600; }
.scan-page .muted { color: #6b7280; font-size: 0.92rem; }
.scan-page #cropper-modal { position: fixed;
      inset: 0;
      z-index: 99999;
      background: rgba(0, 0, 0, 0.92);
      display: none;
      align-items: center;
      justify-content: center;
      padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
      touch-action: none;
      -webkit-user-select: none;
      user-select: none; }
.scan-page #cropper-modal.is-open { display: flex; }
.scan-page .cropper-panel { width: 100%;
      max-width: 900px;
      
      height: calc(100dvh - 120px);
      display: flex;
      flex-direction: column;
      background: #111;
      border-radius: 16px;
      overflow: hidden; }
.scan-page .cropper-image-wrap { flex: 1;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #222;
      overflow: hidden; }
.scan-page #cropper-image { display: block;
      max-width: 100%;
      max-height: 100%;
      opacity: 1; }
.scan-page .cropper-actions { display: flex;
      gap: 12px;
      padding: 12px;
      background: #ffffff;
      position: sticky;
      bottom: 0;
      z-index: 100000; }
.scan-page .cropper-actions button { flex: 1;
      margin-top: 0;
      padding: 14px;
      font-size: 1rem;
      font-weight: 700;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      pointer-events: auto; }
.scan-page .cropper-actions .apply { background: #1466B8; color: #fff; }
.scan-page .cropper-actions .cancel { background: #e5e7eb; color: #111; }
.scan-page.cropper-open { overflow: hidden; touch-action: none; }
.scan-page .cropper-instructions { padding: 10px 14px;
      background: #111;
      color: #EEF2F7;
      font-size: 0.92rem;
      font-weight: 500;
      text-align: center;
      border-bottom: 1px solid #1f2937; }
.scan-page .cropper-stage { position: relative;
      flex: 1;
      min-height: 0;
      background: #111;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden; }
.scan-page #cropper-image { max-width: 100%;
      max-height: 100%;
      display: block;
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-user-drag: none; }
.scan-page #cropper-overlay { position: absolute;
      box-sizing: border-box;
      border: 3px solid #1466B8;
      
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
      pointer-events: none; }
.scan-page .cropper-rotation-label { padding: 4px 12px;
      background: #111;
      color: #d1d5db;
      font-size: 0.85rem;
      text-align: center;
      border-top: 1px solid #1f2937; }
.scan-page .cropper-sliders { padding: 10px 12px;
      background: #1f2937;
      color: #EEF2F7;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 14px;
      font-size: 0.85rem; }
.scan-page .cropper-sliders label { display: flex;
      flex-direction: column;
      gap: 4px; }
.scan-page .cropper-sliders .lbl-text { display: flex;
      justify-content: space-between;
      font-weight: 600; }
.scan-page .cropper-sliders input[type="range"] { width: 100%;
      touch-action: manipulation;
      accent-color: #1466B8; }
.scan-page .cropper-actions .reset { background: #fbbf24; color: #111; }
.scan-page .cropper-actions .rotate { background: #1f2937; color: #EEF2F7; }
.scan-page .send-confirm-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45);
      display: flex; align-items: center; justify-content: center;
      z-index: 1000; padding: 1rem; }
.scan-page .send-confirm-box { background: #fff; border-radius: 12px; padding: 1.1rem 1.2rem;
      max-width: 420px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.scan-page .send-confirm-box h3 { margin: 0 0 0.4rem; font-size: 1.15rem; color: #111; }
.scan-page .send-confirm-box p { margin: 0 0 0.8rem; color: #374151; font-size: 0.95rem; }
.scan-page .send-confirm-box label { display: block; font-weight: 600; margin: 0 0 0.3rem; color: #111; }
.scan-page .send-confirm-input { border: 2px solid #000; background: #fff; color: #111;
      border-radius: 6px; min-height: 44px; font-size: 16px;
      padding: 10px 12px; width: 100%; }
.scan-page .send-confirm-input:focus { outline: 3px solid #1466B8; outline-offset: 1px; }
.scan-page .send-confirm-error { color: #991b1b; font-weight: 600; margin-top: 0.5rem; font-size: 0.9rem; }
.scan-page .send-confirm-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; }
.scan-page .send-confirm-actions button { border: none; border-radius: 8px; padding: 0.6rem 1rem; font-weight: 700; cursor: pointer; font-size: 1rem; }
.scan-page .send-confirm-actions .b-cancel { background: #e5e7eb; color: #111; }

/* ============================================================
   Rediseño "Navy Profundo" — responsive + eAPIS en dos columnas.
   Solo presentación. NO cambia ids/clases/JS ni el output oficial.
   ============================================================ */
/* Ancho de página UNIFICADO en todas las vistas con barra de navegación.
   Una sola fuente de verdad: --app-maxw. Las clases de página y el contenedor
   compartido .shell apuntan aquí, así nada "salta" al cambiar de pantalla. */
:root { --app-maxw: 1080px; }
.shell { max-width: var(--app-maxw); margin: 0 auto; padding: 1rem 1rem 4rem; }
.dash-page, .users-page, .pkg-page, .security-page, .backups-page, .scan-page { max-width: var(--app-maxw); }

.fp-card { max-width: 520px; }
.fp-below { max-width: 520px; }
.fp-card .fp-sec { color: var(--accent); font-weight: 700; font-size: 13px; }   /* etiquetas de sección: acento + negrita + 1pt */
.fp-card .fp-rolesel { font-size: 11px; font-weight: 600; color: var(--accent); background: #E6EEF7;
  border: 0.5px solid #C7D8EE; border-radius: 6px; padding: 1px 4px; cursor: pointer; }
@media (min-width: 760px) {
  .fp-card { max-width: var(--app-maxw); }
  .fp-below { max-width: var(--app-maxw); }
  .fp-cols { display: grid; grid-template-columns: 1fr 1fr; }
  .fp-cols .fp-col:last-child { border-left: 0.5px solid var(--line); }
}
.scan-page .send-confirm-actions .b-send { background: #1466B8; color: #fff; }

/* ── Tablas responsive (móvil ≤640px): cada fila se vuelve una tarjeta
   etiqueta:valor, usando los mismos tokens de la app. Se activa con
   class="rtable"; responsive-tables.js pone los data-label leídos del <thead>.
   En escritorio/tablet las tablas NO cambian. ── */
@media (max-width: 640px) {
  table.rtable { display: block; border: none; background: transparent; box-shadow: none; }
  table.rtable thead { display: none; }
  table.rtable tbody { display: block; }
  table.rtable tbody tr {
    display: block; background: var(--card); border: 0.5px solid var(--line);
    border-radius: 12px; padding: .35rem .8rem; margin-bottom: .65rem;
  }
  table.rtable tbody tr:nth-child(even) td,
  table.rtable tbody tr:hover td { background: transparent; }
  table.rtable td {
    display: block; text-align: left; padding: .4rem 0; border: none;
    border-bottom: 0.5px solid var(--line); font-size: .92rem; overflow-wrap: anywhere;
  }
  table.rtable tr td:last-child { border-bottom: none; }
  table.rtable td::before {
    content: attr(data-label); display: block; color: var(--muted);
    font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
    font-weight: 600; margin-bottom: 3px;
  }
  table.rtable td:not([data-label])::before,
  table.rtable td[data-label=""]::before { display: none; }
  /* En tarjeta, las celdas de acciones envuelven sus botones (anula nowrap en línea). */
  table.rtable td[style*="nowrap"] { white-space: normal !important; }
  table.rtable td button { margin: 3px 5px 3px 0; }
}

/* ===========================================================================
   eAPIS preview (ensamblador /app/home/eapis): tablas "Vuelo" + "Personas".
   SOLO presentación; el contenido lo inyecta static/eapis_review.js (no se toca).
   Scopeado por #flight / #persons (ids únicos de esa página).
   =========================================================================== */
#flight, #persons { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .2rem 0 1.1rem; }
#flight h2, #persons h2 { font-size: 1rem; margin: .7rem 0 .5rem; color: var(--txt); }
#flight table, #persons table { border-collapse: separate; border-spacing: 0; width: 100%;
      background: #fff; border: .5px solid var(--card-bd); border-radius: 12px; overflow: hidden; font-size: .82rem; }
#persons table { table-layout: auto; }
#flight th, #flight td, #persons th, #persons td { padding: .4rem .5rem; text-align: left;
      vertical-align: middle; border-bottom: .5px solid var(--line); white-space: normal; }
#flight tr:last-child td, #persons tbody tr:last-child td { border-bottom: 0; }
#flight th { background: var(--sec); color: var(--muted); font-weight: 600; }
#persons thead th { position: sticky; top: 0; z-index: 1; background: var(--hdr); color: #fff;
      font-weight: 600; font-size: .7rem; }
#persons tbody tr:nth-child(even) { background: #FAFBFD; }
#persons tbody tr:hover { background: #EEF3FB; }
#persons tbody tr.review { background: #FFFBEB; }
#persons tbody tr.review:hover { background: #FDF3D6; }
#persons .orig { font-size: .72rem; color: var(--muted); margin-bottom: .25rem; white-space: normal; }
#persons input.cell-edit { width: 6rem; field-sizing: content; min-width: 4.5rem; max-width: 9rem;
      min-height: 30px; padding: .2rem .4rem; border: 1px solid #cbd5e1; border-radius: 7px;
      font-size: .82rem; color: var(--accent-dk); background: #fff; }
#persons input.cell-edit.no, #persons input.cell-edit.se { width: 5rem; min-width: 4rem; max-width: 7.5rem; }
#persons .badge { display: inline-block; background: #dcfce7; color: #166534; border: 1px solid #bbf7d0;
      border-radius: 999px; padding: .05rem .55rem; font-size: .72rem; font-weight: 600; white-space: nowrap; }
#persons label { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; white-space: nowrap; }

/* ===========================================================================
   ★ NAVY BOLD (rediseño 2026-07, aprobado por prototipo) — SOLO presentación.
   Capa final: re-tematiza los componentes existentes SIN cambiar ids/clases/JS
   ni el output oficial. Paleta: navy #0b2240→#17466f, acento cielo #3b82f6,
   tarjetas blancas radius 16-18 con sombra suave, botones navy con lift.
   =========================================================================== */
:root {
  --hdr: #0b2240;            /* navy profundo (barras) */
  --page: #f4f6fa;           /* fondo más claro y azulado */
  --card-bd: #e5eaf2;        /* borde hairline frío */
  --line: #e5eaf2;
  --sec: #f0f4f9;
  --accent: #16406f;         /* acento principal ahora navy medio */
  --accent-dk: #0b2240;
  --nb-grad: linear-gradient(165deg, #0b2240 0%, #123563 78%, #17466f 100%);
  --nb-shadow: 0 5px 20px rgba(12,30,60,.08);
  --nb-shadow-sm: 0 3px 12px rgba(12,30,60,.06);
}

/* Barras superiores: gradiente navy + radios generosos */
.appnav, .page-hdr, .app-hdr, .scan-page h1 {
  background: var(--nb-grad); border-radius: 16px;
}
.page-hdr .t, .app-hdr .t { font-weight: 800; font-size: 17px; }
.appnav { padding: .75rem 1.05rem; }
.appnav .nl:hover { text-decoration: none; }

/* Nav admin COMPACTO: «Administrar ▾» como dropdown details/summary (CSS-only,
   sin JS — CSP-safe). Los grupos completos viven dentro del panel. */
.appnav details.nb-adm { position: relative; display: inline-block; }
.appnav details.nb-adm > summary { list-style: none; cursor: pointer;
  color: #CFE0F2; font-weight: 700; letter-spacing: .02em; user-select: none; }
.appnav details.nb-adm > summary::-webkit-details-marker { display: none; }
.appnav details.nb-adm > summary:hover { color: #fff; }
.appnav details.nb-adm[open] > summary { color: #fff; }
.appnav .nb-adm-panel { position: absolute; left: 0; top: calc(100% + .55rem); z-index: 80;
  background: #fff; border: 1px solid #d7e3f2; border-radius: 14px;
  box-shadow: 0 14px 36px rgba(11,34,64,.20);
  padding: .85rem 1.05rem; display: flex; gap: 1.25rem; min-width: max-content; }
.appnav .nb-adm-panel .nb-adm-col { display: flex; flex-direction: column; gap: .32rem; min-width: 8.5rem; }
.appnav .nb-adm-panel .ng { color: #7684a0; margin: 0 0 .1rem; }
.appnav .nb-adm-panel .nl { color: #0b2240; font-weight: 600; }
.appnav .nb-adm-panel .nl:hover { color: #16406f; text-decoration: underline; }
@media (max-width: 720px) {
  /* En celular el panel se acomoda EN FLUJO (nada flotante que se corte). */
  .appnav .nb-adm-panel { position: static; display: block; box-shadow: none;
    border: 0; background: transparent; padding: .35rem 0 0 .6rem; min-width: 0; }
  .appnav .nb-adm-panel .nb-adm-col { display: block; min-width: 0; margin-bottom: .25rem; }
  .appnav .nb-adm-panel .nb-adm-col .nl { display: inline-block; margin-right: .7rem; color: #CFE0F2; }
  .appnav .nb-adm-panel .ng { display: block; color: rgba(255,255,255,.55); }
}

/* Tarjetas: flotantes, sin la franja superior azul */
.card, .app-card, .admin-card {
  border: 0; border-top: 0; border-radius: 18px; box-shadow: var(--nb-shadow);
}
.sec-label, .app-sec { font-weight: 800; letter-spacing: .09em; color: #7684a0; }

/* Botones principales: navy sólido, pill/rounded, lift al hover */
.pkg-go, button.primary, a.create, .gobtn, button.go, .app-btn.primary,
.scan-page button.primary, .scan-page #generate-btn, .login-page button,
.pwreset-page button {
  background: var(--hdr); border-radius: 12px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.pkg-go:hover, button.go:hover, .gobtn:hover, a.create:hover,
.app-btn.primary:hover, button.primary:hover {
  background: #123563; transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(11,34,64,.32);
}
.gobtn.ghost { background: #eaf1fb; color: #123563; }

/* Pasos del paquete como CHIPS en línea (menos alto, menos ruido) */
.pkg-incl { flex-direction: row; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pkg-it { background: #f0f5fc; border-radius: 999px; padding: .28rem .7rem;
          font-size: .74rem; font-weight: 700; color: #33507a; gap: .35rem; align-items: center; }
.pkg-step { width: 15px; height: 15px; line-height: 15px; font-size: 9.5px;
            background: var(--hdr); color: #fff; }
.pkg-ck { display: none; }               /* la palomita era ruido: el chip ya lo dice */
.pkg-sub { font-size: .68rem; }
.pkg-subitems { flex-basis: 100%; margin: .05rem 0 .1rem .4rem; font-size: .72rem; }

/* Tiles de accesos individuales: blancos flotantes con burbuja de icono */
.act { background: #fff; border: 0; border-top: 0; border-radius: 16px;
       box-shadow: var(--nb-shadow-sm); flex-direction: row; align-items: center; }
.act:hover { background: #fff; border-color: transparent; transform: translateY(-2px);
             box-shadow: 0 8px 22px rgba(12,30,60,.14); }
.act-ic { background: #eaf1fb; border-radius: 12px; width: 40px; height: 40px; font-size: 19px; }
.act-t { font-weight: 700; font-size: 14px; }

/* Stats de Mis datos: tarjetitas blancas con número navy */
.stat { background: #fff; border-radius: 14px; box-shadow: var(--nb-shadow-sm); }
.stat .n { color: var(--hdr); }

/* Badges redondas */
.badge, .vb, .b-red, .b-amber { border-radius: 999px; padding: .12rem .55rem; font-weight: 700; }

/* Inputs: radius + focus ring cielo */
input, select, textarea { border-radius: 12px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.13);
}

/* Historiales del home como ACORDEÓN al fondo (colapsables, cero ruido) */
details.nb-hist { background: #fff; border-radius: 16px; box-shadow: var(--nb-shadow-sm);
                  margin-bottom: 10px; overflow: hidden; }
details.nb-hist > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; padding: 13px 16px; font-weight: 800; font-size: .92rem; }
details.nb-hist > summary::-webkit-details-marker { display: none; }
details.nb-hist > summary::after { content: "›"; color: #9fb1c8; font-size: 1.15rem;
  transform: rotate(90deg); transition: transform .15s; }
details.nb-hist[open] > summary::after { transform: rotate(-90deg); }
details.nb-hist > .nb-hist-body { padding: 0 16px 14px; }
details.nb-hist h2 { font-size: .95rem; margin: 0; }

/* LOGIN re-vestido 100% por CSS (mismo template/ids/campos/CSRF) */
.login-page { background: var(--nb-grad); max-width: none; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0; padding: 24px 16px; }
.login-page h1 { color: #fff; text-align: center; font-size: 1.25rem; letter-spacing: .01em;
  margin: 0 0 .2rem; }
.login-page .brand { color: #a9bdd8; text-align: center; margin: 0 0 1.2rem; }
.login-page form { background: #fff; border-radius: 22px; padding: 24px 22px;
  width: 100%; max-width: 400px; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.login-page form label:first-of-type { margin-top: 0; }
.login-page .error { width: 100%; max-width: 400px; }
.login-page button { border-radius: 12px; }
.login-page a[href="/password-reset"] { color: #7fb0ff !important; }

/* Password reset: mismo tratamiento */
.pwreset-page { background: var(--nb-grad); max-width: none; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0; padding: 24px 16px; }
.pwreset-page h1 { color: #fff; text-align: center; margin: 0 0 .2rem; }
.pwreset-page .brand { color: #a9bdd8; text-align: center; }
.pwreset-page form { background: #fff; border-radius: 22px; padding: 24px 22px;
  width: 100%; max-width: 400px; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.pwreset-page .back a { color: #7fb0ff; }
.pwreset-page .ok, .pwreset-page .error { width: 100%; max-width: 400px; }

/* ── NAVY BOLD · HERO del home (nav + saludo grande + accesos como quick-icons,
   TODO dentro del gradiente, como el prototipo aprobado). Scopeado a .nb-hero:
   las demás páginas siguen con su appnav/page-hdr normales. ── */
.nb-hero { background: var(--nb-grad); border-radius: 20px; padding: 14px 16px 20px; margin: .2rem 0 1.2rem; }
.nb-hero .appnav { background: transparent; border-radius: 0; box-shadow: none;
  padding: 0 0 .65rem; margin: 0 0 .8rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.nb-hero .page-hdr { background: transparent; padding: 0; margin: 0; border-radius: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.nb-hero .page-hdr .t { font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; }
.nb-hero .page-hdr .s { color: #a9bdd8; font-size: .85rem; opacity: 1; }
.nb-hh { display: flex; flex-direction: column; gap: 16px; }
.nb-hero .sec-label { color: #a9bdd8; margin: .1rem 0 .5rem; }
.nb-hero .act-grid, .nb-hero .act-grid.cols-auto { display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 0; }
.nb-hero .act { flex-direction: column; align-items: center; text-align: center; justify-content: flex-start;
  gap: 9px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  border-radius: 17px; box-shadow: none; padding: 14px 6px; min-width: 0; }
.nb-hero .act:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); box-shadow: none; }
.nb-hero .act-ic { background: rgba(255,255,255,.13); }
.nb-hero .act-tx { align-items: center; }
.nb-hero .act-t { color: #fff; font-size: 11.5px; line-height: 1.3; font-weight: 700; overflow-wrap: break-word; }
.nb-hero .act-s { display: none; }   /* los subtítulos (CBP/INM/…) siguen en el DOM */
.nb-hero .chev { display: none; }
.nb-hero .act-ic { width: 44px; height: 44px; font-size: 20px;
  display: flex; align-items: center; justify-content: center; }
/* Fase 2: iconos SVG inline (línea blanca limpia) en vez de emojis */
.nb-hero .act-ic svg { width: 22px; height: 22px; color: #fff; display: block; }
/* iPhone: 5 columnas quedan como tubos flacos con el texto en 3 renglones.
   En angosto los accesos pasan a 2 COLUMNAS anchas, con el icono a la
   IZQUIERDA y el texto en una línea (letra más chica). El 5º (eAPIS México)
   ocupa el ancho completo. iPad/web (>720px) quedan igual que hoy. */
@media (max-width: 720px) {
  .nb-hero .act-grid, .nb-hero .act-grid.cols-auto {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nb-hero .act { flex-direction: row; align-items: center; justify-content: flex-start;
    text-align: left; gap: 10px; padding: 10px 12px; border-radius: 14px; }
  .nb-hero .act-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; }
  .nb-hero .act-ic svg { width: 18px; height: 18px; }
  .nb-hero .act-tx { align-items: flex-start; min-width: 0; }
  .nb-hero .act-t { font-size: 12.5px; line-height: 1.2; }
  .nb-hero .act-grid .act:nth-child(5) { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .nb-hero { padding: 18px 22px 26px; }
  .nb-hh { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .nb-hero .page-hdr { flex: 1; }
  .nb-quick { flex: 0 1 560px; min-width: 480px; }
  .nb-hero .page-hdr .t { font-size: 2.1rem; }
}

/* ── NAVY BOLD · paquetes con banda lateral + ruta visual (como el prototipo).
   El lead y los subitems salen del render (siguen en el DOM para la suite). ── */
.card.pkg { position: relative; overflow: hidden; padding-left: 24px; }
.card.pkg::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  background: linear-gradient(180deg, #3b82f6, #0b2240); }
.home-grid section.pkg:nth-of-type(2)::before { background: linear-gradient(180deg, #0e6b3a, #0b2240); }
.pkg-lead { display: none; }
.pkg-subitems { display: none; }
.card.pkg h2 { font-size: 1.05rem; }
.nb-route { display: flex; align-items: center; gap: 10px; margin: .55rem 0 .6rem; font-weight: 800;
  font-size: .95rem; color: #123563; }
.nb-route .ln { flex: 1; height: 2px; position: relative;
  background: repeating-linear-gradient(90deg, #c3d3ea 0 7px, transparent 7px 13px); }
.nb-route .ln::after { content: "✈️"; position: absolute; top: -9px; left: 46%; font-size: 13px; }

/* ── NAVY BOLD · "Mis datos": los stats flotan sueltos (sin tarjeta contenedora)
   y "Administrar →" vive en la etiqueta de sección, como el prototipo. ── */
.card.nb-bare { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.card.nb-bare .cta { display: none; }   /* el link se movió al sec-label (mismo href) */
.sec-label .nb-adm { float: right; font-weight: 700; color: #2563eb; text-decoration: none;
  text-transform: none; letter-spacing: 0; font-size: 12px; }