/* =============================================================================
   THE PROPOSAL CO — HOJA DE ESTILOS
   La estructura es la del sistema de ventas que ya usa el equipo: menú a la
   izquierda apoyado en el fondo, área de trabajo flotando como una tarjeta.
   Lo que cambia es la paleta: vino y rosa viejo sobre papel cálido.
   ============================================================================= */

:root {
  --bg:          #F3EFEC;
  --bg-2:        #EDE7E4;
  --surface:     #FFFFFF;
  --surface-2:   #F8F4F2;
  --surface-3:   #F0E9E6;
  --sunk:        #E7DFDB;
  --text:        #2E2A2C;
  --text-2:      #6B6065;
  --text-3:      #9B8E93;
  --line:        #EBE3E0;
  --line-2:      #DCD1CD;
  --accent:      #8C4A5A;
  --accent-2:    #6F3947;
  --accent-soft: #F7EDEF;
  --on-accent:   #FFFFFF;

  --alerta:  #B03A2E;
  --atencion:#C08A2E;
  --ok:      #4E7A4A;
  --info:    #4C6B84;

  /* Los tres frentes que se miran de un vistazo en el tablero */
  --pago-cero:    #B03A2E;
  --pago-parcial: #C08A2E;
  --pago-total:   #4E7A4A;

  /* Poppins es el sustituto libre de la geométrica del referente; Century
     Gothic ya viene en Windows y sostiene el mismo aire si Poppins no carga. */
  --display: 'Poppins', 'Century Gothic', 'Questrial', 'Avant Garde', 'Trebuchet MS', system-ui, sans-serif;
  --ui: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  --r-xs: 6px;
  --r: 11px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  --sombra:      0 2px 8px rgba(46,42,44,.08), 0 18px 44px rgba(46,42,44,.10);
  --sombra-card: 0 1px 2px rgba(46,42,44,.05), 0 4px 14px rgba(46,42,44,.06);
  --sombra-sm:   0 1px 3px rgba(46,42,44,.07);

  color-scheme: light;
}

/* El tema oscuro es blanco y negro, como el logotipo. El acento deja de ser
   vino y pasa a ser el blanco del logo: los botones y la etapa activa quedan
   en negativo. Los colores de estado (rojo, ámbar, verde) se quedan, porque
   ahí el color no es decoración sino información. */
:root[data-theme="dark"] {
  --bg:          #0F0F0F;
  --bg-2:        #151515;
  --surface:     #1C1C1C;
  --surface-2:   #242424;
  --surface-3:   #2E2E2E;
  --sunk:        #0A0A0A;
  --text:        #F5F3F1;
  --text-2:      #B5B2AF;
  --text-3:      #85817D;
  --line:        #2A2A2A;
  --line-2:      #3D3D3D;
  --accent:      #F5F3F1;
  --accent-2:    #FFFFFF;
  --accent-soft: #262626;
  --on-accent:   #0F0F0F;

  --alerta:  #E08072;
  --atencion:#DDB05C;
  --ok:      #8FBB88;
  --info:    #8AA8C0;

  --pago-cero:    #E08072;
  --pago-parcial: #DDB05C;
  --pago-total:   #8FBB88;

  --sombra:      0 2px 6px rgba(0,0,0,.34), 0 14px 38px rgba(0,0,0,.38);
  --sombra-card: 0 1px 2px rgba(0,0,0,.24), 0 6px 18px rgba(0,0,0,.20);
  --sombra-sm:   0 1px 3px rgba(0,0,0,.26);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--ui); font-size: 14.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--accent); }
h1, h2, h3 { font-weight: 500; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

.oculto { display: none !important; }

/* =============================================================================
   EL LOGOTIPO
   Vienen dos archivos, blanco y negro. Se muestra el que contraste con el
   fondo del tema, y el otro se esconde. Nada de filtros ni inversiones: el
   logo tiene remates finos y una inversión por CSS los ensucia.
   ============================================================================= */

.marca-img { display: block; width: 100%; height: auto; }
.solo-oscuro { display: none; }
:root[data-theme="dark"] .solo-claro  { display: none; }
:root[data-theme="dark"] .solo-oscuro { display: block; }

/* =============================================================================
   INGRESO
   ============================================================================= */

.login {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(140,74,90,.10), transparent 60%),
    linear-gradient(135deg, #F7F3F1 0%, var(--bg) 50%, #E3D8D4 100%);
}
:root[data-theme="dark"] .login {
  background:
    radial-gradient(1100px 560px at 15% 10%, rgba(217,143,160,.12), transparent 60%),
    linear-gradient(135deg, var(--bg-2) 0%, var(--bg) 45%, #0F0B0C 100%);
}

.login-caja {
  width: min(410px, 100%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 44px 38px 34px;
  box-shadow: var(--sombra);
  animation: sube .3s cubic-bezier(.2,.8,.3,1);
}
.login-marca { width: 100%; max-width: 264px; margin: 0 auto 18px; }
.login-sub {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .2em;
  color: var(--text-3); margin-bottom: 32px; text-align: center;
}
.login .campo { margin-bottom: 16px; }
.login-error {
  color: var(--alerta); font-size: 13px; margin: -4px 0 14px; min-height: 18px;
}
.login-pie {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-3); line-height: 1.6;
}

/* =============================================================================
   ESTRUCTURA
   ============================================================================= */

.app { display: none; height: 100vh; grid-template-columns: 258px 1fr; }
.app.activa { display: grid; }

/* ---------- barra lateral ---------- */

.lateral {
  background: transparent;
  display: flex; flex-direction: column; min-height: 0;
}
.lateral-marca { padding: 26px 22px 18px; }
.lateral-logo { width: 100%; max-width: 186px; }
.lateral-tag {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .17em;
  color: var(--text-3); margin-top: 11px;
}

.nav { padding: 8px 12px; flex: 1; overflow-y: auto; }
.nav-grupo {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--text-3); padding: 16px 12px 7px; opacity: .85;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r); cursor: pointer;
  color: var(--text-2); border: 0; background: none; width: 100%; text-align: left;
  transition: background .14s, color .14s;
  margin-bottom: 2px; font-size: 13.5px; white-space: nowrap;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.activo {
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--sombra-card); font-weight: 500;
}
.nav-item.activo .nav-icono { opacity: 1; }
.nav-icono { width: 18px; text-align: center; opacity: .75; font-size: 14px; flex: 0 0 18px; }
.nav-conteo {
  margin-left: auto; font-size: 11px; color: var(--text-3);
  background: var(--surface-2); padding: 2px 8px; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.nav-item.activo .nav-conteo {
  background: rgba(255,255,255,.24); color: var(--on-accent);
}
.nav-conteo.rojo { background: var(--alerta); color: #fff; }

/* ---------- pie de la barra ---------- */

.lateral-pie { padding: 12px 14px 16px; }
.estado-nube {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-3); margin-bottom: 12px;
}
.estado-punto { font-size: 13px; line-height: 1; }
.estado-nube.sincronizado { color: var(--ok); }
.estado-nube.conectando  { color: var(--atencion); }
.estado-nube.error       { color: var(--alerta); }

.usuario {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border-radius: var(--r); padding: 9px 11px;
  box-shadow: var(--sombra-card);
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600;
  letter-spacing: .03em;
}
.usuario-nombre { font-size: 13px; line-height: 1.25; font-weight: 500; }
.usuario-rol { font-size: 11px; color: var(--text-3); }
.lateral-acciones { display: flex; gap: 7px; margin-top: 10px; }
.lateral-acciones .btn { flex: 1; padding: 7px 8px; font-size: 12px; }

/* ---------- área principal ---------- */

.principal {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--bg-2);
  margin: 12px 12px 12px 0;
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}

.topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 20px 26px 18px; background: var(--surface);
}
.topbar h1 {
  font-family: var(--display); font-size: 21px; font-weight: 400;
  margin: 0; letter-spacing: .02em;
}
.topbar-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.topbar-sep { flex: 1; }

.buscador {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 7px 14px;
  min-width: 190px; flex: 1 1 190px; max-width: 320px;
  transition: border-color .14s, box-shadow .14s;
}
.buscador:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.buscador input { border: 0; background: none; outline: none; width: 100%; font-size: 13.5px; }
.buscador span { color: var(--text-3); }
.buscador-ancho { flex: 1 1 250px; max-width: 360px; }
.buscador-limpiar {
  background: none; border: 0; color: var(--text-3); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0 1px;
}
.buscador-limpiar:hover { color: var(--text); }

.contenido { flex: 1; overflow: auto; min-height: 0; padding: 4px 26px 40px; }
.contenido.sin-padding { padding: 0; }

/* =============================================================================
   BOTONES Y PIEZAS SUELTAS
   ============================================================================= */

.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  background: var(--accent); color: var(--on-accent); border: 1px solid transparent;
  padding: 9px 18px; border-radius: var(--r-pill); cursor: pointer; font-size: 13.5px;
  font-weight: 500; letter-spacing: .01em; text-decoration: none;
  transition: filter .14s, background .14s, box-shadow .14s;
  box-shadow: var(--sombra-sm);
}
.btn:hover { filter: brightness(1.08); box-shadow: var(--sombra-card); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn-fantasma {
  background: var(--surface); color: var(--text-2);
  border-color: var(--line-2); box-shadow: none;
}
.btn-fantasma:hover { background: var(--surface-2); color: var(--text); filter: none; }
.btn-peligro { background: var(--alerta); color: #fff; }
.btn-sm { padding: 6px 13px; font-size: 12.5px; }

.pastilla {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--text-2); white-space: nowrap;
}
.pastilla.acento { background: var(--accent-soft); color: var(--accent); }
.pastilla.ok      { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.pastilla.aviso   { background: color-mix(in srgb, var(--atencion) 18%, transparent); color: var(--atencion); }
.pastilla.mal     { background: color-mix(in srgb, var(--alerta) 15%, transparent); color: var(--alerta); }

.campo { display: block; }
/* Hijo directo a propósito: dentro de un campo puede haber otras etiquetas
   (las casillas de opción, una tarea) y no deben salir en versalitas grises. */
.campo > label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-3); margin-bottom: 6px;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line-2);
  border-radius: var(--r); background: var(--surface); outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.campo textarea { resize: vertical; min-height: 76px; line-height: 1.55; }
.campo-ayuda { font-size: 11.5px; color: var(--text-3); margin-top: 5px; }

/* Un campo con un botón pegado: el número de WhatsApp y el link de Drive. */
.campo-con-boton { display: flex; gap: 8px; align-items: stretch; }
.campo-con-boton input { flex: 1; min-width: 0; }
/* Es un <a> de verdad, no un botón: window.open lo bloquean el iframe y el
   antipopup, y el botón parecía roto. Un enlace siempre abre. */
.btn-icono {
  flex: 0 0 auto; display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 0 15px; cursor: pointer; font-size: 12.5px; font-weight: 500;
  transition: background .14s, color .14s, border-color .14s, opacity .14s;
}
.btn-icono:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
/* Sin nada escrito todavía: sin href, así que ni siquiera es clicable. */
.btn-icono.apagado { opacity: .4; cursor: default; pointer-events: none; }

/* Pasos numerados, para explicar cómo instalar la app en el iPhone. */
.pasos { margin: 0; padding-left: 20px; color: var(--text-2); font-size: 13.5px; line-height: 1.75; }
.pasos li { margin-bottom: 3px; }

.rejilla { display: grid; gap: 14px; }
.rejilla-2 { grid-template-columns: 1fr 1fr; }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
.col-entera { grid-column: 1 / -1; }

.vacio {
  text-align: center; padding: 56px 20px; color: var(--text-3);
}
.vacio-icono { font-size: 34px; opacity: .35; margin-bottom: 12px; }
.vacio h3 { margin: 0 0 6px; font-size: 16px; color: var(--text-2); font-weight: 500; }
.vacio p { margin: 0; font-size: 13px; }

/* =============================================================================
   RESUMEN GENERAL
   ============================================================================= */

.panel {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sombra-card); padding: 20px 22px; margin-top: 16px;
}
.panel-cab {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px;
}
.panel-cab h2 {
  font-family: var(--display); font-size: 15px; font-weight: 500;
  margin: 0; letter-spacing: .02em;
}
.panel-cab .panel-nota { font-size: 12px; color: var(--text-3); margin-left: auto; }
/* Para lo que no tiene vuelta atrás: borrar todo el sistema. */
.panel.peligro { border: 1px solid color-mix(in srgb, var(--alerta) 35%, transparent); }
.panel.peligro .panel-cab h2 { color: var(--alerta); }

.cifras { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin-top: 16px; }
.cifras-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1250px) { .cifras-5 { grid-template-columns: repeat(3, 1fr); } }
.cifra {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sombra-card); padding: 18px 20px;
  border-left: 3px solid var(--accent);
}
.cifra-etiqueta {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-3); margin-bottom: 9px;
}
.cifra-valor {
  font-family: var(--display); font-size: 27px; font-weight: 500;
  line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.cifra-pie { font-size: 11.5px; color: var(--text-3); margin-top: 7px; }
.cifra.verde  { border-left-color: var(--ok); }
.cifra.ambar  { border-left-color: var(--atencion); }
.cifra.azul   { border-left-color: var(--info); }

/* ---------- embudo del pipeline ---------- */

.embudo { display: flex; flex-direction: column; gap: 7px; }
.embudo-fila {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 7px 9px; border-radius: var(--r); transition: background .14s;
  border: 0; background: none; width: 100%; text-align: left; color: inherit;
}
.embudo-fila:hover { background: var(--surface-2); }
.embudo-num {
  font-family: var(--display); font-size: 10.5px; color: var(--text-3);
  border: 1px solid var(--line-2); border-radius: 50%;
  width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 20px;
}
.embudo-nombre { font-size: 13px; flex: 0 0 190px; }
.embudo-barra {
  flex: 1; height: 8px; background: var(--surface-3);
  border-radius: var(--r-pill); overflow: hidden; min-width: 40px;
}
/* Es un <span>: sin display:block el ancho y el alto se ignoran y la barra
   nunca se pinta. Costó una captura de pantalla darse cuenta. */
.embudo-relleno {
  display: block; height: 100%; background: var(--accent);
  border-radius: var(--r-pill); transition: width .3s;
}
.embudo-conteo {
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-2);
  flex: 0 0 28px; text-align: right; font-weight: 500;
}

/* ---------- agenda corta ---------- */

.agenda { display: flex; flex-direction: column; gap: 2px; }
.agenda-fila {
  display: flex; align-items: center; gap: 13px; padding: 10px 9px;
  border-radius: var(--r); cursor: pointer; border: 0; background: none;
  width: 100%; text-align: left; color: inherit; transition: background .14s;
}
.agenda-fila:hover { background: var(--surface-2); }
.agenda-fecha {
  flex: 0 0 52px; text-align: center; background: var(--accent-soft);
  border-radius: var(--r-xs); padding: 5px 4px; color: var(--accent);
}
.agenda-dia { display: block; font-family: var(--display); font-size: 17px; line-height: 1; font-weight: 600; }
.agenda-mes { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; margin-top: 3px; }
.agenda-cuerpo { flex: 1; min-width: 0; }
.agenda-nombre { display: block; font-size: 13.5px; font-weight: 500; }
.agenda-detalle {
  display: block; font-size: 11.5px; color: var(--text-3); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-cuenta {
  font-size: 11px; color: var(--text-3); flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.agenda-cuenta.urgente { color: var(--alerta); font-weight: 600; }

/* ---------- inventario rápido ---------- */

.inv-rapido { display: flex; flex-direction: column; gap: 8px; }
.inv-fila { display: flex; align-items: center; gap: 11px; font-size: 13px; }
.inv-fila-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-fila-stock { font-variant-numeric: tabular-nums; color: var(--text-2); }
.inv-punto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.inv-punto.ok { background: var(--ok); }
.inv-punto.bajo { background: var(--atencion); }
.inv-punto.critico { background: var(--alerta); }

/* =============================================================================
   TABLERO KANBAN
   ============================================================================= */

.tablero-envoltura { height: 100%; display: flex; flex-direction: column; min-height: 0; }

.filtros {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 26px 14px; background: var(--surface);
}
.filtros-etiqueta {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3);
}
.filtro-caja {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px 13px;
}
.filtro-caja select, .filtro-caja input {
  background: none; border: 0; outline: none; color: var(--text);
  font-size: 13px; padding: 2px 0; cursor: pointer;
}
.filtro-caja input[type="date"] { width: 128px; }

.tablero {
  display: flex; gap: 14px; padding: 16px 26px 26px;
  overflow-x: auto; overflow-y: hidden; flex: 1; min-height: 0;
  scroll-snap-type: x proximity;
}

.col {
  flex: 0 0 292px; display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border: 1px solid transparent;
  border-radius: var(--r-lg); scroll-snap-align: start;
  box-shadow: var(--sombra-card);
  transition: border-color .14s, background .14s;
}
.col.arrastre { border-color: var(--accent); background: var(--accent-soft); }
.col-cab { padding: 14px 15px 12px; }
.col-titulo { display: flex; align-items: baseline; gap: 8px; }
.col-num {
  font-family: var(--display); font-size: 11px; color: var(--text-3);
  border: 1px solid var(--line-2); border-radius: 50%;
  width: 19px; height: 19px; display: grid; place-items: center; flex: 0 0 19px;
  align-self: center;
}
.col-nombre { font-size: 13px; font-weight: 600; letter-spacing: .01em; line-height: 1.25; }
.col-conteo {
  margin-left: auto; font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums; align-self: center;
}
.col-monto {
  font-size: 11.5px; color: var(--text-3); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.col-cuerpo {
  padding: 4px 10px 12px; overflow-y: auto; flex: 1; min-height: 60px;
  display: flex; flex-direction: column; gap: 9px;
}
.col-vacia {
  font-size: 12px; color: var(--text-3); text-align: center;
  padding: 18px 6px; opacity: .7;
}

/* ---------- tarjeta de pedida ---------- */

.tarjeta {
  background: var(--surface-2); border: 1px solid transparent;
  border-left: 3px solid var(--line-2);
  border-radius: var(--r); padding: 12px 13px; cursor: grab;
  transition: border-color .14s, transform .1s, box-shadow .14s;
}
.tarjeta:hover {
  border-color: var(--line-2); box-shadow: var(--sombra-card); transform: translateY(-1px);
}
.tarjeta:active { cursor: grabbing; }
.tarjeta.arrastrando { opacity: .45; transform: rotate(1.5deg); }
.tarjeta.pago-cero    { border-left-color: var(--pago-cero); }
.tarjeta.pago-parcial { border-left-color: var(--pago-parcial); }
.tarjeta.pago-total   { border-left-color: var(--pago-total); }
.tarjeta.urgente { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alerta) 45%, transparent); }

.t-cab { display: flex; align-items: flex-start; gap: 8px; }
.t-nombre { font-size: 13.5px; font-weight: 600; line-height: 1.3; flex: 1; }
.t-codigo {
  font-family: var(--display); font-size: 10.5px; letter-spacing: .04em;
  color: var(--text-3); flex: 0 0 auto; padding-top: 2px;
}
.t-linea { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.t-dato { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.t-escenario {
  font-family: var(--display); font-size: 11px; letter-spacing: .03em;
  background: var(--surface-3); border: 1px solid var(--line-2);
  padding: 2px 7px; border-radius: var(--r-xs); color: var(--text-2);
}
.t-avance {
  margin-top: 9px; display: flex; align-items: center; gap: 8px;
}
.t-avance-barra {
  flex: 1; height: 4px; background: var(--surface-3);
  border-radius: var(--r-pill); overflow: hidden;
}
.t-avance-relleno { height: 100%; background: var(--accent); transition: width .3s; }
.t-avance-texto {
  font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.t-pie {
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-2);
  white-space: nowrap;
}
/* Marcas chicas del pie de la tarjeta: no compiten con el nombre de la pareja,
   que es lo que uno busca al mirar el tablero. */
.t-marca { font-size: 11px; color: var(--text-3); }
.t-marca.mal { color: var(--alerta); }
.t-cuenta { margin-left: auto; font-variant-numeric: tabular-nums; }
.t-cuenta.urgente { color: var(--alerta); font-weight: 600; }

/* =============================================================================
   FICHA (modal)
   ============================================================================= */

.modal-fondo {
  position: fixed; inset: 0; z-index: 200; background: rgba(30,22,25,.5);
  display: grid; place-items: center; padding: 24px;
  animation: aparece .16s ease-out; backdrop-filter: blur(3px);
}
.modal-fondo.sale { animation: desaparece .18s ease-in forwards; }
@keyframes aparece { from { opacity: 0 } to { opacity: 1 } }
@keyframes desaparece { to { opacity: 0 } }
@keyframes sube {
  from { opacity: 0; transform: translateY(14px) scale(.985) }
  to { opacity: 1; transform: none }
}

.modal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sombra);
  width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  animation: sube .2s cubic-bezier(.2,.8,.3,1);
}
.modal-sm { max-width: 430px; }
.modal-md { max-width: 640px; }
.modal-lg { max-width: 940px; }

.modal-cab {
  padding: 22px 26px 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 14px;
}
.modal-cab h2 {
  font-family: var(--display); font-size: 19px; font-weight: 400;
  margin: 0; letter-spacing: .02em;
}
.modal-cab-sub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
.modal-cerrar {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--text-3); font-size: 22px; line-height: 1; padding: 0 4px;
  border-radius: var(--r-xs);
}
.modal-cerrar:hover { color: var(--text); background: var(--surface-2); }
.modal-cuerpo { padding: 20px 26px; overflow-y: auto; flex: 1; }
.modal-pie {
  padding: 16px 26px 20px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.modal-pie .sep { flex: 1; }

/* ---------- pestañas de la ficha ---------- */

.pestanas {
  display: flex; gap: 4px; padding: 0 26px; border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.pestana {
  padding: 11px 14px; border: 0; background: none; cursor: pointer;
  font-size: 13px; color: var(--text-3); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .14s, border-color .14s;
}
.pestana:hover { color: var(--text); }
.pestana.activa { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }

.seccion { margin-bottom: 26px; }
.seccion:last-child { margin-bottom: 0; }
.seccion-titulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-3); margin-bottom: 13px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* ---------- checklist de etapa ---------- */

.tareas { display: flex; flex-direction: column; gap: 3px; }
/* La tipografía se declara entera aquí a propósito: estas etiquetas a veces
   viven dentro de un .campo, y sin esto heredarían las versalitas grises. */
.tarea {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--r); cursor: pointer; transition: background .14s;
  font-size: 13.5px; text-transform: none; letter-spacing: normal;
  color: var(--text); margin-bottom: 0;
}
.tarea:hover { background: var(--surface-2); }
.tarea input[type="checkbox"] {
  margin: 0; accent-color: var(--accent); width: 16px; height: 16px;
  cursor: pointer; flex: 0 0 16px;
}
.tarea-marca { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.tarea-texto { flex: 1; line-height: 1.45; }
.tarea.hecha .tarea-texto { color: var(--text-3); text-decoration: line-through; }

/* El botón de "no aplica". Vive a la derecha de la tarea y la saca del
   cálculo del avance sin ensuciarla con un check que no corresponde. */
.tarea-na {
  flex: 0 0 auto; background: none; border: 1px solid var(--line-2);
  color: var(--text-3); font-size: 10.5px; padding: 3px 10px;
  border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
  transition: background .14s, color .14s, border-color .14s;
}
.tarea-na:hover { border-color: var(--text-3); color: var(--text-2); }
.tarea-na.activa { background: var(--surface-3); color: var(--text-2); font-weight: 500; }
.tarea.no-aplica { opacity: .55; }
.tarea.no-aplica .tarea-texto { text-decoration: none; font-style: italic; }
.tarea.no-aplica .tarea-marca { cursor: default; }

/* ---------- casillas en fila, para elegir varias personas ---------- */

.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  cursor: pointer; font-size: 13px; background: var(--surface);
  transition: border-color .14s, background .14s, color .14s;
  text-transform: none; letter-spacing: normal; color: var(--text); margin-bottom: 0;
}
.opcion:hover { border-color: var(--text-3); }
.opcion input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; margin: 0; }
.opcion.marcada {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); font-weight: 500;
}
.tarea-grupo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent); margin: 16px 0 8px; font-weight: 600;
}
.tarea-grupo:first-child { margin-top: 0; }

/* ---------- abonos y listas dentro de la ficha ---------- */

.lista-mini { display: flex; flex-direction: column; gap: 7px; }
.item-mini {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  background: var(--surface-2); border-radius: var(--r); font-size: 13px;
}
.item-mini-cuerpo { flex: 1; min-width: 0; }
.item-mini-nota { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.item-mini-monto { font-variant-numeric: tabular-nums; font-weight: 500; }
.item-quitar {
  background: none; border: 0; color: var(--text-3); cursor: pointer;
  font-size: 16px; padding: 0 3px; border-radius: var(--r-xs);
}
.item-quitar:hover { color: var(--alerta); }

.resumen-dinero {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  background: var(--surface-2); border-radius: var(--r-lg); padding: 16px 18px;
  margin-bottom: 18px;
}
.rd-item { text-align: center; }
.rd-etiqueta {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-3); margin-bottom: 6px;
}
.rd-valor {
  font-family: var(--display); font-size: 19px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.rd-valor.ok { color: var(--ok); }
.rd-valor.mal { color: var(--alerta); }

/* ---------- bitácora ---------- */

.bitacora { display: flex; flex-direction: column; gap: 0; }
.evento {
  display: flex; gap: 12px; padding: 9px 0; font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}
.evento:last-child { border-bottom: 0; }
.evento-cuando { flex: 0 0 118px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.evento-texto { flex: 1; color: var(--text-2); }
.evento-quien { color: var(--text-3); font-size: 11.5px; }

/* =============================================================================
   TABLAS
   ============================================================================= */

.tabla-envoltura { overflow-x: auto; border-radius: var(--r-lg); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla th {
  text-align: left; padding: 11px 13px; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .11em; color: var(--text-3);
  border-bottom: 1px solid var(--line); font-weight: 600; white-space: nowrap;
}
table.tabla td {
  padding: 12px 13px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
table.tabla tr:last-child td { border-bottom: 0; }
table.tabla tbody tr { cursor: pointer; transition: background .14s; }
table.tabla tbody tr:hover { background: var(--surface-2); }
table.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla .nada { color: var(--text-3); }
/* La flechita que avisa que la fila lleva a otra pantalla. */
table.tabla td.ir { text-align: right; color: var(--line-2); font-size: 17px; width: 26px; }
table.tabla tr:hover td.ir { color: var(--accent); }
table.tabla tr.sin-cargar { background: color-mix(in srgb, var(--atencion) 8%, transparent); }

/* =============================================================================
   CALENDARIO
   ============================================================================= */

.cal-nav { display: flex; gap: 6px; }
.cal-leyenda {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 14px 2px 2px; font-size: 12px; color: var(--text-3);
}
.cal-leyenda-item { display: flex; align-items: center; gap: 7px; }
.cal-punto { width: 9px; height: 9px; border-radius: 3px; display: block; flex: 0 0 9px; }

.calendario {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin-top: 12px;
  box-shadow: var(--sombra-card);
}
.cal-cabecera {
  background: var(--surface); padding: 11px 10px; text-align: center;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-3); font-weight: 600;
}
.cal-dia {
  background: var(--surface); min-height: 118px; padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.cal-dia.fuera { background: var(--surface-2); }
.cal-dia.hoy { background: var(--accent-soft); }
.cal-numero {
  font-family: var(--display); font-size: 12.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.cal-dia.hoy .cal-numero {
  color: var(--on-accent); background: var(--accent);
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; font-size: 11.5px;
}
.cal-eventos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.cal-evento {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: var(--surface-2); border-left: 3px solid var(--text-3);
  border-radius: var(--r-xs); padding: 5px 7px; font: inherit;
  transition: transform .1s, box-shadow .14s;
}
.cal-evento:hover { box-shadow: var(--sombra-card); transform: translateY(-1px); }
.cal-evento.finalizada { opacity: .5; }
.cal-hora {
  display: block; font-size: 10px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.cal-nombre {
  display: block; font-size: 11.5px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-etapa {
  display: block; font-size: 10px; color: var(--text-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cal-dia[data-ir-dia] { cursor: pointer; }
.cal-dia[data-ir-dia]:hover { background: var(--surface-2); }
.cal-dia.hoy[data-ir-dia]:hover { background: var(--accent-soft); }

/* ---------- los cuatro estados ----------
   El color va en el borde y en un fondo muy suave: el texto siempre se lee
   sobre la superficie normal, en los dos temas. */

/* Cada estado deja su color en --franja para que la franja partida de más
   abajo sepa con qué mezclarlo. */
.est-verde    { --franja: var(--ok);       border-left-color: var(--ok); }
.est-amarillo { --franja: var(--atencion); border-left-color: var(--atencion); }
.est-azul     { --franja: var(--info);     border-left-color: var(--info); }
.est-rojo     { --franja: var(--alerta);   border-left-color: var(--alerta); }

.cal-evento.est-verde,    .cal-bloque.est-verde    { background: color-mix(in srgb, var(--ok) 13%, var(--surface)); }
.cal-evento.est-amarillo, .cal-bloque.est-amarillo { background: color-mix(in srgb, var(--atencion) 15%, var(--surface)); }
.cal-evento.est-azul,     .cal-bloque.est-azul     { background: color-mix(in srgb, var(--info) 14%, var(--surface)); }
.cal-evento.est-rojo,     .cal-bloque.est-rojo     { background: color-mix(in srgb, var(--alerta) 13%, var(--surface)); }

.cal-punto.est-verde    { background: var(--ok); }
.cal-punto.est-amarillo { background: var(--atencion); }
.cal-punto.est-azul     { background: var(--info); }
.cal-punto.est-rojo     { background: var(--alerta); }

/* ---------- la franja partida: cambió de fecha ----------
   Mitad azul arriba (el cambio) y mitad del color del estado abajo (cómo está
   hoy). Se pinta como fondo sobre el área del borde en vez de con un
   pseudo-elemento, porque los bloques del calendario recortan lo que se sale
   y el pseudo-elemento quedaba invisible. */

.tarjeta.doble,
.cal-evento.doble,
.cal-bloque.doble {
  border-left-color: transparent;
  background-image: linear-gradient(to bottom, var(--info) 50%, var(--franja) 50%);
  background-repeat: no-repeat;
  background-size: 3px 100%;
  background-position: left top;
  background-origin: border-box;
  background-clip: border-box;
}
.cal-punto.doble {
  background: linear-gradient(to bottom, var(--info) 50%, var(--franja) 50%);
}

/* ---------- rejilla de horas: semana y día ---------- */

.cal-tiempo {
  margin-top: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-card);
}
.cal-tiempo-cab {
  display: grid; border-bottom: 1px solid var(--line); background: var(--surface);
}
.cal-esquina { border-right: 1px solid var(--line); }
.cal-cab-dia {
  padding: 11px 8px; text-align: center; cursor: pointer;
  border-left: 1px solid var(--line); transition: background .14s;
}
.cal-cab-dia:hover { background: var(--surface-2); }
.cal-cab-nombre {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--text-3); font-weight: 600;
}
.cal-cab-num {
  display: block; font-family: var(--display); font-size: 18px;
  margin-top: 3px; font-variant-numeric: tabular-nums;
}
.cal-cab-dia.hoy .cal-cab-num {
  background: var(--accent); color: var(--on-accent);
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; margin: 3px auto 0; font-size: 14px;
}

/* Franja de arriba para las pedidas sin hora fijada todavía. */
.cal-sinhora { display: grid; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cal-sinhora-et {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-3); padding: 8px 6px; text-align: right;
  border-right: 1px solid var(--line);
}
.cal-sinhora-col {
  padding: 6px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}

.cal-tiempo-cuerpo { display: grid; max-height: 62vh; overflow-y: auto; }
.cal-horas { border-right: 1px solid var(--line); }
.cal-hora-et {
  font-size: 10.5px; color: var(--text-3); text-align: right;
  padding: 2px 8px 0 0; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid transparent;
}
.cal-pista { position: relative; border-left: 1px solid var(--line); min-width: 0; }
.cal-pista.hoy { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cal-linea { border-bottom: 1px solid var(--line); }

.cal-bloque {
  position: absolute; left: 3px; right: 3px; overflow: hidden;
  border: 1px solid var(--line); border-left: 3px solid var(--text-3);
  border-radius: var(--r-xs); padding: 4px 7px; cursor: pointer;
  text-align: left; font: inherit; color: var(--text);
  transition: box-shadow .14s, transform .1s;
}
.cal-bloque:hover { box-shadow: var(--sombra-card); transform: translateY(-1px); z-index: 2; }
.cal-bloque.finalizada { opacity: .55; }
.cal-bloque-hora {
  display: block; font-size: 10px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.cal-bloque-nombre {
  display: block; font-size: 12px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-bloque-detalle {
  display: block; font-size: 10.5px; color: var(--text-3); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- selector de vista ---------- */

.segmentado {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 3px;
}
.seg-btn {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px;
  padding: 5px 14px; border-radius: var(--r-pill); color: var(--text-2);
  transition: background .14s, color .14s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.activo {
  background: var(--accent); color: var(--on-accent); font-weight: 500;
  box-shadow: var(--sombra-sm);
}

/* =============================================================================
   AVISOS
   ============================================================================= */

#avisos {
  position: fixed; bottom: 20px; right: 20px; z-index: 300;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
  pointer-events: none;
}
.aviso {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r); padding: 12px 16px; box-shadow: var(--sombra);
  font-size: 13.5px; max-width: 360px; pointer-events: auto;
  animation: entraAviso .22s cubic-bezier(.2,.8,.3,1);
}
.aviso.ok  { border-left-color: var(--ok); }
.aviso.mal { border-left-color: var(--alerta); }
.aviso.sale { animation: saleAviso .2s ease-in forwards; }
@keyframes entraAviso { from { opacity: 0; transform: translateX(20px) } to { opacity: 1; transform: none } }
@keyframes saleAviso { to { opacity: 0; transform: translateX(20px) } }

/* =============================================================================
   MÓVIL
   ============================================================================= */

.movil-cab { display: none; }
.velo { display: none; }

@media (max-width: 900px) {
  .app.activa { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  /* El padding de arriba respeta la muesca del iPhone cuando el sistema está
     instalado en la pantalla de inicio y ocupa toda la altura. */
  .movil-cab {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 15px; background: var(--surface);
    padding-top: calc(11px + env(safe-area-inset-top));
    padding-left: calc(15px + env(safe-area-inset-left));
    padding-right: calc(15px + env(safe-area-inset-right));
    border-bottom: 1px solid var(--line); position: relative; z-index: 30;
  }
  .movil-btn {
    background: none; border: 0; font-size: 19px; cursor: pointer;
    color: var(--text-2); padding: 4px 6px; border-radius: var(--r-xs);
  }
  .movil-marca { flex: 1; max-width: 148px; }

  .lateral {
    position: fixed; inset: 0 auto 0 0; width: 268px; z-index: 50;
    background: var(--bg); transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.2,.8,.3,1);
    box-shadow: var(--sombra);
  }
  .lateral.abierta { transform: none; }
  .velo {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: rgba(30,22,25,.45); opacity: 0; pointer-events: none;
    transition: opacity .22s;
  }
  .velo.visible { opacity: 1; pointer-events: auto; }

  .principal { margin: 0; border-radius: 0; box-shadow: none; }
  .topbar { padding: 15px 17px 13px; }
  .topbar h1 { font-size: 18px; }
  .contenido { padding: 4px 17px 34px; }
  .filtros { padding: 11px 17px 12px; }

  .cifras { grid-template-columns: 1fr 1fr; gap: 11px; }
  .cifra { padding: 15px 16px; }
  .cifra-valor { font-size: 22px; }

  .rejilla-2, .rejilla-3 { grid-template-columns: 1fr; }
  .resumen-dinero { grid-template-columns: 1fr 1fr; }
  .embudo-nombre { flex: 0 0 128px; font-size: 12.5px; }

  /* Tablero: una columna a la vez, deslizando */
  .tablero { padding: 13px 17px 20px; gap: 11px; scroll-snap-type: x mandatory; }
  .col { flex: 0 0 84vw; }

  /* El calendario no se puede apretar más allá de cierto punto sin volverse
     ilegible: se deja que se deslice de lado dentro de su propia área. */
  .calendario { min-width: 660px; }
  .cal-dia { min-height: 92px; padding: 6px; }
  .cal-cabecera { padding: 9px 6px; }
  .buscador-ancho { max-width: none; }

  /* La semana también se desliza; el día entra completo y es la vista que de
     verdad se usa parado en la locación. */
  .cal-tiempo { overflow-x: auto; }
  .cal-tiempo-cab, .cal-tiempo-cuerpo, .cal-sinhora { min-width: 620px; }
  .cal-tiempo-cuerpo { max-height: 58vh; }
  .vista-dia .cal-tiempo-cab,
  .vista-dia .cal-tiempo-cuerpo,
  .vista-dia .cal-sinhora { min-width: 0; }

  .segmentado { order: -1; }
  .cal-leyenda { gap: 12px; font-size: 11px; }

  /* Safari amplía la página cuando un campo tiene menos de 16px. Con esto el
     formulario deja de saltar al tocarlo. */
  input, select, textarea { font-size: 16px; }
  .campo input, .campo select, .campo textarea { font-size: 16px; }
  .buscador input, .filtro-caja select, .filtro-caja input { font-size: 16px; }

  /* Área de trabajo respetando los bordes redondeados de la pantalla. */
  .contenido {
    padding-left: calc(17px + env(safe-area-inset-left));
    padding-right: calc(17px + env(safe-area-inset-right));
    padding-bottom: calc(34px + env(safe-area-inset-bottom));
  }
  .modal-pie { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .lateral-pie { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

  /* Objetivos de toque más generosos con el dedo. */
  .nav-item { padding: 12px 12px; }
  .btn { padding: 11px 18px; }
  .pestana { padding: 13px 14px; }

  .modal-fondo { padding: 0; place-items: end stretch; }
  .modal {
    max-height: 94vh; border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
  }
  .modal-cab, .modal-cuerpo, .modal-pie, .pestanas { padding-left: 18px; padding-right: 18px; }

  #avisos { left: 15px; right: 15px; bottom: 15px; align-items: stretch; }
  .aviso { max-width: none; }
}

@media print {
  .lateral, .topbar, .filtros, .movil-cab, #avisos { display: none !important; }
  .principal { margin: 0; box-shadow: none; }
}