.access-body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; background: #f5f8fc; }
.access-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(460px, 1.04fr) minmax(430px, .96fr); }
.access-showcase { position: relative; display: flex; min-height: 100vh; overflow: hidden; flex-direction: column; padding: clamp(30px, 4vw, 62px); color: white; background: radial-gradient(circle at 72% 16%, rgba(63, 139, 255, .3), transparent 27%), linear-gradient(145deg, #06152f, #0a2d67 62%, #0b3d88); }
.access-showcase::after { position: absolute; right: -11%; bottom: -20%; width: 60%; aspect-ratio: 1; content: ""; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.018), 0 0 0 160px rgba(255,255,255,.012); }
.access-orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .34; }
.access-orb.orb-a { top: 22%; right: 11%; width: 190px; height: 190px; background: rgba(38, 118, 255, .22); animation: accessFloat 8s ease-in-out infinite; }
.access-orb.orb-b { left: -90px; bottom: 18%; width: 260px; height: 260px; background: rgba(60, 190, 255, .12); animation: accessFloat 10s ease-in-out -3s infinite; }
.access-brand, .company-brand { position: relative; z-index: 2; display: grid; width: max-content; grid-template-columns: 44px auto; align-items: center; column-gap: 11px; }
.access-brand > span, .company-brand > span, .mobile-access-brand > span { display: grid; width: 44px; height: 44px; grid-row: span 2; place-items: center; border-radius: 14px; color: #1f61db; background: white; box-shadow: 0 14px 34px rgba(1, 10, 29, .28); font-size: 24px; font-weight: 900; }
.access-brand strong, .company-brand strong { color: white; font-size: 18px; letter-spacing: -.02em; }
.access-brand small, .company-brand small { color: rgba(219,234,254,.55); font-size: 10px; }
.showcase-copy { position: relative; z-index: 2; max-width: 610px; margin: auto 0 34px; }
.access-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #bcd8ff; font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.access-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #61c9ff; box-shadow: 0 0 0 5px rgba(97,201,255,.12), 0 0 18px rgba(97,201,255,.75); }
.showcase-copy h1 { margin: 20px 0 18px; color: white; font-size: clamp(45px, 5vw, 76px); line-height: .98; letter-spacing: -.06em; }
.showcase-copy h1 em { color: #70aaff; font-style: normal; }
.showcase-copy p { max-width: 520px; margin: 0; color: rgba(219,234,254,.65); font-size: 15px; line-height: 1.75; }
.showcase-card { position: relative; z-index: 2; width: min(520px, 90%); padding: 21px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(255,255,255,.08); box-shadow: 0 25px 70px rgba(0,7,23,.24); backdrop-filter: blur(15px); }
.showcase-card header { display: flex; justify-content: space-between; color: #dbeafe; font-size: 11px; font-weight: 650; }
.showcase-card header small { color: rgba(219,234,254,.44); }
.showcase-card > strong { display: inline-block; margin-top: 12px; color: white; font-size: 30px; letter-spacing: -.04em; }
.showcase-card > em { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; color: #77e4bf; font-size: 10px; font-style: normal; font-weight: 750; }
.showcase-card > em .icon { width: 13px; height: 13px; }
.showcase-chart { display: flex; height: 58px; align-items: flex-end; gap: 12px; margin: 18px 0 12px; }
.showcase-chart i, .showcase-chart b, .showcase-chart span { flex: 1; border-radius: 5px 5px 2px 2px; animation: chartRise 900ms cubic-bezier(.16,1,.3,1) both; }
.showcase-chart i { height: 34%; background: #63a0ff; }.showcase-chart b { height: 72%; background: #49d3c0; }.showcase-chart span { height: 48%; background: #72adff; }
.showcase-chart :nth-child(4) { height: 61%; }.showcase-chart :nth-child(5) { height: 92%; }.showcase-chart :nth-child(6) { height: 68%; }.showcase-chart :nth-child(7) { height: 79%; }.showcase-chart :nth-child(8) { height: 100%; }.showcase-chart :nth-child(9) { height: 82%; }
.showcase-card footer { display: flex; gap: 18px; color: rgba(219,234,254,.55); font-size: 9px; }
.showcase-card footer span { display: flex; align-items: center; gap: 5px; }.showcase-card footer i { width: 6px; height: 6px; border-radius: 50%; }.showcase-card footer .green { background: #49d3c0; }.showcase-card footer .blue { background: #72adff; }
.access-copyright { position: relative; z-index: 2; margin: 28px 0 0; color: rgba(219,234,254,.35); font-size: 9px; }
.access-panel { display: grid; min-height: 100vh; place-items: center; padding: 46px clamp(30px, 7vw, 100px); background: white; }
.access-form-wrap { width: min(420px, 100%); }
.mobile-access-brand { display: none; align-items: center; gap: 10px; margin-bottom: 40px; }.mobile-access-brand strong { color: #0b1f3a; font-size: 19px; }
.access-step { display: inline-flex; padding: 6px 9px; border-radius: 999px; color: #1f5cca; background: #edf5ff; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.access-form-wrap h2, .company-heading h1 { margin: 15px 0 7px; color: #101828; font-size: clamp(29px, 3vw, 38px); letter-spacing: -.045em; }
.access-subtitle, .company-heading p { margin: 0; color: #667085; font-size: 12px; }
.access-form { display: grid; gap: 18px; margin-top: 32px; }
.access-field { display: grid; gap: 6px; }
.access-field > label, .field-label-row label { color: #344054; font-size: 10px; font-weight: 750; }
.field-label-row { display: flex; justify-content: space-between; }.field-label-row a { color: #2563eb; font-size: 9px; font-weight: 700; }
.access-field > div:not(.field-label-row) { position: relative; }
.access-field > div > .icon { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; color: #98a2b3; transform: translateY(-50%); }
.access-field input { width: 100%; height: 50px; padding: 0 45px 0 42px; border: 1px solid #dce4ee; border-radius: 13px; outline: 0; background: #fbfcfe; font-size: 12px; transition: border 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.access-field input:focus { border-color: #82b0fa; background: white; box-shadow: 0 0 0 4px rgba(37,99,235,.08); }
.access-field button { position: absolute; right: 7px; top: 6px; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: #98a2b3; background: transparent; }
.access-field button:hover, .access-field button.is-visible { color: #2563eb; background: #eff6ff; }
.access-field button .icon { width: 16px; height: 16px; }
.access-field > span { color: #d94343; font-size: 9px; }
.access-check { display: flex; width: max-content; align-items: center; gap: 8px; color: #667085; font-size: 10px; cursor: pointer; }.access-check input { position: absolute; opacity: 0; }.access-check i { display: grid; width: 17px; height: 17px; place-items: center; border: 1px solid #cad4e0; border-radius: 5px; color: transparent; background: white; }.access-check i .icon { width: 11px; height: 11px; }.access-check input:checked + i { border-color: #2563eb; color: white; background: #2563eb; }
.access-submit { display: flex; height: 50px; align-items: center; justify-content: center; gap: 10px; border-radius: 13px; color: white; background: linear-gradient(135deg,#2563eb,#1c52bf); box-shadow: 0 13px 28px rgba(37,99,235,.24); font-size: 12px; font-weight: 800; transition: transform 350ms cubic-bezier(.16,1,.3,1), box-shadow 250ms ease; }.access-submit:hover { box-shadow: 0 18px 34px rgba(37,99,235,.31); transform: translateY(-2px); }.access-submit .icon { width: 16px; height: 16px; }
.access-security { display: flex; align-items: center; gap: 11px; margin-top: 28px; padding: 13px; border: 1px solid #e2e8f0; border-radius: 13px; background: #f9fbfd; }.access-security > .icon { width: 20px; height: 20px; color: #079669; }.access-security span { display: flex; flex-direction: column; }.access-security strong { color: #344054; font-size: 10px; }.access-security small { color: #98a2b3; font-size: 8px; }
.access-help { margin: 22px 0 0; color: #98a2b3; font-size: 9px; text-align: center; }.access-help a { color: #2563eb; font-weight: 750; }
.access-validation:empty { display: none; }.access-validation { padding: 10px; border-radius: 10px; color: #b42318; background: #fff3f2; font-size: 10px; }
.access-enter { animation: accessEnter 650ms cubic-bezier(.16,1,.3,1) both; }

/* Selección de empresa */
.company-body { background: radial-gradient(circle at 50% -10%, #e6f0ff, transparent 30%), #f4f7fb; }
.company-shell { min-height: 100vh; }
.company-topbar { display: flex; min-height: 76px; align-items: center; justify-content: space-between; padding: 12px clamp(20px,4vw,58px); border-bottom: 1px solid rgba(220,228,239,.85); background: rgba(255,255,255,.87); backdrop-filter: blur(16px); }
.company-brand > span { grid-row: span 2; color: white; background: linear-gradient(145deg,#2e76f5,#164bb8); box-shadow: 0 10px 24px rgba(37,99,235,.2); }.company-brand strong { color: #0b1f3a; }.company-brand small { color: #98a2b3; }
.company-top-actions { display:flex; align-items:center; gap:12px; }
.company-user { display: flex; align-items: center; gap: 9px; }.company-user > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #1d56c9; background: #eff6ff; font-size: 10px; font-weight: 850; }.company-user div { display: flex; flex-direction: column; }.company-user strong { color: #101828; font-size: 10px; }.company-user small { color: #98a2b3; font-size: 8px; }.company-user a { margin-left: 8px; padding-left: 13px; border-left: 1px solid #e4eaf2; color: #667085; font-size: 9px; font-weight: 700; }
.company-workspace { width: min(1040px, calc(100% - 32px)); margin: 0 auto; padding: clamp(46px,7vw,86px) 0 40px; }
.company-heading { text-align: center; }.company-heading h1 { margin-top: 13px; }.company-heading p { font-size: 11px; }
.company-search { position: relative; display: block; width: min(610px,100%); margin: 30px auto 22px; }.company-search > .icon { position: absolute; left: 15px; top: 50%; width: 17px; height: 17px; color: #98a2b3; transform: translateY(-50%); }.company-search input { width: 100%; height: 48px; padding: 0 65px 0 43px; border: 1px solid #dce4ee; border-radius: 14px; outline: 0; background: white; box-shadow: 0 8px 22px rgba(15,23,42,.035); font-size: 11px; }.company-search input:focus { border-color: #8bb6fa; box-shadow: 0 0 0 4px rgba(37,99,235,.08), 0 12px 28px rgba(15,23,42,.05); }.company-search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.company-list { display: grid; gap: 10px; }
.company-card > button { position: relative; display: grid; width: 100%; min-height: 120px; grid-template-columns: 58px minmax(180px,1fr) minmax(260px,1.1fr) auto; align-items: center; gap: 16px; padding: 19px; border: 1px solid #e0e7f0; border-radius: 18px; background: white; box-shadow: 0 8px 24px rgba(15,23,42,.035); text-align: left; transition: border 180ms ease, box-shadow 300ms ease, transform 400ms cubic-bezier(.16,1,.3,1); }.company-card > button:hover { border-color: #adcaf5; box-shadow: 0 19px 42px rgba(25,66,129,.1); transform: translateY(-3px); }
.company-logo { display: grid; width: 55px; height: 55px; place-items: center; border-radius: 17px; color: #225ec9; background: #eaf3ff; font-size: 15px; font-weight: 900; }.tone-cyan .company-logo { color:#087eab;background:#eafaff; }.tone-violet .company-logo { color:#7052c5;background:#f2efff; }
.company-details { display: flex; min-width: 0; flex-direction: column; }.company-details small { color: #98a2b3; font-size: 8px; }.company-details strong { overflow: hidden; margin: 2px 0; color: #101828; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }.company-details em { color: #667085; font-size: 9px; font-style: normal; }
.company-meta { display: flex; flex-wrap: wrap; gap: 7px; }.company-meta > span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px; color: #667085; background: #f6f8fb; font-size: 8px; font-weight: 650; }.company-meta .icon { width: 12px; height: 12px; color: #2563eb; }
.company-favorite { position: absolute; right: 17px; top: 12px; display: flex; align-items: center; gap: 4px; color: #b16b0b; font-size: 8px; font-weight: 750; }.company-favorite .icon { width: 11px; height: 11px; }
.company-enter { display: flex; align-items: center; gap: 6px; color: #2563eb; font-size: 10px; font-weight: 800; }.company-enter .icon { width: 14px; height: 14px; transition: transform 300ms cubic-bezier(.16,1,.3,1); }.company-card button:hover .company-enter .icon { transform: translateX(3px); }
.company-empty { display: grid; justify-items: center; padding: 50px; color: #667085; text-align: center; }.company-empty > .icon { width: 30px; height: 30px; color: #2563eb; }.company-empty strong { margin-top: 10px; color: #101828; }.company-empty p { margin: 3px 0; font-size: 10px; }
.company-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; color: #98a2b3; font-size: 9px; }.company-footer span { display: flex; align-items: center; gap: 5px; }.company-footer .icon { width: 13px; height: 13px; color: #079669; }.company-footer a { color: #2563eb; font-weight: 750; }

@keyframes accessEnter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes accessFloat { 50% { transform:translateY(-16px) scale(1.04); } }
@keyframes chartRise { from { height:0; opacity:0; } }
@media (prefers-reduced-motion:reduce) { .access-enter,.access-orb,.showcase-chart * { animation:none; } }
@media (max-width:900px) { .access-shell { grid-template-columns:1fr; }.access-showcase { display:none; }.access-panel { padding:36px 22px; }.mobile-access-brand { display:flex; }.company-card > button { grid-template-columns:55px 1fr auto; }.company-meta { grid-column:2 / -1; }.company-enter { grid-column:3; grid-row:1; } }
@media (max-width:620px) { .company-topbar { padding:10px 15px; }.company-brand small,.company-user div { display:none; }.company-top-actions { gap:7px; }.company-user a { margin-left:0;padding:9px;border:0; }.company-workspace { width:min(100% - 22px,1040px); padding-top:35px; }.company-heading h1 { font-size:27px; }.company-card > button { min-height:0; grid-template-columns:48px 1fr auto; gap:11px; padding:15px; }.company-logo { width:47px;height:47px;border-radius:14px; }.company-meta { grid-column:1 / -1; }.company-meta > span { flex:1;justify-content:center; }.company-favorite { display:none; }.company-footer { align-items:flex-start;flex-direction:column;gap:8px; } }
@supports (padding:max(0px)) { .access-showcase,.access-panel { padding-bottom:max(30px,env(safe-area-inset-bottom)); }.company-topbar { padding-top:max(12px,env(safe-area-inset-top));padding-right:max(clamp(20px,4vw,58px),env(safe-area-inset-right));padding-left:max(clamp(20px,4vw,58px),env(safe-area-inset-left)); }.company-workspace { padding-bottom:max(40px,env(safe-area-inset-bottom)); } @media (max-width:620px) { .company-topbar { padding-right:max(15px,env(safe-area-inset-right));padding-left:max(15px,env(safe-area-inset-left)); } } }