/* ═══════ Selector de fecha ═══════
   Usa las variables de tema de styles.css, asi que sirve igual en claro y oscuro. */

/* Se oculta el icono nativo del navegador: el calendario lo pone el nuestro.
   El input sigue siendo type="date" (su .value no cambia de formato). */
input[type="date"]::-webkit-calendar-picker-indicator{ display:none; -webkit-appearance:none; }
input[type="date"]::-webkit-inner-spin-button{ display:none; }
input[type="date"]{ position:relative; cursor:pointer; }

.fePop{
  position:fixed; z-index:9999; width:272px; padding:10px;
  background:var(--panel); color:var(--texto);
  border:1px solid var(--borde); border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.22);
  font-size:12.5px; user-select:none;
  animation:feAparece .12s ease-out;
}
@keyframes feAparece{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* ── cabecera: ‹ mes de año › ── */
.feCab{ display:flex; align-items:center; gap:4px; margin-bottom:8px; }
.feNav{
  border:none; background:transparent; color:var(--texto2); cursor:pointer;
  font-size:18px; line-height:1; padding:3px 9px; border-radius:8px;
}
.feNav:hover{ background:color-mix(in srgb,var(--gris) 20%,transparent); color:var(--texto); }
.feMes{
  flex:1; border:none; background:transparent; color:var(--texto); cursor:pointer;
  font-size:13px; font-weight:600; padding:4px 8px; border-radius:8px; text-align:center;
}
.feMes:hover{ background:color-mix(in srgb,var(--gris) 16%,transparent); }

/* ── encabezado de dias ── */
.feSem{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px; }
.feSem span{ text-align:center; font-size:10.5px; font-weight:600; color:var(--gris); padding:4px 0; }

/* ── rejilla de dias ── */
.feRejilla{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.feDia{
  border:none; background:transparent; color:var(--texto); cursor:pointer;
  height:32px; border-radius:9px; font-size:12.5px; font-variant-numeric:tabular-nums;
  transition:background-color .12s ease;
}
.feDia:hover:not(.veta){ background:color-mix(in srgb,var(--azul) 16%,transparent); }
.feDia.fuera{ color:var(--gris); opacity:.55; }          /* dias del mes vecino */
.feDia.hoy{ font-weight:700; color:var(--azul); }
.feDia.sel{                                               /* el circulo oscuro de la referencia */
  background:var(--navy,#0F172A); color:#fff; font-weight:700;
}
.feDia.sel:hover{ background:var(--navy,#0F172A); }
.feDia.veta{ opacity:.3; cursor:not-allowed; }            /* fuera del min/max del campo */

/* ── pie ── */
.fePie{ display:flex; gap:6px; margin-top:8px; padding-top:8px; border-top:1px solid var(--borde); }
.feAcc{
  flex:1; border:1px solid var(--borde); background:transparent; color:var(--texto2);
  cursor:pointer; font-size:11.5px; font-weight:600; padding:6px 0; border-radius:8px;
}
.feAcc:hover{ background:color-mix(in srgb,var(--azul) 12%,transparent); color:var(--texto); }

/* ── salto rapido de mes ── */
.feMeses{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.feMesIt{
  border:none; background:transparent; color:var(--texto); cursor:pointer;
  padding:10px 0; border-radius:9px; font-size:12px; text-transform:capitalize;
}
.feMesIt:hover{ background:color-mix(in srgb,var(--azul) 14%,transparent); }
.feMesIt.sel{ background:var(--navy,#0F172A); color:#fff; font-weight:700; }