/* ──────────────────────────────────────────────────────────────────────────────
   Calendario del sistema — js/fecha_sistema.js y js/calendario_multiselect.js
   ──────────────────────────────────────────────────────────────────────────────
   El calendario que abre `<input type="date">` lo dibuja el navegador y no admite
   estilos, así que cada campo de fecha se reemplaza por este selector propio. Las
   mismas clases (`as-cal*`) las usa el calendario de varios días de Novedades,
   de modo que todos los calendarios del sistema se ven igual.

   Los campos de fecha reutilizan el botón del selector (`as-sel`, `as-sel-btn`):
   mismo alto, borde y foco que un select. Prefijo `as-cal` / `as-fecha`.
   ────────────────────────────────────────────────────────────────────────────── */

/* El <input type="date"> real queda oculto en el DOM y sigue guardando el valor. */
input.as-fecha-nativo {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.as-fecha .as-sel-btn .bi-calendar3 {
    flex-shrink: 0;
    font-size: .95rem;
    color: #64748b;
}

.as-fecha .as-sel-btn:hover .bi-calendar3,
.as-fecha .as-sel-btn[aria-expanded="true"] .bi-calendar3 { color: #0253ac; }

/* ── Panel flotante ─────────────────────────────────────────────────────── */
.as-fecha-panel {
    position: fixed;
    z-index: 5000;
    padding: 6px;
    background: #fff;
    border: 1px solid #e8edf2;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 40, 80, .18);
    /* Solo opacidad: no se pisa ningún `transform` de posicionamiento. */
    animation: as-cal-aparece .16s ease both;
}

/* ── Calendario (compartido) ────────────────────────────────────────────── */
.as-cal {
    width: 300px;
    padding: 8px;
    color: #1e293b;
    user-select: none;
}

.as-cal-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
}

.as-cal-nav,
.as-cal-titulo {
    border: 0;
    background: transparent;
    color: #475569;
    transition: background .12s ease, color .12s ease;
}

.as-cal-nav {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: .85rem;
}

.as-cal-titulo {
    flex: 1;
    height: 32px;
    border-radius: 8px;
    font-size: .92rem;
    font-weight: 700;
    color: #1e293b;
    text-transform: capitalize;
}

.as-cal-nav:hover:not(:disabled),
.as-cal-titulo:hover {
    background: rgba(2, 83, 172, .08);
    color: #0253ac;
}

.as-cal-nav:disabled { opacity: .3; cursor: not-allowed; }

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

.as-cal-semana span {
    padding: 6px 0;
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.as-cal-dia {
    height: 38px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-size: .85rem;
    color: #1e293b;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.as-cal-dia:hover:not(:disabled):not(.is-sel) { background: rgba(2, 83, 172, .08); color: #0253ac; }
.as-cal-dia.is-fuera { color: #b0bac6; }
.as-cal-dia.is-hoy { border-color: #0253ac; color: #0253ac; font-weight: 700; }

.as-cal-dia.is-sel {
    background: #0253ac;
    border-color: #0253ac;
    color: #fff;
    font-weight: 700;
}

.as-cal-dia:disabled { opacity: .3; cursor: not-allowed; }
.as-cal-dia:focus-visible,
.as-cal-celda:focus-visible,
.as-cal-nav:focus-visible,
.as-cal-titulo:focus-visible,
.as-cal-link:focus-visible { outline: 0; box-shadow: var(--as-foco, 0 0 0 4px rgba(2, 83, 172, .12)); }

/* Vistas de mes y de año */
.as-cal-rejilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 4px 0 2px;
}

.as-cal-celda {
    height: 52px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-size: .88rem;
    color: #1e293b;
    text-transform: capitalize;
    transition: background .12s ease, color .12s ease;
}

.as-cal-celda:hover:not(:disabled):not(.is-sel) { background: rgba(2, 83, 172, .08); color: #0253ac; }
.as-cal-celda.is-hoy { border-color: #0253ac; color: #0253ac; font-weight: 700; }
.as-cal-celda.is-sel { background: #0253ac; color: #fff; font-weight: 700; }
.as-cal-celda:disabled { opacity: .3; cursor: not-allowed; }

/* Pie: acciones de texto */
.as-cal-pie {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eef1f5;
}

.as-cal-link {
    padding: 4px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: .82rem;
    font-weight: 700;
    color: #0253ac;
}

.as-cal-link:hover:not(:disabled) { background: rgba(2, 83, 172, .08); }
.as-cal-link:disabled { opacity: .35; cursor: not-allowed; }

/* ── Calendario de varios días (Novedades): sin panel, dentro del formulario ── */
.as-cal-incrustado {
    width: 100%;
    max-width: 340px;
    padding: 10px;
    border: 1px solid var(--as-borde, #d9e2ec);
    border-radius: 12px;
    background: #fff;
}

.as-cal-resumen {
    margin-top: 8px;
    font-size: .78rem;
    color: #64748b;
}

@keyframes as-cal-aparece {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .as-fecha-panel { animation: none; }
    .as-cal-dia, .as-cal-celda, .as-cal-nav, .as-cal-titulo { transition: none; }
}

@media (max-width: 360px) {
    .as-cal { width: calc(100vw - 40px); }
}