/* ===================================================================== Muster — styles.css Design tokens + componentes. Toda la identidad visual vive aquí. Cambiar la paleta = cambiar el bloque :root. ===================================================================== */ /* ------------------------- Tokens ------------------------- */ :root{ /* Paleta corporativa Promed */ --brand-900:#00304C; --brand-800:#00456B; /* principal */ --brand-700:#02597F; --brand-600:#0B7096; --brand-500:#569BBF; /* secundario / botones */ --brand-400:#6F9CAF; /* elementos secundarios */ --brand-200:#B5DCEA; /* fondos / tarjetas */ --brand-100:#DCEEF6; --brand-050:#F1F8FB; /* Neutros */ --gray-000:#FFFFFF; --gray-050:#F7F9FA; --gray-100:#E6E6E6; /* fondo general */ --gray-200:#D7DDE1; --gray-300:#BFC9CF; --gray-500:#7C929C; --gray-700:#4E6875; --gray-900:#0B2B3C; /* Semánticos: color intenso SOLO en estados y acciones */ --success:#0E7C5A; --success-bg:#E2F4EC; --success-bd:#B6E2D1; --salida:#02597F; --salida-bg:#E4F1F8; --salida-bd:#B9D9E8; --warn:#8A5300; --warn-bg:#FDF2E0; --warn-bd:#F0DBB4; --danger:#B3261E; --danger-bg:#FCE9E7; --danger-bd:#F3C9C5; /* Superficies */ --bg:var(--gray-100); --surface:var(--gray-000); --surface-2:var(--gray-050); --surface-3:var(--brand-050); --border:#D6DCE0; --border-strong:#C2CCD2; --text:var(--gray-900); --text-2:var(--gray-700); --text-3:var(--gray-500); --on-brand:#FFFFFF; /* Formas */ --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-full:999px; /* Sombras discretas */ --sh-1:0 1px 2px rgba(11,43,60,.06), 0 1px 3px rgba(11,43,60,.05); --sh-2:0 2px 6px rgba(11,43,60,.06), 0 8px 20px rgba(11,43,60,.06); --sh-3:0 10px 30px rgba(11,43,60,.12); --ring:0 0 0 3px rgba(86,155,191,.38); /* Ritmo */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:56px; --sidebar-w:268px; --topbar-h:66px; --bottomnav-h:66px; --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; } /* Dark mode preparado (se activa con data-theme="dark" en ) */ html[data-theme="dark"]{ --bg:#071A24; --surface:#0C2531; --surface-2:#11303E; --surface-3:#0F2A38; --border:#1D3E4E; --border-strong:#2A5163; --text:#E8F2F7; --text-2:#A9C2CE; --text-3:#7B98A6; --brand-100:#12384B; --brand-050:#0E2E3E; --success-bg:#0C3227; --success-bd:#1B5843; --salida-bg:#0B2E42; --salida-bd:#1A4C68; --warn-bg:#33260F; --warn-bd:#5C441A; --danger-bg:#3A1614; --danger-bd:#6B2721; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 2px 8px rgba(0,0,0,.4); --sh-3:0 12px 34px rgba(0,0,0,.5); } /* ------------------------- Reset ------------------------- */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--font); background:var(--bg); color:var(--text); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; } h1,h2,h3,h4,p{margin:0} button{font:inherit;color:inherit} input,select,textarea{font:inherit} ul{margin:0;padding:0;list-style:none} a{color:var(--brand-700);text-decoration:none} [hidden]{display:none !important} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)} ::selection{background:var(--brand-200);color:var(--brand-900)} /* ------------------------- Splash ------------------------- */ .splash{ position:fixed;inset:0;z-index:120; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3); background:linear-gradient(160deg,var(--brand-800),var(--brand-900)); color:#fff; } /* Los contenedores de la marca van en blanco, no translúcidos: el facet más oscuro del logo es #00456B, el mismo azul del fondo, y sobre oscuro desaparecería. Sobre blanco los cuatro facets se leen completos. */ .splash__mark{ width:66px;height:66px;border-radius:var(--r-lg); display:grid;place-items:center; background:var(--gray-000); border:1px solid rgba(255,255,255,.22); } .splash__title{font-size:22px;font-weight:800;letter-spacing:-.02em} .splash__sub{font-size:13.5px;color:rgba(255,255,255,.72)} .splash__bar{width:180px;height:4px;border-radius:var(--r-full);background:rgba(255,255,255,.2);overflow:hidden;margin-top:var(--sp-2)} .splash__bar span{display:block;height:100%;width:40%;border-radius:inherit;background:var(--brand-200);animation:slide 1.15s ease-in-out infinite} @keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}} .splash.is-error{background:linear-gradient(160deg,#7E1F19,#4A120E)} /* ------------------------- Layout ------------------------- */ .app{ display:grid; /* * minmax(0,1fr) y no 1fr: `1fr` equivale a `minmax(auto,1fr)`, y ese * `auto` hace que la pista crezca hasta el ancho de contenido mínimo de * lo que lleve dentro. Con una tabla ancha, la pista se estiraba a ~800px * dentro de un viewport de 375 y arrastraba toda la página: el * .tablewrap nunca llegaba a scrollear porque nadie lo limitaba. */ grid-template-columns:var(--sidebar-w) minmax(0,1fr); grid-template-rows:var(--topbar-h) 1fr; grid-template-areas:"side top" "side main"; min-height:100vh; } .sidebar{grid-area:side;min-width:0} .topbar{grid-area:top;min-width:0} /* min-width:0 rompe la cadena: sin esto, el contenido ancho vuelve a imponer su tamaño a la pista aunque la pista lo permita. */ .main{grid-area:main;min-width:0} /* ------------------------- Sidebar ------------------------- */ .sidebar{ display:flex;flex-direction:column; background:linear-gradient(180deg,var(--brand-800),var(--brand-900)); color:#fff;padding:var(--sp-5) var(--sp-4); position:sticky;top:0;height:100vh; } .sidebar__brand{display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-2) var(--sp-6)} .brandmark{ width:40px;height:40px;border-radius:var(--r-sm);flex:none; display:grid;place-items:center;color:#fff; background:var(--gray-000);border:1px solid rgba(255,255,255,.2); } /* En la topbar el fondo ya es claro: el logo se lee solo, sin pastilla. */ .brandmark--sm{width:32px;height:32px;border-radius:var(--r-xs);background:transparent;border-color:transparent} .sidebar__brandtext{display:flex;flex-direction:column;line-height:1.15} .sidebar__brandtext strong{font-size:16px;font-weight:800;letter-spacing:.02em} .sidebar__brandtext span{font-size:12.5px;color:rgba(255,255,255,.68)} .sidebar__nav{display:flex;flex-direction:column;gap:var(--sp-1);flex:1} .navlink{ display:flex;align-items:center;gap:var(--sp-3); padding:11px var(--sp-3);border-radius:var(--r-sm); background:transparent;border:0;cursor:pointer;width:100%; color:rgba(255,255,255,.78);font-size:14.5px;font-weight:500;text-align:left; transition:background .16s ease,color .16s ease; } .navlink svg{flex:none;opacity:.9} .navlink:hover{background:rgba(255,255,255,.1);color:#fff} .navlink.is-active{background:#fff;color:var(--brand-800);font-weight:600;box-shadow:var(--sh-1)} .sidebar__foot{display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-4)} .userchip{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2);border-radius:var(--r-sm);background:rgba(255,255,255,.08)} .userchip__avatar{ width:34px;height:34px;border-radius:var(--r-full);flex:none;display:grid;place-items:center; background:var(--brand-200);color:var(--brand-900);font-weight:700;font-size:13px; } .userchip__info{display:flex;flex-direction:column;min-width:0;line-height:1.25} .userchip__info strong{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .userchip__info span{font-size:11.5px;color:rgba(255,255,255,.65);letter-spacing:.04em} .sidebar__version{font-size:11px;color:rgba(255,255,255,.45);text-align:center} /* ------------------------- Topbar ------------------------- */ .topbar{ display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3); padding:0 var(--sp-5);background:var(--surface); border-bottom:1px solid var(--border); position:sticky;top:0;z-index:40; } .topbar__left{display:flex;align-items:center;gap:var(--sp-3);min-width:0} .topbar__left .brandmark{display:none} .topbar__titles{display:flex;flex-direction:column;line-height:1.2;min-width:0} .topbar__titles strong{font-size:17px;font-weight:700;letter-spacing:-.01em} .topbar__titles span{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar__ctx{display:none;flex-direction:column;line-height:1.2;min-width:0} .topbar__ctx strong{font-size:19px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .topbar__ctx span{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar__right{display:flex;align-items:center;gap:var(--sp-2)} .iconbtn{ width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--border); background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--text-2); transition:background .15s ease,color .15s ease,border-color .15s ease; } .iconbtn:hover{background:var(--surface-2);color:var(--text)} .iconbtn--danger{color:var(--danger);border-color:var(--danger-bd);background:var(--danger-bg)} .iconbtn--danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)} .iconbtn.is-spin svg{animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ------------------------- Main ------------------------- */ .main{padding:var(--sp-6) var(--sp-6) var(--sp-12);max-width:1280px;width:100%} .page{display:flex;flex-direction:column;gap:var(--sp-5)} .page__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap} .page__titles h1{font-size:24px;font-weight:800;letter-spacing:-.02em} .page__titles p{font-size:13.5px;color:var(--text-3);margin-top:2px} .page__actions{display:flex;gap:var(--sp-2);flex-wrap:wrap} .grid{display:grid;gap:var(--sp-4)} .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} .grid--hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} /* ------------------------- Card ------------------------- */ .card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--r-lg);box-shadow:var(--sh-1); display:flex;flex-direction:column;overflow:hidden; } .card__head{ display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3); padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border); } .card__title{font-size:14px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text-2)} .card__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)} .card__body--flush{padding:0} .card__foot{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border);background:var(--surface-2)} /* ------------------------- Hero: personas dentro ------------------------- */ .hero{ background:linear-gradient(150deg,var(--brand-800),var(--brand-900) 70%); color:#fff;border:0;position:relative;overflow:hidden; } .hero::after{ content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%; background:radial-gradient(circle,rgba(181,220,234,.28),transparent 68%); } .hero__body{padding:var(--sp-6) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2);position:relative} .hero__eyebrow{display:flex;align-items:center;gap:var(--sp-2);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-200)} .hero__num{font-size:clamp(64px,13vw,104px);font-weight:800;line-height:.92;letter-spacing:-.045em;font-variant-numeric:tabular-nums} .hero__label{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)} .hero__meta{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);font-size:12.5px;color:rgba(255,255,255,.7)} .livedot{width:8px;height:8px;border-radius:var(--r-full);background:#4ADE80;box-shadow:0 0 0 4px rgba(74,222,128,.22);flex:none;animation:pulse 2.1s ease-in-out infinite} @keyframes pulse{50%{box-shadow:0 0 0 8px rgba(74,222,128,.08)}} /* ------------------------- Stats ------------------------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-3)} .stat{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md); padding:var(--sp-4);display:flex;flex-direction:column;gap:2px;box-shadow:var(--sh-1); } .stat--tint{background:var(--surface-3);border-color:var(--brand-200)} .stat__num{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1} .stat__label{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)} .stat__hint{font-size:12px;color:var(--text-3)} /* ------------------------- Botones ------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); padding:11px var(--sp-4);border-radius:var(--r-sm);border:1px solid var(--border); background:var(--surface);color:var(--text);font-size:14px;font-weight:600; cursor:pointer;white-space:nowrap; transition:transform .12s ease,background .15s ease,box-shadow .15s ease,border-color .15s ease; } .btn:hover{background:var(--surface-2)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.55;cursor:not-allowed;transform:none} .btn--primary{background:var(--brand-800);border-color:var(--brand-800);color:#fff;box-shadow:var(--sh-1)} .btn--primary:hover{background:var(--brand-700);border-color:var(--brand-700)} .btn--secondary{background:var(--brand-500);border-color:var(--brand-500);color:#fff} .btn--secondary:hover{background:var(--brand-600);border-color:var(--brand-600)} .btn--success{background:var(--success);border-color:var(--success);color:#fff} .btn--danger{background:var(--danger);border-color:var(--danger);color:#fff} .btn--danger:hover{background:#9B1F18;border-color:#9B1F18} .btn--ghost{background:transparent;border-color:transparent;color:var(--text-2)} .btn--ghost:hover{background:var(--surface-2);color:var(--text)} .btn--outline{background:transparent;border-color:var(--border-strong);color:var(--text-2)} .btn--lg{padding:16px var(--sp-6);font-size:16px;border-radius:var(--r-md)} .btn--xl{padding:22px var(--sp-6);font-size:18px;border-radius:var(--r-lg)} .btn--block{width:100%} .btn--sm{padding:7px var(--sp-3);font-size:13px;border-radius:var(--r-xs)} /* ------------------------- Badges ------------------------- */ .badge{ display:inline-flex;align-items:center;gap:5px; padding:3px 9px;border-radius:var(--r-full); font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);white-space:nowrap; } .badge--entrada{background:var(--success-bg);border-color:var(--success-bd);color:var(--success)} .badge--salida{background:var(--salida-bg);border-color:var(--salida-bd);color:var(--salida)} .badge--empleado{background:var(--brand-100);border-color:var(--brand-200);color:var(--brand-800)} .badge--proveedor{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)} .badge--contratista{background:#EDE9FE;border-color:#DDD6FE;color:#5B21B6} .badge--visitante{background:#F1F5F9;border-color:#E2E8F0;color:#334155} .badge--on{background:var(--success-bg);border-color:var(--success-bd);color:var(--success)} .badge--off{background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger)} .badge--mono{font-family:var(--mono);letter-spacing:.02em;text-transform:none;font-size:11.5px} /* ------------------------- Listas ------------------------- */ .list{display:flex;flex-direction:column} .listitem{ display:flex;align-items:center;gap:var(--sp-3); padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--border); } .list .listitem:first-child{border-top:0} .listitem__icon{ width:36px;height:36px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center; background:var(--surface-2);color:var(--text-2);border:1px solid var(--border); } .listitem__icon--in{background:var(--success-bg);border-color:var(--success-bd);color:var(--success)} .listitem__icon--out{background:var(--salida-bg);border-color:var(--salida-bd);color:var(--salida)} .listitem__main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3} .listitem__main strong{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .listitem__main span{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .listitem__meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none} .listitem__time{font-size:13px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums} /* ------------------------- Tabla ------------------------- */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch} table.tbl{width:100%;border-collapse:collapse;font-size:14px} table.tbl th{ text-align:left;padding:11px var(--sp-4);font-size:11.5px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--text-3); background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap; } table.tbl td{padding:12px var(--sp-4);border-bottom:1px solid var(--border);vertical-align:middle} table.tbl tbody tr:hover{background:var(--surface-2)} table.tbl td.num{font-variant-numeric:tabular-nums;white-space:nowrap} .cell-nombre{display:flex;flex-direction:column;line-height:1.3} .cell-nombre strong{font-weight:600} .cell-nombre span{font-size:12px;color:var(--text-3)} /* ------------------------- Formularios ------------------------- */ .form{display:flex;flex-direction:column;gap:var(--sp-4)} .formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)} .field{display:flex;flex-direction:column;gap:6px;min-width:0} .field--full{grid-column:1/-1} .field > label{font-size:12.5px;font-weight:600;color:var(--text-2)} .field > label .req{color:var(--danger)} .input,.select,.textarea{ width:100%;padding:11px var(--sp-3);border-radius:var(--r-sm); border:1px solid var(--border-strong);background:var(--surface);color:var(--text); transition:border-color .15s ease,box-shadow .15s ease; } .input:hover,.select:hover,.textarea:hover{border-color:var(--brand-400)} .input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand-500);box-shadow:var(--ring)} .textarea{min-height:84px;resize:vertical} .select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px} .hint{font-size:12px;color:var(--text-3)} .searchfield{position:relative;flex:1;min-width:180px} .searchfield svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none} .searchfield .input{padding-left:38px} .toolbar{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center} .toolbar .select{width:auto;min-width:150px} .toolbar .input[type="date"]{width:auto;min-width:150px} /* ------------------------- Escáner ------------------------- */ .scanzone{ border:2px dashed var(--brand-400);border-radius:var(--r-lg); background:var(--surface-3);padding:var(--sp-6); display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center; transition:border-color .18s ease,background .18s ease; } .scanzone.is-armed{border-color:var(--brand-500);background:var(--brand-100)} .scanzone__icon{ width:58px;height:58px;border-radius:var(--r-md);display:grid;place-items:center; background:var(--surface);color:var(--brand-800);border:1px solid var(--brand-200);box-shadow:var(--sh-1); } .scanzone h2{font-size:18px;font-weight:700} .scanzone p{font-size:13.5px;color:var(--text-2);max-width:44ch} .scaninput{ width:100%;max-width:460px;text-align:center; font-family:var(--mono);font-size:20px;letter-spacing:.14em;font-weight:600; padding:16px var(--sp-4);border-radius:var(--r-md); border:1px solid var(--brand-400);background:var(--surface);color:var(--brand-800); } .scaninput:focus{outline:none;border-color:var(--brand-800);box-shadow:var(--ring)} .scanstate{display:flex;align-items:center;gap:var(--sp-2);font-size:12.5px;font-weight:600;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase} /* Panel de confirmación, legible a distancia */ .result{ border-radius:var(--r-xl);padding:var(--sp-8) var(--sp-6); display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center; border:2px solid var(--border);background:var(--surface); animation:pop .26s cubic-bezier(.2,.9,.3,1.2); } @keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}} .result__mark{ width:76px;height:76px;border-radius:var(--r-full);display:grid;place-items:center; background:var(--surface-2);color:var(--text-2); } .result__title{font-size:clamp(24px,4.6vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.05} .result__name{font-size:clamp(22px,4.2vw,34px);font-weight:700;letter-spacing:-.02em} .result__meta{font-size:15px;color:var(--text-2)} .result__time{ font-size:clamp(30px,6vw,52px);font-weight:800;letter-spacing:-.03em; font-variant-numeric:tabular-nums;margin-top:var(--sp-1); } .result--entrada{background:var(--success-bg);border-color:var(--success-bd)} .result--entrada .result__mark{background:var(--success);color:#fff} .result--entrada .result__title{color:var(--success)} .result--salida{background:var(--salida-bg);border-color:var(--salida-bd)} .result--salida .result__mark{background:var(--salida);color:#fff} .result--salida .result__title{color:var(--salida)} .result--warn{background:var(--warn-bg);border-color:var(--warn-bd)} .result--warn .result__mark{background:var(--warn);color:#fff} .result--warn .result__title{color:var(--warn)} .result--error{background:var(--danger-bg);border-color:var(--danger-bd)} .result--error .result__mark{background:var(--danger);color:#fff} .result--error .result__title{color:var(--danger)} .result--idle{background:var(--surface-2);border-style:dashed} /* ------------------------- Estados varios ------------------------- */ .empty{ display:flex;flex-direction:column;align-items:center;gap:var(--sp-2); padding:var(--sp-10) var(--sp-5);text-align:center;color:var(--text-3); } .empty svg{color:var(--gray-300)} .empty strong{font-size:15px;font-weight:600;color:var(--text-2)} .empty p{font-size:13px;max-width:38ch} .skeleton{border-radius:var(--r-sm);background:linear-gradient(90deg,var(--surface-2),var(--gray-200),var(--surface-2));background-size:200% 100%;animation:shimmer 1.25s linear infinite} @keyframes shimmer{to{background-position:-200% 0}} .sk-row{height:52px;margin:var(--sp-2) var(--sp-5)} .pager{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap} .pager__info{font-size:13px;color:var(--text-3)} .kv{display:grid;grid-template-columns:auto 1fr;gap:6px var(--sp-4);font-size:13.5px} .kv dt{color:var(--text-3);font-weight:600} .kv dd{margin:0;color:var(--text)} .qrbox{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-5);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md)} .qrbox code{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:.1em;color:var(--brand-800)} .divider{height:1px;background:var(--border);border:0;margin:0} /* ------------------------- Toasts ------------------------- */ .toasts{position:fixed;z-index:110;right:var(--sp-5);bottom:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);pointer-events:none;max-width:min(420px,calc(100vw - 32px))} .toast{ pointer-events:auto;display:flex;align-items:flex-start;gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md); background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-3); font-size:14px;animation:toastin .22s ease; } @keyframes toastin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .toast--ok{border-color:var(--success-bd);background:var(--success-bg);color:var(--success)} .toast--warn{border-color:var(--warn-bd);background:var(--warn-bg);color:var(--warn)} .toast--error{border-color:var(--danger-bd);background:var(--danger-bg);color:var(--danger)} .toast strong{font-weight:700} /* ------------------------- Modal ------------------------- */ .modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--sp-4)} .modal__backdrop{position:absolute;inset:0;background:rgba(11,43,60,.5);backdrop-filter:blur(2px)} .modal__panel{ position:relative;width:100%;max-width:620px;max-height:min(92vh,900px); display:flex;flex-direction:column;overflow:hidden; background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-3); animation:pop .2s ease; } .modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)} .modal__head h2{font-size:17px;font-weight:700} .modal__body{padding:var(--sp-5);overflow:auto;flex:1} .modal__foot{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border);background:var(--surface-2)} .modal__foot:empty{display:none} /* ------------------------- Bottom nav ------------------------- */ .bottomnav{display:none} /* ================= Responsive ================= */ @media (max-width:1023px){ .app{ grid-template-columns:minmax(0,1fr); grid-template-rows:var(--topbar-h) 1fr; grid-template-areas:"top" "main"; } .sidebar{display:none} .topbar{padding:0 var(--sp-4)} .topbar__left .brandmark{display:grid} .main{padding:var(--sp-4) var(--sp-4) calc(var(--bottomnav-h) + var(--sp-8))} .bottomnav{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50; background:var(--surface);border-top:1px solid var(--border); padding:6px var(--sp-2) calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -2px 12px rgba(11,43,60,.06); } .navtab{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; border:0;background:transparent;cursor:pointer;padding:8px 4px;border-radius:var(--r-sm); color:var(--text-3);font-size:10.5px;font-weight:600;letter-spacing:.03em; } .navtab.is-active{color:var(--brand-800);background:var(--brand-100)} .grid--2,.grid--3,.grid--4,.grid--hero{grid-template-columns:minmax(0,1fr)} .formgrid{grid-template-columns:minmax(0,1fr)} .page__titles h1{font-size:21px} .toasts{right:var(--sp-3);left:var(--sp-3);bottom:calc(var(--bottomnav-h) + var(--sp-3));max-width:none} .card__body,.card__head,.card__foot{padding-left:var(--sp-4);padding-right:var(--sp-4)} .listitem{padding-left:var(--sp-4);padding-right:var(--sp-4)} table.tbl th,table.tbl td{padding-left:var(--sp-3);padding-right:var(--sp-3)} } @media (min-width:1024px){ .topbar__titles{display:none} .topbar__ctx{display:flex} } @media (min-width:1024px) and (max-width:1279px){ :root{--sidebar-w:232px} .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:480px){ .result{padding:var(--sp-6) var(--sp-4)} .hero__body{padding:var(--sp-5) var(--sp-4)} .modal__panel{max-height:94vh} } @media print{ .sidebar,.topbar,.bottomnav,.toasts,.page__actions{display:none !important} .app{display:block} .main{padding:0} .card{box-shadow:none;border-color:#999} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important} } /* ------------------------- Inicio de sesión ------------------------- */ .login{ position:fixed;inset:0;z-index:90; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-5); padding:var(--sp-5); background:linear-gradient(160deg,var(--brand-800),var(--brand-900)); } .login__card{ width:100%;max-width:420px;background:var(--surface);border-radius:var(--r-xl); box-shadow:var(--sh-3);padding:var(--sp-8) var(--sp-6); display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center; } .login__mark{ width:60px;height:60px;border-radius:var(--r-md);display:grid;place-items:center; background:var(--gray-000);border:1px solid var(--border); box-shadow:var(--sh-2);margin-bottom:var(--sp-2); } .login__card h1{font-size:22px;font-weight:800;letter-spacing:-.02em} .login__sub{font-size:13.5px;color:var(--text-3);line-height:1.45} .login__gbtn{min-height:44px;display:flex;justify-content:center;margin-top:var(--sp-3);width:100%} .login__aviso{ width:100%;font-size:13px;padding:var(--sp-3);border-radius:var(--r-sm); background:var(--danger-bg);border:1px solid var(--danger-bd);color:var(--danger);text-align:left; } .login__hint{font-size:12px;color:var(--text-3);margin-top:var(--sp-1)} .login__foot{font-size:12px;color:rgba(255,255,255,.55)} /* ------------------------- Conexión ------------------------- */ .offlinepill{ padding:5px 10px;border-radius:var(--r-full);font-size:11.5px;font-weight:700; letter-spacing:.06em;text-transform:uppercase; background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn); } .iconbtn--plain{border-color:transparent;background:transparent;color:rgba(255,255,255,.72);width:34px;height:34px} .iconbtn--plain:hover{background:rgba(255,255,255,.12);color:#fff} /* ------------------------- Aviso de fase ------------------------- */ .notice{ display:flex;align-items:flex-start;gap:var(--sp-3); padding:var(--sp-4);border-radius:var(--r-md); background:var(--brand-100);border:1px solid var(--brand-200);color:var(--brand-900);font-size:13.5px; } .notice svg{flex:none;margin-top:1px} .notice strong{display:block;font-weight:700;margin-bottom:2px} /* ------------------------- Accesos rápidos del panel ------------------------- */ .actioncard{ display:flex;align-items:center;gap:var(--sp-3);text-align:left; padding:var(--sp-4) var(--sp-5);cursor:pointer; background:var(--surface);border:1px solid var(--border); border-radius:var(--r-lg);box-shadow:var(--sh-1); transition:transform .14s ease,box-shadow .18s ease,border-color .18s ease; } .actioncard:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--brand-400)} .actioncard:active{transform:none} .actioncard__icon{ width:44px;height:44px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center; background:var(--brand-100);border:1px solid var(--brand-200);color:var(--brand-800); } .actioncard__text{display:flex;flex-direction:column;min-width:0;line-height:1.35} .actioncard__text strong{font-size:15px;font-weight:700} .actioncard__text span{font-size:13px;color:var(--text-3)} .actioncard--peligro:hover{border-color:var(--danger-bd)} .actioncard--peligro .actioncard__icon{ background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger); } /* ===================================================================== Modo estación, cámara y carnés (v1.1.0) ===================================================================== */ /* ------------------------- Variantes de aviso ------------------------- */ .notice--warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)} .notice--danger{background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger)} /* ------------------------- Bloque de código copiable ------------------------- */ .codebox{ font-family:var(--mono);font-size:12.5px;line-height:1.5; padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-2); background:var(--surface-2);border:1px solid var(--border); border-radius:var(--r-sm);color:var(--text); word-break:break-all;user-select:all; } /* ------------------------- Carné / QR ------------------------- */ .qrbox__marca{ width:190px;height:190px;flex:none;padding:10px;background:#fff; border:1px solid var(--border);border-radius:var(--r-sm); } /* Para escanear desde OTRO dispositivo hace falta más superficie. */ .qrbox__marca--lg{width:236px;height:236px} .qrbox__svg{width:100%;height:100%;display:block} .qrbox__acciones{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center} .qrfallo{font-size:13px;color:var(--danger);text-align:center;padding:var(--sp-4)} /* ------------------------- Vídeo de la cámara ------------------------- */ .scanzone__video{ width:100%;max-width:340px;aspect-ratio:4/3;object-fit:cover; border-radius:var(--r-md);border:2px solid var(--brand-500); background:#000;margin-top:var(--sp-2); } /* ------------------------- Mini escáner del panel ------------------------- */ .scanwidget{border-color:var(--brand-200)} .scanwidget__estado{ display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:600;color:var(--text-3); } /* flex-direction explícito: .card__body es columna y sin esto el resultado se estira 320 px de alto y los botones caen debajo. */ .scanwidget__body{ display:flex;flex-direction:row;gap:var(--sp-4); align-items:stretch;flex-wrap:wrap; } .scanwidget__resultado{ flex:1 1 320px;min-width:0;display:flex;align-items:center;gap:var(--sp-3); padding:var(--sp-4);border-radius:var(--r-md); background:var(--surface-2);border:1px dashed var(--border-strong); transition:background .18s ease,border-color .18s ease; } .scanwidget__idle{ display:flex;align-items:center;gap:var(--sp-3); font-size:13.5px;color:var(--text-3); } .scanwidget__mark{ width:46px;height:46px;flex:none;border-radius:var(--r-sm); display:grid;place-items:center;background:var(--surface); border:1px solid var(--border);color:var(--text-2); } .scanwidget__texto{display:flex;flex-direction:column;min-width:0;line-height:1.35} .scanwidget__texto strong{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .scanwidget__texto b{font-size:19px;font-weight:700;letter-spacing:-.01em} .scanwidget__texto span{font-size:13px;color:var(--text-3)} .scanwidget__hora{ margin-left:auto;font-family:var(--mono);font-size:17px;font-weight:700; white-space:nowrap; } .scanwidget__resultado--entrada{ background:var(--success-bg);border:1px solid var(--success-bd); } .scanwidget__resultado--entrada .scanwidget__mark{background:var(--success);border-color:var(--success);color:#fff} .scanwidget__resultado--entrada .scanwidget__texto strong{color:var(--success)} .scanwidget__resultado--salida{background:var(--salida-bg);border:1px solid var(--salida-bd)} .scanwidget__resultado--salida .scanwidget__mark{background:var(--salida);border-color:var(--salida);color:#fff} .scanwidget__resultado--salida .scanwidget__texto strong{color:var(--salida)} .scanwidget__resultado--warn{background:var(--warn-bg);border:1px solid var(--warn-bd)} .scanwidget__resultado--warn .scanwidget__mark{background:var(--warn);border-color:var(--warn);color:#fff} .scanwidget__resultado--warn .scanwidget__texto strong{color:var(--warn)} .scanwidget__resultado--error{background:var(--danger-bg);border:1px solid var(--danger-bd)} .scanwidget__resultado--error .scanwidget__mark{background:var(--danger);border-color:var(--danger);color:#fff} .scanwidget__resultado--error .scanwidget__texto strong{color:var(--danger)} .scanwidget__lado{ flex:0 0 auto;display:flex;flex-direction:column;gap:var(--sp-2); justify-content:center;min-width:150px; } .scanwidget__video{ width:150px;aspect-ratio:4/3;object-fit:cover;background:#000; border-radius:var(--r-sm);border:2px solid var(--brand-500); } @media (max-width:640px){ .scanwidget__body{flex-direction:column} .scanwidget__lado{flex:1 1 auto;flex-direction:row;min-width:0} .scanwidget__lado .btn{flex:1} .scanwidget__video{width:100%;max-width:160px} .scanwidget__hora{margin-left:0;font-size:15px} } /* ===================================================================== Kiosco de la estación de recepción Pantalla dedicada: sin barra lateral, sin navegación, legible de lejos. ===================================================================== */ .kiosco{ position:fixed;inset:0;display:flex;flex-direction:column; background:var(--bg);z-index:40; } .kiosco__top{ flex:none;display:flex;align-items:center;gap:var(--sp-4); padding:var(--sp-3) var(--sp-5); padding-top:max(var(--sp-3),env(safe-area-inset-top)); background:var(--brand-800);color:#fff; } .kiosco__brand{display:flex;align-items:center;gap:var(--sp-3);min-width:0} .kiosco__brand > span{display:flex;flex-direction:column;line-height:1.2;min-width:0} .kiosco__brand strong{font-size:14px;font-weight:700;letter-spacing:-.01em} .kiosco__brand em{ font-style:normal;font-size:12px;color:rgba(255,255,255,.72); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .kiosco__top .brandmark{background:var(--gray-000);border-color:transparent} .kiosco__estado{ margin-left:auto;display:inline-flex;align-items:center;gap:7px; font-size:12.5px;font-weight:600;padding:6px var(--sp-3); background:rgba(255,255,255,.13);border-radius:var(--r-full); } /* Fecha y ubicación, al centro del rótulo. */ .kiosco__centro{ flex:1;min-width:0;display:flex;flex-direction:column; align-items:center;line-height:1.2;text-align:center; } .kiosco__fecha{ font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; } .kiosco__lugar{ font-size:11.5px;color:rgba(255,255,255,.68); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; } .kiosco__reloj{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15} .kiosco__reloj strong{ font-family:var(--mono);font-size:19px;font-weight:700; display:inline-flex;align-items:baseline;gap:1px; /* Los dígitos no deben cambiar de ancho al pasar de 1 a 2, o el reloj tiembla una vez por segundo. */ font-variant-numeric:tabular-nums; } /* Los segundos parpadean. Se atenúan en lugar de desaparecer: si se ocultaran, el ancho cambiaría y el resto de la hora daría un salto. */ .kiosco__seg{ font-size:13px;opacity:.9; animation:kioscoSeg 1s steps(1,end) infinite; } .kiosco__seg::before{content:":"} @keyframes kioscoSeg{0%,49%{opacity:.95}50%,100%{opacity:.32}} .kiosco__ampm{font-size:12px;margin-left:4px;color:rgba(255,255,255,.78)} .kiosco__clima{ display:inline-flex;align-items:center;gap:5px; font-size:11.5px;color:rgba(255,255,255,.72); } .kiosco__clima svg{flex:none;opacity:.85} /* Quien pide menos movimiento no quiere un parpadeo cada segundo. */ @media (prefers-reduced-motion:reduce){ .kiosco__seg{animation:none;opacity:.9} } .kiosco__cuerpo{ flex:1;position:relative;display:flex;align-items:center;justify-content:center; padding:var(--sp-5);min-height:0; } /* ---- Reposo: la pregunta que el comité necesita responder ---- */ .kiosco__reposo{ display:flex;flex-direction:column;align-items:center;gap:var(--sp-3); text-align:center; } .kiosco__numero{ font-size:clamp(84px,20vw,210px);font-weight:800;line-height:.86; letter-spacing:-.05em;color:var(--brand-800); } .kiosco__numlabel{ font-size:clamp(13px,2.2vw,19px);font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--text-2); } .kiosco__chips{ display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center; margin-top:var(--sp-4); } .kchip{ min-width:104px;padding:var(--sp-3) var(--sp-4); background:var(--surface);border:1px solid var(--border); border-radius:var(--r-md);box-shadow:var(--sh-1); display:flex;flex-direction:column;gap:2px; } .kchip strong{font-size:27px;font-weight:800;line-height:1;color:var(--brand-700)} .kchip span{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3)} .kiosco__invite{ display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-6); padding:var(--sp-3) var(--sp-5);border-radius:var(--r-full); background:var(--brand-100);border:1px solid var(--brand-200); color:var(--brand-800);font-size:15px;font-weight:600; } /* ---- Confirmación: tiene que leerse de pie, a metro y medio ---- */ .kiosco__confirm{position:absolute;inset:var(--sp-4);display:flex} .kconf{ flex:1;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:var(--sp-3);text-align:center; border-radius:var(--r-xl);border:3px solid var(--border); background:var(--surface);padding:var(--sp-6); animation:kconfEntra .18s ease-out; } @keyframes kconfEntra{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}} .kconf__icon{ width:106px;height:106px;border-radius:50%;display:grid;place-items:center; background:var(--surface-2);color:var(--text-2); } .kconf__titulo{ font-size:clamp(26px,5vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.02; } .kconf__nombre{ font-size:clamp(28px,6vw,64px);font-weight:700;letter-spacing:-.03em; line-height:1.05;max-width:24ch; } .kconf__meta{font-size:clamp(14px,2.4vw,21px);color:var(--text-2)} .kconf__hora{ font-family:var(--mono);font-size:clamp(22px,4vw,42px);font-weight:700; padding:6px var(--sp-4);border-radius:var(--r-full);background:var(--surface-2); } .kconf--entrada{background:var(--success-bg);border-color:var(--success)} .kconf--entrada .kconf__icon{background:var(--success);color:#fff} .kconf--entrada .kconf__titulo{color:var(--success)} .kconf--salida{background:var(--salida-bg);border-color:var(--salida)} .kconf--salida .kconf__icon{background:var(--salida);color:#fff} .kconf--salida .kconf__titulo{color:var(--salida)} .kconf--warn{background:var(--warn-bg);border-color:var(--warn)} .kconf--warn .kconf__icon{background:var(--warn);color:#fff} .kconf--warn .kconf__titulo{color:var(--warn)} .kconf--error{background:var(--danger-bg);border-color:var(--danger)} .kconf--error .kconf__icon{background:var(--danger);color:#fff} .kconf--error .kconf__titulo{color:var(--danger)} /* ---- Vista de la cámara: presente pero sin robar protagonismo ---- */ .kiosco__camara{ position:absolute;right:var(--sp-5);bottom:var(--sp-5); width:clamp(150px,20vw,232px);border-radius:var(--r-md);overflow:hidden; border:2px solid var(--brand-500);background:#000;box-shadow:var(--sh-3); } .kiosco__camara video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .kiosco__camarapie{ font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:#fff;background:rgba(0,0,0,.55);padding:4px var(--sp-2);text-align:center; } /* ---- Pie: contadores del turno y acciones poco frecuentes ---- */ .kiosco__pie{ flex:none;display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap; padding:var(--sp-3) var(--sp-5); padding-bottom:max(var(--sp-3),env(safe-area-inset-bottom)); background:var(--surface);border-top:1px solid var(--border); } .kiosco__cuenta{display:flex;gap:var(--sp-2);flex-wrap:wrap} .kcount{ font-size:12px;font-weight:700;padding:5px var(--sp-3); border-radius:var(--r-full);background:var(--surface-2); border:1px solid var(--border);color:var(--text-2); } .kcount--in{background:var(--success-bg);border-color:var(--success-bd);color:var(--success)} .kcount--out{background:var(--salida-bg);border-color:var(--salida-bd);color:var(--salida)} .kcount--warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)} .kcount--err{background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger)} .kiosco__acciones{margin-left:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap} @media (max-width:640px){ .kiosco__estado{display:none} .kiosco__camara{right:var(--sp-3);bottom:var(--sp-3);width:132px} .kiosco__pie{justify-content:center} .kiosco__acciones{margin-left:0;width:100%;justify-content:center} .kiosco__acciones .btn{flex:1;min-width:0} } /* Portrait en teléfono: el número manda pero cabe todo */ @media (max-width:640px) and (orientation:portrait){ .kiosco__top{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2)} .kiosco__brand strong{font-size:12px} .kiosco__brand em{font-size:11px} .kiosco__reloj strong{font-size:15px} .kiosco__seg{font-size:11px} .kiosco__fecha{font-size:11px} .kiosco__cuerpo{padding:var(--sp-3)} .kiosco__numero{font-size:clamp(56px,20vw,100px);line-height:.9} .kiosco__numlabel{font-size:clamp(10px,2.8vw,14px);letter-spacing:.16em} .kiosco__chips{gap:var(--sp-2);margin-top:var(--sp-2)} .kchip{min-width:72px;padding:var(--sp-2) var(--sp-3)} .kchip strong{font-size:20px} .kchip span{font-size:10px} .kiosco__invite{padding:var(--sp-2) var(--sp-3);font-size:13px;margin-top:var(--sp-3)} .kiosco__pie{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2);flex-direction:column;align-items:stretch} .kiosco__cuenta{justify-content:center} .kiosco__acciones{justify-content:center} .kconf{padding:var(--sp-4)} .kconf__icon{width:72px;height:72px} .kconf__titulo{font-size:clamp(20px,6vw,34px)} .kconf__nombre{font-size:clamp(22px,7vw,40px)} .kconf__hora{font-size:clamp(18px,5vw,28px)} } /* En pantallas bajas y horizontales (tablet en soporte) el número manda. */ @media (max-height:520px){ .kiosco__chips,.kiosco__invite{display:none} .kconf__icon{width:70px;height:70px} } /* ===================================================================== Relieve (neumorfismo selectivo) Se activa con data-relieve="si" en . Quitando ese atributo la interfaz vuelve exactamente a como estaba: nada de aquí abajo aplica. REGLA DE ORO: el relieve va en los CONTENEDORES, nunca en lo que carga información. Texto, badges, estados semánticos y afordancia de los controles mantienen su contraste intacto. Fuera de alcance a propósito: - Todo el kiosco (.kiosco*, .kconf*, .kchip). Se lee de pie a metro y medio; el relieve suave no aguanta esa distancia ni los reflejos de ventana de una recepción. - .hero y el sidebar: van sobre degradado azul, no sobre el tono medio que el relieve necesita para tener sombra clara y oscura. - .login__card: su fondo también es degradado oscuro, y el botón de Google lo dibuja un tercero, así que quedaría a medias. - .btn y .iconbtn: necesitan borde visible para leerse como pulsables. Sobre .stat--tint: su tinte marca las cifras destacadas, así que sí lleva relieve (si no, quedarían 4 tarjetas planas junto a 2 con relieve), pero sobre un tinte de tono medio propio y conservando el anillo de marca. El tinte original (#F1F8FB) es casi blanco y el relieve no funciona ahí: la sombra clara no puede ser más clara que el blanco, así que solo quedaría la oscura y se vería como una sombra normal. ===================================================================== */ :root{ /* El relieve exige que el elemento sea del MISMO color que su fondo: de ahí que la superficie sea --bg y no --surface. */ --neu-bg:var(--gray-100); --neu-luz:#F7F7F7; --neu-sombra:#C6C6C6; --neu-out:7px 7px 15px var(--neu-sombra), -7px -7px 15px var(--neu-luz); --neu-out-sm:4px 4px 9px var(--neu-sombra), -4px -4px 9px var(--neu-luz); /* Variante con tinte para las cifras destacadas. */ --neu-bg-tint:#DCE6EB; --neu-out-tint:4px 4px 9px #BCC6CB, -4px -4px 9px #EDF4F8; } html[data-theme="dark"]{ --neu-bg:#0E2833; --neu-luz:#143240; --neu-sombra:#04121A; --neu-bg-tint:#123443; --neu-out-tint:4px 4px 9px #05141D, -4px -4px 9px #17404F; } html[data-relieve="si"] .main .card:not(.hero){ background:var(--neu-bg); border-color:transparent; box-shadow:var(--neu-out); } html[data-relieve="si"] .main .stat:not(.stat--tint){ background:var(--neu-bg); border-color:transparent; box-shadow:var(--neu-out-sm); } /* El anillo de marca se queda: es lo que sigue diciendo "esta cifra importa más" ahora que el fondo ya no la distingue por sí solo. */ html[data-relieve="si"] .main .stat--tint{ background:var(--neu-bg-tint); border-color:var(--brand-200); box-shadow:var(--neu-out-tint); } /* El pie de tarjeta usaba un gris más claro para despegarse del blanco. Sobre el tono medio ese truco sobra y se vería como una banda. */ html[data-relieve="si"] .main .card:not(.hero) .card__foot{ background:transparent; } /* Bajar la superficie de blanco a #E6E6E6 le quita contraste al texto atenuado. Se compensa oscureciendo --text-3 dentro del ámbito: 4.9:1 contra #E6E6E6, que pasa AA (antes, sobre blanco, rondaba 3.1:1). */ html[data-relieve="si"] .main .card:not(.hero), html[data-relieve="si"] .main .stat{ --text-3:#4A6673; } /* Si el sistema pide más contraste, el relieve se retira y vuelve el borde. El efecto es lo primero que sobra cuando alguien necesita ver. */ @media (prefers-contrast:more){ html[data-relieve="si"] .main .card:not(.hero), html[data-relieve="si"] .main .stat{ background:var(--surface); border-color:var(--border); box-shadow:var(--sh-1); } html[data-relieve="si"] .main .stat--tint{ background:var(--surface-3); border-color:var(--brand-200); } }