/* ==========================================================================
   TaeBot · identidad de marca para el CRM
   Manual: #175993 azul · #59A8C6 azul claro · #C2E9F0 celeste · #000002 negro
   Tipografia: Montserrat
   Se sirve desde /brand/ y se carga desde el layout del CRM.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('/brand/fonts/Montserrat-Variable.woff2') format('woff2'),
       url('/brand/fonts/Montserrat-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --tae-azul: #175993;
  --tae-azul-oscuro: #0f4573;
  --tae-azul-claro: #59a8c6;
  --tae-celeste: #c2e9f0;
  --tae-negro: #000002;
  --tae-texto: #16232e;
  --tae-suave: #4e7891;
  --tae-borde: #dbe8ef;
}

/* ---------------------------------------------------------------- tipografia */
/* El !important y el "html body" son necesarios: Chatwoot carga sus utilidades
   DESPUES de esta hoja y su propio font-family del cuerpo gana por orden; con
   mas especificidad y !important, gana la marca. Se excluye el codigo para no
   romper bloques monoespaciados. */
html body,
html body *:not(pre):not(code):not(kbd):not(samp) {
  font-family: 'Montserrat', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ------------------------------------------- color de marca (tema del CRM) */
.bg-n-brand { background-color: var(--tae-azul) !important; }
.hover\:bg-n-brand:hover { background-color: var(--tae-azul-oscuro) !important; }
.text-n-brand { color: var(--tae-azul) !important; }
.hover\:text-n-brand:hover { color: var(--tae-azul-oscuro) !important; }
.border-n-brand { border-color: var(--tae-azul) !important; }
.hover\:border-n-brand:hover { border-color: var(--tae-azul-oscuro) !important; }
.focus\:border-n-brand:focus { border-color: var(--tae-azul) !important; }
.focus\:ring-n-brand:focus { --tw-ring-color: rgba(23, 89, 147, .35) !important; }
.ring-n-brand { --tw-ring-color: rgba(23, 89, 147, .35) !important; }
.outline-n-brand { outline-color: var(--tae-azul) !important; }
.from-n-brand { --tw-gradient-from: var(--tae-azul) !important; }

/* ------------------------------------------------- isotipo en la barra gris */
.tae-isotipo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

/* ========================================================================
   PORTADA · pantalla de acceso
   ======================================================================== */
/* El fondo de marca va en un pseudo-elemento del tamano de la VENTANA.
   Puesto directamente en el body, el degradado se posiciona respecto de su caja
   de relleno (background-origin: padding-box) y deja una franja blanca arriba:
   eso era la "barra blanca" que se veia en la portada. */
body.tae-login::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 560px at 84% -12%, rgba(194, 233, 240, .9), rgba(194, 233, 240, 0) 62%),
    radial-gradient(760px 420px at -10% 108%, rgba(89, 168, 198, .18), rgba(89, 168, 198, 0) 60%),
    linear-gradient(168deg, #ffffff 0%, #f5fbfd 46%, #e6f5fa 100%);
}

/* Encabezado de marca: dentro del contenedor de la aplicacion y en el flujo
   normal. Fijo respecto de la ventana se encimaba con el titulo en pantallas
   bajas, y ademas dejaba sin fondo la franja del margen del cuerpo. */
.tae-login-head {
  text-align: center;
  margin: 0 auto 20px;
  max-width: 92vw;
}

.tae-login-head img.tae-login-logo {
  width: min(300px, 66vw);
  height: auto;
  display: inline-block;
}

/* Se usa desde el guion para retirar piezas que sobran (el logotipo de
   Chatwoot, que se dibuja sin imagen cuando no hay LOGO configurado). */
.tae-oculto {
  display: none !important;
}

.tae-login-lema {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--tae-azul-claro);
}

.tae-login-sub {
  margin: 14px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--tae-texto);
}

.tae-login-ayuda {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--tae-suave);
}

/* Titulo de la pantalla (el original decia "Iniciar sesion en Chatwoot") */
body.tae-login h1,
body.tae-login h2 {
  color: var(--tae-azul) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}

/* Tarjeta del formulario */
body.tae-login .tae-card {
  background-color: #ffffff !important;
  border: 1px solid var(--tae-borde) !important;
  border-top: 5px solid var(--tae-azul) !important;
  border-radius: 18px !important;
  box-shadow:
    0 26px 60px -28px rgba(23, 89, 147, .45),
    0 2px 8px rgba(23, 89, 147, .06) !important;
}

/* Campos y boton: se aplican a toda la pantalla de acceso, no solo cuando la
   tarjeta existe (en pantallas angostas Chatwoot no dibuja tarjeta). */
body.tae-login input[type='email'],
body.tae-login input[type='password'],
body.tae-login input[type='text'] {
  background-color: #ffffff !important;
  border: 1px solid var(--tae-borde) !important;
  border-radius: 10px !important;
}

body.tae-login input:focus {
  border-color: var(--tae-azul) !important;
  box-shadow: 0 0 0 3px rgba(23, 89, 147, .16) !important;
  outline: none !important;
}

body.tae-login button[type='submit'] {
  background-color: var(--tae-azul) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
}

body.tae-login button[type='submit']:hover {
  background-color: var(--tae-azul-oscuro) !important;
}

body.tae-login a {
  color: var(--tae-azul) !important;
}

body.tae-login a:hover {
  color: var(--tae-azul-oscuro) !important;
}

/* Pie de la portada. Va en el flujo (no fijo): fijo se encimaba con la tarjeta
   en pantallas de poca altura. */
.tae-login-pie {
  margin: 26px auto 0;
  max-width: 92vw;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tae-suave);
  pointer-events: none;
}

.tae-login-pie strong {
  color: var(--tae-azul);
  font-weight: 600;
}

/* Pantallas bajas: la marca se compacta para dejar sitio al formulario. */
@media (max-height: 700px) {
  .tae-login-head {
    margin-bottom: 12px;
  }

  .tae-login-head img.tae-login-logo {
    width: min(200px, 50vw);
  }
}

@media (max-width: 480px) {
  .tae-login-head img.tae-login-logo {
    width: min(250px, 68vw);
  }

  .tae-login-lema {
    letter-spacing: .24em;
    font-size: 11px;
  }

  .tae-login-pie {
    font-size: 11px;
    bottom: 10px;
  }
}

/* Solo opacidad: una animacion que tocara "transform" pisaria el
   translateX(-50%) con el que se centra el encabezado. */
@media (prefers-reduced-motion: no-preference) {
  .tae-login-head,
  body.tae-login .tae-card {
    animation: tae-entra .45s ease-out both;
  }

  @keyframes tae-entra {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}