/* ============================================================
   UNASAM · Escuela de Postgrado — Horarios 2026-I
   styles.css — Hoja de estilos.

   IMPORTANTE sobre el color:
   - La PALETA INSTITUCIONAL (--color-1..5) se usa SOLO para la
     interfaz (barras, botones, titulos, acentos).
   - La SEÑALIZACION DE HORARIOS (que fechas pertenecen a cada
     curso) usa una PALETA PASTEL aparte (--pastel-1..16), suave,
     no intensa, asignada por JavaScript a cada curso.
   ============================================================ */

/* ----- 1. Paleta institucional (solo interfaz) ----- */
:root {
  --color-1: #011d4d;
  /* azul institucional principal */
  --color-2: #6C6877;
  /* gris (texto secundario / neutros) */
  --color-3: #BC2C22;
  /* rojo (acciones destructivas / enfasis) */
  --color-4: #1685BC;
  /* azul claro (enlaces / acentos) */
  --color-5: #2bb4e4;
  /* naranja (acento de realce) */

  /* Derivados de interfaz */
  --navy: var(--color-1);
  --navy-700: #243879;
  --blue: var(--color-4);
  --blue-soft: #e8edf8;
  --accent: var(--color-5);

  /* Neutros */
  --bg: #f3f5fb;
  --surface: #ffffff;
  --ink: #1c2334;
  --muted: var(--color-2);
  --line: #e3e7f1;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(20, 30, 70, .06), 0 8px 24px rgba(20, 30, 70, .07);
  --shadow-sm: 0 1px 2px rgba(20, 30, 70, .08);
}

/* ----- 2. Paleta PASTEL para cursos (señalizacion) -----
   Tonos suaves; el texto sobre ellos es oscuro (--ink). */
:root {
  --pastel-1: #cdd8f2;
  --pastel-2: #d7f0df;
  --pastel-3: #fbd9d6;
  --pastel-4: #cfe8f4;
  --pastel-5: #fde9c9;
  --pastel-6: #e6dcf2;
  --pastel-7: #d9eed0;
  --pastel-8: #f6d8e6;
  --pastel-9: #d2ece9;
  --pastel-10: #f0e2c4;
  --pastel-11: #dfe0ec;
  --pastel-12: #fce0cf;
  --pastel-13: #d6e6da;
  --pastel-14: #ead7e0;
  --pastel-15: #cfe0ea;
  --pastel-16: #efe1d2;
}

/* ----- 2b. Estados (cuenta regresiva de actividades de Tesis, sesiones, etc.) -----
   Una sola fuente de verdad para los colores de "pendiente / en curso /
   por vencer / completado" usados en distintos componentes. */
:root {
  --st-pendiente-bg: #f0f2fa;
  --st-pendiente-fg: var(--muted);
  --st-activa-bg: var(--blue);
  --st-activa-fg: #fff;
  --st-activa-soft-bg: #fff3cd;
  --st-activa-soft-fg: #856404;
  --st-urgente-bg: #e53935;
  --st-urgente-fg: #fff;
  --st-urgente-soft-bg: #ffe5d0;
  --st-urgente-soft-fg: #a33;
  --st-completada-bg: #4caf50;
  --st-completada-fg: #fff;
  --st-completada-soft-bg: #e8f5e9;
  --st-completada-soft-fg: #2e7d32;
  --st-vencido-soft-bg: #fce8e8;
  --st-vencido-soft-fg: #b00;
}

/* ----- 3. Base ----- */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.brand__mark,
.stat__num {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}


.main {
  padding-bottom: 64px;
}

a {
  color: var(--blue);
}

/* ----- 4. Barra superior + logo ----- */
.topbar {
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--accent);
}

.topbar--admin {
  border-bottom-color: var(--color-3);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 7px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand__logo {
  height: 46px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  background: #fff;
  border-radius: 8px;
  padding: 4px 8px;
}

.brand__mark {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--navy);
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .5px;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.brand__text strong {
  font-size: 1rem;
  font-weight: 700;
}

.brand__text span {
  font-size: .8rem;
  color: #c8d2ec;
}

.period-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .12);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .85rem;
  white-space: nowrap;
}

.period-badge i {
  color: var(--accent);
}

/* ----- 5. Hero ----- */
.hero {
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-700) 70%, #1c2c63 100%);
  color: #fff;
  padding: 40px 0 64px;
}

.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 8px;
}

.hero__title {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 800;
  margin: 0 0 8px;
}

.hero__lead {
  color: #cfd8ef;
  max-width: 560px;
  margin: 0;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.stat {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  min-width: 110px;
}

.stat__num {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}

.stat__label {
  font-size: .78rem;
  color: #c8d2ec;
}

/* ----- 6. Avisos institucionales ----- */
.notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: -36px;
  position: relative;
  z-index: 2;
  max-width: 560px;
}

.note {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  gap: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.note__icon {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: #fff;
}

.note--schedule .note__icon {
  background: var(--color-1);
}

.note--virtual .note__icon {
  background: var(--color-4);
}

.note--thesis .note__icon {
  background: var(--color-5);
}

.note h3 {
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.note p {
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 2px;
}

.note p b {
  color: var(--ink);
}

/* ----- 7. Barra de filtros ----- */
.toolbar {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr 1fr 1fr;
  gap: 10px;
  margin: 34px 0 14px;
}

.toolbar__search {
  position: relative;
}

.toolbar__search i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}

.toolbar__search input {
  padding-left: 38px;
}

.form-control,
.form-select {
  border-color: var(--line);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  padding: .55rem .8rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 .2rem rgba(22, 133, 188, .15);
}

/* ----- 8. Acciones / visores ----- */
.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.actions__count {
  font-size: .85rem;
  color: var(--muted);
}

.actions__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-primary {
  background: var(--navy);
  border-color: var(--navy);
}

.btn-primary:hover {
  background: var(--navy-700);
  border-color: var(--navy-700);
}

.btn-accent {
  background: var(--blue-soft);
  color: var(--navy);
  border: 1px solid #cdd9f0;
  font-weight: 600;
}

.btn-accent:hover {
  background: #dde6f6;
  color: var(--navy-700);
}

.btn-outline-primary {
  color: var(--navy);
  border-color: var(--line);
}

.btn-outline-primary.active,
.btn-outline-primary:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.btn-outline-danger {
  color: var(--color-3);
  border-color: var(--color-3);
}

.btn-outline-danger:hover {
  background: var(--color-3);
  border-color: var(--color-3);
  color: #fff;
}

/* ----- 9. Leyenda de colores por curso ----- */
.leyenda-cursos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.leyenda-cursos .ley-titulo {
  width: 100%;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  font-weight: 600;
}

.ley-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
}

.ley-swatch {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .08);
  flex: none;
}

/* ----- 10. Tarjetas de curso ----- */
.resultados.is-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}

.prog-group {
  grid-column: 1/-1;
  margin: 8px 0 2px;
}

.prog-group h2 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.prog-group .pill-ciclo {
  font-size: .72rem;
  font-weight: 600;
  background: var(--blue-soft);
  color: var(--navy);
  padding: 3px 10px;
  border-radius: 999px;
}

.course-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}

.course-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.course-card__top {
  padding: 16px 16px 12px;
  border-left: 5px solid var(--curso-color, var(--navy));
}

.course-card__title {
  font-size: .98rem;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.course-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex: none;
  margin-top: 3px;
  border: 1px solid rgba(0, 0, 0, .08);
}

.course-card__teacher {
  font-size: .82rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.badge-mod {
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.badge-mod--presencial {
  background: #dbeafe;
  color: #1e40af;
}

.badge-mod--virtual {
  background: #dbeafe;
  color: #1e40af;
}

.badge-mod--semipresencial {
  background: #dbeafe;
  color: #1e40af;
}

.badge-mod--mixta {
  background: #dbeafe;
  color: #1e40af;
}

.badge-cred {
  background: #eef1f6;
  color: var(--ink);
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.course-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  padding: 14px 16px;
  background: #fbfcfe;
  border-top: 1px solid var(--line);
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-item .lbl {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
}

.meta-item .val {
  font-size: .84rem;
  font-weight: 600;
}

.course-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}

.course-card__foot .sess {
  font-size: .78rem;
  color: var(--muted);
}

.btn-sessions {
  font-size: .78rem;
  font-weight: 600;
  color: var(--blue);
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
}

.btn-sessions:hover {
  text-decoration: underline;
}

.obs-row {
  padding: 10px 16px;
  font-size: .78rem;
  color: #9a6a12;
  background: #fdf6ea;
  border-top: 1px solid #f1e3c8;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.sessions-detail {
  border-top: 1px solid var(--line);
  background: #fafbfe;
}

.sessions-detail table {
  width: 100%;
  font-size: .78rem;
  margin: 0;
}

.sessions-detail th {
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  padding: 8px 16px;
}

.sessions-detail td {
  padding: 7px 16px;
  border-top: 1px solid var(--line);
}

/* ----- 11. Vista de tabla ----- */
.resultados.is-table {
  display: block;
}

.tabla-horarios {
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border-collapse: collapse;
  font-size: .84rem;
}

.tabla-horarios thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  padding: 11px 12px;
  text-align: left;
  white-space: nowrap;
}

.tabla-horarios tbody td {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.tabla-horarios tbody tr:nth-child(even) {
  background: #fafbfe;
}

.tabla-horarios tbody tr:hover {
  background: var(--blue-soft);
}

.curso-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.curso-cell .course-swatch {
  margin: 0;
}

/* ----- 12. Calendario (color por curso) ----- */
.resultados.is-cal {
  display: block;
}

.cal-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.mes-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .8rem;
  box-shadow: var(--shadow-sm);
}

.mes-chip b {
  color: var(--navy);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.mes {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.mes__title {
  font-weight: 700;
  color: var(--navy);
  text-transform: capitalize;
  margin-bottom: 10px;
  font-size: .95rem;
}

.mes__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.mes__dow {
  font-size: .65rem;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  padding-bottom: 4px;
}

.dia {
  min-height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  font-size: .78rem;
  border-radius: 8px;
  padding: 4px 2px;
  position: relative;
}

.dia--empty {
  visibility: hidden;
}

.dia--clase {
  font-weight: 700;
}

.dia__num {
  line-height: 1;
}

.dia__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  max-width: 100%;
}

.dia__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .10);
}

/* Cuando hay un solo curso ese dia, tiñe el fondo del dia */
.dia--single {
  color: #2b3340;
}

/* ----- 13. Estado vacio ----- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

.empty-state i {
  font-size: 2.6rem;
  color: #b9c2d6;
}

.empty-state p {
  margin: 12px 0 16px;
}

/* ----- 14. Panel de administracion ----- */
.admin-body {
  background: var(--bg);
}

.admin-main {
  padding-top: 28px;
}

.admin-h1 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}

.admin-sub {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 22px;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.admin-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.admin-card--wide {
  grid-column: 1/-1;
}

.admin-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-card p {
  font-size: .85rem;
  color: var(--muted);
}

.admin-card__cols {
  font-size: .72rem !important;
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.5;
}

.radio-row {
  display: flex;
  gap: 18px;
  margin: 10px 0 12px;
  font-size: .85rem;
}

.radio-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.import-msg {
  margin-top: 12px;
  font-size: .84rem;
}

.import-msg.ok {
  color: #1e8e5a;
}

.import-msg.err {
  color: var(--color-3);
}

.admin-stat {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0 14px;
}

.admin-stat span {
  color: var(--navy);
}

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

.admin-filter {
  margin-bottom: 10px;
}

.tesis-dirty-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  font-size: .78rem;
  font-weight: 700;
  color: #a33;
  background: #ffe5d0;
  padding: 4px 10px;
  border-radius: 99px;
}

.admin-table-wrap {
  max-height: 460px;
  overflow: auto;
}

.admin-table {
  font-size: .78rem;
}

.admin-table thead th {
  position: sticky;
  top: 0;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  z-index: 1;
}

/* Compuerta de acceso */
.gate {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

.gate__box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.gate__icon {
  font-size: 2.4rem;
  color: var(--navy);
}

.gate__box h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 10px 0 4px;
}

.gate__box p {
  color: var(--muted);
  font-size: .86rem;
}

.gate__msg {
  color: var(--color-3);
  min-height: 18px;
  margin: 8px 0 0;
  font-size: .82rem;
}

/* ----- 15. Footer ----- */
.footer {
  background: var(--navy);
  color: #c8d2ec;
  padding: 22px 0;
  margin-top: 40px;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .82rem;
}

.footer__note {
  color: #a3b1d4;
}

/* ----- 16. Responsive ----- */
@media (max-width: 900px) {
  .notes {
    grid-template-columns: 1fr;
    margin-top: -28px;
  }

  .toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .toolbar__search {
    grid-column: 1/-1;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  .brand__logo {
    height: 40px;
  }
}

@media (max-width: 560px) {
  .topbar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .toolbar {
    grid-template-columns: 1fr;
  }

  .stat {
    flex: 1;
    min-width: 0;
  }

  .actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .actions__right {
    width: 100%;
  }

  .view-toggle {
    width: 100%;
  }

  .view-toggle .btn {
    flex: 1;
  }
}

/* ----- 17. Accesibilidad ----- */
:focus-visible {
  outline: 3px solid rgba(22, 133, 188, .45);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ============================================================
   18. AÑADIDOS v3: login de estudiante, encabezado, pestañas admin
   ============================================================ */

/* Pestañas (pills) del panel admin */
.app-tabs {
  margin: 0 0 18px;
  gap: 8px;
  flex-wrap: wrap;
}

.app-tabs .nav-link {
  color: var(--navy);
  font-weight: 600;
  border-radius: 999px;
  padding: 9px 18px;
  background: #fff;
  border: 1px solid var(--line);
}

.app-tabs .nav-link:hover {
  background: var(--blue-soft);
}

.app-tabs .nav-link.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Botón azul suave (reutilizado en encabezado de estudiante) */
.btn-light-blue {
  background: var(--blue-soft);
  color: var(--navy);
  border: 1px solid #cdd9f0;
  font-weight: 600;
}

.btn-light-blue:hover {
  background: #dde6f6;
  color: var(--navy-700);
}

/* Vista de ingreso — layout real en sección 20, aquí solo base visual */
.login-view {
  background: radial-gradient(ellipse 80% 50% at 50% -10%,
              rgba(46,70,151,.12), transparent);
}

.login-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 32px 28px 28px;
  width: 100%;
  text-align: center;
}

.btn-ayuda {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.btn-ayuda:hover {
  background: var(--navy);
  color: #fff;
}

/* ============================================================
   TOUR GUIADO (guided.js)
   ============================================================ */
.gd-blocker {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: transparent;
}

.gd-highlight {
  position: absolute;
  z-index: 10000;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(8, 20, 45, .62);
  transition: all .25s ease;
  pointer-events: none;
}

.gd-tooltip {
  position: absolute;
  z-index: 10002;
  width: min(320px, calc(100vw - 32px));
  padding: 18px 18px 14px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(8, 20, 45, .28);
  color: var(--navy);
  transition: top .2s ease, left .2s ease;
}

.gd-tip-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 6px;
  color: var(--navy);
}

.gd-tip-body {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 14px;
}

.gd-tip-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gd-tip-dots {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}

.gd-tip-btns {
  display: flex;
  gap: 8px;
}

.gd-btn {
  border: 0;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.gd-btn--prev {
  background: var(--surface);
  color: var(--navy);
  border: 1px solid var(--line);
}

.gd-btn--prev:hover {
  background: #eef2f7;
}

.gd-btn--next {
  background: var(--blue);
  color: #fff;
}

.gd-btn--next:hover {
  filter: brightness(1.06);
}

.gd-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.gd-close:hover {
  color: var(--navy);
}

.login-card__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(to bottom, var(--navy), var(--blue));
  color: #fff;
  font-size: 1.5rem;
}

.login-card h1 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 5px;
}

.login-card p {
  color: var(--muted);
  font-size: .85rem;
  margin-bottom: 16px;
  line-height: 1.5;
}

.login-label {
  display: block;
  text-align: left;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 5px;
}

.login-card .form-control {
  text-align: center;
  font-weight: 600;
  letter-spacing: .5px;
}

.login-msg {
  color: var(--color-3);
  min-height: 18px;
  margin: 10px 0 0;
  font-size: .82rem;
}

/* Encabezado del estudiante (vista de horario) */
.student-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: linear-gradient(155deg, var(--navy), var(--navy-700));
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 24px 0 4px;
  box-shadow: var(--shadow);
}

.student-head__eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--accent);
}

.student-head__info h1 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 4px 0 4px;
}

.student-head__meta {
  color: #cfd8ef;
  font-size: .85rem;
  margin: 0;
}

.student-head .btn-light-blue {
  background: rgba(255, 255, 255, .92);
}

.student-head__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.student-head__actions .btn-light {
  background: rgba(255, 255, 255, .92);
  border: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 0;
}

/* Cursos sin sesiones regulares (tesis/asesoría) */
.sin-sesiones {
  margin-top: 20px;
}

.sin-sesiones__box {
  background: #fdf6ea;
  border: 1px solid #f1e3c8;
  border-radius: var(--radius);
  padding: 18px 20px;
}

.sin-sesiones__box h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #9a6a12;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sin-sesiones__box p {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 10px;
}

.sin-sesiones__box ul {
  margin: 0;
  padding-left: 20px;
}

.sin-sesiones__box li {
  font-size: .88rem;
  margin-bottom: 4px;
}

/* Cuando los avisos siguen al encabezado del estudiante (no al hero),
   anular el margen negativo que los monta sobre el hero. */
.student-head+.notes {
  margin-top: 18px;
}

@media (max-width: 560px) {
  .student-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .login-card {
    padding: 28px 20px;
  }
}

/* ============================================================
   19. v4: tarjeta rediseñada, modal lateral, sesiones, tesis
   ============================================================ */

/* Ícono Microsoft Teams (SVG embebido) */
.teams-ico {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='2' y='5' width='13' height='14' rx='3' fill='%235b5fc7'/><text x='8.5' y='16' font-family='Arial' font-size='11' font-weight='bold' fill='white' text-anchor='middle'>T</text><circle cx='18.5' cy='9' r='4' fill='%237b83eb'/></svg>");
}

/* ----- Tarjeta de curso ----- */
.resultados.is-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.course-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 16px;
  padding: 18px 18px 0;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}

.course-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.cc-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cc-ico {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}

.cc-ico--tesis {
  background: #fdf0e0;
  color: #cc7a14;
}

.cc-ico--pend {
  background: #eef0f4;
  color: var(--muted);
}

.cc-headtext {
  flex: 1;
  min-width: 0;
}

.cc-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin: 2px 0 5px;
}

.cc-teacher {
  color: var(--muted);
  font-size: .82rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cc-kebab {
  background: none;
  border: none;
  color: #c2c8d6;
  font-size: 1.1rem;
  padding: 2px 4px;
  cursor: default;
  border-radius: 8px;
}

.cc-tag-tesis {
  background: #fdf0e0;
  color: #cc7a14;
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .4px;
  height: fit-content;
  white-space: nowrap;
}

.cc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 4px;
}

/* Badges de modalidad: colores notorios */
.cc-badges .badge-mod,
.cc-badges .badge-cred {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
}

.badge-mod--presencial {
  background: #dbeafe;
  color: #1e40af;
}

.badge-mod--virtual {
  background: #dbeafe;
  color: #1e40af;
}

.badge-mod--semipresencial {
  background: #dbeafe;
  color: #1e40af;
}

.badge-mod--mixta {
  background: #dbeafe;
  color: #1e40af;
}

.cc-badges .badge-cred {
  background: #f3f4f6;
  border: 1px solid var(--line);
  color: var(--ink);
}

.cc-sep {
  height: 1px;
  background: var(--line);
  margin: 12px -18px 0;
}

.cc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 0;
}

.cc-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cc-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 8px;
  border-right: 1px solid var(--line);
}

.cc-grid .cc-cell:last-child,
.cc-grid--2 .cc-cell:last-child {
  border-right: none;
}

.cc-ic {
  color: var(--blue);
  font-size: .95rem;
  margin-bottom: 2px;
  height: 18px;
}

.cc-lbl {
  font-size: .69rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.cc-val {
  font-size: .84rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.cc-val .arw {
  color: var(--blue);
  font-weight: 400;
}

.cc-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  background: #f8f9fc;
  margin: 0 -18px;
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 16px 16px;
}

.cc-horario {
  font-size: .78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.cc-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 8px 14px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .15s;
}

.cc-btn:hover {
  background: var(--navy-700);
}

.cc-btn--tesis {
  background: #fbe9d3;
  color: #a85f0c;
}

.cc-btn--tesis:hover {
  background: #f7dab6;
}

.cc-foot--split {
  justify-content: stretch;
}

.cc-btn--half {
  flex: 1;
  justify-content: center;
}

.aula-teams {
  color: #5b5fc7;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.aula-teams.is-off {
  color: var(--muted);
  cursor: default;
}

.course-card--tesis {
  border-color: #f3e0c8;
}

.course-card--pend {
  opacity: .96;
}

/* ----- Modal lateral derecho ----- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 54, .42);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s;
  z-index: 1040;
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.side-modal {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(480px, 94vw);
  background: #fff;
  box-shadow: -12px 0 40px rgba(20, 28, 54, .18);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  z-index: 1050;
  display: flex;
  flex-direction: column;
}

.side-modal.open {
  transform: translateX(0);
}

.side-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 22px 14px;
  border-bottom: 1px solid var(--line);
}

.sm-ico {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
}

.sm-headtext {
  flex: 1;
  min-width: 0;
}

.sm-headtext h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--ink);
  margin: 2px 0 4px;
  text-transform: uppercase;
}

.sm-sub {
  color: var(--muted);
  font-size: .85rem;
}

.sm-close {
  background: #f1f3f9;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--gray);
  font-size: 1rem;
  cursor: pointer;
  flex: 0 0 36px;
}

.sm-close:hover {
  background: #e6e9f1;
}

.sm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 22px;
}

.sm-badges .badge-mod,
.sm-badges .badge-cred {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
}

.sm-badges .badge-cred {
  background: #f6f7fb;
  border: 1px solid var(--line);
  color: var(--ink);
}

.side-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 22px 18px;
}

.modal-h {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 10px 0 14px;
}

/* Lista de sesiones */
.ses-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ses-row {
  display: flex;
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid #eef1f6;
}

.ses-row:last-child {
  border-bottom: none;
}

.ses-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .82rem;
  font-weight: 700;
}

.est--ok {
  background: #27ae60;
  color: #fff;
}

.est--now {
  background: #1685BC;
  color: #fff;
}

.est--next {
  background: #eaf4fb;
  color: #1685BC;
  border: 2px solid #bfe0f2;
}

.est--pend {
  background: #f0f1f5;
  color: var(--gray);
  border: 2px solid #e3e6ee;
}

.ses-main {
  flex: 1;
  min-width: 0;
}

.ses-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.ses-top b {
  font-size: .92rem;
  color: var(--ink);
}

.ses-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: none;
}

.ses-badge.est--ok {
  background: #e6f6ec;
  color: #1e7e45;
  border: none;
}

.ses-badge.est--now {
  background: #e3f2fb;
  color: #10688f;
  border: none;
}

.ses-badge.est--next {
  background: #e3f2fb;
  color: #1685BC;
  border: none;
}

.ses-badge.est--pend {
  background: #f0f1f5;
  color: var(--gray);
  border: none;
}

.ses-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--muted);
  font-size: .82rem;
}

.ses-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ses-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

.ses-mod {
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.ses-mod--v {
  background: #ece9fb;
  color: #5b5fc7;
}

.ses-mod--p {
  background: #e8eefc;
  color: var(--navy);
}

.ses-teams {
  color: #5b5fc7;
  font-weight: 600;
  font-size: .78rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.ses-teams.is-off {
  color: var(--muted);
  cursor: default;
}

.ses-aula {
  color: var(--muted);
  font-size: .8rem;
}

/* Pie del modal: progreso + retiro */
.side-modal__foot {
  border-top: 1px solid var(--line);
  padding: 16px 22px;
  background: #fafbfd;
}

.mf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mf-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}

.mf-lbl {
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

.mf-prog {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .8rem;
  color: var(--ink);
}

.ring-tx {
  font-size: 11px;
  font-weight: 800;
  fill: var(--navy);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.mb-item {
  font-size: .8rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.retiro {
  margin-top: 12px;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: .82rem;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  line-height: 1.4;
}

.retiro i {
  font-size: 1.05rem;
  margin-top: 1px;
}

.retiro--ok {
  background: #e9f6ee;
  color: #1e7e45;
}

.retiro--no {
  background: #fdecea;
  color: #b3271b;
}

/* Cronograma de tesis */
.crono-tip {
  color: var(--muted);
  font-size: .86rem;
  margin-bottom: 14px;
}

.crono-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.crono-img {
  width: 100%;
  display: block;
}

.crono-fallback {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}

.crono-fallback i {
  font-size: 2.4rem;
  color: #c2c8d6;
}

.crono-fallback code {
  background: #f1f3f9;
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--navy);
  font-size: .82rem;
}

/* Tabla: fila de cronograma */
.fila-crono {
  background: #fffaf2;
}

.fila-crono td {
  font-style: normal;
}

@media (max-width:560px) {
  .resultados.is-cards {
    grid-template-columns: 1fr;
  }

  .mf-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   20. LOGIN-VIEW CON CARRUSEL INMERSIVO
   ============================================================ */

/* ── Sección: llena exactamente el viewport disponible ── */
.login-view {
  width: 100%;
  height: calc(100vh - 72px);
  display: flex;
  align-items: stretch;
  padding: 18px;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Grilla: proporciones fluidas, sin max-width ── */
.login-inner {
  display: grid;
  grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
  gap: 18px;
  width: 100%;
  height: 90%;
  min-width: 0;
}

/* ── Columna izquierda: card centrada ── */
.login-col-left {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.login-view .login-card {
  width: 100%;
  max-width: 400px;
  position: static;
  transform: none;
  margin: 0;
}

/* ── Columna derecha: panel llena todo ── */
.login-col-right {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   PANEL DE ANUNCIOS
   ============================================================ */
.anuncios-panel {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(20,28,70,.20);
  background: var(--navy);
  flex: 1;
  min-height: 0;
}

.anuncios-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.anuncios-belt {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.anuncio-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}

.anuncio-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.anuncio-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #4668ab00 0%, transparent 30%, transparent 60%, transparent 70%, #002060e6 100%);
  }

/* Placeholder */
.anuncios-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1a2d6e, #0e1d4a);
}

.anuncios-ph-inner        { color:rgba(255,255,255,.85); text-align:center; padding:24px; }
.anuncios-ph-brand        { display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:14px; }
.anuncios-ph-brand i      { font-size:1.8rem; color:var(--accent); }
.anuncios-ph-brand strong { display:block; font-size:.88rem; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; }
.anuncios-ph-brand span   { font-size:.72rem; opacity:.65; }
.anuncios-ph-msg          { font-size:.78rem; opacity:.5; margin:0; }

/* Overlay */
.anuncios-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 24px 16px;
  pointer-events: none;
  z-index: 2;
}

.ao-brand { display:flex; align-items:center; gap:9px; }
.ao-brand-icon {
  width:32px; height:32px; border-radius:8px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(6px);
  display:grid; place-items:center; color:#fff; font-size:.95rem; flex:none;
}
.ao-brand-text        { color:#fff; line-height:1.2; }
.ao-brand-text strong { display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.ao-brand-text span   { font-size:.65rem; opacity:.70; }

.ao-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 0;
}

.ao-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 8px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.ao-title em     { font-style:normal; color:var(--accent); }
.ao-title::after { content:''; display:block; width:28px; height:3px; background:var(--accent); border-radius:2px; margin-top:7px; }

.ao-sub {
  color: rgba(255,255,255,.78);
  font-size: clamp(.7rem, 1vw, .84rem);
  line-height: 1.5;
  margin: 0;
}

.ao-cards {
  display: flex;
  gap: 8px;
  pointer-events: all;
  margin-bottom: 8px;
  align-self: flex-start;
}

.ao-card {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  padding: 8px 10px;
  flex: none;
  min-width: 0;
  max-width: 180px;
  color: #fff;
}
.ao-card__icon   { width:24px; height:24px; background:rgba(255,255,255,.15); border-radius:6px; display:grid; place-items:center; font-size:.82rem; color:var(--accent); margin-bottom:4px; }
.ao-card__titulo { font-size:.72rem; font-weight:700; color:#fff; display:block; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ao-card__desc   { font-size:.64rem; color:rgba(255,255,255,.65); display:block; line-height:1.3; }
.ao-card__link   { display:inline-flex; align-items:center; gap:3px; font-size:.64rem; font-weight:600; color:var(--accent); text-decoration:none; margin-top:3px; pointer-events:all; }
.ao-card__link:hover { text-decoration:underline; }

.ao-dots { display:flex; align-items:center; gap:6px; pointer-events:all; }
.anuncio-dot {
  width:8px; height:8px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); background:transparent;
  cursor:pointer; padding:0;
  transition:background .2s, border-color .2s, transform .2s;
  flex:none;
}
.anuncio-dot.activo { background:#fff; border-color:#fff; transform:scale(1.25); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Pantallas muy anchas: un poco más de padding */
@media (min-width: 1600px) {
  .login-view  { padding: 24px 36px; }
  .login-inner { gap: 24px; }
}

/* Laptop ≤ 1280px */
@media (max-width: 1280px) {
  .login-view  { padding: 14px 16px; }
  .login-inner { gap: 14px; }
}

/* Tablet landscape ≤ 900px: apilar */
@media (max-width: 900px) {
  .login-view {
    height: auto;
    min-height: calc(100vh - 72px);
    overflow: visible;
    padding: 18px 16px;
    align-items: flex-start;
  }
  .login-inner {
    grid-template-columns: 1fr;
    height: auto;
    gap: 14px;
  }
  .login-col-left  { justify-content:stretch; overflow:visible; }
  .login-view .login-card { max-width:100%; }
  .login-col-right { min-height:320px; overflow:hidden; }
  .anuncios-panel  { min-height:320px; flex:none; height:320px; }
  .ao-title        { font-size:1.2rem; }
}

/* Tablet portrait ≤ 600px */
@media (max-width: 600px) {
  .login-col-right { min-height:260px; }
  .anuncios-panel  { height:260px; }
  .ao-cards        { gap:5px; }
  .ao-card         { padding:6px 8px; }
}

/* Móvil ≤ 460px */
@media (max-width: 460px) {
  .login-view      { padding:12px 10px; }
  .login-card      { padding:20px 14px 16px; border-radius:14px; }
  .login-col-right { min-height:280px; }
  .anuncios-panel  { height:280px; border-radius:14px; }
  .anuncios-overlay{ padding:10px 12px 8px; }
  .ao-title        { font-size:.95rem; }
  .ao-sub          { display:none; }
  .ao-body         { padding:4px 0; }
  .ao-cards        { flex-wrap:wrap; gap:4px; margin-left:0; margin-bottom:4px; }
  .ao-card         { flex:1 1 calc(50% - 4px); min-width:calc(50% - 4px); padding:5px 7px; }
  .ao-card__icon   { width:20px; height:20px; font-size:.72rem; margin-bottom:2px; }
  .ao-card__titulo { font-size:.64rem; }
  .ao-card__desc   { font-size:.58rem; }
  .ao-card__link   { font-size:.58rem; }
}

/* ============================================================
   ESTILOS QUE ANTES VIVÍAN EN EL <style> INLINE DEL index.html
   (modal scrolleable + tarjetas responsivas del estudiante)
   ============================================================ */

/* Modal lateral: todo el panel es scrolleable */
#side-modal.side-modal {
  display: block;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#side-modal .side-modal__head {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 3;
}

#side-modal .side-modal__body { flex: none; overflow: visible; }
#side-modal .side-modal__foot { position: static; }

/* Tarjetas de curso responsivas (solo vista del estudiante) */
#resultados.is-cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

/* Tablet: 2 columnas internas en cada tarjeta */
@media (max-width: 768px) {
  #resultados.is-cards { grid-template-columns: 1fr; }
  #resultados.is-cards .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  #resultados.is-cards .cc-grid .cc-cell:nth-child(2n) { border-right: none; }
}

/* Acciones (visor + PDF) apiladas en pantallas medianas/pequeñas */
@media (max-width: 640px) {
  #horario-view .actions { flex-direction: column; align-items: stretch; gap: 10px; }
  #horario-view .actions__right { flex-wrap: wrap; gap: 8px; }
  #horario-view .view-toggle { width: 100%; }
  #horario-view .view-toggle .btn { flex: 1; }
  #horario-view #btn-exportar-pdf { width: 100%; }
}

/* Móvil: una sola columna interna, pie de tarjeta apilado y modal a pantalla completa */
@media (max-width: 480px) {
  #resultados.is-cards .course-card { padding: 16px 16px 0; }
  #resultados.is-cards .cc-head { gap: 11px; }
  #resultados.is-cards .cc-ico { width: 46px; height: 46px; flex-basis: 46px; font-size: 1.2rem; }
  #resultados.is-cards .cc-title { font-size: 1.02rem; }
  #resultados.is-cards .cc-grid { grid-template-columns: 1fr; }
  #resultados.is-cards .cc-grid .cc-cell { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
  #resultados.is-cards .cc-grid .cc-cell:last-child { border-bottom: none; padding-bottom: 0; }
  #resultados.is-cards .cc-foot { flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
  #resultados.is-cards .cc-btn { justify-content: center; }
  #side-modal.side-modal { width: 100vw; }
  #side-modal .mf-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   TESIS — Indicador en tarjeta (mini-barra de actividad activa)
================================================================ */
.cc-tesis-act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .55rem .75rem;
  background: #eef3ff;
  border-radius: 8px;
  margin: .25rem 0;
  font-size: .78rem;
  color: var(--navy);
}
.tact-badge {
  background: var(--st-activa-bg);
  color: var(--st-activa-fg);
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tact-name {
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.tact-dias {
  font-size: .72rem;
  font-weight: 700;
  color: var(--st-activa-soft-fg);
  background: var(--st-activa-soft-bg);
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tact-dias--urgente {
  color: var(--st-urgente-fg);
  background: var(--st-urgente-bg);
}
.cc-tesis-act--urgente {
  background: var(--st-urgente-soft-bg);
}
.cc-tesis-act--urgente .tact-badge {
  background: var(--st-urgente-bg);
}

/* ================================================================
   TESIS — Timeline de actividades (modal)
================================================================ */
.tesis-section-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--navy);
  margin: 1.1rem 0 .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.tesis-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: .65rem;
  font-size: .74rem;
  color: var(--muted);
}
.tesis-leyenda__item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.tesis-leyenda__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tesis-leyenda__dot--pendiente  { background: var(--st-pendiente-fg); }
.tesis-leyenda__dot--activa     { background: var(--st-activa-bg); }
.tesis-leyenda__dot--urgente    { background: var(--st-urgente-bg); }
.tesis-leyenda__dot--completada { background: var(--st-completada-bg); }

.tesis-timeline {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: .5rem;
}

.tesis-act {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  border-radius: 10px;
  padding: .7rem .75rem;
  background: var(--bg);
  border: 1.5px solid var(--line);
  transition: border-color .18s;
}

.tesis-act--activa {
  border-color: var(--st-activa-bg);
  background: #eef3ff;
}

.tesis-act--urgente {
  border-color: var(--st-urgente-bg);
  background: var(--st-urgente-soft-bg);
}

.tesis-act--completada {
  opacity: .72;
}

.tesis-act__marker {
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .78rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.tesis-act--activa    .tesis-act__marker { background: var(--st-activa-bg); }
.tesis-act--urgente   .tesis-act__marker { background: var(--st-urgente-bg); }
.tesis-act--completada .tesis-act__marker { background: var(--st-completada-bg); }

.tesis-act__body { flex: 1; min-width: 0; }

.tesis-act__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .25rem;
}

.tesis-act__badge {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tesis-badge--activa     { background: var(--st-activa-bg); color: var(--st-activa-fg); }
.tesis-badge--urgente    { background: var(--st-urgente-bg); color: var(--st-urgente-fg); }
.tesis-badge--completada { background: var(--st-completada-soft-bg); color: var(--st-completada-soft-fg); }
.tesis-badge--pendiente  { background: var(--st-pendiente-bg); color: var(--st-pendiente-fg); border: 1px solid var(--line); }
.tesis-badge--sin-fecha  { background: var(--st-pendiente-bg); color: var(--st-pendiente-fg); border: 1px solid var(--line); }

.tesis-act__name {
  font-weight: 600;
  font-size: .88rem;
  color: var(--ink);
}

.tesis-act__dates {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: .3rem;
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}

.tesis-act__desc {
  font-size: .8rem;
  color: var(--ink);
  background: rgba(0,0,0,.03);
  border-radius: 8px;
  padding: .4rem .55rem;
  margin-bottom: .3rem;
  white-space: pre-wrap;
}

.tesis-act__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .1rem;
}

.tesis-countdown {
  font-size: .74rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 2px 10px;
}
.tesis-countdown--active { background: var(--st-activa-soft-bg); color: var(--st-activa-soft-fg); }
.tesis-countdown--warn   { background: var(--st-urgente-soft-bg); color: var(--st-urgente-soft-fg); }
.tesis-countdown--done   { background: var(--st-vencido-soft-bg); color: var(--st-vencido-soft-fg); }
.tesis-countdown--pend   { background: var(--st-pendiente-bg); color: var(--st-pendiente-fg); border: 1px solid var(--line); }

.tesis-link-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--blue);
  background: #e8edf8;
  border-radius: 99px;
  padding: 3px 13px;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.tesis-link-btn:hover { background: var(--blue); color: #fff; }

/* Recursos */
.tesis-rec-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: .5rem;
}
.tesis-rec-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  border-radius: 9px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--navy);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 500;
  transition: background .18s, border-color .18s, color .18s;
}
.tesis-rec-link:hover {
  background: #e8edf8;
  border-color: var(--blue);
  color: var(--blue);
}

/* Admin — formulario de tesis */
.tesis-admin-form {
  background: var(--bg);
  border-radius: 9px;
  padding: .9rem 1rem;
  margin-top: .6rem;
  border: 1px solid var(--line);
}
.tesis-admin-form h6 {
  margin: 0 0 .5rem;
  font-size: .84rem;
  font-weight: 700;
  color: var(--navy);
}
.btn-xs {
  padding: .15rem .45rem;
  font-size: .72rem;
  border-radius: 5px;
  line-height: 1.4;
}