/* ================================================= */
/* ESTILOS GLOBALES Y LOGIN ANTERIOR (CTH)          */
/* ================================================= */
* {
  box-sizing: border-box
}

body {
  margin: 0;
  font-family: Poppins, Arial, sans-serif;
  color: #fff;
  overscroll-behavior-y: none;
}

.bg-login {
  background:
    linear-gradient(to bottom, rgba(0, 20, 60, 0.5), rgba(0, 20, 60, 0.85)),
    url('assets/bg-campus.jpg') center/cover no-repeat fixed;
}

/* El estilo antiguo .hero.no-topbar se deshabilita porque usamos .hero y .topbar */
.hero.no-topbar {
  display: none;
}

/* ================================================= */
/* NUEVOS ESTILOS PARA TOPBAR Y ESLOGAN (IMAGEN 2)   */
/* ================================================= */

/* 1. Estilos de la Barra Superior (Topbar) */
.topbar {
  background: linear-gradient(90deg, #106fcc, #3ea8ff);
  /* Degradado azul */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4vw;
  height: 84px;
  /* Altura fija */
}

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

.topbar__logo-img {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
}

.topbar__title {
  margin-right: auto;
  /* Empuja los elementos sociales a la derecha */
  padding-left: 20px;
}

.colegio-name {
  font-size: clamp(14px, 1.5vw, 20px);
  font-weight: 800;
  letter-spacing: 0.5px;
}

.slogan-header {
  font-size: clamp(10px, 1vw, 14px);
  font-weight: 500;
}

.topbar__social {
  display: flex;
  gap: 15px;
  align-items: center;
}

.topbar__social-link {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.topbar__icon img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.topbar__social-link.topbar__web {
  font-weight: 700;
  font-size: 14px;
}

/* 2. Resetear el contenedor principal y añadir el eslógan */
.hero {
  min-height: calc(100vh - 84px);
  /* 84px es la altura del topbar */
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* Distribuye el eslogan y la tarjeta */
  padding: 48px 6vw 96px 6vw;
  gap: 3vw;
  /* Espacio entre el eslogan y la tarjeta de login */
}

/* 3. Estilo del eslógan grande */
.hero-slogan {
  font-size: clamp(3rem, 7vw, 5.5rem);
  /* Tamaño responsivo */
  font-style: italic;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  max-width: 40vw;
  /* Ocupa el espacio a la izquierda */
  line-height: 1.1;
  letter-spacing: -1px;
}

/* ================================================= */
/* AJUSTES PARA EFECTO LIQUID GLASS (LOGIN CARD)     */
/* ================================================= */
.login-card {
  width: min(600px, 92vw);

  /* Liquid Glass effect */
  background: rgba(255, 255, 255, 0.15);
  /* Fondo blanco translúcido */
  backdrop-filter: blur(10px);
  /* Efecto de desenfoque */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Borde sutil */
  border-radius: 20px;
  /* Bordes redondeados y compacto */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  /* Sombra para profundidad */

  /* Compacidad */
  padding: 25px 35px;
  /* Más compacto */

  color: #fff;
  /* Asegura texto blanco */
}

.login-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 32px
}

.login-logo img {
  height: 140px;
  width: auto;
  filter: brightness(0) invert(1)
}

/* Ajuste de campos de entrada para liquid glass */
.field.pill {
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 5px solid rgba(255, 255, 255, 0.95);
  /* Borde original */
  background: rgba(255, 255, 255, .18);
  /* Un poco más de opacidad */
  overflow: hidden;
  margin: 18px 0;
}

.iconwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  min-height: 72px;
  background: rgba(255, 255, 255, 0.08)
}

.field__icon {
  width: 34px;
  height: auto;
  filter: brightness(0) invert(1)
}

/* Asegura que el ícono sea blanco */
.field input {
  flex: 1;
  padding: 0 20px;
  height: 72px;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 600
}

.field input::placeholder {
  color: rgba(255, 255, 255, 0.7);
  opacity: 1
}

/* Placeholder más claro */

.btn {
  display: block;
  width: 100%;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  border-radius: 999px;
  padding: 16px 0;
  margin-top: 12px;
  font-size: 18px;
  background: linear-gradient(90deg, #6a52e4, #3e8be9, #55d2f7);
  color: #fff
}

.login-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font-size: 14px
}

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

.checkbox span {
  color: rgba(255, 255, 255, 0.8);
}

/* Texto checkbox */
.checkbox input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #dbeafe;
  border-radius: 6px;
  position: relative
}

.checkbox input:checked {
  background: #3ea8ff;
  border-color: #3ea8ff
}

.checkbox input:checked::after {
  content: '';
  position: absolute;
  left: 35%;
  top: 10%;
  width: 25%;
  height: 55%;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg)
}

.forgot {
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  font-size: 14px
}

/* Texto forgot password */

/* Ajustes para el separador "O inicia sesión con" */
.separator {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 15px 0;
  color: rgba(255, 255, 255, 0.8);
  /* Texto Separator en blanco */
  font-size: 14px;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  /* Línea más clara y translúcida */
}

.separator::before {
  margin-right: 10px;
}

.separator::after {
  margin-left: 10px;
}

.g_id_signin {
  margin: 10px auto;
  display: flex;
  justify-content: center;
}

/* El pie de página original ya no es necesario */
.app-footer {
  display: none;
  /* position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 14px;background:rgba(10,30,60,0.45);backdrop-filter:blur(8px) saturate(150%);border-top:1px solid rgba(255,255,255,0.2) */
}

.footer-menu {
  display: flex;
  justify-content: space-between;
  max-width: 460px;
  margin: 0 auto
}

.footer-icon img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1)
}


/* 5. Media Query para Móviles */
@media (max-width: 900px) {
  .topbar {
    flex-direction: column;
    height: auto;
    padding: 10px 20px;
    align-items: flex-start;
  }

  .topbar__title {
    padding-left: 0;
    margin-top: 5px;
  }

  .topbar__social {
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .hero {
    flex-direction: column;
    justify-content: flex-start;
    padding: 40px 6vw 40px 6vw;
  }

  .hero-slogan {
    max-width: 100%;
    text-align: center;
    font-size: clamp(2.5rem, 10vw, 4rem);
    margin-bottom: 20px;
  }

  .login-card {
    width: 100%;
    padding: 32px 32px;
  }
}

/* ================================================= */
/* ESTILOS DE DASHBOARD (SE DEJAN AL FINAL)          */
/* ================================================= */

:root {
  --bg: #f7fafc;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --brand: #37a4ff;
  --brand-2: #7a5cff;
  --ring: rgba(55, 164, 255, .35);
  --pantone-299c: #00A3E0;
  --banner-left: #00A3E0;
  /* Pantone 299 C approx */
  --banner-right: #BDE8FF;
  --btn-light: #7FD3FF;
  /* Ajuste para el color de botones del dashboard */
}

.cth-dashboard {
  background: var(--bg);
  color: var(--ink)
}

.cth-dashboard .app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 230px 1fr 380px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar topbar topbar"
    "sidebar content right";
  gap: 28px;
  padding: 24px 24px 32px;
  align-items: start;
}

/* ── Tablet: 820px – 1024px ── */
@media (min-width: 820px) and (max-width: 1024px) {
  .cth-dashboard .app {
    grid-template-columns: 72px 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "sidebar topbar"
      "sidebar content" !important;
    gap: 14px !important;
    padding: 14px 14px 24px !important;
  }

  /* Ocultar columna derecha (calendario) en tablet */
  .cth-dashboard .sidebar-right {
    display: none !important;
  }

  /* Home board: 2 columnas iguales */
  .cth-dashboard .home-board {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  /* Resetear posiciones fijas de los cards para que fluyan en 2 columnas iguales */
  .cth-dashboard .home-card-birthdays,
  .cth-dashboard .home-card-event-top,
  .cth-dashboard .home-card-newstaff,
  .cth-dashboard .home-card-bulletin {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* La valla (imagen grama) ocupa todo el ancho */
  .cth-dashboard .home-banner-row {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .cth-dashboard .home-banner-figure img {
    max-width: 100% !important;
    border-radius: 14px !important;
  }
}

/* Sidebar */
.cth-dashboard .sidebar {
  grid-area: sidebar;
  background: var(--banner-left);
  border-radius: 44px 0 0 44px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .12);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
}

.cth-dashboard .sidebar nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 12px 6px 18px;
  gap: 6px;
}

.cth-dashboard .sidebar .nav-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(3px, 0.6vh, 12px);
  padding: clamp(5px, 0.85vh, 16px) 12px;
  border-radius: 18px;
  background: transparent;
  border: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
}

.cth-dashboard .sidebar .nav-btn .icon {
  width: clamp(26px, 3.5vh, 56px);
  height: clamp(26px, 3.5vh, 56px);
  stroke: #fff;
}

.cth-dashboard .sidebar .nav-btn .badge {
  color: #fff;
  font-size: clamp(9px, 1.1vh, 18px);
  line-height: 1.1;
  text-transform: uppercase;
}

/* .cth-dashboard .sidebar .nav-btn:hover{ background:rgba(255,255,255,.12);}
.cth-dashboard .sidebar .nav-btn.section-active{ background: #FFD54F;} */

/* Topbar */
.cth-dashboard .topbar {
  grid-area: topbar;
  display: grid;
  /* antes: flex */
  grid-template-columns: 1fr 380px;
  /* centro + columna derecha, igual que .app */
  align-items: center;
  gap: 18px;
}

.cth-dashboard .social {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

/* ── Cada link social ── */
.cth-dashboard .social-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  color: #e1306c;          /* Instagram por defecto */
  background: rgba(225,48,108,.07);
  border: 1px solid rgba(225,48,108,.18);
  transition: background .15s, transform .15s;
  white-space: nowrap;
}
.cth-dashboard .social-link:hover {
  background: rgba(225,48,108,.14);
  transform: translateY(-1px);
}
.cth-dashboard .social-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Web */
.cth-dashboard .social-link--web {
  color: #0ea5e9;
  background: rgba(14,165,233,.07);
  border-color: rgba(14,165,233,.2);
  font-size: 13px;
  font-weight: 800;
}
.cth-dashboard .social-link--web:hover { background: rgba(14,165,233,.14); }

/* Facebook */
.cth-dashboard .social-link--fb {
  color: #1877f2;
  background: rgba(24,119,242,.07);
  border-color: rgba(24,119,242,.18);
}
.cth-dashboard .social-link--fb:hover { background: rgba(24,119,242,.14); }

.cth-dashboard .social .brand-word {
  font-weight: 800;
  letter-spacing: .3px;
  color: #0ea5e9;
  font-size: 16px;
}

.cth-dashboard .brand-word {
  font-weight: 700;
  letter-spacing: .3px;
  color: #0ea5e9;
}

.cth-dashboard .search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
  min-width: 320px;
}

.cth-dashboard .search input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 14px
}

/* Content */
.cth-dashboard .content {
  grid-area: content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width:980px) {
  .cth-dashboard .content {
    grid-template-columns: 1fr
  }
}

/* Welcome banner */
.cth-dashboard .welcome {
  grid-column: 1/-1;
  background: linear-gradient(90deg, var(--banner-left), var(--banner-right));
  color: #fff;
  border-radius: 26px;
  box-shadow: 0 35px 80px rgba(15, 23, 42, .18);
  display: grid;
  grid-template-columns: 1fr 260px;
  align-items: center;
  gap: 10px;
  padding: 24px 28px;
  min-height: 160px;
}

.cth-dashboard .welcome h1 {
  margin: 0 0 8px;
  font-size: 34px;
  letter-spacing: .3px;
  color: #fff;
}

.cth-dashboard .welcome p {
  margin: 0;
  color: rgba(255, 255, 255, .92);
  max-width: 60ch;
}

.cth-dashboard .avatar-hero {
  justify-self: end
}

.cth-dashboard .avatar-hero svg {
  width: 220px;
  height: auto
}

/* Action cards */
.cth-dashboard .grid-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 24px
}

.cth-dashboard .action {
  border: 2px solid #BDE8FF;
  border-radius: 22px;
  min-height: 170px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #f6fbff)
}

.cth-dashboard .action h3 {
  margin: 8px 0 0;
  font-size: 17px;
  color: #00A3E0
}

.cth-dashboard .card-badge {
  /* Adentro de la card, no sobre el borde: .clickable-card tiene overflow:hidden
     y recorta cualquier cosa que sobresalga del borde redondeado. */
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ef4444;
  color: #fff;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  padding: 0 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  border: 2px solid #fff;
}

/* display:flex de arriba le gana por especificidad al [hidden] del navegador
   (display:none) — sin esto el bullet queda visible siempre, tenga o no datos. */
.cth-dashboard .card-badge[hidden] {
  display: none;
}

.cth-dashboard .action .icon {
  width: 62px;
  height: 62px;
  stroke: #00A3E0
}

/* Right rail */
.cth-dashboard .sidebar-right {
  grid-area: right;
  display: grid;
  gap: 24px;
  align-self: start
}

/* Calendar */
.cth-dashboard .calendar {
  background: #fff;
  border-radius: 26px;
  padding: 20px 20px 18px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .12);
  border: 1px solid #eef2f7
}

.cth-dashboard .cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px
}

.cth-dashboard .cal-title {
  font-size: 26px;
  font-weight: 900
}

.cth-dashboard .cal-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: -6px
}

.cth-dashboard .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 12px
}

.cth-dashboard .dow,
.cth-dashboard .date {
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-weight: 700
}

.cth-dashboard .dow {
  font-size: 12px;
  color: var(--muted)
}

.cth-dashboard .date {
  background: #f7fbff;
  border: 1px solid #e6eef8;
  cursor: pointer
}

.cth-dashboard .date.muted {
  opacity: .45
}

.cth-dashboard .date.today {
  outline: 3px solid var(--ring);
  background: #fff
}

.cth-dashboard .date.selected {
  background: linear-gradient(90deg, var(--banner-left), var(--banner-right));
  color: #fff;
  border-color: transparent
}

.cth-dashboard .agenda {
  margin-top: 14px
}

.cth-dashboard .agenda h4 {
  margin: 8px 0 10px;
  font-size: 16px;
  color: #111827
}

/* ── Agenda banner ─────────────────────────────────────────────── */
.agenda-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 0 0 12px;
}

.agenda-cal-footer {
  display: block;
  margin-top: 10px;
  border-radius: 16px;
  overflow: hidden;
  transition: opacity .15s, transform .15s;
}
.agenda-cal-footer:hover {
  opacity: .92;
  transform: translateY(-2px);
}
.agenda-cal-footer img {
  display: block;
  width: 100%;
  height: auto;
}

.agenda-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(118deg, #3d55e8 0%, #2235bb 52%, #1929a0 100%);
  border-radius: 18px;
  padding: 13px 16px 13px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 12px;
  min-height: 70px;
  box-shadow: 0 6px 24px rgba(30,41,160,.28);
}
.agenda-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% -10%, rgba(100,80,220,.45) 0%, transparent 65%);
  pointer-events: none;
}
.agenda-banner::after {
  content: '';
  position: absolute;
  right: -28px;
  top: -28px;
  width: 110px;
  height: 110px;
  background: rgba(55,30,140,.38);
  border-radius: 50%;
  pointer-events: none;
}
.agenda-banner-icon {
  position: relative;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  z-index: 1;
}
.agenda-banner-cal {
  font-size: 38px;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.agenda-banner-bell {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.3));
}
.agenda-banner-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
}
.agenda-banner-title {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.2px;
  display: block;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.agenda-banner-title-squig {
  font-size: 16px;
}
.agenda-banner-sub {
  font-size: 10.5px;
  color: rgba(255,255,255,.82);
  line-height: 1.35;
  display: block;
  text-decoration: underline wavy rgba(120,170,255,.55);
  text-underline-offset: 3px;
}
.agenda-banner-plane {
  position: absolute;
  top: 9px;
  left: 72px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  transform: rotate(-22deg);
  pointer-events: none;
  z-index: 1;
}
.agenda-banner-s1 {
  position: absolute;
  top: 7px;
  right: 30px;
  font-size: 13px;
  color: rgba(255,220,70,.9);
  pointer-events: none;
  z-index: 1;
}
.agenda-banner-s2 {
  position: absolute;
  bottom: 7px;
  right: 52px;
  font-size: 9px;
  color: rgba(255,255,255,.65);
  pointer-events: none;
  z-index: 1;
}
.agenda-banner-s3 {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: 17px;
  color: rgba(255,220,70,.72);
  pointer-events: none;
  z-index: 1;
}

.cth-dashboard .agenda .item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f3f7ff;
  border: 1px solid #d8e7ff;
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 10px
}

.cth-dashboard .agenda .dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--banner-left), var(--banner-right))
}

.cth-dashboard .agenda .item.secondary {
  background: #f6f6f8;
  border-color: #eee
}

/* Chat */
.cth-dashboard .chat {
  background: #fff;
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .12);
  border: 1px solid #eef2f7
}

.cth-dashboard .chat h3 {
  margin: 2px 0 6px;
  font-size: 26px;
  letter-spacing: .3px
}

.cth-dashboard .chat-sub {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 10px
}

.cth-dashboard .chat-log {
  display: grid;
  gap: 10px;
  margin: 14px 0 16px
}

.cth-dashboard .msg {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px
}

.cth-dashboard .msg .avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(90deg, #fde68a, #fca5a5);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff
}

.cth-dashboard .bubble {
  background: #e9f4ff;
  border: 1px solid #cfe7ff;
  border-radius: 16px;
  padding: 12px 14px
}

.cth-dashboard .chat-input {
  display: flex;
  gap: 10px
}

.cth-dashboard .chat-input input {
  flex: 1;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 12px 14px;
  font-size: 14px
}

.cth-dashboard .btn {
  background: linear-gradient(90deg, var(--banner-left), var(--banner-right));
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer
}

/* Gradient buttons (voice, calendar arrows, chat send) */
.cth-dashboard .topbar .search .btn,
.cth-dashboard .calendar .btn,
.cth-dashboard .chat .btn {
  background: var(--btn-light) !important;
  color: #fff;
  border: 0;
  box-shadow: none;
}

/* Focus ring */
.cth-dashboard .calendar .btn:focus,
.cth-dashboard .chat .btn:focus,
.cth-dashboard .topbar .search .btn:focus {
  outline: 3px solid rgba(0, 163, 224, .25);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .6) inset
}


/* Fixes para Dashboard Responsivo/Compacto */
.cth-dashboard .app {
  grid-template-columns: clamp(160px, 14vw, 230px) 1fr clamp(260px, 22vw, 380px);
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(12px, 2vw, 24px);
  overflow-x: clip;
}

.cth-dashboard .content>.grid-actions {
  grid-column: 1 / -1;
}

.cth-dashboard .grid-actions {
  grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 22vw, 220px), 1fr)) !important;
  gap: clamp(12px, 2vw, 24px) !important;
  justify-content: initial !important;
  margin-top: clamp(8px, 2vh, 24px) !important;
}

.cth-dashboard .action {
  min-height: clamp(120px, 18vh, 170px) !important;
  padding: clamp(12px, 2vh, 16px) !important;
  border-radius: 22px !important;
}

.cth-dashboard .action .icon {
  width: clamp(44px, 7vh, 62px) !important;
  height: clamp(44px, 7vh, 62px) !important;
}

.cth-dashboard .action h3 {
  font-size: clamp(14px, 2.2vh, 17px) !important;
}

.cth-dashboard .welcome {
  grid-template-columns: 1fr clamp(140px, 20vw, 260px);

  /* Banner más delgado */
  min-height: clamp(90px, 11vh, 130px);

  /* Menos padding vertical, mismo padding lateral */
  padding: clamp(8px, 1.2vh, 16px) clamp(16px, 2vw, 28px);
}

.cth-dashboard .welcome h1 {
  font-size: clamp(22px, 3.2vh, 34px);
}

.cth-dashboard .sidebar {
  height: calc(100dvh - 56px);
  min-height: calc(100dvh - 56px);
  align-self: start;
  position: sticky;
  top: 24px;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}
.cth-dashboard .sidebar::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

/* === Avatar (banner) dinámico + responsive === */
.cth-dashboard .avatar-hero {
  --avatar-diameter: clamp(110px, 13vw, 210px);
  --avatar-inset: clamp(0px, 0%, 14px);
  width: var(--avatar-diameter);
  height: var(--avatar-diameter);
  border-radius: 9999px;
  background: rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

.cth-dashboard .avatar-hero .badge-avatar {
  width: calc(100% - var(--avatar-inset) * 2);
  height: calc(100% - var(--avatar-inset) * 2);
  border-radius: 9999px;
  object-fit: contain;
  background: none;
  padding: 0;
}

.cth-dashboard .avatar-hero .badge-avatar.is-photo {
  object-fit: cover;
}

/* Estilos de enlaces del topbar del dashboard */
.cth-dashboard .social a {
  font-size: 13px;
  color: #64748b;
  text-decoration: none;
}

.cth-dashboard .social a:visited {
  color: #64748b;
}

.cth-dashboard .social a.brand-word {
  font-weight: 800;
  letter-spacing: .3px;
  color: #0ea5e9;
  font-size: 16px;
}

/* ================================================= */
/*   Efecto "glass" para el menú lateral             */
/* ================================================= */

.cth-dashboard .sidebar .nav-btn {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  /* pastilla redondeada */
  background: transparent;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

/* Capa de vidrio */
.cth-dashboard .sidebar .nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.35), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.96);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  z-index: 0;
}

/* ================================================= */
/*   Efecto "glass" para el menú lateral             */
/* ================================================= */

.cth-dashboard .sidebar .nav-btn {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  /* pastilla redondeada */
  background: transparent;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

/* Capa de vidrio */
.cth-dashboard .sidebar .nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.35), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.96);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  z-index: 0;
}

/* 👇 NUEVO: capa del ripple (onda al hacer clic) */
.cth-dashboard .sidebar .nav-btn::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.30);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  translate: -50% -50%;
}

/* Icono + texto por encima del vidrio */
.cth-dashboard .sidebar .nav-btn>* {
  position: relative;
  z-index: 1;
}

/* Icono + texto por encima del vidrio */
.cth-dashboard .sidebar .nav-btn>* {
  position: relative;
  z-index: 1;
}

/* Activo: mismo efecto pero un poco más marcado */
.sidebar .nav-btn.active {
  background: #f09a07;
  /* ⭐ amarillo */
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
  color: #ffffff;
  /* texto más oscuro para contraste */
}


.cth-dashboard .sidebar .nav-btn.active::before {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* =============================
   Transición entre secciones
   ============================= */

#section-root {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

/* Sale: se apaga y baja un poquito */
#section-root.section-leaving {
  opacity: 0;
  transform: translateY(8px);
}

/* Entra: arranca arriba y se anima hacia el centro */
#section-root.section-entering {
  opacity: 0;
  transform: translateY(-8px);
}

/* Encabezado gráfico solo para el modal de certificados */
#certModal .cert-modal-header {
  text-align: center;
  margin: 0 0 16px;
}

#certModal .cert-modal-header img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

.action .btn,
.action .btn:link,
.action .btn:visited {
  text-decoration: none;
}

/* Iconos de las cards de DOCENTES (Classroom / Correo) */
.action-icon {
  width: 72px;
  /* ajusta a tu gusto, 64–80px queda bien */
  height: 72px;
  margin: 0 auto 12px;
  /* centrado y separación con el título */
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-icon img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  /* respeta proporciones sin deformar */
}

/* Variante pequeña para accesos secundarios (Docs, Slides, Numbers, Forms) */
.action-icon.icon-sm {
  width: 48px;
  height: 48px;
}

/* =============================
   HOME BOARD (TABLÓN PRINCIPAL)
   ============================= */
.cth-dashboard .home-board {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr);
  gap: 18px;
  margin-top: 18px;
  align-content: start;
}

/* Las columnas desaparecen visualmente y sus hijos (las cards)
   pasan a ser ítems directos de la grilla */
.cth-dashboard .home-column {
  display: contents;
}

.cth-dashboard .home-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 18px 20px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cth-dashboard .home-card-header h2 {
  margin: 4px 0 4px;
  font-size: 20px;
  letter-spacing: .02em;
  color: #0f172a;
}

.cth-dashboard .home-card-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.cth-dashboard .home-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(56, 189, 248, .12);
  color: #0369a1;
}

.cth-dashboard .home-tag-alt {
  background: rgba(251, 191, 36, .14);
  color: #92400e;
}

.cth-dashboard .home-card-body {
  font-size: 14px;
  color: #1f2933;
}

.cth-dashboard .home-card-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

/* Cumpleaños con fotos */
.cth-dashboard .home-card-body-birthdays {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  /* centra verticalmente dentro de la card */
}

/* Repartir mejor las tarjetas en el ancho */
.cth-dashboard .birthday-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: center;
  /* las lleva al centro, no pegadas a la izquierda */
}

/* Un poco más de espacio mínimo para que texto y avatar respiren */
.cth-dashboard .birthday-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 220px;
  /* antes 180px */
}

.cth-dashboard .birthday-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 180px;
}

.cth-dashboard .birthday-avatar {
  margin: 0;
  width: 140px;
  /* antes 110px */
  height: 140px;
  /* antes 110px */
  border-radius: 999px;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, #e0f2fe, #cbd5f5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cth-dashboard .birthday-avatar img {
  width: 115%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  /* ⭐ baja la foto dentro del círculo */
  display: block;
}

.cth-dashboard .birthday-meta {
  font-size: 13px;
}

.cth-dashboard .birthday-name {
  margin: 0;
  font-weight: 700;
  color: #111827;
}

.cth-dashboard .birthday-role,
.cth-dashboard .birthday-date {
  margin: 0;
  color: #4b5563;
  font-size: 12px;
}

.cth-dashboard .home-bday-greeting {
  margin: 4px 0 0;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  letter-spacing: .06em;
}

/* Card de cumpleaños */
/* Card de cumpleaños decorada */
.cth-dashboard .home-card-birthdays {
  position: relative;
  overflow: hidden;
}

/* Confetti principal (arriba, cubre casi todo el ancho) */
.cth-dashboard .home-card-birthdays::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -60px;
  width: 130%;
  height: 200px;
  pointer-events: none;
  opacity: 0.45;

  background-image:
    radial-gradient(circle at 10% 20%, #ffc107 0 4px, transparent 5px),
    radial-gradient(circle at 25% 60%, #00b8ff 0 4px, transparent 5px),
    radial-gradient(circle at 40% 30%, #ff4081 0 4px, transparent 5px),
    radial-gradient(circle at 55% 70%, #4caf50 0 4px, transparent 5px),
    radial-gradient(circle at 70% 25%, #00b8ff 0 4px, transparent 5px),
    radial-gradient(circle at 82% 60%, #ffc107 0 4px, transparent 5px),
    radial-gradient(circle at 95% 35%, #ff4081 0 4px, transparent 5px);
}

/* Confetti extra, muy suave, para no dejar el centro vacío */
.cth-dashboard .home-card-birthdays::after {
  content: "";
  position: absolute;
  top: 40px;
  left: -40px;
  width: 120%;
  height: 140px;
  pointer-events: none;
  opacity: 0.25;

  background-image:
    radial-gradient(circle at 20% 50%, #00b8ff 0 3px, transparent 4px),
    radial-gradient(circle at 50% 40%, #ffc107 0 3px, transparent 4px),
    radial-gradient(circle at 80% 55%, #ff4081 0 3px, transparent 4px);
}

/* Confetti extra abajo */
.cth-dashboard .home-card-birthdays::after {
  content: "";
  position: absolute;
  bottom: -40px;
  /* 👈 ahora se pega al borde inferior */
  top: auto;
  /* 👈 importante para que ignore el valor anterior */
  left: -40px;
  width: 120%;
  height: 180px;
  pointer-events: none;
  opacity: 0.25;

  background-image:
    radial-gradient(circle at 15% 40%, #00b8ff 0 3px, transparent 4px),
    radial-gradient(circle at 45% 60%, #ffc107 0 3px, transparent 4px),
    radial-gradient(circle at 75% 35%, #ff4081 0 3px, transparent 4px),
    radial-gradient(circle at 95% 55%, #4caf50 0 3px, transparent 4px);
}


/* Listados secundarios */
.cth-dashboard .home-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.cth-dashboard .home-list li {
  position: relative;
  padding-left: 16px;
}

.cth-dashboard .home-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--banner-left), var(--banner-right));
}

/* === Boletín del mes (Heyzine preview) === */
.cth-dashboard .home-card-bulletin .home-card-body {
  padding-top: 1.5rem;
}

.cth-dashboard .home-bulletin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 1.5rem;
  align-items: center;
}

.cth-dashboard .home-bulletin-thumb {
  background: #f5f7fb;
  border-radius: 1.25rem;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(15, 35, 80, 0.04);
}

.cth-dashboard .home-bulletin-thumb {
  background: #f5f7fb;
  border-radius: 1.25rem;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* centramos la portada */
  box-shadow: 0 12px 30px rgba(15, 35, 80, 0.04);
}

.cth-dashboard .home-bulletin-thumb img {
  display: block;
  max-width: 220px;
  /* ⭐ límite máximo del tamaño */
  width: 100%;
  /* ocupa el ancho disponible hasta 220px */
  height: auto;
  border-radius: 0.75rem;
  object-fit: cover;
}

.cth-dashboard .home-bulletin-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cth-dashboard .home-bulletin-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4c5874;
}

.cth-dashboard .home-bulletin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #00c2ff, #0067ff);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0, 117, 255, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.cth-dashboard .home-bulletin-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 117, 255, 0.35);
  filter: brightness(1.03);
}

.cth-dashboard .home-bulletin-note {
  margin: 0;
  font-size: 0.8rem;
  color: #8a94b5;
}

.home-bulletin-cover {
  width: 180px;
  /* ajusta este valor para hacerla más pequeña o más grande */
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
}

/* Responsive: pila vertical en pantallas pequeñas */
@media (max-width: 960px) {
  .cth-dashboard .home-bulletin-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cth-dashboard .home-bulletin-thumb {
    max-width: 320px;
    margin: 0 auto;
  }

  .cth-dashboard .home-bulletin-button {
    width: 100%;
    justify-content: center;
  }
}


/* Frase del mes */
.cth-dashboard .home-quote {
  margin: 0;
  font-style: italic;
  font-size: 14px;
  color: #334155;
}

/* Responsive: tablero en una sola columna */
@media (max-width: 1100px) {
  .cth-dashboard .home-board {
    grid-template-columns: 1fr;
  }
}

/* === Botón lateral: activo y hover con el mismo amarillo glass === */

/* Botón activo: fondo, sombra y movimiento */
.cth-dashboard .sidebar .nav-btn.active {
  background: #f09a07;
  /* amarillo oro quemado */
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

/* Efecto "liquid glass" solo en activo */
.cth-dashboard .sidebar .nav-btn.active::before {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Colores de icono y texto en activo */
.cth-dashboard .sidebar .nav-btn.active .badge {
  color: #FFFFFF;
}

.cth-dashboard .sidebar .nav-btn.active .icon {
  stroke: #FFFFFF;
}

/* Hover: fondo naranja con texto e ícono blancos */
.cth-dashboard .sidebar .nav-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
  transition: background 150ms ease, transform 150ms ease;
}

.cth-dashboard .sidebar .nav-btn:hover:not(.active) .badge {
  color: #FFFFFF;
  font-weight: 600;
}

.cth-dashboard .sidebar .nav-btn:hover:not(.active) .nav-icon {
  filter: none;
  transform: scale(1.05);
  transition: transform 150ms ease;
}

/* Tarjetas de eventos en el home (lado derecho) */
.cth-dashboard .home-card.home-card-event .home-card-body {
  padding-top: 4px;
}

.cth-dashboard .home-event-figure {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #f5f7fb;
  box-shadow: 0 12px 30px rgba(15, 35, 80, 0.06);
}

/* La imagen se adapta al ancho de la tarjeta */
.cth-dashboard .home-event-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  /* más panorámico, menos alto */
  object-fit: cover;
}

/* Posiciones en la grilla del Home */

/* Fila 1: la valla, ocupa las dos columnas */
.cth-dashboard .home-banner-row {
  grid-column: 1 / -1;
  /* de la columna 1 a la última */
  grid-row: 1;
  margin-bottom: 16px;
}

/* Fila 2: Cumpleaños (izquierda) y Janucá (derecha) */
.cth-dashboard .home-card-birthdays {
  grid-column: 1;
  grid-row: 2;
}

.cth-dashboard .home-card-event-top {
  grid-column: 2;
  grid-row: 2;
}

/* Fila 3: Boletín (izquierda) y Fiesta fin de año (derecha) */
.cth-dashboard .home-card-bulletin {
  grid-column: 1;
  grid-row: 3;
}

.cth-dashboard .home-card-event-bottom {
  grid-column: 2;
  grid-row: 3;
}

/* Que el cuerpo de la card de cumpleaños use todo el alto
   y reparta el espacio entre contenido superior e inferior */
.cth-dashboard .home-card-body-birthdays {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* antes space-between */
  gap: 20px;
}

.cth-dashboard .birthday-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin-top: 48px;
  /* ⭐ mueve las fotos hacia abajo */
  padding-bottom: 16px;
}

/* Altura mínima coherente para las 4 cards del tablero */
.cth-dashboard .home-card-birthdays,
.cth-dashboard .home-card-event-top,
.cth-dashboard .home-card-bulletin,
.cth-dashboard .home-card-event-bottom {
  min-height: 260px;
  /* juega con 250–280px según lo veas en pantalla */
}

/* Card de boletín: un poquito más compacta en vertical */
.cth-dashboard .home-card.home-card-bulletin {
  padding: 14px 18px;
  /* antes seguramente 18px 20px o similar */
}

/* Layout interno del boletín */
.cth-dashboard .home-bulletin-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: 14px;
  /* baja un poco el gap para quitar alto */
  align-items: center;
}

/* Portada del boletín un pelín más pequeña */
.cth-dashboard .home-bulletin-thumb img {
  display: block;
  max-width: 150px;
  /* antes 220px o similar */
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  object-fit: cover;
}

/* Valla entre el hero azul y el tablero */

.cth-dashboard .home-banner {
  margin-top: 18px;
  margin-bottom: 10px;
}

.cth-dashboard .home-card.home-card-banner {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cth-dashboard .home-banner-figure {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.cth-dashboard .home-banner-figure img {
  display: block;
  width: 100%;
  max-width: 1200px;
  /* si la ves muy grande, baja este valor */
  border-radius: 18px;
  height: auto;
  /* mantiene la proporción original de la valla */
  object-fit: contain;
  /* evita recortes, se ve completa */
}

/* Fila de la valla dentro del grid del home */
.cth-dashboard .home-board .home-banner-row {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  /* centra el contenido dentro de la fila */
}

/* Card de la valla: sin fondo ni sombra, solo sirve de contenedor */
.cth-dashboard .home-card.home-card-banner {
  padding: 0;
  background: transparent;
  /* 👈 quita el rectángulo blanco */
  box-shadow: none;
  /* 👈 sin sombra de card */
  border-radius: 0;
  /* que no interfiera con el radio de la imagen */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Contenedor de la imagen de la valla */
.cth-dashboard .home-banner-figure {
  margin: 0;
  display: flex;
  justify-content: center;
}

/* Imagen de la valla */
.cth-dashboard .home-banner-figure img {
  display: block;
  width: 100%;
  max-width: 900px;
  /* ajusta el ancho de la valla */
  height: auto;
  border-radius: 18px;
  object-fit: contain;
}

/* ==== Valla institucional: evitar cualquier recorte ==== */

.cth-dashboard .home-banner-row {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 16px;
  height: auto;
}

.cth-dashboard .home-card.home-card-banner {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  /* que crezca según la imagen */
  overflow: visible;
  /* por si algún estilo anterior puso hidden */
}

.cth-dashboard .home-banner-figure {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.cth-dashboard .home-banner-figure img {
  display: block;
  max-width: 900px;
  /* ajusta ancho según lo que te guste */
  width: 100%;
  height: auto;
  /* respeta la proporción original de la valla */
  object-fit: contain;
  /* NO recortes, toda la imagen visible */
  border-radius: 18px;
}

/* ================= DOCENTES (INTERFAZ NUEVA) ================= */

/* El grid dinámico para DOCENTES deja de comportarse como grid de 2 columnas */
#dynamic-grid.grid-docentes {
  display: block;
}

/* Layout 2 columnas: izquierda (apps principales), derecha (herramientas) */
.docentes-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr);
  gap: 24px;
  align-items: stretch;
  /* <- importante: ambas columnas misma altura */
}

/* Card genérica */
.docentes-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 22px 24px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
  border: 1px solid #e2e8f0;
  height: 100%;
  /* <- hace que cada tarjeta llene el alto de la celda */
}

/* ----------------- Columna derecha: lista de herramientas ----------------- */

/* REEMPLAZA el bloque antiguo de .docentes-card-secondary por este: */
.docentes-card-secondary {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* REEMPLAZA también el bloque de .docentes-tools-list por este: */
.docentes-tools-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  /* <- ocupa todo el alto dentro de la card */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* <- reparte los 4 ítems verticalmente */
  gap: 0;
  /* si quieres menos espacio entre ellos */
}


/* Responsive: en pantallas pequeñas se apila */
@media (max-width: 992px) {
  .docentes-layout {
    grid-template-columns: 1fr;
  }
}

/* Card grande tipo "tarjeta" (similar al estilo de tu screenshot) */
.docentes-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 22px 24px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
  border: 1px solid #e2e8f0;
}

/* GRID interno de los 4 accesos grandes (Gmail, Classroom, Calendar, Drive) */
.docentes-main-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* siempre 2 columnas */
  gap: 18px;
}

/* Tarjeta individual de app grande */
.docentes-app {
  border-radius: 20px;
  padding: 18px 18px 16px;
  border: 1px solid #dbeafe;
  background: linear-gradient(180deg, #ffffff, #f6fbff);
  text-align: center;
}

/* Icono grande */
.docentes-app-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.docentes-app-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Título y texto */
.docentes-app h3 {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0f172a;
}

.docentes-app p {
  margin: 0 0 12px;
  font-size: 12px;
  color: #475569;
}

/* Botón de cada app grande */
.docentes-app .btn {
  width: 100%;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
}

/* ----------------- Columna derecha: lista de herramientas ----------------- */

.docentes-card-secondary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.docentes-tools-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.docentes-tool-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: #f8fafc;
}

.docentes-tool-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Iconito cuadrado de color */
.docentes-tool-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.docentes-tool-icon img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  display: block;
}

/* Colores de fondo para cada tipo */
.docentes-tool-icon-docs {
  background: #e0f2fe;
}

.docentes-tool-icon-slides {
  background: #fef3c7;
}

.docentes-tool-icon-sheets {
  background: #dcfce7;
}

.docentes-tool-icon-forms {
  background: #ede9fe;
}

/* Textos de cada fila */
.docentes-tool-text h4 {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}

.docentes-tool-text p {
  margin: 0;
  font-size: 12px;
  color: #475569;
}

/* Botones pequeños de la derecha (Abrir Docs / Slides / Sheets / Forms) */
.docentes-tool-btn {
  width: auto;
  white-space: nowrap;
  font-size: 11px;
  padding: 7px 14px;
  border-radius: 999px;
}

/* Quitar subrayado en todos los "botones" */
.btn,
.btn:hover,
.docentes-card a,
.docentes-card a:hover {
  text-decoration: none;
}

/* Compactar el boletín: menos espacio entre título y contenido */
.cth-dashboard .home-card.home-card-bulletin {
  gap: 4px;
  /* antes heredaba 12px de .home-card */
}

/* Quitar casi todo el padding superior del cuerpo del boletín */
.cth-dashboard .home-card-bulletin .home-card-body {
  padding-top: 6px;
  /* si lo quieres aún más pegado: 0 o 4px */
}

/* === Botones del modal de Certificado laboral en una misma línea === */

#certModal .modal__actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 24px;
}

#certModal .modal__actions .btn {
  /* Sobrescribimos el .btn global (display:block; width:100%) solo dentro del modal */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  width: auto;
  margin: 0;
}

/* Responsive: en pantallas pequeñas se apilan uno debajo del otro */
@media (max-width: 640px) {
  #certModal .modal__actions {
    flex-direction: column;
  }
}

.modal__field--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* Checks del modal de certificados en una sola línea y centrados */
#certModal .modal__field--inline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  /* espacio entre ambos */
  flex-wrap: nowrap;
  /* fuerza una sola línea */
}

/* Cada checkbox (label) alineado */
#certModal .checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}


/* =========================================================
   FIX · MOSAICO ESTUDIANTES (strip sin fondo + card estilo cards)
   Pegar al final para sobreescribir estilos previos.
   ========================================================= */
.docentes-mosaico-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  padding: 28px 0;
  margin: 0;
}

a.docentes-mosaico-card,
.docentes-mosaico-card {
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 22px 28px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  border: 3px solid rgba(122, 167, 255, 0.35);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  text-decoration: none !important;
  color: #00A3E0 !important;
}

a.docentes-mosaico-card:visited {
  color: #00A3E0 !important;
  text-decoration: none !important;
}

.docentes-mosaico-card h3 {
  margin: 0;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 22px;
  color: inherit;
  line-height: 1.1;
  text-align: center;
}

.docentes-mosaico-subtitle {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(31, 41, 55, 0.72);
  text-align: center;
}

.docentes-mosaico-card p {
  margin: 0;
}

.docentes-mosaico-icon {
  color: #7aa7ff;
  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 2px;
}

a.docentes-mosaico-card:hover {
  text-decoration: none !important;
  transform: translateY(-1px);
}


/* ======================================================
   DOCENTES · Mosaico full-width (Opción A)
   ====================================================== */
.cth-dashboard .content .docentes-mosaico-full {
  grid-column: 1 / -1;
}

.docentes-mosaico-full {
  width: 100%;
}


/* =====================================================
   Dashboard · Responsive móvil v2 (portrait + landscape iPhone)
   - Drawer en móviles y en landscape de teléfonos (altura baja)
   - Home board a 1 columna para que todas las cards tengan el mismo ancho
   ===================================================== */
/*
  IMPORTANT: Mobile-only rules.
  - Phones + iPad Mini: <= 819px
  - Phones landscape: coarse pointer + low height
  This avoids affecting laptops/desktop (even if the browser window is narrow).
*/
@media (max-width: 819px),
(hover: none) and (pointer: coarse) and (max-height: 500px) {

  /* Layout principal */
  .cth-dashboard .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "topbar"
      "content"
      "right";
    padding: 14px;
    gap: 14px;
    min-height: 0;
  }

  /* Sidebar pasa a ser un drawer */
  .cth-dashboard .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(82vw, 320px);
    border-radius: 0 28px 28px 0;
    padding: 18px 14px;
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 80;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
    height: 100%;
    min-height: 100%;
    overflow-y: auto;
  }

  .cth-dashboard.nav-open .sidebar {
    transform: translateX(0);
  }

  /* Backdrop */
  .cth-dashboard .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 75;
  }

  .cth-dashboard.nav-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Topbar: ocultar redes y mostrar usuario */
  .cth-dashboard .social a {
    display: none !important;
  }

  .cth-dashboard .social {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .cth-dashboard .mobile-userid {
    display: inline-flex;
    font-weight: 600;
    font-size: 13px;
    color: #0c84ff;
  }

  /* Botón menú */
  .cth-dashboard .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
    margin-right: 10px;
  }

  .cth-dashboard .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    padding: 10px 12px;
  }

  .cth-dashboard .topbar-right {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Banner (welcome) más compacto para que no tape nada */
  .cth-dashboard .welcome {
    /* Mantener avatar visible en mobile, pero en formato compacto */
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 0;
    padding: 16px 16px;
    column-gap: 14px;
  }

  /* Tipografía más pequeña para que el banner no quede tan alto */
  .cth-dashboard .welcome h1 {
    font-size: 24px;
    line-height: 1.1;
    margin-bottom: 8px;
  }

  .cth-dashboard .welcome p {
    font-size: 13px;
    line-height: 1.25;
    /* fuerza el texto a envolver en 2–3 líneas aprox */
    max-width: 32ch;
  }

  /* Avatar visible y alineado a la derecha (como desktop, pero compacto) */
  .cth-dashboard .avatar-hero {
    display: flex;
    width: 110px;
    height: 110px;
    margin: 0;
    justify-self: end;
    align-self: center;
    flex: 0 0 110px;
  }

  /* Home board: 1 columna (todas las cards del mismo ancho) */
  .cth-dashboard .home-board {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cth-dashboard .home-banner-row,
  .cth-dashboard .home-card-birthdays,
  .cth-dashboard .home-card-event-top,
  .cth-dashboard .home-card-bulletin,
  .cth-dashboard .home-card-event-bottom {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: auto;
  }

  /* Boletín: layout interno en 1 columna */
  .cth-dashboard .home-bulletin-layout {
    grid-template-columns: 1fr;
  }

  .cth-dashboard .home-bulletin-thumb img {
    max-width: 220px;
  }
}






/* =====================================================
   Desktop/Laptop fix (keep mobile intact)
   - Hide hamburger/menu toggle on desktop
   - Ensure topbar content aligns correctly
   ===================================================== */
@media (min-width: 820px) {
  .cth-dashboard .menu-toggle {
    display: none !important;
  }

  .cth-dashboard .sidebar-backdrop {
    display: none !important;
  }

  .cth-dashboard .topbar {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    align-items: center !important;
  }

  .cth-dashboard .social {
    justify-content: center !important;
  }

  .cth-dashboard .topbar-right {
    justify-content: flex-end !important;
  }
}


/* =====================================================================
   HOME FIXES (quirúrgico): Cumpleaños 2 por fila + avatares circulares
   + Eventos: quitar H2 redundante y centrar imagen en el card
   ===================================================================== */

/* 1) Cumpleaños: 2 tarjetas por fila (desktop y móvil) */
.cth-dashboard .birthday-strip {
  justify-content: flex-start !important;
  gap: 16px !important;
}

.cth-dashboard .birthday-card {
  flex: 1 1 calc(50% - 16px) !important;
  min-width: 0 !important;
  /* evita forzar 1 por fila */
  gap: 12px !important;
}

/* Avatares siempre circulares */
.cth-dashboard .birthday-avatar {
  width: 88px !important;
  height: 88px !important;
  aspect-ratio: 1 / 1;
  border-radius: 999px !important;
  overflow: hidden !important;
  flex: 0 0 auto;
}

.cth-dashboard .birthday-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 999px !important;
}

/* Tipografía un toque más compacta */
.cth-dashboard .birthday-name {
  font-size: 14px !important;
}

.cth-dashboard .birthday-role,
.cth-dashboard .birthday-date {
  font-size: 11px !important;
}

/* 2) Eventos: quitar el título (Janucá / Fiesta...) y centrar la pieza */
.cth-dashboard .home-card-event .home-card-header h2 {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Centrar la imagen dentro del card */
.cth-dashboard .home-card-event .home-card-body {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-height: 0;
}

.cth-dashboard .home-card-event .home-event-figure {
  margin: 0 !important;
  width: 100%;
  display: flex;
  justify-content: center;
}

.cth-dashboard .home-card-event .home-event-figure img {
  display: block;
  margin: 0 auto;
}

/* ================================================= */
/* UI NOTIFICATIONS · MODAL GLOBAL (CTH)             */
/* ================================================= */

.ui-notify {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.ui-notify.show {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ui-notify-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.ui-notify-box {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  padding: 36px 40px 32px;
  width: min(420px, 92vw);
  text-align: center;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
}

.ui-notify-icon {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-notify.success .ui-notify-icon {
  background: linear-gradient(135deg, #4CAF50, #2ecc71);
}

.ui-notify.error .ui-notify-icon {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.ui-notify.warning .ui-notify-icon {
  background: linear-gradient(135deg, #f59e0b, #facc15);
}

.ui-notify.info .ui-notify-icon {
  background: linear-gradient(135deg, #00A3E0, #BDE8FF);
}

.ui-notify-title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 900;
  color: #0f172a;
}

.ui-notify-message {
  margin: 0;
  font-size: 15px;
  color: #475569;
  line-height: 1.5;
}

.ui-notify-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

.ui-notify-actions .btn-primary,
.ui-notify-actions .btn-secondary {
  flex: 1 1 0;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

.ui-notify-actions .btn-primary {
  background: linear-gradient(135deg, #00c2ff, #0067ff);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 117, 255, 0.35);
}

.ui-notify-actions .btn-secondary {
  background: #f1f5f9;
  color: #0f172a;
}

/* Mejorar experiencia táctil en Android */
.cth-dashboard .menu-toggle {
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 12px !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform 0.1s ease !important;
}

/* Feedback táctil más evidente en Android */
.cth-dashboard .menu-toggle:active {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

/* Feedback de pulsación en botones principales */
.cth-dashboard .btn:active,
.cth-dashboard .home-bulletin-button:active,
.cth-dashboard .sidebar .nav-btn:active,
.cth-dashboard .ui-notify-actions .btn-primary:active,
.cth-dashboard .ui-notify-actions .btn-secondary:active {
  transform: scale(0.97);
  transition: transform 60ms ease;
}

/* Mejorar botones del menú para Android */
.cth-dashboard .sidebar .nav-btn {
  min-height: 64px !important;
  padding: 18px 14px !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3) !important;
  transition: opacity 0.1s ease !important;
}

/* Backdrop más sensible en Android */
.cth-dashboard .sidebar-backdrop {
  touch-action: none !important;
}

/* =========================
   PATCH · HOME BANNER SAFE
   (solo valla, sin tocar lo demás)
   ========================= */
.cth-dashboard .home-board .home-banner-row {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  height: auto !important;
}

.cth-dashboard .home-card.home-card-banner {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  height: auto !important;
}

.cth-dashboard .home-banner-figure {
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

.cth-dashboard .home-banner-figure img {
  width: 100% !important;
  max-width: 900px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 18px !important;
}
/* --- Cumpleaños Vacíos Animan --- */
.birthday-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  text-align: center;
  width: 100%;
}

.birthday-emoji-animate {
  font-size: 64px;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
  animation: bdayFloating 2.5s infinite ease-in-out;
  cursor: default;
  user-select: none;
}

.birthday-empty-state .home-card-note {
  font-size: 16px;
  color: #64748b;
  margin: 0;
  font-weight: 500;
}

@keyframes bdayFloating {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  33% { transform: translateY(-15px) rotate(5deg) scale(1.05); }
  66% { transform: translateY(-5px) rotate(-5deg) scale(1); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* --- Animación de Fiesta para Cumpleañeros --- */
.birthday-card {
  position: relative; /* para que las serpentinas se posicionen respecto a la card */
}

.birthday-confetti-container {
  position: absolute;
  top: 50%;
  left: 70px; /* centro del avatar de 140px */
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  pointer-events: none;
  z-index: -1; /* por detrás de la foto */
  overflow: visible;
}

.confetti-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #ff0;
  border-radius: 2px;
  opacity: 0;
}

/* Generamos ráfagas de colores */
.confetti-particle:nth-child(1) { background: #ff4757; animation: confettiBurst1 3s infinite 0s; }
.confetti-particle:nth-child(2) { background: #2ed573; animation: confettiBurst2 3s infinite 0.2s; }
.confetti-particle:nth-child(3) { background: #1e90ff; animation: confettiBurst3 3s infinite 0.4s; }
.confetti-particle:nth-child(4) { background: #ffa502; animation: confettiBurst4 3s infinite 0.6s; }
.confetti-particle:nth-child(5) { background: #ff6b81; animation: confettiBurst5 3s infinite 0.8s; }
.confetti-particle:nth-child(6) { background: #7bed9f; animation: confettiBurst1 3s infinite 1s; }
.confetti-particle:nth-child(7) { background: #70a1ff; animation: confettiBurst2 3s infinite 1.2s; }
.confetti-particle:nth-child(8) { background: #eccc68; animation: confettiBurst3 3s infinite 1.4s; }

@keyframes confettiBurst1 {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: translate(60px, -80px) rotate(45deg) scale(1.2); opacity: 1; }
  100% { transform: translate(100px, 40px) rotate(180deg) scale(0.5); opacity: 0; }
}
@keyframes confettiBurst2 {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: translate(-70px, -60px) rotate(-45deg) scale(1.1); opacity: 1; }
  100% { transform: translate(-110px, 60px) rotate(-180deg) scale(0.4); opacity: 0; }
}
@keyframes confettiBurst3 {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: translate(0px, -100px) rotate(90deg) scale(1); opacity: 1; }
  100% { transform: translate(20px, 80px) rotate(270deg) scale(0.3); opacity: 0; }
}
@keyframes confettiBurst4 {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: translate(80px, 0px) rotate(20deg) scale(1); opacity: 1; }
  100% { transform: translate(120px, 100px) rotate(160deg) scale(0.2); opacity: 0; }
}
@keyframes confettiBurst5 {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: translate(-80px, 20px) rotate(-20deg) scale(1.3); opacity: 1; }
  100% { transform: translate(-140px, 120px) rotate(-160deg) scale(0.6); opacity: 0; }
}

/* --- Fiesta Explosiva CTH --- */
.birthday-confetti-container {
  /* Expandimos el área para que la explosión se vea más grande */
  width: 400px;
  height: 400px;
}

.confetti-particle {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* Partículas tipo cinta/serpentina */
.confetti-particle.ribbon {
  width: 4px;
  height: 20px;
  border-radius: 20px;
}

/* Más ráfagas y variaciones */
.confetti-particle:nth-child(2n) { width: 12px; height: 6px; }
.confetti-particle:nth-child(3n) { width: 4px; height: 18px; }

/* Animaciones más agresivas */
@keyframes confettiBurst1 {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  25% { transform: translate(120px, -150px) scale(1.5) rotate(90deg); opacity: 1; }
  100% { transform: translate(180px, 100px) scale(0.5) rotate(360deg); opacity: 0; }
}
@keyframes confettiBurst2 {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  25% { transform: translate(-140px, -120px) scale(1.3) rotate(-120deg); opacity: 1; }
  100% { transform: translate(-200px, 80px) scale(0.3) rotate(-450deg); opacity: 0; }
}
@keyframes confettiBurst3 {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  25% { transform: translate(20px, -200px) scale(1.2) rotate(45deg); opacity: 1; }
  100% { transform: translate(-30px, 150px) scale(0.4) rotate(270deg); opacity: 0; }
}
@keyframes confettiBurst4 {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  25% { transform: translate(160px, 30px) scale(1.4) rotate(180deg); opacity: 1; }
  100% { transform: translate(220px, 200px) scale(0.2) rotate(540deg); opacity: 0; }
}
@keyframes confettiBurst5 {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  25% { transform: translate(-160px, 50px) scale(1.6) rotate(-90deg); opacity: 1; }
  100% { transform: translate(-250px, 180px) scale(0.6) rotate(-360deg); opacity: 0; }
}

/* Aplicar a más hijos con delays variados */
.confetti-particle:nth-child(9) { background: #ff4757; animation: confettiBurst1 3.5s infinite 0.1s; }
.confetti-particle:nth-child(10) { background: #2ed573; animation: confettiBurst2 3.5s infinite 0.3s; }
.confetti-particle:nth-child(11) { background: #1e90ff; animation: confettiBurst3 3.5s infinite 0.5s; }
.confetti-particle:nth-child(12) { background: #ffa502; animation: confettiBurst4 3.5s infinite 0.7s; }
.confetti-particle:nth-child(13) { background: #ff6b81; animation: confettiBurst5 3.5s infinite 0.9s; }
.confetti-particle:nth-child(14) { background: #7bed9f; animation: confettiBurst1 3.5s infinite 1.1s; }
.confetti-particle:nth-child(15) { background: #70a1ff; animation: confettiBurst2 3.5s infinite 1.3s; }
.confetti-particle:nth-child(16) { background: #eccc68; animation: confettiBurst3 3.5s infinite 1.5s; }
.confetti-particle:nth-child(17) { background: #ff4757; animation: confettiBurst4 3.5s infinite 1.7s; }
.confetti-particle:nth-child(18) { background: #2ed573; animation: confettiBurst5 3.5s infinite 1.9s; }
.confetti-particle:nth-child(19) { background: #1e90ff; animation: confettiBurst1 3.5s infinite 2.1s; }
.confetti-particle:nth-child(20) { background: #ffa502; animation: confettiBurst2 3.5s infinite 2.3s; }

/* --- Ajustes finales de explosión --- */
.birthday-avatar {
  position: relative;
  z-index: 2; /* Siempre por encima del confeti */
}

.confetti-particle {
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.birthday-confetti-container {
  /* Forzamos que el centro de la explosión esté alineado */
  pointer-events: none;
  display: block !important;
}
/* ==========================================
   Hover Premium · Unificado con Sidebar
   (Soporte Técnico + Reporte de Daños)
   ========================================== */

.cth-dashboard .action[data-action="soporte-tecnico"],
.cth-dashboard .action[data-action="reporte-danos"] {
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.cth-dashboard .action[data-action="soporte-tecnico"] .icon,
.cth-dashboard .action[data-action="soporte-tecnico"] h3,
.cth-dashboard .action[data-action="reporte-danos"] .icon,
.cth-dashboard .action[data-action="reporte-danos"] h3 {
  transition: color 0.25s ease, stroke 0.25s ease;
}

/* Hover */
.cth-dashboard .action[data-action="soporte-tecnico"]:hover,
.cth-dashboard .action[data-action="reporte-danos"]:hover {
  border-color: #f5a623; /* naranja institucional */
  background: linear-gradient(
    180deg,
    #fff1dc,  /* naranja MUY suave arriba */
    #fffaf2   /* casi blanco abajo */
  );
  box-shadow: 0 12px 28px rgba(245, 166, 35, 0.35);
  transform: translateY(-2px);
}

/* Icono + texto */
.cth-dashboard .action[data-action="soporte-tecnico"]:hover .icon,
.cth-dashboard .action[data-action="soporte-tecnico"]:hover h3,
.cth-dashboard .action[data-action="reporte-danos"]:hover .icon,
.cth-dashboard .action[data-action="reporte-danos"]:hover h3 {
  color: #f5a623;
  stroke: #f5a623;
}

/* ════════════════════════════════════════════════════
   TABLET: 820px – 1024px  (va al final para ganar cascada)
   ════════════════════════════════════════════════════ */
@media (min-width: 820px) and (max-width: 1024px) {

  /* Grid principal */
  .cth-dashboard .app {
    grid-template-columns: 150px 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "sidebar topbar"
      "sidebar content" !important;
    gap: 14px !important;
    padding: 14px 14px 24px !important;
  }

  /* Sidebar con icono + texto */
  .cth-dashboard .sidebar {
    border-radius: 0 24px 24px 0 !important;
    padding: 16px 8px !important;
    width: 150px !important;
    min-width: 150px !important;
    position: sticky !important;
    /* Resetear el transform del drawer móvil */
    transform: none !important;
    /* Resetear position:fixed del móvil */
    top: 0 !important;
    left: auto !important;
    height: auto !important;
    min-height: 100dvh !important;
    box-shadow: none !important;
    z-index: auto !important;
  }

  .cth-dashboard .sidebar .nav-btn {
    padding: 6px 4px !important;
    border-radius: 12px !important;
    gap: 3px !important;
  }

  /* Mostrar etiquetas de texto */
  .cth-dashboard .sidebar .nav-btn .badge {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .cth-dashboard .sidebar .nav-btn .icon,
  .cth-dashboard .sidebar .nav-btn img,
  .cth-dashboard .sidebar .nav-btn .nav-icon {
    width: 32px !important;
    height: 32px !important;
  }

  /* Nav: distribuir botones en todo el alto sin aire sobrante */
  .cth-dashboard .sidebar nav {
    justify-content: space-evenly !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    gap: 0 !important;
    flex: 1 !important;
    min-height: 0 !important;
  }

  /* Carrusel de eventos: contener desbordamiento */
  .cth-dashboard .home-card-event-top,
  .cth-dashboard .home-card-event-bottom {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Panel derecho oculto */
  .cth-dashboard .sidebar-right {
    display: none !important;
  }

  /* Topbar: dos columnas (redes izquierda, usuario derecha) */
  .cth-dashboard .topbar {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
  }

  /* Social links: más compactos para que no se corten */
  .cth-dashboard .social {
    gap: 3px !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  .cth-dashboard .social-link {
    font-size: 10px !important;
    padding: 3px 7px !important;
    gap: 3px !important;
  }

  .cth-dashboard .social-link svg,
  .cth-dashboard .social-link img {
    width: 12px !important;
    height: 12px !important;
  }

  /* Home board: una sola columna */
  .cth-dashboard .home-board {
    grid-template-columns: 1fr !important;
  }

  /* ── Banner "Bienvenidos" en tablet ── */
  .cth-dashboard .welcome {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 20px 28px !important;
    min-height: 0 !important;
  }

  .cth-dashboard .welcome > div:not(.avatar-hero),
  .cth-dashboard .welcome > .banner-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .cth-dashboard .welcome p {
    max-width: 52ch !important;
    font-size: 14px !important;
  }

  .cth-dashboard .welcome h1 {
    font-size: 26px !important;
  }

  .cth-dashboard .avatar-hero {
    flex: 0 0 100px !important;
    width: 100px !important;
    height: 100px !important;
    justify-self: unset !important;
    align-self: center !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
  }
}