:root{
   --portal-verde:#6f9b4b;
   --portal-verde-suave:#8eb86a;
   --portal-azul:#1f4f6c;
   --portal-azul-profundo:#18384a;
   --portal-arena:#efe5d7;
   --portal-marfil:#fbf8f2;
   --portal-ocre:#d9b887;
   --portal-ocre-suave:#f2e1c8;
   --portal-texto:#23313d;
   --portal-texto-suave:#667684;
   --portal-borde:#dbe3e3;
   --portal-fondo:#f4f1eb;
   --portal-fondo-2:#edf2ef;
   --portal-exito:#edf7e7;
   --portal-advertencia:#fff2d8;
   --portal-error:#fdeceb;
   --portal-radio:22px;
   --portal-sombra:0 18px 48px rgba(20, 39, 49, 0.12);
   --portal-sombra-suave:0 10px 24px rgba(20, 39, 49, 0.08);
}

*{box-sizing:border-box}
html{min-height:100%}
body{
   margin:0;
   min-height:100vh;
   font-family:Inter,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
   color:var(--portal-texto);
   background:radial-gradient(circle at top, #ffffff 0%, var(--portal-fondo) 56%, #e5ebe8 100%);
}

a{color:var(--portal-azul);text-decoration:none}
a:hover{text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 12px 0;line-height:1.18;color:var(--portal-azul-profundo)}
h1{font-size:clamp(1.55rem,2vw,2rem)}
h2{font-size:1.18rem}
h3{font-size:1rem}
p{margin:0 0 12px 0;line-height:1.65}
ul{margin-top:0}
small,.small{color:var(--portal-texto-suave)}

.guest-shell{
   position:relative;
   min-height:100vh;
   overflow:hidden;
}
.guest-shell::before{
   content:"";
   position:fixed;
   inset:0;
   background:
      linear-gradient(135deg, rgba(18,36,47,.76), rgba(31,79,108,.42)),
      var(--portal-hero) center center / cover no-repeat;
   transform:scale(1.03);
   z-index:-2;
}
.guest-shell::after{
   content:"";
   position:fixed;
   inset:0;
   background:linear-gradient(180deg, rgba(250,248,243,.10), rgba(250,248,243,.16));
   z-index:-1;
}
.brand-banner{
   max-width:1220px;
   margin:20px auto 0 auto;
   padding:0 20px;
}
.brand-ribbon{
   background:linear-gradient(180deg,var(--portal-verde-suave) 0%, var(--portal-verde) 100%);
   color:#f9fff5;
   padding:14px 18px;
   text-align:center;
   border-radius:16px;
   box-shadow:0 10px 28px rgba(34,54,26,.18);
   letter-spacing:.02em;
   text-transform:uppercase;
   font-size:clamp(.88rem,1.7vw,1.08rem);
}
.guest-main{
   width:min(1220px, calc(100% - 32px));
   margin:24px auto 48px auto;
   display:grid;
   grid-template-columns:minmax(340px, 1.08fr) minmax(310px, .92fr);
   gap:30px;
   align-items:stretch;
}
.showcase-card,.auth-card,.card{
   border-radius:var(--portal-radio);
   box-shadow:var(--portal-sombra);
}
.showcase-card{
   position:relative;
   overflow:hidden;
   min-height:590px;
   display:flex;
   flex-direction:column;
   justify-content:flex-end;
   border:1px solid rgba(255,255,255,.18);
   background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
}
.showcase-card .panel-image{
   position:absolute;
   inset:0;
   background:
      linear-gradient(180deg, rgba(15,32,40,.10), rgba(15,32,40,.50)),
      var(--portal-hero) center center / cover no-repeat;
}
.showcase-card .panel-copy{
   position:relative;
   padding:34px;
   background:linear-gradient(180deg, rgba(16,29,36,.05), rgba(16,29,36,.68));
   color:#fff;
}
.showcase-card h1,.showcase-card h2,.showcase-card h3{color:#fff}
.showcase-card p{color:rgba(255,255,255,.92)}
.eyebrow{
   display:inline-flex;
   align-items:center;
   gap:8px;
   padding:6px 12px;
   border-radius:999px;
   background:rgba(255,255,255,.16);
   border:1px solid rgba(255,255,255,.18);
   color:#edf7e8;
   font-size:.8rem;
   text-transform:uppercase;
   letter-spacing:.05em;
   margin-bottom:16px;
}
.feature-list{
   list-style:none;
   padding:0;
   margin:18px 0 0 0;
   display:grid;
   gap:10px;
}
.feature-list li{
   display:flex;
   gap:10px;
   align-items:flex-start;
}
.feature-dot{
   width:10px;
   height:10px;
   margin-top:7px;
   border-radius:999px;
   background:#edf8dd;
   box-shadow:0 0 0 4px rgba(237,248,221,.18);
   flex:0 0 auto;
}
.footer-note{
   color:rgba(255,255,255,.82);
   font-size:.92rem;
   margin-top:20px;
}
.auth-card{
   align-self:center;
   background:rgba(251,249,244,.96);
   border:1px solid rgba(255,255,255,.55);
   padding:28px;
   backdrop-filter:blur(12px);
}
.auth-card--wide{align-self:flex-start}
.auth-subtitle{color:var(--portal-texto-suave);margin-bottom:20px}
.auth-footnote{
   margin-top:18px;
   padding-top:18px;
   border-top:1px solid #e2e7e6;
   font-size:.95rem;
   color:var(--portal-texto-suave);
}
.auth-links{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-between;
   gap:12px;
   align-items:center;
}

.site-header{
   position:sticky;
   top:0;
   z-index:30;
   background:rgba(249,248,243,.9);
   backdrop-filter:blur(14px);
   border-bottom:1px solid rgba(111,155,75,.18);
}
.site-header-inner{
   max-width:1260px;
   margin:0 auto;
   padding:14px 20px 16px 20px;
}
.site-header-top{
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:16px;
}
.site-brand{
   display:flex;
   gap:16px;
   align-items:center;
}
.site-brand-mark{
   width:44px;
   height:44px;
   border-radius:14px;
   background:linear-gradient(160deg, var(--portal-verde-suave), var(--portal-azul));
   box-shadow:var(--portal-sombra-suave);
   position:relative;
   overflow:hidden;
   flex:0 0 auto;
}
.site-brand-mark::before{
   content:"";
   position:absolute;
   inset:8px 10px 14px 10px;
   border-radius:999px 999px 40% 40%;
   background:rgba(255,255,255,.18);
}
.site-brand-mark::after{
   content:"";
   position:absolute;
   left:20px;
   top:8px;
   width:4px;
   height:28px;
   border-radius:999px;
   background:rgba(255,255,255,.85);
}
.site-title-wrap{display:flex;flex-direction:column;gap:4px}
.site-title{font-size:clamp(1rem,2vw,1.18rem);font-weight:800;color:var(--portal-azul-profundo)}
.site-subtitle{color:var(--portal-texto-suave);font-size:.92rem}
.header-tools{display:flex;gap:12px;align-items:center}
.user-pill{
   display:inline-flex;
   align-items:center;
   gap:10px;
   padding:10px 14px;
   border-radius:999px;
   background:linear-gradient(180deg,#ffffff 0%, #f4f6f2 100%);
   border:1px solid rgba(31,79,108,.12);
   box-shadow:var(--portal-sombra-suave);
   color:var(--portal-azul-profundo);
   font-size:.93rem;
}
.role-badge{
   display:inline-flex;
   align-items:center;
   gap:6px;
   padding:8px 12px;
   border-radius:999px;
   background:#eef4e6;
   border:1px solid #dbe8ce;
   color:#42642b;
   font-size:.86rem;
   font-weight:700;
}
.nav-toggle{
   display:none;
   align-items:center;
   justify-content:center;
   width:42px;
   height:42px;
   border-radius:12px;
   border:1px solid rgba(31,79,108,.12);
   background:#fff;
   color:var(--portal-azul-profundo);
   box-shadow:var(--portal-sombra-suave);
   cursor:pointer;
}
.site-nav{
   display:flex;
   align-items:center;
   gap:10px;
   flex-wrap:wrap;
   margin-top:14px;
   padding-top:14px;
   border-top:1px solid rgba(31,79,108,.08);
}
.site-nav a,.site-nav .logout-button{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   min-height:42px;
   padding:10px 16px;
   border-radius:999px;
   font-size:.95rem;
   transition:.2s ease;
   border:1px solid transparent;
}
.site-nav a{
   color:var(--portal-azul-profundo);
   background:rgba(255,255,255,.75);
   border-color:rgba(31,79,108,.08);
}
.site-nav a:hover,.site-nav a.is-active{
   background:#fff;
   border-color:rgba(31,79,108,.18);
   transform:translateY(-1px);
   box-shadow:var(--portal-sombra-suave);
}
.logout-form{display:inline;margin:0}
button,.button-link,.logout-button{
   border:0;
   border-radius:14px;
   padding:11px 16px;
   cursor:pointer;
   color:#fff;
   background:linear-gradient(180deg,var(--portal-azul) 0%, var(--portal-azul-profundo) 100%);
   box-shadow:0 10px 20px rgba(24,57,95,.16);
   font-weight:700;
   transition:.2s ease;
}
button:hover,.button-link:hover,.logout-button:hover{filter:brightness(1.03);transform:translateY(-1px)}
.logout-button{
   background:linear-gradient(180deg,#7ea84e 0%, #638f38 100%);
   box-shadow:0 10px 20px rgba(70,115,34,.18);
}
.button-secondary,.plain-link-button{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   min-height:42px;
   padding:10px 16px;
   border-radius:14px;
   background:#eef4f8;
   color:var(--portal-azul-profundo);
   border:1px solid rgba(31,79,108,.1);
   box-shadow:none;
   font-weight:600;
}
.button-secondary:hover,.plain-link-button:hover{background:#e8eff6}

.page-main{
   max-width:1260px;
   margin:28px auto 42px auto;
   padding:0 20px;
}
.page-hero{
   background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,244,236,.98));
   border:1px solid rgba(31,79,108,.08);
   padding:24px 28px;
   margin-bottom:18px;
   border-radius:var(--portal-radio);
   box-shadow:var(--portal-sombra);
}
.page-kicker{
   display:inline-flex;
   align-items:center;
   gap:8px;
   padding:6px 11px;
   border-radius:999px;
   background:#edf4e6;
   color:#47662f;
   font-size:.82rem;
   text-transform:uppercase;
   letter-spacing:.05em;
   margin-bottom:12px;
}
.page-lead{
   color:var(--portal-texto-suave);
   max-width:860px;
}
.card{
   background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(251,249,243,.98) 100%);
   border:1px solid rgba(31,79,108,.08);
   padding:22px;
   margin-bottom:18px;
   border-radius:var(--portal-radio);
}
.card-header{
   display:flex;
   justify-content:space-between;
   align-items:flex-start;
   gap:14px;
   flex-wrap:wrap;
   margin-bottom:16px;
}
.card-title{margin-bottom:4px}
.card-subtitle{color:var(--portal-texto-suave);margin:0}
.card-actions{display:flex;gap:10px;flex-wrap:wrap}
.grid{
   display:grid;
   grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
   gap:18px;
}
.grid-2{
   display:grid;
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:18px;
}
.grid-3{
   display:grid;
   grid-template-columns:repeat(3,minmax(0,1fr));
   gap:18px;
}
.stats-grid{
   display:grid;
   grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
   gap:18px;
}
.stat-card{
   position:relative;
   overflow:hidden;
   background:linear-gradient(180deg, #ffffff 0%, #f8f5ef 100%);
}
.stat-card::after{
   content:"";
   position:absolute;
   right:-20px; top:-20px;
   width:110px; height:110px;
   border-radius:999px;
   background:linear-gradient(180deg, rgba(111,155,75,.08), rgba(31,79,108,.06));
}
.stat-label{
   color:var(--portal-texto-suave);
   font-size:.92rem;
   position:relative;
}
.stat-number{
   position:relative;
   font-size:clamp(1.8rem,3vw,2.5rem);
   font-weight:800;
   color:var(--portal-azul-profundo);
   letter-spacing:-.02em;
   margin:2px 0 8px 0;
}
.stat-meta{
   position:relative;
   color:var(--portal-texto-suave);
   font-size:.9rem;
}
.data-list{
   display:grid;
   gap:12px;
}
.data-item{
   display:flex;
   justify-content:space-between;
   gap:12px;
   align-items:flex-start;
   padding:12px 14px;
   border:1px solid #e8eeec;
   border-radius:16px;
   background:#fff;
}
.data-item-title{font-weight:700;color:var(--portal-azul-profundo);margin-bottom:4px}
.data-item-meta{font-size:.92rem;color:var(--portal-texto-suave)}
.metric-chip{
   display:inline-flex;
   align-items:center;
   gap:8px;
   padding:7px 12px;
   border-radius:999px;
   background:#eef3fb;
   color:var(--portal-azul-profundo);
   font-size:.88rem;
}
.empty-state{
   text-align:center;
   padding:26px 18px;
   border-radius:18px;
   border:1px dashed #d4dddd;
   background:rgba(255,255,255,.65);
   color:var(--portal-texto-suave);
}
label{
   display:block;
   font-weight:700;
   margin-bottom:7px;
   color:var(--portal-azul-profundo);
}
input,select,textarea{
   width:100%;
   padding:12px 14px;
   border:1px solid #cfd8d5;
   border-radius:14px;
   background:rgba(255,255,255,.96);
   color:var(--portal-texto);
   font:inherit;
   transition:.18s ease;
}
input:focus,select:focus,textarea:focus{
   outline:none;
   border-color:rgba(31,79,108,.38);
   box-shadow:0 0 0 4px rgba(31,79,108,.08);
}
input[disabled],input[readonly]{
   background:#f3f4f2;
   color:#58636d;
}
.form-grid{
   display:grid;
   grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
   gap:16px;
}
.form-actions,.split-actions{
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:14px;
   flex-wrap:wrap;
}
.field-hint{font-size:.86rem;color:var(--portal-texto-suave);margin-top:6px}
.checkbox-row{
   display:flex;
   align-items:flex-start;
   gap:10px;
}
.checkbox-row input{width:auto;margin-top:3px}
table{
   width:100%;
   border-collapse:collapse;
   background:#fff;
}
.table-shell{
   overflow:auto;
   border-radius:18px;
   border:1px solid #e7ece8;
   background:#fff;
}
thead th{
   background:linear-gradient(180deg, #edf4e6 0%, #e0ebd3 100%);
   color:var(--portal-azul-profundo);
   font-size:.86rem;
   text-transform:uppercase;
   letter-spacing:.04em;
   white-space:nowrap;
}
th,td{
   padding:13px 14px;
   border-bottom:1px solid #e8ece8;
   text-align:left;
   vertical-align:top;
}
tbody tr:nth-child(even){background:#fcfdfb}
tbody tr:hover{background:#f7faf5}
.table-actions{
   display:flex;
   gap:8px;
   flex-wrap:wrap;
}
.badge{
   display:inline-flex;
   align-items:center;
   gap:6px;
   padding:6px 10px;
   border-radius:999px;
   font-size:.8rem;
   font-weight:700;
}
.badge--green{background:#ecf7e6;color:#3e6723}
.badge--blue{background:#eef4fb;color:#215072}
.badge--amber{background:#fff3db;color:#85570f}
.badge--red{background:#fdeceb;color:#8a2a1b}
.badge--gray{background:#eef1f3;color:#55616b}
.muted{color:var(--portal-texto-suave)}
.success,.warning,.error-box{
   border-radius:16px;
   padding:14px 16px;
   margin-bottom:18px;
   border:1px solid transparent;
}
.success{background:var(--portal-exito);border-color:#cfe3bd;color:#315321}
.warning{background:var(--portal-advertencia);border-color:#efd7a9;color:#7a5313}
.error-box{background:var(--portal-error);border-color:#f3c3be;color:#8a2a1b}
.error-box ul{margin:0;padding-left:18px}
.section-divider{
   height:1px;
   background:linear-gradient(90deg, rgba(31,79,108,.10), rgba(31,79,108,0));
   margin:18px 0;
}
.pagination-wrap{
   margin-top:16px;
   display:flex;
   justify-content:flex-end;
}
.inline-form{display:inline}
.hero-facts{
   display:grid;
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:12px;
   margin-top:18px;
}
.hero-fact{
   padding:12px 14px;
   border-radius:16px;
   background:rgba(255,255,255,.12);
   border:1px solid rgba(255,255,255,.14);
}
.hero-fact-label{
   font-size:.78rem;
   text-transform:uppercase;
   letter-spacing:.05em;
   color:rgba(255,255,255,.78);
   margin-bottom:4px;
}
.hero-fact-value{
   font-size:1rem;
   font-weight:700;
   color:#fff;
}
@media (max-width: 980px){
   .guest-main{grid-template-columns:1fr;width:min(760px, calc(100% - 24px))}
   .showcase-card{min-height:340px}
   .auth-card{order:-1}
   .grid-2,.grid-3{grid-template-columns:1fr}
}
@media (max-width: 760px){
   .site-header-inner{padding:14px 12px 16px 12px}
   .page-main{padding:0 12px}
   .brand-banner{padding:0 12px}
   .site-header-top{align-items:flex-start}
   .header-tools{margin-left:auto}
   .nav-toggle{display:inline-flex}
   .site-nav{
      display:none;
      flex-direction:column;
      align-items:stretch;
   }
   .site-nav.is-open{display:flex}
   .site-nav a,.site-nav .logout-form,.site-nav .logout-button{width:100%}
   .site-nav .logout-button{justify-content:center}
}
@media (max-width: 640px){
   .card,.auth-card,.page-hero{padding:18px}
   th,td{padding:10px 11px}
   .hero-facts{grid-template-columns:1fr}
}


/* Segundo pulido visual */
.showcase-card .panel-copy{
   background:linear-gradient(180deg, rgba(16,29,36,.02), rgba(16,29,36,.72));
}
.hero-fact{
   backdrop-filter:blur(10px);
   box-shadow:0 10px 18px rgba(13, 28, 36, .10);
}
.feature-list li span:last-child{
   color:rgba(255,255,255,.94);
}
.auth-card h2{
   letter-spacing:-.01em;
}
.auth-card .page-kicker{
   margin-bottom:10px;
}
@media (max-width: 980px){
   .showcase-card .panel-copy{
      padding:26px;
   }
}

/* Tercer pulido visual - conservador para producción */
.brand-banner{
   margin:24px auto 0 auto;
}
.brand-ribbon{
   padding:15px 20px;
   box-shadow:0 12px 26px rgba(34,54,26,.15);
}
.guest-main{
   margin:30px auto 56px auto;
   gap:34px;
}
.guest-shell::before{
   background:
      linear-gradient(135deg, rgba(18,36,47,.72), rgba(31,79,108,.38)),
      var(--portal-hero) center center / cover no-repeat;
}
.guest-shell::after{
   background:linear-gradient(180deg, rgba(250,248,243,.08), rgba(250,248,243,.18));
}
.showcase-card{
   border:1px solid rgba(255,255,255,.14);
   box-shadow:0 22px 54px rgba(18,34,42,.16);
}
.showcase-card .panel-copy{
   padding:38px;
   background:linear-gradient(180deg, rgba(16,29,36,.00), rgba(16,29,36,.74));
}
.showcase-card h1{
   font-size:clamp(1.8rem,2.4vw,2.35rem);
   letter-spacing:-.02em;
   margin-bottom:14px;
}
.showcase-card p{
   color:rgba(255,255,255,.90);
}
.eyebrow{
   margin-bottom:18px;
   background:rgba(255,255,255,.14);
}
.feature-list{
   margin-top:22px;
   gap:12px;
}
.footer-note{
   margin-top:24px;
   color:rgba(255,255,255,.76);
}
.auth-card{
   background:rgba(251,249,244,.88);
   border:1px solid rgba(255,255,255,.40);
   padding:30px;
   backdrop-filter:blur(16px);
   box-shadow:0 18px 42px rgba(18,34,42,.16);
}
.auth-card h2{
   font-size:clamp(1.4rem,1.8vw,1.7rem);
   margin-bottom:10px;
}
.auth-subtitle{
   margin-bottom:24px;
   line-height:1.72;
}
.auth-footnote{
   margin-top:20px;
   padding-top:20px;
}
.page-kicker{
   background:rgba(237,244,230,.92);
   border:1px solid rgba(111,155,75,.12);
}
.hero-fact{
   background:rgba(255,255,255,.14);
}
input,select,textarea,
button,.button-link,.logout-button,
.site-nav a,.button-secondary,.plain-link-button{
   transition:background-color .24s ease,border-color .24s ease,box-shadow .24s ease,transform .24s ease,filter .24s ease,opacity .24s ease;
}
button:hover,.button-link:hover,.logout-button:hover{
   filter:brightness(1.02);
   transform:translateY(-1px);
}
.site-nav a:hover,.site-nav a.is-active{
   box-shadow:0 8px 18px rgba(20,39,49,.10);
}
@media (max-width: 980px){
   .guest-main{
      gap:26px;
      margin:24px auto 44px auto;
   }
   .showcase-card .panel-copy{
      padding:28px;
   }
}
@media (max-width: 640px){
   .auth-card{
      padding:20px;
   }
   .showcase-card .panel-copy{
      padding:22px;
   }
}