/* ============================================================
   AKDMY · campus — estilos de los paneles
   Se carga después de panel.css, del que hereda paleta y
   tipografía. El fondo es el mismo .campus del login: quieto,
   sin auroras, porque aquí se trabaja.
   ============================================================ */

/* El lienzo del login centra su tarjeta; el panel necesita fluir
   de arriba abajo, así que anula esa rejilla. */
.campus--panel { display: block; place-items: initial; padding: 0; }
.pnl { min-height: 100svh; }

/* ------------------------------------------------- cabecera */
.pnl__cab {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: var(--pa-cab);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--pa-borde);
}
.pnl__marca img { height: 36px; width: auto; display: block; }
.pnl__rol {
  padding: 5px 13px;
  border-radius: 99px;
  background: rgba(88, 87, 213, .18);
  border: 1px solid rgba(125, 124, 255, .35);
  color: var(--pa-violeta2);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pnl__yo { margin-left: auto; display: flex; align-items: center; gap: 11px; }
.pnl__yo b { display: block; font-size: .9rem; font-weight: 600; line-height: 1.2; }
.pnl__yo small { color: var(--pa-tenue); font-size: .76rem; }
.pnl__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--pa-violeta), var(--pa-magenta));
  font-size: .84rem; font-weight: 700;
  flex: none;
}
.pnl__salir {
  padding: 9px 17px;
  border: 1px solid var(--pa-borde);
  border-radius: 99px;
  background: rgba(255, 255, 255, .05);
  color: var(--pa-texto);
  font-family: var(--pa-tipo);
  font-size: .86rem;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.pnl__salir:hover { background: rgba(216, 50, 74, .2); border-color: rgba(216, 50, 74, .5); }
@media (max-width: 700px) {
  .pnl__yo span:last-child { display: none; }
  .pnl__rol { display: none; }
}

/* -------------------------------------------------- pestañas */
.pnl__nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 18px clamp(16px, 4vw, 40px) 0;
  scrollbar-width: none;
}
.pnl__nav::-webkit-scrollbar { display: none; }
.pnl__nav button {
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 99px;
  background: transparent;
  color: var(--pa-tenue);
  font-family: var(--pa-tipo);
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.pnl__nav button:hover { color: var(--pa-texto); background: rgba(255, 255, 255, .05); }
.pnl__nav button[aria-selected="true"] {
  color: var(--pa-texto);
  background: rgba(255, 255, 255, .07);
  border-color: var(--pa-borde);
}

/* ---------------------------------------------------- lienzo */
.pnl__cuerpo { padding: 22px clamp(16px, 4vw, 40px) 70px; }
.pnl__seccion h2 { font-size: 1.35rem; font-weight: 600; margin: 0 0 4px; }
.pnl__seccion > p.intro { margin: 0 0 22px; color: var(--pa-suave); font-size: .93rem; }

/* ---------------------------------------------------- cifras */
.pnl__cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}
.pnl__cifra {
  position: relative;
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--pa-cristal);
  border: 1px solid var(--pa-borde);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .9),
              inset 0 1px 0 rgba(255, 255, 255, .07);
  overflow: hidden;
  transition: transform .35s var(--pa-ease), box-shadow .35s;
}
.pnl__cifra b {
  display: block;
  font-size: 1.95rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.pnl__cifra span {
  display: block;
  margin-top: 5px;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pa-tenue);
}
.pnl__cifra[data-tono="dinero"] b {
  background: linear-gradient(105deg, #fff, var(--pa-violeta2), var(--pa-magenta2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* -------------------------------------------------- tarjetas */
.pnl__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.pnl__tarjeta {
  position: relative;
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--pa-cristal);
  border: 1px solid var(--pa-borde);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .9),
              inset 0 1px 0 rgba(255, 255, 255, .07);
  overflow: hidden;
  transition: transform .35s var(--pa-ease), box-shadow .35s;
}

/* El filo de color que se enciende al pasar por encima, el mismo
   de .ak-cristal en clases.html: un degradado de un pixel recortado
   con una mascara para que solo quede el borde. */
.pnl__cifra::before,
.pnl__tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(125, 124, 255, .75), transparent 38%,
              transparent 62%, rgba(255, 79, 216, .6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}
.pnl__cifra:hover::before,
.pnl__tarjeta:hover::before { opacity: 1; }

.pnl__cifra:hover,
.pnl__tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 66px -30px rgba(0, 0, 0, .95),
              inset 0 1px 0 rgba(255, 255, 255, .1);
}

@media (prefers-reduced-motion: reduce) {
  .pnl__cifra, .pnl__tarjeta { transition: none; }
  .pnl__cifra:hover, .pnl__tarjeta:hover { transform: none; }
}
.pnl__tarjeta h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 3px; }
.pnl__tarjeta .sub { color: var(--pa-tenue); font-size: .84rem; margin: 0 0 14px; }
.pnl__tarjeta dl { margin: 0; display: grid; gap: 7px; font-size: .88rem; }
.pnl__tarjeta dl > div { display: flex; gap: 10px; }
.pnl__tarjeta dt { color: var(--pa-tenue); min-width: 92px; flex: none; }
.pnl__tarjeta dd { margin: 0; color: var(--pa-suave); }
.pnl__tarjeta .pie { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------- tablas */
.pnl__tabla { width: 100%; overflow-x: auto; }
.pnl__tabla table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 540px; }
.pnl__tabla th {
  text-align: left;
  padding: 11px 14px;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pa-tenue);
  border-bottom: 1px solid var(--pa-borde);
  white-space: nowrap;
}
.pnl__tabla td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  color: var(--pa-suave);
  vertical-align: middle;
}
.pnl__tabla tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.pnl__tabla td b { color: var(--pa-texto); font-weight: 600; }
.pnl__tabla td.der, .pnl__tabla th.der { text-align: right; }

/* ------------------------------------------------- etiquetas */
.pnl__pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.pnl__pill[data-rol="admin"]    { background: rgba(255, 192, 0, .16);   color: #ffdf94; }
.pnl__pill[data-rol="profesor"] { background: rgba(125, 124, 255, .18); color: #b9b8ff; }
.pnl__pill[data-rol="alumno"]   { background: rgba(53, 229, 255, .13);  color: #a9f0ff; }
.pnl__pill[data-estado="activa"]     { background: rgba(53, 229, 255, .13);  color: #a9f0ff; }
.pnl__pill[data-estado="completada"] { background: rgba(125, 124, 255, .18); color: #b9b8ff; }
.pnl__pill[data-estado="retirada"]   { background: rgba(255, 255, 255, .08); color: var(--pa-tenue); }

.pnl__nota { font-variant-numeric: tabular-nums; font-weight: 600; }
.pnl__nota[data-aprueba="si"] { color: #7ee6a8; }
.pnl__nota[data-aprueba="no"] { color: #ff9bab; }

/* -------------------------------------------------- acciones */
.pnl__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; align-items: center; }
.pnl__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 0;
  border-radius: 99px;
  font-family: var(--pa-tipo);
  font-size: .89rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  background: linear-gradient(115deg, var(--pa-violeta), var(--pa-magenta));
  transition: transform .25s var(--pa-ease), box-shadow .25s, background-color .25s;
}
.pnl__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(210, 3, 171, .8); color: #fff; }
.pnl__btn--suave { background: rgba(255, 255, 255, .06); border: 1px solid var(--pa-borde); }
.pnl__btn--suave:hover { background: rgba(255, 255, 255, .12); box-shadow: none; }
.pnl__btn--mini { padding: 7px 14px; font-size: .8rem; }
.pnl__btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.pnl__vacio {
  padding: 34px 20px;
  text-align: center;
  color: var(--pa-tenue);
  font-size: .92rem;
  border: 1px dashed var(--pa-borde);
  border-radius: 18px;
}

/* --------------------------------------------------- diálogo */
.pnl__dialogo { border: 0; padding: 0; background: transparent; max-width: min(580px, 94vw); width: 100%; }
.pnl__dialogo::backdrop { background: rgba(7, 7, 15, .74); backdrop-filter: blur(5px); }
.pnl__dialogo .caja {
  background: var(--pa-panel);
  border: 1px solid var(--pa-borde);
  border-radius: 26px;
  padding: 28px;
  box-shadow: 0 40px 90px -40px #000;
}
.pnl__dialogo h3 { margin: 0 0 18px; font-size: 1.2rem; font-weight: 600; }
.pnl__dialogo .pie { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* -------------------------------------------------- mensajes */
.pnl__chat { display: grid; gap: 12px; max-height: 480px; overflow-y: auto; padding-right: 6px; }
.pnl__msg { padding: 14px 17px; border-radius: 16px; background: var(--pa-cristal); border: 1px solid var(--pa-borde); }
.pnl__msg[data-mio] { background: rgba(88, 87, 213, .14); border-color: rgba(125, 124, 255, .3); }
.pnl__msg header { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; font-size: .8rem; flex-wrap: wrap; }
.pnl__msg header b { color: var(--pa-texto); font-weight: 600; }
.pnl__msg header time { margin-left: auto; color: var(--pa-tenue); }
.pnl__msg p { margin: 0; color: var(--pa-suave); font-size: .92rem; line-height: 1.55; white-space: pre-wrap; }
.pnl__msg .destino { color: var(--pa-violeta2); font-size: .74rem; padding: 2px 8px; border-radius: 99px; background: rgba(125, 124, 255, .14); }

.pnl__dos { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .pnl__dos { grid-template-columns: 1fr; } }

.pnl__caja {
  padding: 22px;
  border-radius: 22px;
  background: var(--pa-cristal);
  border: 1px solid var(--pa-borde);
}
.pnl__caja h3 { margin: 0 0 16px; font-size: 1.02rem; font-weight: 600; }
.pnl__caja textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  padding: 13px 16px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--pa-borde);
  border-radius: 12px;
  color: var(--pa-texto);
  font-family: var(--pa-tipo);
  font-size: .93rem;
}
.pnl__caja textarea:focus {
  outline: 0;
  border-color: rgba(125, 124, 255, .75);
  box-shadow: 0 0 0 4px rgba(88, 87, 213, .16);
}

/* ------------------------------------------------ certificado */
.cert {
  padding: 46px 40px;
  border-radius: 22px;
  background: linear-gradient(150deg, #12122b, #0a0a18);
  border: 1px solid rgba(125, 124, 255, .35);
  text-align: center;
}
.cert__sello { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--pa-ambar); }
.cert h3 { font-size: 1.55rem; font-weight: 500; margin: 14px 0 16px; letter-spacing: -.02em; }
.cert .quien { font-size: 1.2rem; color: #fff; font-weight: 600; }
.cert .curso { color: var(--pa-suave); margin: 12px 0 0; }
.cert .codigo { margin-top: 24px; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--pa-tenue); letter-spacing: .08em; }
.cert .codigo--url { margin-top: 4px; font-size: .74rem; letter-spacing: .04em; }

@media print {
  .pnl__cab, .pnl__nav, .pnl__acciones, .pnl__seccion > h2, .pnl__seccion > p.intro { display: none !important; }
  html, body, .campus, .pnl { background: #fff !important; }
  .campus::before, .campus::after { display: none !important; }
  .cert { background: #fff !important; border-color: #5857d5 !important; break-inside: avoid; }
  .cert h3, .cert .quien { color: #0c0c1d !important; }
  .cert .curso, .cert .codigo { color: #444 !important; }
  .cert__sello { color: #b8860b !important; }
}

/* ============================================================
   Ficha de una postulación (Trabaja aquí)
   ============================================================ */

.pnl__dialogo--ancho { max-width: min(760px, 94vw); }
.pnl__dialogo--ancho .caja { max-height: 88vh; overflow-y: auto; }

/* En la tabla, la segunda línea de cada celda. */
.pnl__tabla .sub { color: var(--pa-tenue); font-size: .78rem; }

.ficha { margin-bottom: 22px; }

.ficha__foto { margin-bottom: 18px; }

.ficha dl {
  display: grid;
  gap: 11px;
  margin: 0 0 20px;
}

.ficha dl > div {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ficha dl > div:last-child { border-bottom: 0; padding-bottom: 0; }

.ficha dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--pa-tenue);
}

.ficha dd {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--pa-texto);
  word-break: break-word;
  white-space: pre-wrap;
}
.ficha dd a { color: var(--pa-violeta2); }

.ficha__adjuntos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

@media (max-width: 560px) {
  .ficha dl > div { grid-template-columns: 1fr; gap: 3px; }
}

/* Una cuenta bloqueada tiene que cantar en la tabla: es lo que
   explica que esa persona no pueda entrar. */
.pnl__pill[data-estado="bloqueada"] {
  background: rgba(216, 50, 74, .16);
  color: #ffb3c0;
}

/* Los dos botones de acción no deben partirse en dos líneas. */
.pnl__tabla td.nowrap { white-space: nowrap; }

/* ============================================================
   Tarjeta de curso (panel del alumno)

   La tarjeta anterior era una lista de datos: cumplía, pero no
   distinguía un curso de otro de un vistazo. Ahora cada uno entra
   por el color y la portada, y los datos quedan debajo.
   ============================================================ */

.curso { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.curso__portada {
  position: relative;
  aspect-ratio: 16 / 7;
  background: linear-gradient(125deg, var(--c1), var(--c2));
  overflow: hidden;
}

.curso__portada img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Un velo para que la etiqueta se lea sobre cualquier foto. */
.curso__portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 7, 15, .12) 40%, rgba(7, 7, 15, .74));
}

.curso__nivel {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(7, 7, 15, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.curso__cuerpo {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.curso__cuerpo h3 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 600; }
.curso__cuerpo .sub { margin: 0 0 14px; font-size: .84rem; line-height: 1.5; color: var(--pa-tenue); }

.curso__datos { display: grid; gap: 6px; font-size: .84rem; }
.curso__datos > div { display: flex; gap: 10px; }
.curso__datos dt { color: var(--pa-tenue); min-width: 66px; flex: none; }
.curso__datos dd { margin: 0; color: var(--pa-suave); }

/* --- avance ------------------------------------------------- */

.curso__avance { margin-top: 16px; }

.curso__barra {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  margin-bottom: 7px;
}
.curso__barra i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--pa-violeta2), var(--pa-magenta2));
  transition: width .6s var(--pa-ease);
}
.curso__avance span { font-size: .78rem; color: var(--pa-tenue); }

.curso__precio {
  margin-top: 14px;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.02em;
  background: linear-gradient(100deg, var(--pa-violeta2), var(--pa-magenta2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* El pie se pega abajo: con tarjetas de distinto alto, los
   botones quedan alineados entre sí. */
.curso .pie { margin-top: auto; padding-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }

.pnl__subtitulo {
  margin: 24px 0 14px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pa-tenue);
}

/* ============================================================
   Fondo animado de los paneles

   Los mismos efectos que la portada de clases.html. Van FIJOS a
   la ventana y no al documento: un panel mide miles de píxeles y
   una capa de ese tamaño se rasteriza entera en cada scroll.
   Fijas ocupan una pantalla y el desplazamiento sigue suave.
   ============================================================ */

#fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#fondo .aurora {
  position: absolute;
  width: 58vw;
  height: 58vw;
  min-width: 380px;
  min-height: 380px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .34;
  will-change: transform;
}
#fondo .aurora.a {
  background: radial-gradient(circle, #5857d5, transparent 62%);
  top: -30%; left: -14%;
  animation: pnl-deriva1 22s ease-in-out infinite;
}
#fondo .aurora.b {
  background: radial-gradient(circle, #d203ab, transparent 62%);
  top: 14%; right: -20%;
  animation: pnl-deriva2 27s ease-in-out infinite;
}
#fondo .aurora.c {
  background: radial-gradient(circle, #182a6b, transparent 62%);
  bottom: -36%; left: 24%;
  animation: pnl-deriva3 31s ease-in-out infinite;
}

@keyframes pnl-deriva1 { 0%,100% { transform: translate3d(0,0,0) scale(1); }   50% { transform: translate3d(14%, 12%, 0) scale(1.18); } }
@keyframes pnl-deriva2 { 0%,100% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-16%, -10%, 0) scale(.92); } }
@keyframes pnl-deriva3 { 0%,100% { transform: translate3d(0,0,0) scale(1); }   50% { transform: translate3d(10%, -14%, 0) scale(1.22); } }

#fondo .malla {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 82% 78% at 50% 38%, #000 32%, transparent 80%);
  mask-image: radial-gradient(ellipse 82% 78% at 50% 38%, #000 32%, transparent 80%);
}

#fondo .grano {
  position: absolute;
  inset: -200%;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: pnl-grano 7s steps(6) infinite;
}
@keyframes pnl-grano {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3%, 4%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -4%); }
  80% { transform: translate(4%, 2%); }
}

#fondo #constelacion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .45;
}

#fondo #foco {
  position: absolute;
  top: 0;
  left: 0;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 124, 255, .13), transparent 62%);
  opacity: 0;
  transition: opacity .4s;
  will-change: transform;
}

/* El color de base va en el body: si lo pintara el panel, taparía
   el fondo que está detrás. El panel queda transparente y por
   encima, y deja de dibujar su rejilla estática — ahora la pone
   #fondo, animada. */
body { background: var(--pa-fondo); }
.campus--panel { position: relative; z-index: 1; background: transparent; }
.campus--panel::before { display: none; }
/* Aquí NO se toca la posición de los hijos. El panel ya está en
   z-index 1 y el fondo en 0, así que todo lo que hay dentro pinta
   por encima sin ayuda. Cuando esto forzaba position:relative a
   cada hijo, le quitaba el sticky a la cabecera y dejaba el
   desplegable de avisos por debajo del menú. */

@media (prefers-reduced-motion: reduce) {
  #fondo .aurora, #fondo .grano { animation: none; }
}

/* ============================================================
   Mis datos

   Antes era una lista estrecha dentro de una tarjeta que ocupaba
   un tercio del ancho: mucho hueco a la derecha y los campos
   apretados. Ahora la ficha se reparte en columnas y separa lo
   personal de lo de contacto.
   ============================================================ */

.ficha-yo {
  max-width: 780px;
  padding: 26px 28px;
  border-radius: 22px;
  background: var(--pa-cristal);
  border: 1px solid var(--pa-borde);
}

.ficha-yo__cab {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ficha-yo__avatar {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--pa-violeta), var(--pa-magenta));
  box-shadow: 0 10px 26px -12px rgba(210, 3, 171, .9);
}

.ficha-yo__cab h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.ficha-yo__cab p { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ficha-yo__desde { font-size: .8rem; color: var(--pa-tenue); }

.ficha-yo__grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}

.ficha-yo__grupo h4 {
  margin: 0 0 12px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pa-violeta2);
}

.ficha-yo__grupo dl { margin: 0; display: grid; gap: 11px; }
.ficha-yo__grupo dl > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.ficha-yo__grupo dl > div:last-child { border-bottom: 0; padding-bottom: 0; }

.ficha-yo__grupo dt {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pa-tenue);
}
.ficha-yo__grupo dd {
  margin: 0;
  font-size: .93rem;
  color: var(--pa-texto);
  word-break: break-word;
}

.ficha-yo__nota {
  margin: 24px 0 0;
  padding: 14px 17px;
  border-radius: 13px;
  border-left: 3px solid var(--pa-violeta);
  background: rgba(88, 87, 213, .1);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--pa-suave);
}
.ficha-yo__nota b { color: var(--pa-texto); }

@media (max-width: 520px) {
  .ficha-yo { padding: 20px 18px; }
  .ficha-yo__grupo dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   Clase en vivo, lista de estudiantes y acciones en fila
   ============================================================ */

/* La cátedra que se está dictando ahora. El borde encendido evita
   tener que leer las tarjetas una por una para encontrarla. */
.pnl__tarjeta[data-viva] {
  border-color: rgba(53, 229, 255, .5);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .9),
              inset 0 1px 0 rgba(255, 255, 255, .07),
              0 0 0 1px rgba(53, 229, 255, .25);
}

.pnl__vivo {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(216, 50, 74, .18);
  border: 1px solid rgba(216, 50, 74, .5);
  color: #ff9aa8;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  animation: pnl-latido 2s ease-in-out infinite;
}

@keyframes pnl-latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .pnl__vivo { animation: none; }
}

.pnl__tenue { color: var(--pa-tenue); font-size: .82rem; }

/* Los tres botones de cada fila. Se apilan en pantalla estrecha
   en vez de estirar la tabla a lo ancho. */
.pnl__acc {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  white-space: nowrap;
}

.pnl__btn--mini[data-cargando] { cursor: progress; opacity: .7; }

/* Campo en línea, para los filtros que van sobre una tabla. */
.pa-campo--linea {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.pa-campo--linea > span {
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pa-tenue);
}
.pa-campo--linea select { width: auto; min-width: 190px; }

/* ============================================================
   La campanita
   ============================================================ */

.pnl__campana { position: relative; flex: none; }

.pnl__campana__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--pa-borde);
  background: var(--pa-cristal);
  color: var(--pa-suave);
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.pnl__campana__btn:hover {
  color: var(--pa-texto);
  border-color: rgba(125, 124, 255, .5);
  background: rgba(125, 124, 255, .12);
}
.pnl__campana__btn svg { width: 18px; height: 18px; }

/* El contador. Va sobre el borde del botón, como en cualquier
   bandeja: si cupiera dentro se confundiría con el icono. */
.pnl__campana__num {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: linear-gradient(120deg, var(--pa-violeta2), var(--pa-magenta2));
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--pa-fondo);
}

.pnl__avisos {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  max-height: min(460px, 70vh);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--pa-panel);
  border: 1px solid var(--pa-borde);
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .45);
}
.pnl__avisos[hidden] { display: none; }

.pnl__avisos > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--pa-borde);
  font-size: .84rem;
  font-weight: 600;
  color: var(--pa-texto);
}
.pnl__avisos > header button {
  border: 0;
  background: none;
  color: var(--pa-violeta2);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
}
.pnl__avisos > header button:hover { text-decoration: underline; }

#avisos-lista { overflow-y: auto; }

.pnl__avisos__vacio {
  margin: 0;
  padding: 26px 16px;
  text-align: center;
  color: var(--pa-tenue);
  font-size: .86rem;
}

.pnl__aviso {
  display: flex;
  gap: 11px;
  width: 100%;
  padding: 13px 15px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s;
}
.pnl__aviso:hover  { background: rgba(255, 255, 255, .04); }
.pnl__aviso:last-child { border-bottom: 0; }

.pnl__aviso__ico {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(125, 124, 255, .16);
  color: var(--pa-violeta2);
  font-size: .8rem;
}
/* Una clase que ha empezado no es un mensaje más: se distingue. */
.pnl__aviso[data-clase] .pnl__aviso__ico {
  background: rgba(216, 50, 74, .18);
  color: #ff9aa8;
}

.pnl__aviso b { display: block; font-size: .87rem; font-weight: 600; color: var(--pa-texto); }
.pnl__aviso__txt {
  display: block;
  margin-top: 2px;
  font-size: .81rem;
  color: var(--pa-suave);
  line-height: 1.45;
}
.pnl__aviso__pie {
  display: block;
  margin-top: 5px;
  font-size: .72rem;
  color: var(--pa-tenue);
}

@media (max-width: 560px) {
  .pnl__avisos { right: -60px; }
}

/* ============================================================
   Cursos en el panel administrativo
   ============================================================ */

.pnl__pill[data-activo="si"] { background: rgba(53, 229, 255, .13);  color: #a9f0ff; }
.pnl__pill[data-activo="no"] { background: rgba(255, 255, 255, .08); color: var(--pa-tenue); }

/* Un curso inhabilitado sigue en la lista, pero apagado: si se
   escondiera, quien lo inhabilitó no encontraría cómo revertirlo. */
.pnl__tabla tr[data-apagado] td { opacity: .55; }
.pnl__tabla tr[data-apagado] td:last-child { opacity: 1; }

/* Borrar arrastra matrículas, notas y certificados. El botón se
   viste de lo que es y no se confunde con los de al lado. */
.pnl__btn--peligro {
  border-color: rgba(216, 50, 74, .45);
  background: rgba(216, 50, 74, .12);
  color: #ff9aa8;
}
.pnl__btn--peligro:hover {
  border-color: rgba(216, 50, 74, .8);
  background: rgba(216, 50, 74, .22);
  color: #fff;
}

/* ============================================================
   Cuadros de diálogo: retoques
   ============================================================ */

/* Contexto del curso que se está viendo. No es un campo, así que
   no se disfraza de uno: va bajo el título, en gris y sin caja
   amarilla de aviso, que aquí no avisa de nada. */
.pa-nota--barra {
  margin: -10px 0 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pa-tenue);
  font-size: .84rem;
}

/* Los días de la semana. Sin esto la casilla se pone encima del
   texto, porque .pa-campo label es display:block. */
.pa-dias { display: flex; gap: 8px; flex-wrap: wrap; }
.pa-dias label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 9px 14px;
  border-radius: 99px;
  border: 1px solid var(--pa-borde);
  background: var(--pa-cristal);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color .2s, background-color .2s, color .2s;
}
.pa-dias label:hover { border-color: rgba(125, 124, 255, .5); }
.pa-dias input { width: auto; margin: 0; accent-color: var(--pa-violeta2); cursor: pointer; }
.pa-dias span { font-size: .86rem; color: var(--pa-suave); }
.pa-dias label:has(input:checked) {
  border-color: rgba(125, 124, 255, .55);
  background: rgba(125, 124, 255, .13);
}
.pa-dias label:has(input:checked) span { color: var(--pa-texto); }

/* Los cuadros largos se desplazan solos en vez de salirse de la
   pantalla; el pie de botones se queda siempre a la vista. */
.pnl__dialogo .caja { max-height: 88vh; overflow-y: auto; }

/* ============================================================
   Tarjetas de clase

   El diseño que tenía el horario público, traído a la paleta
   oscura: distintivo de estado, cuenta atrás y acción. Lo comparten
   el panel del alumno y el del profesor, que es lo que hace que
   una clase se lea igual desde los dos lados.
   ============================================================ */

.tarj {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--pa-cristal);
  border: 1px solid var(--pa-borde);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .9),
              inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .35s var(--pa-ease), box-shadow .35s, border-color .35s;
}

.tarj:hover {
  transform: translateY(-3px);
  border-color: rgba(125, 124, 255, .45);
  box-shadow: 0 30px 66px -30px rgba(0, 0, 0, .95),
              inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* El aula abierta se ve desde el otro lado de la sala. */
.tarj[data-viva] {
  border-color: rgba(255, 0, 190, .5);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .9),
              inset 0 1px 0 rgba(255, 255, 255, .07),
              0 0 0 1px rgba(255, 0, 190, .3);
}

.tarj__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 20px 22px; }

.tarj__top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }

.tarj__nivel {
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(125, 124, 255, .16);
  color: var(--pa-violeta2);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.insig {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.insig--vivo   { background: var(--pa-magenta); color: #fff; }
.insig--hora   { background: rgba(255, 0, 190, .16); color: #ff9ae8; }
.insig--pronto { background: rgba(255, 192, 0, .18); color: #ffdf94; }
.insig--prog   { background: rgba(255, 255, 255, .07); color: var(--pa-tenue); }
.insig--fin    { background: rgba(255, 255, 255, .05); color: var(--pa-tenue); }

.insig .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.insig--vivo .punto { background: #fff; animation: tarj-latido 1.4s ease-in-out infinite; }

@keyframes tarj-latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

.tarj h3 { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }
.tarj__desc {
  margin: 6px 0 0;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--pa-suave);
}

.tarj__meta {
  margin: 16px 0 18px;
  padding-top: 15px;
  border-top: 1px solid var(--pa-borde);
  display: grid;
  gap: 8px;
  font-size: .86rem;
}
.tarj__meta div { display: flex; align-items: center; gap: 9px; color: var(--pa-tenue); }
.tarj__meta svg { width: 15px; height: 15px; flex: none; opacity: .6; }
.tarj__meta b { color: var(--pa-texto); font-weight: 600; }

.tarj__pie { margin-top: auto; }

.tarj__cuenta {
  margin: 0 0 12px;
  min-height: 1.35em;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  color: var(--pa-tenue);
}
.tarj__cuenta b { color: var(--pa-texto); font-weight: 600; }

.tarj__botones { display: flex; gap: 8px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .tarj { transition: none; }
  .tarj:hover { transform: none; }
  .insig--vivo .punto { animation: none; }
}

/* El promedio del alumno, junto a los botones de su tarjeta. */
.tarj__prom {
  margin-left: auto;
  align-self: center;
  padding: 5px 11px;
  border-radius: 99px;
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tarj__prom[data-aprueba="si"] { background: rgba(126, 230, 168, .14); color: #7ee6a8; }
.tarj__prom[data-aprueba="no"] { background: rgba(216, 50, 74, .16);  color: #ff9aa8; }

/* Los dos botones al pie de "Mis datos". */
.ficha-yo__acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--pa-borde);
}

/* Botón de claro/oscuro. Mismo tamaño y forma que la campana: son
   dos controles de la misma fila y deben leerse como pareja. */
.pnl__tema {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--pa-borde);
  background: var(--pa-cristal);
  color: var(--pa-suave);
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s, transform .2s;
}
.pnl__tema:hover {
  color: var(--pa-texto);
  border-color: rgba(125, 124, 255, .5);
  background: rgba(125, 124, 255, .12);
  transform: rotate(-15deg);
}
.pnl__tema svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .pnl__tema:hover { transform: none; }
}

/* El fondo animado se diseñó sobre negro. En claro se atenúa con
   --pa-fuerza en vez de apagarlo: sigue dando profundidad. */
#fondo { opacity: var(--pa-fuerza, 1); }

/* ============================================================
   Modo claro · los acentos

   Los tonos pastel de las pastillas y de los rótulos se eligieron
   para leerse sobre negro. Sobre blanco desaparecen, así que aquí
   se cambian por sus versiones oscuras. El fondo de cada pastilla
   no se toca: es un tinte translúcido y funciona en los dos modos.
   ============================================================ */

:root[data-tema="claro"] {
  --pa-violeta2: #4a49c4;          /* rótulos y enlaces de acento */
  --pa-magenta2: #b3008c;
}

:root[data-tema="claro"] .pnl__pill[data-rol="admin"],
:root[data-tema="claro"] .pa-nota b            { color: #7a5800; }
:root[data-tema="claro"] .pnl__pill[data-rol="profesor"],
:root[data-tema="claro"] .pnl__pill[data-estado="completada"] { color: #3b3aa8; }
:root[data-tema="claro"] .pnl__pill[data-rol="alumno"],
:root[data-tema="claro"] .pnl__pill[data-estado="activa"],
:root[data-tema="claro"] .pnl__pill[data-activo="si"]         { color: #056880; }

:root[data-tema="claro"] .pnl__nota[data-aprueba="si"],
:root[data-tema="claro"] .tarj__prom[data-aprueba="si"]       { color: #106b3e; }
:root[data-tema="claro"] .pnl__nota[data-aprueba="no"],
:root[data-tema="claro"] .tarj__prom[data-aprueba="no"],
:root[data-tema="claro"] .pnl__vivo,
:root[data-tema="claro"] .pnl__btn--peligro,
:root[data-tema="claro"] .pnl__aviso[data-clase] .pnl__aviso__ico { color: #a3122a; }

:root[data-tema="claro"] .insig--hora   { color: #96006f; }
:root[data-tema="claro"] .insig--pronto { color: #7a5800; }

/* El aviso de error del panel es texto claro sobre tinte rojo. */
:root[data-tema="claro"] .pa-aviso[data-tipo="error"] { color: #a3122a; }
:root[data-tema="claro"] .pa-aviso[data-tipo="ok"]    { color: #106b3e; }

/* La cabecera en claro necesita su propia sombra: la de negro
   sobre blanco no se ve y el borde inferior se pierde. */
:root[data-tema="claro"] .pnl__cab {
  box-shadow: 0 1px 3px rgba(12, 12, 29, .07);
}