/* Módulo 11 · Citas · aspecto Hierbicas (sobre base, theme y app.css). */

/* Selector de profesional */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
    min-height: 40px;
    padding: 6px 14px;
    font: inherit;
    font-weight: 700;
    color: var(--color-text);
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    cursor: pointer;
}
.chip[aria-pressed="true"] {
    background-color: var(--button-bg);
    background-image: var(--wood-image);
    border-color: var(--button-border);
}

.agenda-card .card-title { margin-bottom: 4px; }

/* Huecos */
.day-card .card-title { font-size: 1.05rem; }
.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 8px;
}
.slot-grid .slot { min-height: 44px; padding: 6px 2px; font-size: 1rem; }

/* Mis citas */
.appt-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 10px;
    display: grid;
    gap: 6px;
    justify-items: start;
}
.appt-card h3 { font-size: 1rem; }
.appt-card.is-past { background: #fbfbf8; }
.notes-box {
    width: 100%;
    border-left: 4px solid var(--button-bg);
    background: var(--info-bg);
    padding: 8px 10px;
    border-radius: 6px;
}
#myPastBox { margin-top: 14px; }
#myPastBox summary { cursor: pointer; font-weight: 700; }

/* Hoja de reserva (reutiliza el modal de instalación) */
.sheet .sheet-content {
    max-width: 420px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.booking-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 6px 0 14px;
}
.booking-summary dt { font-weight: 700; }
.sheet .actions { margin-top: 12px; }

/* Gestión */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; }
.toolbar .field { flex: 1 1 160px; }
.staff-appt { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-top: 10px; display: grid; gap: 6px; }
.staff-appt h4 { font-size: 1rem; }
.staff-appt .pill { justify-self: start; }
.pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    border: 1px solid var(--line-strong);
    background: var(--info-bg);
}
.pill.is-cancelled { background: #f4f4f4; color: #6b6b6b; border-color: #d6d6d6; }
.pill.is-done { background: var(--ok-bg); color: var(--ok-text); border-color: #bcd8c2; }
.pill.is-no_show { background: var(--error-bg); color: var(--error-text); border-color: #e6c2b8; }
.inline-form { display: grid; gap: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 16px; }
.radio-row label { display: inline-flex; gap: 6px; align-items: center; }
.period-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin: 8px 0; }
.period-row label { display: grid; gap: 2px; font-size: 0.9rem; }
.period-row input, .exception-row input {
    width: 100%; min-height: 42px; padding: 8px 10px; font: inherit; font-size: 16px;
    border: 1px solid var(--line-strong); border-radius: 8px; color: var(--color-text); background: #fff;
}
.schedule-day { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-top: 10px; }
.schedule-day legend { font-weight: 700; padding: 0 6px; }
.agenda-edit { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-top: 12px; display: grid; gap: 12px; }