/* =============================================================================
   CAPTA · SISTEMA VISUAL ÚNICO (Felipe, 22/10/2026 · antes «escala de la página del día», tablero 7 del 21/10)
   =============================================================================
   UNA sola fuente de colores, tipografía, tamaños y componentes para TODAS las pantallas de CAPTA OS: que se vean como una sola app.
   Las reglas y los ejemplos están en docs/SISTEMA_VISUAL.md; la muestra de cada pieza, en docs/sistema_visual_muestra.html.

   REGLA (Decisiones §88): toda pantalla nueva o modificada usa SOLO este sistema. Ninguna app define colores hex, font-size ni font-family propios
   (`apps/shared/sistema_visual.test.js` lo hace cumplir) y NO se usa tipografía serif.

   COLORES CON SIGNIFICADO
     verde #1B6F62 ........ lo principal: acción principal, combo, lo usado/hecho
     azul oscuro #13202F ... necesita acción (lo que hay que resolver) y el texto principal
     naranja ............... SOLO «Anular»
     gris punteado ......... anulado o «agregar»
     azul #2B3F7A .......... el segundo profesional
   TIPOGRAFÍA: DM Sans. Título de página 28 · sección 18 · etiqueta 13 en mayúsculas · fila 18/15/17 · número destacado 24 · campo 16.
   BOTONES: principal · secundario · agregar (punteado) · anular — todos de 44 px. Una acción nunca es un link subrayado.
   ============================================================================= */
:root {
  --es-tinta: #13202F;       /* texto principal y bordes de lo que hay que resolver */
  --es-nota: #3D4A5C;        /* detalle, hora */
  --es-rotulo: #5A6677;      /* etiqueta de sección */
  --es-verde: #1B6F62;       /* acción principal */
  --es-borde: #C5CDD6;       /* borde del botón secundario */
  --es-linea: #E3E7EC;       /* borde de las listas y tarjetas */
  --es-sep: #EEF1F4;         /* separador entre filas */
  --es-punteado: #8A96A6;    /* borde del botón de agregar */
  --es-fondo: #FFFFFF;
  --es-fondo-suave: #FAFBFC; /* la fila que falta registrar */
  --es-alto: 44px;
  --es-foco: var(--es-verde);   /* el FOCO va en verde; el borde oscuro grueso es solo del ERROR */
  --es-verde-fondo: #E6F4F1; --es-verde-borde: #9FD2C8;                 /* combo / usado / hecho */
  --es-azul: #2B3F7A; --es-azul-fondo: #E8ECF7; --es-azul-borde: #B8C3E3;   /* el segundo profesional */
  --es-naranja: #8A3B12; --es-naranja-fondo: #FFF8F3; --es-naranja-borde: #E2B49A;   /* SOLO «Anular» */
  --es-accion-fondo: #E8ECF1;                                           /* fondo suave de «necesita acción» */
  --es-gris-fondo: #F4F6F8;                                             /* anulado, fondo de página */
  --es-font: "DM Sans", system-ui, sans-serif;
  /* La escala, en un solo lugar (px). */
  --es-t-pagina: 28px; --es-t-seccion: 18px; --es-t-etiqueta: 13px;
  --es-t-fila: 18px; --es-t-detalle: 15px; --es-t-monto: 17px; --es-t-numero: 24px; --es-t-campo: 16px;
}

/* ── lista y fila ── */
.es-lista { background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 12px; overflow: hidden; }
.es-lista > .es-item { border: 0; border-radius: 0; border-bottom: 1px solid var(--es-sep); margin: 0; }
.es-lista > .es-item:last-child { border-bottom: 0; }
.es-item { background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 12px; overflow: hidden; position: relative; font-family: "DM Sans", system-ui, sans-serif; color: var(--es-tinta); }
.es-item--falta { background: var(--es-fondo-suave); box-shadow: inset 4px 0 0 var(--es-tinta); }   /* lo que falta se marca con una barra oscura, no con otro color */
.es-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 16px 20px; }
.es-hora { font-size: 15px; font-weight: 600; color: var(--es-nota); min-width: 48px; }
.es-texto { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.es-nombre { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--es-tinta); }
.es-detalle { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--es-nota); }
.es-monto { margin: 0; font-size: 17px; font-weight: 700; color: var(--es-tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.es-monto--suave { font-size: 15px; font-weight: 600; color: var(--es-nota); }
.es-monto-bloque { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.es-numero { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--es-tinta); }
.es-seccion { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--es-rotulo); }
.es-titulo-pagina, .es-titulo-dia { margin: 0; font-family: "DM Sans", system-ui, sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--es-tinta); }
.es-bloque { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; font-family: "DM Sans", system-ui, sans-serif; color: var(--es-tinta); }
.es-bloque p { margin: 0; }
.es-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.es-tachado { text-decoration: line-through; color: var(--es-nota); }
.es-enfasis { font-weight: 700; color: var(--es-tinta); }          /* peso, no color: una nota que importa (título de tarjeta, plan vencido) */
.es-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.es-carta { border: 1px solid var(--es-linea); border-radius: 12px; padding: 14px 20px; display: flex; flex-direction: column; gap: 3px; background: var(--es-fondo); }
.es-chip, .es-etiqueta { display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--es-nota); background: #E3E7EC; border-radius: 999px; padding: 6px 14px; white-space: nowrap; }   /* neutra: informa, no pide nada */
.es-item--resolver { border: 2px solid var(--es-tinta); }   /* lo que hay que resolver lleva el borde oscuro */
.es-item--anulado { background: #F4F6F8; border: 1px dashed var(--es-punteado); border-radius: 12px; }   /* anulado = gris punteado */
.es-seccion--fila { padding: 12px 20px 0; }
.es-acciones--agregar { gap: 10px; margin-bottom: 20px; }

/* ── los tres botones, todos de 44 px ── */
.es-btn { font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; min-height: var(--es-alto); padding: 8px 16px; border-radius: 10px; cursor: pointer; border: 1px solid var(--es-borde); color: var(--es-tinta); background: var(--es-fondo); }
.es-btn--principal { color: #FFFFFF; background: var(--es-verde); border-color: var(--es-verde); }
.es-btn--secundario { color: var(--es-tinta); background: var(--es-fondo); border-color: var(--es-borde); }
.es-btn--agregar { flex: 1 1 260px; color: var(--es-verde); background: transparent; border: 1px dashed var(--es-punteado); border-radius: 12px; padding: 12px 16px; }
.es-btn--icono { min-width: var(--es-alto); padding: 8px 12px; font-size: 18px; font-weight: 400; }
.es-btn:focus-visible { outline: 2px solid var(--es-foco); outline-offset: 2px; }
.es-btn:disabled { cursor: not-allowed; opacity: .6; }

/* ── la base de toda pantalla ── */
.es-app { font-family: var(--es-font); font-size: var(--es-t-detalle); color: var(--es-tinta); background: var(--es-gris-fondo); line-height: 1.4; }
.es-app *, .es-app *::before, .es-app *::after { box-sizing: border-box; }
.es-subtitulo { margin: 0; font-size: var(--es-t-seccion); font-weight: 600; line-height: 1.3; color: var(--es-tinta); }   /* título de una sección o de una ventana */
.es-texto-chico { margin: 0; font-size: var(--es-t-etiqueta); color: var(--es-rotulo); }                               /* solo para pies y notas al margen */

/* ── chips: el estado de algo, nunca una acción ── */
.es-chip--verde { color: var(--es-verde); background: var(--es-verde-fondo); }       /* combo / usado / hecho */
.es-chip--azul { color: var(--es-azul); background: var(--es-azul-fondo); }          /* el segundo profesional */
.es-chip--accion { color: #FFFFFF; background: var(--es-tinta); }                    /* necesita acción */
.es-chip--anulado { color: var(--es-nota); background: var(--es-gris-fondo); border: 1px dashed var(--es-punteado); }

/* ── el cuarto botón: Anular (naranja, y solo acá) ── */
.es-btn--anular { color: var(--es-naranja); background: var(--es-naranja-fondo); border-color: var(--es-naranja-borde); }   /* en el detalle: contorneado */
.es-btn--anular-lleno { color: #FFFFFF; background: var(--es-naranja); border-color: var(--es-naranja); }                      /* dentro de la ventana de confirmación: naranja lleno con letra blanca */

/* ── campos: etiqueta 15/600 arriba, campo de 16 y 44 px ── */
.es-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.es-label { font-size: var(--es-t-detalle); font-weight: 600; color: var(--es-tinta); }
.es-input, .es-select, .es-textarea { font: inherit; font-size: var(--es-t-campo); color: var(--es-tinta); background: var(--es-fondo); border: 1px solid var(--es-borde); border-radius: 10px; min-height: var(--es-alto); padding: 8px 12px; width: 100%; }
.es-textarea { min-height: 96px; resize: vertical; }
.es-input:focus, .es-select:focus, .es-textarea:focus, .es-input:focus-visible, .es-select:focus-visible, .es-textarea:focus-visible { outline: 2px solid var(--es-foco); outline-offset: 1px; border-color: var(--es-foco); }
.es-input::placeholder, .es-textarea::placeholder { color: var(--es-rotulo); }
.es-ayuda { margin: 0; font-size: var(--es-t-detalle); color: var(--es-nota); }
.es-campo--error .es-input, .es-campo--error .es-select, .es-campo--error .es-textarea { border: 2px solid var(--es-tinta); }   /* falta algo: pide acción, no un color nuevo */
.es-error { margin: 0; font-size: var(--es-t-detalle); font-weight: 600; color: var(--es-tinta); }
.es-input[disabled], .es-select[disabled], .es-textarea[disabled] { background: var(--es-gris-fondo); color: var(--es-nota); cursor: not-allowed; }
.es-monto-campo { font-size: var(--es-t-numero); font-weight: 700; letter-spacing: -0.01em; min-height: 56px; }   /* el campo del monto: número destacado, sin serif */

/* ── tablas ──
   En el celular, una tabla de POCAS columnas pasa a filas (nombre / detalle / monto, como las filas de turnos): cada celda dice su columna en `data-label`.
   Solo una tabla realmente ANCHA (`es-tabla--ancha` dentro de `es-tabla-caja--desliza`) se desliza de costado, y lo dice con un texto (`es-desliza`) y una sombra en el borde. */
.es-tabla-caja { background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 12px; overflow-x: auto; }
.es-tabla { width: 100%; border-collapse: collapse; font-size: var(--es-t-detalle); color: var(--es-tinta); }
.es-tabla th { text-align: left; font-size: var(--es-t-etiqueta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--es-rotulo); padding: 12px 16px; border-bottom: 1px solid var(--es-linea); white-space: nowrap; }
.es-tabla td { padding: 14px 16px; border-bottom: 1px solid var(--es-sep); vertical-align: middle; }
.es-tabla tr:last-child td { border-bottom: 0; }
.es-tabla .es-td-nombre { font-size: var(--es-t-fila); font-weight: 600; }
.es-tabla .es-td-num { text-align: right; font-size: var(--es-t-monto); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.es-tabla th.es-td-num { font-size: var(--es-t-etiqueta); font-weight: 600; }
.es-tabla--ancha { min-width: 760px; }
.es-desliza { display: none; margin: 0; font-size: var(--es-t-detalle); font-weight: 600; color: var(--es-nota); }
.es-tabla-caja--desliza { background:
  linear-gradient(to right, var(--es-fondo), var(--es-fondo)) left center / 28px 100% no-repeat local,
  linear-gradient(to left, var(--es-fondo), var(--es-fondo)) right center / 28px 100% no-repeat local,
  linear-gradient(to right, rgba(19, 32, 47, 0.22), rgba(19, 32, 47, 0)) left center / 16px 100% no-repeat scroll,
  linear-gradient(to left, rgba(19, 32, 47, 0.22), rgba(19, 32, 47, 0)) right center / 16px 100% no-repeat scroll,
  var(--es-fondo); }

/* ── ventanas (modales) ── */
.es-ventana-fondo { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(19, 32, 47, 0.55); }
.es-ventana { background: var(--es-fondo); border-radius: 14px; width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; font-family: var(--es-font); color: var(--es-tinta); }
.es-titulo-ventana { margin: 0; font-size: var(--es-t-numero); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--es-tinta); }   /* título de una ventana: 24 */
.es-ventana-pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ── fondos suaves por SIGNIFICADO (Felipe, 22/10/2026): un recuadro de fondo claro con borde fino del mismo color, sin degradados.
   verde suave = plan / combo / todo bien · azul oscuro suave = necesita acción · gris suave = neutro o $0. El texto va siempre en tinta o nota (contraste 4.5:1). ── */
.es-suave { border: 1px solid var(--es-borde); border-radius: 12px; padding: 16px 20px; background: var(--es-gris-fondo); color: var(--es-tinta); display: flex; flex-direction: column; gap: 4px; font-family: var(--es-font); }
.es-suave p { margin: 0; }
.es-suave--verde { background: var(--es-verde-fondo); border-color: var(--es-verde-borde); }
.es-suave--accion { background: var(--es-accion-fondo); border-color: var(--es-tinta); }
.es-suave--neutro { background: var(--es-gris-fondo); border-color: var(--es-borde); }

/* ── encabezado de módulo con pestañas: «Estás viendo …» y las secciones del módulo ── */
.es-modulo { background: var(--es-fondo); border-bottom: 1px solid var(--es-linea); padding: 14px 20px 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--es-font); color: var(--es-tinta); }
.es-modulo-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.es-modulo-cab .es-seccion { margin: 0; }
.es-tabs { display: flex; gap: 4px; overflow-x: auto; margin: 0 -8px; padding: 0 8px; background:
  linear-gradient(to right, var(--es-fondo), var(--es-fondo)) left center / 28px 100% no-repeat local,
  linear-gradient(to left, var(--es-fondo), var(--es-fondo)) right center / 28px 100% no-repeat local,
  linear-gradient(to right, rgba(19, 32, 47, 0.22), rgba(19, 32, 47, 0)) left center / 16px 100% no-repeat scroll,
  linear-gradient(to left, rgba(19, 32, 47, 0.22), rgba(19, 32, 47, 0)) right center / 16px 100% no-repeat scroll; }   /* la sombra del borde dice que hay más pestañas */
.es-tabs-aviso { margin: 0; padding: 4px 0 8px; font-size: var(--es-t-detalle); font-weight: 600; color: var(--es-nota); }
.es-tabs-aviso::after { content: " →"; }
.es-tabs-aviso[hidden] { display: none; }
.es-tab { flex: none; font: inherit; font-size: var(--es-t-detalle); font-weight: 600; min-height: var(--es-alto); padding: 8px 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--es-nota); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.es-tab[aria-current="page"] { color: var(--es-tinta); border-bottom-color: var(--es-verde); }
.es-tab:focus-visible { outline: 2px solid var(--es-foco); outline-offset: -2px; }

/* ── «Guardado»: el aviso que confirma una acción (apps/shared/guardado.js lo pone y lo saca solo) ── */
.es-guardado { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 120; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: var(--es-tinta); color: #FFFFFF; font-family: var(--es-font); font-size: var(--es-t-detalle); font-weight: 600; box-shadow: 0 8px 24px rgba(19, 32, 47, 0.28); }
.es-guardado svg { flex: none; stroke: var(--es-verde-borde); }
.es-guardado--estatico { position: static; transform: none; display: inline-flex; }

/* ── estado vacío: todavía no hay nada, y qué hacer ── */
.es-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 20px; border: 1px dashed var(--es-punteado); border-radius: 12px; background: var(--es-fondo); font-family: var(--es-font); }
.es-vacio .es-detalle { max-width: 420px; }
.es-vacio .es-btn { margin-top: 6px; }

@media (max-width: 600px) {
  .es-tabla:not(.es-tabla--ancha) thead { display: none; }
  .es-tabla:not(.es-tabla--ancha), .es-tabla:not(.es-tabla--ancha) tbody { display: block; }
  .es-tabla:not(.es-tabla--ancha) tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 16px; border-bottom: 1px solid var(--es-sep); }
  .es-tabla:not(.es-tabla--ancha) tr:last-child { border-bottom: 0; }
  .es-tabla:not(.es-tabla--ancha) td { display: block; padding: 0; border: 0; grid-column: 1; min-width: 0; }
  .es-tabla:not(.es-tabla--ancha) td[data-label]:not(.es-td-nombre):not(.es-td-num)::before { content: attr(data-label) ": "; color: var(--es-rotulo); }
  .es-tabla:not(.es-tabla--ancha) td.es-td-num { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .es-desliza { display: block; padding: 0 0 8px; }
  .es-desliza::after { content: " →"; }
  .es-fila { padding: 14px 16px; gap: 8px 14px; }
  .es-texto { flex: 1 1 120px; }   /* hora y nombre en una línea; monto y botón bajan juntos */
  .es-hora { min-width: 0; }
  .es-ventana { padding: 18px; }
  .es-ventana-pie .es-btn { flex: 1 1 100%; }
}

/* ── ingreso: la ventana de «Iniciá sesión» (shared/auth.js) ── */
.es-ingreso { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: var(--es-font); }
.es-ingreso-caja { max-width: 420px; text-align: center; align-items: stretch; gap: 12px; padding: 32px 28px; }
.es-ingreso-caja .es-seccion, .es-ingreso-caja .es-error { text-align: center; }
.es-ingreso-caja .es-error:empty { display: none; }
.es-ingreso-logo { height: 44px; width: auto; align-self: center; }

/* ── la cáscara de cada app: el encabezado de módulo arriba y la página debajo ── */
.es-app { min-height: 100vh; display: flex; flex-direction: column; }
.es-principal { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 20px; box-sizing: border-box; }
@media (max-width: 600px) { .es-principal { padding: 16px; } }