/* ═══════════════════════════════════════
   ▓ PATRÓN · CalendarioCuadre — gemelo vanilla ▓
   v1.2 · 2026-09-28. Ficha: `design-system/PATRON_CALENDARIO_CUADRE.md`

   Un mes, un vistazo, un día por celda — la vista Calendario del Cuadre de Conciliación.

   ⛔ B3 (Ricardo, 2026-09-28 · opción A de `plans/decisiones/_decision_calendario_dia_2026-09-28.html`):
   la celda ya no lleva un `Dot` — es «la pastilla de estado del catálogo, entera, hecha celda»:
   fondo de tinte, contorno de su familia y el número/cifra en la tinta fuerte (`-deep`). El
   vocabulario de `data-tono` es el de `componentes/badge/` (`success`/`warning`/`error`/`neutral`),
   NO el de `componentes/dot/` — se retiró esa dependencia: la celda ya no compone `Dot`, reusa
   los TOKENS de la pastilla tint (REGLA DURA 4 · `gate_mecanismo_significado.js`: qué tono le
   toca a "Cuadra"/"No cuadra"/etc. lo decide el MÓDULO que monta, no este archivo).
   ⛔ Resuelto por Ricardo el mismo día: "Cuadra" es VERDE (`success`) — y B4 se aprobó: el
   estado que antes era "No medido" · gris pasa a llamarse **"No se pudo medir"** · ÁMBAR
   (`warning`, contorno punteado), y SÓLO cubre una falla real (sin corrida o el banco en
   silencio). Fin de semana, día inhábil bancario y el día de hoy dejan de ser un estado de la
   familia: son INERTES, sin tono, igual que un día futuro. `familias_etiquetas.json ›
   conciliacion › dia` ya lo refleja.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. La hoja de `componentes/estados/` YA CARGADA (Skeleton/EmptyState de cargando/error).
   ═══════════════════════════════════════ */

.exds-calc-wrap { position: relative; }

.exds-calc-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  flex-wrap: wrap;
  margin-bottom: var(--space-4, 16px);
}
.exds-calc-titulo {
  margin: 0;
  font: 600 var(--fs-h4, 16px) var(--font-sans, Inter, sans-serif);
  color: var(--fg1, #0F1419);
}
.exds-calc-leyenda { display: flex; gap: var(--space-5, 20px); flex-wrap: wrap; }
.exds-calc-leyenda-item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--fs-body-sm, 13px);
  color: var(--fg2, #4B5563);
}
/* R1 (COMPONENTE_TIPOGRAFIA.md): máximo negro + UN gris — la leyenda entera va en el mismo
   gris que su etiqueta (`exds-calc-leyenda-item`), sin un segundo color para el número
   (auditoría de ojos frescos 2026-09-28: eran 3 grises — fg2/fg3/fg4 — contra el tope de 1). */
.exds-calc-leyenda-n { color: var(--fg2, #4B5563); font-variant-numeric: tabular-nums; }

/* La muestra de la leyenda — invento ② de la hoja de decisión: sustituye al `Dot`, misma
   receta tint que la celda del día (§ abajo), a 16px con el radio de un control pequeño. */
.exds-calc-leyenda-muestra {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  background: var(--color-bg-subtle, #F2F4F6);
}

.exds-calc-semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1-5, 6px);
  margin-bottom: var(--space-1-5, 6px);
}
/* Mismo gris que el resto de la pieza (R1) — antes fg3, un tercer gris sin más razón que
   «es la fila de encabezado». */
.exds-calc-semana span { text-align: center; font-size: var(--fs-caption, 12px); color: var(--fg2, #4B5563); }

.exds-calc-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1-5, 6px);
}

.exds-calc-dia {
  visibility: visible;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  height: 64px;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--space-2, 8px) var(--space-2, 8px) var(--space-1-5, 6px);
  text-align: left;
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  font-family: var(--font-sans, Inter, sans-serif);
  overflow: hidden;
  transition: border-color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1)),
              box-shadow var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-calc-dia[data-oculta="true"] { visibility: hidden; }

/* ── Relleno de tinte, por tono — la misma receta que `.exds-badge[data-variant="tint"]`
   (fondo = tint · texto = deep · contorno = stroke). El tono lo trae quien monta. ── */
.exds-calc-dia[data-tono="success"] {
  background: var(--color-success-tint, #E7FEF6);
  border-color: var(--color-success-stroke, #5CD9A9);
}
/* La celda ENMARCA su propio texto con fondo+contorno (arriba) — la misma forma que
   `.exds-badge`, que decisión 26 (Ricardo, 2026-09-14) ya exime. B3 (Ricardo, 2026-09-28)
   aprobó explícitamente este par tint/deep para la celda; `lint_tokens.js` aún no trae
   `.exds-calc-dia` en su lista cerrada `PIEZAS_ENMARCAN_TEXTO_VERDE` (ampliarla es decisión
   de Ricardo) — mientras tanto: LINT-ALLOW: #038157 · celda con fondo/contorno propios, B3 */
.exds-calc-dia[data-tono="success"] .exds-calc-dia-num, .exds-calc-dia[data-tono="success"] .exds-calc-dia-cifra { color: var(--color-success-deep, #038157); }

.exds-calc-dia[data-tono="error"] {
  background: var(--color-error-tint, #FEE8E7);
  border-color: var(--color-error-stroke, #ED9F9B);
}
.exds-calc-dia[data-tono="error"] .exds-calc-dia-num,
.exds-calc-dia[data-tono="error"] .exds-calc-dia-cifra { color: var(--color-error-deep, #D61005); }

.exds-calc-dia[data-tono="warning"] {
  background: var(--color-warning-tint, #FEF6EE);
  border-color: var(--color-warning-stroke, #E2B483);
}
.exds-calc-dia[data-tono="warning"] .exds-calc-dia-num,
.exds-calc-dia[data-tono="warning"] .exds-calc-dia-cifra { color: var(--color-warning-deep, #B05B00); }

.exds-calc-dia[data-tono="neutral"] {
  background: var(--color-bg-subtle, #F2F4F6);
  border-color: var(--color-notice-stroke, rgba(110, 115, 120, 0.22));
}
.exds-calc-dia[data-tono="neutral"] .exds-calc-dia-num,
.exds-calc-dia[data-tono="neutral"] .exds-calc-dia-cifra { color: var(--fg2, #4B5563); }

/* «No se pudo medir» (B4, aprobada 2026-09-28) — SÓLO el estilo del contorno (punteado); el
   COLOR lo sigue poniendo el tono activo (`data-tono="warning"` → `--color-warning-stroke`).
   Sin tono, cae al `--color-border-subtle` por defecto de `.exds-calc-dia`. */
.exds-calc-dia[data-no-medido="true"] { border-style: dashed; }

.exds-calc-leyenda-muestra[data-tono="success"] { background: var(--color-success-tint, #E7FEF6); border-color: var(--color-success-stroke, #5CD9A9); }
.exds-calc-leyenda-muestra[data-tono="error"] { background: var(--color-error-tint, #FEE8E7); border-color: var(--color-error-stroke, #ED9F9B); }
.exds-calc-leyenda-muestra[data-tono="warning"] { background: var(--color-warning-tint, #FEF6EE); border-color: var(--color-warning-stroke, #E2B483); }
.exds-calc-leyenda-muestra[data-tono="neutral"] { background: var(--color-bg-subtle, #F2F4F6); border-color: var(--color-notice-stroke, rgba(110, 115, 120, 0.22)); }
/* Auditoría de ojos frescos 2026-09-28: la muestra de «No se pudo medir» llevaba el mismo
   contorno SÓLIDO que cualquier otro tono — B3/B4 dibuja esa celda con contorno PUNTEADO.
   Mismo mecanismo que la celda (`data-no-medido="true"` → `border-style: dashed`). */
.exds-calc-leyenda-muestra[data-no-medido="true"] { border-style: dashed; }

/* Hover — sólo sombra; el borde de cada tono ya dice el estado y no se le encima un segundo
   cambio (Opción A de la hoja de decisión: «el borde no cambia»). */
.exds-calc-dia:hover { box-shadow: var(--shadow-card-hover, 0 1px 2px rgba(15, 20, 25, 0.12)); }

/* ── Seleccionado — SIN relleno sólido (Ricardo, 2026-09-28, corrige la versión anterior
   de este mismo día): «No me gusta que el estado activo de los días de cuadre estén en
   sólido. Es demasiado ruido en pantalla.» · «Opción A · recomendada. El seleccionado
   conserva su fondo claro. El borde que ya tiene, del mismo grosor, pasa al color fuerte de
   su estado. En "No se pudo medir" sigue punteado.» (visual
   `plans/decisiones/_decision_dia_seleccionado_2026-09-28.html`, opción A).
   `aria-current="true"` sigue siendo el vocabulario de `pantalla-lista` para «la fila cuyo
   cajón está abierto»; aquí marca el día cuyo cajón está abierto. SIN `outline` (regla dura
   6 sigue en pie: el catálogo no traza un aro). El fondo NO cambia (sigue el `-tint` del
   tono, de la regla de reposo) y el texto NO cambia (ya es `-deep` en reposo) — lo ÚNICO que
   cambia es el `border-color`, al `-deep` de su familia, MISMO GROSOR (1px). Un día inerte
   no se selecciona (está `disabled`). */
.exds-calc-dia[aria-current="true"] { outline: none; }
.exds-calc-dia[data-tono="success"][aria-current="true"] { border-color: var(--color-success-deep, #038157); }
.exds-calc-dia[data-tono="error"][aria-current="true"] { border-color: var(--color-error-deep, #D61005); }
.exds-calc-dia[data-tono="warning"][aria-current="true"] { border-color: var(--color-warning-deep, #B05B00); }
.exds-calc-dia[data-tono="neutral"][aria-current="true"] { border-color: var(--color-notice-deep, #21272C); }

/* ── Foco de teclado — la línea gris del SISTEMA, no el -deep del tono (Ricardo, 2026-09-28,
   mismo hilo). GATE-ALLOW: desviación deliberada de `colors_and_type.css:1367` («foco …
   estado semántico → su variante -deep»): aquí el foco usa `--color-border-focus` (gris) EN
   VEZ del `-deep` del tono, a propósito, para que un día con foco de teclado NO se confunda
   visualmente con un día seleccionado (`aria-current`, arriba) — los dos ya no pueden
   compartir la misma señal ahora que "seleccionado" también pinta el borde de color. Mismo
   grosor (1px), sin anillo añadido. */
.exds-calc-dia:focus-visible {
  outline: none;
  border-color: var(--color-border-focus, #6E7378);
}
.exds-calc-dia:disabled { cursor: default; }

.exds-calc-dia-num { font-size: var(--fs-body-sm, 13px); font-weight: var(--fw-semibold, 600); color: var(--fg1, #0F1419); }
.exds-calc-dia[data-inerte="true"] .exds-calc-dia-num { color: var(--fg4, #B8BDC7); }
.exds-calc-dia-fila { display: flex; align-items: center; gap: var(--space-1, 4px); }
.exds-calc-dia-cifra {
  align-self: flex-end;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption, 12px);
  color: var(--fg2, #4B5563);
}

@media (prefers-reduced-motion: reduce) {
  .exds-calc-dia { transition: none !important; }
}