/* ===== CUBITS · Estilos base ===== */
:root{
  --morado:#4f1fb0; --morado2:#5b1fb8; --morado-cl:#a06bff;
  --cel1:#2bbdf0; --cel2:#159bd8;
  --tinta:#0a1628;
  --txt:#eaf3ff; --txt2:#9fb2cc;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  min-height:100vh;
  background:linear-gradient(135deg,rgba(8,13,28,.74),rgba(12,20,44,.68)),
             url('/img/fondo_ingreso.jpg') center/cover no-repeat fixed;
  color:var(--txt);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}

/* --- Tarjeta de ingreso --- */
.login-card{
  background:rgba(14,22,40,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(123,63,240,.35);
  border-radius:18px;
  padding:26px 22px;
  width:min(92vw,295px);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.login-logo{text-align:center;margin-bottom:5px}
.login-logo b{
  /* "ERP Cuantico Cubits" en UNA linea dentro de la tarjeta (295px menos el padding lateral).
     A 21px mide ~215px: entra con aire a los dos lados y no se pega al borde derecho. */
  font-size:21px;font-weight:800;letter-spacing:0;white-space:nowrap;
  background:linear-gradient(135deg,var(--morado-cl),var(--morado));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.login-sub{text-align:center;color:var(--txt2);font-size:10.5px;margin-bottom:9px;font-weight:600;line-height:1.6}
/* "con Inteligencia Artificial": cierra el bloque de modulos, un punto mas claro */
.login-ia{display:inline-block;margin-top:2px;color:#a06bff;font-weight:700;letter-spacing:.2px}
.login-linea{height:3px;background:linear-gradient(90deg,#a06bff,#5b1fb8);border-radius:2px;margin:0 0 15px}
.login-olvido{display:block;text-align:center;margin-top:11px;color:#7db8e6;font-size:11.5px;font-weight:600;cursor:pointer;text-decoration:none}
.login-olvido:hover{text-decoration:underline;color:#a06bff}

.campo{margin-bottom:11px}
.campo label{display:block;font-size:11px;color:var(--txt2);margin-bottom:4px;font-weight:600}
.campo input{
  width:100%;padding:8px 11px;border-radius:9px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:#fff;font-size:13px;font-family:inherit;outline:none;
  transition:border-color .15s;
}
.campo input:focus{border-color:var(--cel1)}
/* Ojito para ver la contrasena: va DENTRO del campo, a la derecha. */
.campo.pass{position:relative}
.campo.pass input{padding-right:38px}
.campo.pass .ojito{position:absolute;right:5px;bottom:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:#7da3d0;cursor:pointer;padding:0;border-radius:8px;transition:color .15s,background .15s}
.campo.pass .ojito:hover{color:#a06bff;background:rgba(160,107,255,.10)}
.campo.pass .ojito.on{color:#a06bff}

/* ═══ AUTOCOMPLETAR — REGLA PARA TODO EL SISTEMA ═══════════════════════════════════════════
   Cuando el navegador rellena un campo guardado le pinta SUS colores (amarillo/celeste) y rompe
   el diseño. Esta regla vale para TODA pantalla, clara u oscura: el campo conserva SIEMPRE su
   propio fondo y su propio texto. No se fuerza ningún color —eso obligaba a ir parchando pantalla
   por pantalla—: se le quita al navegador la posibilidad de pintar, aplazando su transición. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-text-fill-color:inherit !important;   /* el texto queda del color del sistema, no del navegador */
  caret-color:inherit;
  transition:background-color 100000s ease-in-out 0s, color 100000s ease-in-out 0s !important;
}
/* El LOGIN es fondo oscuro y ahí el texto sí se fija, porque el input hereda de un contenedor claro. */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus,
.campo input:-webkit-autofill:active{
  -webkit-text-fill-color:#e8eef7 !important;
  caret-color:#e8eef7 !important;
}
/* Tonos EXACTOS por contexto (los diálogos que no usan #0a1628) — nada queda con el color aproximado. */
#geUpgradeConfirmInput:-webkit-autofill,#geUpgradeConfirmInput:-webkit-autofill:hover,#geUpgradeConfirmInput:-webkit-autofill:focus,
#geElimInput1:-webkit-autofill,#geElimInput1:-webkit-autofill:hover,#geElimInput1:-webkit-autofill:focus,
#geElimInput2:-webkit-autofill,#geElimInput2:-webkit-autofill:hover,#geElimInput2:-webkit-autofill:focus,
#geCupoInput:-webkit-autofill,#geCupoInput:-webkit-autofill:hover,#geCupoInput:-webkit-autofill:focus,
#geHistMes:-webkit-autofill,#geHistMes:-webkit-autofill:hover,#geHistMes:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #0d1628 inset !important;
}
#peajeOv input:-webkit-autofill,#peajeOv input:-webkit-autofill:hover,#peajeOv input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #0a1220 inset !important;
  -webkit-text-fill-color:#e2ecf8 !important;
  caret-color:#e2ecf8 !important;
}
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus,
.campo input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #121b2b inset !important;   /* login principal de Cubits: vidrio oscuro */
}

/* Boton celeste al degradado (regla fija NetLine) */
.btn-ingresar{
  width:100%;padding:10px;border:none;border-radius:9px;cursor:pointer;
  background:linear-gradient(135deg,var(--cel1),var(--cel2));
  color:#fff;font-size:13.5px;font-weight:700;font-family:inherit;margin-top:6px;
  transition:filter .15s;
}
.btn-ingresar:hover{filter:brightness(1.08)}
.btn-ingresar:active{filter:brightness(.96)}

.login-msg{text-align:center;color:#ff8a8a;font-size:11.5px;min-height:15px;margin-top:9px;font-weight:600}
.login-ver{text-align:center;color:rgba(159,178,204,.5);font-size:11px;margin-top:18px}


/* ================================================================
   Módulo Gestión de Empresas — CSS COPIADO VERBATIM del Suite
   (netline/public/css/style.css) para que el calendario (geCal/nlcal),
   los toasts y la validación de RUT se vean IDÉNTICOS al Suite.
   ================================================================ */

/* --- Calendario oscuro (geCal / nlcal) --- */
/* CALENDARIO TRIGGER */
.cal-trigger {
  display: flex; align-items: center; gap: 12px;
  background: rgba(37,99,235,0.07);
  border: 2px solid #3A6AAA;
  border-radius: 9px;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  user-select: none;
}
.cal-trigger:hover { border-color: #5B8FD0; background: rgba(37,99,235,0.13); }
.cal-trigger.open { border-color: #5B9BD5; background: rgba(37,99,235,0.15); }
.cal-trigger-icon { flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.cal-trigger-text {
  font-family: 'Exo 2', sans-serif;
  font-size: 16px; font-weight: 700;
  color: #A8C8EC; letter-spacing: 0.5px;
  white-space: nowrap;
}
.cal-trigger-date {
  font-family: 'Consolas', 'Exo 2', monospace;
  font-size: 15px; font-weight: 800;
  color: #f0c860; letter-spacing: 0.5px;
  white-space: nowrap;
  padding-right: 12px;
  border-right: 1px solid rgba(120,150,190,0.30);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* CALENDARIO POPUP */
.cal-popup {
  display: none;
  position: absolute;
  top: calc(var(--topbar-height) - 6px);
  right: 200px;
  width: 280px;
  background: #0D1B2E;
  border: 2px solid #2A5080;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(37,99,235,0.2);
  z-index: 2000;
  overflow: hidden;
}
.cal-popup.open { display: block; }

.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #1A3A6E;
  padding: 10px 12px;
}
.cal-header-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px; font-weight: 700;
  color: #C8E0FF; letter-spacing: 1px; text-transform: uppercase;
}
.cal-nav {
  background: transparent; border: none;
  color: #7BB8E8; font-size: 22px; cursor: pointer;
  padding: 0 6px; line-height: 1;
  transition: color 0.15s;
  font-weight: 300;
}
.cal-nav:hover { color: #ffffff; }

.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: #0A1628;
  padding: 6px 8px 4px;
}
.cal-weekdays span {
  text-align: center;
  font-family: 'Exo 2', sans-serif;
  font-size: 10px; font-weight: 700;
  color: #3A6A9A; letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cal-days {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 4px 8px 8px; gap: 2px;
}
.cal-day {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: auto;
  border-radius: 50%;
  font-family: 'Exo 2', sans-serif;
  font-size: 12px; font-weight: 500;
  color: #8AAAC8; cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border: none; background: transparent;
}
.cal-day:hover { background: rgba(37,99,235,0.3); color: #ffffff; }
.cal-day.vacio { cursor: default; }
.cal-day.vacio:hover { background: transparent; }
.cal-day.otro-mes { color: #2A4A6A; }
.cal-day.hoy {
  background: #DC2626 !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(220,38,38,0.5);
}
.cal-day.seleccionado {
  background: rgba(37,99,235,0.4);
  color: #ffffff;
  font-weight: 700;
  border: 1px solid #2563EB;
}

.cal-footer {
  display: flex; align-items: center; justify-content: space-between;
  background: #0A1628;
  border-top: 1px solid #1A3A5A;
  padding: 8px 12px;
}
.cal-footer-label {
  font-family: 'Exo 2', sans-serif;
  font-size: 11px; font-weight: 600;
  color: #4A7AAA; letter-spacing: 0.5px; text-transform: uppercase;
}
.cal-hoy-btn {
  background: transparent; border: 1px solid #2A5080;
  color: #5B9BD5; padding: 3px 12px;
  border-radius: 4px; font-size: 11px; font-weight: 600;
  font-family: 'Exo 2', sans-serif; cursor: pointer;
  transition: all 0.15s;
}
.cal-hoy-btn:hover { background: rgba(37,99,235,0.2); color: #7BB8E8; border-color: #4A7ABA; }

/* --- Validación RUT --- */
.rut-msg { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; font-family: 'Exo 2', sans-serif; letter-spacing: 0.3px; }
.rut-msg.ok  { color: #059669; }
.rut-msg.err { color: #DC2626; }

/* --- Toasts (éxito / error / aviso) --- */
/* PILA DE AVISOS: los tres toasts estaban clavados en el mismo punto (top:140px, centrados), así
   que dos avisos simultáneos se tapaban uno al otro. Van dentro de esta columna: el segundo se
   acomoda DEBAJO del primero. El contenedor no atrapa clics; cada aviso sí. */
#toastPila {
  position: fixed; top: 140px; left: 50%; transform: translateX(-50%);
  z-index: 14000; display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
#toastPila > div {
  pointer-events: auto;
  position: relative !important; top: auto !important; left: auto !important;
  transform: none !important;
  animation: tePilaIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
#toastPila > div.te-hide { animation: tePilaOut 0.5s ease forwards !important; }
@keyframes tePilaIn  { from{opacity:0;transform:translateY(-24px) scale(0.94)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes tePilaOut { from{opacity:1;transform:scale(1)} to{opacity:0;transform:translateY(-16px) scale(0.96)} }
/* ══ BANNER ÉXITO AMARILLO ══ */
#toastExito {
  position: fixed; top: 140px; left: 50%; transform: translateX(-50%);
  z-index: 14000; animation: teIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  min-width: 380px;
}
#toastExito.te-hide { animation: teOut 0.5s ease forwards; }
@keyframes teIn  { from{opacity:0;transform:translateX(-50%) translateY(-30px) scale(0.92)} to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} }
@keyframes teOut { from{opacity:1;transform:translateX(-50%) scale(1)} to{opacity:0;transform:translateX(-50%) translateY(-20px) scale(0.95)} }

/* Toasts OFICIALES del sistema: CAFÉ Y DORADO (en todo Cubits). La variante blanca .te-sap
   aparece SOLO dentro del módulo de Facturación (la agrega el JS cuando ese módulo está abierto). */
.te-banner, .te-banner-err, .te-banner-warn { position: relative; overflow: hidden; }
.te-banner {
  background: linear-gradient(135deg, #1A1200 0%, #231800 100%);
  border: 2px solid #F59E0B;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 0 30px rgba(245,158,11,0.35), 0 12px 40px rgba(0,0,0,0.8);
}
.te-left { flex-shrink: 0; }
.te-circle {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(245,158,11,0.12);
  border: 2px solid rgba(245,158,11,0.5);
  display: flex; align-items: center; justify-content: center;
  animation: tePop 0.4s 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes tePop { from{transform:scale(0)} to{transform:scale(1)} }
.te-body { flex: 1; }
.te-title { font-size: 14px; font-weight: 800; color: #F59E0B; letter-spacing: 0.3px; }
.te-sub   { font-size: 12px; color: #D4A000; margin-top: 2px; }
.te-close {
  background: transparent; border: none; color: #A07000;
  cursor: pointer; font-size: 14px; padding: 2px 6px;
  border-radius: 4px; line-height: 1;
}
.te-close:hover { color: #F59E0B; background: rgba(245,158,11,0.1); }
/* Barra de autocierre: SOLO en la variante SAP de Facturación */
.te-bar { display: none; }
.te-sap .te-bar { display:block; position:absolute; left:0; bottom:0; height:2px; width:100%; transform-origin:left; animation: teBar 2.6s linear forwards; }
.te-banner.te-sap .te-bar { background:#2e7d32; }
.te-banner-err.te-sap .te-bar { background:#b02a2a; }
.te-banner-warn.te-sap .te-bar { background:#b7791f; }
@keyframes teBar { from{transform:scaleX(1)} to{transform:scaleX(0)} }
/* Variante SAP B1 (solo ERP): notificación PLANA, sobria, con borde de acento a la izquierda,
   tipografía de sistema y sin brillos — estilo enterprise serio. */
.te-sap {
  background: #f7f9fb !important;
  border: 1px solid #9db2c9 !important;
  border-left: 4px solid #64748b !important;
  border-radius: 3px !important;
  box-shadow: 0 6px 20px rgba(31,45,64,0.16) !important;
  padding: 11px 16px 11px 13px !important;
  gap: 11px !important;
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif !important;
}
.te-banner.te-sap      { border-left-color: #2e7d32 !important; }
.te-banner-err.te-sap  { border-left-color: #b02a2a !important; }
.te-banner-warn.te-sap { border-left-color: #b7791f !important; }
.te-sap .te-circle, .te-sap .te-circle-err, .te-sap .te-circle-warn { width: 34px; height: 34px; border-radius: 4px; border: none; animation: none; }
.te-sap .te-circle { background: #e4efe4; }
.te-sap .te-circle-err { background: #f6e3e3; }
.te-sap .te-circle-warn { background: #f3e9d6; }
.te-sap .te-circle svg, .te-sap .te-circle-err svg, .te-sap .te-circle-warn svg { width: 22px; height: 22px; }
.te-sap .te-title { color: #2e7d32; }
.te-sap .te-title-err { color: #b02a2a; }
.te-sap .te-title-warn { color: #b7791f; }
.te-sap .te-title, .te-sap .te-title-err, .te-sap .te-title-warn { font-weight: 700; font-size: 12.5px; letter-spacing: .2px; text-transform: none; }
.te-sap .te-sub, .te-sap .te-sub-err, .te-sap .te-sub-warn { color: #5a6b82; font-size: 12px; font-weight: 400; }
.te-sap .te-close, .te-sap .te-close-err, .te-sap .te-close-warn { color: #8a97a8; }
.te-sap .te-close:hover, .te-sap .te-close-err:hover, .te-sap .te-close-warn:hover { color: #33465f; background: #e6ecf3; }

/* Toast Error */
#toastError { position:fixed; top:140px; left:50%; transform:translateX(-50%); z-index:14000; animation:teIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; min-width:380px; }
#toastError.te-hide { animation:teOut 0.5s ease forwards; }
.te-banner-err { background:linear-gradient(135deg,#1A1200,#231800); border:2px solid #F59E0B; border-radius:10px; padding:14px 18px; display:flex; align-items:center; gap:14px; box-shadow:0 0 30px rgba(245,158,11,.35),0 12px 40px rgba(0,0,0,.8); }
.te-circle-err { width:42px; height:42px; border-radius:50%; background:rgba(245,158,11,.12); border:2px solid rgba(245,158,11,.5); display:flex; align-items:center; justify-content:center; animation:tePop 0.4s 0.2s cubic-bezier(0.34,1.56,0.64,1) both; }
.te-title-err { font-size:14px; font-weight:800; color:#F59E0B; letter-spacing:.3px; }
.te-sub-err   { font-size:12px; color:#D4A000; margin-top:2px; }
.te-close-err { background:transparent; border:none; color:#A07000; cursor:pointer; font-size:14px; padding:2px 6px; border-radius:4px; line-height:1; }
.te-close-err:hover { color:#F59E0B; background:rgba(245,158,11,.1); }

/* Toast Aviso */
#toastWarn { position:fixed; top:140px; left:50%; transform:translateX(-50%); z-index:14000; animation:teIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; min-width:380px; }
#toastWarn.te-hide { animation:teOut 0.5s ease forwards; }
.te-banner-warn { background:linear-gradient(135deg,#1A1200,#231800); border:2px solid #F59E0B; border-radius:10px; padding:14px 18px; display:flex; align-items:center; gap:14px; box-shadow:0 0 30px rgba(245,158,11,.35),0 12px 40px rgba(0,0,0,.8); }
.te-circle-warn { width:42px; height:42px; border-radius:50%; background:rgba(245,158,11,.12); border:2px solid rgba(245,158,11,.5); display:flex; align-items:center; justify-content:center; animation:tePop 0.4s 0.2s cubic-bezier(0.34,1.56,0.64,1) both; }
.te-title-warn { font-size:14px; font-weight:800; color:#F59E0B; letter-spacing:.3px; }
.te-sub-warn   { font-size:12px; color:#D4A000; margin-top:2px; }
.te-close-warn { background:transparent; border:none; color:#A07000; cursor:pointer; font-size:14px; padding:2px 6px; border-radius:4px; line-height:1; }
.te-close-warn:hover { color:#F59E0B; background:rgba(245,158,11,.1); }