/* Portal Consorcio ERP Web · Rediseño responsive 2026
   CSS independiente: no modifica el estilo original de FoodHut. */
:root{color-scheme:dark;--bg:#0b1426;--bg-2:#101c32;--muted:#9caec4;--muted-2:#b6c5d8;--white:#f9fbff;--blue:#588dff;--purple:#9395fe;--stroke:rgba(189,208,245,.15);--radius:25px}
*,*::before,*::after{box-sizing:border-box}
html{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body{margin:0;min-width:320px;background:var(--bg);color:var(--white)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #8fbeff;outline-offset:5px;border-radius:8px}
.page-shell{min-height:100vh;display:flex;flex-direction:column;overflow:hidden;position:relative;background:radial-gradient(ellipse 750px 500px at 2% 5%,rgba(46,80,145,.21),transparent 70%),radial-gradient(ellipse 650px 570px at 100% 87%,rgba(39,54,124,.17),transparent 75%),var(--bg)}
.page-shell::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.23;background-image:linear-gradient(rgba(210,224,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(210,224,255,.04) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.container{width:min(1170px,calc(100% - 64px));margin-inline:auto;position:relative;z-index:1}
.site-header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.085)}
.brand{display:inline-flex;align-items:center;gap:13px}
.brand-symbol{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;color:#fff;background:linear-gradient(145deg,#4275e8,#5f91ff);box-shadow:0 8px 25px #234eae45}
.brand-symbol svg{width:29px;height:29px}
.brand-name{display:flex;flex-direction:column;gap:2px;letter-spacing:.16em;line-height:1}
.brand-name strong{font-size:17px;font-weight:800}
.brand-name small{font-size:11px;letter-spacing:.35em;color:#92afdb;font-weight:700}
.header-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;color:#b8cbe7;font-weight:750}
.label-dot,.visual-caption-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7aa0ff;box-shadow:0 0 0 4px rgba(109,153,255,.12)}
main.container{flex:1;display:flex;align-items:center;padding-block:48px 42px}
.portal-layout{width:100%;display:grid;grid-template-areas:"welcome panel" "visual panel";grid-template-columns:minmax(0,1.06fr) minmax(390px,.94fr);grid-template-rows:auto 196px;column-gap:65px;row-gap:36px;align-items:stretch}
.welcome{grid-area:welcome;align-self:center;padding-top:3px}
.eyebrow,.section-kicker{font-size:11px;letter-spacing:.18em;font-weight:800;color:#91acf7}
.eyebrow{display:flex;align-items:center;gap:12px;white-space:nowrap}
.eyebrow-line{width:22px;height:2px;background:#79a3ff;display:inline-block}
h1{font-size:clamp(41px,4.6vw,66px);font-weight:760;line-height:1.12;letter-spacing:-.055em;margin:23px 0 21px}
h1 span{color:#8daeff}
.welcome-description{max-width:475px;color:#a8bad1;line-height:1.75;font-size:15px;margin:0}
.welcome-detail{display:flex;align-items:center;gap:15px;margin-top:33px}
.detail-icon{display:grid;place-items:center;width:43px;height:43px;flex:none;border:1px solid rgba(143,178,247,.21);border-radius:12px;background:rgba(95,135,213,.10);color:#9bb7ff}
.detail-icon svg{width:21px;height:21px}
.welcome-detail div{display:flex;flex-direction:column;gap:4px}
.welcome-detail strong{font-size:13px;font-weight:740}
.welcome-detail div span{font-size:12px;color:#8fa3bd}
.access-panel{grid-area:panel;align-self:center;min-height:565px;padding:27px 29px 28px;border:1px solid rgba(182,208,255,.18);border-radius:var(--radius);background:linear-gradient(135deg,rgba(27,42,69,.98),rgba(17,29,51,.99));box-shadow:0 25px 75px rgba(0,3,18,.30),inset 0 1px rgba(255,255,255,.035);position:relative}
.access-panel::before{content:"";position:absolute;inset:1px 1px auto;height:120px;border-radius:24px 24px 0 0;background:radial-gradient(ellipse at 100% 0,rgba(88,134,239,.13),transparent 70%);pointer-events:none}
.panel-topline{display:flex;justify-content:space-between;align-items:center;position:relative}
.panel-step{font-size:10px;letter-spacing:.18em;color:#8398b8;font-weight:800}
.panel-step span{color:#516681;padding:0 4px}
.panel-accent{width:35px;height:4px;background:linear-gradient(90deg,#6d91f7,#8ba2fc);border-radius:3px}
.panel-heading{position:relative;margin:39px 0 28px}
.section-kicker{margin:0 0 10px;color:#9ab1e0}
h2{margin:0;font-size:29px;line-height:1.24;letter-spacing:-.04em;font-weight:760}
.panel-heading>p:last-child{margin:11px 0 0;font-size:13px;line-height:1.65;color:#9fafc7}
.environment{display:flex;position:relative;align-items:center;gap:16px;min-height:120px;padding:20px 18px;border-radius:16px;border:1px solid rgba(185,210,255,.15);margin-bottom:13px;background:rgba(40,57,84,.54);transition:transform .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.environment:hover{transform:translateY(-2px);border-color:rgba(138,177,251,.62);background:rgba(46,67,104,.75);box-shadow:0 12px 26px rgba(5,12,28,.18)}
.environment-production{background:linear-gradient(110deg,rgba(59,100,188,.24),rgba(36,56,90,.7));border-color:rgba(122,165,251,.4)}
.environment-production:hover{background:linear-gradient(110deg,rgba(63,111,206,.36),rgba(36,56,90,.85))}
.environment-icon{width:46px;height:46px;min-width:46px;border-radius:13px;display:grid;place-items:center;background:rgba(126,167,255,.13);color:#aac5ff}
.environment-production .environment-icon{background:rgba(104,153,255,.19);color:#b8ceff}
.environment-icon svg{width:24px;height:24px}
.environment-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}
.environment-tag{font-size:9px;font-weight:800;letter-spacing:.125em;color:#9db9ff}
.environment-beta .environment-tag{color:#aeb8d4}
.environment-info strong{font-size:21px;line-height:1.2;font-weight:750;letter-spacing:-.02em}
.environment-desc{font-size:11px;line-height:1.45;color:#9baec7}
.environment-arrow{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:rgba(157,187,242,.13);color:#c7d8ff}
.environment-arrow svg{width:18px;height:18px}
.access-help{display:flex;align-items:flex-start;gap:9px;margin:17px 4px 0;color:#90a4c1;font-size:11px;line-height:1.6}
.access-help span{font-size:14px;color:#a1baf1;line-height:1.15}
.visual-card{grid-area:visual;min-height:196px;border:1px solid rgba(186,208,241,.13);border-radius:19px;overflow:hidden;position:relative;background:#263a50 url('../imgs/main.jpg') center 43% / cover no-repeat;isolation:isolate}
.visual-card::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(11,23,44,.95),rgba(12,26,49,.60) 58%,rgba(12,23,41,.15)),linear-gradient(to top,rgba(8,14,29,.50),transparent 68%);z-index:-1}
.visual-overlay{height:100%;min-height:196px;padding:23px 27px;display:flex;flex-direction:column;justify-content:space-between}
.visual-caption{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:770;letter-spacing:.14em;color:#d3dded}
.visual-caption-dot{width:6px;height:6px;background:#a6c0ff;box-shadow:none}
.visual-bottom{display:flex;justify-content:space-between;gap:10px;align-items:flex-end}
.visual-bottom>span:first-child{font-size:19px;line-height:1.35;letter-spacing:-.02em;font-weight:700}
.visual-ornament{font-size:24px;line-height:1;opacity:.8}
.site-footer{border-top:1px solid rgba(255,255,255,.075);padding-block:23px 28px;display:flex;gap:18px;justify-content:space-between;color:#7186a3;font-size:11px;line-height:1.5}
.site-footer a{color:#acc6f5;text-decoration:underline;text-decoration-color:rgba(147,176,224,.45);text-underline-offset:4px}
.site-footer a:hover{color:#fff}
@media(max-width:1090px){.portal-layout{column-gap:35px;grid-template-columns:minmax(0,1fr) minmax(365px,.95fr)}h1{font-size:clamp(41px,4.8vw,58px)}}
@media(max-width:790px){.container{width:min(600px,calc(100% - 42px))}.site-header{height:88px}.portal-layout{grid-template-areas:"welcome" "panel" "visual";grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:28px}.welcome{padding-block:4px 0}main.container{padding-block:42px}.access-panel{min-height:unset;padding:26px}.panel-heading{margin:30px 0 24px}.visual-card,.visual-overlay{min-height:175px}.site-footer{flex-wrap:wrap;gap:8px}}
@media(max-width:450px){.container{width:calc(100% - 32px)}.site-header{height:79px}.brand-symbol{width:41px;height:41px}.brand-symbol svg{width:27px;height:27px}.brand-name strong{font-size:14px}.brand-name small{font-size:10px}.header-label{font-size:9px;letter-spacing:.08em}.label-dot{width:6px;height:6px}.eyebrow{font-size:9px;letter-spacing:.13em}h1{font-size:43px}.welcome-description{font-size:14px}.welcome-detail{margin-top:23px}main.container{padding-block:32px}.access-panel{padding:22px 17px;border-radius:21px}.panel-heading h2{font-size:25px}.environment{gap:11px;min-height:112px;padding:16px 11px}.environment-icon{height:41px;width:41px;min-width:41px}.environment-arrow{width:28px;height:28px}.environment-info strong{font-size:20px}.environment-tag{font-size:8px}.environment-desc{font-size:10px}.visual-overlay{padding:22px}.site-footer{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Identidad Cotexsur: logo original (recortado solo para quitar márgenes blancos). */
.brand-logo-surface{display:flex;align-items:center;justify-content:center;width:294px;height:70px;max-width:100%;padding:8px 13px;background:#fff;border:1px solid rgba(255,255,255,.80);border-radius:13px;box-shadow:0 9px 22px rgba(0,0,0,.18)}
.brand-logo-surface img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain}
@media(max-width:790px){.brand-logo-surface{width:257px;height:64px;padding:8px 12px}}
@media(max-width:450px){.brand-logo-surface{width:197px;height:52px;padding:7px 9px;border-radius:10px}.header-label{font-size:9px;letter-spacing:.025em;gap:6px}}
@media(max-width:350px){.brand-logo-surface{width:176px;height:48px}.header-label{font-size:8px;gap:5px}}