/* ============================================================
   auth.css — SaaS Multi-Tenant — Premium UI
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;1,9..144,400&display=swap');

:root {
  --brand:       #0d47a1;
  --brand-dark:  #09337a;
  --brand-mid:   #1a73e8;
  --brand-light: #e8f0fe;
  --success:     #059669;
  --danger:      #dc2626;
  --warning:     #d97706;
  --text:        #0f172a;
  --text-2:      #374151;
  --muted:       #6b7280;
  --border:      #e5e7eb;
  --bg:          #f8fafc;
  --surface:     #fff;
  --r:           14px;
  --r-sm:        10px;
  --r-xs:        6px;
  --trans:       .2s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ══════════════════════════════════════════════════════════════
   FONDO CANVAS — red de puntos con efecto onda al pasar cursor
   ══════════════════════════════════════════════════════════════ */
#auth-canvas {
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
  background:var(--bg);
}

/* ══════════════════════════════════════════════════════════════
   SHELL COMÚN — centrado vertical y horizontal
   ══════════════════════════════════════════════════════════════ */
.auth-shell-center {
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:32px 16px 24px;
}

/* Card */
.auth-card {
  
  width:100%; max-width:440px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:var(--r);
  box-shadow:
    0 2px 8px rgba(0,0,0,.04),
    0 8px 32px rgba(0,0,0,.07);
  padding:36px 36px 28px;
  animation:authCardIn .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes authCardIn {
  from { opacity:0; transform:translateY(20px) scale(.98) }
  to   { opacity:1; transform:translateY(0)    scale(1)   }
}
@media(max-width:480px) {
  .auth-card { padding:28px 22px 24px; border-radius:var(--r-sm) }
}

/* Logo en card */
.auth-card-logo {
  display:flex; justify-content:center; margin-bottom:24px;
}
.auth-logo-circle {
  width:100px; height:100px; border-radius:50%;
  overflow:hidden; flex-shrink:0;
  /*box-shadow:0 2px 10px rgba(0,0,0,.1);*/
/*  background:#f1f5f9;*/
}
.auth-logo-circle img {
  width:100%; height:100%; /*object-fit:cover; object-position:center;*/ display:block;
}
.auth-logo-fallback {
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-mid));
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:1.1rem; font-weight:800;
  font-family:'Fraunces',serif;
  box-shadow:0 2px 12px rgba(13,71,161,.25);
}

/* Encabezado card */
.auth-card-head { margin-bottom:22px }
.auth-card-title {
  font-family:'Fraunces',serif; font-size:1.65rem; font-weight:700;
  color:var(--text); letter-spacing:-.025em; line-height:1.15; margin-bottom:4px;
}
.auth-card-sub { font-size:.83rem; color:var(--muted) }

/* Stepper registro */
.reg-stepper {
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}
.step { display:flex; align-items:center; gap:6px; font-size:.75rem; font-weight:600; color:var(--muted) }
.step.active { color:var(--brand-mid) }
.step.done   { color:var(--success) }
.step-num {
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:800; background:var(--surface);
  transition:all var(--trans);
}
.step.active .step-num { border-color:var(--brand-mid); color:var(--brand-mid); background:var(--brand-light) }
.step.done   .step-num { border-color:var(--success); background:var(--success); color:white }
.step-line { flex:1; max-width:32px; height:2px; background:var(--border); margin:0 4px }
.step-line.done { background:var(--success) }

/* Alerta */
.auth-alert {
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 13px; border-radius:var(--r-sm); margin-bottom:14px;
  font-size:.83rem; line-height:1.5; animation:authCardIn .3s ease;
}
.auth-alert.error   { background:#fef2f2; border:1.5px solid #fca5a5; color:#991b1b }
.auth-alert.success { background:#ecfdf5; border:1.5px solid #6ee7b7; color:#065f46 }
.auth-alert.info    { background:#eff6ff; border:1.5px solid #93c5fd; color:#1e40af }
.auth-alert.warning { background:#fffbeb; border:1.5px solid #fcd34d; color:#92400e }
.auth-alert.sistema { background:#fff7ed; border:1.5px solid #fdba74; border-left:4px solid #f97316; color:#9a3412 }
.auth-alert i,.auth-alert-icon { flex-shrink:0; margin-top:2px }
.auth-alert a { color:inherit; font-weight:700 }

/* Google button */
.btn-google {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:11px 18px;
  background:#fff; border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:600;
  color:var(--text); cursor:pointer; text-decoration:none;
  transition:all var(--trans); box-shadow:0 1px 3px rgba(0,0,0,.05);
  margin-bottom:2px;
}
.btn-google:hover {
  border-color:#4285f4; background:#f6f9ff;
  box-shadow:0 2px 10px rgba(66,133,244,.1);
  transform:translateY(-1px); color:var(--text);
}
.btn-google.loading { opacity:.7; pointer-events:none }

/* Google badge (registro vincular) */
.google-badge {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:#f0fdf4; border:1.5px solid #a5d6a7;
  border-radius:var(--r-sm); margin-bottom:14px;
  font-size:.85rem; color:#1b5e20; font-weight:500;
}
.google-badge-avatar {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#4285f4,#34a853);
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:.8rem; font-weight:700; font-family:'DM Sans',sans-serif;
}
.google-badge-info { flex:1; min-width:0 }
.google-badge-name { font-weight:700; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.google-badge-email { font-size:.75rem; color:#2e7d32; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.google-badge-desv {
  margin-left:auto; background:none; border:none;
  color:#c62828; font-size:.75rem; font-weight:600;
  cursor:pointer; padding:0; font-family:inherit; flex-shrink:0;
}

/* Divider */
.auth-divider {
  display:flex; align-items:center; gap:10px; margin:14px 0;
  color:var(--muted); font-size:.71rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em;
}
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--border) }

/* Campos */
.form-group { margin-bottom:13px }
.form-label { display:block; font-size:.77rem; font-weight:700; color:var(--text-2); margin-bottom:4px }
.form-label .req { color:var(--danger); margin-left:2px }
.form-label-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px }
.auth-forgot { font-size:.75rem; font-weight:600; color:var(--brand-mid); text-decoration:none; transition:color var(--trans) }
.auth-forgot:hover { color:var(--brand-dark) }
.input-wrap { position:relative }
.form-control {
  width:100%; padding:11px 13px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif; font-size:16px; /* 16px evita zoom mobile */
  color:var(--text); background:#fff; outline:none;
  transition:border-color var(--trans),box-shadow var(--trans);
  -webkit-appearance:none;
}
.form-control::placeholder { color:#c0c8d4 }
.form-control:focus { border-color:var(--brand-mid); box-shadow:0 0 0 3px rgba(26,115,232,.1) }
.form-control.is-invalid { border-color:var(--danger); background:#fff8f8 }
.form-control.is-valid   { border-color:var(--success) }
.form-control:disabled,.form-control[readonly] { background:#f3f4f6; color:var(--muted) }
.has-icon .form-control  { padding-left:38px }
.has-toggle .form-control{ padding-right:40px }
.input-icon {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:#c0c8d4; font-size:14px; pointer-events:none; transition:color var(--trans);
}
.input-wrap:focus-within .input-icon { color:var(--brand-mid) }
.btn-toggle-pass {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#c0c8d4; cursor:pointer;
  padding:4px; display:flex; align-items:center; transition:color var(--trans);
}
.btn-toggle-pass:hover { color:var(--brand-mid) }
.input-loading { position:absolute; right:10px; top:50%; transform:translateY(-50%) }
.spinner-sm { width:15px; height:15px; border:2px solid var(--border); border-top-color:var(--brand-mid); border-radius:50%; animation:spin .65s linear infinite }
.field-error { font-size:.74rem; color:var(--danger); margin-top:3px; display:flex; align-items:flex-start; gap:4px; line-height:1.4 }
.field-info  { font-size:.73rem; color:var(--muted); margin-top:3px }
.ruc-estado  { display:inline-flex; align-items:center; gap:5px; font-size:.73rem; font-weight:600; padding:2px 8px; border-radius:100px; margin-top:3px }
.ruc-estado.activo   { background:#ecfdf5; color:var(--success) }
.ruc-estado.inactivo { background:#fef2f2; color:var(--danger) }

/* Password strength */
.strength-track { height:3px; background:var(--border); border-radius:2px; overflow:hidden; margin:4px 0 2px }
.strength-fill  { height:100%; border-radius:2px; transition:width .35s ease,background .35s ease; width:0 }
.strength-label { font-size:.73rem; font-weight:600 }
.btn-generar {
  background:none; border:none; color:var(--brand-mid); font-size:.76rem; font-weight:700;
  cursor:pointer; padding:3px 8px; border-radius:var(--r-xs);
  display:inline-flex; align-items:center; gap:4px;
  font-family:inherit; transition:background var(--trans);
}
.btn-generar:hover { background:var(--brand-light) }

/* Botón submit principal */
.btn-submit {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px 20px; margin-top:4px;
  background:var(--brand); color:white; border:none; border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif; font-size:.92rem; font-weight:700;
  cursor:pointer; letter-spacing:.01em; transition:all var(--trans);
  box-shadow:0 2px 10px rgba(13,71,161,.2);
}
.btn-submit:hover:not(:disabled) {
  filter:brightness(.9); box-shadow:0 4px 16px rgba(13,71,161,.3); transform:translateY(-1px);
}
.btn-submit:active  { transform:translateY(0) }
.btn-submit:disabled { opacity:.6; cursor:not-allowed; transform:none }

/* Links secundarios dentro de card */
.auth-card-links {
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:18px; flex-wrap:wrap;
}
.auth-card-link {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.81rem; font-weight:600; color:#9ca3af;
  text-decoration:none; transition:color var(--trans); padding:3px 4px;
}
.auth-card-link:hover { color:var(--brand-mid) }
.auth-card-link i { font-size:13px }
.auth-card-link-sep { color:#d1d5db; font-size:.75rem }

/* Pie de página — igual en todas las vistas */
.auth-pie {
  margin-top:18px; text-align:center;
  display:flex; align-items:center; justify-content:center;
  gap:8px; flex-wrap:wrap;
  font-size:.8rem; color:#c4cad4;
}
.auth-pie-sep { color:#e5e7eb }
.auth-pie-link { color:#0a58ca; text-decoration:none; transition:color var(--trans) }
.auth-pie-link:hover { color:var(--brand-mid) }

/* OTP */
.otp-wrap { display:flex; gap:8px; justify-content:center; margin:10px 0 }
.otp-input {
  width:48px; height:52px; text-align:center;
  font-size:1.3rem; font-weight:700;
  border:2px solid var(--border); border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif; color:var(--text);
  transition:border-color var(--trans),background var(--trans); outline:none;
  font-size:16px; /* evita zoom mobile */
}
.otp-input:focus { border-color:var(--brand-mid); box-shadow:0 0 0 3px rgba(26,115,232,.1) }
.otp-input.filled  { border-color:var(--brand-mid); background:var(--brand-light) }
.otp-input.is-invalid { border-color:var(--danger); background:#fff8f8; animation:shake .3s ease }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.countdown-wrap  { text-align:center; margin:6px 0 }
.countdown-text  { font-size:.8rem; color:var(--muted) }
.countdown-num   { font-weight:700; color:var(--brand-mid) }
.countdown-num.urgent { color:var(--danger) }
.cod-actions { display:flex; gap:8px; justify-content:center; margin-top:8px; flex-wrap:wrap }
.btn-link-action {
  background:none; border:none; color:var(--brand-mid); font-size:.8rem; font-weight:600;
  cursor:pointer; padding:4px 8px; border-radius:var(--r-xs);
  transition:background var(--trans); display:flex; align-items:center; gap:4px; font-family:inherit;
}
.btn-link-action:hover { background:var(--brand-light) }
.btn-link-action:disabled { opacity:.45; cursor:not-allowed }
.correo-form { background:var(--brand-light); border:1.5px solid #93c5fd; border-radius:var(--r-sm); padding:13px; margin-top:11px; animation:authCardIn .25s ease }

/* Toggle credenciales */
.cred-toggle-wrap { border:1.5px solid var(--border); border-radius:var(--r-sm); margin:11px 0; overflow:hidden }
.btn-cred-toggle {
  display:flex; align-items:center; gap:10px; width:100%; background:#f9fafb;
  border:none; padding:11px 13px; cursor:pointer; font-family:inherit;
  font-size:.84rem; font-weight:600; color:var(--text-2); text-align:left; transition:background var(--trans);
}
.btn-cred-toggle:hover { background:var(--brand-light); color:var(--brand-mid) }
.cred-icon-circle {
  width:26px; height:26px; border-radius:50%;
  background:var(--brand-light); color:var(--brand-mid);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; flex-shrink:0; transition:all var(--trans);
}
.btn-cred-toggle:hover .cred-icon-circle { background:var(--brand-mid); color:white }
#cred-chevron { transition:transform var(--trans); margin-left:auto }
.cred-toggle-body { padding:13px; border-top:1px solid var(--border); animation:authCardIn .2s ease }

/* Username status */
.username-status { font-size:.74rem; margin-top:3px; min-height:16px; display:flex; align-items:center; gap:4px }
.username-status.checking { color:var(--muted) }
.username-status.ok   { color:var(--success) }
.username-status.taken{ color:var(--danger) }

/* Misc */
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:11px }
@media(max-width:480px) { .form-grid-2 { grid-template-columns:1fr } }
.badge-optional { font-size:.66rem; font-weight:600; color:var(--muted); background:#f3f4f6; padding:1px 6px; border-radius:100px; margin-left:4px }
.form-check-wrap { margin:11px 0 }
.form-check-label-custom { display:flex; align-items:flex-start; gap:9px; cursor:pointer; font-size:.83rem; color:var(--text-2); font-weight:500 }
.form-check-input-custom { width:16px; height:16px; border-radius:4px; cursor:pointer; flex-shrink:0; margin-top:2px; accent-color:var(--brand-mid) }

/* Tom Select */
.ts-wrapper { width:100% }
.ts-control {
  border:1.5px solid var(--border) !important; border-radius:var(--r-sm) !important;
  font-family:'DM Sans',sans-serif !important; font-size:16px !important;
  color:var(--text) !important; background:#fff !important;
  padding:9px 36px 9px 38px !important; min-height:auto !important;
  box-shadow:none !important; transition:border-color var(--trans),box-shadow var(--trans) !important;
}
.ts-wrapper.focus .ts-control { border-color:var(--brand-mid) !important; box-shadow:0 0 0 3px rgba(26,115,232,.1) !important }
.ts-wrapper.is-invalid .ts-control { border-color:var(--danger) !important; background:#fff8f8 !important }
.ts-dropdown { border:1.5px solid var(--border) !important; border-radius:var(--r-sm) !important; box-shadow:0 4px 16px rgba(0,0,0,.08) !important; font-family:'DM Sans',sans-serif !important; font-size:.87rem !important; margin-top:3px !important }
.ts-dropdown .option { padding:9px 12px !important; color:var(--text) !important; transition:background var(--trans) !important }
.ts-dropdown .option:hover,.ts-dropdown .option.active { background:var(--brand-light) !important; color:var(--brand-mid) !important }
.ts-dropdown .no-results { padding:10px 12px !important; color:var(--muted) !important; font-size:.84rem !important }

/* Empresa cards */
.empresa-grid-1 { display:flex; flex-direction:column; gap:10px }
.empresa-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
@media(max-width:700px) { .empresa-grid-3 { grid-template-columns:1fr } }
@media(min-width:701px) and (max-width:960px) { .empresa-grid-3 { grid-template-columns:repeat(2,1fr) } }
.empresa-card.pg-hidden { display:none !important }
.empresa-card {
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border:1.5px solid var(--border); border-radius:var(--r); background:#fff;
  cursor:pointer; transition:all var(--trans); text-align:left; width:100%; font-family:inherit;
}
.empresa-card:hover:not([disabled]) { border-color:var(--brand-mid); background:var(--brand-light) }
.empresa-card.empresa-actual { border-color:var(--success); background:#f0fdf4; cursor:default }
.empresa-avatar {
  width:40px; height:40px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-mid));
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; font-weight:800; color:white; font-family:'Fraunces',serif;
}
.empresa-info { flex:1 }
.empresa-razon { font-size:.88rem; font-weight:700; color:var(--text); line-height:1.3 }
.empresa-ruc   { font-size:.74rem; color:var(--muted); margin-top:1px }
.empresa-usuario { font-size:.73rem; color:var(--brand-mid); font-weight:600; margin-top:1px; display:flex; align-items:center; gap:3px }
.empresa-card-arrow { color:var(--muted); font-size:15px; transition:transform var(--trans) }
.empresa-card:hover:not([disabled]) .empresa-card-arrow { transform:translateX(3px); color:var(--brand-mid) }
#empresa-paginacion { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:14px }
.pag-btn {
  width:32px; height:32px; border-radius:8px; border:1.5px solid var(--border);
  background:#fff; color:var(--text-2); font-size:.8rem; font-weight:700;
  cursor:pointer; transition:all .18s ease; display:flex; align-items:center; justify-content:center; font-family:inherit;
}
.pag-btn:hover { border-color:var(--brand); color:var(--brand) }
.pag-btn.active { background:var(--brand); border-color:var(--brand); color:white }

/* Empresa grid-3 compacto */
.empresa-grid-3 .empresa-card { flex-direction:column; align-items:flex-start; gap:7px; padding:13px }
.empresa-grid-3 .empresa-avatar { width:34px; height:34px; font-size:.8rem }
.empresa-grid-3 .empresa-card-arrow { display:none }
.empresa-grid-3 .empresa-razon { font-size:.81rem }

/* Toast */
.spinner { width:15px; height:15px; border:2px solid rgba(255,255,255,.35); border-top-color:white; border-radius:50%; animation:spin .65s linear infinite; flex-shrink:0 }
@keyframes spin { to { transform:rotate(360deg) } }
#toast-wrap { position:fixed; top:18px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:9px; pointer-events:none }
.toast {
  min-width:260px; max-width:360px; padding:11px 14px; background:white;
  border-radius:var(--r-sm); box-shadow:0 8px 28px rgba(0,0,0,.1);
  display:flex; align-items:flex-start; gap:10px; border-left:4px solid var(--brand);
  animation:toastIn .3s ease; pointer-events:all;
}
.toast.success { border-color:var(--success) }
.toast.error   { border-color:var(--danger) }
.toast.warning { border-color:var(--warning) }
.toast-ico { font-size:14px; flex-shrink:0; line-height:1.4 }
.toast-body { flex:1 }
.toast-title { font-weight:700; font-size:.82rem; margin-bottom:1px }
.toast-msg   { font-size:.78rem; color:var(--muted); line-height:1.5 }
.toast-close { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; padding:0; flex-shrink:0 }
@keyframes toastIn { from { opacity:0; transform:translateX(40px) } to { opacity:1; transform:translateX(0) } }

/* Anti-zoom mobile global */
@media(max-width:768px) {
  input, select, textarea { font-size:16px !important }
  .ts-control { font-size:16px !important }
}