/* ======================================================
   TEMA UPEC LIMPIO
   Verde - Amarillo - Blanco
====================================================== */

:root {
  --upec-green: #00843D;
  --upec-green-dark: #005C2E;
  --upec-yellow: #FFD200;
  --upec-yellow-soft: #FFF7CC;
  --upec-white: #FFFFFF;
  --upec-bg: #F6FAF7;
  --upec-text: #1F2933;
  --upec-muted: #647067;
  --upec-border: #DDE7E0;
  --upec-dark: #111827;
}

/* Fondo general */
html,
body,
#root {
  background: var(--upec-bg) !important;
  color: var(--upec-text) !important;
}

/* Contenedor principal */
#root > div {
  background: var(--upec-bg) !important;
  color: var(--upec-text) !important;
}

/* Barra roja superior vieja: ocultar o neutralizar */
body::before,
#root::before {
  background: var(--upec-yellow) !important;
}

/* LOGIN: tarjeta clara */
form,
form *,
div:has(input[type="password"]),
div:has(input[type="email"]) {
  color: var(--upec-text) !important;
}

/* Tarjeta que contiene login */
div:has(input[type="email"]):has(input[type="password"]) {
  background: var(--upec-white) !important;
  color: var(--upec-text) !important;
  border: 1px solid var(--upec-border) !important;
  box-shadow: 0 18px 45px rgba(0, 90, 45, 0.18) !important;
}

/* Título login */
div:has(input[type="email"]):has(input[type="password"]) h1,
div:has(input[type="email"]):has(input[type="password"]) h2,
div:has(input[type="email"]):has(input[type="password"]) p,
div:has(input[type="email"]):has(input[type="password"]) label {
  color: var(--upec-text) !important;
}

/* Inputs */
input,
textarea,
select {
  background: #FFFFFF !important;
  color: #1F2933 !important;
  -webkit-text-fill-color: #1F2933 !important;
  border: 1px solid var(--upec-green) !important;
  border-radius: 10px !important;
  caret-color: var(--upec-green) !important;
}

input::placeholder,
textarea::placeholder {
  color: #6B7280 !important;
  opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus {
  background: #FFFFFF !important;
  color: #1F2933 !important;
  -webkit-text-fill-color: #1F2933 !important;
  border-color: var(--upec-green-dark) !important;
  box-shadow: 0 0 0 3px rgba(0, 132, 61, 0.20) !important;
  outline: none !important;
}

/* Botones */
button {
  background: var(--upec-green) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

button:hover {
  background: var(--upec-green-dark) !important;
}

/* Botón Microsoft */
button:has(svg),
button[class*="microsoft"],
button[class*="office"] {
  background: var(--upec-green) !important;
  color: #FFFFFF !important;
}

/* Línea divisoria */
hr,
div[class*="border"] {
  border-color: var(--upec-border) !important;
}

/* Encabezados normales */
h1,
h2,
h3,
h4 {
  color: var(--upec-green-dark) !important;
}

/* Texto general */
p,
label,
small,
span {
  color: inherit !important;
}

/* Sidebar después de login */
aside,
[class*="sidebar"],
[class*="side"] {
  background: var(--upec-green-dark) !important;
  color: #FFFFFF !important;
}

aside *,
[class*="sidebar"] *,
[class*="side"] * {
  color: #FFFFFF !important;
}

/* Área principal */
main,
section,
article {
  background: var(--upec-bg) !important;
  color: var(--upec-text) !important;
}

/* Tarjetas generales */
.card,
.panel,
[class*="card"],
[class*="panel"] {
  background: #FFFFFF !important;
  color: var(--upec-text) !important;
  border: 1px solid var(--upec-border) !important;
  box-shadow: 0 8px 24px rgba(0, 90, 45, 0.10) !important;
}

/* Mensajes */
[class*="message"],
[class*="bubble"] {
  color: var(--upec-text) !important;
}

[class*="userMessage"],
.user-message,
.message-user {
  background: var(--upec-yellow-soft) !important;
  color: var(--upec-text) !important;
  border: 1px solid var(--upec-yellow) !important;
}

[class*="botMessage"],
.bot-message,
.message-bot,
[class*="assistantMessage"] {
  background: #EAF6EF !important;
  color: var(--upec-text) !important;
  border: 1px solid #B7D8C5 !important;
}

/* Preguntas rápidas */
[class*="chip"],
[class*="pill"],
[class*="suggestion"],
[class*="quick"] {
  background: var(--upec-green) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--upec-green-dark) !important;
}

/* Badges */
.badge,
[class*="badge"],
[class*="status"] {
  background: var(--upec-yellow) !important;
  color: #1F2933 !important;
}

/* Enlaces */
a {
  color: var(--upec-green-dark) !important;
}
/* ======================================================
   PANTALLA INTERNA CHAT - UPEC LIMPIO
   Aplica cuando ya existe el chat/textarea
====================================================== */

#root:has(textarea) {
  background: #F6FAF7 !important;
  color: #1F2933 !important;
}

/* Barra superior interna */
#root:has(textarea) [class*="bg-slate"],
#root:has(textarea) [class*="bg-gray-9"],
#root:has(textarea) [class*="bg-zinc-9"],
#root:has(textarea) [class*="bg-neutral-9"] {
  background-color: #005C2E !important;
  color: #FFFFFF !important;
}

/* Menú lateral */
#root:has(textarea) aside,
#root:has(textarea) [class*="sidebar"],
#root:has(textarea) [class*="side"] {
  background: linear-gradient(180deg, #005C2E, #003F20) !important;
  color: #FFFFFF !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Texto del menú lateral */
#root:has(textarea) aside *,
#root:has(textarea) [class*="sidebar"] *,
#root:has(textarea) [class*="side"] * {
  color: #FFFFFF !important;
}

/* Nombre del usuario y correo */
#root:has(textarea) aside p,
#root:has(textarea) aside span,
#root:has(textarea) aside small {
  color: #FFFFFF !important;
}

/* Tarjetas del historial */
#root:has(textarea) aside button,
#root:has(textarea) aside [class*="rounded"],
#root:has(textarea) [class*="sidebar"] button {
  background: #00843D !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

/* Botón activo / conversación seleccionada */
#root:has(textarea) aside button:hover,
#root:has(textarea) aside [class*="active"] {
  background: #FFD200 !important;
  color: #1F2933 !important;
}

/* Área principal */
#root:has(textarea) main,
#root:has(textarea) section,
#root:has(textarea) [class*="flex-1"],
#root:has(textarea) [class*="overflow"] {
  background: #F6FAF7 !important;
  color: #1F2933 !important;
}

/* Barra de preguntas rápidas */
#root:has(textarea) [class*="gap"] button,
#root:has(textarea) [class*="chip"],
#root:has(textarea) [class*="pill"] {
  background: #00843D !important;
  color: #FFFFFF !important;
  border: 1px solid #005C2E !important;
}

/* Burbuja del bot: ya no negra */
#root:has(textarea) [class*="assistant"],
#root:has(textarea) [class*="bot"],
#root:has(textarea) .bot-message,
#root:has(textarea) .message-bot {
  background: #EAF6EF !important;
  color: #1F2933 !important;
  border: 1px solid #B7D8C5 !important;
}

/* Burbujas oscuras que vienen del React compilado */
#root:has(textarea) [class*="bg-black"],
#root:has(textarea) [class*="bg-slate-950"],
#root:has(textarea) [class*="bg-slate-900"],
#root:has(textarea) [class*="bg-gray-900"],
#root:has(textarea) [class*="bg-zinc-900"],
#root:has(textarea) [class*="bg-neutral-900"] {
  background: #EAF6EF !important;
  color: #1F2933 !important;
  border: 1px solid #B7D8C5 !important;
}

/* Pero la barra inferior del input puede quedar verde oscuro */
#root:has(textarea) footer,
#root:has(textarea) [class*="bottom"],
#root:has(textarea) [class*="fixed"] {
  background: #005C2E !important;
  color: #FFFFFF !important;
}

/* Caja para escribir */
#root:has(textarea) textarea,
#root:has(textarea) input {
  background: #FFFFFF !important;
  color: #1F2933 !important;
  -webkit-text-fill-color: #1F2933 !important;
  border: 2px solid #00843D !important;
  border-radius: 12px !important;
}

#root:has(textarea) textarea::placeholder,
#root:has(textarea) input::placeholder {
  color: #6B7280 !important;
}

/* Botón enviar */
#root:has(textarea) button[type="submit"],
#root:has(textarea) button:has(svg) {
  background: #00843D !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
}

/* Texto dentro de burbujas */
#root:has(textarea) [class*="message"] *,
#root:has(textarea) [class*="bubble"] *,
#root:has(textarea) [class*="assistant"] * {
  color: inherit !important;
}

/* Hora del mensaje */
#root:has(textarea) [class*="text-xs"],
#root:has(textarea) [class*="text-sm"] {
  color: #647067 !important;
}

/* Header interno específico */
#root:has(textarea) header,
#root:has(textarea) nav {
  background: #005C2E !important;
  color: #FFFFFF !important;
  border-bottom: 4px solid #FFD200 !important;
}

#root:has(textarea) header *,
#root:has(textarea) nav * {
  color: #FFFFFF !important;
}