@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Lato:wght@300;400;700&display=swap');

/* ── Widget contenedor ── */
.sarota-widget {
    font-family: 'Lato', sans-serif;
    max-width: 1040px;
    margin: 0 auto;
    background: #fdfcf8;
    border: 1px solid #e8e0d0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(60,40,20,0.10);
}

/* ── Navegación exterior ── */
.sarota-cal-nav {
    display: flex;
    align-items: flex-start;
    gap: 0;
    background: #fdfcf8;
    padding: 16px 12px 0;
}

.sarota-nav-btn {
    flex-shrink: 0;
    background: #2c2416;
    border: none;
    color: #f5efe0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sarota-nav-btn:hover:not(:disabled) { background: #c0943a; }
.sarota-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Wrap de los dos meses ── */
.sarota-months-wrap {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 300px;
    transition: opacity 0.2s;
}
.sarota-months-wrap.sarota-loading { opacity: 0.5; pointer-events: none; }

/* ── Un mes ── */
.sarota-month {
    padding: 0 10px 16px;
}
.sarota-month + .sarota-month {
    border-left: 1px solid #e8e0d0;
}

/* ── Cabecera del mes ── */
.sarota-month-header {
    text-align: center;
    padding: 8px 0 12px;
}
.sarota-month-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #2c2416;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ── Días de la semana ── */
.sarota-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}
.sarota-weekdays span {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b0a090;
    padding: 4px 0;
}

/* ── Grid de días ── */
.sarota-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.sarota-day {
    background: #fdfcf8;
    border-radius: 7px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.15s ease;
    min-height: 44px;
    user-select: none;
    cursor: default;
}
.sarota-day.blank { background: transparent; }

.day-num {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    color: #2c2416;
}
.day-price {
    font-size: 0.6rem;
    color: #9a8a6a;
    margin-top: 2px;
    font-weight: 400;
}

/* ── Estados ── */
.sarota-day.available { cursor: pointer; }
.sarota-day.available:hover {
    background: #f0dfc0;
    transform: scale(1.06);
    z-index: 1;
    box-shadow: 0 2px 10px rgba(60,40,20,0.12);
}
.sarota-day.booked {
    background: #f2ede6;
    opacity: 0.45;
}
.sarota-day.booked .day-num {
    color: #b8a898;
    text-decoration: line-through;
    text-decoration-color: #c8b090;
}
.sarota-day.past {
    opacity: 0.25;
}
.sarota-day.past .day-num { color: #c0b8a8; }

.sarota-day.selected {
    background: #2c2416 !important;
    transform: scale(1.06);
    z-index: 2;
    box-shadow: 0 3px 12px rgba(44,36,22,0.28);
}
.sarota-day.selected .day-num  { color: #f5efe0; }
.sarota-day.selected .day-price { color: rgba(245,239,224,0.55); }

/* ── Leyenda ── */
.sarota-legend {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 10px 12px 16px;
    border-top: 1px solid #f0e8d8;
    background: #fdfcf8;
}
.leg-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    color: #8a7a60;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.leg-dot {
    width: 10px; height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}
.leg-dot.available { background: #fdfcf8; border: 2px solid #c0a870; }
.leg-dot.booked    { background: #f2ede6; border: 2px solid #c0b8a8; opacity:.5; }
.leg-dot.selected  { background: #2c2416; }

/* ── Panel selección ── */
.sarota-selection {
    background: #2c2416;
    color: #f5efe0;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.sarota-sel-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
#sarota-sel-text {
    font-size: 0.83rem;
    color: rgba(245,239,224,0.75);
}
.sarota-sel-price {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    color: #f5efe0;
}
.sarota-btn-reservar {
    background: #c0943a;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.83rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.sarota-btn-reservar:hover:not(:disabled) { background: #a07828; }
.sarota-btn-reservar:disabled { background: #7a6a50; cursor: not-allowed; }

/* ── Formulario ── */
.sarota-form-wrap {
    padding: 24px;
    background: #fdfcf8;
    border-top: 1px solid #e8e0d0;
}
.sarota-form-wrap h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: #2c2416;
    margin: 0 0 18px;
}
.sarota-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.sarota-field { display: flex; flex-direction: column; gap: 5px; }
.sarota-field-full { grid-column: 1 / -1; }
.sarota-field label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a7a60;
}
.sarota-field input,
.sarota-field select,
.sarota-field textarea {
    border: 1.5px solid #e0d8c8;
    border-radius: 8px;
    padding: 9px 12px;
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    color: #2c2416;
    background: #fff;
    transition: border-color 0.2s;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.sarota-field input:focus,
.sarota-field select:focus,
.sarota-field textarea:focus { border-color: #c0943a; }

.sarota-form-resumen {
    background: #f5f0e8;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
}
.sarota-res-row { font-size: 0.85rem; color: #5a4a30; display: flex; gap: 6px; }
.sarota-res-row span { color: #8a7a60; }
.sarota-res-row strong { color: #2c2416; }
.sarota-cleaning { grid-column: 1/-1; font-size:.8rem; opacity:.7; }

.sarota-disclaimer {
    font-size: 0.77rem;
    color: #8a7a60;
    line-height: 1.5;
    margin: 0 0 16px;
    padding: 10px;
    border-left: 3px solid #c0943a;
    background: #fdf8f0;
    border-radius: 0 6px 6px 0;
}
.sarota-form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}
.sarota-btn-primary {
    background: #2c2416;
    color: #f5efe0;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s;
}
.sarota-btn-primary:hover:not(:disabled) { background: #c0943a; }
.sarota-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.sarota-btn-secondary {
    background: none;
    border: 1.5px solid #e0d8c8;
    color: #8a7a60;
    padding: 11px 16px;
    border-radius: 8px;
    font-family: 'Lato', sans-serif;
    font-size: 0.83rem;
    cursor: pointer;
    transition: all 0.2s;
}
.sarota-btn-secondary:hover { border-color: #c0943a; color: #c0943a; }

.sarota-form-msg {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.5;
}
.sarota-form-msg.success { background: #eaf4e8; color: #2a6628; border: 1px solid #b8ddb6; }
.sarota-form-msg.error   { background: #fdf0ee; color: #8b2010; border: 1px solid #e8b8b0; }

/* ── Responsive: móvil solo un mes ── */
@media (max-width: 640px) {
    .sarota-widget { border-radius: 10px; }

    .sarota-months-wrap {
        grid-template-columns: 1fr;
    }
    /* En móvil ocultamos el segundo mes */
    .sarota-months-wrap .sarota-month:nth-child(2) {
        display: none;
    }

    .sarota-day { min-height: 38px; }
    .day-price  { display: none; }

    .sarota-form-grid      { grid-template-columns: 1fr; }
    .sarota-form-resumen   { grid-template-columns: 1fr; }
    .sarota-form-actions   { flex-direction: column; }
    .sarota-btn-primary,
    .sarota-btn-secondary  { width: 100%; text-align: center; }
    .sarota-selection      { flex-direction: column; align-items: flex-start; }
    .sarota-legend         { gap: 12px; }
    .leg-item              { font-size: 0.65rem; }
}

@media (min-width: 641px) and (max-width: 860px) {
    .sarota-day { min-height: 40px; }
    .day-price  { font-size: 0.58rem; }
}