/*
 * Sherpatur Calendar — Frontend
 * Los colores/fuentes se inyectan dinámicamente desde el admin
 * como CSS custom properties en el selector .sherpatur-calendar-wrapper.
 * Los fallbacks aquí solo actúan si por algún motivo no se inyectaran.
 */

.sherpatur-calendar-wrapper {
    font-family: var(--sh-font-body, sans-serif);
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background: var(--sh-bg, #FFFFFF);
    border: 1px solid var(--sh-border, #E5E5E5);
    box-sizing: border-box;
}
.sherpatur-calendar-wrapper *,
.sherpatur-calendar-wrapper *::before,
.sherpatur-calendar-wrapper *::after { box-sizing: border-box; }

.sherpatur-calendars {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
}
.sherpatur-calendar {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
}
.sherpatur-calendar-header {
    text-align: center;
    font-family: var(--sh-font-heading, serif);
    font-weight: 700;
    padding: 15px;
    background-color: var(--sh-header-bg, #1A1A1A);
    color: var(--sh-header-color, #FFFFFF);
    text-transform: lowercase;
    font-size: 1rem;
}
.sherpatur-calendar-header::first-letter { text-transform: uppercase; }

.sherpatur-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #FFFFFF;
    border: 1px solid var(--sh-border, #E5E5E5);
    border-top: none;
}
.sherpatur-grid div {
    padding: 12px 0;
    text-align: center;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--sh-day-border, #F0F0F0);
}
.sherpatur-day-name {
    font-weight: bold;
    color: var(--sh-day-name, #999999);
    background: #FFFFFF;
    font-size: 0.75rem !important;
}
.sherpatur-day.occupied {
    background-color: var(--sh-occupied-bg, #F5F5F5);
    color: var(--sh-occupied-color, #B0B0B0);
    text-decoration: line-through;
    opacity: 0.7;
}
.sherpatur-day.available {
    background-color: var(--sh-available-bg, rgba(26,26,26,0.08));
    color: var(--sh-available-color, #1A1A1A);
    font-weight: 600;
}
.sherpatur-nav {
    display: flex;
    justify-content: center;
    margin-top: 25px;
    gap: 10px;
}
.sherpatur-nav button {
    flex: 1;
    padding: 15px;
    cursor: pointer;
    background-color: var(--sh-btn-bg, #1A1A1A);
    color: var(--sh-btn-color, #FFFFFF);
    border: none;
    border-radius: 0;
    font-weight: bold;
    text-transform: capitalize;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    max-width: 200px;
    outline: none;
    -webkit-appearance: none;
    font-family: var(--sh-font-body, sans-serif);
}
.sherpatur-nav button:hover {
    background-color: var(--sh-btn-hover, #4A4A4A) !important;
    color: var(--sh-btn-color, #FFFFFF) !important;
}
.sherpatur-nav button:focus,
.sherpatur-nav button:active,
.sherpatur-nav button:focus-visible {
    background-color: var(--sh-btn-bg, #1A1A1A) !important;
    color: var(--sh-btn-color, #FFFFFF) !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
.sherpatur-legend {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--sh-legend-color, #666666);
}
.sherpatur-legend-item { display: flex; align-items: center; gap: 8px; }
.sherpatur-box { width: 14px; height: 14px; border-radius: 0; }
.sherpatur-box-occupied { background-color: var(--sh-occupied-bg, #F5F5F5); border: 1px solid var(--sh-occupied-color, #B0B0B0); }
.sherpatur-box-available { background-color: var(--sh-available-bg, rgba(26,26,26,0.08)); border: 1px solid var(--sh-available-color, #1A1A1A); }

@media (max-width: 650px) {
    .sherpatur-calendars { flex-direction: column; align-items: center; }
    .sherpatur-calendar:nth-child(n+2) { display: none; }
    .sherpatur-calendar { width: 100%; max-width: none; }
    .sherpatur-nav button { max-width: none; }
}