/**
 * assets/css/datepicker.css — Sussanich Turismo
 * Datepicker propio (vanilla, sin dependencias). Estilo on-brand.
 * Se inicializa sobre inputs `.js-datepicker` (ver assets/js/datepicker.js).
 */

.dp {
    position: relative;
    width: 100%;
}

/* Input: ícono de calendario + separador (border-left simulado con gradient).
   `.dp .js-datepicker` sube especificidad para ganarle al `background` shorthand
   de viajes.css/excursiones.css (que si no, borra el background-image del ícono). */
.dp .js-datepicker {
    cursor: pointer;
    background-image:
        url('../../4-Excursiones-Individual/sussanich-icon-calendario.svg'),
        linear-gradient(var(--color-border), var(--color-border));
    background-repeat: no-repeat, no-repeat;
    background-position: right 14px center, right 50px center;
    background-size: 24px 24px, 1px 60%;
    padding-right: 64px;
}

/* Popup */
.dp__pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;              /* = ancho del input padre */
    box-sizing: border-box;
    background: var(--color-surface-card, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,0.12));
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    padding: 14px;
    z-index: 50;
    font-family: var(--font-body);
    user-select: none;
}
.dp__pop[hidden] { display: none; }

/* Cabecera: mes + navegación */
.dp__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.dp__title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--fw-bold);
    color: var(--color-text-primary);
    text-transform: capitalize;
}
.dp__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: var(--radius-circle, 50%);
    color: var(--color-text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dp__nav:hover { background: rgba(0,0,0,0.05); color: var(--color-primary); }
.dp__nav:disabled { opacity: 0.3; cursor: default; }
.dp__nav:disabled:hover { background: transparent; color: var(--color-text-secondary); }

/* Grilla */
.dp__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.dp__wd {
    text-align: center;
    font-size: 11px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: 4px 0;
}
.dp__day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dp__day:hover { background: rgba(242,140,31,0.12); }
.dp__day.is-empty { background: transparent; cursor: default; }
.dp__day.is-disabled {
    color: var(--color-text-muted);
    opacity: 0.45;
    cursor: default;
}
.dp__day.is-disabled:hover { background: transparent; }
.dp__day.is-today {
    box-shadow: inset 0 0 0 1px var(--color-primary);
}
.dp__day.is-selected,
.dp__day.is-selected:hover {
    background: var(--color-primary);
    color: #fff;
    font-weight: var(--fw-bold);
}

/* Pie: acciones */
.dp__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.dp__action {
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    cursor: pointer;
    padding: 2px 4px;
}
.dp__action:hover { text-decoration: underline; }