/* Scolai — estilos propios, encima de panel.css (que es la hoja de Cestia y
   se actualiza tal cual). Solo lo que panel.css no trae. */

/* Edición en línea dentro de una lista: <details class="edit"> */
details.edit > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--jade); }
details.edit > summary::-webkit-details-marker { display: none; }
details.edit[open] > summary { margin-bottom: 10px; }
details.edit .edit-body { padding: 12px 14px; border-radius: 10px; background: var(--paper); margin-bottom: 6px; }

/* Sede con sus aulas */
.campus-card .card-head { gap: 12px; flex-wrap: wrap; }
.room-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.room-row:last-child { border-bottom: none; }
.room-row .room-meta { font-size: 12.5px; color: var(--ink-soft); }
.room-row.off .pname { opacity: .55; text-decoration: line-through; }

/* Calendario: un bloque por mes */
.cal-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cal-month h3 { margin: 0 0 6px; font-size: 14px; text-transform: capitalize; }
.cal-day { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.cal-day:last-child { border-bottom: none; }
.cal-day .d { font-weight: 700; }
.cal-day .d small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 11px; text-transform: capitalize; }
.cal-day.past { opacity: .55; }

/* Programa: punto de color */
.prog-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.level-list input { margin-bottom: 6px; }
.color-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.color-pick label { cursor: pointer; }
.color-pick input { position: absolute; opacity: 0; pointer-events: none; }
.color-pick span { display: block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid transparent; }
.color-pick input:checked + span { border-color: var(--ink); }

/* Planes de cobro */
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.plan { border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px; background: var(--paper-2); }
.plan.off { opacity: .6; }
.plan h3 { margin: 0 0 2px; font-size: 15px; }
.plan .price { font-size: 20px; font-weight: 700; margin: 6px 0 2px; }
.plan .others { font-size: 12.5px; color: var(--ink-soft); }
.plan .others b { color: var(--ink); font-weight: 600; }
.price-list { font-size: 12.5px; color: var(--ink-soft); }
.price-list b { color: var(--ink); }