/* Serra – Calendario de reservas v1.0.0
   CSS portado de la demo demo-calendario-de-reservas (solo lectura).
   Selectores prefijados con .serracal-scope para aislarlos del tema.
   Eliminadas: reglas de insignias demo, leyenda, panel de admin y chat simulado. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');
.serracal-scope {
      color-scheme: light dark;
      --bg: #f6f7f9;
      --surface: #ffffff;
      --surface-soft: #eef1f4;
      --ink: #17202b;
      --muted: #59636e;
      --line: #d7dce1;
      --accent: #a32238;
      --accent-strong: #7f1327;
      --accent-soft: #f7e9ec;
      --teal: #0f6d70;
      --teal-soft: #e2f1f0;
      --amber: #b8630a;
      --amber-soft: #fff0d9;
      --danger: #b4232f;
      --danger-soft: #f9e3e6;
      --shadow: 0 18px 50px rgba(29, 37, 48, .12);
      --grid-hour: 56px;
    }
@media (prefers-color-scheme: dark) {
.serracal-scope {
        --bg: #11161c;
        --surface: #1a2129;
        --surface-soft: #242d36;
        --ink: #f2f4f6;
        --muted: #b4bec8;
        --line: #39434d;
        --accent: #e75c73;
        --accent-strong: #ff7c90;
        --accent-soft: #3a2028;
        --teal: #63c5c2;
        --teal-soft: #173333;
        --amber: #e4a75f;
        --amber-soft: #392b1d;
        --danger: #f27b8c;
        --danger-soft: #3a1f26;
        --shadow: 0 20px 60px rgba(0, 0, 0, .35);
      }
}
.serracal-scope * { box-sizing: border-box; }
.serracal-scope .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.serracal-scope { background: var(--bg); }
.serracal-scope {
      margin: 0;
      min-height: 100vh;
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px),
        var(--bg);
      background-size: 34px 34px;
      color: var(--ink);
      font-family: "Source Sans 3", sans-serif;
      font-size: 16px;
      line-height: 1.45;
    }
.serracal-scope button, .serracal-scope input, .serracal-scope select, .serracal-scope textarea { font: inherit; }
.serracal-scope button { color: inherit; }
.serracal-scope button:focus-visible, .serracal-scope input:focus-visible, .serracal-scope select:focus-visible, .serracal-scope textarea:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--teal) 45%, transparent);
      outline-offset: 2px;
    }
.serracal-scope .page { width: min(1460px, 100%); margin: 0 auto; padding: 30px clamp(16px, 3vw, 44px) 54px; }
.serracal-scope .intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 28px;
      align-items: end;
      margin-bottom: 24px;
    }
.serracal-scope .title-row { display: flex; align-items: center; gap: 15px; }
.serracal-scope h1 {
      font-family: "Libre Baskerville", serif;
      font-size: clamp(31px, 4vw, 52px);
      line-height: 1.06;
      max-width: 800px;
      letter-spacing: -.035em;
      margin: 0 0 10px;
    }
.serracal-scope .title-row h1 { margin-bottom: 10px; }
.serracal-scope .serra-face-button {
      position: relative;
      width: clamp(58px, 6vw, 72px);
      height: clamp(58px, 6vw, 72px);
      flex: none;
      overflow: visible;
      border: 3px solid var(--surface);
      border-radius: 50%;
      background: var(--surface);
      padding: 0;
      cursor: pointer;
      box-shadow: 0 0 0 2px var(--teal), 0 7px 18px color-mix(in srgb, var(--teal) 23%, transparent);
      transition: transform .18s ease, box-shadow .18s ease;
    }
.serracal-scope .serra-face-crop { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.serracal-scope .serra-face-button img {
      width: 137%;
      height: 137%;
      max-width: none;
      object-fit: cover;
      object-position: center 18%;
      transform: translate(-13.5%, -7%);
    }
.serracal-scope .serra-face-button:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--teal), 0 10px 22px color-mix(in srgb, var(--teal) 30%, transparent); }
.serracal-scope .serra-face-button:active { transform: translateY(0) scale(.97); }
.serracal-scope .serra-chat-badge {
      position: absolute;
      right: -4px;
      bottom: -2px;
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border: 2px solid var(--surface);
      border-radius: 50%;
      background: var(--teal);
      color: #fff;
      box-shadow: 0 3px 8px rgba(18, 35, 37, .22);
    }
.serracal-scope .serra-chat-badge svg { width: 13px; height: 13px; display: block; fill: currentColor; }
.serracal-scope .intro p { color: var(--muted); font-size: 18px; margin: 0; max-width: 720px; }
.serracal-scope .intro-side { display: grid; grid-template-columns: auto auto auto; gap: 10px; align-items: start; justify-content: end; }
.serracal-scope .intro.menu-open { margin-bottom: 126px; }
.serracal-scope .primary {
      border: 0;
      background: var(--accent);
      color: #fff;
      font-weight: 700;
      padding: 12px 18px;
      min-height: 46px;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 24%, transparent);
    }
.serracal-scope .primary:hover { background: var(--accent-strong); }
.serracal-scope .secondary, .serracal-scope .icon-button {
      border: 1px solid var(--line);
      background: var(--surface);
      color: var(--ink);
      font-weight: 650;
      min-height: 42px;
      border-radius: 6px;
      cursor: pointer;
    }
.serracal-scope .secondary { padding: 9px 14px; }
.serracal-scope .icon-button { width: 42px; display: grid; place-items: center; font-size: 20px; }
.serracal-scope .secondary:hover, .serracal-scope .icon-button:hover { background: var(--surface-soft); }
.serracal-scope .workspace {
      display: grid;
      grid-template-columns: 236px minmax(0, 1fr);
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      min-height: 715px;
      box-shadow: var(--shadow);
    }
.serracal-scope .sidebar {
      border-right: 1px solid var(--line);
      background: color-mix(in srgb, var(--surface-soft) 54%, var(--surface));
      padding: 23px 18px;
    }
.serracal-scope .sidebar h2 { font-family: "Libre Baskerville", serif; font-size: 17px; margin: 0 0 8px; }
.serracal-scope .sidebar-intro { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.serracal-scope .resource-list { display: grid; gap: 7px; }
.serracal-scope .resource-summary {
      display: block;
      width: 100%;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      color: var(--ink);
      text-align: left;
      padding: 10px;
      border-radius: 7px;
      box-shadow: 0 4px 12px rgba(25,31,38,.06);
    }
.serracal-scope .resource-summary strong { display: block; line-height: 1.2; }
.serracal-scope .resource-summary span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.serracal-scope .teacher-list { display: grid; gap: 7px; }
.serracal-scope .teacher-filter {
      display: grid;
      grid-template-columns: 11px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      width: 100%;
      max-width: 100%;
      white-space: normal;
      border: 1px solid transparent;
      background: transparent;
      color: var(--ink);
      text-align: left;
      padding: 9px 10px;
      border-radius: 7px;
      cursor: pointer;
      transition: opacity .18s ease, background .18s ease, border-color .18s ease;
    }
.serracal-scope .teacher-filter:hover { background: var(--surface); border-color: var(--line); }
.serracal-scope .teacher-filter[aria-pressed="true"] { background: var(--surface); border-color: var(--line); box-shadow: 0 4px 12px rgba(25,31,38,.07); }
.serracal-scope .teacher-filter[aria-pressed="false"] { opacity: .45; }
.serracal-scope .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.serracal-scope .teacher-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teacher-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--teacher-color) 20%, transparent); flex-shrink: 0; }
.serracal-scope .teacher-filter > span:last-child { min-width: 0; max-width: 100%; }
.serracal-scope .teacher-name { font-weight: 700; display: block; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.serracal-scope .teacher-meta { color: var(--muted); display: block; font-size: 12px; margin-top: 2px; }
.serracal-scope .sidebar-rule { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.serracal-scope .calendar-area { min-width: 0; }
.serracal-scope .calendar-toolbar {
      min-height: 78px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
.serracal-scope .period { display: flex; gap: 8px; align-items: center; }
.serracal-scope .period h2 { margin: 0 10px; font-size: 20px; min-width: 195px; text-align: center; }
.serracal-scope .week-wrap { overflow: hidden; }
.serracal-scope .week-head {
      display: grid;
      grid-template-columns: 62px repeat(5, minmax(132px, 1fr));
      border-bottom: 1px solid var(--line);
    }
.serracal-scope .head-spacer { border-right: 1px solid var(--line); }
.serracal-scope .day-head {
      padding: 12px 8px;
      text-align: center;
      border-right: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
    }
.serracal-scope .day-head:last-child { border-right: 0; }
.serracal-scope .day-number { display: block; font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.serracal-scope .day-head.today { background: var(--accent-soft); color: var(--accent); }
.serracal-scope .day-head.today .day-number { color: var(--accent); }
.serracal-scope .calendar-grid {
      display: grid;
      grid-template-columns: 62px repeat(5, minmax(132px, 1fr));
      height: calc(var(--grid-hour) * 9);
      overflow: hidden;
    }
.serracal-scope .time-column { position: relative; border-right: 1px solid var(--line); }
.serracal-scope .time-label { position: absolute; right: 10px; transform: translateY(-8px); color: var(--muted); font-size: 12px; }
.serracal-scope .day-column {
      position: relative;
      border-right: 1px solid var(--line);
      background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--grid-hour) - 1px), var(--line) calc(var(--grid-hour) - 1px), var(--line) var(--grid-hour));
    }
.serracal-scope .day-column:last-child { border-right: 0; }
.serracal-scope .day-column.today-col { background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--accent-soft) 38%, transparent) 0, color-mix(in srgb, var(--accent-soft) 38%, transparent) calc(var(--grid-hour) - 1px), var(--line) calc(var(--grid-hour) - 1px), var(--line) var(--grid-hour)); }
@keyframes reservation-arrive {
      0% { opacity: 0; transform: translateY(7px) scale(.985); }
      62% { opacity: 1; transform: translateY(-2px) scale(1.006); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
.serracal-scope .event {
      position: absolute;
      left: 5px;
      right: 5px;
      z-index: 2;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--teacher-color, var(--accent)) 76%, var(--line));
      border-left: 4px solid var(--teacher-color, var(--accent));
      background: var(--teacher-color, var(--accent-soft));
      color: var(--teacher-ink, var(--ink));
      text-align: left;
      padding: 6px 7px;
      border-radius: 5px;
      cursor: pointer;
      line-height: 1.16;
      transition: transform .18s ease, filter .18s ease;
    }
/* La animación de llegada solo se aplica a bloques nuevos (clase .arrive):
así un re-renderizado nunca re-anima los bloques que ya estaban. */
.serracal-scope .event.arrive, .serracal-scope .mobile-event.arrive { animation: reservation-arrive .48s cubic-bezier(.2, .78, .28, 1); }
.serracal-scope .event.recurring { border-style: dashed; border-left-style: solid; }
.serracal-scope .event strong { display: block; font-size: 13px; }
.serracal-scope .event span { display: block; color: inherit; opacity: .82; font-size: 11px; margin-top: 3px; }
.serracal-scope .event:hover, .serracal-scope .event:focus-visible { filter: brightness(.97); transform: translateY(-2px); }
.serracal-scope .event:active { transform: translateY(1px) scale(.99); }
.serracal-scope .now-line { position: absolute; left: 0; right: 0; top: calc(var(--grid-hour) * 3.2); border-top: 2px solid var(--accent); z-index: 3; pointer-events: none; }
.serracal-scope .now-line::before { content: ""; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.serracal-scope .mobile-agenda { display: none; }
.serracal-scope .overlay {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(12, 17, 22, .55);
    }
.serracal-scope .overlay.open { display: grid; }
.serracal-scope .modal {
      width: min(570px, 100%);
      max-height: calc(100vh - 36px);
      overflow: auto;
      background: var(--surface);
      color: var(--ink);
      box-shadow: 0 28px 80px rgba(0,0,0,.35);
      border-radius: 12px;
    }
.serracal-scope .modal-head { display: flex; justify-content: space-between; align-items: start; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.serracal-scope .modal-head h2 { font-family: "Libre Baskerville", serif; font-size: 23px; margin: 0; }
.serracal-scope .modal-head p { color: var(--muted); margin: 5px 0 0; }
.serracal-scope .close { border: 0; background: transparent; font-size: 25px; cursor: pointer; color: var(--muted); padding: 0 4px; }
.serracal-scope .form-body { padding: 20px 24px 24px; }
.serracal-scope .field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.serracal-scope .field { display: grid; gap: 6px; margin-bottom: 15px; }
.serracal-scope .field label, .serracal-scope .field legend { font-weight: 700; font-size: 14px; }
.serracal-scope input, .serracal-scope select, .serracal-scope textarea {
      width: 100%;
      min-height: 43px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: var(--surface);
      color: var(--ink);
      padding: 9px 10px;
    }
.serracal-scope .segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.serracal-scope .segment { position: relative; }
.serracal-scope .segment input { position: absolute; opacity: 0; pointer-events: none; }
.serracal-scope .segment label { display: block; padding: 10px; text-align: center; cursor: pointer; font-weight: 650; background: var(--surface); }
.serracal-scope .segment + .segment label { border-left: 1px solid var(--line); }
.serracal-scope .segment input:checked + label { background: var(--accent-soft); color: var(--accent); }
.serracal-scope .availability {
      margin: 2px 0 16px;
      padding: 12px 14px;
      background: var(--teal-soft);
      color: var(--ink);
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
    }
.serracal-scope .availability-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); flex: none; }
.serracal-scope .repeat-box { padding: 14px; background: var(--surface-soft); margin-bottom: 15px; }
.serracal-scope .form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 7px; }
.serracal-scope .details-body { padding: 22px 24px 26px; }
.serracal-scope .detail-resource { display: inline-block; padding: 5px 9px; border-radius: 5px; color: var(--accent); background: var(--accent-soft); font-weight: 700; font-size: 13px; margin-bottom: 16px; }
.serracal-scope .detail-list { display: grid; grid-template-columns: 110px 1fr; gap: 11px 16px; margin: 0; }
.serracal-scope .detail-list dt { color: var(--muted); }
.serracal-scope .detail-list dd { margin: 0; font-weight: 650; }
.serracal-scope .toast {
      position: fixed;
      z-index: 30;
      left: 50%; bottom: 24px;
      transform: translate(-50%, 24px);
      opacity: 0;
      pointer-events: none;
      background: var(--ink);
      color: var(--surface);
      padding: 12px 18px;
      border-radius: 6px;
      box-shadow: var(--shadow);
      transition: .22s ease;
      text-align: center;
      max-width: calc(100% - 32px);
    }
.serracal-scope .toast.show { opacity: 1; transform: translate(-50%, 0); }
.serracal-scope .wizard-progress { height: 5px; background: var(--surface-soft); border-radius: 999px; margin-bottom: 14px; overflow: hidden; }
.serracal-scope .wizard-progress-fill { height: 100%; width: 17%; background: var(--accent); border-radius: 999px; transition: width .25s ease; }
.serracal-scope .modal-head .wizard-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.serracal-scope .wizard-step { display: grid; gap: 14px; align-content: start; min-height: 235px; margin-bottom: 18px; }
.serracal-scope .wizard-step[hidden], .serracal-scope #slotInfo[hidden], .serracal-scope #slotError[hidden], .serracal-scope #qtyError[hidden], .serracal-scope #adjacentBox[hidden], .serracal-scope #courseError[hidden], .serracal-scope #teacherError[hidden], .serracal-scope #bookingSubtitle[hidden] { display: none; }
.serracal-scope .option-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 12px; }
.serracal-scope .option-card {
      display: flex; align-items: center; gap: 14px;
      text-align: left; width: 100%;
      border: 1px solid var(--line); border-radius: 10px;
      background: var(--surface); color: var(--ink);
      padding: 20px 18px; cursor: pointer; min-height: 90px;
    }
.serracal-scope button.option-card { font: inherit; }
.serracal-scope .option-card .dot { width: 12px; height: 12px; flex: none; }
.serracal-scope .option-card[data-resource="maker"] .dot { background: var(--teal); }
.serracal-scope .option-card:hover { border-color: var(--accent); }
.serracal-scope .option-card[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.serracal-scope .option-text strong { display: block; font-size: 19px; }
.serracal-scope .option-text small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.serracal-scope .radio-card { position: relative; }
.serracal-scope .radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.serracal-scope .radio-card input:checked + .option-card { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.serracal-scope .radio-card input:focus-visible + .option-card { outline: 3px solid color-mix(in srgb, var(--teal) 45%, transparent); outline-offset: 2px; }
.serracal-scope .stepper { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 6px; }
.serracal-scope .stepper-btn {
      width: 54px; height: 54px; flex: none;
      border-radius: 50%; border: 1px solid var(--line);
      background: var(--surface); color: var(--ink);
      font-size: 28px; line-height: 1; cursor: pointer;
      display: grid; place-items: center; padding-bottom: 5px;
    }
.serracal-scope .stepper-btn:hover { background: var(--surface-soft); }
.serracal-scope #quantity { width: 120px; min-height: 64px; font-size: 34px; font-weight: 700; text-align: center; border-radius: 8px; padding: 6px; -moz-appearance: textfield; appearance: textfield; }
.serracal-scope #quantity::-webkit-outer-spin-button, .serracal-scope #quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.serracal-scope .qty-readout { text-align: center; font-size: 18px; margin: 0; }
.serracal-scope .qty-hint { text-align: center; color: var(--muted); font-size: 14px; margin: 0; }
.serracal-scope .warn-box, .serracal-scope .error-box { border-radius: 6px; padding: 14px; font-size: 14px; margin: 2px 0 16px; }
.serracal-scope .warn-box p, .serracal-scope .error-box p { margin: 0; }
.serracal-scope .warn-box { background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line)); }
.serracal-scope .error-box { background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line)); }
.serracal-scope .warn-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.serracal-scope .field-error { color: var(--danger); font-size: 13px; margin: 0; }
.serracal-scope input[aria-invalid="true"] { border-color: var(--danger); }
.serracal-scope .wizard-actions { justify-content: space-between; padding-top: 4px; }
.serracal-scope .primary:disabled, .serracal-scope .secondary:disabled { opacity: .5; cursor: not-allowed; }
.serracal-scope .primary:disabled { box-shadow: none; }
.serracal-scope .account-bar { position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; margin:-8px 0 18px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); transition:padding-bottom .18s ease; }
.serracal-scope .account-bar.menu-open { padding-bottom:88px; }
.serracal-scope .account-status { min-width:0; }
.serracal-scope .account-status strong { display:block; }
.serracal-scope .account-status span { color:var(--muted); font-size:14px; }
.serracal-scope .account-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.serracal-scope .account-actions .secondary[hidden], .serracal-scope .account-actions .primary[hidden], .serracal-scope .user-menu-wrap[hidden] { display:none; }
.serracal-scope .button-danger { border-color:color-mix(in srgb,var(--danger) 38%,var(--line)); color:var(--danger); }
.serracal-scope .button-danger:hover { background:var(--danger-soft); }
.serracal-scope .primary.button-danger { background:var(--danger); color:#fff; }
.serracal-scope .primary.button-danger:hover { background:color-mix(in srgb,var(--danger) 82%,#000); }
.serracal-scope .subtle-button { border:0; background:transparent; color:var(--accent); font-weight:700; cursor:pointer; padding:7px 4px; }
.serracal-scope .subtle-button:hover { text-decoration:underline; }
.serracal-scope .view-tab[aria-pressed="true"] { background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); color:var(--accent); }
.serracal-scope .event-manage { color:inherit !important; opacity:1 !important; font-weight:700; }
.serracal-scope .auth-tabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.serracal-scope .auth-tab { border:0; background:var(--surface-soft); padding:12px; font-weight:700; cursor:pointer; }
.serracal-scope .auth-tab[aria-selected="true"] { background:var(--surface); color:var(--accent); box-shadow:inset 0 -3px var(--accent); }
.serracal-scope .auth-panel[hidden], .serracal-scope #detailManage[hidden] { display:none; }
.serracal-scope .auth-switch { margin:16px 0 0; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); text-align:center; }
.serracal-scope .auth-switch .subtle-button { display:inline; padding:0; font:inherit; font-weight:700; }
.serracal-scope .auth-switch #showRegister { display:block; margin:4px auto 0; }
.serracal-scope .password-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.serracal-scope .password-row input[readonly] { background:var(--surface-soft); font-weight:700; letter-spacing:.04em; }
.serracal-scope .notice { color:var(--muted); font-size:14px; margin:0 0 16px; }
.serracal-scope .notice strong { color:var(--ink); }
.serracal-scope .check-row { display:flex; align-items:flex-start; gap:9px; }
.serracal-scope .check-row input { width:18px; min-height:18px; margin-top:3px; flex:none; }
.serracal-scope .check-row label { font-weight:650; }
.serracal-scope .check-row small { display:block; color:var(--muted); font-weight:400; }
.serracal-scope .inline-error { color:var(--danger); font-size:14px; min-height:21px; margin:4px 0 0; }
.serracal-scope .manage-list { display:grid; gap:10px; }
.serracal-scope .manage-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }
.serracal-scope .manage-row:last-child { border-bottom:0; }
.serracal-scope #accountOverlay .modal { width:min(780px,100%); }
.serracal-scope .manage-copy strong { display:block; }
.serracal-scope .manage-copy span { display:block; color:var(--muted); font-size:14px; }
.serracal-scope .row-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.serracal-scope .empty-panel { padding:24px 0; color:var(--muted); text-align:center; }
.serracal-scope .confirm-copy { margin:0; color:var(--muted); }
.serracal-scope .user-menu-wrap { position:relative; margin-left:2px; }
.serracal-scope .user-color-button { width:46px; height:46px; border:0; border-radius:50%; padding:0; cursor:pointer; display:grid; place-items:center; color:#fff; font-weight:800; letter-spacing:.02em; box-shadow:0 4px 13px color-mix(in srgb,var(--ink) 18%,transparent); transition:filter .18s ease; }
.serracal-scope .user-color-button:hover { filter:brightness(.96); }
@keyframes user-menu-item-appear {
      from { opacity:0; transform:translateY(-8px); }
      to { opacity:1; transform:translateY(0); }
    }
.serracal-scope .user-dropdown {
      position:absolute; z-index:12; top:58px; right:0; min-width:166px;
      display:grid; justify-items:end; gap:9px;
    }
.serracal-scope .user-dropdown[hidden] { display:none; }
.serracal-scope .user-dropdown button {
      position:relative; width:max-content; min-width:106px; min-height:36px; border:0; border-radius:999px;
      background:var(--accent); color:#fff; font-size:13px; font-weight:700;
      cursor:pointer; padding:6px 14px; text-align:center;
      box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 22%,transparent);
      opacity:0; animation:user-menu-item-appear .22s ease-out forwards;
    }
.serracal-scope .user-dropdown button:nth-child(1) { margin-right:14px; animation-delay:.04s; }
.serracal-scope .user-dropdown button:nth-child(2) { animation-delay:.18s; }
.serracal-scope .user-dropdown button:hover { background:var(--accent-strong); }
.serracal-scope .settings-block { padding:19px 0; border-bottom:1px solid var(--line); }
.serracal-scope .settings-block:first-child { padding-top:0; }
.serracal-scope .settings-block:last-child { border-bottom:0; padding-bottom:0; }
.serracal-scope .settings-block h3 { font-family:"Libre Baskerville", serif; font-size:17px; margin:0 0 6px; }
.serracal-scope .settings-block > p { color:var(--muted); margin:0 0 13px; }
.serracal-scope .locked-name { background:var(--surface-soft); font-weight:700; }
.serracal-scope .color-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.serracal-scope .color-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.serracal-scope .color-swatch { width:34px; height:34px; border-radius:50%; border:3px solid var(--surface); box-shadow:0 0 0 1px var(--line); cursor:pointer; }
.serracal-scope .color-swatch[aria-pressed="true"] { box-shadow:0 0 0 3px var(--ink); }
.serracal-scope .custom-color-label { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--muted); }
.serracal-scope #customAccountColor { width:42px; height:36px; min-height:36px; padding:2px; border-radius:5px; cursor:pointer; }
.serracal-scope .danger-zone { display:grid; gap:10px; }
.serracal-scope .danger-action { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.serracal-scope .danger-action + .danger-action { border-top:1px solid var(--line); }
.serracal-scope .danger-action strong { display:block; }
.serracal-scope .danger-action span { color:var(--muted); font-size:14px; display:block; margin-top:2px; }
.serracal-scope .serra-modal { width: min(620px, 100%); display: flex; flex-direction: column; overflow: hidden; }
.serracal-scope .serra-head { align-items: center; }
.serracal-scope .serra-heading { display: flex; align-items: center; gap: 12px; }
.serracal-scope .serra-mark {
      width: 42px; height: 42px; flex: none; border-radius: 50%;
      overflow: hidden; background: var(--surface);
      box-shadow: 0 0 0 2px var(--teal);
    }
.serracal-scope .serra-mark img {
      display: block; width: 137%; height: 137%; max-width: none;
      object-fit: cover; object-position: center 18%;
      transform: translate(-13.5%, -7%);
    }
.serracal-scope .serra-head h2 { font-size: 21px; }
.serracal-scope .serra-head p { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.serracal-scope .serra-online { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.serracal-scope .serra-chat {
      min-height: 310px; max-height: min(48vh, 430px); overflow-y: auto;
      display: flex; flex-direction: column; gap: 12px;
      padding: 20px 22px;
      background: color-mix(in srgb, var(--surface-soft) 52%, var(--surface));
      scroll-behavior: smooth;
    }
.serracal-scope .serra-message { display: flex; max-width: 88%; }
.serracal-scope .serra-message.bot { align-self: flex-start; }
.serracal-scope .serra-message.user { align-self: flex-end; }
.serracal-scope .serra-bubble {
      margin: 0; padding: 10px 13px; border-radius: 15px;
      background: var(--surface); color: var(--ink);
      border: 1px solid var(--line); white-space: pre-line;
      box-shadow: 0 3px 10px rgba(24, 31, 39, .05);
    }
.serracal-scope .serra-message.bot .serra-bubble { border-top-left-radius: 5px; }
.serracal-scope .serra-message.user .serra-bubble { background: var(--teal); color: #fff; border-color: transparent; border-top-right-radius: 5px; }
.serracal-scope .serra-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.serracal-scope .serra-composer input { border-radius: 999px; padding-inline: 16px; }
.serracal-scope .serra-composer button { min-width: 84px; border-radius: 999px; }
.serracal-scope .serra-hint { grid-column: 1 / -1; color: var(--muted); font-size: 12px; margin: -2px 5px 0; }
@media (prefers-color-scheme: dark) {
.serracal-scope .serra-message.user .serra-bubble { color: #102223; }
}
@media (max-width: 980px) {
.serracal-scope .workspace { grid-template-columns: 190px minmax(0, 1fr); }
.serracal-scope .sidebar { padding-inline: 12px; }
.serracal-scope .week-head, .serracal-scope .calendar-grid { grid-template-columns: 54px repeat(5, minmax(118px, 1fr)); }
.serracal-scope .event { left: 3px; right: 3px; padding-inline: 5px; }
}
@media (max-width: 760px) {
.serracal-scope .page { padding: 22px 14px 40px; }
.serracal-scope .account-bar { align-items:flex-start; flex-direction:column; }
.serracal-scope .account-actions { width:100%; justify-content:flex-start; }
.serracal-scope .user-menu-wrap { margin-left:auto; }
.serracal-scope .user-dropdown { right:0; }
.serracal-scope .danger-action { align-items:flex-start; flex-direction:column; }
.serracal-scope .danger-action button { width:100%; }
.serracal-scope .manage-row { grid-template-columns:1fr; }
.serracal-scope .row-actions { justify-content:flex-start; }
.serracal-scope .password-row { grid-template-columns:1fr; }
.serracal-scope .password-row button { width:100%; }
.serracal-scope .intro { grid-template-columns: 1fr; gap: 16px; align-items: start; }
.serracal-scope .intro p { font-size: 16px; }
.serracal-scope .intro-side { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.serracal-scope .intro-side .primary { flex: 1 1 160px; }
.serracal-scope .workspace { display: block; min-height: 0; }
.serracal-scope .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px; }
.serracal-scope .sidebar h2 { margin-bottom: 4px; }
.serracal-scope .sidebar-intro { margin-bottom: 10px; }
.serracal-scope .resource-list, .serracal-scope .teacher-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.serracal-scope .teacher-filter { background: var(--surface); border-color: var(--line); }
.serracal-scope .sidebar-rule { display: none; }
.serracal-scope .resource-divider { display: block; margin: 16px 0; }
.serracal-scope .calendar-toolbar { padding: 12px; }
.serracal-scope .period { width: 100%; justify-content: space-between; }
.serracal-scope .period h2 { font-size: 17px; min-width: 0; margin-inline: 4px; }
.serracal-scope .week-wrap { display: none; }
.serracal-scope .mobile-agenda { display: block; padding: 0 14px 14px; }
.serracal-scope .mobile-day { border-bottom: 1px solid var(--line); padding: 16px 0; }
.serracal-scope .mobile-day:last-child { border-bottom: 0; }
.serracal-scope .mobile-day h3 { font-size: 16px; margin: 0 0 11px; display: flex; justify-content: space-between; }
.serracal-scope .mobile-day h3 span { color: var(--muted); font-weight: 500; font-size: 14px; }
.serracal-scope .mobile-event {
        width: 100%;
        border: 1px solid color-mix(in srgb, var(--teacher-color, var(--accent)) 76%, var(--line));
        border-left: 4px solid var(--teacher-color, var(--accent));
        background: var(--teacher-color, var(--accent-soft));
        color: var(--teacher-ink, var(--ink));
        padding: 11px 12px;
        text-align: left;
        margin-top: 8px;
        cursor: pointer;
        transition: transform .18s ease, filter .18s ease;
      }
.serracal-scope .mobile-event:hover, .serracal-scope .mobile-event:focus-visible { filter: brightness(.97); transform: translateY(-2px); }
.serracal-scope .mobile-event:active { transform: translateY(1px) scale(.99); }
.serracal-scope .mobile-event strong { display: block; }
.serracal-scope .mobile-event span { display: block; color: inherit; opacity: .82; font-size: 13px; }
.serracal-scope .empty { color: var(--muted); font-size: 14px; padding: 6px 0; }
}
@media (max-width: 520px) {
.serracal-scope h1 { font-size: 33px; }
.serracal-scope .teacher-list { grid-template-columns: 1fr; }
.serracal-scope .field-grid { grid-template-columns: 1fr; gap: 0; }
.serracal-scope .modal-head, .serracal-scope .form-body, .serracal-scope .details-body { padding-left: 18px; padding-right: 18px; }
.serracal-scope .form-actions { flex-direction: column-reverse; }
.serracal-scope .form-actions button { width: 100%; }
.serracal-scope .detail-list { grid-template-columns: 1fr; gap: 3px; }
.serracal-scope .detail-list dd { margin-bottom: 9px; }
.serracal-scope .user-color-button { width:44px; height:44px; }
.serracal-scope .serra-modal { max-height: calc(100dvh - 20px); }
.serracal-scope .serra-chat { min-height: 280px; max-height: calc(100dvh - 245px); padding: 16px 14px; }
.serracal-scope .serra-message { max-width: 94%; }
.serracal-scope .serra-composer { grid-template-columns: 1fr; }
.serracal-scope .serra-composer button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.serracal-scope .toast, .serracal-scope .event, .serracal-scope .mobile-event, .serracal-scope .user-dropdown, .serracal-scope .user-dropdown button { animation: none; transition: none; }
.serracal-scope .user-dropdown button { opacity:1; }
.serracal-scope .event:hover, .serracal-scope .event:focus-visible, .serracal-scope .event:active, .serracal-scope .mobile-event:hover, .serracal-scope .mobile-event:focus-visible, .serracal-scope .mobile-event:active { transform: none; }
}

/* Indicador de "Serra está pensando" (chat real, añadido para el plugin) */
.serracal-scope .serra-typing { display: inline-flex; gap: 5px; align-items: center; padding: 4px 2px; }
.serracal-scope .serra-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); opacity: .45; animation: serra-typing-blink 1.1s ease-in-out infinite; }
.serracal-scope .serra-typing i:nth-child(2) { animation-delay: .18s; }
.serracal-scope .serra-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes serra-typing-blink { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .serracal-scope .serra-typing i { animation: none; opacity: .7; }
}

/* ===== Neutralización del tema Hello Elementor =====
   El tema pinta los <button> de rosa (#c36) en :hover/:focus y su hoja carga
   después de la nuestra: los bloques de reserva conservan el color del profesor. */
.serracal-scope .event:hover, .serracal-scope .event:focus-visible, .serracal-scope .event:active,
.serracal-scope .mobile-event:hover, .serracal-scope .mobile-event:focus-visible, .serracal-scope .mobile-event:active {
  background: var(--teacher-color, var(--accent-soft));
  border: 1px solid color-mix(in srgb, var(--teacher-color, var(--accent)) 76%, var(--line));
  border-left: 4px solid var(--teacher-color, var(--accent));
}