/* ════════════════════════════════════════════════════════════════════════
   El calendario desplegable de las fechas (calendario.js). Solo variables de la
   apariencia (tokens.css y los bloques de Blue Manager y Silver de estilos.css), para que
   valga en Light, Night, Midnight, Silver y Blue Manager sin color fijo propio.
   Radios: 12 px la caja, 8 px los días.
   ════════════════════════════════════════════════════════════════════════ */
.cal{
  --cal-acento:var(--gl-boton);
  --cal-acento-tinta:var(--gl-boton-tinta);
  --cal-marca:var(--gl-marca, var(--gl-boton));
  --cal-hover:var(--sf-fila-hover, var(--panel2));
  --cal-finde:color-mix(in srgb, var(--ink) 3.5%, transparent);
  --cal-sombra:0 1px 2px rgba(0,0,0,.06), 0 18px 44px -16px rgba(0,0,0,.30);
  position:fixed; z-index:1100; top:0; left:0; box-sizing:border-box; width:292px; padding:10px 12px 8px;
  background:var(--elev, var(--panel)); color:var(--ink); border:1px solid var(--line2); border-radius:12px;
  box-shadow:var(--cal-sombra); font-size:13px; line-height:1.2; font-variant-numeric:tabular-nums;
  -webkit-user-select:none; user-select:none; outline:none; text-align:left;
}
:root:not([data-sf-theme="day"]) .cal{
  --cal-finde:rgba(255,255,255,.025);
  --cal-hover:rgba(255,255,255,.06);
  --cal-sombra:0 1px 2px rgba(0,0,0,.35), 0 22px 48px -14px rgba(0,0,0,.65);
}
.cal *, .cal *::before, .cal *::after{ box-sizing:border-box; }

/* Los botones de dentro no son los botones de la aplicación. */
.cal button{
  -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; justify-content:center;
  margin:0; padding:0; min-height:0; min-width:0; width:auto; height:auto; border:0; border-radius:8px;
  background:none; box-shadow:none; color:inherit; font:inherit; font-weight:500; letter-spacing:normal;
  text-transform:none; cursor:pointer; transition:background-color .12s, color .12s, box-shadow .12s;
}
.cal button:hover{ background:var(--cal-hover); border-color:transparent; }
.cal button:disabled{ opacity:.35; cursor:default; background:none; }
.cal button:focus-visible{ outline:2px solid var(--cal-marca); outline-offset:1px; border-radius:8px; }
.cal svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* La cabecera: ‹ Mes año ▾ › */
.cal-cab{ display:flex; align-items:center; gap:4px; margin:0 0 6px; }
.cal .cal-nav{ width:32px; height:32px; flex:0 0 32px; color:var(--muted); }
.cal .cal-nav:hover{ color:var(--ink); }
.cal .cal-titulo{ flex:1 1 auto; height:32px; gap:5px; padding:0 8px; font-size:14px; font-weight:650; color:var(--gl-titulo, var(--ink)); }
.cal .cal-titulo svg{ width:13px; height:13px; color:var(--muted); }
.cal-titulo .cal-anio{ font-weight:500; color:var(--muted); }
.cal-titulo .cal-mes + .cal-anio{ margin-left:1px; }

/* Los días. */
.cal-rejilla{ display:flex; flex-direction:column; gap:2px; }
.cal-sem, .cal-fila{ display:grid; grid-template-columns:repeat(7, 36px); gap:2px; justify-content:space-between; }
.cal-sem{ margin:0 0 2px; padding:0 0 6px; border-bottom:1px solid var(--line); }
.cal-ds{ display:flex; align-items:center; justify-content:center; height:22px; font-size:11px; font-weight:650;
  letter-spacing:.04em; color:var(--muted); cursor:default; }
.cal-ds.cal-finde{ color:var(--muted2, var(--muted)); }
.cal .cal-dia{ position:relative; width:36px; height:34px; font-size:13px; font-weight:500; color:var(--ink); }
.cal .cal-dia.cal-finde{ background:var(--cal-finde); }
.cal .cal-dia.cal-finde:hover{ background:var(--cal-hover); }
.cal .cal-dia.cal-otro{ color:var(--muted2, var(--muted)); opacity:.55; font-weight:400; }
/* Hoy: un filo y un punto, sin rellenar. */
.cal .cal-dia.cal-hoy{ box-shadow:inset 0 0 0 1px var(--cal-marca); font-weight:700; color:var(--cal-marca); }
.cal .cal-dia.cal-hoy::after{ content:""; position:absolute; left:50%; bottom:4px; width:4px; height:4px; margin-left:-2px;
  border-radius:50%; background:currentColor; }
/* La elegida: rellena con el color del botón principal de la apariencia. */
.cal .cal-dia.cal-sel, .cal .cal-dia.cal-sel:hover{ background:var(--gl-boton-fondo, var(--cal-acento)); color:var(--cal-acento-tinta);
  font-weight:700; opacity:1; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.cal .cal-dia.cal-sel.cal-hoy{ box-shadow:0 1px 2px rgba(0,0,0,.18), inset 0 0 0 2px var(--elev, var(--panel)); }
.cal .cal-dia.cal-sel:hover{ filter:brightness(1.06); }
/* Fuera de min/max: tachado suave, no se elige. */
.cal .cal-dia.cal-no, .cal .cal-opc.cal-no{ color:var(--disabled, var(--muted)); opacity:.4; cursor:not-allowed; background:none;
  text-decoration:line-through; text-decoration-color:color-mix(in srgb, currentColor 55%, transparent); }
.cal .cal-dia.cal-no:hover, .cal .cal-opc.cal-no:hover{ background:none; }

/* Meses y años: 3 × 4. */
.cal-opciones{ display:flex; flex-direction:column; gap:6px; padding:4px 0 2px; }
.cal-fila3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.cal .cal-opc{ height:46px; font-size:13px; font-weight:550; color:var(--ink); border:1px solid transparent; }
.cal .cal-opc.cal-hoy{ border-color:var(--cal-marca); color:var(--cal-marca); font-weight:700; }
.cal .cal-opc.cal-sel, .cal .cal-opc.cal-sel:hover{ background:var(--gl-boton-fondo, var(--cal-acento)); color:var(--cal-acento-tinta); border-color:transparent; font-weight:700; }

/* El pie: Hoy · fecha elegida · Borrar. */
.cal-pie{ display:flex; align-items:center; gap:6px; margin:8px -12px 0; padding:8px 12px 0; border-top:1px solid var(--line); }
.cal .cal-pie-b{ height:28px; padding:0 10px; font-size:12.5px; font-weight:600; color:var(--cal-marca); }
.cal .cal-borrar{ color:var(--muted); }
.cal .cal-borrar:hover{ color:var(--bad, #c0392b); }
.cal-elegida{ flex:1 1 auto; text-align:center; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal .cal-listo{ display:none; }

/* Al abrirse. */
.cal.cal-abre{ animation:cal-entra .14s ease-out; transform-origin:top left; }
.cal.cal-abre[data-lado="arriba"]{ transform-origin:bottom left; }
@keyframes cal-entra{ from{ opacity:0; transform:translateY(-4px) scale(.98); } to{ opacity:1; transform:none; } }
.cal.cal-abre[data-lado="arriba"]{ animation-name:cal-entra-arriba; }
@keyframes cal-entra-arriba{ from{ opacity:0; transform:translateY(4px) scale(.98); } to{ opacity:1; transform:none; } }

/* Blue Manager: el azul #1c5dbf para la elegida y el marino #173a6c para hoy y la cabecera. */
:root[data-tema="bm"] .cal{
  --cal-acento:#1c5dbf; --cal-acento-tinta:#FFFFFF; --cal-marca:#1c5dbf;
  --cal-hover:rgba(28,93,191,.07); --cal-finde:rgba(23,58,108,.035);
  --cal-sombra:0 4px 12px rgba(11,15,25,.07), 0 18px 40px -14px rgba(11,15,25,.22);
  border-color:var(--line2);
}
:root[data-tema="bm"] .cal .cal-titulo{ color:#173a6c; }
:root[data-tema="bm"] .cal .cal-dia.cal-hoy{ color:#173a6c; box-shadow:inset 0 0 0 1px #173a6c; }
:root[data-tema="bm"] .cal .cal-opc.cal-hoy{ color:#173a6c; border-color:#173a6c; }
:root[data-tema="bm"] .cal .cal-dia.cal-sel, :root[data-tema="bm"] .cal .cal-opc.cal-sel{ background:#1c5dbf; color:#FFFFFF; }
:root[data-tema="bm"] .cal .cal-dia.cal-sel.cal-hoy{ background:#173a6c; }

/* Silver: grises, sin sombra pesada, el azul del sistema solo en la elegida. */
:root[data-tema="silver"] .cal{
  --cal-hover:rgba(0,0,0,.045); --cal-finde:rgba(0,0,0,.022);
  --cal-sombra:0 0 0 .5px rgba(0,0,0,.08), 0 10px 30px -8px rgba(0,0,0,.18);
  border-color:transparent;
}
:root[data-tema="silver"] .cal .cal-dia.cal-hoy{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--muted2, var(--muted)); }
:root[data-tema="silver"] .cal .cal-opc.cal-hoy{ color:var(--ink); border-color:var(--muted2, var(--muted)); }
:root[data-tema="silver"] .cal .cal-pie-b{ color:var(--gl-boton); }

/* El icono de la casilla, en el color de cada apariencia (estilos.css lo deja en el azul de Blue Manager),
   y sin abrir la ventanita del navegador: el clic cae en la casilla y abre la nuestra. */
html.cal-activo input[type=date]::-webkit-calendar-picker-indicator{ pointer-events:none; background-color:var(--gl-boton); }
html.cal-activo input[type=date]:hover::-webkit-calendar-picker-indicator{ background-color:var(--gl-boton-hover, var(--gl-boton)); }
html.cal-activo input[type=date]{ cursor:pointer; }
html.cal-activo input[type=date]:disabled, html.cal-activo input[type=date]:read-only{ cursor:default; }
html.cal-activo input[type=date][data-calendario="no"]::-webkit-calendar-picker-indicator{ pointer-events:auto; }

/* En el móvil, una hoja desde abajo con su velo. */
.cal-velo{ position:fixed; inset:0; z-index:1099; background:rgba(8,12,20,0); transition:background .2s; }
.cal-velo.abierto{ background:rgba(8,12,20,.38); }
.cal.cal-hoja{ top:auto !important; left:0 !important; right:0; bottom:0; width:100%; max-width:none;
  padding:6px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius:16px 16px 0 0; border-width:1px 0 0;
  box-shadow:0 -12px 36px -10px rgba(0,0,0,.35); animation:cal-sube .22s cubic-bezier(.2,.8,.2,1); font-size:15px; }
@keyframes cal-sube{ from{ transform:translateY(100%); } to{ transform:none; } }
.cal-asa{ width:38px; height:4px; margin:2px auto 10px; border-radius:2px; background:var(--line2); }
.cal-hoja .cal-cab{ margin-bottom:10px; }
.cal-hoja .cal-nav{ width:44px; height:44px; flex-basis:44px; }
.cal-hoja .cal-titulo{ height:44px; font-size:16px; }
.cal-hoja .cal-sem, .cal-hoja .cal-fila{ grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.cal-hoja .cal-rejilla{ gap:4px; }
.cal-hoja .cal-ds{ height:26px; font-size:12px; }
.cal-hoja .cal-dia{ width:auto; height:44px; font-size:15px; }
.cal-hoja .cal-opc{ height:54px; font-size:15px; }
.cal-hoja .cal-pie{ margin:12px -16px 0; padding:10px 16px 0; }
.cal-hoja .cal-pie-b{ height:40px; padding:0 14px; font-size:14px; }
.cal-hoja .cal-listo{ display:inline-flex; color:var(--ink); }
.cal-hoja .cal-elegida{ font-size:13px; }

@media (prefers-reduced-motion: reduce){
  .cal.cal-abre, .cal.cal-hoja{ animation:none; }
  .cal-velo{ transition:none; }
}