/* ===== VIDEO DE FONDO ELIMINADO ===== */

/* ===== OCULTAR SOLO EL LOGO DEL MEDIO DEL LOGIN ===== */

/* NO mostrar el contenedor del logo que estaba en medio del formulario */
body:has(form input[type="password"]) .k4fix-login-logo-container,
body:has(form input[name="password"]) .k4fix-login-logo-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ===== OCULTAR STARTERS COMPLETAMENTE ===== */

/* Ocultar los starters (mensajes sugeridos) */
#starters,
[id*="starters"],
[class*="Starter"],
[class*="starter"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
}

/* ===== OCULTAR LÍNEA SEPARADORA EN LOGIN ===== */

/* Ocultar la línea negra separadora del formulario */
body:has(form input[type="password"]) .relative.text-center[class*="after:border-t"],
body:has(form input[type="password"]) [class*="after:border-t"][class*="after:border-border"],
body:has(form input[name="password"]) .relative.text-center[class*="after:border-t"],
body:has(form input[name="password"]) [class*="after:border-t"][class*="after:border-border"] {
  display: none !important;
}

/* ===== EVITAR PARPADEO AL CARGAR DESPUÉS DEL LOGIN ===== */

/* Ocultar logos de Chainlit que aparecen antes de cargar el chat */
body:not(:has(form input[type="password"])):not(:has(form input[name="password"])) img[src*="/logo"],
body:not(:has(form input[type="password"])):not(:has(form input[name="password"])) img[alt*="Chainlit"],
body:not(:has(form input[type="password"])):not(:has(form input[name="password"])) img[alt*="chainlit"] {
  display: none !important;
  opacity: 0 !important;
}

/* Ocultar TODO hasta que el chat esté completamente listo */
body:not(:has(form)):not(:has(textarea)) #root {
  display: none !important;
}

/* Cuando el chat está listo (hay textarea), mostrar todo */
body:has(textarea) #root {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Pantalla de carga mientras se renderiza */
body:not(:has(form)):not(:has(textarea))::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  z-index: 9999;
  display: block;
}

/* ===== OCULTAR ELEMENTOS DE LOGIN CUANDO HAY CHAT ===== */

/* Si hay textarea de chat (usuario autenticado), ocultar todo lo relacionado con login */
body:has(textarea[placeholder*="message"]) .k4fix-login-logo-container,
body:has(textarea[placeholder*="message"]) .k4fix-register-form,
body:has(textarea[placeholder*="message"]) .k4fix-register-button,
body:has(textarea[placeholder*="message"]) .k4fix-register-link-container,
body:has(textarea[placeholder*="message"]) .k4fix-logo-login,
body:has(textarea[placeholder*="mensaje"]) .k4fix-login-logo-container,
body:has(textarea[placeholder*="mensaje"]) .k4fix-register-form,
body:has(textarea[placeholder*="mensaje"]) .k4fix-register-button,
body:has(textarea[placeholder*="mensaje"]) .k4fix-register-link-container,
body:has(textarea[placeholder*="mensaje"]) .k4fix-logo-login {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ===== FORZAR GRID DE 1 COLUMNA (NO 2) ===== */

/* Cambiar el grid de 2 columnas a 1 columna */
body:has(form input[type="password"]) .grid.min-h-svh,
body:has(form input[type="password"]) [class*="lg:grid-cols-2"],
body:has(form input[name="password"]) .grid.min-h-svh,
body:has(form input[name="password"]) [class*="lg:grid-cols-2"] {
  grid-template-columns: 1fr !important;
}

/* Ocultar completamente el panel derecho (bg-muted) */
body:has(form input[type="password"]) .bg-muted,
body:has(form input[type="password"]) [class*="bg-muted"],
body:has(form input[name="password"]) .bg-muted,
body:has(form input[name="password"]) [class*="bg-muted"] {
  display: none !important;
}

/* ===== FORZAR MODO CLARO EN LOGIN ===== */

/* Forzar modo claro cuando hay formulario de login (type=password o name=password) */
body:has(form input[type="password"]),
body:has(form input[type="password"]) *,
body:has(form input[type="password"]) #root,
body:has(form input[type="password"]) main,
body:has(form input[name="password"]),
body:has(form input[name="password"]) *,
body:has(form input[name="password"]) #root,
body:has(form input[name="password"]) main {
  color-scheme: light !important;
}

/* Forzar textos oscuros y fondos transparentes para ver el video */
body:has(form input[type="password"]) *,
body:has(form input[name="password"]) * {
  color: #000000 !important;
}

/* Body transparente para que se vea el video de fondo */
body:has(form input[type="password"]),
body:has(form input[name="password"]) {
  background: transparent !important;
}

/* Contenedores transparentes para ver el video de fondo */
body:has(form input[type="password"]) #root,
body:has(form input[type="password"]) main,
body:has(form input[type="password"]) .grid,
body:has(form input[name="password"]) #root,
body:has(form input[name="password"]) main,
body:has(form input[name="password"]) .grid {
  background: transparent !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Panel del login - fondo transparente */
body:has(form input[type="password"]) .grid > div:first-child,
body:has(form input[name="password"]) .grid > div:first-child {
  background: transparent !important;
}

/* Contenedor flex del login - centrado y por encima del video */
body:has(form input[type="password"]) .flex.flex-1.items-center.justify-center,
body:has(form input[name="password"]) .flex.flex-1.items-center.justify-center {
  position: relative !important;
  z-index: 200 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Div/heading "Iniciar sesión" con sombra */
body:has(form input[type="password"]) form > div:first-child,
body:has(form input[type="password"]) form h1,
body:has(form input[type="password"]) form h2,
body:has(form input[name="password"]) form > div:first-child,
body:has(form input[name="password"]) form h1,
body:has(form input[name="password"]) form h2 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Formularios con fondo blanco semi-transparente, sombra y efectos */
body:has(form input[type="password"]) form,
body:has(form input[name="password"]) form {
  background: rgba(255, 255, 255, 0.98) !important;
  color: #000000 !important;
  position: relative !important;
  z-index: 300 !important;
  backdrop-filter: blur(15px) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3),
              0 10px 25px rgba(0, 0, 0, 0.2),
              0 0 100px rgba(255, 255, 255, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 20px !important;
  padding: 50px !important;
  max-width: 500px !important;
  width: 100% !important;
}

/* Contenedor del formulario de registro */
body:has(form input[type="password"]) .k4fix-register-form,
body:has(form input[name="password"]) .k4fix-register-form {
  background: #ffffff !important;
}

/* Forzar inputs en modo claro */
body:has(form input[type="password"]) input,
body:has(form input[type="password"]) select,
body:has(form input[type="password"]) textarea,
body:has(form input[name="password"]) input,
body:has(form input[name="password"]) select,
body:has(form input[name="password"]) textarea {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #e0e0e0 !important;
}

body:has(form input[type="password"]) input:focus,
body:has(form input[type="password"]) select:focus,
body:has(form input[type="password"]) textarea:focus,
body:has(form input[name="password"]) input:focus,
body:has(form input[name="password"]) select:focus,
body:has(form input[name="password"]) textarea:focus {
  border-color: #1976d2 !important;
}

/* Labels y textos en oscuro con sombra para legibilidad */
body:has(form input[type="password"]) label,
body:has(form input[type="password"]) p,
body:has(form input[type="password"]) span:not(.loading),
body:has(form input[type="password"]) h1,
body:has(form input[type="password"]) h2,
body:has(form input[type="password"]) h3,
body:has(form input[type="password"]) div:not(button),
body:has(form input[name="password"]) label,
body:has(form input[name="password"]) p,
body:has(form input[name="password"]) span:not(.loading),
body:has(form input[name="password"]) h1,
body:has(form input[name="password"]) h2,
body:has(form input[name="password"]) h3,
body:has(form input[name="password"]) div:not(button) {
  color: #333333 !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8) !important;
}

/* Títulos principales con sombra más pronunciada */
body:has(form input[type="password"]) form h1,
body:has(form input[type="password"]) form h2,
body:has(form input[name="password"]) form h1,
body:has(form input[name="password"]) form h2 {
  font-weight: 700 !important;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9) !important;
}

/* Links */
body:has(form input[type="password"]) a,
body:has(form input[name="password"]) a {
  color: #1976d2 !important;
}

/* Botón/link de registro - con fondo azul y texto blanco */
body:has(form input[type="password"]) .k4fix-register-link-container a,
body:has(form input[name="password"]) .k4fix-register-link-container a {
  color: white !important;
  background: rgba(25, 118, 210, 0.9) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 4px 15px rgba(25, 118, 210, 0.4) !important;
}

/* Botones OAuth Google - SIEMPRE modo claro */
body:has(form input[type="password"]) button[type="button"],
body:has(form input[name="password"]) button[type="button"] {
  background: white !important;
  color: #202124 !important;
  border: 1px solid #dadce0 !important;
}

body:has(form input[type="password"]) button[type="button"]:hover,
body:has(form input[name="password"]) button[type="button"]:hover {
  background: #f8f9fa !important;
}

/* Botones de submit */
body:has(form input[type="password"]) button[type="submit"],
body:has(form input[name="password"]) button[type="submit"] {
  background: #1976d2 !important;
  color: white !important;
}

body:has(form input[type="password"]) button[type="submit"]:hover,
body:has(form input[name="password"]) button[type="submit"]:hover {
  background: #1565c0 !important;
}

/* Alertas/Mensajes de error - FORZAR estilos correctos */
body:has(form input[type="password"]) .alert,
body:has(form input[type="password"]) [role="alert"],
body:has(form input[type="password"]) [class*="alert"],
body:has(form input[type="password"]) div[style*="background"],
body:has(form input[name="password"]) .alert,
body:has(form input[name="password"]) [role="alert"],
body:has(form input[name="password"]) [class*="alert"],
body:has(form input[name="password"]) div[style*="background"] {
  position: relative !important;
  z-index: 500 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
}

/* Alertas de éxito */
body:has(form input[type="password"]) .alert.success,
body:has(form input[type="password"]) [role="alert"][class*="success"],
body:has(form input[type="password"]) div[style*="d4edda"],
body:has(form input[name="password"]) .alert.success,
body:has(form input[name="password"]) [role="alert"][class*="success"],
body:has(form input[name="password"]) div[style*="d4edda"] {
  background: #d4edda !important;
  color: #155724 !important;
  border: 1px solid #c3e6cb !important;
}

/* Alertas de error - IMPORTANTE: Sobrescribir el color negro y dark mode */
body:has(form input[type="password"]) .alert.error,
body:has(form input[type="password"]) .alert.error *,
body:has(form input[type="password"]) [role="alert"][class*="error"],
body:has(form input[type="password"]) [role="alert"][class*="error"] *,
body:has(form input[type="password"]) [role="alert"][class*="destructive"],
body:has(form input[type="password"]) [role="alert"][class*="destructive"] *,
body:has(form input[type="password"]) div[style*="f8d7da"],
body:has(form input[type="password"]) div[style*="f8d7da"] *,
body:has(form input[type="password"]) .bg-red-50,
body:has(form input[type="password"]) .bg-red-50 *,
body:has(form input[type="password"]) [class*="bg-red"],
body:has(form input[type="password"]) [class*="bg-red"] *,
body:has(form input[name="password"]) .alert.error,
body:has(form input[name="password"]) .alert.error *,
body:has(form input[name="password"]) [role="alert"][class*="error"],
body:has(form input[name="password"]) [role="alert"][class*="error"] *,
body:has(form input[name="password"]) [role="alert"][class*="destructive"],
body:has(form input[name="password"]) [role="alert"][class*="destructive"] *,
body:has(form input[name="password"]) div[style*="f8d7da"],
body:has(form input[name="password"]) div[style*="f8d7da"] *,
body:has(form input[name="password"]) .bg-red-50,
body:has(form input[name="password"]) .bg-red-50 *,
body:has(form input[name="password"]) [class*="bg-red"],
body:has(form input[name="password"]) [class*="bg-red"] * {
  background: #f8d7da !important;
  color: #721c24 !important;
  border: 1px solid #f5c6cb !important;
  text-shadow: none !important;
}

/* Forzar colores específicos para textos de error */
body:has(form input[type="password"]) .text-red-700,
body:has(form input[type="password"]) .text-red-400,
body:has(form input[type="password"]) [class*="text-red"],
body:has(form input[name="password"]) .text-red-700,
body:has(form input[name="password"]) .text-red-400,
body:has(form input[name="password"]) [class*="text-red"] {
  color: #721c24 !important;
}

/* Iconos de error en rojo oscuro */
body:has(form input[type="password"]) .text-red-400 svg,
body:has(form input[type="password"]) .text-red-300 svg,
body:has(form input[type="password"]) [class*="text-red"] svg,
body:has(form input[name="password"]) .text-red-400 svg,
body:has(form input[name="password"]) .text-red-300 svg,
body:has(form input[name="password"]) [class*="text-red"] svg {
  color: #721c24 !important;
  fill: #721c24 !important;
}

/* Variantes de error de Chainlit */
body:has(form input[type="password"]) [class*="bg-destructive"],
body:has(form input[type="password"]) [class*="bg-destructive"] *,
body:has(form input[name="password"]) [class*="bg-destructive"],
body:has(form input[name="password"]) [class*="bg-destructive"] * {
  background: #f8d7da !important;
  color: #721c24 !important;
  border: 1px solid #f5c6cb !important;
  text-shadow: none !important;
}

/* Iconos dentro de alertas */
body:has(form input[type="password"]) .alert svg,
body:has(form input[type="password"]) [role="alert"] svg,
body:has(form input[name="password"]) .alert svg,
body:has(form input[name="password"]) [role="alert"] svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}