/* ==========================================================================
   TFG MATEMÁTICAS — CELIA (ANTIGRAVITY)
   Estilos Neobrutalistas Modernos, Limpios y de Máxima Precisión
   ========================================================================== */

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  
  --bg: #f8fafc;
  --surface: #ffffff;
  --tinta: #0f172a;
  --tinta-2: #334155;
  --tenue: #64748b;
  --borde: #0f172a;
  
  /* Acentos Neobrutalistas */
  --amarillo: #fef08a;
  --amarillo-fuerte: #fde047;
  --verde: #bbf7d0;
  --verde-fuerte: #22c55e;
  --azul: #bae6fd;
  --azul-fuerte: #0284c7;
  --morado: #e0e7ff;
  --rosa: #fbcfe8;
  --rojo: #fee2e2;
  --rojo-fuerte: #ef4444;
  
  --sombra-lg: 6px 6px 0 var(--tinta);
  --sombra: 4px 4px 0 var(--tinta);
  --sombra-sm: 2.5px 2.5px 0 var(--tinta);
  --sombra-activa: 1px 1px 0 var(--tinta);
  
  --radio-lg: 12px;
  --radio: 8px;
  --radio-sm: 6px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  background-image: 
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--tinta);
  font-family: var(--font-sans);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Scrollbars globales delgados y limpios */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: #f1f5f9;
}
*::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ==========================================================================
   0. PREVENCIÓN DE PARPADEO FOUC (ACCESO Y SESIÓN)
   ========================================================================== */

#pinOverlay {
  display: flex;
}

#mainWorkspace {
  display: none;
}

html.auth-activa #pinOverlay {
  display: none !important;
}

html.auth-activa #mainWorkspace {
  display: flex !important;
}

html.auth-pendiente #pinOverlay {
  display: flex !important;
}

html.auth-pendiente #mainWorkspace {
  display: none !important;
}

html.google-conectado #contenedorConsolaActiva {
  display: flex !important;
}

html.google-conectado #cardLoginGoogle {
  display: none !important;
}

/* ==========================================================================
   1. PANTALLA DE SEGURIDAD / PIN MODAL
   ========================================================================== */

.pin-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pin-modal {
  background: var(--surface);
  border: 3.5px solid var(--tinta);
  border-radius: var(--radio-lg);
  box-shadow: 10px 10px 0 var(--tinta);
  max-width: 420px;
  width: 100%;
  padding: 32px 28px 24px;
  text-align: center;
  position: relative;
  animation: modalEntrada 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalEntrada {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.pin-escudo {
  width: 64px;
  height: 64px;
  background: var(--amarillo);
  border: 3px solid var(--tinta);
  border-radius: 50%;
  box-shadow: var(--sombra-sm);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.pin-pill-seguridad {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--azul);
  border: 2px solid var(--tinta);
  padding: 3px 10px;
  border-radius: 20px;
  box-shadow: var(--sombra-sm);
  margin-bottom: 12px;
}

.pin-titulo {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.pin-subtitulo {
  font-size: 0.88rem;
  color: var(--tinta-2);
  margin-bottom: 22px;
  line-height: 1.4;
}

/* Celdas de Dígitos */
.pin-display {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
  cursor: pointer;
}

.pin-digito {
  width: 52px;
  height: 60px;
  border: 3px solid var(--tinta);
  border-radius: var(--radio);
  background: #f8fafc;
  box-shadow: var(--sombra-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 800;
  transition: all 0.15s ease;
}

.pin-digito.lleno {
  background: var(--amarillo);
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}

.pin-input-oculto {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pin-mensaje {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 12px;
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  margin-bottom: 18px;
  background: var(--rojo);
  color: var(--tinta);
}

.pin-mensaje.exito {
  background: var(--verde);
}

/* Teclado Numérico */
.pin-teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.btn-num {
  background: #ffffff;
  border: 2.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  padding: 12px 0;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--tinta);
  cursor: pointer;
  transition: all 0.08s ease;
}

.btn-num:hover {
  background: var(--amarillo);
  transform: translate(-1px, -1px);
  box-shadow: var(--sombra);
}

.btn-num:active {
  transform: translate(2px, 2px);
  box-shadow: var(--sombra-activa);
}

.btn-accion-teclado {
  background: #f1f5f9;
  font-size: 1.1rem;
}

.btn-desbloquear-pin {
  width: 100%;
  background: var(--verde);
  border: 3px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 13px;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 800;
  color: var(--tinta);
  cursor: pointer;
  transition: all 0.1s ease;
}

.btn-desbloquear-pin:hover {
  background: var(--verde-fuerte);
  color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: var(--sombra-lg);
}

.btn-desbloquear-pin:active {
  transform: translate(2px, 2px);
  box-shadow: var(--sombra-activa);
}

.pin-pie-seguridad {
  margin-top: 18px;
  font-size: 0.74rem;
  font-family: var(--font-mono);
  color: var(--tenue);
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
}

.shake {
  animation: shakeAnim 0.35s ease;
}

@keyframes shakeAnim {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* ==========================================================================
   2. ESPACIO DE TRABAJO PRINCIPAL (PANTALLA COMPLETA)
   ========================================================================== */

.workspace-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 10px 14px;
  max-width: 1920px;
  margin: 0 auto;
  gap: 10px;
  transition: padding 0.24s ease, gap 0.24s ease;
  position: relative;
}

/* Modo pantalla completa (barra superior colapsada limpiamente) */
.workspace-layout.topnav-colapsado {
  padding-top: 6px;
  padding-bottom: 6px;
  gap: 0;
}

.workspace-layout.topnav-colapsado .top-nav {
  display: none !important;
}

/* Botón minimalista en la esquina superior derecha (Modo pantalla completa) */
.btn-restaurar-topnav {
  display: none;
  position: fixed;
  top: 10px;
  right: 14px;
  left: auto !important;
  transform: none !important;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--tinta, #0f172a);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--tinta, #0f172a);
  padding: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  color: var(--tinta, #0f172a);
}

.workspace-layout.topnav-colapsado .btn-restaurar-topnav {
  display: inline-flex;
  animation: fadeInCorner 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-restaurar-topnav:hover {
  background: var(--amarillo, #fef08a);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--tinta, #0f172a);
}

.btn-restaurar-topnav:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--tinta, #0f172a);
}

.icono-fullscreen-restore {
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 700;
  display: inline-block;
}

.menu-corner-antigravity {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 215px;
  background: #ffffff;
  border: 2px solid var(--tinta, #0f172a);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--tinta, #0f172a);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 100000;
  animation: fadeInCorner 0.12s ease;
}

.item-corner-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--tinta, #0f172a);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: background 0.1s ease;
}

.item-corner-dropdown:hover {
  background: #f1f5f9;
}

.item-corner-ico {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.item-corner-textos {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.item-corner-textos strong {
  font-size: 0.78rem;
  color: var(--tinta, #0f172a);
  font-weight: 700;
}

.item-corner-textos small {
  font-size: 0.68rem;
  color: #64748b;
}

.btn-antigravity-top {
  background: #ffffff;
}

.btn-antigravity-top:hover {
  background: var(--morado, #e0e7ff);
}

@keyframes fadeInCorner {
  from {
    transform: translateY(-4px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Barra Superior */
.top-nav {
  display: flex;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--surface);
  border: 3px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 4px 10px;
  flex-shrink: 0;
  min-height: 46px;
  max-height: 50px;
  overflow: visible;
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease,
              margin-top 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              max-height 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.2s ease;
}

.top-nav-izq {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.badge-brand {
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 0.82rem;
  background: var(--amarillo);
  border: 2px solid var(--tinta);
  box-shadow: var(--sombra-sm);
  padding: 4px 9px;
  border-radius: var(--radio-sm);
  text-decoration: none;
  color: var(--tinta);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.1s ease;
}

.badge-brand:hover {
  background: var(--amarillo-fuerte);
  transform: translate(-1px, -1px);
}

.tag-usuario {
  background: #ffffff;
  border: 1.5px solid var(--tinta);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.70rem;
  font-weight: 800;
  flex-shrink: 0;
}

.top-nav-herramientas {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
  flex-shrink: 0;
}

.btn-top-herramienta {
  background: #ffffff;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--tinta);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-top-herramienta:hover {
  background: var(--amarillo);
  transform: translate(-1px, -1px);
  box-shadow: var(--sombra);
}

.btn-top-herramienta:active {
  transform: translate(1px, 1px);
  box-shadow: var(--sombra-activa);
}

/* Selector de Modo */
.selector-modo {
  display: flex;
  align-items: center;
  background: #f1f5f9;
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}

.btn-modo {
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--radio-sm);
  color: var(--tinta-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-modo:hover {
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.6);
}

.btn-modo.activo {
  background: #ffffff;
  color: var(--tinta);
  font-weight: 800;
  border: 2px solid var(--tinta);
  box-shadow: var(--sombra-sm);
}

/* Acciones Superior Derecha */
.top-nav-der {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.btn-accion-top {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 800;
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  padding: 4px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.1s ease;
  background: #ffffff;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.25;
}

.btn-accion-top:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--sombra);
}

.btn-accion-top:active {
  transform: translate(1px, 1px);
  box-shadow: var(--sombra-activa);
}

.btn-compilar-top {
  background: var(--amarillo);
}

.btn-compilar-top:hover {
  background: var(--amarillo-fuerte);
}

.btn-bloquear-top {
  background: #fee2e2;
}

.btn-bloquear-top:hover {
  background: #fca5a5;
}

/* Botones de solo icono en topnav */
.btn-icono-solo {
  padding: 4px 7px;
  font-size: 0.85rem;
  min-width: 32px;
  justify-content: center;
}

.icono-fullscreen-toggle {
  font-size: 0.95rem;
  line-height: 1;
  display: inline-block;
}

.btn-colapsar-topnav {
  background: #f8fafc;
  color: #334155;
  border: 2px solid var(--tinta);
}

.btn-colapsar-topnav:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Menú flotante descargas */
.dropdown-exportar {
  position: relative;
}

.menu-descargas-flotante {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #ffffff;
  border: 2.5px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  min-width: 250px;
  z-index: 1000;
  overflow: hidden;
}

.menu-descargas-flotante.abierto {
  display: block;
}

.item-descarga {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--tinta);
  border-bottom: 1.5px solid #e2e8f0;
  transition: background 0.12s ease;
}

.item-descarga:last-child {
  border-bottom: none;
}

.item-descarga:hover {
  background: var(--amarillo);
}

.item-icono {
  font-size: 1.3rem;
}

.item-textos strong {
  display: block;
  font-size: 0.85rem;
}

.item-textos small {
  display: block;
  font-size: 0.72rem;
  color: var(--tinta-2);
}

/* ==========================================================================
   3. CONTENEDOR DIVIDIDO A PANTALLA COMPLETA
   ========================================================================== */

.contenedor-dividido {
  display: flex;
  gap: 0;
  width: 100%;
  flex: 1;
  min-height: 0; /* Crucial para flexbox full-height */
  position: relative;
}

.columna-asistente {
  width: var(--chat-ancho, 45%);
  min-width: 0;
  max-width: calc(100% - 180px);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: width 0.1s ease;
  overflow: hidden;
  container-type: inline-size;
  container-name: col-asistente;
}

.contenedor-dividido.arrastrando .columna-asistente {
  transition: none;
}

/* SEPARADOR REDIMENSIONABLE (SPLITTER NEO-BRUTALISTA) */
.workspace-resizer {
  width: 16px;
  margin: 0 -2px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  z-index: 40;
  user-select: none;
  touch-action: none;
}

.workspace-resizer .resizer-handle {
  width: 4px;
  height: 48px;
  border-radius: 9999px;
  background: var(--tinta);
  border: 1px solid #000;
  box-shadow: 1px 1px 0 #000;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.workspace-resizer:hover .resizer-handle,
.workspace-resizer.arrastrando .resizer-handle {
  background: var(--amarillo-fuerte);
  width: 7px;
  height: 76px;
  box-shadow: 2px 2px 0 #000;
  transform: scale(1.05);
}

.workspace-resizer.resizer-snapped .resizer-handle {
  background: #ef4444 !important;
  width: 8px;
  height: 80px;
}

.columna-latex {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  container-type: inline-size;
  container-name: col-latex;
}

body.arrastrando-splitter iframe {
  pointer-events: none !important;
  user-select: none !important;
}

/* Modos: Chat pantalla completa, Doc pantalla completa y Dividido */
.contenedor-dividido.modo-chat .columna-asistente {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
.contenedor-dividido.modo-chat .columna-latex {
  display: none !important;
}

.contenedor-dividido.modo-doc .columna-asistente {
  display: none !important;
}
.contenedor-dividido.modo-doc .columna-latex {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

.contenedor-dividido.modo-chat .workspace-resizer,
.contenedor-dividido.modo-doc .workspace-resizer {
  display: none !important;
}

.panel-card {
  background: var(--surface);
  border: 3px solid var(--tinta);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  height: 100%;
}

/* Encabezados de Paneles */
.panel-cabecera {
  background: #f8fafc;
  border-bottom: 2.5px solid var(--tinta);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
}

.panel-cabecera-tit {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.panel-cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tit-panel {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 800;
}

.circulos-terminal {
  display: flex;
  gap: 5px;
}

.circulos-terminal span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--tinta);
}

.c-rojo { background: #ef4444; }
.c-amarillo { background: #eab308; }
.c-verde { background: #22c55e; }

.badge-google {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border: 1.5px solid var(--tinta);
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e2e8f0;
  max-width: 125px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.badge-google span:not(.punto-status) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-google.conectado {
  background: var(--verde);
}

.badge-google.desconectado {
  background: var(--amarillo);
}

.badge-google .punto-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748b;
}

.badge-google.conectado .punto-status {
  background: var(--verde-fuerte);
}

.badge-google.desconectado .punto-status {
  background: #ca8a04;
}

.btn-logout-email-badge {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: #64748b;
  transition: all 0.15s ease;
  line-height: 1;
}

.btn-logout-email-badge:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #dc2626;
  transform: scale(1.15);
}

/* Micro Pills de Cuota Restante (5h y Semanal) */
.cuota-pills-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 2px;
}

.cuota-pill {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border: 1.5px solid var(--tinta);
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #ecfdf5;
  color: #065f46;
  cursor: default;
  transition: all 0.15s ease;
  user-select: none;
}

.cuota-pill.cuota-warning {
  background: #fef3c7;
  color: #92400e;
  border-color: #b45309;
}

.cuota-pill.cuota-danger {
  background: #fee2e2;
  color: #991b1b;
  border-color: #dc2626;
  animation: pulsoCuota 1.5s infinite;
}

@keyframes pulsoCuota {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.cuota-icono {
  font-size: 0.72rem;
}

.cuota-etiqueta {
  color: #64748b;
  font-size: 0.64rem;
}

.cuota-valor {
  font-weight: 800;
}

/* Selector de Modelo y Nivel de Pensamiento */
.control-modelo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.select-modelo-ia {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  background: #ffffff;
  color: var(--tinta);
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  padding: 3px 6px;
  cursor: pointer;
  outline: none;
  box-shadow: var(--sombra-sm);
  transition: all 0.12s ease;
}

.select-modelo-ia:hover {
  background: #f8fafc;
  transform: translate(-1px, -1px);
  box-shadow: var(--sombra);
}

.toggle-effort-group {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  background: #f1f5f9;
  padding: 2px;
  gap: 2px;
  box-shadow: var(--sombra-sm);
}

.btn-effort {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  border: none;
  background: transparent;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 3px;
  color: #475569;
  transition: all 0.12s ease;
}

.btn-effort:hover {
  background: #e2e8f0;
  color: var(--tinta);
}

.btn-effort.activo {
  background: var(--tinta);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.info-tooltip-effort {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748b;
  padding: 0 4px;
  cursor: help;
  user-select: none;
}

.btn-icon-solo {
  padding: 4px 7px;
  font-size: 0.85rem;
}

.panel-cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-nuevo-chat-destacado {
  background: var(--amarillo);
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--tinta);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.btn-nuevo-chat-destacado:hover {
  background: var(--amarillo-fuerte);
  transform: translate(-1px, -1px);
  box-shadow: var(--sombra);
}

.btn-nuevo-chat-destacado:active {
  transform: translate(1px, 1px);
  box-shadow: var(--sombra-activa);
}

.btn-mini-panel {
  background: #ffffff;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-mini-panel:hover {
  background: var(--amarillo);
}

.btn-nuevo-chat {
  background: var(--amarillo);
  font-weight: 800;
}

.btn-nuevo-chat:hover {
  background: var(--amarillo-fuerte);
}

.btn-logout-google:hover {
  background: #fee2e2;
}

/* ==========================================================================
   4. PANEL ASISTENTE (CONSOLA DIRECTA)
   ========================================================================== */

/* Tarjeta de Login Google */
.card-login-google {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #f8fafc;
}

.login-google-caja {
  max-width: 440px;
  width: 100%;
  background: #ffffff;
  border: 3px solid var(--tinta);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  padding: 32px 24px;
  text-align: center;
}

.icono-google-animado {
  width: 64px;
  height: 64px;
  background: #ffffff;
  border: 2.5px solid var(--tinta);
  border-radius: 50%;
  box-shadow: var(--sombra-sm);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-google-tit {
  font-size: 1.35rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.login-google-desc {
  font-size: 0.88rem;
  color: var(--tinta-2);
  margin-bottom: 22px;
  line-height: 1.45;
}

.paso-login-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-iniciar-google-grande {
  width: 100%;
  background: var(--amarillo);
  border: 3px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--tinta);
  cursor: pointer;
  transition: all 0.1s ease;
}

.btn-iniciar-google-grande:hover {
  background: var(--amarillo-fuerte);
  transform: translate(-2px, -2px);
  box-shadow: var(--sombra-lg);
}

.btn-iniciar-google-grande:active {
  transform: translate(2px, 2px);
  box-shadow: var(--sombra-activa);
}

.nota-gmail-aviso {
  font-size: 0.78rem;
  color: var(--tinta-2);
}

.caja-aviso-pestana {
  background: var(--verde);
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  padding: 10px 12px;
  font-size: 0.82rem;
  text-align: left;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.link-reabrir {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--tinta);
  text-decoration: underline;
}

.fila-pegar-codigo {
  display: flex;
  gap: 8px;
}

.input-codigo-google {
  flex: 1;
  border: 2.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  background: #f8fafc;
  outline: none;
}

.input-codigo-google:focus {
  background: #ffffff;
  box-shadow: var(--sombra-sm);
}

.btn-enviar-codigo {
  background: var(--verde);
  border: 2.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.btn-enviar-codigo:hover {
  background: var(--verde-fuerte);
  color: #fff;
}

.error-google-box {
  background: var(--rojo);
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  padding: 8px 10px;
  font-size: 0.8rem;
  color: var(--tinta);
  font-weight: 600;
  text-align: left;
}

.btn-reintentar-link {
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tinta-2);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

/* Consola Activa */
.contenedor-consola-activa {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.iframe-consola {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: #0f172a;
}

/* Overlay Flotante de Modelo de IA (Sobre el status de Antigravity CLI abajo a la derecha) */
.terminal-model-overlay {
  position: absolute;
  bottom: 8px;
  right: 12px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.btn-terminal-model {
  background: #1e293b;
  color: #f8fafc;
  border: 1.5px solid #475569;
  border-radius: 20px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  transition: all 0.15s ease;
  backdrop-filter: blur(4px);
}

.btn-terminal-model:hover {
  background: #334155;
  border-color: #94a3b8;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}

.btn-terminal-model .chip-icono {
  color: #fbbf24;
  font-size: 0.8rem;
}

.btn-terminal-model .chip-flecha {
  font-size: 0.7rem;
  opacity: 0.8;
  margin-left: 2px;
}

.popup-modelo-flotante {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: #ffffff;
  border: 3px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 100;
  animation: popupSubir 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popupSubir {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.popup-modelo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--tinta);
  padding-bottom: 8px;
}

.popup-modelo-cabecera strong {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--tinta);
}

.btn-cerrar-popup {
  background: transparent;
  border: none;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.btn-cerrar-popup:hover {
  background: #fee2e2;
  color: #dc2626;
}

.popup-modelo-seccion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.popup-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tenue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.opciones-modelo-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.opt-modelo {
  background: #f8fafc;
  border: 2px solid #cbd5e1;
  border-radius: var(--radio-sm);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opt-modelo:hover {
  border-color: var(--tinta);
  background: #ffffff;
}

.opt-modelo.activo {
  border-color: var(--tinta);
  background: #fffdf0;
  box-shadow: var(--sombra-sm);
}

.opt-modelo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.opt-modelo-header strong {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--tinta);
}

.tag-recomendado {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  background: var(--verde);
  color: #065f46;
  border: 1px solid var(--tinta);
  border-radius: 4px;
  padding: 1px 5px;
}

.opt-modelo small {
  font-size: 0.72rem;
  color: var(--tenue);
  line-height: 1.3;
}

.toggle-effort-popup {
  display: flex;
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}

.btn-effort-pop {
  flex: 1;
  background: #f1f5f9;
  border: none;
  border-right: 1.5px solid var(--tinta);
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.1s ease;
}

.btn-effort-pop:last-child {
  border-right: none;
}

.btn-effort-pop:hover {
  background: #e2e8f0;
}

.btn-effort-pop.activo {
  background: var(--tinta);
  color: #ffffff;
  font-weight: 800;
}

.popup-effort-desc {
  font-size: 0.73rem;
  color: var(--tinta-2);
  line-height: 1.35;
  background: #f8fafc;
  padding: 6px 8px;
  border-radius: 4px;
  border-left: 3px solid var(--amarillo-fuerte);
}

/* ==========================================================================
   5. PANEL LATEX (PDF, EDITOR, ARCHIVOS, INSTRUCCIONES, CHATS)
   ========================================================================== */

.cabecera-latex {
  padding: 6px 10px;
  overflow: hidden;
}

.subtabs-latex {
  display: flex;
  gap: 4px;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
}

.subtabs-latex::-webkit-scrollbar {
  display: none;
}

.subtab-btn {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--radio-sm);
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--tinta-2);
  transition: all 0.1s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subtab-btn:hover {
  background: #e2e8f0;
  color: var(--tinta);
}

.subtab-btn.activo {
  background: #ffffff;
  border-color: var(--tinta);
  box-shadow: var(--sombra-sm);
  color: var(--tinta);
  font-weight: 800;
}

.subtab-label-largo {
  display: inline;
}

.subtab-label-corto {
  display: none;
}

/* Modo compacto cuando la columna o la pantalla se aplasta */
.columna-latex.ancho-compacto .subtab-label-largo {
  display: none !important;
}
.columna-latex.ancho-compacto .subtab-label-corto {
  display: inline !important;
}
.columna-latex.ancho-compacto .subtab-btn {
  padding: 5px 6px;
  font-size: 0.73rem;
}

@container col-latex (max-width: 480px) {
  .subtab-label-largo {
    display: none !important;
  }
  .subtab-label-corto {
    display: inline !important;
  }
  .subtab-btn {
    padding: 5px 6px;
    font-size: 0.73rem;
  }
}

.columna-latex.ancho-mini .subtab-label-corto {
  display: none !important;
}
.columna-latex.ancho-mini .subtab-btn {
  padding: 5px 3px;
}

@container col-latex (max-width: 250px) {
  .subtab-label-corto {
    display: none !important;
  }
  .subtab-btn {
    padding: 5px 3px;
  }
}

.btn-compilar-latex {
  background: var(--amarillo);
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.btn-compilar-latex:hover {
  background: var(--amarillo-fuerte);
  transform: translate(-1px, -1px);
  box-shadow: var(--sombra);
}

/* WRAPPER DE VISTAS LATEX */
.latex-vistas-wrapper {
  display: flex;
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.latex-vistas-wrapper.modo-ambos {
  flex-direction: row;
  gap: 0;
  background: var(--superficie, #ffffff);
}

.latex-vistas-wrapper.modo-ambos .subtab-pdf {
  display: flex !important;
  width: var(--pdf-ancho, 50%);
  min-width: 180px;
  max-width: calc(100% - 180px);
  flex: 0 0 auto !important;
  height: 100%;
}

.latex-vistas-wrapper.modo-ambos .subtab-editor {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 180px;
  height: 100%;
  border-left: 2px solid var(--tinta);
}

/* SEPARADOR REDIMENSIONABLE ENTRE PDF Y EDITOR (MODO AMBOS) */
.latex-vistas-splitter {
  display: none;
  width: 14px;
  margin: 0 -7px;
  cursor: col-resize;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
  z-index: 30;
  user-select: none;
  touch-action: none;
  background: transparent;
}

.latex-vistas-splitter .resizer-handle {
  width: 4px;
  height: 48px;
  border-radius: 9999px;
  background: var(--tinta);
  border: 1px solid #000;
  box-shadow: 1px 1px 0 #000;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.latex-vistas-splitter:hover .resizer-handle,
.latex-vistas-splitter.arrastrando .resizer-handle {
  background: var(--amarillo-fuerte);
  width: 7px;
  height: 76px;
  box-shadow: 2px 2px 0 #000;
  transform: scale(1.05);
}

.latex-vistas-splitter.resizer-snapped .resizer-handle {
  background: #ef4444 !important;
  border-color: #991b1b !important;
  width: 8px !important;
  height: 80px !important;
  box-shadow: 2px 2px 0 #991b1b !important;
}

.latex-vistas-wrapper.modo-ambos .latex-vistas-splitter {
  display: flex;
}

/* SUBTAB 1: PDF */
.subtab-pdf {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
  container-name: subtab-pdf;
}

.pdf-toolbar {
  background: #ffffff;
  border-bottom: 2px solid var(--tinta);
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
}

.pdf-info-archivo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
}

.punto-verde-compilado {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde-fuerte);
  flex-shrink: 0;
}

.nombre-pdf {
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

.pdf-hora {
  color: var(--tenue);
  font-size: 0.70rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.pdf-toolbar-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-recargar-pdf {
  background: #ffffff;
  border: 1.5px solid var(--tinta);
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-recargar-pdf:hover {
  background: var(--amarillo);
}

.btn-abrir-pdf-tab {
  background: #f1f5f9;
  border: 1.5px solid var(--tinta);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--tinta);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-abrir-pdf-tab:hover {
  background: var(--amarillo);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--tinta);
}

.subtab-pdf.pdf-compacto .pdf-hora {
  display: none !important;
}
.subtab-pdf.pdf-compacto .btn-abrir-pdf-tab .btn-txt-abrir-pdf {
  display: none !important;
}
.subtab-pdf.pdf-compacto .btn-abrir-pdf-tab {
  padding: 3px 6px;
}

@container subtab-pdf (max-width: 420px) {
  .pdf-hora {
    display: none !important;
  }
  .btn-abrir-pdf-tab .btn-txt-abrir-pdf {
    display: none !important;
  }
  .btn-abrir-pdf-tab {
    padding: 3px 6px;
  }
  .pdf-toolbar {
    padding: 4px 6px;
    gap: 4px;
  }
}

.pdf-frame-wrapper {
  flex: 1;
  width: 100%;
  height: 100%;
  background: #475569;
}

.iframe-pdf {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* SUBTAB 2: EDITOR LATEX Y VISUALIZADOR DE CAMBIOS EN VIVO */
.subtab-editor {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  container-type: inline-size;
  container-name: subtab-editor;
}

.editor-toolbar {
  background: #f8fafc;
  border-bottom: 2px solid var(--tinta);
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
}

.editor-selector-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.label-archivo {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
}

.select-archivo-latex {
  width: 100%;
  min-width: 0;
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  background: #ffffff;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.toggle-submodo-editor {
  display: flex;
  align-items: center;
  background: #e2e8f0;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  padding: 2px;
  gap: 2px;
}

.btn-submodo-editor {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--tinta-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.1s ease;
}

.btn-submodo-editor.activo {
  background: #ffffff;
  color: var(--tinta);
  font-weight: 800;
  box-shadow: var(--sombra-sm);
}

.editor-acciones {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.editor-estado-guardado {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--tenue);
}

.btn-volver-atras {
  background: #f3e8ff;
  color: #6b21a8;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.1s ease;
}

.btn-volver-atras:hover:not(:disabled) {
  background: #e9d5ff;
  color: #581c87;
  transform: translate(-1px, -1px);
  box-shadow: var(--sombra);
}

.btn-volver-atras:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: var(--sombra-activa);
}

.btn-volver-atras:disabled,
.btn-volver-atras.deshabilitado {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-rehacer-atras {
  background: #eff6ff;
  color: #1e3a8a;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.1s ease;
}

.btn-rehacer-atras:hover:not(:disabled) {
  background: #dbeafe;
  color: #172554;
  transform: translate(-1px, -1px);
  box-shadow: var(--sombra);
}

.btn-rehacer-atras:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: var(--sombra-activa);
}

.btn-rehacer-atras:disabled,
.btn-rehacer-atras.deshabilitado {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-guardar-latex {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  background: var(--amarillo);
  color: var(--tinta);
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.1s ease;
}

.btn-guardar-latex:hover {
  background: var(--amarillo-fuerte);
  transform: translate(-1px, -1px);
  box-shadow: var(--sombra);
}

.btn-guardar-latex:active {
  transform: translate(1px, 1px);
  box-shadow: var(--sombra-activa);
}

/* Modo compacto para la barra del editor */
.subtab-editor.editor-compacto .btn-volver-atras .btn-accion-texto,
.subtab-editor.editor-compacto .btn-guardar-latex .btn-accion-texto {
  display: none !important;
}
.subtab-editor.editor-compacto .btn-volver-atras,
.subtab-editor.editor-compacto .btn-guardar-latex {
  padding: 4px 8px !important;
  gap: 0 !important;
}

@container subtab-editor (max-width: 420px) {
  .btn-volver-atras .btn-accion-texto,
  .btn-guardar-latex .btn-accion-texto {
    display: none !important;
  }
  .btn-volver-atras,
  .btn-guardar-latex {
    padding: 4px 7px !important;
    gap: 0 !important;
  }
  .editor-toolbar {
    padding: 4px 6px;
    gap: 4px;
  }
  .select-archivo-latex {
    font-size: 0.72rem;
    padding: 3px 5px;
  }
}

.btn-guardar-compilar-latex {
  background: var(--amarillo);
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.btn-guardar-compilar-latex:hover {
  background: var(--amarillo-fuerte);
}

/* Banner de cambios en directo */
.editor-banner-cambios {
  background: #ecfdf5;
  border-bottom: 2px solid #10b981;
  color: #065f46;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: bannerEntrada 0.2s ease;
}

@keyframes bannerEntrada {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn-banner-ver-diff {
  margin-left: auto;
  background: #ffffff;
  border: 1.5px solid #10b981;
  border-radius: 4px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: #065f46;
  cursor: pointer;
}

.btn-banner-ver-diff:hover {
  background: #10b981;
  color: #ffffff;
}

/* Encabezado del Editor Unificado */
.editor-header-info {
  background: #f8fafc;
  border-bottom: 2px solid var(--tinta);
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  flex-shrink: 0;
  user-select: none;
  min-width: 0;
  overflow: hidden;
  height: 34px;
  box-sizing: border-box;
}

.editor-info-izq {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.editor-icono-archivo {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.editor-tag-archivo {
  font-weight: 800;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

.badge-editor-sync,
.badge-diff-sync {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-editor-sync.modificado,
.badge-diff-sync.modificado {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.badge-editor-sync.escribiendo,
.badge-diff-sync.escribiendo {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
  animation: pulse-sync 1.5s infinite;
}

@keyframes pulse-sync {
  0% { opacity: 1; }
  50% { opacity: 0.65; }
  100% { opacity: 1; }
}

.editor-info-der {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
}

.editor-resumen-badges,
.diff-resumen-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.badge-diff-add {
  color: oklch(58% 0.17 150);
  background: oklch(72% 0.17 150 / 0.15);
  border: 1px solid oklch(72% 0.17 150 / 0.3);
  border-radius: 4px;
  padding: 1px 5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.badge-diff-del {
  color: #dc2626;
  background: oklch(63% 0.21 25 / 0.12);
  border: 1px solid oklch(63% 0.21 25 / 0.25);
  border-radius: 4px;
  padding: 1px 5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.editor-contador-lineas {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 700;
  color: #64748b;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap !important;
  flex-shrink: 0;
}

/* Modo compacto para el encabezado del editor */
.subtab-editor.editor-compacto .badge-editor-sync .badge-sync-txt,
.subtab-editor.editor-compacto .badge-diff-sync .badge-sync-txt {
  display: none !important;
}
.subtab-editor.editor-compacto .badge-editor-sync,
.subtab-editor.editor-compacto .badge-diff-sync {
  padding: 2px 4px !important;
  border-radius: 9999px;
}

@container subtab-editor (max-width: 360px) {
  .editor-header-info {
    padding: 4px 6px;
    gap: 4px;
  }
  .badge-editor-sync .badge-sync-txt,
  .badge-diff-sync .badge-sync-txt {
    display: none !important;
  }
  .badge-editor-sync,
  .badge-diff-sync {
    padding: 2px 4px !important;
    border-radius: 9999px;
  }
}

.subtab-editor.editor-mini .editor-tag-archivo {
  max-width: 60px;
}
.subtab-editor.editor-mini .editor-contador-lineas {
  padding: 1px 4px;
  font-size: 0.65rem;
}

@container subtab-editor (max-width: 240px) {
  .editor-tag-archivo {
    max-width: 60px;
  }
  .editor-contador-lineas {
    padding: 1px 4px;
    font-size: 0.65rem;
  }
}

/* CONTENEDOR DEL ÁREA DE CÓDIGO (GUTTER Y TEXTAREA SINCRONIZADOS) */
.editor-codigo-contenedor {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  height: 100%;
  position: relative;
  background: #ffffff;
  overflow: hidden;
  transition: background-color 0.35s ease;
}

.editor-codigo-contenedor.flash-success {
  background-color: oklch(72% 0.17 150 / 0.2) !important;
}

.editor-lineas-gutter {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  background: #f8fafc;
  border-right: 2px solid var(--tinta);
  padding: 12px 6px 12px 0;
  overflow: hidden;
  user-select: none;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 22px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.editor-lineas-gutter .gutter-num {
  height: 22px;
  line-height: 22px;
  padding-right: 6px;
  box-sizing: border-box;
  transition: color 0.12s ease, background 0.12s ease;
}

.editor-lineas-gutter .gutter-num.linea-modificada {
  background: oklch(72% 0.17 150 / 0.22);
  color: oklch(45% 0.17 150);
  font-weight: 800;
  border-left: 3px solid #10b981;
}

.editor-lineas-gutter .gutter-num.linea-target-synctex {
  background: #38bdf8 !important;
  color: #020617 !important;
  font-weight: 900 !important;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.95);
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1.08);
  z-index: 10;
}

/* ÁREA DE CÓDIGO CON RESALTADO DE SINTAXIS Y TEXTAREA EDITABLE */
.editor-canvas-wrap {
  position: relative;
  flex: 1;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
}

.editor-syntax-highlight {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  outline: none;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
  z-index: 1;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  line-height: 22px !important;
  font-variant-ligatures: none !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  padding: 12px 14px !important;
  tab-size: 2 !important;
  -moz-tab-size: 2 !important;
  white-space: pre !important;
  word-break: normal !important;
  word-wrap: normal !important;
}

.editor-syntax-highlight code {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  white-space: pre !important;
  display: block;
  min-width: 100%;
  color: #0f172a;
}

.editor-codigo-textarea {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  overflow: auto;
  resize: none;
  z-index: 2;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  line-height: 22px !important;
  font-variant-ligatures: none !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  padding: 12px 14px !important;
  tab-size: 2 !important;
  -moz-tab-size: 2 !important;
  white-space: pre !important;
  word-break: normal !important;
  word-wrap: normal !important;
  background: transparent !important;
  color: transparent !important;
  caret-color: #0f172a !important;
}

.editor-codigo-textarea::placeholder {
  color: #94a3b8 !important;
}

.editor-codigo-textarea::selection {
  background: rgba(250, 204, 21, 0.42) !important;
  color: transparent !important;
}

.editor-canvas-wrap.synctex-highlight-pulse {
  animation: pulsoSyncTex 1.8s ease-out;
}

@keyframes pulsoSyncTex {
  0% { background-color: #fef08a; }
  50% { background-color: #fef9c3; }
  100% { background-color: #ffffff; }
}

/* ==============================================================================
   VISTA DE DIFERENCIAS EN VIVO (LO DE ANTES EN ROJO, LO NUEVO EN VERDE)
   ============================================================================== */

.editor-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #e2e8f0;
  padding: 2px;
  border-radius: 6px;
  border: 1.5px solid var(--tinta);
  margin-right: 6px;
}

.btn-submodo-editor {
  border: none;
  background: transparent;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 700;
  color: #475569;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s ease;
  user-select: none;
}

.btn-submodo-editor:hover {
  color: #000000;
}

.btn-submodo-editor.activo {
  background: #ffffff;
  color: #000000;
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.editor-diff-view {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #ffffff;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 22px;
  box-sizing: border-box;
  padding: 12px 0;
  user-select: text;
  flex: 1;
}

.diff-row {
  display: flex;
  min-width: 100%;
  width: max-content;
  height: 22px;
  line-height: 22px;
  box-sizing: border-box;
  transition: background 0.08s ease;
}

.diff-row:hover {
  filter: brightness(0.96);
}

.diff-gutter-num {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  background: #f8fafc;
  border-right: 2px solid var(--tinta);
  padding: 0 6px 0 2px;
  text-align: right;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 12px;
}

.diff-gutter-sign {
  font-weight: 900;
  width: 14px;
  text-align: center;
}

.diff-gutter-val {
  flex: 1;
  text-align: right;
}

.diff-code-line {
  padding: 0 14px;
  white-space: pre;
  color: #0f172a;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 22px;
}

.diff-marker-prefix {
  font-weight: 900;
  display: inline-block;
  width: 16px;
  user-select: none;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.diff-code-content {
  flex: 1;
  white-space: pre;
}

/* LÍNEAS ELIMINADAS (LO DE ANTES EN ROJITO) */
.diff-row.del {
  background: #fef2f2 !important;
  border-left: 3px solid #ef4444;
}

.diff-row.del .diff-gutter-num {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  font-weight: 900;
  border-right: 2px solid #ef4444;
}

.diff-row.del .diff-gutter-sign {
  color: #dc2626 !important;
}

.diff-row.del .diff-marker-prefix {
  color: #dc2626 !important;
}

.diff-row.del .diff-code-line {
  color: #991b1b !important;
  background: rgba(254, 226, 226, 0.45);
}

.diff-row.del .diff-code-content {
  color: #991b1b !important;
}

/* LÍNEAS AÑADIDAS / MODIFICADAS (LO NUEVO EN VERDITO) */
.diff-row.add {
  background: #f0fdf4 !important;
  border-left: 3px solid #16a34a;
}

.diff-row.add .diff-gutter-num {
  background: #dcfce7 !important;
  color: #15803d !important;
  font-weight: 900;
  border-right: 2px solid #16a34a;
}

.diff-row.add .diff-gutter-sign {
  color: #16a34a !important;
}

.diff-row.add .diff-marker-prefix {
  color: #16a34a !important;
}

.diff-row.add .diff-code-line {
  color: #14532d !important;
  background: rgba(220, 252, 231, 0.45);
}

.diff-row.add .diff-code-content {
  color: #14532d !important;
}

/* LÍNEAS SIN CAMBIOS (NORMALES) */
.diff-row.eq .diff-gutter-num {
  background: #f8fafc;
  color: #94a3b8;
}

.diff-row.eq .diff-marker-prefix {
  color: transparent;
}

/* Barra de Decisión AI-Diff (Aceptar / Descartar iteración) */
.diff-decision-bar {
  background: #f8fafc;
  border-top: 2px solid var(--tinta);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  animation: barSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.decision-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e293b;
}

.decision-botones {
  display: flex;
  align-items: center;
  gap: 8px;
}

@keyframes barSlideUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn-diff-decision {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s ease;
}

.btn-diff-reject {
  background: #ffffff;
  border: 1.5px solid var(--tinta);
  color: #dc2626;
  box-shadow: 1.5px 1.5px 0 var(--tinta);
}

.btn-diff-reject:hover {
  background: #fee2e2;
  transform: translate(-1px, -1px);
  box-shadow: 2.5px 2.5px 0 var(--tinta);
}

.btn-diff-accept {
  background: var(--tinta);
  border: 1.5px solid var(--tinta);
  color: #ffffff;
  box-shadow: 1.5px 1.5px 0 var(--tinta);
}

.btn-diff-accept:hover {
  background: #1e293b;
  transform: translate(-1px, -1px);
  box-shadow: 2.5px 2.5px 0 var(--tinta);
}

/* Resaltado de Sintaxis LaTeX */
.tex-comando {
  color: #1d4ed8 !important;
  font-weight: 700;
}

.tex-parametro {
  color: #047857 !important;
  font-weight: 600;
}

.tex-opcional {
  color: #6d28d9 !important;
  font-weight: 600;
}

.tex-math {
  color: #b45309 !important;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.08);
  padding: 0 2px;
  border-radius: 3px;
}

.tex-comentario {
  color: #64748b !important;
  font-style: italic;
  font-weight: 500;
}

.tex-llaves, .tex-corchetes {
  color: #94a3b8 !important;
  font-weight: 700;
}

/* Líneas sin Cambios */
.diff-fila-eq:hover {
  background: #f8fafc;
}

.diff-placeholder {
  text-align: center;
  padding: 40px;
  color: var(--tenue);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.editor-area-wrap {
  flex: 1;
  display: flex;
  height: 100%;
  overflow: hidden;
}

.editor-textarea {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: #ffffff;
  color: #0f172a;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.6;
  padding: 16px;
  resize: none;
  tab-size: 2;
}

/* SUBTAB 3: CARPETA DE ARCHIVOS / MATERIALES */
.subtab-materiales {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: 16px;
  gap: 14px;
  overflow-y: auto;
  background: #f8fafc;
}

/* ==========================================================================
   EXPLORADOR COMPLETO DE ARCHIVOS DEL TFG
   ========================================================================== */

.explorador-header-principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #ffffff;
  border: 2.5px solid var(--tinta);
  border-radius: var(--radio);
  padding: 12px 16px;
  box-shadow: var(--sombra-sm);
  flex-shrink: 0;
}

.explorador-tit-grupo {
  flex: 1;
  min-width: 0;
}

.explorador-tit {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 2px;
}

.explorador-sub {
  font-size: 0.8rem;
  color: var(--tinta-2);
  line-height: 1.35;
}

.explorador-acciones-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-explorador-accion {
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.btn-explorador-accion:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--sombra);
}

.btn-explorador-accion:active {
  transform: translate(1px, 1px);
  box-shadow: var(--sombra-activa);
}

.btn-nueva-carpeta {
  background: var(--amarillo);
  color: var(--tinta);
}

.btn-nueva-carpeta:hover {
  background: var(--amarillo-fuerte);
}

.btn-subir-archivo {
  background: var(--verde);
  color: var(--tinta);
}

.btn-subir-archivo:hover {
  background: var(--verde-fuerte);
  color: #fff;
}

.btn-toggle-aux {
  background: #f1f5f9;
  color: var(--tinta-2);
}

.btn-toggle-aux.activo {
  background: var(--morado);
  color: var(--tinta);
  border-color: var(--tinta);
}

/* Barra de Navegación (Breadcrumbs) y Búsqueda */
.explorador-nav-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  padding: 6px 12px;
  box-shadow: var(--sombra-sm);
  flex-shrink: 0;
}

.explorador-breadcrumbs-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.btn-subir-nivel {
  background: #f8fafc;
  border: 1.5px solid var(--tinta);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.1s ease;
  flex-shrink: 0;
}

.btn-subir-nivel:hover:not(:disabled) {
  background: var(--amarillo);
}

.btn-subir-nivel:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: #cbd5e1;
}

.explorador-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tinta);
  white-space: nowrap;
}

.crumb-item {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.1s;
}

.crumb-item:hover {
  background: #e2e8f0;
}

.crumb-item.activo {
  font-weight: 800;
  color: #0369a1;
}

.crumb-sep {
  color: var(--tenue);
  user-select: none;
}

.explorador-busqueda-wrap {
  width: 220px;
  flex-shrink: 0;
}

.input-buscar-explorador {
  width: 100%;
  border: 1.5px solid var(--tinta);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  outline: none;
  background: #f8fafc;
  transition: all 0.15s ease;
}

.input-buscar-explorador:focus {
  background: #ffffff;
  box-shadow: 0 0 0 2px var(--amarillo);
}

/* Zona Drop Explorador */
.zona-drop-explorador {
  background: #ffffff;
  border: 2px dashed #94a3b8;
  border-radius: var(--radio-sm);
  padding: 12px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.zona-drop-explorador:hover,
.zona-drop-explorador.dragover {
  background: var(--amarillo);
  border-color: var(--tinta);
  border-style: solid;
}

.zona-drop-explorador .icono-drop {
  font-size: 1.3rem;
}

.zona-drop-explorador strong {
  font-size: 0.82rem;
  font-weight: 800;
}

.zona-drop-explorador small {
  font-size: 0.74rem;
  color: var(--tenue);
}

/* Vista de Carpetas y Archivos */
.explorador-vista-contenedor {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.explorador-grid-archivos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Carpetas Sección */
.seccion-label-explorador {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--tenue);
  letter-spacing: 0.5px;
  margin: 6px 0 2px;
}

.carpetas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.carpeta-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.carpeta-card:hover {
  background: #f0f9ff;
  border-color: #38bdf8;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -2px rgba(14, 165, 233, 0.12);
}

.carpeta-info-izq {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.carpeta-icono {
  display: flex;
  align-items: center;
}

.carpeta-nombre-textos {
  min-width: 0;
}

.carpeta-nombre {
  font-weight: 700;
  font-size: 0.85rem;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.carpeta-items-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--tenue);
}

.carpeta-card-acciones {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-item-accion {
  background: transparent;
  border: none;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  opacity: 0.65;
  transition: all 0.1s ease;
}

.btn-item-accion:hover {
  opacity: 1;
  background: #e2e8f0;
}

.btn-item-accion.btn-peligro:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* Archivos Lista / Fila */
.archivos-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.archivo-fila-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.15s ease;
}

.archivo-fila-card:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.06);
}

.archivo-fila-card.es-auxiliar {
  background: #f8fafc;
  opacity: 0.75;
  border-color: #e2e8f0;
}

.archivo-fila-card.es-auxiliar:hover {
  opacity: 1;
}

.archivo-izq {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.archivo-icono {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.archivo-textos {
  min-width: 0;
  flex: 1;
}

.archivo-nombre-linea {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.archivo-nombre-span {
  font-weight: 700;
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-tag-aux {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.archivo-submeta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--tenue);
  display: flex;
  gap: 8px;
}

.archivo-acciones-fila {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-copiar-ruta-explorador {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #334155;
  transition: all 0.15s ease;
}

.btn-copiar-ruta-explorador:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #94a3b8;
}

.btn-accion-mini-explorador {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #64748b;
  transition: all 0.15s ease;
}

.btn-accion-mini-explorador:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.btn-accion-mini-explorador.btn-peligro:hover {
  background: #fee2e2;
  color: #dc2626;
}

.explorador-vacio {
  background: #ffffff;
  border: 2px dashed #cbd5e1;
  border-radius: var(--radio);
  padding: 36px 20px;
  text-align: center;
  color: var(--tenue);
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.explorador-vacio-icono {
  font-size: 2.2rem;
}

/* SUBTAB 4: INSTRUCCIONES (AGENTS.MD) */
.subtab-instrucciones {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.instrucciones-toolbar {
  background: #f8fafc;
  border-bottom: 2px solid var(--tinta);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-shrink: 0;
}

.instrucciones-tit {
  font-size: 0.98rem;
  font-weight: 800;
}

.instrucciones-sub {
  font-size: 0.78rem;
  color: var(--tinta-2);
}

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

.estado-guardado-pill {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--tenue);
}

.btn-guardar-instrucciones {
  background: var(--verde);
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-guardar-instrucciones:hover {
  background: var(--verde-fuerte);
  color: #fff;
  transform: translate(-1px, -1px);
}

.instrucciones-editor-wrap {
  flex: 1;
  display: flex;
  height: 100%;
  overflow: hidden;
}

.textarea-instrucciones {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: #ffffff;
  color: #0f172a;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.6;
  padding: 16px;
  resize: none;
}

/* SUBTAB 5: HISTORIAL DE CHATS */
.subtab-chats {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: 16px;
  gap: 14px;
  overflow-y: auto;
  background: #f8fafc;
}

.chats-header-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #ffffff;
  border: 2.5px solid var(--tinta);
  border-radius: var(--radio);
  padding: 14px 16px;
  box-shadow: var(--sombra-sm);
  flex-shrink: 0;
}

.chats-tit {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.chats-sub {
  font-size: 0.82rem;
  color: var(--tinta-2);
  line-height: 1.4;
}

.btn-nuevo-chat-grande {
  background: var(--amarillo);
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-nuevo-chat-grande:hover {
  background: var(--amarillo-fuerte);
  transform: translate(-1px, -1px);
}

.lista-chats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.chat-card {
  background: #ffffff;
  border: 2.5px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.chat-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--sombra);
  background: #fffdf0;
}

.chat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-badge-fecha {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--tenue);
}

.chat-pasos-pill {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  background: var(--morado);
  border: 1px solid var(--tinta);
  border-radius: 4px;
  padding: 1px 6px;
}

.chat-titulo {
  font-size: 0.98rem;
  font-weight: 800;
}

.chat-preview-text {
  font-size: 0.8rem;
  color: var(--tinta-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-cargar-chat {
  align-self: flex-start;
  background: #f1f5f9;
  border: 1.5px solid var(--tinta);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
}

.chat-card:hover .btn-cargar-chat {
  background: var(--amarillo);
}

/* ==========================================================================
   6. MODAL DE HERRAMIENTAS (ARCHIVOS, INSTRUCCIONES, HISTORIAL CHATS)
   ========================================================================== */

.modal-herramientas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeInModal 0.2s ease;
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-herramientas-caja {
  background: var(--surface);
  border: 3.5px solid var(--tinta);
  border-radius: var(--radio-lg);
  box-shadow: 10px 10px 0 var(--tinta);
  max-width: 1180px;
  width: 95vw;
  height: 90vh;
  max-height: 920px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: scaleUpModal 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scaleUpModal {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-herramientas-header {
  background: #f8fafc;
  border-bottom: 2.5px solid var(--tinta);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-pestanas-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-nav-tab {
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--radio-sm);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--tinta-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s ease;
}

.modal-nav-tab:hover {
  background: #e2e8f0;
  color: var(--tinta);
}

.modal-nav-tab.activo {
  background: #ffffff;
  border-color: var(--tinta);
  box-shadow: var(--sombra-sm);
  color: var(--tinta);
  font-weight: 800;
}

.btn-cerrar-modal {
  width: 34px;
  height: 34px;
  background: #ffffff;
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--tinta);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
}

.btn-cerrar-modal:hover {
  background: var(--rojo);
  color: var(--rojo-fuerte);
  transform: translate(-1px, -1px);
}

.modal-herramientas-cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
}

.modal-seccion {
  display: none;
  flex-direction: column;
  flex: 1;
  height: 100%;
  gap: 14px;
}

.modal-seccion.activo {
  display: flex;
}

/* ==========================================================================
   7. TOAST DE NOTIFICACIONES
   ========================================================================== */

.toast-notificacion {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--tinta);
  color: #ffffff;
  border: 2.5px solid var(--amarillo);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  z-index: 1000000;
  display: none;
  animation: toastIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 90vw;
}

.toast-notificacion.visible {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast-notificacion.toast-error {
  border-color: #ef4444;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   7. MEDIA QUERIES & OPTIMIZACIÓN RESPONSIVE MÓVIL / TABLET (CELIA TFG)
   ========================================================================== */

/* Estilos por defecto para elementos responsivos en Desktop */
.btn-modo-movil-solo {
  display: none !important;
}

.btn-modo-split-desktop,
.btn-modo-doc-desktop {
  display: inline-flex !important;
}

/* ==========================================================================
   OPTIMIZACIÓN RESPONSIVA PANTALLAS COMPACTAS (<= 1100px)
   ========================================================================== */
@media (max-width: 1100px) {
  .tag-usuario {
    display: none !important;
  }
  .circulos-terminal {
    display: none !important;
  }
  .badge-google {
    max-width: 80px !important;
  }
  .btn-colapsar-topnav span {
    display: none !important;
  }
  .btn-colapsar-topnav {
    padding: 4px 6px !important;
  }
  .btn-bloquear-top span:last-child {
    display: none !important;
  }
  .btn-bloquear-top {
    padding: 4px 6px !important;
  }
}

/* ==========================================================================
   DISPOSITIVOS MÓVILES Y PANTALLAS PEQUEÑAS (<= 900px)
   ========================================================================== */
@media (max-width: 900px) {
  /* 1. Viewport 100% nativo sin scroll general de página y sin transiciones de retraso */
  html, body {
    height: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
    position: fixed;
    width: 100%;
  }

  .workspace-layout,
  .top-nav,
  .contenedor-dividido,
  .columna-asistente,
  .columna-latex,
  .panel-card,
  .subtab-contenido {
    transition: none !important;
  }

  .workspace-layout {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: 6px 6px !important;
    gap: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  /* 2. Barra Superior (Top Nav) Adaptativa - 1 sola fila limpia y compacta */
  .top-nav {
    max-height: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px 8px !important;
    gap: 6px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 2px 2px 0 #000 !important;
    border-width: 2px !important;
    overflow: hidden !important;
  }

  .top-nav-izq {
    order: 1 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }

  .badge-brand {
    padding: 3px 6px !important;
    font-size: 0.76rem !important;
    gap: 4px !important;
    white-space: nowrap !important;
    border-width: 1.5px !important;
    box-shadow: 1px 1px 0 #000 !important;
  }

  .badge-brand-texto {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
  }

  .tag-usuario {
    display: none !important;
  }

  .top-nav-herramientas {
    display: flex !important;
    gap: 3px !important;
    margin-left: 1px !important;
  }

  .btn-top-herramienta {
    padding: 3px 6px !important;
    font-size: 0.72rem !important;
    gap: 3px !important;
    white-space: nowrap !important;
    border-width: 1.5px !important;
    box-shadow: 1px 1px 0 #000 !important;
  }

  /* Ocultar texto en herramientas para móviles estrechos manteniendo iconos limpios */
  @media (max-width: 640px) {
    .btn-top-herramienta span:last-child {
      display: none !important;
    }
    .btn-top-herramienta {
      padding: 3px 6px !important;
      font-size: 0.85rem !important;
    }
  }

  .top-nav-der {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .btn-accion-top {
    padding: 3px 7px !important;
    font-size: 0.74rem !important;
    gap: 4px !important;
    border-width: 1.5px !important;
    box-shadow: 1px 1px 0 #000 !important;
    height: 30px !important;
    box-sizing: border-box !important;
  }

  .btn-compilar-top {
    padding: 3px 9px !important;
    font-weight: 800 !important;
  }

  /* En móviles, icono o texto corto en compilar */
  @media (max-width: 580px) {
    #textoCompilarTop {
      display: inline !important;
      font-size: 0.72rem !important;
    }
    .btn-descargas-top span:last-child {
      display: none !important;
    }
    .btn-descargas-top {
      padding: 3px 6px !important;
      font-size: 0.85rem !important;
    }
    .btn-bloquear-top span:last-child {
      display: none !important;
    }
    .btn-bloquear-top {
      padding: 3px 6px !important;
      font-size: 0.85rem !important;
    }
  }

  @media (max-width: 440px) {
    .badge-brand-texto {
      display: none !important;
    }
    .badge-brand {
      padding: 3px 6px !important;
      font-size: 0.85rem !important;
    }
    #textoCompilarTop {
      display: none !important;
    }
    .btn-compilar-top {
      padding: 3px 7px !important;
      font-size: 0.9rem !important;
    }
  }

  .btn-colapsar-desktop-solo {
    display: none !important;
  }

  /* 3. Selector de Pestañas Móvil: Asistente | PDF | Editor (Sleek Segmented Control) */
  .selector-modo {
    order: 2 !important; /* Colocado directamente tras la barra superior */
    width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 3px !important;
    background: #e2e8f0 !important;
    border: 2px solid var(--tinta) !important;
    box-shadow: 2px 2px 0 #000 !important;
    display: flex !important;
    border-radius: var(--radio-sm) !important;
    gap: 3px !important;
    box-sizing: border-box !important;
  }

  .btn-modo-split-desktop,
  .btn-modo-doc-desktop {
    display: none !important;
  }

  .btn-modo-movil-solo {
    display: inline-flex !important;
  }

  .selector-modo .btn-modo {
    flex: 1 1 0 !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 6px 4px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    gap: 5px !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
    border: 1.5px solid transparent !important;
    background: transparent !important;
    color: #475569 !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
  }

  .selector-modo .btn-modo.activo {
    background: #ffffff !important;
    color: var(--tinta) !important;
    font-weight: 800 !important;
    border-color: var(--tinta) !important;
    box-shadow: 1px 1px 0 #000 !important;
  }

  /* 4. Contenedor Principal y Pestañas Únicas */
  .contenedor-dividido {
    flex: 1 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .workspace-resizer {
    display: none !important;
  }

  .columna-asistente,
  .columna-latex {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    height: 100% !important;
    transition: none !important;
  }

  /* Control de visibilidad en modo móvil */
  .contenedor-dividido.modo-chat .columna-asistente {
    display: flex !important;
  }
  .contenedor-dividido.modo-chat .columna-latex {
    display: none !important;
  }

  .contenedor-dividido.modo-doc .columna-latex {
    display: flex !important;
  }
  .contenedor-dividido.modo-doc .columna-asistente {
    display: none !important;
  }

  /* Por defecto en móvil, si está en split, muestra asistente a pantalla completa */
  .contenedor-dividido.modo-split .columna-asistente {
    display: flex !important;
  }
  .contenedor-dividido.modo-split .columna-latex {
    display: none !important;
  }

  .panel-card {
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    border-width: 2px !important;
    box-shadow: 2px 2px 0 #000 !important;
    border-radius: var(--radio-sm) !important;
  }

  /* 5. Cabecera y Herramientas del Asistente (Compacta y bien alineada) */
  .panel-cabecera {
    padding: 5px 8px !important;
    gap: 6px !important;
    min-height: 38px !important;
  }

  .panel-cabecera-tit {
    gap: 5px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .circulos-terminal {
    display: none !important;
  }

  .tit-panel {
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }

  /* En móvil, simplificar el badge de Google para no apiñar */
  .badge-google {
    padding: 2px 6px !important;
    font-size: 0.68rem !important;
    max-width: 80px !important;
  }

  .btn-nuevo-chat-destacado {
    padding: 4px 7px !important;
    font-size: 0.74rem !important;
    gap: 4px !important;
  }

  .btn-nuevo-chat-destacado span:last-child {
    display: none !important;
  }

  .toggle-vista-asistente .btn-vista-toggle span:last-child {
    display: none !important;
  }

  .toggle-vista-asistente .btn-vista-toggle {
    padding: 3px 6px !important;
  }

  .btn-mini-panel {
    padding: 3px 6px !important;
  }

  /* Chat mensajes e input */
  .claude-chat-container {
    height: 100% !important;
  }

  .claude-mensajes-lista {
    padding: 10px 8px !important;
    gap: 12px !important;
  }

  .claude-msg {
    max-width: 94% !important;
    gap: 8px !important;
  }

  .claude-input-wrapper {
    padding: 6px 8px 8px !important;
  }

  .claude-input-card {
    padding: 8px 10px 6px !important;
    border-radius: 12px !important;
  }

  .claude-textarea {
    font-size: 0.88rem !important;
    max-height: 120px !important;
  }

  .claude-footer-cuota {
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    padding: 2px 4px !important;
    justify-content: center !important;
  }

  .chat-cuota-bloque {
    padding: 2px 6px !important;
    font-size: 0.68rem !important;
  }

  .chat-cuota-mini-barra {
    display: none !important;
  }

  /* 6. Panel LaTeX (PDF y Editor) en Móvil */
  .cabecera-latex {
    display: none !important; /* En móvil las vistas se alternan desde el selector superior; ocultar para no duplicar */
  }

  .subtabs-latex {
    display: none !important;
  }

  .latex-vistas-splitter {
    display: none !important;
  }

  .latex-vistas-wrapper.modo-ambos {
    flex-direction: column !important;
  }

  .latex-vistas-wrapper.modo-ambos .subtab-pdf,
  .latex-vistas-wrapper.modo-ambos .subtab-editor {
    width: 100% !important;
    flex: 1 1 50% !important;
  }

  /* PDF Toolbar */
  .pdf-toolbar {
    padding: 6px 8px !important;
    gap: 8px !important;
  }

  .pdf-info-archivo {
    font-size: 0.74rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .nombre-pdf {
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }

  .pdf-hora {
    display: none !important;
  }

  .btn-abrir-pdf-tab .btn-txt-abrir-pdf {
    display: none !important;
  }

  .btn-abrir-pdf-tab,
  .btn-recargar-pdf {
    padding: 4px 7px !important;
    font-size: 0.8rem !important;
  }

  /* Editor Toolbar */
  .editor-toolbar {
    padding: 6px 8px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .editor-selector-wrap {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .select-archivo-latex {
    width: 100% !important;
    font-size: 0.76rem !important;
    padding: 4px 6px !important;
  }

  .editor-acciones {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  .btn-volver-atras,
  .btn-rehacer-atras,
  .btn-guardar-latex {
    padding: 5px 9px !important;
    font-size: 0.74rem !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
  }

  .editor-header-info {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .editor-info-izq {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .editor-tag-archivo {
    max-width: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .badge-editor-sync .badge-sync-txt,
  .badge-diff-sync .badge-sync-txt {
    display: none !important;
  }

  .badge-editor-sync,
  .badge-diff-sync {
    padding: 2px 4px !important;
    flex-shrink: 0 !important;
  }

  /* 7. Modales en Móvil a Pantalla Completa */
  .modal-herramientas-overlay {
    padding: 0 !important;
  }

  .modal-herramientas-caja {
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  .modal-herramientas-header {
    padding: 8px 12px !important;
  }

  .modal-herramientas-cuerpo {
    padding: 10px 10px !important;
  }

  .modal-visor-imagen-caja,
  .modal-visor-archivo-caja {
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
  }

  /* 8. PIN Modal */
  .pin-modal {
    padding: 20px 16px 16px !important;
    max-width: 320px !important;
  }

  .pin-teclado {
    max-width: 260px !important;
    gap: 8px !important;
  }

  .btn-num {
    height: 48px !important;
    font-size: 1.25rem !important;
  }

  .pin-digito {
    width: 40px !important;
    height: 48px !important;
    font-size: 1.5rem !important;
  }
}

/* ==========================================================================
   DISPOSITIVOS MÓVILES MUY PEQUEÑOS (<= 400px)
   ========================================================================== */
@media (max-width: 400px) {
  .badge-brand {
    font-size: 0.72rem !important;
    padding: 3px 6px !important;
  }

  .btn-top-herramienta {
    font-size: 0.7rem !important;
    padding: 3px 6px !important;
  }

  .selector-modo .btn-modo {
    font-size: 0.75rem !important;
    padding: 6px 2px !important;
  }

  .claude-msg {
    max-width: 98% !important;
  }
}

/* ==========================================================================
   INTERFAZ DE CHAT MODERNO ESTILO CLAUDE / GEMINI (CELIA TFG)
   ========================================================================== */

/* Toggle Vista: Chat / Terminal */
.toggle-vista-asistente {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radio-sm);
  padding: 2px;
  gap: 2px;
}

.btn-vista-toggle {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  color: #64748b;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-vista-toggle:hover {
  color: var(--tinta);
}

.btn-vista-toggle.activo {
  background: #ffffff;
  color: var(--tinta);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* ==========================================================================
   BARRA LATERAL DESPLEGABLE DE CHATS (ESTILO GEMINI / CHATGPT)
   ========================================================================== */

.btn-toggle-sidebar-chats {
  background: #ffffff;
  border: 2px solid var(--tinta);
  border-radius: 6px;
  box-shadow: 2px 2px 0 #000;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tinta);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  flex-shrink: 0;
  margin-right: 4px;
}

.btn-toggle-sidebar-chats:hover {
  background: var(--amarillo);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #000;
}

.btn-toggle-sidebar-chats:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #000;
}

.btn-toggle-sidebar-chats.activo {
  background: var(--amarillo-fuerte);
  box-shadow: 1px 1px 0 #000;
}

/* Contenedor del cuerpo del asistente con sidebar */
.asistente-cuerpo-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.asistente-area-principal {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Cajón lateral (Drawer) */
.sidebar-chats-drawer {
  width: 275px;
  min-width: 275px;
  max-width: 275px;
  height: 100%;
  background: #fbfcfe;
  border-right: 2.5px solid var(--tinta);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 25;
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              min-width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              max-width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-right-width 0.2s ease,
              opacity 0.16s ease;
  user-select: none;
}

.sidebar-chats-drawer.plegado {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  border-right-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
}

/* Cabecera del Sidebar */
.sidebar-chats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 2px solid var(--tinta);
  background: #ffffff;
}

.sidebar-header-tit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--tinta);
}

.sidebar-icono-header {
  font-size: 1rem;
}

.btn-sidebar-plegar {
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  padding: 4px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-sidebar-plegar:hover {
  background: #e2e8f0;
  color: #dc2626;
  border-color: var(--tinta);
}

/* Botón + Nueva conversación */
.sidebar-chats-accion-nueva {
  padding: 12px 14px 8px 14px;
}

.btn-sidebar-nuevo-chat {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: #ffffff;
  border: 2px solid var(--tinta);
  border-radius: 9999px;
  box-shadow: 2px 2px 0 #000;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--tinta);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-sidebar-nuevo-chat:hover {
  background: var(--amarillo-fuerte);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #000;
}

.btn-sidebar-nuevo-chat:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #000;
}

.icono-plus-gemini {
  font-size: 0.95rem;
}

/* Buscador de conversaciones */
.sidebar-chats-buscador {
  margin: 4px 14px 8px 14px;
  position: relative;
  display: flex;
  align-items: center;
}

.icono-buscar-sidebar {
  position: absolute;
  left: 10px;
  font-size: 0.82rem;
  pointer-events: none;
  opacity: 0.55;
}

.input-buscar-sidebar {
  width: 100%;
  height: 34px;
  padding: 0 28px 0 32px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.8rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--tinta);
  transition: all 0.15s ease;
}

.input-buscar-sidebar:focus {
  outline: none;
  border-color: var(--tinta);
  box-shadow: 2px 2px 0 #000;
}

.btn-limpiar-busqueda-sidebar {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: #94a3b8;
  padding: 2px;
}

.btn-limpiar-busqueda-sidebar:hover {
  color: var(--tinta);
}

/* Scroll y Lista */
.sidebar-chats-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 10px 12px 10px;
}

.sidebar-seccion-label {
  font-size: 0.68rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 6px 4px 6px;
}

.sidebar-chats-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-chat-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.12s ease;
  background: transparent;
  text-align: left;
}

.sidebar-chat-item:hover {
  background: #ffffff;
  border-color: var(--tinta);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 #000;
}

.sidebar-chat-item.activo {
  background: #fffbeb;
  border-color: var(--tinta);
  box-shadow: 2px 2px 0 #000;
}

.sidebar-chat-item-icono {
  font-size: 0.95rem;
  line-height: 1.2;
  flex-shrink: 0;
  margin-top: 1px;
}

.sidebar-chat-item-textos {
  flex: 1;
  min-width: 0;
}

.sidebar-chat-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.sidebar-chat-item-titulo {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.sidebar-chat-item.activo .sidebar-chat-item-titulo {
  color: #000000;
  font-weight: 900;
}

.sidebar-chat-item-fecha {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: #94a3b8;
  flex-shrink: 0;
}

.sidebar-chat-item-preview {
  font-size: 0.72rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.sidebar-chats-empty,
.sidebar-chats-loading {
  padding: 16px 10px;
  text-align: center;
  font-size: 0.78rem;
  color: #64748b;
  font-style: italic;
}

/* Footer del Sidebar */
.sidebar-chats-footer {
  padding: 10px 14px;
  border-top: 2px solid var(--tinta);
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--tinta);
  background: var(--amarillo-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-sub {
  font-size: 0.68rem;
  color: #64748b;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modo Overlay para pantallas o paneles estrechos (Flow ChatGPT / Gemini Drawer) */
.asistente-cuerpo-layout.sidebar-overlay .sidebar-chats-drawer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: min(285px, 86%);
  min-width: 0;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.28), 2.5px 0 0 var(--tinta);
  z-index: 60;
  transform: translateX(0);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease,
              visibility 0.24s;
  opacity: 1;
  visibility: visible;
}

.asistente-cuerpo-layout.sidebar-overlay .sidebar-chats-drawer.plegado {
  transform: translateX(-105%) !important;
  width: 280px !important;
  min-width: 0 !important;
  max-width: min(285px, 86%) !important;
  box-shadow: none !important;
  border-right-width: 2.5px solid var(--tinta);
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.sidebar-chats-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
  z-index: 55;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.asistente-cuerpo-layout.sidebar-overlay:not(.sidebar-plegada) .sidebar-chats-backdrop {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Vista Chat Moderno Principal */
.vista-chat-moderno {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #ffffff;
}

.vista-terminal-clasica {
  height: 100%;
  width: 100%;
  position: relative;
}

.vista-terminal-clasica .iframe-consola {
  width: 100%;
  height: 100%;
  border: none;
}

/* Scroll de Mensajes */
.chat-mensajes-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

/* Bienvenida */
.chat-bienvenida {
  background: #fafaf9;
  border: 1.5px dashed #e7e5e4;
  border-radius: var(--radio-md);
  padding: 24px;
  text-align: center;
  margin-bottom: 8px;
}

.chat-bienvenida-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.chat-bienvenida-tit {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1c1917;
  margin-bottom: 6px;
}

.chat-bienvenida-desc {
  font-size: 0.85rem;
  color: #78716c;
  max-width: 540px;
  margin: 0 auto 16px;
  line-height: 1.45;
}

.chat-sugerencias-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.chip-sugerencia {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #44403c;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.chip-sugerencia:hover {
  background: #f5f5f4;
  border-color: #d6d3d1;
  transform: translateY(-1px);
}

/* Lista de Mensajes y Burbujas */
.chat-lista-mensajes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mensaje-chat-fila {
  display: flex;
  gap: 12px;
  max-width: 90%;
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mensaje-chat-fila.usuario {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.mensaje-chat-fila.asistente {
  align-self: flex-start;
}

.avatar-mensaje {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  font-weight: 800;
}

.avatar-mensaje.usuario {
  background: #0f172a;
  color: #ffffff;
  border: 1.5px solid #000;
  box-shadow: 1px 1px 0 #000;
}

.avatar-mensaje.asistente {
  background: #d97757;
  color: #ffffff;
  border: 1.5px solid #000;
  box-shadow: 1px 1px 0 #000;
}

.logo-lluyot-avatar {
  display: block;
  fill: currentColor;
  flex-shrink: 0;
}

.burbuja-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.burbuja-usuario {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  border-radius: 14px 14px 2px 14px;
  padding: 10px 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.burbuja-asistente {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  color: #1e293b;
  border-radius: 14px 14px 14px 2px;
  padding: 14px 16px;
  font-size: 0.88rem;
  line-height: 1.6;
  word-break: break-word;
}

/* Tipografía dentro de respuestas del asistente */
.burbuja-asistente p {
  margin: 0 0 10px 0;
}
.burbuja-asistente p:last-child {
  margin-bottom: 0;
}

.burbuja-asistente h1, 
.burbuja-asistente h2, 
.burbuja-asistente h3, 
.burbuja-asistente h4 {
  font-size: 0.98rem;
  font-weight: 800;
  margin: 12px 0 6px 0;
  color: #0f172a;
}

.burbuja-asistente ul, 
.burbuja-asistente ol {
  margin: 4px 0 10px 18px;
  padding: 0;
}

.burbuja-asistente li {
  margin-bottom: 4px;
}

.burbuja-asistente code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: #f1f5f9;
  color: #d97757;
  padding: 1px 4px;
  border-radius: 4px;
}

.burbuja-asistente pre {
  background: #0f172a;
  color: #f8fafc;
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 10px 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.45;
}

.burbuja-asistente pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* Bloque Colapsable de Razonamiento (Thinking) */
.tarjeta-thinking {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #d97757;
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}

.tarjeta-thinking-header {
  padding: 6px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.tarjeta-thinking-header:hover {
  background: #f1f5f9;
  color: #334155;
}

.tarjeta-thinking-cuerpo {
  padding: 8px 10px;
  font-size: 0.76rem;
  color: #475569;
  font-style: italic;
  line-height: 1.4;
  border-top: 1px dashed #e2e8f0;
  max-height: 180px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* Tarjeta interactiva de modificación de archivos */
.tarjeta-herramienta-chat {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tarjeta-herramienta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.tarjeta-herramienta-tit {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tarjeta-herramienta-acciones {
  display: flex;
  gap: 6px;
}

.btn-accion-tool-chat {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  color: #334155;
  transition: all 0.15s ease;
}

.btn-accion-tool-chat:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Indicador de Pensando / Cargando */
.chat-pensando-indicador {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.avatar-asistente-mini {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d97757;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  border: 1.5px solid #000;
  box-shadow: 1px 1px 0 #000;
}

.burbuja-pensando {
  background: #fafaf9;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #78716c;
}

.puntos-pensando {
  display: flex;
  gap: 3px;
}

.puntos-pensando span {
  width: 5px;
  height: 5px;
  background: #d97757;
  border-radius: 50%;
  animation: pulsoPunto 1.4s infinite ease-in-out both;
}

.puntos-pensando span:nth-child(1) { animation-delay: -0.32s; }
.puntos-pensando span:nth-child(2) { animation-delay: -0.16s; }

@keyframes pulsoPunto {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

/* Cola de Mensajes Pendientes (Estilo Claude / Gemini) */
.chat-cola-mensajes-wrap {
  margin: 10px 0 4px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-cola-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: #475569;
}

.chat-cola-icono {
  font-size: 0.9rem;
}

.chat-cola-tit {
  color: #0f172a;
  font-weight: 800;
}

.chat-cola-desc {
  color: #94a3b8;
  font-size: 0.70rem;
  margin-left: auto;
}

.chat-cola-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.item-cola-mensaje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.82rem;
  color: #1e293b;
  transition: all 0.12s ease;
}

.item-cola-mensaje:hover {
  border-color: #cbd5e1;
  background: #fdfdfd;
}

.item-cola-izq {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.item-cola-orden {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  background: #e2e8f0;
  color: #475569;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.item-cola-badge-plan {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 800;
  background: #fef08a;
  color: #854d0e;
  border: 1px solid #ca8a04;
  padding: 0 4px;
  border-radius: 3px;
  flex-shrink: 0;
}

.item-cola-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
}

.btn-quitar-cola {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.85rem;
  font-weight: 800;
  border-radius: 4px;
  transition: all 0.12s ease;
  flex-shrink: 0;
}

.btn-quitar-cola:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* Indicador en el botón enviar cuando está encolando */
.btn-claude-send.modo-encolar {
  background: #0284c7 !important;
  color: #ffffff !important;
}

.btn-claude-send.modo-encolar:hover {
  background: #0369a1 !important;
}

/* Barra de Entrada Estilo Claude (Claude Chat Input) */
.claude-input-wrapper {
  padding: 12px 20px 16px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.claude-input-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 10px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.claude-input-card:focus-within {
  border-color: #d97757;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Fila de adjuntos / documentos pegados estilo Claude & Grok */
.claude-adjuntos-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 8px;
  margin-bottom: 2px;
  border-bottom: 1px dashed #e2e8f0;
}

.claude-adjunto-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 5px 8px 5px 6px;
  max-width: 250px;
  transition: all 0.15s ease;
  user-select: none;
  animation: fadeInAdjunto 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInAdjunto {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.claude-adjunto-card:hover {
  background: #ffffff;
  border-color: #94a3b8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.claude-adjunto-icono-wrap {
  width: 28px;
  height: 32px;
  background: #e2e8f0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #cbd5e1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.claude-adjunto-icono-wrap.ext-txt {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.claude-adjunto-icono-wrap.ext-tex {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669;
}

.claude-adjunto-icono-wrap.ext-bib {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

.claude-adjunto-icono-wrap.ext-json {
  background: #fdf4ff;
  border-color: #f5d0fe;
  color: #a21caf;
}

.claude-adjunto-icono-wrap.ext-py {
  background: #fefce8;
  border-color: #fde047;
  color: #ca8a04;
}

.claude-adjunto-icono-ext {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}

.claude-adjunto-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.claude-adjunto-nombre {
  font-size: 0.77rem;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.claude-adjunto-meta {
  font-size: 0.68rem;
  color: #64748b;
  white-space: nowrap;
  line-height: 1.2;
  margin-top: 2px;
}

.claude-adjunto-btn-eliminar {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 2px;
  transition: all 0.15s ease;
}

.claude-adjunto-btn-eliminar:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.claude-textarea-box {
  width: 100%;
}

.claude-textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.45;
  color: #1e293b;
  resize: none;
  min-height: 24px;
  max-height: 200px;
  padding: 2px 0;
}

.claude-textarea::placeholder {
  color: #94a3b8;
}

.claude-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.claude-actions-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-claude-tool {
  background: transparent;
  border: none;
  color: #64748b;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

.btn-claude-tool:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.btn-claude-tool.btn-thinking.activo {
  color: #d97757;
  background: rgba(217, 119, 87, 0.12);
}

.badge-thinking-active {
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 0.52rem;
  font-weight: 800;
  background: #d97757;
  color: #ffffff;
  padding: 0 3px;
  border-radius: 4px;
  line-height: 1.2;
  pointer-events: none;
  z-index: 2;
}

.separador-tools {
  width: 1px;
  height: 16px;
  background: #e2e8f0;
  margin: 0 4px;
}

.pill-contexto-tfg {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #64748b;
  background: #f8fafc;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Botón Modo Plan Minimalista (/plan) */
.btn-modo-plan-chat {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  height: 26px;
  line-height: 1;
}

.btn-modo-plan-chat:hover {
  border-color: var(--tinta);
  color: var(--tinta);
  background: #f8fafc;
}

.btn-modo-plan-chat.activo {
  background: var(--amarillo) !important;
  color: var(--tinta) !important;
  border: 1.5px solid var(--tinta) !important;
  box-shadow: 1.5px 1.5px 0 var(--tinta) !important;
  font-weight: 800 !important;
}

.btn-modo-plan-chat.activo:hover {
  background: var(--amarillo-fuerte) !important;
}

.badge-mensaje-plan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef08a;
  color: #854d0e;
  border: 1px solid #ca8a04;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  font-family: var(--font-mono);
  margin-bottom: 5px;
}

/* Tarjeta de Decisión y Aprobación de Modo Plan (/plan) */
.tarjeta-decision-plan {
  margin-top: 10px;
  background: #fefce8;
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: 3px 3px 0 var(--tinta);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: modalEntrada 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tarjeta-plan-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tarjeta-plan-icono {
  width: 34px;
  height: 34px;
  background: var(--amarillo);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 1.5px 1.5px 0 var(--tinta);
}

.tarjeta-plan-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tarjeta-plan-tit {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 900;
  color: #854d0e;
}

.tarjeta-plan-sub {
  font-size: 0.76rem;
  color: #713f12;
}

.tarjeta-plan-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.btn-plan-accion {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 6px 12px;
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: 2px 2px 0 var(--tinta);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.1s ease;
  line-height: 1.2;
}

.btn-plan-accion:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--tinta);
}

.btn-plan-accion:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--tinta);
}

.btn-plan-accion:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 1px 1px 0 var(--tinta) !important;
}

.btn-plan-aprobar {
  background: var(--verde);
  color: var(--tinta);
  font-weight: 800;
}

.btn-plan-aprobar:hover:not(:disabled) {
  background: var(--verde-fuerte);
}

.btn-plan-paso {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 800;
}

.btn-plan-paso:hover:not(:disabled) {
  background: #bae6fd;
}

.btn-plan-ajustar {
  background: #ffffff;
  color: var(--tinta);
  font-weight: 700;
}

.btn-plan-ajustar:hover:not(:disabled) {
  background: #f1f5f9;
}

.claude-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-modelo-chat {
  position: relative;
}

.btn-modelo-chat-selector {
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 175px;
  transition: all 0.15s ease;
}

.btn-modelo-chat-selector #labelModeloChatPill {
  max-width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-modelo-chat-selector:hover {
  background: #f8fafc;
  color: #0f172a;
}

.menu-modelos-chat-flotante {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
  padding: 6px;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 100;
}

.item-modelo-chat {
  background: transparent;
  border: none;
  text-align: left;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.12s ease;
}

.item-modelo-chat:hover {
  background: #f1f5f9;
}

.item-modelo-chat.activo {
  background: rgba(217, 119, 87, 0.1);
  color: #d97757;
}

.item-modelo-chat strong {
  font-size: 0.78rem;
}

.item-modelo-chat small {
  font-size: 0.68rem;
  color: #64748b;
}

.btn-claude-send {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #d97757;
  color: #ffffff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-claude-send:hover {
  background: #c6613f;
  transform: translateY(-1px);
}

.btn-claude-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Footer discreto de límites de uso del chat */
.claude-footer-cuota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.72rem;
  color: #64748b;
  padding: 4px 8px;
  user-select: none;
}

.chat-cuota-bloque {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(241, 245, 249, 0.75);
  padding: 3px 9px;
  border-radius: 9999px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  transition: all 0.2s ease;
  cursor: default;
}

.chat-cuota-bloque:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.chat-cuota-icono {
  font-size: 0.75rem;
  line-height: 1;
}

.chat-cuota-texto {
  font-weight: 500;
  color: #475569;
}

.chat-cuota-texto strong {
  color: #0f172a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chat-cuota-mini-barra {
  width: 42px;
  height: 4.5px;
  background: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.chat-cuota-progreso {
  height: 100%;
  border-radius: 9999px;
  background: #10b981;
  transition: width 0.4s ease, background-color 0.3s ease;
}

.chat-cuota-sep {
  color: #cbd5e1;
  font-size: 0.8rem;
}

.claude-footer-aviso {
  font-size: 0.7rem;
  color: #94a3b8;
  text-align: center;
}

/* ==========================================================================
   OPTIMIZACIONES RESPONSIVAS PARA PANEL ASISTENTE ESTRECHO (COMPACTO Y MINI)
   "cuando se apriete, mejora esto, o que el historial se meta pa dentro"
   ========================================================================== */

/* 1. Encabezado del Asistente */
.columna-asistente.asistente-compacto .panel-cabecera {
  padding: 6px 8px;
  gap: 6px;
}

.columna-asistente.asistente-compacto .panel-cabecera-tit {
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.columna-asistente.asistente-compacto .tit-panel {
  font-size: 0.78rem;
  white-space: nowrap;
}

.columna-asistente.asistente-compacto .badge-google {
  padding: 2px 5px;
  font-size: 0.70rem;
  max-width: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.columna-asistente.asistente-compacto .toggle-vista-asistente .btn-vista-toggle span:not(:first-child) {
  display: none !important;
}

.columna-asistente.asistente-compacto .toggle-vista-asistente .btn-vista-toggle {
  padding: 3px 5px !important;
  font-size: 0.78rem !important;
}

.columna-asistente.asistente-compacto .btn-nuevo-chat-destacado {
  padding: 4px 7px;
  font-size: 0.76rem;
  gap: 3px;
}

.columna-asistente.asistente-compacto .btn-nuevo-chat-destacado span:last-child {
  display: none !important;
}

.columna-asistente.asistente-mini .tit-panel {
  display: none !important;
}

.columna-asistente.asistente-mini .circulos-terminal {
  display: none !important;
}

.columna-asistente.asistente-mini .badge-google {
  max-width: 65px;
  padding: 2px 4px;
}

.columna-asistente.asistente-mini .badge-google span:not(.punto-status) {
  display: none !important;
}

/* Soporte de Container Query para la cabecera del asistente */
@container col-asistente (max-width: 460px) {
  .panel-cabecera {
    padding: 6px 8px !important;
    gap: 5px !important;
  }
  .panel-cabecera-tit {
    gap: 4px !important;
  }
  .tit-panel {
    font-size: 0.78rem !important;
  }
  .badge-google {
    max-width: 85px !important;
    padding: 2px 5px !important;
  }
  .toggle-vista-asistente .btn-vista-toggle span:not(:first-child) {
    display: none !important;
  }
  .toggle-vista-asistente .btn-vista-toggle {
    padding: 3px 5px !important;
  }
  .btn-nuevo-chat-destacado span:last-child {
    display: none !important;
  }
  .btn-nuevo-chat-destacado {
    padding: 4px 7px !important;
  }
}

@container col-asistente (max-width: 360px) {
  .circulos-terminal {
    display: none !important;
  }
  .tit-panel {
    display: none !important;
  }
  .badge-google span:not(.punto-status) {
    display: none !important;
  }
  .badge-google {
    max-width: 28px !important;
    padding: 3px !important;
    justify-content: center;
  }
}

/* 2. Mensajes y Burbujas de Chat */
.columna-asistente.asistente-compacto .chat-mensajes-scroll {
  padding: 12px 10px;
}

.columna-asistente.asistente-compacto .mensaje-chat-fila {
  gap: 8px;
  max-width: 98%;
}

.columna-asistente.asistente-compacto .avatar-usuario,
.columna-asistente.asistente-compacto .avatar-asistente-mini {
  width: 26px;
  height: 26px;
  min-width: 26px;
  font-size: 0.75rem;
}

.columna-asistente.asistente-compacto .burbuja-usuario,
.columna-asistente.asistente-compacto .burbuja-asistente {
  padding: 8px 12px;
  font-size: 0.85rem;
  line-height: 1.45;
}

.columna-asistente.asistente-mini .mensaje-chat-fila {
  max-width: 100%;
  gap: 5px;
}

.columna-asistente.asistente-mini .avatar-usuario,
.columna-asistente.asistente-mini .avatar-asistente-mini {
  display: none;
}

.columna-asistente.asistente-mini .burbuja-usuario,
.columna-asistente.asistente-mini .burbuja-asistente {
  padding: 6px 10px;
  font-size: 0.82rem;
}

/* 3. Input Box Estilo Claude */
.columna-asistente.asistente-compacto .claude-input-wrapper {
  padding: 8px 10px 10px;
}

.columna-asistente.asistente-compacto .claude-input-card {
  padding: 8px 10px 8px;
  border-radius: 14px;
  overflow: visible;
}

.columna-asistente.asistente-compacto .claude-actions-bar {
  flex-wrap: nowrap;
  gap: 4px;
}

.columna-asistente.asistente-compacto .claude-actions-left {
  gap: 3px;
  flex-shrink: 0;
}

.columna-asistente.asistente-compacto .claude-actions-right {
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
}

.columna-asistente.asistente-compacto .btn-claude-tool {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.columna-asistente.asistente-compacto .btn-modo-plan-chat {
  height: 25px;
  padding: 2px 5px;
  font-size: 0.68rem;
  flex-shrink: 0;
}

.columna-asistente.asistente-compacto .pill-contexto-tfg span:last-child {
  display: none;
}

.columna-asistente.asistente-compacto .dropdown-modelo-chat {
  min-width: 0;
  flex-shrink: 1;
}

.columna-asistente.asistente-compacto .btn-modelo-chat-selector {
  padding: 3px 6px;
  font-size: 0.68rem;
  max-width: 130px;
  min-width: 0;
}

.columna-asistente.asistente-compacto .btn-modelo-chat-selector #labelModeloChatPill {
  max-width: 95px;
}

.columna-asistente.asistente-compacto .btn-claude-send {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Modo Mini (cuando se encoge mucho la columna) */
.columna-asistente.asistente-mini .separador-tools {
  display: none;
}

.columna-asistente.asistente-mini .txt-plan {
  display: none;
}

.columna-asistente.asistente-mini .btn-modo-plan-chat {
  padding: 2px 4px;
  width: 26px;
  justify-content: center;
}

.columna-asistente.asistente-mini .btn-claude-tool {
  width: 26px;
  height: 26px;
}

.columna-asistente.asistente-mini .btn-modelo-chat-selector {
  max-width: 85px;
}

.columna-asistente.asistente-mini .btn-modelo-chat-selector #labelModeloChatPill {
  max-width: 55px;
}

.columna-asistente.asistente-mini .btn-claude-send {
  width: 26px;
  height: 26px;
}

/* 4. Footer de Cuota de Uso */
.columna-asistente.asistente-compacto .claude-footer-cuota {
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 2px 4px;
  justify-content: center;
}

.columna-asistente.asistente-compacto .chat-cuota-bloque {
  padding: 2px 6px;
  font-size: 0.68rem;
  gap: 4px;
}

.columna-asistente.asistente-compacto .chat-cuota-mini-barra {
  width: 28px;
  height: 4px;
}

.columna-asistente.asistente-compacto .chat-cuota-sep {
  display: none;
}

.columna-asistente.asistente-mini .chat-cuota-texto {
  font-size: 0.64rem;
}

.columna-asistente.asistente-mini .chat-cuota-mini-barra {
  display: none;
}

/* ==========================================================================
   ÁRBOL JERÁRQUICO DE ARCHIVOS (FILESYSTEM-ITEM STYLE)
   ========================================================================== */

.arbol-herramientas-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.arbol-info-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 260px;
}

.arbol-path-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
  background: #f8fafc;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.arbol-contador-items {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  background: #e2e8f0;
  padding: 2px 6px;
  border-radius: 4px;
}

.arbol-busqueda-wrap {
  flex: 1;
  max-width: 280px;
}

.input-buscar-arbol {
  width: 100%;
  padding: 6px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.82rem;
  color: #0f172a;
  outline: none;
  background: #ffffff;
  transition: all 0.15s ease;
}

.input-buscar-arbol:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.arbol-acciones-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-arbol-accion {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.btn-arbol-accion:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
}

.btn-arbol-accion.btn-arbol-subir {
  background: #0ea5e9;
  border-color: #0284c7;
  color: #ffffff;
}

.btn-arbol-accion.btn-arbol-subir:hover {
  background: #0284c7;
}

/* Lienzo Dark & Sleek exactamente como en FilesystemItem */
/* Lienzo Limpio y Elegante acorde a la interfaz (Mismo formato que el resto del modal) */
.arbol-canvas-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 20px;
  flex: 1;
  min-height: 480px;
  height: 100%;
  overflow-y: auto;
  font-family: var(--font-sans);
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
}

/* Soporte y Feedback visual para Drag and Drop de archivos y carpetas */
.arbol-fila[draggable="true"] {
  cursor: grab;
}

.arbol-fila[draggable="true"]:active {
  cursor: grabbing;
}

.arbol-fila.arrastrando-nodo {
  opacity: 0.45;
  background: #f1f5f9;
  border: 1.5px dashed #94a3b8 !important;
}

.arbol-fila.arbol-drop-target {
  background: #e0f2fe !important;
  border: 2px dashed #0284c7 !important;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.25);
  transform: translateX(4px);
}

.arbol-path-badge.arbol-drop-target {
  background: #bae6fd !important;
  border: 2px dashed #0284c7 !important;
  transform: scale(1.03);
}

.arbol-canvas-card::-webkit-scrollbar {
  width: 6px;
}
.arbol-canvas-card::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.arbol-canvas-card::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.arbol-estado-cargando {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  gap: 12px;
  color: #64748b;
  font-size: 0.88rem;
}

.spinner-puntos-arbol {
  display: flex;
  gap: 6px;
}

.spinner-puntos-arbol span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0ea5e9;
  animation: pulsoPunto 1.4s infinite ease-in-out both;
}
.spinner-puntos-arbol span:nth-child(1) { animation-delay: -0.32s; }
.spinner-puntos-arbol span:nth-child(2) { animation-delay: -0.16s; }

/* Estructura de listas del Árbol */
.arbol-lista, .arbol-sublista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.arbol-sublista {
  padding-left: 20px;
  margin-left: 10px;
  border-left: 1.5px dashed #cbd5e1;
  transition: all 0.25s ease;
}

.arbol-item {
  list-style: none;
  margin: 2px 0;
}

.arbol-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
  position: relative;
  border: 1px solid transparent;
}

.arbol-fila:hover {
  background: #f1f5f9;
}

.arbol-fila.activo {
  background: #e0f2fe;
  border-color: #bae6fd;
}

.btn-arbol-chevron {
  background: none;
  border: none;
  padding: 2px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease, background 0.15s ease;
}

.btn-arbol-chevron:hover {
  color: #0284c7;
  background: #e0f2fe;
}

.btn-arbol-chevron.abierto {
  transform: rotate(90deg);
  color: #64748b;
}

.arbol-spacer-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icono-arbol-folder {
  flex-shrink: 0;
  color: #0284c7;
  fill: rgba(14, 165, 233, 0.25);
  transition: transform 0.15s ease;
}

.arbol-fila:hover .icono-arbol-folder {
  transform: scale(1.08);
}

.icono-arbol-file {
  flex-shrink: 0;
  color: #64748b;
  transition: transform 0.15s ease;
}

.arbol-fila:hover .icono-arbol-file {
  transform: scale(1.08);
}

.icono-arbol-file.tex { color: #8b5cf6; }
.icono-arbol-file.bib { color: #d97706; }
.icono-arbol-file.pdf { color: #ef4444; }
.icono-arbol-file.doc { color: #10b981; }
.icono-arbol-file.imagen { color: #0284c7; }
.icono-arbol-file.aux { color: #94a3b8; opacity: 0.65; }

.arbol-nodo-nombre {
  font-size: 0.88rem;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
}

.arbol-fila:hover .arbol-nodo-nombre {
  color: #0f172a;
}

.arbol-nodo-meta {
  font-size: 0.72rem;
  color: #94a3b8;
  font-family: var(--font-mono);
  margin-left: 6px;
}

/* Acciones flotantes al pasar el cursor */
.arbol-nodo-acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.arbol-fila:hover .arbol-nodo-acciones {
  opacity: 1;
}

.btn-micro-arbol {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  cursor: pointer;
  color: #475569;
  transition: all 0.12s ease;
}

.btn-micro-arbol:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: scale(1.08);
}

.btn-micro-arbol.peligro:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #ef4444;
}

.arbol-footer-pistas {
  font-size: 0.76rem;
  color: #64748b;
  padding: 4px 6px;
}

.arbol-footer-pistas code {
  font-family: var(--font-mono);
  background: #f1f5f9;
  padding: 1px 4px;
  border-radius: 3px;
  color: #d97757;
}

/* ==========================================================================
   VISORES POP-UP (IMÁGENES EN GRANDE Y EDITOR RÁPIDO DE ARCHIVOS)
   ========================================================================== */

.modal-visor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeInVisor 0.18s ease-out;
}

@keyframes fadeInVisor {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.modal-visor-caja {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  max-width: 960px;
  width: 95vw;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
}

.modal-visor-caja-archivo {
  max-width: 1050px;
  height: 85vh;
}

.modal-visor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1.5px solid #e2e8f0;
  gap: 12px;
}

.modal-visor-tit-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.modal-visor-icono {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}

.modal-visor-meta-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.modal-visor-nombre {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-visor-detalles {
  font-size: 0.75rem;
  color: #64748b;
  font-family: var(--font-mono);
  margin-top: 1px;
}

.modal-visor-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-visor-accion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-visor-accion:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.btn-visor-guardar {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

.btn-visor-guardar:hover {
  background: #0369a1;
  border-color: #0369a1;
  color: #ffffff;
}

.btn-visor-guardar:disabled {
  background: #94a3b8;
  border-color: #94a3b8;
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-visor-cerrar {
  width: 32px;
  height: 32px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-visor-cerrar:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* Cuerpo del visor de imagen grande */
.modal-visor-imagen-cuerpo {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  padding: 24px;
  min-height: 320px;
}

.visor-imagen-contenedor {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.img-visor-grande {
  max-width: 100%;
  max-height: calc(82vh - 120px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  background: #1e293b;
  transition: transform 0.2s ease;
}

/* Footer del visor de imagen con código LaTeX */
.modal-visor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #f8fafc;
  border-top: 1.5px solid #e2e8f0;
  gap: 12px;
}

.visor-latex-snippet {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  font-size: 0.82rem;
  flex: 1;
}

.visor-snippet-label {
  font-weight: 700;
  color: #64748b;
  font-size: 0.76rem;
  white-space: nowrap;
}

.visor-latex-snippet code {
  font-family: var(--font-mono);
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  border-radius: 6px;
  color: #0284c7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cuerpo del visor / editor de archivos de texto */
.modal-visor-archivo-cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
  position: relative;
}

.textarea-visor-archivo {
  flex: 1;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.55;
  color: #0f172a;
  background: #ffffff;
  padding: 16px 20px;
  tab-size: 2;
  box-sizing: border-box;
}

.visor-archivo-status {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
}

.visor-archivo-status.modificado {
  color: #d97706;
  font-weight: 700;
}

.visor-archivo-path {
  font-size: 0.74rem;
  font-family: var(--font-mono);
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 350px;
}

/* ==========================================================================
   INSTRUCCIONES INTERACTIVAS (CARDS, CHIPS Y PRESETS)
   ========================================================================== */

.instrucciones-tit-wrap {
  flex: 1;
  min-width: 240px;
}

.toggle-vista-instrucciones {
  display: inline-flex;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
  padding: 2px;
}

.btn-toggle-inst {
  padding: 4px 10px;
  border: none;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: #64748b;
  border-radius: 6px;
  transition: all 0.12s ease;
}

.btn-toggle-inst.activo {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-nueva-seccion-inst {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.btn-nueva-seccion-inst:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.instrucciones-presets-barra {
  padding: 8px 16px;
  background: #fafaf9;
  border-bottom: 1px solid #e7e5e4;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  flex-shrink: 0;
}

.presets-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #78716c;
  white-space: nowrap;
}

.presets-chips-scroll {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.chip-preset-inst {
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #44403c;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chip-preset-inst:hover {
  background: #f5f5f4;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateY(-1px);
}

.instrucciones-vista-interactiva {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
}

.instrucciones-secciones-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 100%;
  width: 100%;
}

/* Callouts para avisos y notas en directrices (resuelve el desorden de markdown) */
.inst-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 6px 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.inst-callout-warning {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  color: #92400e;
}

.inst-callout-info {
  background: #f0f9ff;
  border: 1.5px solid #bae6fd;
  color: #0369a1;
}

.inst-callout-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.inst-callout-body {
  flex: 1;
}

.inst-quote-line {
  display: block;
  padding: 2px 0 2px 8px;
  border-left: 2.5px solid #cbd5e1;
  color: #475569;
  font-style: italic;
  margin: 2px 0;
}

/* Editor in-place para editar directrices directamente */
.regla-editor-inplace {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.textarea-regla-inplace {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid #0ea5e9;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.85rem;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  resize: vertical;
  line-height: 1.5;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.regla-editor-inplace-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.btn-guardar-regla-inplace {
  background: #10b981;
  color: #ffffff;
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-guardar-regla-inplace:hover {
  background: #059669;
}

.btn-cancelar-regla-inplace {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-cancelar-regla-inplace:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.seccion-vacia-aviso {
  font-size: 0.8rem;
  color: #94a3b8;
  font-style: italic;
  padding: 8px 4px;
}

.card-seccion-inst {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.card-seccion-inst:hover {
  border-color: #cbd5e1;
}

.card-seccion-header {
  padding: 12px 16px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-seccion-titulo-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-seccion-icono {
  font-size: 1.1rem;
}

.card-seccion-titulo {
  font-size: 0.94rem;
  font-weight: 800;
  color: #0f172a;
}

.card-seccion-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 9999px;
}

.card-seccion-acciones {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-accion-seccion {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px 6px;
  border-radius: 6px;
  color: #64748b;
  transition: all 0.12s ease;
}

.btn-accion-seccion:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.btn-accion-seccion.peligro:hover {
  background: #fee2e2;
  color: #ef4444;
}

.card-seccion-cuerpo {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lista-reglas-seccion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.item-regla-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.12s ease;
}

.item-regla-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.item-regla-punto {
  font-size: 0.8rem;
  color: #0ea5e9;
  margin-top: 1px;
}

.item-regla-contenido {
  flex: 1;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #334155;
  word-break: break-word;
}

.item-regla-contenido strong {
  color: #0f172a;
  font-weight: 700;
}

.item-regla-contenido code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: #f1f5f9;
  padding: 1px 4px;
  border-radius: 3px;
  color: #d97757;
}

.item-regla-acciones {
  display: flex;
  gap: 4px;
  opacity: 0.6;
  transition: opacity 0.12s ease;
}

.item-regla-card:hover .item-regla-acciones {
  opacity: 1;
}

.btn-accion-regla {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 2px 4px;
  border-radius: 4px;
  color: #64748b;
  transition: all 0.12s ease;
}

.btn-accion-regla:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.btn-accion-regla.peligro:hover {
  color: #ef4444;
  background: #fee2e2;
}

.fila-anadir-regla {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.input-nueva-regla {
  flex: 1;
  padding: 7px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.82rem;
  outline: none;
  background: #ffffff;
  color: #0f172a;
  transition: all 0.15s ease;
}

.input-nueva-regla:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.btn-confirmar-anadir-regla {
  padding: 6px 12px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-confirmar-anadir-regla:hover {
  background: #1e293b;
  transform: translateY(-1px);
}

.btn-anadir-seccion-gran {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-anadir-seccion-gran:hover {
  border-color: #0ea5e9;
  color: #0ea5e9;
  background: #f0f9ff;
}

/* ==============================================================================
   SYNCTEX INVERSO: RESALTE VISUAL PULSANTE DEL EDITOR AL SALTAR DESDE EL PDF
   ============================================================================== */
.synctex-highlight-pulse {
  animation: synctexGlowPulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes synctexGlowPulse {
  0% {
    box-shadow: inset 0 0 0 2px #38bdf8, 0 0 25px rgba(56, 189, 248, 0.8);
    background-color: #f0f9ff !important;
  }
  30% {
    box-shadow: inset 0 0 0 3px #0284c7, 0 0 35px rgba(56, 189, 248, 0.6);
    background-color: #e0f2fe !important;
  }
  70% {
    box-shadow: inset 0 0 0 1px #38bdf8, 0 0 15px rgba(56, 189, 248, 0.3);
  }
  100% {
    box-shadow: none;
    background-color: #ffffff !important;
  }
}

/* ==============================================================================
   PANEL DE SINCRONIZACIÓN CON GOOGLE DRIVE (CELIA TFG)
   ============================================================================== */

.drive-panel-contenedor {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.drive-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  padding: 14px 18px;
  box-shadow: var(--sombra);
  gap: 14px;
}

.drive-header-izq {
  display: flex;
  align-items: center;
  gap: 14px;
}

.drive-gran-icono {
  font-size: 2.2rem;
  line-height: 1;
}

.drive-tit-principal {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tinta);
}

.drive-sub-principal {
  margin: 4px 0 0 0;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.35;
}

.drive-header-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  border: 1.5px solid var(--tinta);
  white-space: nowrap;
  background: #f1f5f9;
}

.drive-header-status-badge.conectado {
  background: var(--verde);
}

.drive-header-status-badge.pausado {
  background: var(--amarillo);
}

.drive-header-status-badge.pendiente {
  background: #fee2e2;
}

.drive-status-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
}

.drive-header-status-badge.conectado .drive-status-punto {
  background: var(--verde-fuerte);
}

.drive-header-status-badge.pausado .drive-status-punto {
  background: #b45309;
}

.drive-header-status-badge.pendiente .drive-status-punto {
  background: #dc2626;
}

.drive-grid-tarjetas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .drive-grid-tarjetas {
    grid-template-columns: 1fr;
  }
}

.drive-card {
  background: #ffffff;
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drive-card-header {
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 2px solid var(--tinta);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 800;
}

.drive-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.drive-card-desc {
  margin: 0;
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.4;
}

.drive-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drive-form-group label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tinta);
}

.drive-input-with-btn {
  display: flex;
  gap: 6px;
}

.input-drive-text {
  flex: 1;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  background: #f8fafc;
  color: var(--tinta);
  outline: none;
}

.input-drive-text:focus {
  background: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}

.btn-guardar-drive-cfg {
  background: var(--amarillo);
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  padding: 6px 12px;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: 1px 1px 0 #000;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.btn-guardar-drive-cfg:hover {
  background: var(--amarillo-fuerte);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 #000;
}

.drive-help-text {
  font-size: 0.72rem;
  color: #64748b;
}

.drive-toggles-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f8fafc;
  padding: 10px;
  border-radius: var(--radio-sm);
  border: 1.5px solid #e2e8f0;
}

.drive-toggle-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.drive-toggle-item input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #0284c7;
}

.drive-toggle-labels strong {
  display: block;
  font-size: 0.82rem;
  color: var(--tinta);
}

.drive-toggle-labels small {
  display: block;
  font-size: 0.72rem;
  color: #64748b;
}

.drive-acciones-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  border-top: 1.5px solid #e2e8f0;
}

.btn-accion-drive-sync {
  background: var(--verde);
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  padding: 8px 14px;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-accion-drive-sync:hover:not(:disabled) {
  background: var(--verde-fuerte);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #000;
}

.btn-accion-drive-sync:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.drive-sync-status-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.drive-ultima-sync-txt {
  font-size: 0.72rem;
  color: #475569;
  font-family: var(--font-mono);
  font-weight: 600;
}

.drive-cooldown-txt {
  font-size: 0.70rem;
  font-family: var(--font-mono);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.drive-conectar-flow {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drive-paso-box {
  display: flex;
  gap: 10px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radio-sm);
  padding: 10px;
}

.drive-paso-num {
  width: 22px;
  height: 22px;
  background: var(--tinta);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.74rem;
  flex-shrink: 0;
}

.drive-paso-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drive-paso-info strong {
  font-size: 0.82rem;
}

.drive-paso-info p {
  margin: 0;
  font-size: 0.76rem;
  color: #64748b;
}

.btn-auth-gdrive-google {
  background: #ffffff;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio-sm);
  padding: 6px 12px;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: 1px 1px 0 #000;
  transition: all 0.12s ease;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-auth-gdrive-google:hover {
  background: #f1f5f9;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 #000;
}

.drive-info-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radio-sm);
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  font-size: 0.74rem;
  color: #1e40af;
  line-height: 1.35;
}

.drive-cuenta-conectada-card {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: var(--radio-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drive-cuenta-info-fila {
  display: flex;
  align-items: center;
  gap: 12px;
}

.drive-check-circulo {
  width: 28px;
  height: 28px;
  background: #16a34a;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.drive-cuenta-info-fila strong {
  display: block;
  font-size: 0.88rem;
  color: #14532d;
}

.drive-cuenta-info-fila small {
  display: block;
  font-size: 0.76rem;
  color: #166534;
}

.drive-enlaces-cuenta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #bbf7d0;
}

.drive-link-externo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #15803d;
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  background: #dcfce7;
  transition: all 0.12s ease;
}

.drive-link-externo:hover {
  background: #bbf7d0;
  text-decoration: underline;
}

.btn-desvincular-drive {
  background: transparent;
  border: 1px solid #f87171;
  color: #dc2626;
  border-radius: var(--radio-sm);
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-desvincular-drive:hover {
  background: #fee2e2;
}

.btn-auth-gdrive-google.gran-boton {
  background: #ffffff;
  border: 2px solid var(--tinta);
  border-radius: var(--radio-sm);
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--tinta);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 2px 2px 0 #000;
  transition: all 0.15s ease;
}

.btn-auth-gdrive-google.gran-boton:hover {
  background: #f8fafc;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #000;
}

.drive-detalles-avanzados {
  margin-top: 8px;
  font-size: 0.76rem;
  color: #64748b;
}

.drive-detalles-avanzados summary {
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  padding: 4px 0;
}