/* =============================================================================
   CAPTA · escala única de la página del día (Felipe, 21/10/2026 · lienzo, tablero 7 «Caja completa»)
   =============================================================================
   UNA sola escala de tamaños y colores para toda la página del día: lista de turnos, sin turno, Para resolver y Caja del día. Reemplaza los tamaños de los
   tableros 4, 5 y 6 (cada bloque había traído los suyos y la página se veía desproporcionada, con botones de colores distintos).

   REGLA: todo bloque nuevo o modificado de esa página usa estas clases; nada de tamaños ni colores sueltos por bloque (Decisiones §82).
     fila .......... padding 16/20 · nombre 18/600 · detalle 15 · monto 17/700
     número ........ 24/700 (el total) · etiqueta de sección 13 mayúsculas
     botones ....... principal (verde, letra blanca) · secundario (blanco, borde gris) · agregar (punteado) — todos de 44 px
   Contraste 4.5:1 en cada par de colores (escala.test.js).
   ============================================================================= */
: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;
}

/* ── 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-dia { margin: 0; font-family: "DM Sans", system-ui, sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--es-tinta); }
.es-bloque { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; font-family: "DM Sans", system-ui, sans-serif; color: var(--es-tinta); }
.es-bloque p { margin: 0; }
.es-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.es-tachado { text-decoration: line-through; color: var(--es-nota); }
.es-enfasis { font-weight: 700; color: var(--es-tinta); }          /* peso, no color: una nota que importa (título de tarjeta, plan vencido) */
.es-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.es-carta { border: 1px solid var(--es-linea); border-radius: 12px; padding: 14px 20px; display: flex; flex-direction: column; gap: 3px; background: var(--es-fondo); }
.es-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-tinta); outline-offset: 2px; }
.es-btn:disabled { cursor: not-allowed; opacity: .6; }

@media (max-width: 600px) {
  .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; }
}