/*
 * ╔═══════════════════════════════════════════════════════════════════════╗
 * ║ atitlan-custom.css — Override de marca para Chatwoot self-host         ║
 * ║                                                                        ║
 * ║ Qué hace:                                                              ║
 * ║   - Aplica paleta Atitlán (rojo #B5252A) sobre todo el sistema azul    ║
 * ║   - Tipografía Poppins global                                          ║
 * ║   - Esconde Captain (IA built-in de Chatwoot, competimos con la nuestra)║
 * ║   - Esconde links a chatwoot.com / promos / billing                    ║
 * ║   - Login redesignado estilo Atitlán                                   ║
 * ║                                                                        ║
 * ║ Cómo carga:                                                            ║
 * ║   - Inyectado vía override del layout vueapp.html.erb (volumen Docker) ║
 * ║   - Servido por Caddy en /brand/atitlan.css                            ║
 * ║                                                                        ║
 * ║ Cómo iterar:                                                           ║
 * ║   - DevTools → Inspect del elemento → identificar clase ofensora       ║
 * ║   - Buscar el hex en /tmp/chatwoot-bundle.css (descargado vía curl)    ║
 * ║   - Mapear color a paleta Atitlán y agregar regla acá                  ║
 * ║                                                                        ║
 * ║ Historial:                                                             ║
 * ║   2026-05-03 — primera versión completa (paleta + Poppins + login)     ║
 * ╚═══════════════════════════════════════════════════════════════════════╝
 */

/* Poppins import removido 2026-06-12 - dashboard usa la Inter original de Chatwoot */

/* ============================================================
   1) Variables CSS — sistema "n-blue" de Chatwoot mapeado a rojo
   Chatwoot usa --blue-1..12 en formato RGB triplet. Override toda
   la escala azul → escala roja Atitlán equivalente.
   ============================================================ */
:root {
  --blue-1:  255 245 245;
  --blue-2:  251 233 234;
  --blue-3:  245 210 211;
  --blue-4:  239 184 185;
  --blue-5:  229 144 147;
  --blue-6:  216 106 110;
  --blue-7:  200 69 73;
  --blue-8:  181 37 42;
  --blue-9:  181 37 42;     /* PRIMARIO */
  --blue-10: 157 27 32;     /* hover */
  --blue-11: 130 20 25;
  --blue-12: 75 7 10;
  --border-blue: 181, 37, 42, .5;
  --border-blue-strong: 130 20 25;
}

/* ============================================================
   2) Clases con hex hardcodeado SIN var() — override directo
   ============================================================ */
.bg-n-brand          { background-color: #B5252A !important; }
.bg-n-brand\/10      { background-color: rgba(181, 37, 42, 0.10) !important; }
.bg-n-brand\/5       { background-color: rgba(181, 37, 42, 0.05) !important; }
.text-n-brand,
.hover\:text-n-brand:hover { color: #B5252A !important; }
.border-n-brand,
.border-t-n-brand,
.border-n-blue-9\/30,
.border-n-blue-border { border-color: #B5252A !important; }
.fill-n-blue-9       { fill: #B5252A !important; }
.stroke-n-blue-11    { stroke: #821419 !important; }

/* ============================================================
   3) Clases woot-* (sistema legacy, también con hex hardcoded)
   ============================================================ */
.bg-woot-25          { background-color: #FFF5F5 !important; }
.bg-woot-500,
button.bg-woot-500   { background-color: #B5252A !important; }
.text-woot-500,
.hover\:text-woot-500:hover { color: #B5252A !important; }
.text-woot-600       { color: #9D1B20 !important; }
.border-woot-100     { border-color: #EFB8B9 !important; }
.border-woot-500     { border-color: #B5252A !important; }
.border-woot-700     { border-color: #821419 !important; }
.focus-visible\:outline-woot-500:focus-visible { outline-color: #B5252A !important; }
button.bg-woot-500:hover, .bg-woot-500:hover { background-color: #9D1B20 !important; }

/* ============================================================
   4) TIPOGRAFÍA POPPINS — Chatwoot usa Inter con !important.
   Universal selector + !important para ganar especificidad.
   ============================================================ */
/* Override de fuente Poppins removido 2026-06-12 - se respeta Inter/InterDisplay nativa de Chatwoot */
/* Excepción: code/pre y mono se mantienen monospace */
code, pre, kbd, samp, .CodeMirror, .ProseMirror code, [class*="mono"] {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace !important;
}

/* ============================================================
   5) Esconder Captain (IA built-in de Chatwoot)
   Vamos a ofrecer nuestro propio agente IA, no el suyo.
   ============================================================ */
.i-woot-captain,
[class*="captain"],
[class*="Captain"],
a[href*="captain"],
.menu-item[data-test-id*="captain"] {
  display: none !important;
}

/* ============================================================
   6) Esconder upgrade / billing / chatwoot.com / promos
   ============================================================ */
a[href*="chatwoot.com"]:not([href*="atitlanrestycafe"]),
a[href*="chatwoot.help"],
a[href^="https://www.chatwoot.com"],
.upgrade-banner,
.subscription-section,
.billing-section,
.promo-banner,
.trial-banner,
[data-cy="upgrade-banner"],
[data-test-id="subscribe-cta"],
[data-test-id="upgrade-cta"],
[data-test-id*="upgrade"],
[data-test-id*="subscribe"] {
  display: none !important;
}

/* ============================================================
   7) Login page — redesign Atitlán
   La página de login usa la misma layout pero está en /auth/sign_in,
   /app/login, etc. Background blanco-hueso, card limpia, logo grande.
   ============================================================ */
body:has(.login-box),
body:has(.signup-box),
body:has(.auth-page),
body:has([class*="auth"]),
.auth-page,
.login-page,
.signup-page,
.confirm-email-page,
.reset-password-page {
  background: #FAF7F2 !important;
}

/* Card de login con borde sutil + sombra cálida */
.auth-page .login-box,
.auth-page form,
.signup-box,
.column .login-box,
[class*="auth"] form {
  background: #FFFFFF !important;
  border: 1px solid #F2EBDD !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(15, 12, 11, 0.06) !important;
  padding: 40px !important;
}

/* Inputs estilo Atitlán */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
  border: 1px solid #BFB3A0 !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: #B5252A !important;
  box-shadow: 0 0 0 3px rgba(181, 37, 42, 0.12) !important;
  outline: none !important;
}

/* Botón primario universal: rojo Atitlán con peso visual */
button.button:not(.secondary):not(.success):not(.warning):not(.alert):not(.smooth):not(.clear):not(.ghost),
button.button.primary,
button.button--primary,
.button--primary,
.btn-primary,
button[type="submit"]:not(.secondary):not(.clear) {
  background-color: #B5252A !important;
  border-color: #B5252A !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  border-radius: 10px !important;
}
button.button:not(.secondary):not(.success):not(.warning):not(.alert):not(.smooth):not(.clear):not(.ghost):hover,
button.button.primary:hover,
button.button--primary:hover,
.button--primary:hover,
.btn-primary:hover,
button[type="submit"]:not(.secondary):not(.clear):hover {
  background-color: #9D1B20 !important;
  border-color: #9D1B20 !important;
}

/* Logo en login: presencia mayor */
.auth-page .logo img,
.login-box .logo img,
.signup-box .logo img,
.auth-page img[src*="logo"] {
  max-width: 120px !important;
  height: auto !important;
  margin-bottom: 24px !important;
}

/* Títulos del login con peso editorial */
.auth-page h1,
.auth-page h2,
.login-box h1,
.login-box h2,
.signup-box h1,
.signup-box h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: #0F0C0B !important;
}

/* ============================================================
   8) Pequeños afinamientos transversales del dashboard
   ============================================================ */
.tabs-title.is-active a,
.tab--active,
[aria-selected="true"] {
  color: #B5252A !important;
  border-color: #B5252A !important;
}

input[type="checkbox"]:checked {
  background-color: #B5252A !important;
  border-color: #B5252A !important;
}

/* Links genéricos del dashboard */
.dashboard-app a:not(.button):not(.menu-item):not([class*="bg-"]) {
  color: #B5252A;
}