/* ═══════════════════════════════════════════════════════════════════
   VILLA FLORIDA S.A. — identidad visual del sistema.
   Azul profundo del logo + verde lima del símbolo. Tarjetas redondeadas,
   menú lateral, indicadores grandes y una convención de color estricta
   para distinguir de un vistazo real / previsto / vencido / conciliado.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Marca */
  --azul:        #2E3192;
  --azul-d:      #232674;
  --azul-dd:     #171A52;
  --azul-l:      #4448B8;
  --azul-suave:  #EDEEF9;
  --lima:        #8DC63F;
  --lima-d:      #6FA52B;
  --lima-l:      #A6D95E;
  --lima-suave:  #F1F8E4;

  /* Semántica de estados (§23) */
  --real:        #2E3192;   /* información real  → azul   */
  --previsto:    #8DC63F;   /* información prevista → lima */
  --negativo:    #D93B3B;   /* vencido o negativo → rojo  */
  --pendiente:   #E8A33D;   /* pendiente → amarillo       */
  --conciliado:  #1E7A4C;   /* conciliado → verde oscuro  */
  --anulado:     #98A0AE;   /* anulado → gris             */
  --positivo:    #1E9E5A;

  --negativo-bg:  #FCECEC;
  --pendiente-bg: #FDF3E2;
  --conciliado-bg:#E6F4EC;
  --positivo-bg:  #E7F6EE;
  --anulado-bg:   #F0F2F5;

  /* Superficies */
  --bg:        #F4F6FA;
  --surface:   #FFFFFF;
  --surface-2: #F8F9FC;
  --surface-3: #EEF1F7;
  --border:    #DFE4ED;
  --border-2:  #C6CEDC;

  /* Tinta */
  --tinta:   #1B2138;
  --tinta-2: #566079;
  --tinta-3: #8A93A8;

  --shadow-sm: 0 1px 2px rgba(23, 26, 82, .06);
  --shadow:    0 2px 10px rgba(23, 26, 82, .07);
  --shadow-lg: 0 12px 36px rgba(23, 26, 82, .14);

  --r-sm: 6px; --r: 10px; --r-md: 14px; --r-lg: 18px;
  --nav-w: 246px;
  --hdr-h: 58px;

  --fuente: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--fuente);
  font-size: 14px;
  color: var(--tinta);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: 21px; } h2 { font-size: 16px; } h3 { font-size: 14px; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-3); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); }

/* ── Layout ──────────────────────────────────────────────────────── */
.vf-app { display: flex; min-height: 100vh; }

.vf-nav {
  width: var(--nav-w);
  background: linear-gradient(180deg, var(--azul-dd) 0%, var(--azul) 65%, var(--azul-d) 100%);
  color: #fff;
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0;
  z-index: 40;
  transition: transform .22s ease;
}
.vf-nav-logo {
  padding: 16px 16px 13px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center;
}
/* El isologo es una pieza sola y se adapta al ancho del menú. */
.vf-nav-logo svg { width: 100%; max-width: 200px; height: auto; display: block; }

.vf-nav-scroll { flex: 1; overflow-y: auto; padding: 10px 0 20px; }
.vf-nav-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); }
.vf-nav-scroll::-webkit-scrollbar-track { background: transparent; }

.vf-nav-grupo {
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.42); padding: 15px 20px 6px;
}
.vf-nav a.vf-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px; color: rgba(255,255,255,.82);
  font-size: 13px; font-weight: 500; text-decoration: none;
  border-left: 3px solid transparent; transition: all .12s;
}
.vf-nav a.vf-nav-item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.vf-nav a.vf-nav-item.activo {
  background: rgba(141,198,63,.15); color: #fff; font-weight: 600;
  border-left-color: var(--lima);
}
.vf-nav-item svg { flex: 0 0 17px; opacity: .85; }
.vf-nav-item.activo svg { opacity: 1; color: var(--lima-l); }
.vf-nav-badge {
  margin-left: auto; background: var(--negativo); color: #fff;
  border-radius: 9px; padding: 1px 6px; font-size: 10px; font-weight: 700;
}

.vf-nav-pie {
  border-top: 1px solid rgba(255,255,255,.12); padding: 11px 16px;
  display: flex; align-items: center; gap: 9px; font-size: 12px;
}
.vf-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--lima); color: var(--azul-dd);
  display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: 0 0 auto;
}
.vf-nav-pie .u1 { font-weight: 600; line-height: 1.2; }
.vf-nav-pie .u2 { font-size: 10.5px; color: rgba(255,255,255,.55); }
.vf-nav-pie button {
  margin-left: auto; background: none; border: none; color: rgba(255,255,255,.6);
  cursor: pointer; padding: 5px; border-radius: 6px; display: grid; place-items: center;
}
.vf-nav-pie button:hover { background: rgba(255,255,255,.1); color: #fff; }

.vf-main { flex: 1; margin-left: var(--nav-w); min-width: 0; display: flex; flex-direction: column; }

.vf-hdr {
  height: var(--hdr-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; position: sticky; top: 0; z-index: 30;
}
.vf-hdr h1 { font-size: 17px; }
.vf-hdr .sub { font-size: 12px; color: var(--tinta-3); }
.vf-hdr-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.vf-buscar { position: relative; width: 260px; }
.vf-buscar input { padding-left: 32px; }
.vf-buscar svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); }
.vf-buscar-res {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-lg); max-height: 380px; overflow-y: auto; z-index: 60;
}
.vf-buscar-res a {
  display: block; padding: 9px 12px; border-bottom: 1px solid var(--surface-3); color: var(--tinta);
}
.vf-buscar-res a:hover { background: var(--surface-2); text-decoration: none; }
.vf-buscar-res .tp { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }

.vf-contenido { padding: 20px; flex: 1; }
.vf-contenido > * + * { margin-top: 16px; }

/* ── Tarjetas ────────────────────────────────────────────────────── */
.vf-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.vf-card-hdr {
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.vf-card-hdr h2 { font-size: 14px; }
.vf-card-hdr .acc { margin-left: auto; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.vf-card-body { padding: 16px; }
.vf-card-body.plano { padding: 0; }

/* ── KPI ─────────────────────────────────────────────────────────── */
.vf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.vf-kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.vf-kpi::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--azul);
}
.vf-kpi.previsto::before { background: var(--lima); }
.vf-kpi.negativo::before { background: var(--negativo); }
.vf-kpi.pendiente::before { background: var(--pendiente); }
.vf-kpi.positivo::before { background: var(--positivo); }
.vf-kpi .k-lbl {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-3); display: flex; align-items: center; gap: 5px;
}
.vf-kpi .k-val { font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin-top: 5px; }
.vf-kpi .k-val.rojo { color: var(--negativo); }
.vf-kpi .k-val.verde { color: var(--positivo); }
.vf-kpi .k-sub { font-size: 11.5px; color: var(--tinta-2); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; }
.vf-kpi .k-delta { font-weight: 700; }
.vf-kpi .k-delta.pos { color: var(--positivo); }
.vf-kpi .k-delta.neg { color: var(--negativo); }

/* ── Botones ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-sm); border: 1px solid var(--border-2);
  background: var(--surface); color: var(--tinta);
  font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: all .12s;
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--azul-l); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primario { background: var(--azul); color: #fff; border-color: var(--azul); }
.btn-primario:hover:not(:disabled) { background: var(--azul-d); border-color: var(--azul-d); }
.btn-lima { background: var(--lima); color: var(--azul-dd); border-color: var(--lima); }
.btn-lima:hover:not(:disabled) { background: var(--lima-d); border-color: var(--lima-d); color: #fff; }
.btn-peligro { background: var(--negativo-bg); color: var(--negativo); border-color: #F0BEBE; }
.btn-peligro:hover:not(:disabled) { background: var(--negativo); color: #fff; border-color: var(--negativo); }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--tinta-2); }
.btn-fantasma:hover:not(:disabled) { background: var(--surface-3); color: var(--tinta); }
.btn-sm { padding: 4px 9px; font-size: 11.5px; }
.btn-xs { padding: 2px 7px; font-size: 11px; }
.btn-icono { padding: 6px; }
.btn-bloque { width: 100%; padding: 10px; }

/* ── Formularios ─────────────────────────────────────────────────── */
.campo { margin-bottom: 12px; }
.campo > label, .lbl {
  display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-2); margin-bottom: 4px;
}
.campo .req::after { content: ' *'; color: var(--negativo); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], input[type=search], input[type=month], select, textarea {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--tinta); transition: border-color .13s, box-shadow .13s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(46,49,146,.11);
}
input:disabled, select:disabled, textarea:disabled { background: var(--surface-3); color: var(--tinta-2); }
textarea { resize: vertical; min-height: 62px; line-height: 1.5; }
input.num, td input.num { text-align: right; font-variant-numeric: tabular-nums; }
.ayuda { font-size: 11px; color: var(--tinta-3); margin-top: 3px; line-height: 1.45; }
.error-campo { font-size: 11px; color: var(--negativo); margin-top: 3px; font-weight: 600; }

.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
/* minmax(0, 1fr) y no 1fr: una columna  tiene min-width:auto y se
   deja estirar por su contenido, y entonces una tabla o un gráfico ancho
   empuja toda la página y aparece el desplazamiento lateral. */
@media (max-width: 820px) { .grid2, .grid3, .grid4 { grid-template-columns: minmax(0, 1fr); } }

.check { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.check input { width: auto; }
/* Una llave de permisos: la casilla arriba, el texto explicando al lado. */
.check.llave {
  align-items: flex-start; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--surface-2);
}
.check.llave input { margin-top: 2px; }
.check.llave:hover { border-color: var(--azul-l); }

/* Buscador de listas largas: se escribe y se filtra, en vez de bajar
   con la rueda por doscientos proveedores. */
.bs { position: relative; }
.bs .bs-txt { width: 100%; padding-right: 26px; }
.bs .bs-x {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1;
  color: var(--tinta-3); padding: 2px 5px; border-radius: 4px;
}
.bs .bs-x:hover { background: var(--surface-3); color: var(--tinta); }
.bs-pop {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 3px);
  max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
}
.bs-pop.arriba { top: auto; bottom: calc(100% + 3px); }
.bs-op { padding: 7px 10px; cursor: pointer; font-size: 13px; }
.bs-op.activa { background: var(--surface-3); }
.bs-op.elegida { font-weight: 600; color: var(--azul); }
.bs-mas { padding: 7px 10px; font-size: 11.5px; color: var(--tinta-3); }

/* Zona para arrastrar el escaneo del comprobante */
.vf-dropzone {
  display: flex; align-items: center; gap: 13px;
  border: 2px dashed var(--border-2); border-radius: var(--r-md);
  padding: 16px 18px; background: var(--surface-2);
  cursor: pointer; transition: all .14s; color: var(--tinta-2);
}
.vf-dropzone:hover, .vf-dropzone.sobre {
  border-color: var(--azul); background: var(--azul-suave); color: var(--azul);
}
.vf-dropzone.sobre { border-style: solid; }
.vf-dropzone.cargado {
  border-style: solid; border-color: var(--lima);
  background: var(--lima-suave); color: var(--lima-d);
}
.vf-dropzone b { display: block; font-size: 13px; color: inherit; }
.vf-dropzone .ayuda { margin-top: 2px; }

/* ── Filtros ─────────────────────────────────────────────────────── */
.vf-filtros {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end;
  padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.vf-filtros .campo { margin: 0; min-width: 130px; }
.vf-filtros .campo.ancho { min-width: 210px; flex: 1; }

.pills { display: inline-flex; gap: 4px; background: var(--surface-3); padding: 3px; border-radius: var(--r); }
.pills button {
  border: none; background: transparent; padding: 5px 12px; border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--tinta-2); cursor: pointer; transition: all .12s;
}
.pills button:hover { color: var(--tinta); }
.pills button.activo { background: var(--azul); color: #fff; box-shadow: var(--shadow-sm); }
.pills.lima button.activo { background: var(--lima); color: var(--azul-dd); }

/* ── Tablas ──────────────────────────────────────────────────────── */
.tabla-wrap { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tabla th {
  text-align: left; padding: 9px 10px; white-space: nowrap;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-2); background: var(--surface-2);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2;
}
table.tabla th.num, table.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla th.cen, table.tabla td.cen { text-align: center; }
table.tabla td { padding: 7px 10px; border-bottom: 1px solid var(--surface-3); vertical-align: middle; }
table.tabla tbody tr:hover td { background: var(--surface-2); }
table.tabla tbody tr.clic { cursor: pointer; }
table.tabla tbody tr.sel td { background: var(--azul-suave); }
table.tabla tfoot td, table.tabla tr.total td {
  font-weight: 800; background: var(--surface-3); border-top: 2px solid var(--border-2);
  border-bottom: none; position: sticky; bottom: 0;
}
/* La planilla de jornales: la fila de los días queda fija arriba y la
   columna del trabajador a la izquierda. Para que `sticky` funcione en
   las dos direcciones, la tabla tiene que hacer scroll dentro de su
   propia caja (con la caja que sólo scrollea de costado, la cabecera se
   iba con la página y no se veía a qué día era cada columna). */
.planilla-wrap { overflow: auto; max-height: calc(100vh - 230px); min-height: 260px; }
.planilla-wrap table.tabla thead th { z-index: 3; }
.planilla-wrap table.tabla thead th:first-child { z-index: 5; }
.planilla-wrap table.tabla tfoot td { z-index: 3; }
.planilla-wrap table.tabla tfoot td:first-child { z-index: 5; }
.planilla-wrap .celda-dia.excedido { background: var(--negativo-bg); box-shadow: inset 0 0 0 2px var(--negativo); }
/* Planificación: la grilla simple esconde detalle, frente, unidad y
   costos previstos hasta que se pidan. */
.plan-simple .col-av { display: none; }
.paso-plan { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; }
.paso-plan b.num-paso { display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  align-items: center; justify-content: center; background: var(--azul); color: #fff; font-size: 12px; }
details.mas-datos { margin-top: 14px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
details.mas-datos > summary { cursor: pointer; font-weight: 600; color: var(--tinta-2); }
table.tabla tr.seccion td {
  background: var(--azul); color: #fff; font-weight: 800; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .07em; padding: 6px 10px;
}
table.tabla tr.subtotal td {
  background: var(--lima-suave); font-weight: 800; border-top: 1px solid var(--lima);
  border-bottom: 1px solid var(--lima);
}
table.tabla tr.anulada td { color: var(--anulado); text-decoration: line-through; }
table.tabla td.mono { font-family: 'Consolas', 'SF Mono', monospace; font-size: 11.5px; }
.tabla-compacta td, .tabla-compacta th { padding: 4px 8px; font-size: 11.5px; }

.rojo   { color: var(--negativo); }
.verde  { color: var(--positivo); }
.gris   { color: var(--tinta-3); }
.negro  { color: var(--tinta); }
.bold   { font-weight: 700; }
.num    { font-variant-numeric: tabular-nums; }

/* ── Etiquetas de estado (§23) ───────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 700;
  background: var(--surface-3); color: var(--tinta-2); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .03em;
}
.tag.real       { background: var(--azul-suave);   color: var(--azul); }
.tag.previsto   { background: var(--lima-suave);   color: var(--lima-d); }
.tag.vencido,
.tag.negativo   { background: var(--negativo-bg);  color: var(--negativo); }
.tag.pendiente  { background: var(--pendiente-bg); color: #A96A10; }
.tag.conciliado { background: var(--conciliado-bg);color: var(--conciliado); }
.tag.anulado    { background: var(--anulado-bg);   color: var(--anulado); }
.tag.ok         { background: var(--positivo-bg);  color: var(--positivo); }
.tag.borrador   { background: var(--surface-3);    color: var(--tinta-2); }
.tag.parcial    { background: var(--pendiente-bg); color: #A96A10; }
.tag-punto::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Alertas y avisos ────────────────────────────────────────────── */
.aviso {
  padding: 10px 13px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.5;
  border-left: 3px solid; display: flex; gap: 9px; align-items: flex-start;
}
.aviso.info  { background: var(--azul-suave);    color: var(--azul-d);      border-color: var(--azul); }
.aviso.ok    { background: var(--positivo-bg);   color: #0E5B34;            border-color: var(--positivo); }
.aviso.warn  { background: var(--pendiente-bg);  color: #8A5510;            border-color: var(--pendiente); }
.aviso.error { background: var(--negativo-bg);   color: #8E1F1F;            border-color: var(--negativo); }
.aviso svg { flex: 0 0 auto; margin-top: 1px; }

/* ── Modal ───────────────────────────────────────────────────────── */
.vf-modal-fondo {
  position: fixed; inset: 0; background: rgba(23,26,56,.42);
  display: grid; place-items: center; z-index: 100; padding: 20px;
  /* Columna explícita: con `auto` la grilla se dimensiona por el
     contenido y una grilla de carga ancha estiraba el modal más allá de
     la pantalla en vez de dejar que se deslizara por dentro. */
  grid-template-columns: minmax(0, 1fr);
  animation: aparecer .13s ease;
}
@keyframes aparecer { from { opacity: 0; } }
.vf-modal {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 620px; max-height: 92vh; display: flex; flex-direction: column;
  animation: subir .16s ease;
}
@keyframes subir { from { transform: translateY(12px); opacity: 0; } }
.vf-modal.ancho { max-width: 980px; }
.vf-modal.xl    { max-width: 1240px; }
.vf-modal.chico { max-width: 440px; }
.vf-modal-hdr {
  padding: 15px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.vf-modal-hdr h2 { font-size: 15px; }
.vf-modal-hdr .cerrar { margin-left: auto; }
.vf-modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.vf-modal-pie {
  padding: 13px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end; background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.vf-modal-pie .izq { margin-right: auto; }

/* ── Toasts ──────────────────────────────────────────────────────── */
.vf-toasts { position: fixed; bottom: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.vf-toast {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--azul);
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg); padding: 11px 15px;
  font-size: 12.5px; max-width: 400px; animation: entrar .2s ease; display: flex; gap: 9px;
}
@keyframes entrar { from { transform: translateX(24px); opacity: 0; } }
.vf-toast.ok    { border-left-color: var(--positivo); }
.vf-toast.error { border-left-color: var(--negativo); }
.vf-toast.warn  { border-left-color: var(--pendiente); }
.vf-toast b { display: block; margin-bottom: 2px; }

/* ── Tabs ────────────────────────────────────────────────────────── */
.vf-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.vf-tabs button {
  border: none; background: none; padding: 9px 15px; font-size: 12.5px; font-weight: 600;
  color: var(--tinta-2); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
}
.vf-tabs button:hover { color: var(--tinta); background: var(--surface-2); }
.vf-tabs button.activo { color: var(--azul); border-bottom-color: var(--azul); }

/* ── Barras de progreso y comparación ────────────────────────────── */
.barra { height: 7px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--azul); border-radius: 4px; transition: width .3s; }
.barra > i.previsto { background: var(--lima); }
.barra > i.rojo { background: var(--negativo); }
.barra-doble { display: grid; gap: 3px; }
.barra-doble .fila { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.barra-doble .fila .barra { flex: 1; }

/* ── Cargando / vacío ────────────────────────────────────────────── */
.vf-cargando { display: grid; place-items: center; padding: 50px 20px; color: var(--tinta-3); gap: 11px; }
.spin {
  width: 22px; height: 22px; border: 2.5px solid var(--surface-3);
  border-top-color: var(--azul); border-radius: 50%; animation: girar .65s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.vf-vacio { display: grid; place-items: center; padding: 44px 20px; text-align: center; gap: 9px; color: var(--tinta-3); }
.vf-vacio svg { opacity: .35; }
.vf-vacio b { color: var(--tinta-2); font-size: 13.5px; }

/* ── Calendario ──────────────────────────────────────────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-dia {
  min-height: 118px; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 5px 6px; background: var(--surface); font-size: 11px; overflow: hidden;
}
.cal-dia.fuera { background: var(--surface-2); opacity: .55; }
.cal-dia.hoy { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.cal-dia .d { font-weight: 800; color: var(--tinta-2); font-size: 11.5px; }
/* Cada movimiento del día muestra el importe y, debajo, de qué se trata:
   "▼ Sale 48.200 / Jornales · CMP-0001". No hace falta pasar el mouse. */
.cal-dia .ev {
  display: block; margin-top: 3px; padding: 2px 5px; border-radius: 4px;
  font-size: 10px; line-height: 1.25; cursor: pointer; overflow: hidden;
}
.cal-dia .ev b { display: block; white-space: nowrap; }
.cal-dia .ev .ev-concepto {
  display: block; font-size: 9.5px; opacity: .78; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-dia .ev:hover { filter: brightness(.94); }
.cal-dia .ev.entrada-real     { background: var(--azul-suave); color: var(--azul); }
.cal-dia .ev.entrada-previsto { background: var(--lima-suave); color: var(--lima-d); }
.cal-dia .ev.salida-real      { background: var(--negativo-bg); color: var(--negativo); }
.cal-dia .ev.salida-previsto  { background: var(--pendiente-bg); color: #A96A10; }
.cal-dia .saldo { margin-top: 3px; font-weight: 700; font-size: 10px; }
.cal-cab { text-align: center; font-size: 10px; font-weight: 700; color: var(--tinta-3); text-transform: uppercase; padding: 4px 0; }

/* ── Gráficas ────────────────────────────────────────────────────── */
.chart-wrap { width: 100%; overflow-x: auto; }
.chart-wrap svg { display: block; }
.chart-leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; font-size: 11.5px; }
.chart-leyenda span { display: inline-flex; align-items: center; gap: 5px; color: var(--tinta-2); }
.chart-leyenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-tip {
  position: fixed; background: var(--tinta); color: #fff; padding: 6px 9px;
  border-radius: 5px; font-size: 11.5px; pointer-events: none; z-index: 300;
  box-shadow: var(--shadow-lg); white-space: pre-line;
}

/* ── Login ───────────────────────────────────────────────────────── */
.login-fondo {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  /* La columna explícita evita que la grilla se dimensione por el
     contenido: sin esto, en un celular angosto la caja empujaba la
     página más ancha que la pantalla y quedaba corrida a la derecha. */
  grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(135deg, var(--azul-dd) 0%, var(--azul) 55%, var(--azul-l) 100%);
}
.login-caja {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 396px; padding: 34px 32px; justify-self: center;
}
/* El isologo es un SVG único: se le da un ancho máximo y él se adapta. */
.login-logo { display: grid; place-items: center; margin-bottom: 24px; }
.login-logo svg { width: 100%; max-width: 250px; height: auto; display: block; }

@media (max-width: 640px) {
  /* En el celular la caja ocupa el ancho útil y el isologo se achica
     con ella, sin quedar apretado contra los bordes. */
  .login-fondo { padding: 16px; align-content: center; }
  .login-caja { padding: 26px 20px; border-radius: var(--r-md); }
  .login-logo { margin-bottom: 20px; }
  .login-logo svg { max-width: 210px; }
}
@media (max-height: 620px) {
  /* Teclado abierto en un celular chico: el isologo cede espacio. */
  .login-logo svg { max-width: 170px; }
  .login-caja { padding-top: 20px; padding-bottom: 20px; }
}

/* ── Utilidades ──────────────────────────────────────────────────── */
.flex { display: flex; } .col { flex-direction: column; }
.entre { justify-content: space-between; } .centro { align-items: center; }
.gap4 { gap: 4px; } .gap8 { gap: 8px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }
.wrap { flex-wrap: wrap; } .crece { flex: 1; } .auto { margin-left: auto; }
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.p0{padding:0}.oculto{display:none!important}
/* Sólo se ve en el celular (ver la sección "Celular" más abajo). */
.oculto-escritorio { display: none; }
.chico{font-size:11.5px}.mini{font-size:10.5px}
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.split3 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1100px) { .split, .split3 { grid-template-columns: minmax(0, 1fr); } }

/* ── Responsive ──────────────────────────────────────────────────── */
.vf-nav-toggle { display: none; }

/* Fondo oscuro detrás del menú lateral abierto en pantalla chica.
   Sin esto el menú se superpone al contenido y no hay forma obvia de
   cerrarlo: tocar afuera no hacía nada. */
.vf-nav-fondo { display: none; }

@media (max-width: 960px) {
  .vf-nav { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .vf-nav.abierto { transform: translateX(0); }
  .vf-main { margin-left: 0; min-width: 0; }
  .vf-nav-toggle { display: inline-flex; }
  .vf-buscar { width: 150px; }
  .vf-contenido { padding: 13px; }
  .vf-kpis { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }

  .vf-nav-fondo {
    display: block; position: fixed; inset: 0; z-index: 39;
    background: rgba(23, 26, 56, .45);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .vf-nav-fondo.visible { opacity: 1; pointer-events: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   CELULAR (≤ 640 px)

   El sistema se usa parado en el campo, con una mano y con guantes. Lo
   que en el escritorio es una tabla de doce columnas acá no entra, así
   que cada fila pasa a ser una TARJETA: el nombre de la columna a la
   izquierda y el dato a la derecha. El atributo `data-titulo` que
   escribe `tabla()` en cada celda es lo que hace posible ese cambio sin
   volver a dibujar nada desde JavaScript.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  html, body { font-size: 15px; }
  .oculto-escritorio { display: block; }

  /* ── Cabecera ───────────────────────────────────────────────── */
  /* Dos filas: arriba el menú, el título y los dos botones; abajo el
     buscador, que solo ya no entra al lado del título. */
  .vf-hdr {
    padding: 7px 11px; gap: 8px; height: auto; min-height: var(--hdr-h);
    flex-wrap: wrap; align-items: center;
  }
  .vf-hdr h1 { font-size: 15.5px; }
  .vf-hdr .sub { display: none; }
  .vf-hdr #hdrTitulo { flex: 1 1 auto; min-width: 0; }
  /* El buscador vive dentro de este contenedor, así que la segunda fila
     se arma acá: los dos botones a la derecha y el buscador debajo,
     ocupando todo el ancho. */
  .vf-hdr-acciones {
    gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end;
  }
  .vf-buscar { order: 10; flex: 1 1 100%; width: auto; min-width: 0; margin: 0; }
  .vf-buscar input { width: 100%; }
  .vf-contenido { padding: 11px; }
  .vf-contenido > * + * { margin-top: 12px; }

  /* ── Tarjetas y KPI ─────────────────────────────────────────── */
  .vf-card { border-radius: var(--r); }
  .vf-card-hdr { padding: 11px 13px; }
  .vf-card-body { padding: 13px; }
  .vf-card-hdr .acc { margin-left: 0; width: 100%; }
  .vf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .vf-kpi { padding: 11px 12px; }
  .vf-kpi .k-val { font-size: 18px; }
  .vf-kpi .k-lbl { font-size: 9.5px; letter-spacing: .05em; }
  .vf-kpi .k-sub { font-size: 10.5px; }
  /* Un solo KPI ocupando media pantalla queda raro: si es el único, va entero. */
  .vf-kpis > .vf-kpi:only-child { grid-column: 1 / -1; }

  /* ── Botones y encabezados de pantalla ──────────────────────── */
  .vf-hdr-pantalla { flex-direction: column; align-items: stretch; gap: 9px; }
  .vf-hdr-pantalla .acciones { width: 100%; flex-wrap: wrap; }
  .vf-hdr-pantalla .acciones .btn { flex: 1 1 auto; }
  /* 38 px de alto es el mínimo cómodo para el dedo. */
  .btn { padding: 9px 14px; font-size: 13px; min-height: 38px; }
  .btn-sm { padding: 7px 11px; font-size: 12.5px; min-height: 34px; }
  .btn-xs { padding: 5px 9px; font-size: 12px; min-height: 30px; }
  .btn-icono { min-width: 38px; }

  /* ── Formularios ────────────────────────────────────────────── */
  /* 16 px evita que iOS haga zoom al enfocar un campo. */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=tel], input[type=search], input[type=month],
  select, textarea { font-size: 16px; padding: 10px 11px; }
  .campo > label, .lbl { font-size: 11px; }
  .vf-filtros { padding: 11px; gap: 8px; }
  .vf-filtros .campo { min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); }
  .vf-filtros .campo.ancho { min-width: 100%; flex-basis: 100%; }
  .vf-filtros > .flex { width: 100%; flex-wrap: wrap; }
  .grid-auto { grid-template-columns: 1fr; }

  /* ── Tablas como tarjetas ───────────────────────────────────── */
  /* Sólo las que dibuja `tabla()`, que son las que traen `data-titulo`
     en cada celda. Las escritas a mano y las marcadas `ancha` siguen
     siendo grilla y se deslizan a lo ancho. */
  .tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabla-wrap.tarjetas { overflow-x: visible; }

  .tarjetas table.tabla,
  .tarjetas table.tabla tbody,
  .tarjetas table.tabla tr,
  .tarjetas table.tabla td { display: block; width: 100%; }
  .tarjetas table.tabla thead { display: none; }
  .tarjetas table.tabla tbody tr {
    border: 1px solid var(--border); border-radius: var(--r);
    margin-bottom: 9px; padding: 4px 2px; background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .tarjetas table.tabla tbody tr:hover td { background: transparent; }
  .tarjetas table.tabla td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 6px 11px; border-bottom: 1px solid var(--surface-3);
    text-align: right; font-size: 13px;
  }
  .tarjetas table.tabla td:last-child { border-bottom: none; }
  .tarjetas table.tabla td::before {
    content: attr(data-titulo);
    flex: 0 0 auto; text-align: left; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3);
  }
  /* Celdas sin dato: no vale la pena gastar una línea de la tarjeta. */
  .tarjetas table.tabla td:empty { display: none; }
  /* La primera celda es el título de la tarjeta: sin etiqueta y grande. */
  .tarjetas table.tabla tbody td:first-child {
    text-align: left; font-size: 14px; padding-top: 9px;
    background: var(--surface-2); border-radius: var(--r) var(--r) 0 0;
  }
  .tarjetas table.tabla tbody td:first-child::before { display: none; }
  .tarjetas table.tabla td.num { text-align: right; font-weight: 600; }
  .tarjetas table.tabla .trunc { max-width: none; white-space: normal; }

  /* Totales: una tarjeta más, destacada, sin quedarse pegada abajo. */
  .tarjetas table.tabla tfoot { display: block; }
  .tarjetas table.tabla tfoot tr {
    display: block; border: 1px solid var(--border-2); border-radius: var(--r);
    background: var(--surface-3);
  }
  .tarjetas table.tabla tfoot td {
    position: static; display: flex; background: transparent;
    border-bottom: 1px solid var(--border); font-weight: 800;
  }
  .tarjetas table.tabla tfoot td:last-child { border-bottom: none; }
  .tarjetas table.tabla tfoot td::before { font-weight: 700; }
  .tarjetas table.tabla tr.total td { position: static; }
  /* Las de sección y subtotal de los reportes siguen siendo una banda. */
  .tarjetas table.tabla tr.seccion td,
  .tarjetas table.tabla tr.subtotal td { text-align: left; }
  .tarjetas table.tabla tr.seccion td::before,
  .tarjetas table.tabla tr.subtotal td::before { display: none; }

  /* ── Grillas de carga (líneas de factura, asignaciones…) ─────── */
  /* Acá la grilla SÍ se mantiene: se edita en filas y convertirla en
     tarjetas rompe la lectura de columnas. Se desplaza a lo ancho, con
     un ancho mínimo que deja los campos usables. */
  .grilla-lineas .tabla-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border); border-radius: var(--r);
  }
  .grilla-lineas table.tabla { min-width: 720px; }
  .grilla-lineas table.tabla,
  .grilla-lineas table.tabla tbody,
  .grilla-lineas table.tabla tr,
  .grilla-lineas table.tabla td { display: revert; width: auto; }
  .grilla-lineas table.tabla thead { display: table-header-group; }
  .grilla-lineas table.tabla td::before { display: none; }
  .grilla-lineas table.tabla tbody tr { border: none; box-shadow: none; margin: 0; background: none; }
  .grilla-lineas table.tabla td { padding: 5px 6px; text-align: left; }
  .grilla-lineas input, .grilla-lineas select { font-size: 15px; padding: 7px 8px; }
  .grilla-lineas .agregar-linea { width: 100%; }
  .grilla-aviso {
    display: block; font-size: 10.5px; color: var(--tinta-3);
    padding: 5px 2px 0; text-align: center;
  }

  /* ── Modales a pantalla completa ────────────────────────────── */
  .vf-modal-fondo { padding: 0; place-items: end stretch; }
  .vf-modal, .vf-modal.ancho, .vf-modal.xl, .vf-modal.chico {
    max-width: 100%; width: 100%; max-height: 100dvh; height: 100dvh;
    border-radius: 0; animation: subir-hoja .18s ease;
  }
  @keyframes subir-hoja { from { transform: translateY(18px); opacity: 0; } }
  .vf-modal-hdr { padding: 13px 15px; position: sticky; top: 0; background: var(--surface); z-index: 2; }
  .vf-modal-hdr h2 { font-size: 15px; }
  .vf-modal-body { padding: 14px 15px 20px; }
  /* El pie se queda pegado abajo, sobre la barra del navegador. */
  .vf-modal-pie {
    padding: 11px 13px calc(11px + env(safe-area-inset-bottom));
    flex-wrap: wrap; gap: 7px; border-radius: 0;
    position: sticky; bottom: 0;
  }
  .vf-modal-pie .btn { flex: 1 1 46%; }
  .vf-modal-pie .izq { margin-right: 0; flex-basis: 100%; order: 10; }

  /* ── Pestañas ───────────────────────────────────────────────── */
  .vf-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .vf-tabs::-webkit-scrollbar { display: none; }
  .vf-tabs button { padding: 10px 13px; font-size: 13px; }

  /* ── Calendario: en el celular es una lista, no una grilla ──── */
  .cal-grid { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .cal-cab { display: none; }
  .cal-dia { min-height: 0; padding: 9px 11px; }
  .cal-dia:not(.tiene-eventos) { display: none; }
  .cal-dia .d::after { content: attr(data-dia-largo); font-weight: 500; color: var(--tinta-3); margin-left: 6px; }
  .cal-dia .ev { font-size: 12px; padding: 5px 8px; margin-top: 5px; }
  .cal-dia .ev .ev-concepto { font-size: 11px; }

  /* ── Varios ─────────────────────────────────────────────────── */
  .split, .split3 { gap: 12px; }
  .vf-toasts { left: 11px; right: 11px; bottom: 11px; }
  .vf-toast { max-width: none; }
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .vf-dropzone { flex-direction: column; text-align: center; padding: 18px 14px; }
  .chart-wrap { -webkit-overflow-scrolling: touch; }
  /* Doce meses en una fila no entran en 390 px: se envuelven en dos.
     Sin esto la página entera quedaba desplazable de costado. */
  .pills { width: 100%; justify-content: center; flex-wrap: wrap; }
  .pills button { flex: 1 1 auto; min-width: 46px; padding: 8px 6px; }
  .vf-vacio { padding: 30px 14px; }
  h1 { font-size: 18px; }
}

/* Pantallas muy angostas: los KPI van de a uno. */
/* Pantallas muy angostas: los indicadores y los filtros van de a uno.
   Hasta 360 px entran dos por fila y se aprovecha mejor el alto. */
@media (max-width: 360px) {
  .vf-kpis { grid-template-columns: minmax(0, 1fr); }
  .vf-filtros .campo { min-width: 100%; flex-basis: 100%; }
}
@media print {
  .vf-nav, .vf-hdr-acciones, .vf-filtros, .btn { display: none !important; }
  .vf-main { margin-left: 0; }
  .vf-card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  body { background: #fff; }
}

/* ═══════════════════════════════════════════════════════════════════
   GUÍA DE USO
   Pensada para leerse, no para consultarse: línea larga, tipografía
   más grande que el resto del sistema y pasos numerados bien separados.
   ═══════════════════════════════════════════════════════════════════ */

/* Botón de modo simple, al pie del menú lateral */
.vf-modo-simple {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 20px);
  margin: 0 10px 8px; padding: 8px 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-sm); color: rgba(255,255,255,.82);
  font: inherit; font-size: 11.5px; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.vf-modo-simple:hover { background: rgba(255,255,255,.14); color: #fff; }
.vf-modo-simple svg { flex: none; }

/* El signo de pregunta se enciende cuando la pantalla tiene capítulo */
#btnAyuda.tiene-ayuda { color: var(--azul); }
#btnAyuda.tiene-ayuda:hover { background: var(--azul-suave); }

.guia-hero {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(105deg, var(--azul-suave), var(--lima-suave));
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 20px;
}
.guia-hero .gh-ico {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--azul);
  box-shadow: var(--shadow-sm);
}
.guia-hero b { font-size: 15px; display: block; margin-bottom: 3px; }
.guia-hero .chico { color: var(--tinta-2); line-height: 1.55; max-width: 62ch; }

.guia-buscar { width: 100%; max-width: 520px; }
.guia-buscar input { font-size: 13.5px; }

.guia-parte { margin-bottom: 12px; }
.guia-parte h2 { font-size: 15.5px; color: var(--azul); }

.guia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 10px; }

.guia-card {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
  text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .12s;
}
.guia-card:hover { border-color: var(--azul-l); box-shadow: var(--shadow); transform: translateY(-1px); }
.guia-card .gc-ico {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--azul-suave); color: var(--azul);
}
.guia-card .gc-ico.grande { width: 52px; height: 52px; border-radius: var(--r); }
.guia-card .gc-t { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.guia-card .gc-p { font-size: 11.5px; color: var(--tinta-3); margin-top: 2px; line-height: 1.35; }
.guia-card .gc-fl { margin-left: auto; color: var(--tinta-3); flex: none; }
.guia-card .tag { flex: none; }

.guia-volver {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 14px;
  font-size: 12px; color: var(--tinta-2); text-decoration: none;
}
.guia-volver:hover { color: var(--azul); }

.guia-cap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 26px 30px; max-width: 780px;
}
.gcap-hdr { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.gcap-hdr h1 { font-size: 21px; line-height: 1.2; }
.gcap-hdr .gc-ico {
  flex: none; width: 52px; height: 52px; border-radius: var(--r);
  display: grid; place-items: center; background: var(--azul-suave); color: var(--azul);
}
.gcap-para { font-size: 13px; color: var(--tinta-2); margin-top: 4px; }

.guia-pasos { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.guia-pasos li { display: flex; gap: 14px; padding: 11px 0; border-top: 1px solid var(--surface-3); }
.guia-pasos li:first-child { border-top: 0; }
.guia-pasos .p-num {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; background: var(--azul); color: #fff;
  font-size: 12px; font-weight: 700;
}
.guia-pasos .p-cuerpo { min-width: 0; flex: 1; }
.guia-pasos .p-txt { font-size: 14px; line-height: 1.62; color: var(--tinta); }
.guia-pasos .p-nota {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 9px;
  padding: 9px 11px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.5;
}
.guia-pasos .p-nota svg { flex: none; margin-top: 1px; }
.guia-pasos .p-nota.ojo { background: var(--negativo-bg); color: #8B2020; }
.guia-pasos .p-nota.tip { background: var(--lima-suave); color: #4A6B18; }

.gcap-ir {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 26px; padding: 15px 18px;
  background: var(--surface-2); border: 1px dashed var(--border-2); border-radius: var(--r);
}
.gcap-ir b { font-size: 13.5px; }

.guia-nav { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.guia-glosario { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px; }
.gl-item { padding: 11px 0; border-top: 1px solid var(--surface-3); }
.gl-t { font-weight: 700; font-size: 13px; color: var(--azul); margin-bottom: 3px; }
.gl-d { font-size: 12.5px; line-height: 1.55; color: var(--tinta-2); }

/* La guía dentro del modal de ayuda: más compacta */
.guia-en-modal .guia-pasos .p-txt { font-size: 13px; }
.guia-en-modal .guia-pasos li { padding: 9px 0; }

@media (max-width: 700px) {
  .guia-cap { padding: 18px 16px; }
  .guia-grid { grid-template-columns: 1fr; }
}

/* Accesos rápidos del panel, en lenguaje común */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 9px; }
.acc {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-2); text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s, transform .12s;
}
.acc:hover { border-color: var(--azul-l); background: var(--surface); transform: translateY(-1px); }
.acc-ico {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--azul); color: #fff;
}
.acc-t { display: block; font-weight: 600; font-size: 12.8px; line-height: 1.25; }
.acc-s { display: block; font-size: 11px; color: var(--tinta-3); margin-top: 2px; line-height: 1.3; }