/* =============================================================================
   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-verde-medio: #4FA898;                                            /* segundo tono de una barra de reparto */
  --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-enfasis--suave { font-weight: 600; color: var(--es-tinta); }  /* semibold, sin tamaño propio: lo que se nombra dentro de un texto (un botón «Cobrar» en un paso de Clara) */
.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-chequeo { display: inline-flex; align-items: center; gap: 10px; min-height: var(--es-alto); font-size: var(--es-t-detalle); font-weight: 600; cursor: pointer; }
.es-chequeo input { width: 20px; height: 20px; accent-color: var(--es-verde); }
.es-mes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.es-mes .es-select { width: auto; min-width: 120px; }
/* ── Productos (rediseño 22/10/2026): filtros en una fila, grupos dentro de una tabla, receta de un tratamiento ── */
.es-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.es-filtros .es-campo { flex: 1 1 180px; }
.es-filtros .es-campo--ancho { flex: 2 1 260px; }
.es-tabla tr.es-grupo td { background: var(--es-fondo-suave); font-size: var(--es-t-etiqueta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--es-rotulo); padding: 10px 16px; }
.es-linea-der { text-align: right; }
.es-tabla tr.es-fila-clic { cursor: pointer; }
.es-tabla tr.es-fila-clic:hover td { background: var(--es-fondo-suave); }
.es-tabla tr.es-fila-apagada td { opacity: 0.55; }
.es-linea-ancho { grid-column: 1 / -1; }
.es-input--corto { width: 96px; }
fieldset.es-paso { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.es-paso > legend { padding: 0; margin-bottom: 14px; }
.es-suave.es-aviso-fila { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.es-aviso-fila .es-texto { flex: 1 1 380px; }
.es-chequeo-bloque { display: flex; align-items: flex-start; gap: 10px; font-size: var(--es-t-detalle); line-height: 1.4; color: var(--es-tinta); cursor: pointer; }
.es-chequeo-bloque input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--es-verde); }
.es-chequeo-bloque--apagado { color: var(--es-nota); cursor: not-allowed; }
.es-opciones.es-opciones--grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.es-opciones--grilla .es-opcion { align-items: flex-start; }
fieldset.es-campos { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.es-campos > legend { padding: 0; margin-bottom: 10px; }
.es-pasos-plegados { background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 12px; overflow: hidden; }
.es-paso-plegable { border-bottom: 1px solid var(--es-sep); }
.es-paso-plegable:last-child { border-bottom: 0; }
.es-paso-plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: var(--es-alto); }
.es-paso-plegable > summary::-webkit-details-marker { display: none; }
.es-paso-plegable > summary .es-texto { flex: 1 1 auto; min-width: 0; }
.es-paso-plegable > summary:focus-visible { outline: 2px solid var(--es-foco); outline-offset: -2px; }
.es-paso-plegable[open] > summary { border-bottom: 1px solid var(--es-sep); background: var(--es-fondo-suave); }
.es-paso-plegable > .es-campos, .es-paso-plegable > .es-cuerpo { padding: 16px; }
.es-cuerpo { display: flex; flex-direction: column; gap: 16px; }
.es-cuenta-fila--accion { background: var(--es-accion-fondo); font-weight: 700; }
.es-plegable > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.es-plegable > summary::-webkit-details-marker { display: none; }
.es-plegable[open] > summary { margin-bottom: 16px; }
.es-fila-baja { background: var(--es-gris-fondo); }   /* el fondo va en la FILA: en celular las celdas son bloques y, con fondo propio, quedaban cortadas en franjas */
.es-fila-baja td { color: var(--es-nota); background: transparent; }
.es-fila-baja .es-chip { margin-left: 8px; }
.es-aviso-accion { gap: 8px; align-items: flex-start; }
.es-parrafo { margin: 0; font-size: var(--es-t-campo); font-weight: 400; line-height: 1.5; color: var(--es-tinta); }   /* el texto corrido de una ventana: no va en negrita */
.es-enlace-fila { font: inherit; font-weight: 600; color: var(--es-tinta); background: none; border: 0; padding: 0; min-height: var(--es-alto); text-align: left; cursor: pointer; display: block; }
.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; padding-top: 16px; border-top: 1px solid var(--es-linea); }

/* ── la página: ancho máximo y separación entre bloques ── */
.es-pagina { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; font-family: var(--es-font); color: var(--es-tinta); }
.es-pagina p { margin: 0; }

/* ── formularios en UNA columna, en el orden de carga (Finanzas, 22/10/2026) ── */
.es-form { display: flex; flex-direction: column; gap: 24px; }
.es-paso { display: flex; flex-direction: column; gap: 14px; }
.es-paso-cab { display: flex; align-items: center; gap: 10px; }
.es-paso-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--es-verde-fondo); color: var(--es-verde); font-size: var(--es-t-detalle); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.es-campos { display: flex; flex-direction: column; gap: 16px; }
.es-fila-campos { display: flex; flex-wrap: wrap; gap: 16px; }
.es-fila-campos > .es-campo { flex: 1 1 200px; }
.es-caja-punteada { border: 1px dashed var(--es-punteado); border-radius: 12px; background: var(--es-fondo-suave); padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.es-nota-caja { background: var(--es-gris-fondo); border-radius: 10px; padding: 14px 16px; font-size: var(--es-t-detalle); line-height: 1.45; color: var(--es-tinta); }
.es-nota-caja p { margin: 0; }
.es-opciones { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; }
.es-opcion { display: flex; align-items: center; gap: 14px; border: 1px solid var(--es-borde); border-radius: 12px; padding: 14px 16px; cursor: pointer; background: var(--es-fondo); }
.es-opcion--marcada { border: 2px solid var(--es-verde); background: var(--es-verde-fondo); padding: 13px 15px; }
.es-opcion input { flex: none; width: 20px; height: 20px; accent-color: var(--es-verde); }
.es-pildoras { display: flex; flex-wrap: wrap; gap: 10px; }
.es-pildora { font: inherit; font-size: var(--es-t-detalle); font-weight: 600; min-height: var(--es-alto); padding: 8px 18px; border-radius: 999px; border: 1px solid var(--es-borde); color: var(--es-tinta); background: var(--es-fondo); cursor: pointer; }
.es-pildora[aria-pressed="true"] { color: #FFFFFF; background: var(--es-verde); border-color: var(--es-verde); font-weight: 700; }
.es-monto-input { display: flex; align-items: center; background: var(--es-fondo); border: 1px solid var(--es-borde); border-radius: 10px; padding: 0 14px; min-height: 52px; }
.es-monto-input span { font-size: var(--es-t-numero); font-weight: 700; color: var(--es-nota); }
.es-monto-input input { font: inherit; font-size: var(--es-t-numero); font-weight: 700; color: var(--es-tinta); border: 0; outline: none; background: transparent; padding: 10px; min-width: 0; flex: 1 1 auto; }
.es-monto-input:focus-within { outline: 2px solid var(--es-foco); outline-offset: 1px; border-color: var(--es-foco); }
.es-monto-input > input[type="text"] { border: 0; background: transparent; min-height: 0; box-shadow: none; outline: none; }   /* sin la caja del campo común adentro de la caja del monto */
.es-monto-input--bloqueado { background: var(--es-gris-fondo); cursor: not-allowed; }   /* solo lectura: lo calcula el sistema */
.es-monto-input--bloqueado span, .es-monto-input--bloqueado input { color: var(--es-nota); cursor: not-allowed; }
.es-monto-input--bloqueado:focus-within { outline: none; border-color: var(--es-borde); }
.es-ventana--ancha { max-width: 860px; }
.es-ventana-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.es-ventana-cab .es-btn--icono { flex: none; }
.es-ventana-cuerpo { display: flex; flex-direction: column; gap: 22px; }

/* ── una cuenta que se lee de arriba abajo (Resumen, tablero 8; el total de una compra) ── */
.es-cuenta { display: flex; flex-direction: column; border-top: 1px solid var(--es-linea); }
.es-cuenta-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--es-sep); }
.es-cuenta-fila .es-texto { flex: 1 1 240px; }
.es-cuenta-fila--total { padding-bottom: 14px; }
.es-cuenta-fila--total .es-monto { font-size: var(--es-t-numero); }
.es-cuenta-fila--resultado .es-monto { color: var(--es-verde); }
.es-numero--grande { font-size: var(--es-t-pagina); letter-spacing: -0.02em; }
.es-numero--verde { color: var(--es-verde); }

/* ── datos destacados (tarjetas de cifra) ── */
.es-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.es-dato { background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.es-dato--accion { border: 2px solid var(--es-tinta); padding: 17px 19px; }
.es-dato--punteado { border: 1px dashed var(--es-punteado); padding: 17px 19px; }
.es-panel { background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.es-barra { display: flex; height: 10px; background: var(--es-sep); border-radius: 999px; overflow: hidden; }
.es-barra > i { display: block; height: 100%; }
.es-leyenda { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--es-t-detalle); color: var(--es-nota); }
.es-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.es-encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.es-encabezado .es-texto { flex: 1 1 320px; }
.es-lede { margin: 0; font-size: var(--es-t-campo); color: var(--es-nota); }

/* ── menú de secciones (Configuración) ── */
.es-secciones { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 16px; }
.es-seccion-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: inherit; font-size: var(--es-t-detalle); font-weight: 600; text-align: left; min-height: var(--es-alto); padding: 8px 14px; border-radius: 10px; border: 1px solid transparent; color: var(--es-tinta); background: transparent; cursor: pointer; text-decoration: none; }
.es-seccion-link[aria-current="true"] { background: var(--es-fondo); border-color: var(--es-borde); }
.es-seccion-link .es-chip { padding: 2px 10px; }
.es-con-menu { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.es-con-menu > nav { flex: 0 0 220px; }
.es-con-menu > .es-contenido { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }




















/* ── líneas de un comprobante: una fila por cosa que se compró (Finanzas, tablero 2) ── */
.es-lineas { background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 12px; overflow-x: auto; }
.es-lineas-int { min-width: 640px; display: flex; flex-direction: column; }
.es-linea { display: grid; grid-template-columns: minmax(0, 2.4fr) 90px 90px 130px 110px 44px; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--es-sep); }
.es-linea:last-child { border-bottom: 0; }
.es-linea--cab { padding: 12px 16px; border-bottom: 1px solid var(--es-linea); font-size: var(--es-t-etiqueta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--es-rotulo); }
.es-linea--concepto { grid-template-columns: minmax(0, 2fr) 120px 130px auto 44px; }
/* Receta de un tratamiento y filas de un combo. Van DESPUÉS de `.es-linea` y con la doble clase: la regla suelta de antes perdía por orden y la fila caía en la grilla de 6 columnas
   de las líneas de compra (la × quedaba en una columna de 130 px). Columnas fijas, alineadas con el encabezado: el insumo toma el ancho que sobra. */
.es-linea.es-linea--receta { grid-template-columns: minmax(0, 1fr) 190px 120px 44px; }
.es-linea.es-linea--combo { grid-template-columns: minmax(0, 1fr) 130px 44px; }
.es-linea .es-select { min-width: 0; text-overflow: ellipsis; }
.es-cantidad { display: flex; align-items: center; gap: 8px; min-width: 0; }
.es-cantidad .es-input { flex: none; width: 84px; text-align: right; }
.es-cantidad .es-detalle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-linea--receta .es-linea-importe, .es-linea--receta .es-linea-der { text-align: right; }
.es-linea .es-input { min-width: 0; }
.es-linea-importe { font-size: var(--es-t-monto); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.es-linea-nota { font-size: var(--es-t-detalle); color: var(--es-nota); }
.es-casilla { display: inline-flex; align-items: center; gap: 8px; min-height: var(--es-alto); font-size: var(--es-t-detalle); color: var(--es-tinta); white-space: nowrap; }
.es-casilla input { width: 20px; height: 20px; accent-color: var(--es-verde); }
.es-total-caja { border: 1px solid var(--es-linea); border-radius: 12px; overflow: hidden; }
.es-total-caja .es-cuenta-fila { padding: 12px 20px; font-size: var(--es-t-campo); }
.es-total-caja .es-cuenta-fila--final { background: #FAFDFC; padding: 16px 20px; }
.es-total-input { font: inherit; font-size: var(--es-t-numero); font-weight: 700; text-align: right; color: var(--es-tinta); background: var(--es-fondo); border: 1px solid var(--es-borde); border-radius: 10px; padding: 8px 14px; min-height: 52px; width: 220px; max-width: 100%; }

/* ── estados: cargando, vacío y error (apps/shared/estados.js) ── */
.es-estado { display: flex; align-items: center; gap: 12px; padding: 20px; border: 1px dashed var(--es-punteado); border-radius: 12px; background: var(--es-fondo); font-size: var(--es-t-detalle); color: var(--es-nota); }
.es-estado--error { border: 2px solid var(--es-tinta); color: var(--es-tinta); flex-wrap: wrap; }
.es-estado-titulo { margin: 0; font-size: var(--es-t-fila); font-weight: 600; color: var(--es-tinta); }
.es-estado .es-texto { flex: 1 1 240px; }
.es-girando { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--es-linea); border-top-color: var(--es-verde); animation: es-gira 0.8s linear infinite; }
@keyframes es-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .es-girando { animation: none; } }

/* ── 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); }

/* ── barras de reparto: los tonos en orden (verde, verde medio, azul oscuro, pizarra, verde claro) y su punto de leyenda ── */
.es-tono-1 { background: var(--es-verde); }
.es-tono-2 { background: var(--es-verde-medio); }
.es-tono-3 { background: var(--es-tinta); }
.es-tono-4 { background: var(--es-rotulo); }
.es-tono-5 { background: var(--es-verde-borde); }
.es-punto { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; }
.es-leyenda-fila { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.es-leyenda-fila > span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--es-t-detalle); color: var(--es-nota); }
.es-tabla th.sortable-col { cursor: pointer; user-select: none; }
.es-pie-izq { margin-right: auto; }
.es-tarjeta-resumen { display: flex; flex-direction: column; gap: 14px; }
.es-tarjeta-resumen-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; }

/* ── 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-dato-rotulo { min-height: 2.9em; }   /* el rótulo de dos tarjetas lado a lado ocupa lo mismo aunque uno parta en dos renglones: los números quedan alineados */
  .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)::before { content: attr(data-label) ": "; color: var(--es-rotulo); font-weight: 400; }
  .es-tabla:not(.es-tabla--ancha) td:empty { display: none; }
  .es-tabla:not(.es-tabla--ancha) td.es-td-num[data-label] { text-align: left; white-space: normal; font-size: var(--es-t-detalle); }
  .es-tabla:not(.es-tabla--ancha) td.es-td-num:not([data-label]) { grid-column: 2; grid-row: 1 / span 4; align-self: center; white-space: normal; }
  .es-tabla:not(.es-tabla--ancha) td.es-td-num.es-td-acciones { grid-column: 1 / -1; grid-row: auto; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .es-tabla:not(.es-tabla--ancha) td.es-td-num.es-td-acciones .es-btn { flex: 1 1 140px; }
  .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%; }
  .es-con-menu > nav { flex-basis: 100%; }
  .es-lineas-int { min-width: 0; }
  .es-linea { grid-template-columns: minmax(0, 1fr) 44px; }
  .es-linea > * { grid-column: 1 / -1; }
  .es-linea > [data-pl-remove], .es-linea > [data-cl-remove] { grid-column: auto; }
  /* Cargar compra en celular: cada línea es una TARJETA (insumo arriba, cantidad y precio en una fila, importe a la derecha, × arriba a la derecha). */
  .es-lineas { background: transparent; border: 0; overflow: visible; }
  .es-lineas-int { gap: 10px; }
  .es-linea[data-pl-row] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "ins ins x" "cant precio ." "uni imp imp"; gap: 10px; padding: 14px; background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 12px; }
  /* Impuestos y ajustes: la misma tarjeta (concepto + × arriba, signo y monto en una fila, «afecta el costo» abajo). */
  .es-linea--concepto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "con con x" "sig mon mon" "afe afe afe"; gap: 10px; padding: 14px; background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 12px; }
  .es-linea--concepto > [data-cl-label] { grid-area: con; }
  .es-linea--concepto > [data-cl-remove] { grid-area: x; align-self: start; }
  .es-linea--concepto > [data-cl-sign] { grid-area: sig; }
  .es-linea--concepto > [data-cl-amount] { grid-area: mon; }
  .es-linea--concepto > .es-casilla { grid-area: afe; }
  .es-linea[data-pl-row] > [data-pl-query] { grid-area: ins; }
  .es-linea[data-pl-row] > [data-pl-remove] { grid-area: x; align-self: start; }
  .es-linea[data-pl-row] > [data-pl-qty] { grid-area: cant; }
  .es-linea[data-pl-row] > [data-pl-cost] { grid-area: precio; }
  .es-linea[data-pl-row] > [data-pl-unit] { grid-area: uni; align-self: center; }
  .es-linea[data-pl-row] > [data-pl-importe] { grid-area: imp; align-self: center; }
  .es-linea--cab { display: none; }
  .es-opciones.es-opciones--columna { grid-template-columns: 1fr; }   /* tres opciones en celular: una columna, no 2 + 1 */
  /* Receta en celular: una tarjeta por insumo. Arriba el insumo y la × (a la derecha); abajo la cantidad con su unidad y el costo. Nada cortado ni con scroll de costado. */
  .es-linea.es-linea--receta { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 10px 12px; }
  .es-linea--receta > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .es-linea--receta > :nth-child(4) { grid-column: 3; grid-row: 1; }
  .es-linea--receta > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .es-linea--receta > :nth-child(3) { grid-column: 2 / 4; grid-row: 2; text-align: right; }
  /* Combo en celular: el tratamiento y la × arriba; las sesiones abajo. */
  .es-linea.es-linea--combo { grid-template-columns: minmax(0, 1fr) 44px; gap: 10px 12px; }
  .es-linea--combo > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .es-linea--combo > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .es-linea--combo > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .es-linea--combo > .es-linea-ancho { grid-column: 1 / -1; grid-row: 3; }
  .es-secciones { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* ── 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; }

/* ── Presupuestos (rediseño 22/10/2026): tarjetas de resumen, una línea cotizada con su estado y la línea de tiempo de un presupuesto ── */
.es-cartas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.es-cartas .es-carta { gap: 6px; }
.es-linea--cotizada { grid-template-columns: minmax(0, 2fr) auto 130px; }
.es-linea--cotizada .es-monto { text-align: right; }
.es-linea--cotizada.es-linea--sin-chip { grid-template-columns: minmax(0, 2fr) 130px; }   /* una línea sin chip (presupuesto que no avanzó): dos columnas, sin celda vacía */
@media (max-width: 600px) { .es-linea--cotizada { grid-template-columns: minmax(0, 1fr) auto; } .es-linea--cotizada .es-monto { grid-column: 1 / -1; text-align: left; } }
@media (max-width: 600px) { .es-linea--cotizada.es-linea--sin-chip { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .es-cartas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .es-cartas .es-carta { padding: 12px 14px; } .es-linea--cotizada .es-chip { justify-self: start; width: fit-content; } }   /* celular: tarjetas de a dos y el chip del estado no se estira */
.es-linea-tiempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.es-paso-tiempo { position: relative; padding: 0 0 18px 30px; display: flex; flex-direction: column; gap: 2px; }
.es-paso-tiempo p { margin: 0; }
.es-paso-tiempo::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--es-borde); background: var(--es-fondo); box-sizing: border-box; }
.es-paso-tiempo::after { content: ""; position: absolute; left: 6px; top: 24px; bottom: 4px; width: 2px; background: var(--es-sep); }
.es-paso-tiempo:last-child { padding-bottom: 0; }
.es-paso-tiempo:last-child::after { display: none; }
.es-paso-tiempo--hecho::before { background: var(--es-verde); border-color: var(--es-verde); }   /* ya ocurrió: círculo lleno; lo que falta, vacío */

/* ── 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; } }