/* =============================================================
   Calendarios que se ven como la casa

   Archivo propio por lo mismo que desplegable.css: lo usan DOS sitios
   —el HUB y el Cotizador, que es una página completa del mismo dominio
   con su propia hoja de estilos—. Duplicar estas reglas garantizaba que
   un día se arreglara una y no la otra.

   Sólo usa tokens, ningún color escrito a mano, así que cada sitio lo
   pinta con los suyos. Los que hacen falta:
     --c-surface --c-border --c-hover --c-suave --c-text --radius-sm
     --cap --cap-ui --cap-soft --cap-dark
   ============================================================= */

/* El input nativo sigue ahí con su valor: es lo que leen los
   formularios. No se usa `display:none` a propósito —un campo escondido
   así deja de enviarse— sino la misma técnica que los desplegables. */
.fecha-oculto{
  /* Mismo recaudo que el <select> escondido: `width:0` no alcanza
     porque el navegador le da un ancho mínimo propio al campo de fecha,
     y ese ancho seguía empujando el contenedor —en el modal de declarar
     un gasto salía una barra de scroll horizontal—. Anclado arriba a la
     izquierda y recortado no ocupa nada, y se sigue enviando con el
     formulario, que es la razón de no usar `display:none`. */
  position:absolute;left:0;top:0;width:1px;height:1px;
  padding:0;border:0;margin:0;overflow:hidden;clip-path:inset(50%);
  opacity:0;pointer-events:none;
}

.fecha-btn{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;justify-content:space-between;gap:8px;
  text-align:left;cursor:pointer;font:inherit;color:inherit;
  background-color:var(--c-surface);
  border:1px solid var(--c-border);border-radius:var(--radius-sm);
  padding:9px 11px;width:100%;max-width:100%;
}
/* Un almanaque dibujado con bordes, para no depender de una fuente de
   iconos ni de un emoji que cada sistema pinta distinto. */
.fecha-btn::after{
  content:'';flex:none;width:13px;height:13px;
  border:1.5px solid currentColor;border-radius:3px;
  border-top-width:4px;opacity:.5;
}
.fecha-btn:hover{border-color:var(--cap-ui)}
.fecha-btn.abierto{border-color:var(--cap-ui)}
.fecha-btn:focus-visible{outline:2px solid var(--cap-ui);outline-offset:1px}
.fecha-btn.fecha-vacia{color:var(--c-suave)}
.fecha-btn[disabled]{opacity:.55;cursor:default}

.fecha-panel{
  position:fixed;z-index:210;width:268px;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius-sm);box-shadow:0 12px 32px rgba(7,9,13,.16);
  padding:10px;
}

.fecha-cab{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  margin-bottom:8px;
}
.fecha-cab b{
  font-family:var(--font-title);font-size:14px;font-weight:700;
  letter-spacing:-.01em;
}
.fecha-cab button{
  border:1px solid transparent;background:none;color:var(--c-muted);
  width:26px;height:26px;border-radius:7px;font-size:17px;line-height:1;
  cursor:pointer;
}
.fecha-cab button:hover{background:var(--c-hover);color:var(--c-text)}

/* El mes y el año son botones, y se ven como tales al pasar por encima.
   Antes eran un <b>: para ir a marzo del año siguiente había que
   apretar la flecha seis veces, aunque el título ya pareciera apretable
   —lo parece porque debería serlo—. */
.fecha-titulo{display:flex;align-items:center;gap:4px}
.fecha-cab .fecha-titulo button{
  width:auto;padding:0 8px;color:var(--c-text);
  font-family:var(--font-title);font-size:14px;font-weight:700;
  letter-spacing:-.01em;
}
.fecha-cab .fecha-titulo button:hover{background:var(--c-hover);color:var(--cap-dark)}

/* UN ALTO Y UNO SOLO.
   El cuerpo mide lo mismo con los días, con los meses o con los años, y
   dentro de los días mide lo mismo un mes de cuatro semanas que uno de
   seis. Sin esto el panel crecía y se encogía al navegar: la grilla se
   movía debajo del cursor y el clic siguiente caía en otro día. */
.fecha-cuerpo{min-height:218px;display:flex;flex-direction:column}

.fecha-dias,.fecha-grilla{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
}

/* Las doce casillas ocupan el mismo cajón que las seis semanas. */
.fecha-lista{
  flex:1;display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:1fr;gap:3px;
}
.fecha-lista button{
  border:1px solid transparent;background:none;color:var(--c-text);
  border-radius:8px;font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;font-variant-numeric:tabular-nums;
}
.fecha-lista button:hover:not([disabled]){background:var(--c-hover)}
.fecha-lista button.elegido{
  background:var(--cap-ui);border-color:var(--cap-ui);color:#fff;
}
.fecha-lista button[disabled]{color:var(--c-suave);opacity:.4;cursor:default}
.fecha-dias span{
  text-align:center;font-size:9.5px;font-weight:700;
  letter-spacing:.06em;color:var(--c-suave);padding-bottom:4px;
}
.fecha-grilla button{
  border:1px solid transparent;background:none;color:var(--c-text);
  height:32px;border-radius:8px;font:inherit;font-size:13px;
  cursor:pointer;font-variant-numeric:tabular-nums;
}
.fecha-grilla button:hover:not([disabled]){background:var(--c-hover)}
/* Los días del mes anterior y del siguiente, que están para que el alto
   no cambie: en gris, porque son del vecino, y elegibles, porque elegir
   el 1º del mes que viene a fin de mes es la mitad de las veces. */
.fecha-grilla button.fuera{color:var(--c-suave);opacity:.5}
/* Hoy va marcado con el borde y no con relleno: el relleno es del día
   elegido, y si los dos gritaran igual no se sabría cuál es cuál. */
.fecha-grilla button.hoy{border-color:var(--cap);font-weight:700}
.fecha-grilla button.elegido{
  background:var(--cap-ui);border-color:var(--cap-ui);color:#fff;font-weight:700;
}
.fecha-grilla button[disabled]{color:var(--c-suave);opacity:.4;cursor:default}
/* EL RANGO (16/10): los dos extremos van como el día elegido y los del
   medio con el tono suave, para que se lea de un vistazo cuánto dura. */
.fecha-grilla button.en-rango{background:var(--cap-soft);color:var(--cap-dark)}
.fecha-guia{
  font-size:11px;color:var(--c-muted);text-align:center;margin:-2px 0 6px;
}

.fecha-pie{
  display:flex;gap:6px;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--c-border);
}
.fecha-pie button{
  flex:1;border:1px solid var(--c-border);background:none;
  color:var(--c-muted);border-radius:99px;padding:5px 10px;
  font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;
}
.fecha-pie button:hover{border-color:var(--cap-ui);color:var(--cap-dark)}