/* ═══════════════════════════════════════════════════════════════
   FASE 1 — Quick wins UI/UX + Rediseño visual ESTUDIO
   Panelc — 2026-04-07
   Todos los cambios en este archivo aislado. Para revertir:
   quitar la línea <link> en index.php.
═══════════════════════════════════════════════════════════════ */

/* ── 1. BADGE CHATS → verde pastel agrisado ─────────────────
   (Reemplazo: tono pastel suave con texto verde oscuro para contraste) */
.nbadge {
  background: #b8d4ba !important;
  color: #2c4a35 !important;
}

/* ── 2. MENÚ EMERGENTE USUARIO — scroll cuando es alto ────── */
#f42-panels-dropdown {
  max-height: calc(100vh - 70px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ── 3. MODAL CÓDIGO ÉTICO — márgenes internos ─────────────── */
#m-etica .mbody,
#m-etica .modal-body,
#m-etica [class*="modal-body"],
#m-etica > div:not(.mhead):not(.mfooter) {
  padding: 20px 24px !important;
  line-height: 1.7 !important;
}
#m-etica .mhead {
  padding: 16px 20px !important;
}

/* ── 4. BANDA BLANCA ENCIMA DEL BOTTOM MENU (móvil) ─────────
   El problema es un padding-bottom o un elemento vacío
   encima de .bnav en modo móvil                             */
@media (max-width: 768px) {
  /* Eliminar cualquier espacio vacío entre contenido y bnav */
  .section {
    padding-bottom: 0 !important;
  }
  /* Asegurar que el body no tiene safe-area extra blanca */
  .bnav {
    border-top: 1px solid var(--bor) !important;
  }
  /* Quitar el gap blanco que puede venir de un safe-area mal calculado */
  body {
    padding-bottom: 0 !important;
  }
  /* Si hay un wrapper con padding innecesario */
  #app-wrap, #main-wrap, #panelc-root {
    padding-bottom: 0 !important;
  }
}

/* ── 5. PRODUCCIÓN MÓVIL — 2 columnas (iconos izq / recientes der) */
@media (max-width: 768px) {
  /* Wrapper del home de producción en móvil */
  .prod-home-mobile,
  #s-produccion .prod-home,
  #prod-home-wrap {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    gap: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  /* Columna izquierda: iconos de tipo de documento */
  .prod-tipos-col,
  #prod-tipos-list,
  .prod-new-types {
    grid-column: 1 !important;
    border-right: 1px solid var(--bor) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 8px 4px !important;
    gap: 4px !important;
    background: var(--bg2) !important;
  }
  /* Columna derecha: archivos recientes */
  .prod-recientes-col,
  #prod-recientes-list,
  .prod-recent-files {
    grid-column: 2 !important;
    overflow-y: auto !important;
    padding: 8px !important;
  }
}

/* ── 6. BUSCADOR DE PRODUCCIÓN — centrado y más grande (escritorio) */
@media (min-width: 769px) {
  #topbar-prod-search,
  #topbar-produccion-search {
    flex: 0 1 480px !important;
    margin: 0 auto !important;
    max-width: 480px !important;
  }
  #topbar-prod-search input,
  #topbar-produccion-search input,
  #topbar-prod-input {
    font-size: .9rem !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
  }
}

/* ── 7. AVISOS "VERSIÓN BETA EN CONSTRUCCIÓN" — estilos del badge */
.beta-badge-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(100, 255, 0, 0.08);
  border-bottom: 1px solid rgba(100, 255, 0, 0.2);
  color: var(--muted, #888);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .4px;
  padding: 5px 12px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.beta-badge-bar svg {
  opacity: .6;
}
.beta-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64ff00;
  display: inline-block;
  animation: betaPulse 2s ease-in-out infinite;
}
@keyframes betaPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

/* ── 8. TOAST TEO — dato curioso al primer login ─────────────
   El toast ya existe en Panelc, solo añadimos estilo especial */
.teo-daily-toast {
  background: var(--panel, #1a1a2e) !important;
  border: 1px solid rgba(100,255,0,.3) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  max-width: 340px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.35) !important;
}
.teo-daily-toast .tdt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  font-weight: 700;
  color: #64ff00;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.teo-daily-toast .tdt-body {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--txt);
}


/* ════════════════════════════════════════════════════════════
   REDISEÑO VISUAL COMPLETO — SECCIÓN ESTUDIO
════════════════════════════════════════════════════════════ */

/* ── HOME: cabecera más limpia ─────────────────────────────── */
.est-top-bar {
  padding: 14px 20px !important;
  background: var(--bg1) !important;
}

/* ── HOME: asig-grid → ahora REALMENTE usa el grid de tarjetas */
#asig-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  align-content: start !important;
  flex-direction: unset !important;
  overflow-y: auto !important;
  flex: 1 !important;
}
@media (max-width: 600px) {
  #asig-grid {
    grid-template-columns: 1fr 1fr !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }
}
@media (max-width: 360px) {
  #asig-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Tarjeta asignatura — override del estilo lista-fila ───── */
/* El JS renderiza divs con inline styles. Los sobreescribimos
   para convertirlos en tarjetas visuales con aspecto Classroom */
#asig-grid > div[onclick] {
  /* Convertir fila en tarjeta */
  display: flex !important;
  flex-direction: column !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--bor) !important;
  background: var(--bg1) !important;
  cursor: pointer !important;
  transition: box-shadow .2s, transform .15s !important;
  padding: 0 !important;
  margin: 0 !important;
  border-left: none !important;
  min-height: 120px !important;
  position: relative !important;
}
#asig-grid > div[onclick]:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.14) !important;
  transform: translateY(-3px) !important;
  background: var(--bg1) !important;
}

/* El primer child es el icono cuadrado → lo hacemos banner superior */
#asig-grid > div[onclick] > div:first-child {
  width: 100% !important;
  height: 72px !important;
  border-radius: 0 !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  letter-spacing: -1px !important;
}
/* Pattern decorativo en el banner */
#asig-grid > div[onclick] > div:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .1;
  background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%);
  background-size: 8px 8px;
  pointer-events: none;
}

/* El segundo child es el bloque de texto info */
#asig-grid > div[onclick] > div:nth-child(2) {
  flex: 1 !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
/* Nombre de la asignatura */
#asig-grid > div[onclick] > div:nth-child(2) > div:first-child {
  font-size: .86rem !important;
  font-weight: 700 !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}
/* Meta info (profesor, miembros, tareas) */
#asig-grid > div[onclick] > div:nth-child(2) > div:nth-child(2) {
  font-size: .7rem !important;
  margin-top: 2px !important;
  gap: 6px !important;
}

/* El último child es el emoji de rol → lo posicionamos arriba-derecha */
#asig-grid > div[onclick] > span:last-child {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  font-size: .8rem !important;
  background: rgba(0,0,0,.2) !important;
  border-radius: 6px !important;
  padding: 2px 5px !important;
}

/* ── Secciones de grupo (MI CENTRO / FORMACIÓN PERSONAL) ───── */
#asig-grid > div:not([onclick]) {
  grid-column: 1 / -1 !important;
  display: block !important;
  border-left: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: unset !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  transform: none !important;
}
#asig-grid > div:not([onclick]):hover {
  box-shadow: none !important;
  transform: none !important;
  background: transparent !important;
}

/* ── Separador entre secciones ─────────────────────────────── */
#asig-grid > div[style*="border-top"] {
  grid-column: 1 / -1 !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: unset !important;
  border-left: none !important;
  border-radius: 0 !important;
  transform: none !important;
}
#asig-grid > div[style*="border-top"]:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* ── Labels de sección (MI CENTRO / FORMACIÓN PERSONAL) ────── */
#asig-grid [style*="text-transform:uppercase"],
#asig-grid [style*="text-transform: uppercase"] {
  font-size: .68rem !important;
  font-weight: 800 !important;
  color: var(--muted) !important;
  letter-spacing: 1px !important;
  padding: 16px 4px 6px !important;
  display: block !important;
}

/* ── (#114) Vista interior: banner alto, stats debajo del título ────────── */
.asig-banner {
  min-height: 120px !important;
  height: auto !important;
  padding: 14px 18px !important;
  align-items: flex-start !important;
}
.asig-banner-info h2 {
  font-size: 1.15rem !important;
  letter-spacing: -.2px !important;
}
.asig-banner-back {
  width: 36px !important;
  height: 36px !important;
  background: rgba(0,0,0,.25) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  margin-top: 2px;
}

/* ── Tabs navegación interior — más espaciados y legibles ──── */
.estudio-tabs-top {
  padding: 0 12px !important;
  gap: 2px !important;
}
.est-tab, .asig-tab {
  padding: .65rem 1rem !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  letter-spacing: .1px !important;
}
.est-tab.on, .asig-tab.on {
  font-weight: 700 !important;
}

/* ── Panel tablón — más padding y mejor separación ─────────── */
.ap-tablon-actions {
  padding: 12px 16px !important;
  gap: 8px !important;
  background: var(--bg2) !important;
}
.ap-quick-btn {
  border-radius: 20px !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
}
#ap-anuncios {
  padding: 14px 16px !important;
}

/* ── Anuncio card — más respiración ───────────────────────── */
.anuncio-card {
  border-radius: 12px !important;
  overflow: hidden !important;
}
.an-header {
  padding: 12px 14px !important;
}
.an-cont {
  font-size: .85rem !important;
  padding: 4px 14px 14px !important;
  line-height: 1.6 !important;
}

/* ── Tarea card ─────────────────────────────────────────────── */
.tarea-card {
  border-radius: 12px !important;
  padding: 14px 16px !important;
}
.tc-tit {
  font-size: .9rem !important;
}

/* ── Informes cards ─────────────────────────────────────────── */
.est-info-card {
  padding: 16px 12px !important;
  border-radius: 12px !important;
  gap: 6px !important;
}

/* ── Empty states — más estilizados ────────────────────────── */
.est-empty {
  gap: 14px !important;
}
.est-empty-ico {
  font-size: 3.5rem !important;
  opacity: .25 !important;
}
.est-empty p {
  font-size: .88rem !important;
}

/* ── Miembros — más separación ──────────────────────────────── */
.upi {
  padding: .75rem 1rem !important;
}
.upi-av {
  width: 38px !important;
  height: 38px !important;
  font-size: 1rem !important;
}
.un {
  font-size: .86rem !important;
}

/* ── Header secciones de asig (padre escuela/curso) ─────────── */
#asig-grid [style*="🏫"],
#asig-grid [style*="📘"] {
  padding: 6px 6px 4px !important;
  font-weight: 700 !important;
}

/* ── VIDEOS: botón (+) Subir unificado gris ─────────────────── */
.vid-upload-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  border: 1px solid var(--bor) !important;
  background: var(--bg2) !important;
  color: var(--muted) !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
}
.vid-upload-btn:hover {
  background: var(--bg3, rgba(128,128,128,.15)) !important;
  color: var(--txt) !important;
}

/* Suprimir el FAB verde de panelc-video-upload-ui.js (duplicado) */
#panelc-vup-fab,
#panelc-vup-list-fab {
  display: none !important;
}

/* ── TEXTO: toolbar horizontal mobile — fade indicator ──────── */
@media (max-width: 600px) {
  .prod-ed-vtoolbar {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  /* Right-side fade to hint at scrollable content */
  .prod-ed-vtoolbar::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    min-width: 20px;
    flex-shrink: 0;
    background: linear-gradient(to right, transparent, var(--bg1));
    pointer-events: none;
  }
}

/* ── TEXTO: status bar hidden on very small screens except word/page ─ */
@media (max-width: 380px) {
  .prod-sb-sep { display: none; }
  #prod-sb-chars { display: none; }
}

/* ── TEO BAR: forzar ocultado cuando hay conversación abierta (escritorio)
   Cuando #s-chat tiene la clase .teo-in-sidebar significa que TEO se debe
   mostrar pequeño dentro del sidebar y el float grande NO debe verse nunca.
   Esta regla evita que cualquier JS (applyTeoVisibility, refreshes, etc.)
   vuelva a mostrar la barra grande por encima del input de chat. */
#s-chat.teo-in-sidebar ~ * #teo-float,
body:has(#s-chat.teo-in-sidebar) #teo-float {
  display: none !important;
}
/* Fallback sin :has (navegadores antiguos): si el usuario está en la
   sección chat (s-chat visible) y hay una conversación abierta (chat-view
   con display:flex), ocultamos el float en escritorio. */
@media (min-width: 640px) {
  #s-chat.on.teo-in-sidebar #teo-float,
  body:has(#s-chat.teo-in-sidebar) #teo-float {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   KILL-ALL SHADOWS — desactiva cualquier sombra/gradiente sospechoso
   en todo el proyecto. Si quieres revertir, borra este bloque entero.
═══════════════════════════════════════════════════════════════════ */

/* 1. Mata todos los box-shadow y text-shadow de cualquier elemento */
*,
*::before,
*::after {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

/* 2. Neutraliza las variables CSS de sombra usadas en varios módulos */
:root {
  --shadow: none !important;
  --shadow-up: none !important;
  --ia-shadow: none !important;
}

/* 3. Mata filter:drop-shadow() en cualquier inline style del HTML */
[style*="drop-shadow"] {
  filter: none !important;
  -webkit-filter: none !important;
}
[style*="box-shadow"] {
  box-shadow: none !important;
}

/* 4. Anula cualquier background-image/gradient en los contenedores
      grandes que podrían proyectar un "degradado de sombra" sobre el
      topbar (html, body, #app y el propio topbar). */
html,
body,
#app,
.topbar,
#main-topbar {
  background-image: none !important;
  background-attachment: initial !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* 5. Fuerza el topbar a ser blanco puro sin ningún efecto */
.topbar,
#main-topbar {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  position: relative !important;
  overflow: visible !important;
}

/* 6. Tapón opaco de 24px en la franja superior del topbar. Cubre
      cualquier sombra/gradiente que siga renderizándose. */
.topbar::before,
#main-topbar::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 24px !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* 7. Los hijos del topbar van por encima del tapón */
.topbar > *,
#main-topbar > * {
  position: relative !important;
  z-index: 2 !important;
}