/* =============================================================================
   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 (regla de la marca, capta-marca DIRECCION_GRAFICA.md §2, Felipe 28/10/2026). Los valores NO se escriben acá: vienen del bloque
   «capta-colores» de abajo, generado desde capta-marca/kit/colores/colores.json (no se edita a mano; `apps/shared/colores.test.js` lo controla).
     base ......... tinta (texto), grises, papel y el verde de la acción principal
     problema ..... rojo: hay plata o salud en juego y alguien tiene que actuar ya (debe plata, cuota o factura vencida, error), y «Anular»/«Eliminar»
     atención ..... ámbar: todavía no es un problema, pero lo va a ser si nadie lo mira; no frena nada (falta registrar, sin pagar, por vencer, sin precio)
     resuelto ..... el mismo verde de la acción: hecho, al día, cobrado
     aviso ........ gris: para leer, o lo que ya no pide nada (vencido, anulado)
     identificación  diez colores para distinguir cosas del mismo tipo (segundo profesional, categorías, series de un gráfico); no significan nada
   El color nunca va solo: siempre con una palabra. Un solo tema, claro.
   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.
   ============================================================================= */
/* capta-colores:start — generado desde capta-marca/kit/colores/colores.json, no editar a mano */
:root {
  /* Capa 1 · Marca */
  --marca-fondo-hondo: #0A1838;
  --marca-navy: #112550;
  --marca-brillo: #1B3470;
  --marca-teal: #2AA8A0;
  --marca-teal-claro: #7FD6CF;
  --marca-texto-sobre-navy: #C9D4E8;
  --marca-blanco: #FFFFFF;
  /* Capa 2 · Base de trabajo */
  --base-tinta: #13202F;
  --base-gris-700: #3D4A5C;
  --base-gris-600: #5A6677;
  --base-gris-400: #8A96A6;
  --base-gris-300: #C5CDD6;
  --base-gris-200: #E3E7EC;
  --base-gris-100: #EEF1F4;
  --base-papel: #F5F7FA;
  --base-blanco: #FFFFFF;
  --base-accion: #1B6F62;
  --base-accion-hover: #155A50;
  /* Capa 3 · Estados */
  --estado-problema-texto: #B42318;
  --estado-problema-fondo: #FEF3F2;
  --estado-problema-borde: #F4C7C3;
  --estado-problema-punto: #D92D20;
  --estado-atencion-texto: #8F5B00;
  --estado-atencion-fondo: #FFF6E5;
  --estado-atencion-borde: #F1D49A;
  --estado-atencion-punto: #E8A317;
  --estado-resuelto-texto: #1B6F62;
  --estado-resuelto-fondo: #E6F4F1;
  --estado-resuelto-borde: #9FD2C8;
  --estado-resuelto-punto: #1B9E86;
  --estado-aviso-texto: #13202F;
  --estado-aviso-fondo: #E8ECF1;
  --estado-aviso-borde: #C5CDD6;
  --estado-aviso-punto: #5A6677;
  /* Capa 4 · Identificación (orden fijo) */
  --id-1-color: #3B5BA8;   /* Índigo */
  --id-1-texto: #3B5BA8;   /* Índigo */
  --id-1-fondo: #E6EAF4;   /* Índigo */
  --id-1-borde: #BAC6E1;   /* Índigo */
  --id-2-color: #2F78B8;   /* Azul */
  --id-2-texto: #29649A;   /* Azul */
  --id-2-fondo: #E4EDF6;   /* Azul */
  --id-2-borde: #B6D0E6;   /* Azul */
  --id-3-color: #1A86A3;   /* Petróleo */
  --id-3-texto: #186F89;   /* Petróleo */
  --id-3-fondo: #E1EFF3;   /* Petróleo */
  --id-3-borde: #AFD5DF;   /* Petróleo */
  --id-4-color: #6E4FB0;   /* Violeta */
  --id-4-texto: #6E4FB0;   /* Violeta */
  --id-4-fondo: #ECE8F5;   /* Violeta */
  --id-4-borde: #CCC1E3;   /* Violeta */
  --id-5-color: #9064C4;   /* Lavanda */
  --id-5-texto: #7455A3;   /* Lavanda */
  --id-5-fondo: #F1EBF7;   /* Lavanda */
  --id-5-borde: #D8C9EA;   /* Lavanda */
  --id-6-color: #9C3F78;   /* Ciruela */
  --id-6-texto: #9C3F78;   /* Ciruela */
  --id-6-fondo: #F2E6ED;   /* Ciruela */
  --id-6-borde: #DCBCD0;   /* Ciruela */
  --id-7-color: #C2577F;   /* Rosa */
  --id-7-texto: #9B4B6D;   /* Rosa */
  --id-7-fondo: #F7E9EE;   /* Rosa */
  --id-7-borde: #EAC4D2;   /* Rosa */
  --id-8-color: #A0603A;   /* Terracota */
  --id-8-texto: #8A5638;   /* Terracota */
  --id-8-fondo: #F3EAE5;   /* Terracota */
  --id-8-borde: #DEC7BA;   /* Terracota */
  --id-9-color: #8C7A4E;   /* Arena */
  --id-9-texto: #716647;   /* Arena */
  --id-9-fondo: #F0EEE8;   /* Arena */
  --id-9-borde: #D7D0C1;   /* Arena */
  --id-10-color: #4A5878;   /* Pizarra */
  --id-10-texto: #4A5878;   /* Pizarra */
  --id-10-fondo: #E7E9ED;   /* Pizarra */
  --id-10-borde: #C0C5D0;   /* Pizarra */
  /* Superficie y sombras */
  --marca-degrade: linear-gradient(120deg, #0A1838 0%, #112550 60%, #1B3470 100%);
  --rgb-tinta: 19, 32, 47;
}
/* capta-colores:end */
:root {
  --es-tinta: var(--base-tinta);        /* texto principal */
  --es-nota: var(--base-gris-700);      /* detalle, hora */
  --es-rotulo: var(--base-gris-600);    /* etiqueta de sección */
  --es-verde: var(--base-accion);       /* acción principal y «resuelto» */
  --es-borde: var(--base-gris-300);     /* borde del botón secundario */
  --es-linea: var(--base-gris-200);     /* borde de las listas y tarjetas */
  --es-sep: var(--base-gris-100);       /* separador entre filas */
  --es-punteado: var(--base-gris-400);  /* borde del botón de agregar */
  --es-fondo: var(--base-blanco);
  --es-fondo-suave: var(--base-papel);  /* encabezado de grupo, fila al pasar el mouse */
  --es-alto: 44px;
  --es-foco: var(--es-verde);           /* el FOCO va en verde */
  --es-verde-fondo: var(--estado-resuelto-fondo); --es-verde-borde: var(--estado-resuelto-borde);   /* combo / usado / hecho */
  /* Estados (capta-marca §2.1, Felipe 28/10/2026) */
  --es-problema: var(--estado-problema-texto); --es-problema-fondo: var(--estado-problema-fondo); --es-problema-borde: var(--estado-problema-borde); --es-problema-punto: var(--estado-problema-punto);
  --es-atencion: var(--estado-atencion-texto); --es-atencion-fondo: var(--estado-atencion-fondo); --es-atencion-borde: var(--estado-atencion-borde); --es-atencion-punto: var(--estado-atencion-punto);
  --es-aviso-fondo: var(--estado-aviso-fondo); --es-aviso-borde: var(--estado-aviso-borde);
  /* El segundo profesional: Índigo, el primer color de identificación (reemplaza al azul viejo) */
  --es-azul: var(--id-1-texto); --es-azul-fondo: var(--id-1-fondo); --es-azul-borde: var(--id-1-borde);
  --es-gris-azul: var(--base-gris-400);   /* lo secundario de un gráfico y las mini barras */
  --es-verde-medio: var(--estado-resuelto-borde);
  --es-accion-fondo: var(--es-aviso-fondo);   /* fila de cuenta destacada */
  --es-gris-fondo: var(--base-papel);         /* anulado, fondo de página (un solo papel) */
  /* La C de Clara: el teal del isotipo de CAPTA y su tono claro (estela y chispas); el gris, SOLO sin conexión. Son de la marca, no colores de pantalla:
     no se usan para texto, botones ni estados del sistema. */
  --es-marca: var(--marca-teal); --es-marca-claro: var(--marca-teal-claro); --es-marca-gris: var(--base-gris-400); --es-marca-gris-claro: var(--base-gris-300);
  /* El fondo de la C: el navy de la marca (noche = recuadros y base · claro y honda = los dos extremos del degradé). Solo para el fondo de la C. */
  --es-marca-noche: var(--marca-navy); --es-marca-noche-claro: var(--marca-brillo); --es-marca-noche-honda: var(--marca-fondo-hondo);
  --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); box-shadow: inset 4px 0 0 var(--es-atencion-punto); }   /* lo que falta registrar: barra ámbar a la izquierda (atención) */
.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: var(--base-gris-200); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }   /* neutra: informa, no pide nada */
.es-item--resolver { border: 2px solid var(--es-atencion-borde); }   /* lo que hay que resolver: borde de atención… */
.es-item--resolver.es-item--problema { border-color: var(--es-problema-borde); }   /* …y de problema si adentro hay plata vencida o adeudada */
.es-item--anulado { background: var(--es-gris-fondo); 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: var(--base-blanco); 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 (Índigo) */
.es-chip--atencion, .es-chip--accion { color: var(--es-atencion); background: var(--es-atencion-fondo); box-shadow: inset 0 0 0 1px var(--es-atencion-borde); }   /* atención: falta algo, todavía no es un problema (`--accion` es el nombre viejo) */
.es-chip--problema { color: var(--es-problema); background: var(--es-problema-fondo); box-shadow: inset 0 0 0 1px var(--es-problema-borde); }   /* problema: plata o salud en juego */
.es-chip--anulado { color: var(--es-nota); background: var(--es-gris-fondo); border: 1px dashed var(--es-punteado); }

/* ── el cuarto botón: Anular y Eliminar (rojo de problema) ── */
.es-btn--anular { color: var(--es-problema); background: var(--es-fondo); border-color: var(--es-problema-borde); }   /* en el detalle: con borde y sin relleno */
.es-btn--anular-lleno { color: var(--base-blanco); background: var(--es-problema); border-color: var(--es-problema); }       /* dentro de la ventana de confirmación: lleno, 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-problema); }   /* error: borde rojo y el texto que dice qué falta */
.es-error { margin: 0; font-size: var(--es-t-detalle); font-weight: 600; color: var(--es-problema); }
.es-texto-problema { color: var(--es-problema); font-weight: 700; }   /* dentro de un texto: lo que está vencido o se debe («Debe $ …», «venció el …») */
.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; }
/* Solo la casilla o el botón de opción mide 20 px (MOD-75, 03-11-2026): con «input» a secas alcanzaba también al casillero de texto «%» de Listas de precio, que quedaba de 20 px y no se veía el número. */
.es-opcion input[type="radio"], .es-opcion input[type="checkbox"] { 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: var(--base-blanco); 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-color: var(--es-borde); }   /* un dato que importa, sin alarma (Debés en total) */
.es-dato--atencion { border: 2px solid var(--es-atencion-borde); background: var(--es-atencion-fondo); padding: 17px 19px; }
.es-dato--problema { border: 2px solid var(--es-problema-borde); background: var(--es-problema-fondo); 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: var(--es-fondo-suave); 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-problema-borde); background: var(--es-problema-fondo); color: var(--es-problema); 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: un recuadro de fondo claro con borde fino del mismo color, sin degradados (estados de capta-marca §2).
   verde suave = plan / combo / todo bien · ámbar suave = atención · rojo suave = problema · gris suave = neutro o $0. El texto va en tinta o nota (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--atencion, .es-suave--accion { background: var(--es-atencion-fondo); border-color: var(--es-atencion-borde); }   /* `--accion` es el nombre viejo */
.es-suave--problema { background: var(--es-problema-fondo); border-color: var(--es-problema-borde); }
.es-suave--neutro { background: var(--es-gris-fondo); border-color: var(--es-borde); }

/* ── barras de reparto: los colores de IDENTIFICACIÓN en orden (Índigo, Azul, Petróleo, Violeta, Lavanda) y su punto de leyenda.
   La categoría N usa el tono N en la barra y el chip --cat-N en la lista: el mismo color en los dos lugares. ── */
.es-tono-1 { background: var(--id-1-color); }
.es-tono-2 { background: var(--id-2-color); }
.es-tono-3 { background: var(--id-3-color); }
.es-tono-4 { background: var(--id-4-color); }
.es-tono-5 { background: var(--id-5-color); }
.es-tono-fijos { background: var(--id-1-color); }      /* gráficos de Finanzas: gastos fijos */
.es-tono-insumos { background: var(--base-gris-400); }  /* insumos y otros gastos; también lo que vence más adelante */
.es-tono-vencido { background: var(--es-problema-punto); }   /* ya venció (problema) */
.es-tono-perdio { background: var(--es-tinta); }            /* el mes que se perdió plata (con rayas): un dato, no una alarma */
.es-tono-encamino { background: var(--es-verde-borde); }    /* plata que todavía no acreditó */
.es-tono-entro, .es-tono-quedo { background: var(--es-verde); }        /* verde = lo que entró / te quedó */
.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-modulo-accion { margin-left: auto; align-self: center; }   /* el botón opcional de `accion` (Caja: «Ver el video de Caja»), a la derecha */
.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; }
/* El número al lado de una pestaña (MOD-53/55, Felipe 27/10/2026: «se ve muy grande y está muy pegado»): la pestaña es inline-flex y se come el espacio entre el texto y el chip; va separado y con la letra de etiqueta. */
.es-tab .es-chip { margin-left: 8px; font-size: var(--es-t-etiqueta); line-height: 1; padding: 4px 8px; min-width: 22px; justify-content: center; }

/* ── «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: var(--base-blanco); 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; } }

/* ── Finanzas · gráficos del Resumen (etapa 2) ─────────────────────────────────────────────────────────────────────────────── */
.es-barra--alta { height: 18px; }
.es-barra--chica { height: 6px; }
.es-leyenda-fila--monto > span { color: var(--es-tinta); }
.es-leyenda-fila--monto b { font-weight: 700; font-variant-numeric: tabular-nums; }
.es-columnas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.es-col { font: inherit; color: var(--es-tinta); background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 6px 2px; min-height: var(--es-alto); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.es-col:focus-visible { outline: 2px solid var(--es-foco); outline-offset: 2px; }
.es-col--actual { border-color: var(--es-borde); background: var(--es-fondo-suave); }
.es-col-monto { font-size: var(--es-t-etiqueta); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.es-col-barra { width: 100%; max-width: 44px; height: 140px; display: flex; align-items: flex-end; }
.es-col-barra > i { display: block; width: 100%; border-radius: 6px 6px 2px 2px; }
.es-col-barra--vacia { border-bottom: 2px dashed var(--es-punteado); }
.es-col-barra { position: relative; border-bottom: 2px solid var(--es-linea); }   /* la base de las barras es la línea de cero */
.es-col-barra--cero { border-bottom: 0; }
.es-col-barra--cero::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; background: var(--es-rotulo); }   /* línea de cero: arriba lo que ganaste, abajo lo que perdiste */
.es-col-barra--cero > i { position: absolute; left: 0; }
.es-col-barra--cero > .es-sube { bottom: 50%; border-radius: 6px 6px 0 0; }
.es-col-barra--cero > .es-baja { top: 50%; border-radius: 0 0 6px 6px; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0 4px, transparent 4px 8px); }   /* pérdida: oscuro con rayas */
.es-col-barra--cero.es-col-barra--vacia { border-bottom: 0; }
.es-col-mes { font-size: var(--es-t-etiqueta); font-weight: 600; color: var(--es-nota); text-transform: capitalize; }
.es-col-nota { font-size: var(--es-t-etiqueta); color: var(--es-rotulo); }
.es-flechas { display: flex; gap: 8px; }
.es-btn[disabled] { opacity: 0.4; cursor: default; }
.es-numero--verde { color: var(--es-verde); }
@media (max-width: 520px) { .es-columnas { gap: 4px; } .es-col-barra { height: 110px; } }
.es-chip--cat-1 { background: var(--id-1-fondo); color: var(--id-1-texto); }   /* categoría: identificación N, el nombre siempre escrito; mismo color que su tono en el gráfico */
.es-chip--cat-2 { background: var(--id-2-fondo); color: var(--id-2-texto); }
.es-chip--cat-3 { background: var(--id-3-fondo); color: var(--id-3-texto); }
.es-chip--cat-4 { background: var(--id-4-fondo); color: var(--id-4-texto); }
.es-chip--cat-5 { background: var(--id-5-fondo); color: var(--id-5-texto); }
.es-mini-barra { display: block; height: 6px; margin-top: 6px; background: var(--es-sep); border-radius: 999px; overflow: hidden; }
.es-mini-barra > i { display: block; height: 100%; background: var(--es-gris-azul); border-radius: 999px; }
.es-acciones-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Finanzas · línea de tiempo de vencimientos (Deudas) y tarjetas de factura */
.es-cronologia { position: relative; height: 150px; margin: 8px 12px 0; }
.es-cronologia::before { content: ""; position: absolute; left: 0; right: 0; bottom: 34px; height: 3px; background: var(--es-linea); border-radius: 999px; }
.es-linea-punto { position: absolute; width: 44px; height: 44px; min-height: 44px; margin-left: -22px; padding: 0; border: 0; background: transparent; cursor: pointer; }   /* el área de toque mide 44; el punto es el ::before */
.es-linea-punto::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 2px solid var(--es-fondo); background: var(--es-gris-azul); }
.es-linea-punto--vencida::before { background: var(--es-problema-punto); }
.es-linea-punto--semana::before { background: var(--es-fondo); border-color: var(--es-atencion-punto); }
.es-linea-punto:focus-visible { outline: 2px solid var(--es-foco); outline-offset: -2px; border-radius: 50%; }
.es-linea-marca { position: absolute; bottom: 0; transform: translateX(-50%); font-size: var(--es-t-etiqueta); color: var(--es-rotulo); white-space: nowrap; }
.es-linea-marca:first-of-type { transform: none; }
.es-linea-marca:last-of-type { transform: translateX(-100%); }
.es-facturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.es-factura { font: inherit; text-align: left; color: var(--es-tinta); background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 12px; padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: var(--es-alto); }
.es-factura--vencida { border: 2px solid var(--es-problema-borde); background: var(--es-problema-fondo); padding: 13px 15px; }
.es-factura--vencida .es-detalle:last-child { color: var(--es-problema); font-weight: 600; }   /* «Venció el …» */
.es-factura--semana { background: var(--es-atencion-fondo); border-color: var(--es-atencion-borde); }
.es-factura:focus-visible { outline: 2px solid var(--es-foco); outline-offset: 2px; }
/* Configuración · medio de cobro como tarjeta con tres números */
.es-medios { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.es-medio { background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.es-medio--apagado { background: var(--es-gris-fondo); border-style: dashed; border-color: var(--es-punteado); }
.es-medio-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.es-medio-cab .es-texto { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }   /* un nombre largo parte en renglones y no pisa el «Activo» */
.es-medio-cab .es-chequeo { flex: none; }
.es-tres { align-items: start; }
.es-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.es-tres > div { display: flex; flex-direction: column; gap: 2px; }
.es-tres .es-numero { font-size: var(--es-t-fila); }
.es-medio-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }