:root{
  --azul:#1A4E83; --azul-deep:#123a63; --azul-soft:#eaf1f8;
  --rojo:#E7372C; --rojo-deep:#c52a20;
  --ink:#1f2933; --paper:#f5f7fa; --card:#ffffff;
  --line:#dce3ec; --mut:#64748b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;line-height:1.5}

/* ===== Shell =====
   El diseño de ESCRITORIO lo aporta nviar.css (.nv-app / .nv-sidebar /
   .nv-topbar / .nv-content). Aquí solo el comportamiento MÓVIL: barra ☰ + drawer. */
.mobile-bar{display:none}
.nav-backdrop{display:none}

/* Los ítems del menú son <button>: quitar el aspecto nativo del navegador
   (fondo/borde/caja) para que tomen el estilo NVIAR .nv-nav__item. */
.nv-nav__item{
  appearance:none;-webkit-appearance:none;
  background:transparent;border:0;width:100%;text-align:left;
  font-family:var(--nv-font);font-size:13.5px;
}

@media(max-width:820px){
  /* (los selectores se escriben con mayor especificidad que nviar.css para
     ganarle, ya que nviar.css se carga después de app.css) */
  body>.nv-app{display:block}
  .mobile-bar{
    display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:40;
    background:var(--nv-navy-900);color:#fff;padding:10px 14px;
  }
  .nav-toggle{
    background:rgba(255,255,255,.16);border:none;color:#fff;font-size:20px;line-height:1;
    width:42px;height:42px;border-radius:9px;cursor:pointer;flex-shrink:0;
  }
  .mbar-logo{height:28px;width:auto;flex-shrink:0}
  .mbar-title{font-family:var(--nv-font);font-weight:800;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* La barra lateral NVIAR se convierte en panel deslizante (drawer) */
  .nav.nv-sidebar{
    position:fixed;top:0;left:0;height:100vh;width:272px;max-width:86vw;
    transform:translateX(-100%);transition:transform .25s ease;
    z-index:60;box-shadow:4px 0 24px rgba(0,0,0,.28);
  }
  .nav.nv-sidebar.open{transform:translateX(0)}
  .nv-app .nv-topbar{display:none}  /* en móvil la barra superior la hace .mobile-bar */
  .nv-app .nv-content{padding:18px 14px}

  .nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55}
  .nav-backdrop.show{display:block}
}

/* Cabecera de módulo */
.mod-head{border-bottom:3px solid var(--azul);padding-bottom:14px;margin-bottom:26px}
.mod-kicker{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--rojo);font-weight:700}
.mod-title{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(26px,4vw,40px);line-height:1;margin-top:6px;color:var(--azul)}
.mod-title em{font-style:normal;color:var(--rojo)}

/* Componentes */
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:0 2px 10px rgba(26,78,131,.06)}
.panel h2{font-family:'Fraunces',serif;font-size:21px;font-weight:600;margin-bottom:4px;color:var(--azul)}
.panel .note{font-size:12px;color:var(--mut);margin-bottom:18px}
label{display:block;font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--azul);margin:14px 0 6px}
input,select,textarea{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:8px;background:#fff;font-family:inherit;font-size:15px;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(26,78,131,.13)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{background:var(--azul);color:#fff;border:none;padding:11px 18px;border-radius:8px;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;letter-spacing:.3px;transition:.15s}
.btn:hover{background:var(--azul-deep)}
.btn-coral{background:var(--rojo)}.btn-coral:hover{background:var(--rojo-deep)}
.btn-sm{padding:7px 12px;font-size:13px}
.grid-cot{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:start}
@media(max-width:900px){.grid-cot{grid-template-columns:1fr}}

/* Tablas */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--azul);padding:10px 8px;border-bottom:2px solid var(--azul)}
td{padding:10px 8px;border-bottom:1px solid var(--line)}
tr:hover td{background:var(--azul-soft)}

/* Toast */
#toast{position:fixed;bottom:24px;right:24px;background:var(--azul);color:#fff;padding:13px 20px;border-radius:8px;font-size:14px;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none;z-index:50;box-shadow:0 6px 20px rgba(0,0,0,.2)}
#toast.show{opacity:1;transform:translateY(0)}
.loading{color:var(--mut);font-size:14px;padding:20px 0}

/* ===================== Adaptación móvil ===================== */
/* Envoltorio de tablas: permite desplazarlas horizontalmente sin romper el diseño.
   app.js envuelve cada <table> en un .tbl-scroll automáticamente. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

@media(max-width:820px){
  /* Tablas: en vez de aplastar las columnas, se desplazan de lado si no caben. */
  .tbl-scroll table{width:auto;min-width:100%}
  .tbl-scroll th,.tbl-scroll td{white-space:nowrap}
  /* Formularios de dos columnas pasan a una sola. */
  .row2{grid-template-columns:1fr}
  /* 16px en los campos evita el zoom automático de iOS al enfocar. */
  input,select,textarea{font-size:16px}
  /* Modales (overlays position:fixed): anclar arriba y permitir scroll vertical
     para que en pantallas bajas se vea todo el contenido. */
  [style*="position:fixed"][style*="inset:0"]{
    align-items:flex-start !important;
    overflow-y:auto !important;
    padding:12px !important;
  }
}

/* Pantallas muy angostas (teléfonos): títulos y tarjetas más compactos. */
@media(max-width:480px){
  .nv-content{padding:16px 12px}
  .mod-title{font-size:clamp(22px,7vw,30px)}
  .panel{padding:18px}
}