/* =========================================================================
   KONTAXES · Login Studio (ktx_login_studio) — CSS Adicional
   Modo: "HTML 100% personalizado"
   Cumple la Especificacion tecnica de Login Studio (v. julio 2026):
     - FORM = :is(.oe_login_form, .oe_signup_form, .oe_reset_password_form)
       para que funcione en login / registro / recuperar contrasena.
     - Boton primario con :not(.btn-link):not(.btn-secondary).
     - Estiliza FORM directamente como "tarjeta" (en modo custom no hay .card).
     - !important en toda regla que compita con Bootstrap/Odoo.
     - Logo referenciado por URL (subir como Extension y pegar la URL real).
   Pegar en: Tema -> CSS Adicional  (o subir como styles.css por Extensiones,
   type css / scope all / target head).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --kx-accent:   #D6A756;   /* dorado Kontaxes (accion principal) */
  --kx-accent-2: #c9973f;
  --kx-blue:     #4C7FE0;   /* azul (acentos secundarios) */
  --kx-purple:   #7C6BF0;   /* morado (acentos secundarios) */
  /* Logo del tema: URL FIJA de Login Studio. Sube el archivo en
     Tema -> Marca -> Logo; esta URL siempre apunta al logo del tema global.
     (Para un tema PERSONAL con logo distinto, usa la URL con su theme_id que
     Login Studio muestra junto al campo Logo de ese tema.) */
  --kx-logo: url('/ktx_login_studio/active_logo');
}
*{ box-sizing:border-box; }

/* ---------- Lienzo de pantalla completa ---------- */
html, body{ min-height:100%; }
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:56px 20px;
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  color:#eef4fa;
  background:
    radial-gradient(70% 55% at 88% 8%,  rgba(124,107,240,.20), transparent 60%),
    radial-gradient(65% 50% at 8% 92%,  rgba(76,127,224,.18),  transparent 60%),
    radial-gradient(120% 90% at 50% -10%, #17304c 0%, #10203a 42%, #0a1424 100%);
  position:relative;
  overflow-x:hidden;
}

/* Trama de puntos sutil (el movimiento fuerte lo da el canvas de script.js) */
body::after{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:32px 32px; opacity:.5;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 42%, #000, transparent 90%);
          mask-image:radial-gradient(75% 65% at 50% 42%, #000, transparent 90%);
}

/* Lienzo 3D inyectado por script.js */
#kx-canvas{
  position:fixed; inset:0; z-index:0; width:100%; height:100%;
  display:block; pointer-events:none;
}

/* ======================================================================
   IMPORTANTE: los contenedores de Odoo (#wrapwrap, main, .container...)
   traen fondo propio OPACO que tapa el canvas 3D. Se fuerzan transparentes
   para que el fondo animado vuelva a verse a traves de ellos.
   ====================================================================== */
html, body,
#wrapwrap, #wrapwrap > main, #wrapwrap > main > *,
.o_web_client, .o_action_manager,
.oe_login_container, .oe_website_login_container,
.container, .container-fluid,
.o_login_layout, .o_login_page,
div[class*="login"]{
  background-color:transparent !important;
  background-image:none !important;
}
/* El degradado + puntos van SOLO en el body (capa de fondo real) */
body{
  background:
    radial-gradient(70% 55% at 88% 8%,  rgba(124,107,240,.20), transparent 60%),
    radial-gradient(65% 50% at 8% 92%,  rgba(76,127,224,.18),  transparent 60%),
    radial-gradient(120% 90% at 50% -10%, #17304c 0%, #10203a 42%, #0a1424 100%) !important;
}

/* Todo el contenido de login por encima del canvas */
#wrapwrap, .oe_website_login_container,
.oe_login_form, .oe_signup_form, .oe_reset_password_form,
.kx-brand, .kx-footer{ position:relative; z-index:5; }

/* ---------- Bloque de marca (header.html) — flota sobre el formulario ---------- */
.kx-brand{
  width:100%; max-width:428px; margin:0 auto 20px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:13px;
  animation:kx-fadedown .7s ease .5s both;
}
.kx-badge{
  width:66px; height:66px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(214,167,86,.20), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 34px -12px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12);
  animation:kx-float 5s ease-in-out infinite;
}
.kx-badge::before{
  content:''; width:36px; height:36px;
  background:var(--kx-logo) center/contain no-repeat;
}
.kx-title{
  margin:0; font-family:'Archivo', sans-serif; font-weight:700;
  font-size:24px; letter-spacing:-0.01em; color:#f7fafc;
}
.kx-sub{ margin:6px 0 0; font-size:13.5px; color:#94a9bb; line-height:1.5; }
.kx-sub span{ color:var(--kx-accent); font-weight:600; }

@keyframes kx-fadedown{ from{opacity:0; transform:translateY(-14px);} to{opacity:1; transform:translateY(0);} }
@keyframes kx-slideup { from{opacity:0; transform:translateY(24px);}  to{opacity:1; transform:translateY(0);} }
/* Entrada del formulario: rebote + zoom hacia adelante */
@keyframes kx-zoombounce{
  0%{   opacity:0; transform:scale(.62) translateY(26px); }
  55%{  opacity:1; transform:scale(1.06) translateY(0); }
  74%{  transform:scale(.975); }
  88%{  transform:scale(1.012); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes kx-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* ======================================================================
   TARJETA = el propio formulario de Odoo.
   En modo "HTML 100% personalizado" NO hay .card propio: se estiliza el
   grupo FORM directamente. La marca (.kx-brand) flota encima por margin,
   no por un <div> compartido (evita la superposicion de texto).
   ====================================================================== */
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form){
  width:100% !important; max-width:428px !important; margin:0 auto !important;
  padding:34px 34px 30px !important;
  border-radius:22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    rgba(13,28,44,.42) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter:blur(16px) !important;
          backdrop-filter:blur(16px) !important;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08) !important;
  animation:kx-zoombounce .8s cubic-bezier(.34,1.4,.5,1) .68s both !important;
  transform-origin:50% 40% !important;
}

/* Carga escalonada de los elementos internos del formulario (tras el form) */
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) > *{
  animation:kx-fieldin .5s ease both !important;
}
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) > *:nth-child(1){ animation-delay:1.02s !important; }
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) > *:nth-child(2){ animation-delay:1.10s !important; }
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) > *:nth-child(3){ animation-delay:1.18s !important; }
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) > *:nth-child(4){ animation-delay:1.26s !important; }
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) > *:nth-child(5){ animation-delay:1.34s !important; }
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) > *:nth-child(n+6){ animation-delay:1.42s !important; }
@keyframes kx-fieldin{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* ======================================================================
   MARCA POR CSS (respaldo robusto): si Login Studio NO inyecta header.html
   / footer.html, la marca se pinta como pseudo-elementos del formulario.
   El guard body:not(:has(.kx-brand)) evita duplicar cuando SI se inyectan.
   ====================================================================== */
body:not(:has(.kx-brand)) :is(.oe_login_form, .oe_signup_form, .oe_reset_password_form)::before{
  content:"Bienvenido de vuelta";
  display:block !important; text-align:center !important;
  padding-top:78px !important; margin:0 0 4px !important;
  background:var(--kx-logo) top center / 56px 56px no-repeat !important;
  font-family:'Archivo', sans-serif !important; font-weight:700 !important;
  font-size:23px !important; letter-spacing:-0.01em !important; color:#f7fafc !important;
  animation:kx-float 5s ease-in-out infinite !important;
}
/* Subtitulo: pseudo del primer campo (queda justo bajo el titulo) */
body:not(:has(.kx-brand)) :is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) .field-login::before,
body:not(:has(.kx-brand)) :is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) .field-password:first-child::before{
  content:"Accede a Odoo de Kontaxes";
  display:block !important; text-align:center !important;
  margin:0 0 18px !important; font-size:13.5px !important; font-weight:500 !important;
  color:#94a9bb !important; letter-spacing:.01em !important; text-transform:none !important;
}
/* Pie por CSS (respaldo) */
body:not(:has(.kx-footer)) .oe_login_buttons::after{
  content:"Portal seguro · Potenciado por Odoo";
  display:block !important; text-align:center !important;
  margin:14px 0 0 !important; padding-top:16px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  font-size:12px !important; color:#7f95a7 !important; letter-spacing:.02em !important;
}

/* ---------- Campos ---------- */
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) .form-group,
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) .field-login,
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) .field-password,
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) .mb-3{
  display:flex !important; flex-direction:column !important; gap:8px !important;
  margin-bottom:16px !important;
}
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) label{
  font-size:11.5px !important; font-weight:600 !important; letter-spacing:.09em !important;
  text-transform:uppercase !important; color:#8ba0b2 !important; margin:0 !important;
}
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) input.form-control,
#login, #password, #confirm_password{
  width:100% !important; padding:14px 16px !important; border-radius:12px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(6,16,26,.60) !important;
  color:#f2f7fb !important; font-size:15px !important; font-family:inherit !important;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) input.form-control::placeholder{
  color:#5f7385 !important;
}
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) input.form-control:focus,
#login:focus, #password:focus, #confirm_password:focus{
  outline:none !important; border-color:var(--kx-accent) !important;
  box-shadow:0 0 0 4px rgba(214,167,86,.14) !important;
  background:rgba(6,16,26,.80) !important;
}

/* Boton del ojo (mostrar contrasena): pequeno, NUNCA a ancho completo */
.o_login_password_toggle,
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) .input-group .btn{
  width:auto !important; padding:0 12px !important;
  background:transparent !important; border:none !important; box-shadow:none !important;
  color:#8ba0b2 !important;
}
.o_login_password_toggle .fa{ color:#8ba0b2 !important; }

/* ---------- Enlaces auxiliares (a.btn-link): "Restablecer contrasena",
   "¿No tienes cuenta?", "Volver a inicio de sesion" — texto BLANCO perceptible,
   NUNCA botones. Incluye enlaces fuera del formulario (back-to-login). ---------- */
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) a.btn-link,
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) a.btn-secondary,
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) label a,
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) .float-end,
.oe_login_buttons a,
a.btn-link[href*="/web/login"],
a[href*="/web/login"].btn-link{
  float:none !important; position:static !important;
  display:inline !important; width:auto !important;
  padding:0 !important; margin:0 !important;
  background:none !important; box-shadow:none !important; border:none !important;
  border-radius:0 !important; text-align:left !important;
  font:600 12.5px/1.5 'Manrope', sans-serif !important;
  color:#eef4fa !important; text-decoration:none !important;
  letter-spacing:0 !important; text-transform:none !important;
}
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) a.btn-link:hover,
.oe_login_buttons a:hover,
a[href*="/web/login"].btn-link:hover{ color:var(--kx-accent) !important; opacity:1 !important; }

/* Recordarme */
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) .form-check{
  display:flex !important; align-items:center !important; gap:9px !important;
  margin:4px 0 6px !important; font-size:13px !important; color:#a8bccc !important;
}
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) .form-check-input,
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) input[type="checkbox"]{
  width:17px !important; height:17px !important;
  accent-color:var(--kx-accent) !important; cursor:pointer !important; margin:0 !important;
}
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) .form-check-label{
  text-transform:none !important; letter-spacing:0 !important;
  color:#a8bccc !important; font-weight:500 !important; font-size:13px !important;
}

/* ======================================================================
   BOTONES
   Base: TODO .btn = fantasma azul/morado (evita el exceso de dorado).
   Solo el boton PRIMARIO de envio se vuelve dorado, y excluye .btn-link /
   .btn-secondary (regla 4: el boton "superusuario" es submit + .btn-link).
   ====================================================================== */
.oe_login_buttons{ display:flex !important; flex-direction:column !important; gap:10px !important; margin-top:8px !important; }

:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) .btn,
.oe_login_buttons .btn{
  width:100% !important; margin:0 !important; padding:13px 18px !important;
  border-radius:12px !important;
  font-family:'Archivo', sans-serif !important; font-weight:600 !important;
  font-size:14px !important; letter-spacing:.01em !important;
  text-align:center !important; text-decoration:none !important; cursor:pointer !important;
  color:#d3deea !important;
  background:linear-gradient(180deg, rgba(76,127,224,.14), rgba(124,107,240,.12)) !important;
  border:1px solid rgba(124,107,240,.30) !important;
  box-shadow:none !important;
  transition:background .18s ease, border-color .18s ease, transform .15s ease !important;
}
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) .btn:hover{
  background:linear-gradient(180deg, rgba(76,127,224,.24), rgba(124,107,240,.20)) !important;
  border-color:rgba(124,107,240,.55) !important;
}

/* Restaurar el enlace a.btn-link a "texto" tras la base de botones (gana por orden) */
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) a.btn-link{
  width:auto !important; padding:0 !important;
  background:none !important; border:none !important;
  color:#eef4fa !important; font-size:12.5px !important;
}

/* Boton PRIMARIO (Iniciar sesion / Registrarse / Restablecer) = dorado.
   Excluye .btn-link y .btn-secondary. */
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) button[type="submit"]:not(.btn-link):not(.btn-secondary),
.oe_login_buttons .btn-primary:not(.btn-link):not(.btn-secondary){
  color:#0a1622 !important; border:none !important;
  background:linear-gradient(180deg, var(--kx-accent), var(--kx-accent-2)) !important;
  box-shadow:0 14px 34px -14px rgba(214,167,86,.6) !important;
  padding:15px 20px !important; font-size:15px !important;
}
:is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) button[type="submit"]:not(.btn-link):not(.btn-secondary):hover{
  filter:brightness(1.06) !important; transform:translateY(-1px) !important;
}

/* Llave de acceso (passkey) — icono heredado */
.o_webauthn_login .fa, .o_webauthn_login svg{ color:#9db8d6 !important; fill:#9db8d6 !important; }

/* ---------- Alertas ---------- */
.alert-danger{
  display:flex !important; align-items:center !important; gap:8px !important;
  margin-bottom:16px !important; padding:12px 14px !important; border-radius:12px !important;
  font-size:12.5px !important; line-height:1.4 !important; color:#f0b6b6 !important;
  background:rgba(224,133,133,.12) !important; border:1px solid rgba(224,133,133,.30) !important;
}
.alert-success, .alert-warning{
  color:#a9e2c4 !important; background:rgba(91,191,143,.12) !important;
  border:1px solid rgba(91,191,143,.30) !important;
  border-radius:12px !important; padding:12px 14px !important; margin-bottom:16px !important;
  font-size:12.5px !important;
}

/* ---------- Pie de marca (footer.html) — flota bajo el formulario ---------- */
.kx-footer{
  width:100% !important; max-width:428px !important; margin:18px auto 0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important; font-size:12px !important; color:#7f95a7 !important;
  letter-spacing:.02em !important; animation:kx-fadedown .7s ease 1.5s both;
}
.kx-footer b{ color:#b9cad8 !important; font-weight:600 !important; }
.kx-footer .kx-dot{ width:6px; height:6px; border-radius:50%; background:#6f8598; display:inline-block; }

/* Enlace al sitio web (footer.html) */
.kx-sitelink{
  width:100% !important; text-align:center !important; margin:8px auto 0 !important;
  animation:kx-fadedown .7s ease 1.65s both;
}
.kx-sitelink a{
  font-family:'Archivo', sans-serif !important; font-size:12.5px !important;
  font-weight:600 !important; letter-spacing:.08em !important;
  color:#9fb4c6 !important; text-decoration:none !important;
  transition:color .2s ease !important;
}
.kx-sitelink a:hover{ color:var(--kx-accent) !important; }

/* ======================================================================
   GLOBO DE ATENCION AL CLIENTE -> WhatsApp (+502 3517 4713)
   ====================================================================== */
.kx-wa{
  position:fixed !important; right:24px; bottom:24px; z-index:60 !important;
  display:flex !important; align-items:center !important; gap:0 !important;
  height:60px; padding:0 15px; border-radius:32px;
  background:linear-gradient(160deg, #29c74d, #15a63a) !important;
  color:#fff !important; text-decoration:none !important;
  box-shadow:0 14px 34px -10px rgba(18,140,60,.7), 0 2px 8px rgba(0,0,0,.3) !important;
  overflow:hidden; white-space:nowrap; max-width:60px;
  transition:max-width .35s cubic-bezier(.3,.8,.3,1), box-shadow .2s ease, transform .2s ease;
  animation:kx-wa-in .6s cubic-bezier(.34,1.4,.5,1) 1.9s both;
}
.kx-wa:hover{ max-width:260px; transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(18,140,60,.8) !important; }
.kx-wa-icon{ flex:0 0 auto; margin-left:0; }
.kx-wa-label{
  font-family:'Archivo', sans-serif !important; font-weight:600 !important;
  font-size:14px !important; letter-spacing:.01em !important;
  padding-left:11px; padding-right:6px; opacity:0; transition:opacity .3s ease .05s;
}
.kx-wa:hover .kx-wa-label{ opacity:1; }
.kx-wa-pulse{
  position:absolute; left:15px; top:50%; width:30px; height:30px;
  transform:translateY(-50%); border-radius:50%;
  box-shadow:0 0 0 0 rgba(41,199,77,.6);
  animation:kx-wa-pulse 2.4s ease-out infinite;
}
@keyframes kx-wa-pulse{
  0%{   box-shadow:0 0 0 0 rgba(41,199,77,.55); }
  70%{  box-shadow:0 0 0 18px rgba(41,199,77,0); }
  100%{ box-shadow:0 0 0 0 rgba(41,199,77,0); }
}
@keyframes kx-wa-in{ from{opacity:0; transform:scale(.4) translateY(20px);} to{opacity:1; transform:scale(1) translateY(0);} }
@media (max-width:480px){ .kx-wa{ right:16px; bottom:16px; } }

/* ======================================================================
   OVERLAY DE TRANSICION DE LOGIN EXITOSO (lo controla script.js)
   ====================================================================== */
.kx-success{
  position:fixed !important; inset:0 !important; z-index:9999 !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important; gap:26px !important;
  text-align:center !important; color:#f2f7fb !important;
  background:radial-gradient(120% 90% at 50% 40%, rgba(19,40,64,.86), rgba(6,14,26,.96)) !important;
  -webkit-backdrop-filter:blur(10px) !important; backdrop-filter:blur(10px) !important;
  opacity:0; animation:kx-fade .45s ease forwards;
}
.kx-success-ring{
  width:96px; height:96px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(214,167,86,.22), rgba(255,255,255,.05));
  border:1px solid rgba(214,167,86,.5);
  box-shadow:0 0 46px -6px rgba(214,167,86,.55);
  animation:kx-pop .5s cubic-bezier(.34,1.5,.5,1) .1s both;
}
.kx-success-ring svg{ width:44px; height:44px; }
.kx-success-ring .kx-check{
  stroke:var(--kx-accent); stroke-width:3.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:40; stroke-dashoffset:40;
  animation:kx-draw .5s ease .45s forwards;
}
.kx-success h2{
  margin:0; font-family:'Archivo', sans-serif; font-weight:700;
  font-size:30px; letter-spacing:-0.01em;
  animation:kx-rise .55s cubic-bezier(.2,.7,.2,1) .35s both;
}
.kx-success h2 span{ color:var(--kx-accent); }
.kx-success p{
  margin:0; font-size:15px; color:#a8bccc;
  animation:kx-rise .55s cubic-bezier(.2,.7,.2,1) .5s both;
}
.kx-success-bar{
  width:180px; height:4px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.12);
  animation:kx-rise .55s ease .6s both;
}
.kx-success-bar i{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--kx-accent), #f0c987);
  animation:kx-load 1.25s cubic-bezier(.5,0,.2,1) .65s forwards;
}
@keyframes kx-fade{ to{opacity:1;} }
@keyframes kx-pop{ from{opacity:0; transform:scale(.5);} to{opacity:1; transform:scale(1);} }
@keyframes kx-draw{ to{stroke-dashoffset:0;} }
@keyframes kx-rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
@keyframes kx-load{ to{width:100%;} }

/* ---------- Ocultar menu / pie nativos del Sitio Web (respaldo del interruptor
   del tema "Ocultar menu y pie de pagina"). Descomenta si aun se ven: ---------- */
/* header#top, footer#bottom{ display:none !important; } */

/* ---------- Responsive ---------- */
@media (max-width:480px){
  :is(.oe_login_form, .oe_signup_form, .oe_reset_password_form){
    padding:28px 22px 24px !important; border-radius:18px !important;
  }
  .kx-title{ font-size:21px; }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  .kx-brand, .kx-footer, .kx-sitelink, .kx-wa, .kx-wa-pulse,
  :is(.oe_login_form, .oe_signup_form, .oe_reset_password_form),
  :is(.oe_login_form, .oe_signup_form, .oe_reset_password_form) > *{
    animation:none !important;
  }
}