/* ===============================
   VARIABLES GLOBALES (UX SYSTEM)
================================ */
:root{
  --bg:#070707;
  --panel:#0f0f0f;
  --panel-soft:#141414;
  --muted:#bfbfbf;
  --gold:#e6b200;
  --gold-soft:rgba(230,178,0,.15);
  --danger:#dc3545;
  --success:#20c997;
  --info:#007bff;
  --sidebar-w:230px;
  --header-h:64px;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.45);
  --transition:.25s ease;
}

/* ===============================
   RESET + BASE
================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;
  background:var(--bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
}

/* ===============================
   HEADER
================================ */
.header{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 16px;
  background:linear-gradient(180deg,#000,#0b0b0b);
  border-bottom:1px solid rgba(255,255,255,.04);
  z-index:900;
}

.header .user{
  margin-left:auto;
  font-size:14px;
  color:var(--muted);
}

.header-right{
  display:flex;
  align-items:center;
  margin-left:0;
}

/* ===============================
   HAMBURGER
================================ */
.hamburger{
  background:none;
  border:none;
  font-size:22px;
  color:#fff;
  cursor:pointer;
  padding:8px 12px;
  border-radius:10px;
}
.hamburger:hover{background:rgba(255,255,255,.06);}

/* ===============================
   SIDEBAR
================================ */
.menu_side{
  position:fixed;
  top:var(--header-h);
  left:0;
  width:var(--sidebar-w);
  height:calc(100vh - var(--header-h));
  background:linear-gradient(180deg,#000,#070707);
  padding:18px 12px;
  border-right:1px solid rgba(255,255,255,.04);
  overflow-y:auto;
  transition:transform .35s ease;
  z-index:800;
}

.menu_side .name_page{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 6px 20px;
}

.options_menu{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.options_menu a{
  text-decoration:none;
  color:var(--muted);
  padding:12px 14px;
  border-radius:12px;
  transition:var(--transition);
}

.options_menu a .option{
  display:flex;
  align-items:center;
  gap:12px;
}

.options_menu a:hover{
  background:rgba(255,255,255,.05);
  color:#fff;
}

.options_menu a.selected{
  background:linear-gradient(90deg,var(--gold-soft),transparent);
  color:#fff;
}

.options_menu a.selected i,
.options_menu a:hover i{color:var(--gold);}

/* ===============================
   OVERLAY
================================ */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  opacity:0;
  pointer-events:none;
  transition:.3s ease;
  z-index:700;
}
.overlay.show{
  opacity:1;
  pointer-events:auto;
}

/* ===============================
   PANEL
================================ */
.panel-docente{
  margin-top:var(--header-h);
  margin-left:var(--sidebar-w);
  padding:26px;
  min-height:calc(100vh - var(--header-h));
  transition:margin-left .3s ease;
}

/* ===============================
   RESUMEN
================================ */
.resumen-docente{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;
  margin-bottom:28px;
}

.card-resumen{
  background:var(--panel);
  padding:18px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:var(--transition);
}

.card-resumen span{
  font-size:13px;
  color:var(--muted);
}
.card-resumen strong{
  font-size:22px;
  color:var(--gold);
}
.card-resumen:hover{
  transform:translateY(-4px);
}

/* ===============================
   CARDS
================================ */
.card{
  background:var(--panel);
  padding:22px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:22px;
}

.card h2{
  margin-bottom:14px;
  font-size:20px;
}

/* ===============================
   PERFIL DOCENTE
================================ */
.perfil-docente{
  display:flex;
  flex-direction:column;
  gap:18px;
  border:1px solid rgba(230,178,0,.1);
  position:relative;
}

.perfil-docente::after{
  content:"✔ Docente verificado";
  position:absolute;
  top:14px;
  right:16px;
  font-size:12px;
  padding:4px 12px;
  border-radius:20px;
  background:var(--gold-soft);
  color:var(--gold);
}

.perfil-top{
  display:flex;
  gap:22px;
  align-items:center;
  flex-wrap:wrap;
}

.perfil-foto{
  width:120px;
  height:120px;
  border-radius:18px;
  object-fit:cover;
  transition:var(--transition);
  cursor:pointer;
}

.perfil-foto:hover{
  transform:scale(1.06);
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}

.muted{color:var(--muted);font-size:14px;}

/* ===============================
   INPUTS & BUTTONS
================================ */
input,textarea{
  background:#0b0b0b;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:12px;
  color:#fff;
  transition:var(--transition);
}

input:focus,textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(230,178,0,.25);
}

textarea{
  min-height:100px;
  resize:vertical;
}

button{
  font-weight:700;
  border-radius:12px;
  padding:12px 16px;
  cursor:pointer;
  transition:var(--transition);
}

button:active{transform:scale(.97);}

button#btnAgregar,
button#guardarPrecio,
button#guardarMateria{
  background:var(--gold);
  color:#000;
  border:none;
}

.btn-secundario{
  background:transparent;
  border:1px dashed rgba(255,255,255,.35);
  color:#fff;
}

/* ===============================
   CLASES
================================ */
.clase-item{
  background:var(--panel-soft);
  border-left:6px solid;
  padding:16px;
  border-radius:14px;
  margin-bottom:14px;
  display:grid;
  gap:6px;
  transition:var(--transition);
}

.clase-item:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.5);
}

.clase-item b{color:var(--gold);}

.horario-item{
  background:var(--panel-soft);
  padding:12px;
  border-radius:10px;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.horario-item select, .horario-item button{
  padding:4px 8px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.2);
  background:var(--panel);
  color:#fff;
}

.dia-calendario {
  margin-bottom: 20px;
  padding: 10px;
  background: var(--panel-soft);
  border-radius: 10px;
}

.dia-calendario h4 {
  margin-bottom: 10px;
  color: var(--gold);
}

.hora-checkbox {
  display: inline-block;
  margin: 5px;
  padding: 5px 10px;
  background: var(--panel);
  border-radius: 6px;
  cursor: pointer;
}

.hora-checkbox input[type="checkbox"] {
  margin-right: 5px;
}

/* MATRIZ DE HORARIOS */
.matriz-horarios {
  margin: 20px 0;
  padding: 15px;
  background: var(--panel);
  border-radius: 12px;
  overflow-x: auto;
  border: 2px solid rgba(230, 178, 0, 0.2);
}

.tabla-matriz {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel-soft);
  min-width: 600px;
}

.tabla-matriz thead {
  background: var(--panel);
  position: sticky;
  top: 0;
}

.tabla-matriz th {
  padding: 14px 10px;
  text-align: center;
  font-weight: 700;
  color: var(--gold);
  border-bottom: 3px solid var(--gold);
}

.celda-hora {
  min-width: 80px;
  text-align: center;
  color: var(--gold);
}

.celda-fecha {
  min-width: 110px;
}

.dia-col {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.2;
}

.fecha-col {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.tabla-matriz tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.2);
}

.tabla-matriz tbody tr:hover {
  background: rgba(230, 178, 0, 0.1);
}

.fila-hora {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.fila-hora:last-child {
  border-bottom: none;
}

.celda-hora-label {
  padding: 10px 8px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--gold);
  min-width: 80px;
  background: rgba(230, 178, 0, 0.08);
  border-right: 1px solid rgba(230, 178, 0, 0.2);
}

.celda-checkbox {
  padding: 12px 6px;
  text-align: center;
  min-width: 110px;
}

.celda-checkbox input[type="checkbox"] {
  width: 24px;
  height: 24px;
  cursor: pointer;
  accent-color: var(--gold);
  border: 2px solid rgba(230, 178, 0, 0.5);
  border-radius: 6px;
}

.celda-checkbox input[type="checkbox"]:checked {
  accent-color: var(--success);
  border-color: var(--success);
}

.celda-checkbox input[type="checkbox"]:hover {
  transform: scale(1.1);
}

.btn-guardar-horarios {
  display: block;
  margin-top: 25px;
  padding: 14px 32px;
  background: var(--gold);
  color: #000;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
  max-width: 300px;
}

.btn-guardar-horarios:hover {
  background: #ffcc00;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230, 178, 0, 0.3);
}

.btn-guardar-horarios:active {
  transform: translateY(0);
}

.estado-Libre{border-color:#28a745;}
.estado-Reservada{border-color:#ffc107;}
.estado-Confirmada{border-color:#007bff;}
.estado-Por\ pagar{border-color:#dc3545;}
.estado-Pagada{border-color:#20c997;}

/* ===============================
   ESTADOS VACÍOS (UX PRO)
================================ */
.estado-vacio{
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
}

.estado-vacio::before{
  content:"📚";
  display:block;
  font-size:38px;
  margin-bottom:12px;
}

/* ===============================
   SKELETON LOADING
================================ */
.skeleton{
  background:linear-gradient(90deg,#111,#1a1a1a,#111);
  background-size:200% 100%;
  animation:skeleton 1.2s infinite;
  border-radius:12px;
  height:80px;
}

@keyframes skeleton{
  0%{background-position:0%}
  100%{background-position:200%}
}

/* ===============================
   RESPONSIVE
================================ */
@media(max-width:900px){
  .menu_side{transform:translateX(-100%);}
  .menu_side.show{transform:translateX(0);}
  .panel-docente{margin-left:0;padding:16px;}
}

@media(max-width:700px){
  .perfil-top{flex-direction:column;align-items:flex-start;}
}

@media(max-width:600px){
  .resumen-docente{grid-template-columns:repeat(2,1fr);}
  .clase-item button{width:100%;}
}

/* ===============================
   FIN — PANEL DOCENTE MAX
================================ */
/* ===============================
   SIDEBAR GLOBAL
   =============================== */

.menu_side {
  position: fixed;
  top: var(--header-h);
  left: 0;
  height: calc(100vh - var(--header-h));
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #000, #070707);
  border-right: 1px solid rgba(255,255,255,.05);
  padding: 18px 10px;
  overflow-y: auto;
  z-index: 800;
  transition: transform .35s ease;
}

.menu_side .name_page {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 20px;
}

.menu_side .name_page i {
  font-size: 22px;
  color: var(--gold);
}

.options_menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.options_menu a {
  text-decoration: none;
  color: var(--muted);
  border-radius: 10px;
  padding: 12px;
  transition: background .2s ease;
}

.options_menu a .option {
  display: flex;
  align-items: center;
  gap: 12px;
}

.options_menu a:hover {
  background: rgba(255,255,255,.05);
}

.options_menu a.selected {
  background: linear-gradient(
    90deg,
    rgba(230,178,0,.18),
    transparent
  );
}

.options_menu i {
  width: 26px;
  font-size: 18px;
}

/* ===============================
   OVERLAY + MOBILE
   =============================== */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 700;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* ===============================
   MOBILE
   =============================== */
@media (max-width: 900px) {
  .menu_side {
    transform: translateX(-100%);
  }

  .menu_side.show {
    transform: translateX(0);
  }
}

/* Panel docente */
body {
  min-height: 100%;
  padding-top: var(--header-h);
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 82% 0%, rgba(14, 116, 144, .17), transparent 38%),
    #08111f;
  color: #e8eef7;
}

header.header {
  height: var(--header-h);
  padding: 0 clamp(14px, 2.4vw, 32px);
  background: rgba(8, 17, 31, .94);
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  color: #f8fafc;
  backdrop-filter: blur(14px);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header .logo img {
  width: auto;
  max-width: 154px;
  height: 36px;
  object-fit: contain;
}

.header .user {
  display: grid;
  gap: 2px;
  margin-left: auto;
  color: #f8fafc;
  font-size: .9rem;
  line-height: 1.2;
  text-align: right;
}

.header-eyebrow,
.panel-eyebrow {
  color: #a7b5c8;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.panel-docente {
  display: block;
  width: auto;
  min-width: 0;
  margin: 0 0 0 var(--sidebar-w);
  padding: clamp(18px, 3vw, 42px);
  color: #e8eef7;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto 24px;
  max-width: 1480px;
}

.panel-heading h1 {
  margin: 5px 0 7px;
  color: #f8fafc;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  letter-spacing: -.035em;
}

.panel-heading p:last-child {
  max-width: 650px;
  color: #9eacc0;
  font-size: .94rem;
  line-height: 1.55;
}

.btn-clases,
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255, 224, 144, .35);
  border-radius: 12px;
  color: #08111f;
  background: linear-gradient(135deg, #f3cb62, #dfa927);
  font-weight: 750;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.btn-clases {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 17px;
  box-shadow: 0 8px 22px rgba(205, 150, 35, .15);
}

.btn-clases:hover,
.text-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(205, 150, 35, .22);
}

.card,
.card-resumen {
  max-width: 1480px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid rgba(148, 163, 184, .14);
  background: linear-gradient(145deg, rgba(20, 33, 52, .97), rgba(13, 24, 40, .97));
  box-shadow: 0 14px 36px rgba(0, 0, 0, .2);
}

.card {
  padding: clamp(17px, 2.4vw, 28px);
  border-radius: 20px;
}

.card h2 {
  color: #f3f6fb;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
}

.card-description {
  margin: -5px 0 16px;
  color: #9eacc0;
  font-size: .86rem;
  line-height: 1.55;
}

.perfil-docente {
  gap: 20px;
  border-color: rgba(230, 178, 0, .2);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(217, 168, 48, .09), transparent 42%),
    linear-gradient(145deg, rgba(20, 33, 52, .98), rgba(13, 24, 40, .98));
}

.perfil-docente::after {
  content: "✔ Perfil docente";
  top: 20px;
  right: 22px;
  color: #f4cb63;
  background: rgba(230, 178, 0, .12);
  font-size: .66rem;
  letter-spacing: .04em;
}

.perfil-top {
  display: grid;
  grid-template-columns: 90px minmax(210px, 1.15fr) minmax(190px, 1fr) minmax(175px, .85fr);
  align-items: center;
  gap: 20px;
}

.perfil-foto {
  width: 90px;
  height: 90px;
  border: 3px solid rgba(230, 178, 0, .36);
  border-radius: 22px;
  background: #0b1728;
}

.perfil-info,
.perfil-materia,
.perfil-precio,
.perfil-bio,
.perfil-modalidades {
  min-width: 0;
}

.perfil-info h2 {
  margin: 0 0 4px;
  color: #f8fafc;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  overflow-wrap: anywhere;
}

.perfil-info .muted,
.perfil-rating span {
  color: #a5b2c4;
  overflow-wrap: anywhere;
}

.perfil-rating {
  margin-top: 11px;
  color: #f2c65d;
}

.perfil-materia,
.perfil-precio {
  display: grid;
  align-content: center;
  gap: 9px;
}

.perfil-modalidades {
  display: grid;
  gap: 13px;
  margin: 20px 0;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 16px;
  background: rgba(15, 23, 42, .24);
}

.perfil-modalidades legend {
  padding: 0 7px;
  color: #dce5f1;
  font-size: .88rem;
  font-weight: 700;
}

.modalidades-ayuda {
  margin: 0;
  color: #a5b2c4;
  font-size: .85rem;
  line-height: 1.5;
}

.modalidades-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.perfil-modalidades label {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  color: #dce5f1;
  font-size: .88rem;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.perfil-modalidades label:has(input:checked) {
  border-color: rgba(243, 203, 98, .72);
  background: rgba(243, 203, 98, .1);
}

.perfil-modalidades input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  accent-color: #e6b200;
}

.perfil-modalidades input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(243, 203, 98, .55);
  outline-offset: 3px;
}

.modalidades-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

#estadoModalidades {
  color: #9eacc0;
  font-size: .82rem;
  line-height: 1.45;
}

#guardarModalidades {
  color: #101827;
  background: linear-gradient(135deg, #f3cb62, #dfa927);
}

#guardarModalidades:disabled {
  cursor: wait;
  opacity: .7;
}

.perfil-materia label,
.perfil-precio label,
.perfil-bio label {
  color: #dce5f1;
  font-size: .85rem;
  font-weight: 700;
}

#panelDocente input,
#panelDocente textarea,
#adminReservar input,
#adminReservar select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 11px;
  background: rgba(4, 12, 23, .62);
  color: #f8fafc;
  font: inherit;
  font-size: 16px;
}

#panelDocente input::placeholder,
#panelDocente textarea::placeholder {
  color: #8392a8;
}

#panelDocente input:focus,
#panelDocente textarea:focus,
#adminReservar input:focus,
#adminReservar select:focus {
  border-color: #e6b200;
  outline: 3px solid rgba(230, 178, 0, .17);
}

#panelDocente input:disabled {
  opacity: .68;
}

.perfil-materia small {
  color: #9eacc0;
  font-size: .75rem;
  line-height: 1.45;
}

#panelDocente button,
#adminReservar button {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 11px;
  font: inherit;
  font-size: .86rem;
  font-weight: 750;
}

#guardarMateria,
#guardarPrecio,
#guardarBio,
.btn-guardar-horarios,
#btnReservarAdmin {
  color: #101827;
  background: linear-gradient(135deg, #f3cb62, #dfa927);
  box-shadow: 0 5px 14px rgba(205, 150, 35, .12);
}

#panelDocente button:hover,
#adminReservar button:hover {
  filter: brightness(1.06);
}

#panelDocente button:focus-visible,
#adminReservar button:focus-visible,
.btn-clases:focus-visible,
.text-link:focus-visible {
  outline: 3px solid rgba(243, 203, 98, .55);
  outline-offset: 3px;
}

.input-con-prefijo {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 11px;
  background: rgba(4, 12, 23, .62);
  color: #f3cb62;
  font-weight: 700;
}

.input-con-prefijo input {
  border: 0 !important;
  background: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.input-con-prefijo:focus-within {
  border-color: #e6b200;
  outline: 3px solid rgba(230, 178, 0, .17);
}

.perfil-bio {
  display: grid;
  gap: 9px;
}

.perfil-bio textarea {
  min-height: 96px;
}

.perfil-bio button {
  justify-self: start;
}

.btn-secundario {
  min-height: 44px;
  color: #dbe5f1;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  background: rgba(255, 255, 255, .04);
}

.resumen-docente {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 1480px;
  margin: 0 auto 22px;
}

.card-resumen {
  display: grid;
  min-width: 0;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 16px;
}

.card-resumen span {
  color: #a8b6c8;
  font-size: .8rem;
  font-weight: 650;
  line-height: 1.4;
}

.card-resumen strong {
  color: #f3cb62;
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.card-resumen:hover {
  transform: translateY(-2px);
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.section-title-row h2 {
  margin-bottom: 8px;
}

.section-title-row .card-description {
  margin: 0;
}

.text-link {
  min-height: 40px;
  padding: 0 13px;
  color: #f2ca63;
  border-color: rgba(230, 178, 0, .24);
  background: rgba(230, 178, 0, .08);
  font-size: .82rem;
  white-space: nowrap;
}

.estado-cargando,
.estado-vacio {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 1px dashed rgba(148, 163, 184, .24);
  border-radius: 14px;
  color: #a8b6c8;
  font-size: .9rem;
  line-height: 1.5;
  text-align: center;
}

.estado-cargando[hidden],
.estado-vacio[hidden] {
  display: none;
}

#listaClases {
  display: grid;
  gap: 12px;
}

.clase-item {
  min-width: 0;
  margin: 0;
  padding: 17px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-left: 4px solid #64748b;
  border-radius: 15px;
  background: rgba(5, 14, 26, .58);
  color: #dce5f1;
}

.clase-item:hover {
  transform: translateY(-1px);
  border-top-color: rgba(148, 163, 184, .3);
  border-right-color: rgba(148, 163, 184, .3);
  border-bottom-color: rgba(148, 163, 184, .3);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

.clase-item.estado-reservado,
.clase-item.estado-confirmada,
.clase-item.estado-linkeado { border-left-color: #38bdf8; }

.clase-item.estado-terminando,
.clase-item.estado-finalizando,
.clase-item.estado-por-liquidar { border-left-color: #f3cb62; }

.clase-item.estado-liquidado,
.clase-item.estado-pagado { border-left-color: #34d399; }

.clase-item.estado-cancelado,
.clase-item.estado-rechazada,
.clase-item.estado-rechazada-por-docente { border-left-color: #fb7185; }

.clase-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.clase-card-header strong {
  color: #f8fafc;
  font-size: .97rem;
  line-height: 1.4;
}

.clase-estado {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(56, 189, 248, .2);
  border-radius: 999px;
  background: rgba(56, 189, 248, .1);
  color: #8bdcff;
  font-size: .7rem;
  font-weight: 750;
}

.clase-item p {
  margin: 7px 0;
  color: #aebbd0;
  font-size: .86rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.clase-item p strong { color: #dce5f1; }
.clase-item a { color: #7dd3fc; text-decoration: underline; text-underline-offset: 3px; }

.clase-item .actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(148, 163, 184, .12);
}

.clase-item .actions input { flex: 1 1 250px; }
.clase-item .actions button { flex: 0 1 auto; }
.clase-item .btn-warning { color: #17130a !important; background: #f3cb62 !important; }
.clase-item .btn-success { color: #052e25 !important; background: #6ee7b7 !important; }
.clase-item .btn-danger { color: #fff !important; background: #be435a !important; }

.matriz-horarios {
  margin: 15px 0;
  padding: 8px;
  border: 1px solid rgba(230, 178, 0, .2);
  border-radius: 13px;
  background: rgba(4, 12, 23, .48);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.tabla-matriz { min-width: 790px; }
.tabla-matriz th { border-bottom-width: 1px; }

.celda-hora-label {
  position: sticky;
  left: 0;
  z-index: 1;
}

.tabla-matriz thead .celda-hora {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#listaReservasAdmin {
  display: grid;
  gap: 10px;
}

#listaReservasAdmin .horario-item {
  justify-content: space-between;
  border: 1px solid rgba(148, 163, 184, .14);
  background: rgba(5, 14, 26, .58);
}

#listaReservasAdmin .btn-danger {
  color: #fff;
  background: #be435a;
}

#adminReservar .form-grid button { align-self: end; }

body.light {
  background: #f1f5f9;
  color: #172033;
}

body.light header.header {
  background: rgba(255, 255, 255, .95);
  border-bottom-color: #dce3ed;
  color: #172033;
}

body.light .header .user,
body.light .panel-heading h1,
body.light .card h2,
body.light .perfil-info h2 { color: #172033; }

body.light .panel-heading p:last-child,
body.light .header-eyebrow,
body.light .panel-eyebrow,
body.light .card-description,
body.light .perfil-materia small,
body.light .card-resumen span { color: #536174; }

body.light .card,
body.light .card-resumen,
body.light .perfil-docente {
  border-color: #dce3ed;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}

body.light .perfil-modalidades {
  border-color: #cbd5e1;
  background: #f8fafc;
}

body.light .perfil-modalidades legend,
body.light .perfil-modalidades label {
  color: #475569;
}

body.light .modalidades-ayuda,
body.light #estadoModalidades {
  color: #536174;
}

body.light #panelDocente input,
body.light #panelDocente textarea,
body.light #adminReservar input,
body.light #adminReservar select,
body.light .input-con-prefijo {
  border-color: #cbd5e1;
  background: #f8fafc !important;
  color: #172033;
  color-scheme: light;
}

body.light .perfil-modalidades input[type="checkbox"] {
  background: transparent !important;
}

body.light .perfil-materia label,
body.light .perfil-precio label,
body.light .perfil-bio label,
body.light .perfil-info .muted,
body.light .perfil-rating span { color: #475569; }

body.light .clase-item { border-color: #e2e8f0; background: #f8fafc; }
body.light .clase-card-header strong,
body.light .clase-item p strong { color: #172033; }
body.light .clase-item p { color: #475569; }

body.light .estado-cargando,
body.light .estado-vacio { border-color: #cbd5e1; color: #536174; }

@media (max-width: 1100px) {
  .perfil-top {
    grid-template-columns: 82px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "foto info info"
      "materia materia precio";
    align-items: start;
  }

  .perfil-foto { grid-area: foto; }
  .perfil-info { grid-area: info; align-self: center; }
  .perfil-materia { grid-area: materia; }
  .perfil-precio { grid-area: precio; }
}

@media (max-width: 900px) {
  .panel-docente { margin-left: 0; padding: 22px; }
  .resumen-docente { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .panel-docente { padding: 17px 13px calc(24px + env(safe-area-inset-bottom)); }
  .header .logo img { max-width: 118px; height: 31px; }
  .header .user { font-size: .82rem; }
  .header-eyebrow { font-size: .58rem; }

  .panel-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 17px;
  }

  .panel-heading p:last-child { font-size: .87rem; }
  .btn-clases { width: 100%; min-height: 48px; }
  .card { margin-bottom: 15px; padding: 17px 14px; border-radius: 16px; }

  .perfil-docente::after {
    position: static;
    align-self: flex-end;
    order: -1;
    margin: -5px 0 -7px;
    padding: 4px 8px;
    font-size: .57rem;
  }

  .perfil-top {
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-areas:
      "foto info"
      "materia materia"
      "precio precio";
    gap: 16px 13px;
  }

  .perfil-foto { width: 68px; height: 68px; border-radius: 18px; }
  .perfil-info h2 { padding-right: 18px; font-size: 1.15rem; }
  .perfil-rating { margin-top: 7px; font-size: .85rem; }
  .perfil-materia small { font-size: .72rem; }

  .perfil-bio button,
  #guardarMateria,
  #guardarPrecio,
  .btn-guardar-horarios,
  #btnReservarAdmin { width: 100%; }

  .resumen-docente { gap: 10px; margin-bottom: 15px; }
  .card-resumen { gap: 8px; padding: 14px 12px; border-radius: 14px; }
  .card-resumen span { font-size: .72rem; }
  .card-resumen strong { font-size: 1.35rem; }
  .section-title-row { align-items: flex-start; }
  .section-title-row .text-link { min-height: 36px; padding: 0 10px; font-size: .75rem; }
  .clase-item { padding: 14px 12px; border-radius: 13px; }

  .clase-card-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .clase-item .actions { align-items: stretch; flex-direction: column; }

  .clase-item .actions input,
  .clase-item .actions button {
    width: 100%;
    min-height: 46px;
    flex: 1 1 auto;
  }

  .form-grid { grid-template-columns: 1fr; }
  #listaReservasAdmin .horario-item { align-items: stretch; flex-direction: column; }
  #listaReservasAdmin .btn-danger { width: 100%; }
  .tabla-matriz { min-width: 760px; }
}

@media (max-width: 360px) {
  .panel-docente { padding-right: 10px; padding-left: 10px; }
  .header { padding-right: 10px; padding-left: 10px; }
  .header .logo img { max-width: 94px; }
  .header .user { font-size: .75rem; }
  .resumen-docente { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-docente *,
  .panel-docente *::before,
  .panel-docente *::after,
  .header * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}