/* =========================================================
   MATI | Grupo Davissa — Premium Portal UI (Zoho Desk)
   - /newticket: 1 columna + card glass 3D
   - /myarea: 2 columnas glass + gap + legibilidad
   ========================================================= */
 
/* -------------------- 0) Base -------------------- */
html, body { height: 100% !important; }
* { box-sizing: border-box; }
 
:root{
  --mati-blue:#2E6FD8;
  --mati-navy:#0A2540;
  --mati-ink:#0B1B2B;
  --mati-glow: rgba(46,111,216,.22);
 
  /* Davissa accent (suave, para glow inferior) */
  --davissa-glow: rgba(139,189,35,0.10);
 
  /* Glass system */
  --glass-1: rgba(255,255,255,0.10);
  --glass-2: rgba(255,255,255,0.06);
  --hair:    rgba(255,255,255,0.14);
 
  --text-on-dark: rgba(255,255,255,0.92);
  --text-muted:   rgba(255,255,255,0.70);
}
 
/* =========================================================
   1) Fondo global premium (estable)
   ========================================================= */
body{
  background:
    radial-gradient(1200px 700px at 18% 10%, rgba(46,111,216,0.22) 0%, rgba(46,111,216,0.00) 58%),
    radial-gradient(900px 520px at 86% 14%, rgba(10,37,64,0.22) 0%, rgba(10,37,64,0.00) 58%),
    radial-gradient(700px 500px at 60% 120%, var(--davissa-glow) 0%, rgba(139,189,35,0.00) 52%),
    linear-gradient(180deg, var(--mati-navy) 0%, var(--mati-ink) 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}
 
/* Grain suave (global) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0, rgba(255,255,255,.12) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0, rgba(255,255,255,.10) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 7px);
  filter: blur(.2px);
}
 
/* =========================================================
   2) Quitar blancos de wrappers (sin romper componentes)
   ========================================================= */
main#mainContainer,
#layoutContainer,
.container,
.portal-container,
section,
main,
.Layout__twoColumn,
.Layout__oneColumn,
.Layout__layout1,
.Layout__layout2,
.commonStyle__positionRel,
.commonStyle__marginAuto{
  background: transparent !important;
}
 
/* =========================================================
   3) Header / barra superior (NO tocamos tu verde, solo el header)
   ========================================================= */
header, .hc-header, .portal-header{
  background: rgba(0,0,0,0.20) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
 
/* =========================================================
   4) NEW TICKET (/newticket)
   ========================================================= */
 
/* Layout 1 columna SOLO cuando está el form */
.Layout__twoColumn:has(form#ticketform_fields_container){
  display: flex !important;
  justify-content: center !important;
  gap: 0 !important;
}
.Layout__twoColumn:has(form#ticketform_fields_container) .Layout__layout2{
  display: none !important;
}
.Layout__twoColumn:has(form#ticketform_fields_container) .Layout__layout1{
  width: 100% !important;
}
 
/* Card glass 3D del formulario */
form#ticketform_fields_container,
#newTicketContainer form,
.ticket-form-container form,
.ticket-form form{
  position: relative;
  z-index: 2;
 
  max-width: 920px !important;
  margin: 52px auto 84px auto !important;
 
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78)) !important;
 
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
 
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
 
  box-shadow:
    0 0 0 1px rgba(10,37,64,0.10),
    0 18px 60px rgba(0,0,0,0.28),
    0 10px 24px rgba(0,0,0,0.14),
    0 0 38px var(--mati-glow) !important;
 
  padding: 38px 40px !important;
  transform: translateZ(0);
}
 
form#ticketform_fields_container::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 21px;
  pointer-events:none;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
form#ticketform_fields_container::after{
  content:"";
  position:absolute;
  top: 0; left: 0; right: 0;
  height: 160px;
  border-radius: 22px;
  pointer-events:none;
  background: radial-gradient(700px 160px at 20% 0%, rgba(46,111,216,0.20) 0%, rgba(46,111,216,0.00) 70%);
  opacity: .65;
}
 
@media (min-width: 769px){
  form#ticketform_fields_container:hover{
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px rgba(10,37,64,0.10),
      0 26px 80px rgba(0,0,0,0.32),
      0 12px 30px rgba(0,0,0,0.16),
      0 0 48px rgba(46,111,216,.26) !important;
  }
}
 
/* Tipografía form */
h1, .page-title, .ticket-title{
  color: var(--mati-navy) !important;
  letter-spacing: -0.6px !important;
  font-weight: 800 !important;
}
label, .form-label{
  font-size: 13px !important;
  font-weight: 650 !important;
  color: rgba(10,37,64,0.78) !important;
}
 
/* Inputs form */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea{
  width: 100% !important;
  background: rgba(255,255,255,0.88) !important;
  border: 1.5px solid rgba(10,37,64,0.12) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  min-height: 44px !important;
  transition: all 160ms ease !important;
  box-shadow: 0 1px 0 rgba(10,37,64,0.04) !important;
}
input:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(46,111,216,0.70) !important;
  box-shadow:
    0 0 0 4px rgba(46,111,216,0.14),
    0 10px 26px rgba(46,111,216,0.10) !important;
  transform: translateY(-1px);
}
 
/* Botón principal */
.btn-primary,
input[type="submit"],
button[type="submit"]{
  border: 0 !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
 
  background: linear-gradient(135deg, var(--mati-blue) 0%, var(--mati-navy) 100%) !important;
  box-shadow:
    0 10px 26px rgba(46,111,216,0.24),
    0 2px 8px rgba(0,0,0,0.10) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}
.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover{
  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;
  box-shadow:
    0 14px 34px rgba(46,111,216,0.28),
    0 4px 12px rgba(0,0,0,0.14) !important;
}
 
/* Dropdown Zoho */
.DropDown__main{ width: 100% !important; margin-top: 6px !important; margin-bottom: 16px !important; }
.DropDown__dropdown{
  width: 100% !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,255,255,0.82)) !important;
  border: 1.6px solid rgba(10,37,64,0.14) !important;
  border-radius: 14px !important;
  min-height: 46px !important;
  padding: 11px 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 1px 0 rgba(10,37,64,0.04),
    0 6px 18px rgba(10,37,64,0.06) !important;
  transition: transform 140ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}
.DropDown__selectedText{ font-size: 14px !important; color: var(--mati-navy) !important; font-weight: 550 !important; }
.DropDown__arrowOpen{ opacity: .75 !important; transition: transform 180ms ease !important; }
.DropDown__dropdown:hover{
  border-color: rgba(46,111,216,0.50) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    0 10px 24px rgba(46,111,216,0.14),
    0 6px 16px rgba(10,37,64,0.08) !important;
  transform: translateY(-1px);
}
.DropDown__dropdown[aria-expanded="true"] .DropDown__arrowOpen{
  transform: rotate(180deg) scale(.92) !important;
}
.DropDown__menu,
.DropDown__list{
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-radius: 14px !important;
  border: 1px solid rgba(10,37,64,0.08) !important;
  box-shadow:
    0 20px 55px rgba(0,0,0,0.24),
    0 8px 20px rgba(0,0,0,0.12) !important;
  overflow: hidden !important;
}
.DropDown__option{
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: var(--mati-navy) !important;
}
.DropDown__option:hover{ background: rgba(46,111,216,0.10) !important; }
.DropDown__option.selected{ background: rgba(46,111,216,0.16) !important; font-weight: 700 !important; }
 
@media (max-width: 768px){
  form#ticketform_fields_container{
    padding: 22px 18px !important;
    margin: 20px 12px 44px 12px !important;
    border-radius: 18px !important;
  }
  .DropDown__dropdown{ min-height: 50px !important; }
}
 
/* =========================================================
   5) MI ÁREA (/myarea) + DETALLE (ticketList / ticketDetail)
   - Recupera los “cuadros” glass y el gap
   - Evita overlays fantasma
   ========================================================= */
 
/* Scope: Mi área lista y detalle (sin tocar /newticket) */
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)),
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)){
  /* el grain se siente como velo aquí, lo bajamos */
}
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))::before,
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container))::before{
  opacity: .04 !important;
  mix-blend-mode: normal !important;
}
 
/* Layout 2 columnas + gap */
.Layout__twoColumn:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)),
.Layout__twoColumn:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)){
  display: flex !important;
  gap: 22px !important;
  align-items: flex-start !important;
}
 
/* Los 2 paneles vuelven a ser cards */
.Layout__twoColumn:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__layout1,
.Layout__twoColumn:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__layout2,
.Layout__twoColumn:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) .Layout__layout1,
.Layout__twoColumn:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) .Layout__layout2{
  background: linear-gradient(135deg, var(--glass-1), var(--glass-2)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 20px 55px rgba(0,0,0,0.32) !important;
  overflow: hidden !important;
}
 
/* Padding interno (no apretado) */
.Layout__twoColumn:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__layout1,
.Layout__twoColumn:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) .Layout__layout1{
  padding: 16px 16px !important;
}
.Layout__twoColumn:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__layout2,
.Layout__twoColumn:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) .Layout__layout2{
  padding: 16px 16px !important;
}
 
/* Texto legible (sin blanquear destructivo global) */
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer,
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer{
  color: var(--text-on-dark) !important;
}
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer small,
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer small,
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="meta"],
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="meta"],
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="sub"],
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="sub"],
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="time"],
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="time"]{
  color: var(--text-muted) !important;
}
 
/* Separadores suaves */
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer hr,
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer hr,
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="divider"],
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="divider"]{
  border-color: rgba(255,255,255,0.14) !important;
}
 
/* Responsive Mi área: 1 columna */
@media (max-width: 768px){
  .Layout__twoColumn:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)),
  .Layout__twoColumn:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)){
    display: block !important;
  }
  .Layout__twoColumn:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__layout1,
  .Layout__twoColumn:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__layout2,
  .Layout__twoColumn:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) .Layout__layout1,
  .Layout__twoColumn:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) .Layout__layout2{
    width: 100% !important;
    margin-bottom: 14px !important;
  }
}
 
/* =========================================================
   6) Footer: oculto total + sin hueco (incluye “Creado por Zoho Desk”)
   ========================================================= */
#footerContainer,
.Footer__footerBg,
.Footer__footerCopyright,
.Footer__footerCopyRight,
.Footer__container2{
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
main#mainContainer{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* =========================================================
   MATI — RECOVERY: Cards + Gap SOLO MI ÁREA
   (NO toca /newticket)
   Pegar AL FINAL, después de todo.
   ========================================================= */
 
/* Scope: Mi área (ticket list) y NO formulario */
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)){
 
  /* No más “lavados” globales por accidente */
  filter: none !important;
  opacity: 1 !important;
}
 
/* Asegura contenedor limpio */
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
#layoutContainer{
  background: transparent !important;
}
 
/* Layout real: 2 columnas + gap (como tu imagen 2) */
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
.Layout__twoColumn{
  display: flex !important;
  align-items: flex-start !important;
  gap: 22px !important;
}
 
/* Columna izquierda: crece normal */
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
.Layout__twoColumn .Layout__layout1{
  flex: 1 1 auto !important;
  min-width: 540px !important; /* evita que se aplaste */
  padding: 16px !important;
}
 
/* Columna derecha: ancho estable tipo “card” (ajustable) */
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
.Layout__twoColumn .Layout__layout2{
  flex: 0 0 360px !important;   /* <-- cámbialo a 380px si quieres */
  width: 360px !important;
  padding: 16px !important;
}
 
/* Cards glass (la parte que “se perdió”) */
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
.Layout__twoColumn .Layout__layout1,
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
.Layout__twoColumn .Layout__layout2{
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,0.32) !important;
  overflow: hidden !important;
}
 
/* Recupera separadores internos elegantes */
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
.Layout__twoColumn hr,
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
.Layout__twoColumn [class*="divider"]{
  border-color: rgba(255,255,255,0.14) !important;
}
 
/* Texto: NO blanquees todo. Solo base + secundarios */
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
#layoutContainer{
  color: rgba(255,255,255,0.92) !important;
}
 
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
#layoutContainer small,
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
#layoutContainer [class*="meta"],
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
#layoutContainer [class*="sub"],
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
#layoutContainer [class*="time"]{
  color: rgba(255,255,255,0.72) !important;
}
 
/* Responsive: 1 columna */
@media (max-width: 900px){
  body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
  .Layout__twoColumn{
    display: block !important;
  }
  body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
  .Layout__twoColumn .Layout__layout1,
  body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))
  .Layout__twoColumn .Layout__layout2{
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 14px !important;
  }
}
/* =========================================================
   MATI — LOGIN (/signin) Premium
   Objetivo: card glass/white elegante + inputs y CTA coherentes
   Scope: SOLO cuando existe #login_id o la caja de login
   Pegar AL FINAL del CSS
   ========================================================= */
 
/* -------- Scope duro a Login -------- */
body:has(#login_id),
body:has(.UserContainer__logInMainContainer),
body:has(.signin_box){
 
  /* Mantén tu fondo premium global (no lo cambio),
     solo aseguro que no haya “blancos” heredados */
  color: rgba(255,255,255,.92) !important;
}
 
/* Wrapper principal del login: centrado y con aire */
body:has(#login_id) .UserContainer__logInMainContainer,
body:has(#login_id) .signin_box,
body:has(#login_id) .signin_div{
  background: transparent !important;
}
 
/* Si Zoho mete layout 2 columnas, lo ordenamos con gap */
body:has(#login_id) #layoutContainer .Layout__twoColumn,
body:has(#login_id) #layoutContainer .Layout__twoColumn2,
body:has(#login_id) #layoutContainer [class*="twoColumn"]{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 28px !important;
}
 
/* -------- Card principal (form) -------- */
/* Estos selectores cubren el form típico de Zoho */
body:has(#login_id) form#login,
body:has(#login_id) form[name="login"],
body:has(#login_id) .signin_box,
body:has(#login_id) .signin_div form{
  max-width: 520px !important;
  width: 100% !important;
 
  margin: 48px 0 64px 0 !important;
  padding: 28px 28px !important;
 
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,255,255,0.80)) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 18px !important;
 
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
 
  box-shadow:
    0 0 0 1px rgba(10,37,64,0.10),
    0 22px 70px rgba(0,0,0,0.28),
    0 10px 26px rgba(0,0,0,0.16),
    0 0 40px rgba(46,111,216,.18) !important;
}
 
/* Título “¿Ya es miembro?” y textos del bloque izquierdo */
body:has(#login_id) .signin_box h1,
body:has(#login_id) .signin_box h2,
body:has(#login_id) .signin_box h3,
body:has(#login_id) .signin_div h1,
body:has(#login_id) .signin_div h2,
body:has(#login_id) .signin_div h3{
  color: rgba(10,37,64,0.92) !important;
  letter-spacing: -0.4px !important;
  font-weight: 800 !important;
}
 
/* Labels / ayudas dentro del form */
body:has(#login_id) label,
body:has(#login_id) .form-label,
body:has(#login_id) small{
  color: rgba(10,37,64,0.72) !important;
}
 
/* -------- Input email -------- */
body:has(#login_id) input#login_id,
body:has(#login_id) input[type="email"],
body:has(#login_id) input[type="text"]{
  width: 100% !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1.5px solid rgba(10,37,64,0.14) !important;
  border-radius: 14px !important;
 
  padding: 12px 14px !important;
  font-size: 16px !important;     /* evita zoom iOS */
  min-height: 46px !important;
 
  box-shadow: 0 1px 0 rgba(10,37,64,0.04) !important;
  transition: all 160ms ease !important;
}
 
body:has(#login_id) input#login_id:focus,
body:has(#login_id) input[type="email"]:focus,
body:has(#login_id) input[type="text"]:focus{
  outline: none !important;
  border-color: rgba(46,111,216,0.65) !important;
  box-shadow:
    0 0 0 4px rgba(46,111,216,0.14),
    0 10px 26px rgba(46,111,216,0.10) !important;
  transform: translateY(-1px);
}
 
/* -------- Botón “Siguiente” -------- */
body:has(#login_id) button#nextbtn,
body:has(#login_id) .signin_box button.btn,
body:has(#login_id) button.btn.blue,
body:has(#login_id) input[type="submit"]{
  width: auto !important;
 
  border: 0 !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
 
  font-weight: 800 !important;
  letter-spacing: .2px !important;
 
  background: linear-gradient(135deg, #2E6FD8 0%, #0A2540 100%) !important;
  color: rgba(255,255,255,0.95) !important;
 
  box-shadow:
    0 12px 30px rgba(46,111,216,0.24),
    0 4px 12px rgba(0,0,0,0.14) !important;
 
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}
 
body:has(#login_id) button#nextbtn:hover,
body:has(#login_id) button.btn.blue:hover,
body:has(#login_id) input[type="submit"]:hover{
  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;
  box-shadow:
    0 16px 38px rgba(46,111,216,0.28),
    0 6px 16px rgba(0,0,0,0.18) !important;
}
 
/* Texto dentro del botón (span “Siguiente”) */
body:has(#login_id) button#nextbtn span,
body:has(#login_id) button.btn span{
  color: rgba(255,255,255,0.95) !important;
}
 
/* -------- Panel derecho (Registrar / Restablecer / Agente) como glass card -------- */
body:has(#login_id) [class*="UserContainer__innerContainer2"],
body:has(#login_id) .UserContainer__innerContainer2,
body:has(#login_id) .UserContainer__innerContainer,
body:has(#login_id) [class*="innerContainer2"]{
  max-width: 560px !important;
  width: 100% !important;
 
  margin: 48px 0 64px 0 !important;
  padding: 22px 22px !important;
 
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 18px !important;
 
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
 
  box-shadow: 0 20px 55px rgba(0,0,0,0.30) !important;
}
 
/* Links (Registrarse / Restablecer / Iniciar sesión aquí) */
body:has(#login_id) a{
  color: rgba(139,190,35,0.95) !important; /* verde Davissa */
  font-weight: 700 !important;
  text-decoration: none !important;
}
body:has(#login_id) a:hover{
  text-decoration: underline !important;
}
 
/* -------- Responsive -------- */
@media (max-width: 1024px){
  body:has(#login_id) #layoutContainer .Layout__twoColumn,
  body:has(#login_id) #layoutContainer [class*="twoColumn"]{
    gap: 16px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}
 
@media (max-width: 768px){
  body:has(#login_id) #layoutContainer .Layout__twoColumn,
  body:has(#login_id) #layoutContainer [class*="twoColumn"]{
    display: block !important;
  }
 
  body:has(#login_id) form#login,
  body:has(#login_id) form[name="login"],
  body:has(#login_id) .signin_box{
    margin: 18px 12px 14px 12px !important;
    padding: 20px 18px !important;
    border-radius: 16px !important;
  }
 
  body:has(#login_id) [class*="innerContainer2"]{
    margin: 0 12px 40px 12px !important;
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }
}
/* =========================================================
   LOGIN — estilo "Nuevo Ticket" (solo login, nada más)
   Pegar AL FINAL del hotfix
   ========================================================= */
 
/* Scope: solo página donde existe el input de login */
body:has(#login_id) .signin_box,
body:has(#login_id) #signin_div,
body:has(#login_id) .signin_div,
body:has(#login_id) form#login,
body:has(#login_id) form[name="login"]{
  background: rgba(255,255,255,0.08) !important;   /* glass */
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 22px !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,0.35),
    0 0 0 1px rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
}
 
/* Ajuste de padding para que respire como el card del ticket */
body:has(#login_id) .signin_box,
body:has(#login_id) #signin_div,
body:has(#login_id) .signin_div{
  padding: 22px 22px 18px !important;
}
 
/* Tipografía y color dentro del login (para que no quede texto oscuro sobre glass) */
body:has(#login_id) .signin_box *,
body:has(#login_id) #signin_div *,
body:has(#login_id) .signin_div *{
  color: rgba(255,255,255,0.88);
}
 
/* Inputs: estilo pro (similar a formulario ticket) */
body:has(#login_id) input#login_id,
body:has(#login_id) input[type="email"],
body:has(#login_id) input[type="text"],
body:has(#login_id) input[type="password"]{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,0.92) !important;
  padding: 12px 14px !important;
  outline: none !important;
}
 
/* Placeholder */
body:has(#login_id) input::placeholder{
  color: rgba(255,255,255,0.55) !important;
}
 
/* Focus: glow sutil verde (marca) como ticket */
body:has(#login_id) input#login_id:focus,
body:has(#login_id) input[type="email"]:focus,
body:has(#login_id) input[type="text"]:focus,
body:has(#login_id) input[type="password"]:focus{
  border-color: rgba(139,190,35,0.55) !important;
  box-shadow: 0 0 0 4px rgba(139,190,35,0.14) !important;
}
 
/* Botón: que se sienta del mismo sistema (no azul random) */
body:has(#login_id) button#nextbtn,
body:has(#login_id) button.btn.blue,
body:has(#login_id) input[type="submit"]{
  background: rgba(139,190,35,0.92) !important; /* verde ticket */
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,0.95) !important;
  padding: 10px 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.28) !important;
}
 
body:has(#login_id) button#nextbtn:hover,
body:has(#login_id) button.btn.blue:hover,
body:has(#login_id) input[type="submit"]:hover{
  filter: brightness(1.04) !important;
}
 
/* Links del login: matar naranja SOLO en esta página */
body:has(#login_id) a,
body:has(#login_id) a:link,
body:has(#login_id) a:visited{
  color: rgba(139,190,35,0.95) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
body:has(#login_id) a:hover{
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
/* =====================================================
   LOGIN — GLASS EFFECT REAL (solo login)
   Scope exacto: signin_flow + módulo derecho
   ===================================================== */
 
 
/* ================================
   FORMULARIO LOGIN (IZQUIERDA)
   ================================ */
 
#signin_flow.signin_box{
 
  background: rgba(255,255,255,0.08) !important;
 
  border: 1px solid rgba(255,255,255,0.16) !important;
 
  border-radius: 20px !important;
 
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
 
  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.06) inset !important;
 
  padding: 24px !important;
 
}
 
 
/* INPUT */
 
#signin_flow.signin_box input{
 
  background: rgba(255,255,255,0.10) !important;
 
  border: 1px solid rgba(255,255,255,0.18) !important;
 
  border-radius: 14px !important;
 
  color: rgba(255,255,255,0.95) !important;
 
}
 
 
/* FOCUS glow verde sutil */
 
#signin_flow.signin_box input:focus{
 
  border-color: rgba(139,190,35,0.6) !important;
 
  box-shadow: 0 0 0 4px rgba(139,190,35,0.15) !important;
 
}
 
 
/* BOTÓN */
 
#signin_flow.signin_box button{
 
  background: rgba(139,190,35,0.95) !important;
 
  border-radius: 14px !important;
 
  border: 1px solid rgba(255,255,255,0.18) !important;
 
  box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important;
 
}
 
 
/* ================================
   MÓDULO DERECHO (REGISTRARSE / RESET)
   ================================ */
 
.UserContainer__innerContainer2{
 
  background: rgba(255,255,255,0.06) !important;
 
  border: 1px solid rgba(255,255,255,0.14) !important;
 
  border-radius: 20px !important;
 
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
 
  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.05) inset !important;
 
  padding: 28px !important;
 
}
 
 
/* LINKS — eliminar naranja Zoho */
 
.UserContainer__innerContainer2 a{
 
  color: rgba(139,190,35,0.95) !important;
 
  font-weight: 600 !important;
 
}
/* =========================
   LOGIN - Glass + equilibrio
   ========================= */
 
/* Contenedor general del bloque de login */
#signin_flow.signin_box,
#signin_flow .signin_box,
#signin_flow #signin_div,
#signin_flow form#login {
  background: transparent !important;
}
 
/* Caja blanca (la que hoy se ve como “cartulina”) */
#signin_flow.signin_box {
  width: min(420px, 92vw) !important;
  padding: 22px 22px !important;
 
  background: rgba(20, 45, 70, 0.34) !important;  /* glass */
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
 
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
 
  /* glow sutil (no discoteca) */
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(138, 178, 37, 0.10) inset,
    0 0 22px rgba(138, 178, 37, 0.10) !important;
}
 
/* Quita fondos blancos internos típicos */
#signin_flow .fieldcontainer,
#signin_flow .textbox,
#signin_flow .searchphrase,
#signin_flow .signin_head,
#signin_flow .signinbox,
#signin_flow .signin_div,
#signin_flow .signin_container {
  background: transparent !important;
}
 
/* Input email */
#signin_flow input#login_id.textbox,
#signin_flow input[type="email"],
#signin_flow input[type="text"] {
  width: 100% !important;
  box-sizing: border-box !important;
 
  background: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255,255,255,0.92) !important;
 
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 12px !important;
 
  padding: 12px 12px !important;
  outline: none !important;
 
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12) inset !important;
}
 
/* Placeholder */
#signin_flow input#login_id::placeholder {
  color: rgba(255,255,255,0.55) !important;
}
 
/* Focus (glow fino) */
#signin_flow input#login_id:focus,
#signin_flow input[type="email"]:focus,
#signin_flow input[type="text"]:focus {
  border-color: rgba(138, 178, 37, 0.55) !important;
  box-shadow:
    0 0 0 3px rgba(138, 178, 37, 0.18),
    0 0 0 1px rgba(0,0,0,0.10) inset !important;
}
 
/* Botón “Siguiente” */
#signin_flow button#nextbtn,
#signin_flow button.btn.blue,
#signin_flow input[type="submit"] {
  width: 100% !important;
  margin-top: 12px !important;
 
  background: rgba(138, 178, 37, 0.92) !important;
  color: rgba(255,255,255,0.96) !important;
 
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 12px !important;
 
  padding: 10px 14px !important;
  cursor: pointer !important;
 
  box-shadow:
    0 10px 26px rgba(0,0,0,0.20),
    0 0 18px rgba(138, 178, 37, 0.18) !important;
}
 
/* Hover/active: micro-vida */
#signin_flow button#nextbtn:hover,
#signin_flow button.btn.blue:hover,
#signin_flow input[type="submit"]:hover {
  filter: brightness(1.03) saturate(1.03) !important;
}
#signin_flow button#nextbtn:active,
#signin_flow button.btn.blue:active,
#signin_flow input[type="submit"]:active {
  transform: translateY(1px) !important;
}
 
/* =========================
   Links: adiós naranja
   ========================= */
#signin_flow a,
#signin_flow a:visited,
#signin_flow a:active {
  color: rgba(138, 178, 37, 0.92) !important;
  text-decoration: none !important;
}
#signin_flow a:hover {
  color: rgba(170, 210, 65, 0.95) !important;
  text-decoration: underline !important;
}
/* SOLO LOGIN: cambia este selector por el wrapper real del /signin */
body[data-page="signin"] /* <-- EJEMPLO, no lo uses si no existe */ {
 
}
 
/* Todo debe vivir debajo del wrapper real del login */
body[data-page="signin"] .signin_box {
  /* SOLO visual: background/border/shadow */
}