/*
  Publyxor Auth UI – estilo tipo Hostinger (adaptado)
  - Layout 2 columnas (desktop): izquierda negro mate con logo / derecha panel blanco-gris mate
  - Sin botones sociales
  - Sin scroll (desktop)
  - Vista móvil/tablet: cartel centrado (fondo negro mate + logo + mensaje)
*/

:root{
  --black:#0c0f14;
  --black2:#0b0c10;
  --glow: rgba(255,224,74,.10);

  --bg:#f2f4fb;
  --panel:#ffffff;
  --panel2:#f7f8fc;
  --text:#0f172a;
  --muted:#6b7280;
  --line:#e6e8f2;

  --yellow:#f7d54a;
  --yellow2:#ffd21a;

  --radius:18px;
  --shadow: 0 26px 90px rgba(17,24,39,.14);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body.auth{
  margin:0;
  overflow:hidden;
  width:100%;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Wrapper (full height, no scroll) */
.auth-wrap{
  height:100vh;
  width:100vw;
  overflow:hidden;
}


/* ===== Layout 2 columnas ===== */
.auth-shell{
  height:100vh;
  width:100vw;
  display:flex;
  overflow:hidden;
}


.auth-left{
  flex:0 0 46%;
  min-width:0;
  background:
    radial-gradient(1000px 520px at 18% 10%, var(--glow), transparent 60%),
    radial-gradient(900px 500px at 85% 85%, rgba(120,160,255,.10), transparent 62%),
    linear-gradient(180deg, var(--black), var(--black2));
  color:#fff;
  padding:46px 52px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.auth-left .brand{
  display:flex;
  align-items:center;
}
.auth-left .brand img{
  height:42px;
  width:auto;
}

.auth-left .copy{
  max-width:520px;
}
.auth-left .copy h2{
  margin:0 0 12px 0;
  font-size:38px;
  line-height:1.04;
  font-weight:900;
  letter-spacing:-.4px;
}
.auth-left .copy p{
  margin:0;
  color:rgba(255,255,255,.72);
  line-height:1.55;
  font-size:15px;
}

.auth-left .foot{
  color:rgba(255,255,255,.42);
  font-size:12px;
}

/* Variante: solo logo centrado (login/registro) */
.auth-left.logo-only{
  justify-content:center;
  align-items:center;
  gap:18px;
  padding:0;
  position:relative;
}
.auth-left.logo-only .brand{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.auth-left.logo-only .brand img{
  height:54px;
}

/* Copyright ahora va fijo abajo a la derecha (más elegante) */
.auth-copyright{
  position:fixed;
  right:24px;
  bottom:18px;
  font-size:10px;
  color:rgba(25,25,35,.55);
  letter-spacing:.2px;
  user-select:none;
}

.auth-right{
  flex:1;
  background: linear-gradient(180deg, var(--panel2), var(--bg));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 18px;
  overflow:hidden;
}


.auth-card{
  width:min(520px, 92%);
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:34px 34px 26px;
}

.auth-title{
  margin:0;
  font-size:34px;
  font-weight:900;
  letter-spacing:-.35px;
}
.auth-subtitle{
  margin:8px 0 22px;
  color: var(--muted);
  font-size:14px;
  line-height:1.45;
}

/* Form */
.form{ display:grid; gap:14px; }

.field label{
  display:block;
  font-size:13px;
  color: var(--muted);
  margin:0 0 6px 2px;
}
.field input{
  width:100%;
  height:46px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  padding:0 14px;
  font-size:14px;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.field input:focus{
  border-color: rgba(255,210,26,.85);
  box-shadow: 0 0 0 4px rgba(255,224,74,.22);
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
}

.check{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size:13px;
}
.check input{ width:16px; height:16px; }

.btn{
  width:100%;
  height:48px;
  border-radius:12px;
  border:1px solid rgba(214,175,30,.42);
  background: #f1d36a; /* amarillo mate */
  box-shadow: 0 10px 22px rgba(241,211,106,.18);
  color:#141414;
  font-weight:900;
  cursor:pointer;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{
  background:#eacb5f;
  box-shadow: 0 12px 26px rgba(241,211,106,.22);
}
.btn:active{ transform: translateY(1px); }
.btn:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(241,211,106,.20), 0 12px 26px rgba(241,211,106,.22);
}


.auth-foot{
  margin-top:16px;
  font-size:14px;
  color: var(--muted);
}
.auth-foot a{
  color: #111827;
  font-weight:900;
  text-decoration:none;
  border-bottom:1px dashed rgba(17,24,39,.35);
}
.auth-foot a:hover{ border-bottom-style: solid; }

/* Flash */
.flash{ margin:0 0 14px 0; display:grid; gap:10px; }
.flash .danger, .flash .error{
  background:#ffecec;
  border:1px solid #ffd2d2;
  color:#7a1f1f;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
}
.flash .success{
  background:#eafff1;
  border:1px solid #b9f5d0;
  color:#145a32;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
}
.flash .warning{
  background:#e8f1ff;
  border:1px solid #b8d4ff;
  color:#0b3d91;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
}

/* ===== Vista móvil/tablet (cartel centrado) ===== */

/* ===== Vista móvil/tablet (cartel centrado) ===== */
.mobile-block-wrap{
  overflow:hidden;
  width:100%;
  height:100vh;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, var(--black), var(--black2));
  padding:0 16px;
}

.mobile-block{
  max-width:560px;
  width:min(520px, 92vw);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:22px 18px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
  text-align:center;
}

.mobile-block .logo img{
  height: clamp(64px, 16vw, 96px);
  width:auto;
  max-width: 80vw;
  margin-bottom:12px;
}

.mobile-block p{
  margin:0;
  color:rgba(255,255,255,.78);
  line-height:1.45;
  font-size: clamp(13px, 3.6vw, 14px);
}

/* Ajustes para pantallas medianas */
@media (max-width: 1060px){
  .auth-left{ width:40%; min-width:340px; padding:40px 34px; }
  .auth-left .copy h2{ font-size:32px; }
  .auth-card{ padding:30px 28px 24px; }
  .auth-title{ font-size:30px; }
}


.auth-login-shell{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;}
.auth-card--login{width:380px;max-width:380px;padding:28px 26px 22px;display:flex;flex-direction:column;align-items:center;flex:0 0 auto;}
.auth-card--login .auth-title,.auth-card--login .auth-subtitle,.auth-card--login .auth-foot{width:100%;text-align:center;}
.form--login{width:280px;max-width:280px;margin:0 auto;flex:0 0 auto;}
.auth-submit-wrap{display:flex;justify-content:center;width:100%;margin-top:6px;}
.auth-submit-btn{width:100%;max-width:280px;}
.flash--outside{width:100%;max-width:380px;margin:0 auto;text-align:center;}
.flash--outside .danger,.flash--outside .error,.flash--outside .success,.flash--outside .warning{text-align:center;}
@media (max-width: 640px){.auth-card--login{width:min(92vw,380px);max-width:min(92vw,380px);padding:26px 20px 22px;}.form--login{width:min(100%,280px);max-width:min(100%,280px);}.flash--outside,.auth-submit-btn{max-width:none;}}


/* ===== Login refinado v7 ===== */
.auth-right{padding:20px 16px;}
.auth-login-shell{gap:10px;align-items:center;justify-content:center;}
.auth-card--login{width:348px;max-width:348px;padding:22px 20px 18px;border-radius:20px;box-shadow:0 18px 48px rgba(17,24,39,.10);position:relative;}
.auth-card--login .auth-title{font-size:26px;line-height:1.08;text-align:center;margin-bottom:4px;}
.auth-card--login .auth-subtitle{margin:0 0 16px;font-size:13px;line-height:1.4;text-align:center;color:#667085;max-width:260px;align-self:center;}
.form--login{width:100%;max-width:282px;gap:12px;}
.field label{font-size:12px;margin:0 0 5px 2px;}
.field input{height:42px;border-radius:11px;padding:0 13px;font-size:13px;background:#f3f6fb;border-color:#dde3ee;}
.field input::placeholder{color:#8a94a6;}
.field input:focus{background:#fff;}
.row{margin-top:0;}
.check{font-size:12px;gap:8px;}
.check input{width:15px;height:15px;}
.auth-submit-wrap{margin-top:2px;}
.auth-submit-btn{height:44px;max-width:282px;border-radius:12px;font-size:13px;box-shadow:0 8px 18px rgba(241,211,106,.18);}
.auth-foot{margin-top:14px;font-size:13px;text-align:center;}
.flash--outside{width:auto;max-width:348px;display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 auto;}
.flash--outside .danger,.flash--outside .error,.flash--outside .success,.flash--outside .warning{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.2;text-align:center;width:auto;max-width:min(100%, 310px);box-shadow:0 6px 14px rgba(15,23,42,.08);}
.flash--outside .danger,.flash--outside .error{background:#fff1f1;border-color:#f7a8a8;color:#b42318;}
.flash--outside .success{background:#ecfdf3;border-color:#86efac;color:#166534;}
.flash--outside .warning{background:#eef4ff;border-color:#9ec5ff;color:#174ea6;}
@media (max-width: 640px){.auth-card--login{width:min(92vw,348px);max-width:min(92vw,348px);padding:20px 18px 18px;}.flash--outside .danger,.flash--outside .error,.flash--outside .success,.flash--outside .warning{max-width:min(92vw,300px);}}


/* ===== Auth sizing alignment + auto-dismiss flashes ===== */
.auth-card:not(.auth-card--login){width:348px;max-width:348px;padding:22px 20px 18px;border-radius:20px;box-shadow:0 18px 48px rgba(17,24,39,.10);}
.auth-card:not(.auth-card--login) .auth-title{font-size:26px;line-height:1.08;text-align:center;margin-bottom:4px;}
.auth-card:not(.auth-card--login) .auth-subtitle{margin:0 0 16px;font-size:13px;line-height:1.4;text-align:center;color:#667085;max-width:260px;align-self:center;}
.auth-card:not(.auth-card--login) .form{width:100%;max-width:282px;margin:0 auto;gap:12px;}
.auth-card:not(.auth-card--login) .btn{height:44px;max-width:282px;border-radius:12px;font-size:13px;display:block;margin:2px auto 0;}
.auth-card:not(.auth-card--login) .auth-foot{margin-top:14px;font-size:13px;text-align:center;}
.auth-card:not(.auth-card--login) .flash{width:auto;max-width:348px;display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 auto 12px;}
.auth-card:not(.auth-card--login) .flash .danger,.auth-card:not(.auth-card--login) .flash .error,.auth-card:not(.auth-card--login) .flash .success,.auth-card:not(.auth-card--login) .flash .warning{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.2;text-align:center;width:auto;max-width:min(100%,310px);box-shadow:0 6px 14px rgba(15,23,42,.08);}
.flash [data-flash-item], .flash--outside [data-flash-item]{transition:opacity .28s ease, transform .28s ease, max-height .28s ease, margin .28s ease, padding .28s ease;overflow:hidden;max-height:60px;}
.flash [data-flash-item].is-hiding, .flash--outside [data-flash-item].is-hiding{opacity:0;transform:translateY(-6px);max-height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0;}
@media (max-width: 640px){.auth-card:not(.auth-card--login){width:min(92vw,348px);max-width:min(92vw,348px);padding:20px 18px 18px;}.auth-card:not(.auth-card--login) .flash .danger,.auth-card:not(.auth-card--login) .flash .error,.auth-card:not(.auth-card--login) .flash .success,.auth-card:not(.auth-card--login) .flash .warning{max-width:min(92vw,300px);}}


/* UX dropdown improvements */
.dropdown-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.22);
  backdrop-filter: blur(1px);
  z-index: 998;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.dropdown-backdrop.show{
  opacity:1;
  pointer-events:auto;
}
.filtro-dropdown,
.user-dropdown-menu,
.todos-dropdown-menu{
  position:absolute !important;
  z-index:999;
  margin-top:6px;
}
.dropdown-arrow{
  width:18px;
  height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(148,163,184,.45);
  background:#fff;
  font-size:10px;
  font-weight:700;
  margin-left:6px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}

/* Login limpio + administración de altas cerrada */
.auth-login-kicker{font-size:10px;letter-spacing:.16em;font-weight:900;color:#98a2b3;margin-bottom:9px;text-align:center}
.auth-card--login{padding:28px 26px 24px;border:1px solid #e4e7ec;box-shadow:0 24px 70px rgba(16,24,40,.10)}
.auth-card--login .auth-title{font-size:28px;letter-spacing:-.5px}
.auth-card--login .auth-subtitle{margin-bottom:20px}
.auth-card--login .field input{height:44px;background:#f8fafc;border-color:#e4e7ec}
.auth-card--login .field input:focus{background:#fff;border-color:#d7ba4e;box-shadow:0 0 0 4px rgba(239,211,104,.18)}
.auth-card--login .auth-submit-btn{height:46px;background:#efd368;border-color:#dfc354;box-shadow:none}
.auth-card--login .auth-submit-btn:hover{background:#e7c95b;box-shadow:0 8px 20px rgba(16,24,40,.08)}
.auth-lock-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;margin:0 auto 14px;background:#fff1f0;color:#b42318;font-size:20px;font-weight:900;border:1px solid #fecdca}
.auth-blocked-ip{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:9px 12px;font-size:12px;font-weight:700;color:#475467}

/* ===== Login final: limpio y sin marca duplicada ===== */
.auth-shell--login .auth-right{background:#f7f8fa}
.auth-card--clean{width:360px!important;max-width:360px!important;padding:30px 30px 27px!important;border:1px solid #e4e7ec!important;border-radius:18px!important;box-shadow:0 18px 55px rgba(16,24,40,.08)!important}
.auth-card--clean .auth-title{font-size:25px!important;line-height:1.15!important;letter-spacing:-.45px!important;margin:0 0 6px!important;color:#101828!important}
.auth-card--clean .auth-subtitle{font-size:12px!important;color:#667085!important;margin:0 auto 22px!important}
.auth-card--clean .form--login{max-width:100%!important;gap:14px!important}
.auth-card--clean .field label{font-size:10px!important;font-weight:700!important;color:#475467!important;margin:0 0 6px 1px!important}
.auth-card--clean .field input{height:44px!important;border:1px solid #dfe3e9!important;border-radius:10px!important;background:#fbfcfd!important;padding:0 12px!important;font-size:12px!important;color:#1d2939!important;box-shadow:none!important}
.auth-card--clean .field input:focus{background:#fff!important;border-color:#d7ba4e!important;box-shadow:0 0 0 3px rgba(239,211,104,.18)!important}
.auth-card--clean .field input::placeholder{color:#a3abb8!important}
.password-input-wrap{position:relative}.password-input-wrap input{padding-right:62px!important}.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);height:30px;padding:0 8px;border:0;border-radius:7px;background:transparent;color:#667085;font:700 9px Inter,system-ui;cursor:pointer}.password-toggle:hover{background:#f2f4f7;color:#344054}
.auth-options{justify-content:flex-start!important;margin-top:-2px!important}.auth-options .check{font-size:10px!important;color:#667085!important}.auth-options .check input{accent-color:#d7ba4e}
.auth-card--clean .auth-submit-btn{height:44px!important;max-width:none!important;border-radius:10px!important;background:#efd368!important;border:1px solid #dfc354!important;box-shadow:none!important;font-size:11px!important;color:#272313!important}.auth-card--clean .auth-submit-btn:hover{background:#e8cb5f!important;box-shadow:0 5px 15px rgba(16,24,40,.07)!important}
.auth-notices{width:360px!important;max-width:360px!important;margin:2px auto 0!important;gap:7px!important;align-items:stretch!important}.auth-notice{display:flex!important;align-items:flex-start!important;gap:9px!important;width:100%!important;max-width:none!important;min-height:42px!important;padding:10px 12px!important;border-radius:11px!important;border:1px solid #e4e7ec!important;background:#fff!important;box-shadow:0 7px 20px rgba(16,24,40,.06)!important;color:#475467!important;font-size:10px!important;font-weight:600!important;line-height:1.35!important;text-align:left!important}.auth-notice-icon{width:8px;height:8px;border-radius:50%;flex:0 0 auto;margin-top:3px;background:#98a2b3}.auth-notice--danger{border-color:#fecdca!important;background:#fffafa!important;color:#912018!important}.auth-notice--danger .auth-notice-icon{background:#f04438}.auth-notice--warning{border-color:#fedf89!important;background:#fffdf5!important;color:#7a4b0b!important}.auth-notice--warning .auth-notice-icon{background:#f79009}.auth-notice--success{border-color:#abefc6!important;background:#f7fef9!important;color:#05603a!important}.auth-notice--success .auth-notice-icon{background:#12b76a}.auth-notice--security{border-color:#fedf89!important;background:#fffdf5!important;color:#7a4b0b!important}.auth-notice--security .auth-notice-icon{background:#f79009}
@media(max-width:640px){.auth-card--clean,.auth-notices{width:min(92vw,360px)!important;max-width:min(92vw,360px)!important}.auth-card--clean{padding:26px 22px 24px!important}}