:root{
  --ink:#13231f;
  --muted:#65736e;
  --cream:#f5f2e9;
  --paper:#fffdf7;
  --green:#173f36;
  --green2:#2c6758;
  --line:#d9ded7;
  --accent:#e6b84f;
  --danger:#9e3e3e;
  --success:#2b6f55;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--cream);color:var(--ink)}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 5vw;border-bottom:1px solid rgba(19,35,31,.12);background:rgba(245,242,233,.94);position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}
.brand{font-size:1.65rem;font-weight:900;letter-spacing:.18em;color:var(--green)}
.top-actions{display:flex;align-items:center;gap:12px}
main{width:min(1180px,90vw);margin:0 auto;flex:1;padding:24px 0 72px}
.view{animation:fade .22s ease}
.hidden{display:none!important}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.auth-view{display:grid;grid-template-columns:1.2fr .8fr;gap:54px;align-items:center;min-height:68vh}
.hero-copy h1,.page-heading h1,#mapView>h1,#adminLog>h1{font-family:Georgia,serif;font-weight:500;line-height:1.02;letter-spacing:-.035em;font-size:clamp(2.6rem,6vw,5.2rem);margin:.15em 0 .35em}
.lead{font-size:1.22rem;line-height:1.6;max-width:650px;color:var(--muted)}
.eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.18em;color:var(--green2);margin:0 0 12px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:22px}
.form-panel{padding:28px}
.form-panel h2,.panel h2{margin:0 0 20px;font-size:1.4rem}
label{display:flex;flex-direction:column;gap:8px;font-size:.9rem;font-weight:700;color:#31443e}
input,select{width:100%;border:1px solid #cdd5cf;border-radius:12px;background:white;padding:13px 14px;color:var(--ink);min-height:48px;outline:none}
input:focus,select:focus{border-color:var(--green2);box-shadow:0 0 0 3px rgba(44,103,88,.12)}
.btn{border:0;border-radius:999px;padding:12px 20px;min-height:46px;font-weight:800}
.btn-primary{background:var(--green);color:white}
.btn-primary:hover{background:#0e3129}
.btn-secondary{background:#e7ece8;color:var(--green)}
.btn-ghost{background:transparent;color:var(--green);border:1px solid #cbd4ce}
.text-btn{border:0;background:transparent;color:var(--green2);padding:0;font-weight:800}
.hint,.muted{color:var(--muted)}
.hint{font-size:.82rem;line-height:1.45;margin:14px 0 0}
.error{margin:14px 0 0;color:var(--danger);font-weight:700}
.page-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:34px}
.page-heading h1{font-size:clamp(2.4rem,5vw,4.2rem);margin-bottom:0}
.cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.feature-card{text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:22px;padding:30px;min-height:290px;display:flex;flex-direction:column;align-items:flex-start;color:var(--ink)}
.feature-card:hover{border-color:#aebdb5;transform:translateY(-2px)}
.card-index{font-size:.72rem;letter-spacing:.14em;color:var(--green2);font-weight:900}
.feature-card h2{font-family:Georgia,serif;font-size:2rem;font-weight:500;margin:auto 0 12px}
.feature-card p{color:var(--muted);line-height:1.55;max-width:420px}
.card-link{font-weight:900;color:var(--green);margin-top:14px}
.split{align-items:center}
.stepper{display:flex;gap:8px;flex-wrap:wrap}
.step{font-size:.8rem;padding:8px 12px;border-radius:999px;background:#e9ece8;color:#73817c;font-weight:800}
.step.active{background:var(--green);color:white}
.quote-panel{margin-bottom:18px}
.panel-heading,.result-top{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:20px}
.form-grid{display:grid;gap:16px}
.form-grid.three{grid-template-columns:repeat(3,1fr)}
.form-grid.two{grid-template-columns:repeat(2,1fr)}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.badge{display:inline-flex;padding:7px 10px;border-radius:999px;background:#ecefea;color:#53625d;font-size:.75rem;font-weight:900}
.badge-success{background:#dfece6;color:var(--success)}
.result-panel,.rejection-panel{padding:28px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:#f0f2ed;border-radius:16px;padding:18px;min-width:0}
.kpi span{display:block;color:var(--muted);font-size:.78rem;margin-bottom:10px}
.kpi strong{font-size:1.14rem;word-break:break-word}
.kpi.highlight{background:var(--green);color:white}
.kpi.highlight span{color:#dfe9e5}
.calc-note{margin-top:16px;padding:15px 17px;border-left:4px solid var(--accent);background:#faf4df;border-radius:10px;line-height:1.5;font-size:.9rem}
.internal-details{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.internal-details summary{font-weight:800;color:var(--green2)}
.internal-grid{display:grid;grid-template-columns:1fr auto;gap:10px 22px;margin-top:14px;max-width:520px}
.rejection-panel{text-align:center;padding:44px 28px}
.map-placeholder{display:grid;grid-template-columns:1.4fr .6fr;gap:28px;padding:28px;align-items:center}
.map-art{min-height:360px;border-radius:16px;background:linear-gradient(145deg,#dfe9e5,#f4f1e7);position:relative;overflow:hidden}
.storm-track{position:absolute;height:3px;background:var(--green2);border-radius:999px;transform-origin:left center;opacity:.75}
.t1{width:65%;left:8%;top:28%;transform:rotate(16deg)}.t2{width:52%;left:30%;top:60%;transform:rotate(-10deg)}.t3{width:46%;left:17%;top:76%;transform:rotate(24deg)}
.map-dot{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid white;box-shadow:0 0 0 2px var(--green2)}
.d1{left:58%;top:41%}.d2{left:71%;top:55%}.d3{left:43%;top:69%}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:820px}th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-size:.88rem}th{background:#eef0eb;color:#4d5b56}
.footer{width:min(1180px,90vw);margin:0 auto;padding:22px 0 34px;border-top:1px solid rgba(19,35,31,.12);display:flex;justify-content:space-between;color:var(--muted);font-size:.82rem}
@media(max-width:850px){
  main{padding-top:36px}.auth-view{grid-template-columns:1fr;min-height:auto}.cards-grid{grid-template-columns:1fr}.page-heading{align-items:start;flex-direction:column}.form-grid.three,.form-grid.two,.kpi-grid{grid-template-columns:1fr}.map-placeholder{grid-template-columns:1fr}.topbar{padding:18px 5vw}.session-label{display:none}.hero-copy h1{font-size:3.3rem}
}
@media print{
  body{background:white}.topbar,.footer,.page-heading,.actions,.internal-details,.calc-note{display:none!important}main{width:100%;padding:0}.panel{border:0}.result-panel{display:block!important}.kpi-grid{grid-template-columns:repeat(2,1fr)}
}

.footer-admin-links{display:flex;gap:16px;align-items:center}
.admin-create-panel{margin-bottom:18px}
.admin-users-table{padding:0 0 8px}
.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 24px 8px}
.table-toolbar h2{margin:0}
.cell-sub{font-size:.75rem;color:var(--muted);margin-top:4px}
.status-pill{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:.74rem;font-weight:900;white-space:nowrap}
.status-active{background:#dfece6;color:var(--success)}
.status-pending{background:#f7edd1;color:#7a5a13}
.status-off{background:#eee4e4;color:var(--danger)}
.row-actions{display:flex;gap:7px;flex-wrap:wrap}
.mini-btn{border:1px solid var(--line);background:#f7f8f5;color:var(--green);padding:7px 10px;border-radius:999px;font-size:.75rem;font-weight:800;white-space:nowrap}
.mini-btn:hover{border-color:#9fb0a7}
@media(max-width:850px){.footer-admin-links{gap:10px}.table-toolbar{align-items:flex-start;flex-direction:column}}


/* WILMA official logo */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.brand img {
  display: block;
  width: auto;
  height: 44px;
  max-width: 220px;
  object-fit: contain;
}
@media (max-width: 640px) {
  .brand img {
    height: 36px;
    max-width: 180px;
  }
}

/* v6 — portada corporativa inspirada en la referencia proporcionada */
.auth-redesign{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(330px,.75fr);
  gap:clamp(28px,4vw,72px);
  align-items:start;
  padding-top:clamp(8px,1.5vw,18px);
}
.auth-main{min-width:0;}
.hero-copy-compact{max-width:760px;margin-bottom:26px;}
.hero-copy-compact h1{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:500;
  font-size:clamp(46px,5vw,82px);
  line-height:.98;
  letter-spacing:-.035em;
  margin:10px 0 18px;
  color:#102b24;
}
.hero-copy-compact .lead{max-width:680px;font-size:clamp(17px,1.4vw,22px);line-height:1.45;margin:0;color:#61716c;}
.hero-rule{width:62px;height:4px;border-radius:999px;background:#0ea4a6;margin:14px 0 20px;}
.audience-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:22px;
}
.audience-card{
  overflow:hidden;
  border:1px solid #d8ded8;
  border-radius:18px;
  background:#fffdf8;
  box-shadow:0 12px 28px rgba(16,43,36,.06);
  min-width:0;
}
.audience-card img{display:block;width:100%;aspect-ratio:1.9/1;object-fit:cover;}
.audience-body{padding:15px 16px 17px;}
.audience-body h3{margin:0 0 5px;font-size:18px;line-height:1.15;color:#087d80;}
.audience-body p{margin:0;font-size:14px;line-height:1.4;color:#536761;}
.login-panel-redesign{
  position:sticky;
  top:28px;
  padding:clamp(26px,3vw,38px);
  border-radius:24px;
  box-shadow:0 20px 50px rgba(16,43,36,.08);
}
.login-panel-heading{margin-bottom:22px;}
.login-panel-heading h2{font-size:clamp(28px,2.5vw,38px);margin:4px 0 8px;}
.login-panel-heading p:not(.eyebrow){margin:0;color:#677771;line-height:1.45;}
.login-panel-redesign label{margin-bottom:16px;}
.btn-login{width:100%;justify-content:center;margin-top:4px;}
.secure-note{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:22px;
  padding:16px 18px;
  border-radius:14px;
  background:#eaf5f1;
  color:#24594d;
  font-size:13px;
  line-height:1.45;
}
.secure-note span{color:#5c746d;}
@media (max-width:1050px){
  .auth-redesign{grid-template-columns:1fr;}
  .login-panel-redesign{position:static;max-width:720px;width:100%;}
}
@media (max-width:760px){
  .audience-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero-copy-compact h1{font-size:clamp(42px,12vw,62px);}
}
@media (max-width:520px){
  .audience-grid{grid-template-columns:1fr;}
  .audience-card img{aspect-ratio:1.8/1;}
}

/* v8 — ajustes de portada y acceso corporativo */
.auth-redesign{
  padding-top:0;
}
.hero-copy-compact{
  margin-top:0;
}
.topbar{
  padding-top:14px;
  padding-bottom:14px;
}
main{
  padding-top:12px;
}

.password-wrap{position:relative;}
.password-wrap input{padding-right:82px;}
.password-toggle{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#5a7069;
  font-size:.78rem;
  font-weight:800;
  padding:6px;
}
.remember-row{
  display:flex!important;
  flex-direction:row!important;
  align-items:center;
  gap:10px!important;
  margin:2px 0 18px!important;
  font-weight:500;
  color:#263d36;
  cursor:pointer;
}
.remember-row input{
  width:18px;
  height:18px;
  min-height:0;
  margin:0;
  accent-color:var(--green2);
}
.login-separator{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0 16px;
  color:#7a8883;
  font-size:.82rem;
}
.login-separator::before,.login-separator::after{
  content:"";
  height:1px;
  flex:1;
  background:#d9ded7;
}
.btn-admin-access{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:transparent;
  color:#17604f;
  border:1.5px solid #2b806b;
}
.btn-admin-access:hover{background:#eef7f3;}
.admin-shield{font-size:1.15rem;line-height:1;}
.forgot-password{
  display:block;
  margin:18px auto 0;
  border:0;
  background:transparent;
  color:#17604f;
  text-decoration:underline;
  font-size:.86rem;
  padding:4px;
}
.secure-note-rich{
  flex-direction:row;
  align-items:flex-start;
  gap:12px;
  margin-top:22px;
}
.secure-note-rich > span:last-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.security-icon{
  flex:0 0 28px;
  width:28px;
  height:28px;
  border:1.5px solid #2b806b;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#2b806b!important;
}
.login-info{
  margin:14px 0 0;
  padding:11px 13px;
  border-radius:10px;
  background:#eef5f1;
  color:#315e51;
  font-size:.82rem;
  line-height:1.4;
}
@media(max-width:850px){
  main{padding-top:10px;}
}

/* v12.9 - Recuperación de contraseña */
.auth-modal{position:fixed;inset:0;background:rgba(9,31,27,.48);display:flex;align-items:center;justify-content:center;padding:24px;z-index:1000}
.auth-modal.hidden{display:none}
.auth-modal-card{position:relative;width:min(520px,100%);background:#fffdfa;border:1px solid rgba(17,78,67,.14);border-radius:28px;box-shadow:0 24px 70px rgba(11,45,39,.24);padding:34px}
.auth-modal-card h2{margin:.2rem 0 .65rem;font-size:2rem;color:#102c27}
.auth-modal-card form{display:grid;gap:16px;margin-top:22px}
.auth-modal-card label{display:grid;gap:8px;font-weight:700;color:#27483f}
.auth-modal-card input{width:100%;box-sizing:border-box;border:1px solid #cbd7d2;border-radius:14px;padding:15px 16px;font:inherit;background:#fff}
.auth-modal-card .btn{width:100%;margin-top:2px}
.auth-modal-close{position:absolute;right:18px;top:14px;border:0;background:transparent;font-size:30px;line-height:1;color:#58726b;cursor:pointer}

/* v12.15 - segunda validacion por correo */
.otp-code-input{font-size:1.65rem!important;letter-spacing:.42em;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
#otpModal .forgot-password{display:block;margin:14px auto 0}


/* WILMA dashboard card alignment */
#dashboardView .cards-grid{
  align-items:stretch;
}
#dashboardView .feature-card:not(.hidden){
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
}
#dashboardView .feature-card.hidden{
  display:none !important;
}
#dashboardView .feature-card .card-index{
  flex:0 0 auto;
}
#dashboardView .feature-card h2{
  margin-top:3.25rem !important;
  margin-bottom:0 !important;
  flex:0 0 auto;
}
#dashboardView .feature-card p{
  margin-top:1.55rem !important;
  margin-bottom:0 !important;
  min-height:3.2em;
  flex:0 0 auto;
}
#dashboardView .feature-card .card-link{
  margin-top:1.55rem !important;
  flex:0 0 auto;
}