/* ═══════════════════════════════════════════════════════════════════════════════
   calendario.css — GEMELO VANILLA de `Calendario` — v1.0 · 2026-08-24

   FUENTE ÚNICA: `catalogo-cd/components/Calendario.jsx` ·
   Ficha: `design-system/COMPONENTE_CALENDARIO.md` v1.1.
   Cada regla de aquí es la MISMA de allí, con las MISMAS medidas. Si difieren, manda el kit.

   Elige un INTERVALO de fechas para filtrar filas — no es selector de fecha única, ni
   calendario de eventos, ni la tabla de amortización (ésa es `.amort-drawer`, otra pieza).
   Chips de atajo (Hoy · Ayer · Últimos 7 días · Este mes · Mes pasado), dos meses lado a lado
   en escritorio y UNO en móvil, extremos del rango con esquinas MIXTAS (inicio redondo por
   fuera y recto por dentro; fin al revés) y un punto de "hay datos" en esmeralda.

   ⚠ MONTA `Button` (`componentes/button/button.css`) para el CTA del pie — no lo redibuja.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. El gemelo de `componentes/button/` montado en el CTA «Aplicar».
   ═══════════════════════════════════════════════════════════════════════════════ */

.exds-cal {
  width: var(--w-calendario, 568px);
  max-width: 100%;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  border-radius: var(--radius-container, 12px);
  box-shadow: var(--shadow-md, 0 4px 12px -2px rgba(15, 20, 25, 0.06));
  padding: 14px;
}

.exds-cal-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.exds-cal-chip {
  border: 1px solid var(--color-border-default, #D1D5DB);
  background: var(--color-surface, #FFFFFF);
  color: var(--fg2, #4B5563);
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 500;
  font-size: var(--fs-caption, 12px);
  padding: 5px 10px;
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  transition: background var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1)),
              color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1)),
              border-color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-cal-chip[data-on="true"] {
  border-color: var(--color-action-ink, #21272C);
  background: var(--color-action-ink, #21272C);
  color: var(--fg-inverse, #FFFFFF);
}

.exds-cal-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}

.exds-cal-nav {
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm, 6px);
  color: var(--fg2, #4B5563);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.exds-cal-nav:hover {
  background: var(--color-bg-subtle, #F2F4F6);
  color: var(--fg1, #0F1419);
}

.exds-cal-month-label {
  flex: 1;
  text-align: center;
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 600;
  font-size: var(--fs-body, 14px);
  color: var(--fg1, #0F1419);
  text-transform: capitalize;
}

.exds-cal-grid {
  display: flex;
  gap: 20px;
}

.exds-cal-month {
  flex: 1;
  min-width: 0;
}

.exds-cal-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.exds-cal-dow {
  text-align: center;
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-size: var(--fs-eyebrow, 11px);
  font-weight: 600;
  color: var(--fg3, #5C6B7A);
  padding: 4px 0;
}

.exds-cal-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}

.exds-cal-cell {
  position: relative;
  height: 34px;
  border: 0;
  padding: 0;
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 500;
  font-size: var(--fs-body-sm, 13px);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--fg1, #0F1419);
  transition: background var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1)),
              color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-cal-day:hover {
  background: var(--color-bg-subtle, #F2F4F6) !important;
}
/* Día dentro del rango, sin ser extremo: fondo plano, esquinas rectas — lee como una sola pieza. */
.exds-cal-cell[data-in-range="true"] {
  background: var(--color-bg-subtle, #F2F4F6);
  border-radius: 0;
}
/* Extremos del rango (o selección de un solo día): fondo ink, texto invertido, sin hover. */
.exds-cal-cell[data-extreme="true"] {
  background: var(--color-action-ink, #21272C);
  color: var(--fg-inverse, #FFFFFF);
}
/* Esquinas MIXTAS del intervalo: el inicio redondo por fuera y recto por dentro; el fin al revés.
   La selección de un solo día ("single") NO lleva `data-shape`: su radio es el mismo que el de
   una celda sin seleccionar — el respaldo de `.exds-cal-cell` ya lo da. */
.exds-cal-cell[data-shape="start"] {
  border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px);
}
.exds-cal-cell[data-shape="end"] {
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
}

/* Punto de «hay datos»: OSCURO NEUTRO — el mismo --color-action-ink del día inicio/fin — a 4px.
   Ricardo, 2026-08-24 (segunda corrección del mismo día): ver COMPONENTE_CALENDARIO.md. */
.exds-cal-dot {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-action-ink, #21272C);
}
.exds-cal-cell[data-extreme="true"] .exds-cal-dot {
  background: var(--fg-inverse, #FFFFFF);
}

.exds-cal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-subtle, #E5E7EB);
}

.exds-cal-range-label {
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-size: var(--fs-body-sm, 13px);
  color: var(--fg2, #4B5563);
  font-variant-numeric: tabular-nums;
}

/* Cuando el segundo mes se esconde, la CAJA encoge a su token de un mes. Antes sólo desaparecía
   el mes y la caja se quedaba a 568: un mes solo flotando en el doble de sitio (corregido 2026-08-12,
   ver la ficha). */
@media (max-width: 639px) {
  .exds-cal-m2 { display: none !important; }
  .exds-cal    { width: var(--w-calendario-mes, 296px) !important; }
}
@media (pointer: coarse) {
  .exds-cal-grid button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .exds-cal * { transition: none !important; animation: none !important; }
}