/* ============================================================================ fichajes.es · sistema de diseño (ui.css) Tokens, componentes y layout de aplicación. Sin fuentes externas, sin build. Documentación: assets/DESIGN.md ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root{ /* paleta slate */ --slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8; --slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;--slate-950:#020617; /* primario índigo */ --primario-50:#eef2ff;--primario-100:#e0e7ff;--primario-200:#c7d2fe;--primario-300:#a5b4fc;--primario-400:#818cf8; --primario-500:#6366f1;--primario-600:#4f46e5;--primario-700:#4338ca;--primario-800:#3730a3;--primario-900:#312e81; --primario:var(--primario-600);--primario-hover:var(--primario-700);--primario-texto:#fff; --primario-suave:var(--primario-50);--primario-borde:var(--primario-200); --anillo:rgba(99,102,241,.35); /* semánticos */ --ok:#059669;--ok-texto:#047857;--ok-suave:#ecfdf5;--ok-borde:#a7f3d0; --ambar:#d97706;--ambar-texto:#b45309;--ambar-suave:#fffbeb;--ambar-borde:#fde68a; --mal:#dc2626;--mal-texto:#b91c1c;--mal-suave:#fef2f2;--mal-borde:#fecaca; --info:#2563eb;--info-texto:#1d4ed8;--info-suave:#eff6ff;--info-borde:#bfdbfe; --violeta:#7c3aed;--acento:#22d3ee; /* superficies y texto */ --fondo:#fff;--fondo-app:var(--slate-50);--superficie:#fff;--superficie-translucida:rgba(255,255,255,.9);--superficie-2:var(--slate-50);--superficie-3:var(--slate-100); --ink:var(--slate-900);--texto:var(--slate-800);--texto-2:var(--slate-600);--gris:var(--slate-500);--texto-suave:var(--slate-500); --linea:var(--slate-200);--linea-fuerte:var(--slate-300); /* tipografía */ --fuente:ui-sans-serif,system-ui,"Segoe UI",Roboto,Inter,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --t-xs:.75rem;--t-sm:.875rem;--t-base:1rem;--t-lg:1.125rem;--t-xl:1.25rem;--t-2xl:1.5rem;--t-3xl:1.875rem;--t-4xl:2.25rem; /* radios y sombras */ --r-sm:6px;--r:8px;--r-md:10px;--r-lg:12px;--r-xl:16px;--r-2xl:20px;--r-pill:999px;--radio:var(--r-lg); --sombra-xs:0 1px 2px rgba(15,23,42,.05); --sombra:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08); --sombra-md:0 4px 6px -1px rgba(15,23,42,.08),0 2px 4px -2px rgba(15,23,42,.06); --sombra-lg:0 10px 15px -3px rgba(15,23,42,.1),0 4px 6px -4px rgba(15,23,42,.08); --sombra-xl:0 20px 25px -5px rgba(15,23,42,.12),0 8px 10px -6px rgba(15,23,42,.08); --sombra-alta:0 24px 48px -24px rgba(15,23,42,.35); /* espaciado */ --e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-5:20px;--e-6:24px;--e-8:32px;--e-10:40px;--e-12:48px;--e-16:64px; /* layout de app */ --sidebar-ancho:264px;--sidebar-ancho-colapsado:72px;--topbar-alto:60px;--barra-inferior-alto:64px; --sidebar-fondo:var(--slate-900);--sidebar-fondo-2:var(--slate-800);--sidebar-texto:var(--slate-300);--sidebar-texto-suave:var(--slate-400);--sidebar-linea:rgba(255,255,255,.07); --transicion:.18s cubic-bezier(.2,.7,.2,1); /* compatibilidad con hojas anteriores (app.css, admin.css, kiosko.css, informes.css) */ --c:var(--primario-600);--co:var(--primario-700);--ac:var(--acento);--h1:var(--primario-900);--suave:var(--slate-100); --tinte:var(--primario-50);--tinte2:var(--primario-100);--c-borde:rgba(79,70,229,.35);--c-borde-suave:rgba(79,70,229,.18); --c-sombra:rgba(79,70,229,.45);--c-anillo:var(--anillo);--c-linea:rgba(79,70,229,.4); --ac-55:rgba(34,211,238,.55);--ac-40:rgba(34,211,238,.4);--ac-28:rgba(34,211,238,.28);--ac-60:rgba(34,211,238,.6); color-scheme:light; } /* ---------- 1b. Tema oscuro (plan §2 · 2.5) --------------------------------- Se activa con (preferencia del usuario, usuarios.tema) o, con data-tema="auto", cuando el dispositivo prefiere el modo oscuro. Solo cambian tokens: los componentes no se tocan. */ :root[data-tema="oscuro"]{ /* escala slate invertida: lo que era claro pasa a ser oscuro y al revés, así los componentes que usan la escala directamente siguen teniendo contraste */ --slate-50:#1b2537;--slate-100:#222e44;--slate-200:#2d3a52;--slate-300:#3d4b66;--slate-400:#7d8ba4;--slate-500:#98a6bd; --slate-600:#b8c3d4;--slate-700:#cdd6e3;--slate-800:#e2e8f0;--slate-900:#f1f5f9;--slate-950:#f8fafc; --primario:var(--primario-400);--primario-hover:var(--primario-300);--primario-texto:#0b1220; --primario-50:rgba(99,102,241,.14);--primario-100:rgba(99,102,241,.22);--primario-200:rgba(129,140,248,.42); --primario-suave:var(--primario-50);--primario-borde:var(--primario-200);--anillo:rgba(129,140,248,.45); --ok:#34d399;--ok-texto:#6ee7b7;--ok-suave:rgba(5,150,105,.18);--ok-borde:rgba(52,211,153,.4); --ambar:#fbbf24;--ambar-texto:#fcd34d;--ambar-suave:rgba(217,119,6,.18);--ambar-borde:rgba(251,191,36,.4); --mal:#f87171;--mal-texto:#fca5a5;--mal-suave:rgba(220,38,38,.18);--mal-borde:rgba(248,113,113,.4); --info:#60a5fa;--info-texto:#93c5fd;--info-suave:rgba(37,99,235,.18);--info-borde:rgba(96,165,250,.4); --fondo:#0f172a;--fondo-app:#0b1220;--superficie:#141d31;--superficie-translucida:rgba(20,29,49,.9);--superficie-2:#1b2537;--superficie-3:#222e44; --ink:#f1f5f9;--texto:#e2e8f0;--texto-2:#b8c3d4;--gris:#98a6bd;--texto-suave:#98a6bd; --linea:#2d3a52;--linea-fuerte:#3d4b66; --sombra-xs:0 1px 2px rgba(0,0,0,.4);--sombra:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.35); --sombra-md:0 4px 6px -1px rgba(0,0,0,.45),0 2px 4px -2px rgba(0,0,0,.4);--sombra-lg:0 10px 15px -3px rgba(0,0,0,.5),0 4px 6px -4px rgba(0,0,0,.4); --sombra-xl:0 20px 25px -5px rgba(0,0,0,.55),0 8px 10px -6px rgba(0,0,0,.45);--sombra-alta:0 24px 48px -24px rgba(0,0,0,.7); --sidebar-fondo:#080d1a;--sidebar-fondo-2:#0f172a;--sidebar-texto:#cbd5e1;--sidebar-texto-suave:#94a3b8; --h1:#c7d2fe;--suave:#1b2537;--tinte:rgba(99,102,241,.14);--tinte2:rgba(99,102,241,.22); color-scheme:dark; } @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]):not([data-tema="oscuro"]){ /* escala slate invertida: lo que era claro pasa a ser oscuro y al revés, así los componentes que usan la escala directamente siguen teniendo contraste */ --slate-50:#1b2537;--slate-100:#222e44;--slate-200:#2d3a52;--slate-300:#3d4b66;--slate-400:#7d8ba4;--slate-500:#98a6bd; --slate-600:#b8c3d4;--slate-700:#cdd6e3;--slate-800:#e2e8f0;--slate-900:#f1f5f9;--slate-950:#f8fafc; --primario:var(--primario-400);--primario-hover:var(--primario-300);--primario-texto:#0b1220; --primario-50:rgba(99,102,241,.14);--primario-100:rgba(99,102,241,.22);--primario-200:rgba(129,140,248,.42); --primario-suave:var(--primario-50);--primario-borde:var(--primario-200);--anillo:rgba(129,140,248,.45); --ok:#34d399;--ok-texto:#6ee7b7;--ok-suave:rgba(5,150,105,.18);--ok-borde:rgba(52,211,153,.4); --ambar:#fbbf24;--ambar-texto:#fcd34d;--ambar-suave:rgba(217,119,6,.18);--ambar-borde:rgba(251,191,36,.4); --mal:#f87171;--mal-texto:#fca5a5;--mal-suave:rgba(220,38,38,.18);--mal-borde:rgba(248,113,113,.4); --info:#60a5fa;--info-texto:#93c5fd;--info-suave:rgba(37,99,235,.18);--info-borde:rgba(96,165,250,.4); --fondo:#0f172a;--fondo-app:#0b1220;--superficie:#141d31;--superficie-translucida:rgba(20,29,49,.9);--superficie-2:#1b2537;--superficie-3:#222e44; --ink:#f1f5f9;--texto:#e2e8f0;--texto-2:#b8c3d4;--gris:#98a6bd;--texto-suave:#98a6bd; --linea:#2d3a52;--linea-fuerte:#3d4b66; --sombra-xs:0 1px 2px rgba(0,0,0,.4);--sombra:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.35); --sombra-md:0 4px 6px -1px rgba(0,0,0,.45),0 2px 4px -2px rgba(0,0,0,.4);--sombra-lg:0 10px 15px -3px rgba(0,0,0,.5),0 4px 6px -4px rgba(0,0,0,.4); --sombra-xl:0 20px 25px -5px rgba(0,0,0,.55),0 8px 10px -6px rgba(0,0,0,.45);--sombra-alta:0 24px 48px -24px rgba(0,0,0,.7); --sidebar-fondo:#080d1a;--sidebar-fondo-2:#0f172a;--sidebar-texto:#cbd5e1;--sidebar-texto-suave:#94a3b8; --h1:#c7d2fe;--suave:#1b2537;--tinte:rgba(99,102,241,.14);--tinte2:rgba(99,102,241,.22); color-scheme:dark; } } /* ajustes puntuales en oscuro: pie del sitio, fondos suaves y superficies que deben seguir siendo blancas (QR, firma) */ :root[data-tema="oscuro"] footer.sitio{background:#080d1a;color:#cbd5e1} :root[data-tema="oscuro"] .fondo-suave{background:radial-gradient(70% 50% at 50% 0%,rgba(99,102,241,.22) 0%,transparent 70%),#0b1220} :root[data-tema="oscuro"] .qr-alta svg,:root[data-tema="oscuro"] .qr-alta img,:root[data-tema="oscuro"] .firma-lienzo,:root[data-tema="oscuro"] .firma-trazo{background:#fff} :root[data-tema="oscuro"] .boton-luz{background:#f1f5f9} @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]) footer.sitio{background:#080d1a;color:#cbd5e1} :root:not([data-tema="claro"]) .fondo-suave{background:radial-gradient(70% 50% at 50% 0%,rgba(99,102,241,.22) 0%,transparent 70%),#0b1220} :root:not([data-tema="claro"]) .qr-alta svg,:root:not([data-tema="claro"]) .qr-alta img,:root:not([data-tema="claro"]) .firma-lienzo,:root:not([data-tema="claro"]) .firma-trazo{background:#fff} :root:not([data-tema="claro"]) .boton-luz{background:#f1f5f9} } /* ---------- 2. Base ----------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;height:100%} body{margin:0;font:var(--t-base)/1.55 var(--fuente);color:var(--texto);background:var(--fondo);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column} body.modo-app{background:var(--fondo-app)} a{color:var(--primario);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{line-height:1.2;letter-spacing:-.015em;color:var(--ink);text-wrap:balance;margin:0 0 .5em} h1{font-size:clamp(1.5rem,1vw + 1.2rem,1.95rem);font-weight:700;letter-spacing:-.025em} h2{font-size:clamp(1.15rem,.5vw + 1rem,1.35rem);font-weight:700;margin:1.5em 0 .6em} h3{font-size:1rem;font-weight:600;margin:1.1em 0 .45em} h4{font-size:var(--t-sm);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)} p,ul,ol{margin:0 0 1em} img,svg{max-width:100%;height:auto} hr{border:0;border-top:1px solid var(--linea);margin:20px 0} code,.codigo{font-family:var(--mono);font-size:.82em;background:var(--slate-100);padding:2px 6px;border-radius:var(--r-sm);color:var(--slate-700);word-break:break-all} strong,b{font-weight:600} small{font-size:var(--t-sm)} :focus-visible{outline:2px solid var(--primario);outline-offset:2px;border-radius:var(--r-sm)} ::selection{background:var(--primario-100);color:var(--primario-900)} main{flex:1} .contenedor{max-width:1120px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-right));width:100%} .modo-app .contenedor{max-width:1360px} .estrecho{max-width:760px} .mini{font-size:var(--t-sm);color:var(--gris)} .oculto-visual{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} .saltar{position:absolute;left:8px;top:-60px;z-index:1000;padding:10px 14px;background:var(--primario);color:var(--primario-texto);border-radius:var(--r);font-weight:600;box-shadow:var(--sombra-lg);transition:top .15s} .saltar:focus{top:8px;outline:2px solid var(--ink);outline-offset:2px;text-decoration:none} main:focus{outline:0} [hidden]{display:none!important} .ok{color:var(--ok-texto)}.mal{color:var(--mal-texto)}.ambar{color:var(--ambar-texto)} .num{text-align:right!important;white-space:nowrap;font-variant-numeric:tabular-nums} .icono{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.2em;display:inline-block} .kicker{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 10px;border-radius:var(--r-pill);background:var(--primario-50);border:1px solid var(--primario-200);color:var(--primario-700);font-size:var(--t-xs);font-weight:600;letter-spacing:.02em;text-transform:uppercase} .kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primario-500)} .ayuda{color:var(--gris);font-size:var(--t-sm);margin-top:5px} /* ---------- 3. Cabecera de página, migas, secciones ---------------------- */ .cabecera-pagina{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 16px;margin:18px 0 18px} .cabecera-pagina h1{margin:0} .cabecera-pagina>.mini,.cabecera-pagina .subtitulo{margin:4px 0 0;color:var(--gris);font-size:var(--t-sm)} .cabecera-pagina .acciones-fila{margin-left:auto} .cabecera-pagina .kicker{margin-bottom:8px} .migas ol{list-style:none;margin:14px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:2px;font-size:var(--t-xs);color:var(--gris)} .migas li+li::before{content:"/";margin:0 8px;color:var(--slate-300)} .migas a{color:var(--gris)} .seccion{padding:36px 0 8px} .seccion h2{margin-top:0} .seccion-suave{background:var(--slate-50);border:1px solid var(--linea);margin:2em 0;padding:24px 20px;border-radius:var(--r-2xl)} .dos-columnas{display:grid;grid-template-columns:1fr;gap:16px 24px;align-items:start} @media (min-width:860px){.dos-columnas{grid-template-columns:1fr 1fr}} .grid-2{display:grid;grid-template-columns:1fr;gap:16px 24px;align-items:start} @media (min-width:960px){.grid-2{grid-template-columns:1fr 1fr}} .acciones-fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .accion-inline{display:inline-block;margin:0} .destacado{background:var(--primario-50);border:1px solid var(--primario-200);border-left:4px solid var(--primario-500);padding:14px 18px;border-radius:var(--r-lg);margin:0 0 1.2em;color:var(--slate-700)} .destacado p:last-child{margin:0} .nav-periodo{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 1em;padding:8px 12px;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-lg)} .nav-periodo strong{font-size:var(--t-base)} /* ---------- 4. Botones --------------------------------------------------- */ .boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid transparent;border-radius:var(--r);font:inherit;font-size:var(--t-sm);font-weight:600;line-height:1;color:var(--primario-texto);background:var(--primario);cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:var(--sombra-xs);transition:background var(--transicion),color var(--transicion),border-color var(--transicion),box-shadow var(--transicion),transform .1s;-webkit-tap-highlight-color:transparent} .boton:hover{background:var(--primario-hover);text-decoration:none;color:var(--primario-texto)} .boton:active{transform:translateY(1px)} .boton[disabled],.boton[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;pointer-events:none} .boton .icono{width:1.1rem;height:1.1rem} .boton-secundario{background:var(--superficie);color:var(--slate-700);border-color:var(--linea-fuerte)} .boton-secundario:hover{background:var(--slate-50);color:var(--ink);border-color:var(--slate-400)} .boton-suave{background:var(--primario-50);color:var(--primario-700);box-shadow:none} .boton-suave:hover{background:var(--primario-100);color:var(--primario-800)} .boton-peligro{background:var(--mal);color:#fff} .boton-peligro:hover{background:var(--mal-texto);color:#fff} .boton-peligro.boton-secundario,.boton-peligro-suave{background:var(--superficie);color:var(--mal-texto);border-color:var(--mal-borde)} .boton-peligro.boton-secundario:hover,.boton-peligro-suave:hover{background:var(--mal-suave)} .boton-fantasma{background:transparent;color:inherit;border-color:transparent;box-shadow:none} .boton-fantasma:hover{background:var(--slate-100);color:var(--ink)} .boton-luz{background:#fff;color:var(--primario-700);box-shadow:var(--sombra-md)} .boton-luz:hover{background:var(--primario-50);color:var(--primario-800)} .boton-enlace{background:none;border:0;box-shadow:none;color:var(--primario);padding:0;min-height:0;font-weight:600} .boton-enlace:hover{text-decoration:underline;background:none} .boton-pequeno{min-height:32px;padding:0 12px;font-size:var(--t-xs);border-radius:var(--r-sm)} .boton-grande{min-height:48px;padding:0 22px;font-size:var(--t-base);border-radius:var(--r-md)} .boton-bloque{width:100%} .boton-icono{padding:0;width:40px;min-width:40px} .boton-icono.boton-pequeno{width:32px;min-width:32px} .boton-icono .icono{width:1.2rem;height:1.2rem} .boton .contador{background:rgba(255,255,255,.22);border-radius:var(--r-pill);padding:0 7px;font-size:var(--t-xs);min-width:20px;line-height:20px} .boton-secundario .contador{background:var(--slate-100);color:var(--slate-600)} /* ---------- 5. Formularios ----------------------------------------------- */ form.formulario{max-width:640px} form.formulario-ancho{max-width:none} .formulario h3{display:flex;align-items:center;gap:8px;margin:1.6em 0 .9em;padding-top:16px;border-top:1px solid var(--linea);font-size:var(--t-xs);font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--gris)} .formulario h3:first-of-type{border-top:0;padding-top:0;margin-top:.2em} .formulario h3 .icono{width:15px;height:15px} .formulario>.acciones-fila:last-of-type,.formulario>.boton:last-child{margin-top:8px} .campo{margin:0 0 16px;min-width:0} .campo label,.etiqueta-campo{display:block;font-weight:500;margin-bottom:6px;font-size:var(--t-sm);color:var(--slate-700)} .campo label .mini{font-weight:400} /* :where() deja la especificidad en (0,0,1): cualquier clase del proyecto puede sobrescribir estos valores */ :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),select,textarea){font:inherit;font-size:var(--t-sm);color:var(--ink);background:var(--superficie);border:1px solid var(--linea-fuerte);border-radius:var(--r);min-height:40px;padding:8px 12px;width:auto;max-width:100%;transition:border-color var(--transicion),box-shadow var(--transicion)} .campo :where(input:not([type=checkbox]):not([type=radio]),select,textarea){width:100%} :where(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{outline:0;border-color:var(--primario);box-shadow:0 0 0 3px var(--anillo)} input::placeholder,textarea::placeholder{color:var(--slate-400)} :where(input[disabled],select[disabled],textarea[disabled],input[readonly]){background:var(--slate-50);color:var(--slate-500);cursor:not-allowed} :where(input[readonly]){cursor:text} :where(textarea){min-height:96px;line-height:1.5;resize:vertical} :where(select){appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:34px} :where(select[multiple]){background-image:none;padding-right:12px} input[type=checkbox],input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--primario);cursor:pointer;flex:none} input[type=date],input[type=time],input[type=number]{font-variant-numeric:tabular-nums} input[type=search]{-webkit-appearance:none} input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;height:14px;width:14px;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;cursor:pointer} input[type=file]{font-size:var(--t-sm)} input[type=file]::file-selector-button{font:inherit;font-size:var(--t-xs);font-weight:600;min-height:32px;padding:0 12px;border:1px solid var(--linea-fuerte);border-radius:var(--r-sm);background:var(--superficie);color:var(--slate-700);margin-right:10px;cursor:pointer} .campo .msg-error{color:var(--mal-texto);font-size:var(--t-sm);margin-top:5px} .campo.error input,.campo.error select,.campo.error textarea{border-color:var(--mal)} .campo.error input:focus,.campo.error select:focus{box-shadow:0 0 0 3px rgba(220,38,38,.2)} .campo.check,label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:var(--t-sm);color:var(--texto);cursor:pointer;margin-bottom:10px} .campo.check input,label.check input{margin-top:2px} .campo.check label{margin:0;font-weight:500} .campo.check .mini{display:block;font-weight:400} .campo-ancho{grid-column:1 / -1} .fila-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px} @media (max-width:600px){.fila-campos{grid-template-columns:1fr}} .campo-adjunto{position:relative} .campo-adjunto .icono{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--slate-400);pointer-events:none} .campo-adjunto input{padding-left:38px} /* interruptor */ .switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--t-sm);font-weight:500} .switch input{position:absolute;opacity:0;width:0;height:0} .switch .pista{width:38px;height:22px;border-radius:var(--r-pill);background:var(--slate-300);position:relative;transition:background var(--transicion);flex:none} .switch .pista::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--sombra);transition:transform var(--transicion)} .switch input:checked+.pista{background:var(--primario)} .switch input:checked+.pista::after{transform:translateX(16px)} .switch input:focus-visible+.pista{outline:2px solid var(--primario);outline-offset:2px} /* filtros y formularios en línea */ .filtros{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin:0 0 16px;padding:12px;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-lg)} .filtros form{display:contents} .filtros .campo{margin:0;min-width:140px;flex:1 1 140px} .filtros>input,.filtros>select{min-height:38px} .filtros input[type=search]{min-width:200px;flex:1 1 200px} .filtros .boton{min-height:38px} .filtros .campo .boton,.filtros .boton.boton-pequeno{min-height:38px} .formulario-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .formulario-inline input,.formulario-inline select{min-height:36px;padding:4px 10px} .formulario-inline .campo{margin:0} form.acciones-fila .campo{margin:0} fieldset{border:1px solid var(--linea);border-radius:var(--r-lg);padding:14px 16px 4px;margin:0 0 16px} legend{font-weight:600;font-size:var(--t-sm);padding:0 6px;color:var(--slate-700)} /* ---------- 6. Badges, etiquetas, chips ---------------------------------- */ .etiqueta{display:inline-flex;align-items:center;gap:5px;background:var(--slate-100);border:1px solid var(--slate-200);border-radius:var(--r-pill);padding:1px 9px;font-size:var(--t-xs);color:var(--slate-600);font-weight:600;vertical-align:middle;white-space:nowrap;line-height:1.5} .etiqueta.ok{background:var(--ok-suave);color:var(--ok-texto);border-color:var(--ok-borde)} .etiqueta.mal{background:var(--mal-suave);color:var(--mal-texto);border-color:var(--mal-borde)} .etiqueta.ambar{background:var(--ambar-suave);color:var(--ambar-texto);border-color:var(--ambar-borde)} .etiqueta.azul,.etiqueta.info{background:var(--info-suave);color:var(--info-texto);border-color:var(--info-borde)} .etiqueta.primario{background:var(--primario-50);color:var(--primario-700);border-color:var(--primario-200)} .etiqueta.punto::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8} .pastilla{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:600;color:#fff;background:var(--slate-500);line-height:1.5;white-space:nowrap} .semaforo{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:var(--slate-300);vertical-align:middle} .semaforo.ok{background:var(--ok)}.semaforo.ambar{background:var(--ambar)}.semaforo.mal{background:var(--mal)} .contador-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--mal);color:#fff;font-size:11px;font-weight:700;line-height:1} .avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--primario-100);color:var(--primario-800);font-weight:700;font-size:var(--t-sm);flex:none;letter-spacing:.02em} .avatar.pequeno{width:28px;height:28px;font-size:var(--t-xs)} .usuario-chip{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-sm);color:inherit} .usuario-chip b{display:inline-flex;width:32px;height:32px;border-radius:50%;background:var(--primario-100);color:var(--primario-800);align-items:center;justify-content:center;font-size:var(--t-xs);font-weight:700;flex:none} /* ---------- 7. Avisos y toasts ------------------------------------------- */ .aviso{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-lg);margin:0 0 1.2em;font-size:var(--t-sm);border:1px solid var(--linea);background:var(--superficie);color:var(--texto)} .aviso>.icono{margin-top:2px;width:1.2rem;height:1.2rem} .aviso p:last-child{margin:0} .aviso-ok{background:var(--ok-suave);color:var(--ok-texto);border-color:var(--ok-borde)} .aviso-error,.aviso-mal{background:var(--mal-suave);color:var(--mal-texto);border-color:var(--mal-borde)} .aviso-info{background:var(--info-suave);color:var(--info-texto);border-color:var(--info-borde)} .aviso-ambar{background:var(--ambar-suave);color:var(--ambar-texto);border-color:var(--ambar-borde)} .aviso a{color:inherit;text-decoration:underline} .toasts{position:fixed;top:calc(var(--topbar-alto) + 10px);right:14px;z-index:120;display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 28px));pointer-events:none} .modo-publico .toasts{top:80px} .toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;background:var(--superficie);color:var(--texto);border:1px solid var(--linea);border-left:4px solid var(--slate-400);border-radius:var(--r-lg);padding:12px 12px 12px 14px;box-shadow:var(--sombra-xl);font-size:var(--t-sm);animation:toast-entrar .28s cubic-bezier(.2,.7,.2,1) both} .toast .icono{width:1.2rem;height:1.2rem;margin-top:1px} .toast-ok{border-left-color:var(--ok)}.toast-ok .icono{color:var(--ok)} .toast-error,.toast-mal{border-left-color:var(--mal)}.toast-error .icono,.toast-mal .icono{color:var(--mal)} .toast-ambar{border-left-color:var(--ambar)}.toast-ambar .icono{color:var(--ambar)} .toast-info{border-left-color:var(--info)}.toast-info .icono{color:var(--info)} .toast-texto{flex:1;min-width:0;line-height:1.45} .toast-cerrar{background:none;border:0;color:var(--slate-400);cursor:pointer;padding:2px;border-radius:var(--r-sm);display:inline-flex;margin:-2px -4px 0 0} .toast-cerrar:hover{color:var(--ink);background:var(--slate-100)} .toast.saliendo{animation:toast-salir .22s ease-in both} @keyframes toast-entrar{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}} @keyframes toast-salir{to{opacity:0;transform:translateX(18px)}} /* ---------- 8. Tarjetas, paneles, estadísticas ----------------------------- */ .tarjeta,.panel{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-xl);box-shadow:var(--sombra);color:inherit} .tarjeta{padding:18px 18px 16px;display:block;transition:transform var(--transicion),box-shadow var(--transicion),border-color var(--transicion)} a.tarjeta:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--sombra-lg);border-color:var(--primario-300)} .tarjeta h3{margin:0 0 .35em;font-size:var(--t-sm);font-weight:600;color:var(--gris)} .tarjeta h2{margin-top:0} .tarjeta p{margin:0} .tarjeta p+p{margin-top:.4em} .tarjeta .dato{font-size:clamp(1.55rem,1vw + 1.2rem,2rem);font-weight:700;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1;margin:2px 0 4px} .tarjeta .dato.ok{color:var(--ok-texto)}.tarjeta .dato.mal{color:var(--mal-texto)}.tarjeta .dato.ambar{color:var(--ambar-texto)}.tarjeta .dato.primario{color:var(--primario-700)} .tarjeta .dato small{font-size:.55em;font-weight:500;color:var(--gris);letter-spacing:0} .tarjeta .tendencia{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-xs);font-weight:600;border-radius:var(--r-pill);padding:1px 8px;background:var(--slate-100);color:var(--slate-600)} .tarjeta .tendencia.ok{background:var(--ok-suave);color:var(--ok-texto)}.tarjeta .tendencia.mal{background:var(--mal-suave);color:var(--mal-texto)} .tarjeta-icono{width:38px;height:38px;border-radius:var(--r-md);background:var(--primario-50);color:var(--primario-600);display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px} .tarjeta-icono .icono{width:20px;height:20px} .tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0 0 1.4em} .tarjetas.compactas{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px} .tarjetas.compactas .tarjeta{padding:12px 14px} .tarjetas.compactas .tarjeta .dato{font-size:1.35rem} .resumen-mes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 1.2em} @media (min-width:760px){.resumen-mes{grid-template-columns:repeat(4,1fr)}} .panel{padding:20px;margin:0 0 18px} .panel>h2:first-child,.panel>h3:first-child{margin-top:0} .panel h2{font-size:var(--t-lg)} .panel h3{margin:.2em 0 .6em} .panel-cabecera{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:-4px 0 14px} .panel-cabecera h2,.panel-cabecera h3{margin:0} .panel-pie{border-top:1px solid var(--linea);margin:16px -20px -20px;padding:12px 20px;background:var(--slate-50);border-radius:0 0 var(--r-xl) var(--r-xl);font-size:var(--t-sm);color:var(--gris)} .panel.peligro{border-color:var(--mal-borde)} .panel.peligro>h2:first-child,.panel.peligro>h3:first-child{color:var(--mal-texto)} .panel.aviso-panel{border-color:var(--ambar-borde);background:var(--ambar-suave)} .tarjeta-centrada{max-width:440px;margin:24px auto;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-2xl);padding:28px 26px;box-shadow:var(--sombra-xl)} .tarjeta-centrada h1{font-size:var(--t-2xl);margin:.1em 0 .4em} .tarjeta-centrada .formulario{max-width:none} .fondo-suave{background:radial-gradient(70% 50% at 50% 0%,var(--primario-100) 0%,transparent 70%),var(--slate-50)} .marca-centrada{display:flex;flex-direction:column;align-items:center;gap:10px;margin:28px 0 -4px;text-align:center} .marca-centrada .logo-marca{width:48px;height:48px;border-radius:14px} .marca-centrada span{font-weight:700;font-size:var(--t-lg);letter-spacing:-.02em;color:var(--ink)} /* ---------- 9. Tablas --------------------------------------------------- */ .tabla-envoltorio{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--linea);border-radius:var(--r-xl);-webkit-overflow-scrolling:touch;background:var(--superficie);box-shadow:var(--sombra-xs)} .tabla-envoltorio.sin-scroll{overflow:visible} table.tabla{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--t-sm)} table.tabla th,table.tabla td{padding:10px 14px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top} table.tabla thead th{background:var(--slate-50);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--slate-500);font-weight:600;white-space:nowrap;position:sticky;top:0;z-index:1} .modo-app .tabla-envoltorio.sin-scroll table.tabla thead th{top:var(--topbar-alto)} table.tabla thead tr:first-child th:first-child{border-top-left-radius:var(--r-xl)} table.tabla thead tr:first-child th:last-child{border-top-right-radius:var(--r-xl)} table.tabla tbody tr:last-child td{border-bottom:0} table.tabla tbody tr:hover td{background:var(--slate-50)} table.tabla tbody th{font-weight:600;color:var(--slate-700)} table.tabla td .etiqueta{margin-top:1px} table.tabla td.acciones-fila,table.tabla td .acciones-fila{gap:6px} table.tabla td.acciones-fila{display:table-cell} table.tabla td.acciones-fila>*{display:inline-block;vertical-align:middle;margin:1px 2px 1px 0} .tabla-compacta td,.tabla-compacta th{padding:7px 10px!important;font-size:var(--t-xs)} table.tabla th[aria-sort]{cursor:pointer;user-select:none;padding-right:26px} table.tabla th[aria-sort]::after{content:"";position:absolute;right:10px;top:50%;width:14px;height:14px;transform:translateY(-50%);opacity:.35;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 9 4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat} table.tabla th[aria-sort="ascending"]::after{opacity:1;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E")} table.tabla th[aria-sort="descending"]::after{opacity:1;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")} table.tabla th[aria-sort]:hover{color:var(--ink)} tr.fila-baja td{opacity:.6} tr.destacada td{background:var(--primario-50)!important} tr.hoy td{background:var(--primario-50)} tr.finde td{color:var(--gris);background:var(--slate-50)} .hash{font-family:var(--mono);font-size:var(--t-xs);word-break:break-all;color:var(--slate-600)} .codigo-grande{font-family:var(--mono);font-size:1.2rem;font-weight:700;letter-spacing:.08em;background:var(--slate-100);border:1px dashed var(--slate-300);padding:10px 14px;border-radius:var(--r-md);display:inline-block;word-break:break-all} /* datatable (ui.js) */ .dt-barra{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 10px} .dt-barra .dt-buscar{position:relative;flex:1 1 220px;max-width:360px} .dt-barra .dt-buscar input{width:100%;min-height:36px;padding-left:34px;font-size:var(--t-sm)} .dt-barra .dt-buscar .icono{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--slate-400);width:16px;height:16px} .dt-barra .dt-contador{font-size:var(--t-xs);color:var(--gris);white-space:nowrap;margin-left:auto} .dt-barra select{min-height:36px;font-size:var(--t-xs);padding:4px 30px 4px 10px} .dt-barra .boton{min-height:36px} .dt-pie{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;margin:-8px 0 16px;font-size:var(--t-xs);color:var(--gris)} .paginacion{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin:14px 0} .paginacion a,.paginacion span,.paginacion button{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border:1px solid var(--linea);border-radius:var(--r-sm);font:inherit;font-size:var(--t-xs);font-weight:500;color:var(--slate-700);background:var(--superficie);cursor:pointer;text-decoration:none} .paginacion a:hover,.paginacion button:hover{background:var(--slate-50);border-color:var(--slate-400)} .paginacion span.actual,.paginacion button.actual,.paginacion button[aria-current="page"]{background:var(--primario);color:var(--primario-texto);border-color:var(--primario);font-weight:600} .paginacion button[disabled]{opacity:.45;cursor:not-allowed} .paginacion .puntos{border:0;background:none;min-width:20px} .dt-vacio td{text-align:center;padding:28px 14px!important;color:var(--gris)} /* tarjetas en móvil */ @media (max-width:720px){ .tabla-envoltorio.tabla-tarjetas{border:0;background:none;box-shadow:none;overflow:visible} .tabla-tarjetas table.tabla,.tabla-tarjetas table.tabla tbody,.tabla-tarjetas table.tabla tr,.tabla-tarjetas table.tabla td{display:block} .tabla-tarjetas table.tabla thead{display:none} .tabla-tarjetas table.tabla tr{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-lg);margin:0 0 10px;padding:6px 0;box-shadow:var(--sombra-xs)} .tabla-tarjetas table.tabla td{border:0;padding:6px 14px;display:flex;gap:12px;justify-content:space-between;align-items:flex-start;text-align:left!important;white-space:normal} .tabla-tarjetas table.tabla td::before{content:attr(data-label);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--slate-500);font-weight:600;flex:0 0 38%;padding-top:2px} .tabla-tarjetas table.tabla td:not([data-label])::before,.tabla-tarjetas table.tabla td[data-label=""]::before{display:none} .tabla-tarjetas table.tabla td.acciones-fila{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;padding-top:10px} .tabla-tarjetas table.tabla td.acciones-fila::before{flex-basis:100%} .tabla-tarjetas table.tabla tbody tr:hover td{background:none} .tabla-tarjetas table.tabla tr.dt-vacio td{justify-content:center} } /* ---------- 10. Tabs y sub-navegación ------------------------------------ */ .tabs,[role=tablist].tabs{display:flex;gap:2px;flex-wrap:wrap;margin:0 0 16px;border-bottom:1px solid var(--linea)} .tabs a,.tabs button,.tabs [role=tab]{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 14px;font:inherit;font-size:var(--t-sm);font-weight:500;color:var(--gris);cursor:pointer;text-decoration:none;white-space:nowrap;border-radius:var(--r-sm) var(--r-sm) 0 0;transition:color var(--transicion),background var(--transicion)} .tabs a:hover,.tabs button:hover,.tabs [role=tab]:hover{color:var(--ink);background:var(--slate-50);text-decoration:none} .tabs a.activo,.tabs [role=tab][aria-selected="true"],.tabs button.activo{color:var(--primario-700);border-bottom-color:var(--primario);font-weight:600} .tabs .contador{margin-left:6px;background:var(--slate-100);border-radius:var(--r-pill);padding:0 7px;font-size:var(--t-xs);color:var(--slate-600)} .tabs-pastillas{border:0;background:var(--slate-100);padding:4px;border-radius:var(--r-md);display:inline-flex;gap:2px} .tabs-pastillas a,.tabs-pastillas [role=tab]{border:0;margin:0;border-radius:var(--r-sm);padding:7px 14px} .tabs-pastillas a.activo,.tabs-pastillas [role=tab][aria-selected="true"]{background:var(--superficie);box-shadow:var(--sombra);color:var(--ink)} [data-tab-panel][hidden]{display:none} .subnav{display:flex;gap:4px;overflow-x:auto;padding:2px 0 8px;margin:0 0 14px;border-bottom:1px solid var(--linea);scrollbar-width:none} .subnav::-webkit-scrollbar{display:none} .subnav a{flex:none;padding:7px 12px;border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:500;color:var(--gris);white-space:nowrap} .subnav a:hover{background:var(--slate-100);text-decoration:none;color:var(--ink)} .subnav a.activo{background:var(--primario-50);color:var(--primario-700);font-weight:600} .subnav-grupo{display:flex;gap:4px;align-items:center;flex:none} .subnav-grupo b{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--slate-400);margin:0 2px 0 12px;white-space:nowrap} .subnav-grupo:first-child b{margin-left:0} @media (max-width:600px){.subnav-grupo b{display:none}} /* ---------- 11. Dropdown ------------------------------------------------- */ .dropdown{position:relative;display:inline-block} .dropdown-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--sombra-xl);padding:6px;z-index:90;display:none;animation:dd-entrar .14s ease-out} .dropdown-menu.izquierda{right:auto;left:0} .dropdown.abierto>.dropdown-menu,.dropdown-menu[data-abierto]{display:block} .dropdown-menu a,.dropdown-menu button,.dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;border-radius:var(--r-sm);font:inherit;font-size:var(--t-sm);color:var(--slate-700);text-align:left;cursor:pointer;text-decoration:none} .dropdown-menu a:hover,.dropdown-menu button:hover,.dropdown-item:hover,.dropdown-menu a:focus-visible,.dropdown-menu button:focus-visible{background:var(--slate-100);color:var(--ink);text-decoration:none;outline:0} .dropdown-menu .icono{width:1.05rem;height:1.05rem;color:var(--slate-500)} .dropdown-menu .peligro{color:var(--mal-texto)} .dropdown-menu .peligro .icono{color:var(--mal)} .dropdown-separador{height:1px;background:var(--linea);margin:6px 4px} .dropdown-titulo{padding:8px 10px 4px;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--slate-400);font-weight:600} .dropdown-cabecera{padding:10px 10px 8px;border-bottom:1px solid var(--linea);margin:0 0 6px} .dropdown-cabecera strong{display:block;color:var(--ink);font-size:var(--t-sm)} .dropdown-cabecera span{display:block;color:var(--gris);font-size:var(--t-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dropdown-menu.ancho{min-width:340px;max-width:min(400px,calc(100vw - 24px))} @keyframes dd-entrar{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* ---------- 12. Dialog / modal ------------------------------------------ */ dialog.dialogo{border:0;border-radius:var(--r-2xl);padding:0;width:min(440px,calc(100vw - 32px));background:var(--superficie);color:var(--texto);box-shadow:var(--sombra-xl);animation:dialogo-entrar .18s cubic-bezier(.2,.7,.2,1)} dialog.dialogo::backdrop{background:rgba(15,23,42,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} dialog.dialogo.ancho{width:min(720px,calc(100vw - 32px))} .dialogo-cuerpo{padding:24px 24px 8px} .dialogo-cuerpo h2,.dialogo-cuerpo h3{margin:0 0 .5em;font-size:var(--t-lg)} .dialogo-cuerpo p{color:var(--texto-2);font-size:var(--t-sm)} .dialogo-icono{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--mal-suave);color:var(--mal);margin-bottom:12px} .dialogo-icono .icono{width:22px;height:22px} .dialogo-icono.info{background:var(--primario-50);color:var(--primario-600)} .dialogo-pie{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:12px 24px 20px} .dialogo-cerrar{position:absolute;top:12px;right:12px} @keyframes dialogo-entrar{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}} /* ---------- 13. Estados vacíos, skeleton, tooltips ------------------------- */ .vacio{text-align:center;padding:36px 20px;border:1px dashed var(--slate-300);border-radius:var(--r-xl);background:var(--superficie);color:var(--gris);margin:0 0 1.2em} .vacio .icono{width:36px;height:36px;color:var(--slate-300);margin-bottom:10px} .vacio h3{margin:0 0 .3em;color:var(--slate-700);font-size:var(--t-base)} .vacio p{margin:0 auto .9em;max-width:46ch;font-size:var(--t-sm)} .vacio .boton{margin-top:4px} .skeleton{position:relative;overflow:hidden;background:var(--slate-200);border-radius:var(--r-sm);color:transparent!important;min-height:1em;pointer-events:none;user-select:none} .skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-100%);animation:skeleton 1.4s infinite} .skeleton.linea{height:12px;margin:6px 0} .skeleton.bloque{height:80px;border-radius:var(--r-lg)} .skeleton.circulo{width:36px;height:36px;border-radius:50%} @keyframes skeleton{to{transform:translateX(100%)}} [data-tooltip]{position:relative} [data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);background:var(--slate-900);color:#fff;font-size:var(--t-xs);font-weight:500;line-height:1.3;padding:6px 9px;border-radius:var(--r-sm);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s,transform .12s;z-index:100;box-shadow:var(--sombra-lg)} [data-tooltip]:hover::after,[data-tooltip]:focus-visible::after{opacity:1;visibility:visible;transform:translateX(-50%)} [data-tooltip][data-tooltip-pos="derecha"]::after{left:calc(100% + 10px);bottom:auto;top:50%;transform:translateY(-50%) translateX(-4px)} [data-tooltip][data-tooltip-pos="derecha"]:hover::after,[data-tooltip][data-tooltip-pos="derecha"]:focus-visible::after{transform:translateY(-50%)} [data-tooltip][data-tooltip-pos="abajo"]::after{bottom:auto;top:calc(100% + 8px);transform:translateX(-50%) translateY(-4px)} [data-tooltip][data-tooltip-pos="abajo"]:hover::after,[data-tooltip][data-tooltip-pos="abajo"]:focus-visible::after{transform:translateX(-50%)} .barra{height:8px;background:var(--slate-200);border-radius:4px;overflow:hidden} .barra span{display:block;height:100%;background:var(--primario);border-radius:4px} .barra.ok span{background:var(--ok)}.barra.ambar span{background:var(--ambar)}.barra.mal span{background:var(--mal)} /* ---------- 14. Listas y varios ------------------------------------------ */ .lista-limpia{list-style:none;padding:0;margin:0} .lista-limpia li{padding:9px 0;border-bottom:1px solid var(--linea)} .lista-limpia li:last-child{border-bottom:0} .lista-simple{list-style:none;padding:0;margin:0} .lista-simple li{padding:9px 0;border-bottom:1px solid var(--linea);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:var(--t-sm)} .lista-simple li:last-child{border-bottom:0} .incidencia-lista{list-style:none;padding:0;margin:0} .incidencia-lista li{padding:8px 0;border-bottom:1px solid var(--linea);display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm)} .incidencia-lista li:last-child{border:0} .texto-legal{max-width:76ch;line-height:1.65;color:var(--slate-700)} .texto-legal h2{font-size:var(--t-lg);margin:1.6em 0 .5em} .texto-legal h3{font-size:var(--t-base);margin:1.3em 0 .4em} .editor-legal textarea{width:100%;min-height:360px;font-family:var(--mono);font-size:var(--t-xs);line-height:1.5;padding:12px} .qr-alta{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap} .qr-alta svg,.qr-alta img{flex:none;background:#fff;border:1px solid var(--linea);border-radius:var(--r-lg);padding:8px;max-width:100%;height:auto} .qr-alta>div{flex:1 1 260px;min-width:0} .faq details{border-bottom:1px solid var(--linea);padding:4px 0} .faq summary{cursor:pointer;font-weight:600;padding:12px 36px 12px 0;list-style:none;position:relative;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:6px;top:50%;width:18px;height:18px;transform:translateY(-50%);background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--transicion)} .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .faq details>div,.faq details>p{padding:0 0 12px;color:var(--slate-700);font-size:.95rem} .faq details>div p:last-child{margin:0} details.accion-inline summary{list-style:none;display:inline-flex} details.accion-inline summary::-webkit-details-marker{display:none} details>summary.mini{cursor:pointer} .linea-tiempo{list-style:none;padding:0;margin:0;width:100%;max-width:520px;text-align:left} .linea-tiempo li{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linea);font-size:var(--t-sm)} .linea-tiempo li:last-child{border:0} .linea-tiempo time{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);min-width:52px} .linea-tiempo .punto{width:10px;height:10px;border-radius:50%;background:var(--primario);flex:none} .linea-tiempo .punto.salida{background:var(--mal)}.linea-tiempo .punto.pausa_inicio,.linea-tiempo .punto.pausa_fin{background:var(--ambar)} .linea-tiempo .anulado{text-decoration:line-through;color:var(--gris)} .estado-jornada{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle;background:var(--slate-400)} .estado-jornada.completa{background:var(--ok)}.estado-jornada.incidencia{background:var(--ambar)}.estado-jornada.abierta{background:var(--primario)}.estado-jornada.incompleta{background:var(--mal)}.estado-jornada.ausencia{background:var(--violeta)}.estado-jornada.sin_fichajes{background:var(--slate-300)} .saldo-pos{color:var(--ok-texto)}.saldo-neg{color:var(--mal-texto)} .kpi-fila{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:0 0 18px} .kpi{border:1px solid var(--linea);border-radius:var(--r-xl);padding:14px 16px;background:var(--superficie);box-shadow:var(--sombra-xs)} .kpi b{display:block;font-size:1.6rem;font-weight:700;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1} .kpi b small{font-size:.6em;color:var(--gris);font-weight:500} .kpi small{color:var(--gris);font-size:var(--t-xs);display:block;margin-top:4px} .badge-estado{display:inline-block;padding:1px 9px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:600;letter-spacing:.02em;border:1px solid transparent;text-transform:capitalize} .badge-estado.prueba{background:var(--info-suave);color:var(--info-texto);border-color:var(--info-borde)} .badge-estado.activo{background:var(--ok-suave);color:var(--ok-texto);border-color:var(--ok-borde)} .badge-estado.suspendido{background:var(--ambar-suave);color:var(--ambar-texto);border-color:var(--ambar-borde)} .badge-estado.baja{background:var(--slate-100);color:var(--slate-600);border-color:var(--slate-200)} .badge-plan{display:inline-block;padding:1px 8px;border-radius:var(--r-sm);font-size:var(--t-xs);font-weight:600;background:var(--primario-50);color:var(--primario-800);border:1px solid var(--primario-200)} .tarjeta-accion{border:1px solid var(--linea);border-radius:var(--r-xl);padding:18px;background:var(--superficie);margin:0 0 14px;box-shadow:var(--sombra-xs)} .tarjeta-accion h3{margin:0 0 .7em;font-size:var(--t-base)} .tarjeta-accion summary{cursor:pointer} .tarjeta-accion.peligro{border-color:var(--mal-borde)} .tarjeta-accion.peligro h3{color:var(--mal-texto)} .tarjeta-accion.aviso{border-color:var(--ambar-borde);background:var(--ambar-suave)} .tarjeta-accion form>.boton:last-child{margin-top:4px} .limite{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums} .limite .pista{flex:1;height:6px;background:var(--slate-200);border-radius:3px;overflow:hidden;min-width:60px} .limite .pista span{display:block;height:100%;background:var(--primario);border-radius:3px} .limite .pista span.lleno{background:var(--mal)} /* ---------- 15. Layout de aplicación (sidebar + topbar) ------------------- */ .app-shell{display:flex;min-height:100vh;flex:1} .sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-ancho);background:var(--sidebar-fondo);color:var(--sidebar-texto);display:flex;flex-direction:column;z-index:110;transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.7,.2,1),width .18s} .sidebar a{color:inherit} .sidebar-cabecera{display:flex;align-items:center;gap:10px;height:var(--topbar-alto);padding:0 14px 0 16px;border-bottom:1px solid var(--sidebar-linea);flex:none} .sidebar-cabecera .logo{flex:1;min-width:0} .logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:#fff;text-decoration:none;white-space:nowrap} .logo:hover{text-decoration:none} .logo-marca{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--acento),var(--primario-500));box-shadow:0 4px 12px -4px rgba(34,211,238,.6);display:inline-flex;align-items:center;justify-content:center;flex:none;color:#fff} .logo-marca .icono{width:18px;height:18px;stroke-width:2.4} .logo small{display:block;font-weight:500;font-size:.68rem;color:var(--sidebar-texto-suave);letter-spacing:.02em;line-height:1.1} .logo-texto{display:flex;flex-direction:column;line-height:1.15;min-width:0} .sidebar-boton{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r);border:0;background:transparent;color:var(--sidebar-texto-suave);cursor:pointer;flex:none} .sidebar-boton:hover{background:var(--sidebar-fondo-2);color:#fff} .sidebar-boton .icono{width:18px;height:18px} .sidebar-buscar{padding:12px 12px 4px;flex:none} .sidebar-buscar .campo-adjunto .icono{color:var(--slate-500);width:15px;height:15px} .sidebar-buscar input{width:100%;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#fff;min-height:36px;font-size:var(--t-sm);padding-left:34px} .sidebar-buscar input::placeholder{color:var(--slate-500)} .sidebar-buscar input:focus{border-color:var(--primario-400);box-shadow:0 0 0 3px rgba(129,140,248,.25)} .sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 12px 14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent} .nav-grupo{margin:10px 0 4px} .nav-grupo-titulo{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--sidebar-texto-suave);font-weight:600;padding:8px 10px 6px;white-space:nowrap;overflow:hidden} .nav-lista{list-style:none;margin:0;padding:0} .nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);font-size:var(--t-sm);font-weight:500;color:var(--sidebar-texto);text-decoration:none;white-space:nowrap;position:relative;transition:background var(--transicion),color var(--transicion);min-height:38px} .nav-item .icono{width:19px;height:19px;color:var(--slate-400);flex:none;transition:color var(--transicion)} .nav-item:hover{background:var(--sidebar-fondo-2);color:#fff;text-decoration:none} .nav-item:hover .icono{color:var(--slate-200)} .nav-item.activo{background:rgba(99,102,241,.22);color:#fff;font-weight:600} .nav-item.activo .icono{color:var(--primario-300)} .nav-item.activo::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--primario-400)} .nav-item .nav-texto{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .nav-item .contador-badge{margin-left:auto} .nav-sub{margin:2px 0} .nav-sub-titulo{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:0;background:none;color:var(--slate-400);font:inherit;font-size:var(--t-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;border-radius:var(--r);text-align:left;white-space:nowrap} .nav-sub-titulo:hover{color:#fff;background:var(--sidebar-fondo-2)} .nav-sub-titulo .icono{width:14px;height:14px;margin-left:auto;transition:transform var(--transicion)} .nav-sub-titulo[aria-expanded="false"] .icono{transform:rotate(-90deg)} .nav-sub-lista{list-style:none;margin:0;padding:0 0 4px} .nav-sub-lista.cerrado{display:none} .nav-sub-lista .nav-item{padding-left:12px;min-height:34px;font-size:.84rem} .nav-sub-lista .nav-item .icono{width:17px;height:17px} .sidebar-pie{flex:none;border-top:1px solid var(--sidebar-linea);padding:10px 12px} .sidebar-usuario{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);color:var(--sidebar-texto);text-decoration:none;min-width:0} .sidebar-usuario:hover{background:var(--sidebar-fondo-2);text-decoration:none;color:#fff} .sidebar-usuario .avatar{background:rgba(99,102,241,.35);color:#fff;width:34px;height:34px;font-size:var(--t-xs)} .sidebar-usuario div{flex:1;min-width:0;line-height:1.25} .sidebar-usuario strong{display:block;font-size:var(--t-sm);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .sidebar-usuario span{display:block;font-size:var(--t-xs);color:var(--sidebar-texto-suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sidebar-fondo{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:105;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;backdrop-filter:blur(1px)} body.sidebar-abierto .sidebar{transform:none;box-shadow:var(--sombra-xl)} body.sidebar-abierto .sidebar-fondo{opacity:1;visibility:visible} body.sidebar-abierto{overflow:hidden} .app-principal{flex:1;min-width:0;display:flex;flex-direction:column;width:100%} .topbar{position:sticky;top:0;z-index:80;height:var(--topbar-alto);background:var(--superficie-translucida);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:10px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))} .topbar-menu{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r);border:0;background:none;color:var(--slate-600);cursor:pointer;flex:none} .topbar-menu:hover{background:var(--slate-100);color:var(--ink)} .topbar-menu .icono{width:22px;height:22px} .topbar-titulo{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.2} .topbar-titulo strong{font-size:var(--t-base);font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em} .topbar-titulo span{font-size:var(--t-xs);color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar-contexto{display:none;align-items:center;gap:8px;flex:none} .topbar-contexto form{display:inline-flex;align-items:center;gap:6px;margin:0} .topbar-contexto .etiqueta{cursor:default} .topbar-contexto select{min-height:34px;font-size:var(--t-xs);padding:4px 28px 4px 10px;max-width:220px;background-color:var(--slate-50);border-color:var(--linea)} .topbar-contexto select:hover{border-color:var(--slate-400)} .topbar-acciones{display:flex;align-items:center;gap:4px;flex:none} .topbar-boton{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r);border:0;background:none;color:var(--slate-600);cursor:pointer} .topbar-boton:hover,.topbar-boton[aria-expanded="true"]{background:var(--slate-100);color:var(--ink)} .topbar-boton .icono{width:21px;height:21px} .topbar-boton .contador-badge{position:absolute;top:5px;right:4px;border:2px solid #fff;height:18px;min-width:18px} .topbar-usuario{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 4px;border-radius:var(--r);border:0;background:none;cursor:pointer;color:var(--slate-700);font:inherit} .topbar-usuario:hover,.topbar-usuario[aria-expanded="true"]{background:var(--slate-100)} .topbar-usuario .avatar{width:32px;height:32px;font-size:var(--t-xs)} .topbar-usuario .nombre{display:none;font-size:var(--t-sm);font-weight:500;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar-usuario .icono{width:16px;height:16px;color:var(--slate-400);display:none} .notificaciones-lista{max-height:min(60vh,420px);overflow-y:auto;margin:0;padding:0;list-style:none} .notificaciones-lista li{display:flex;gap:10px;padding:10px;border-radius:var(--r-sm);align-items:flex-start} .notificaciones-lista li:hover{background:var(--slate-50)} .notificaciones-lista .punto{width:8px;height:8px;border-radius:50%;background:var(--primario-500);margin-top:6px;flex:none} .notificaciones-lista strong{display:block;font-size:var(--t-sm);color:var(--ink);font-weight:600;line-height:1.3} .notificaciones-lista span{display:block;font-size:var(--t-xs);color:var(--gris);margin-top:2px;line-height:1.4} .notificaciones-lista a{display:block;width:auto;padding:0;color:var(--primario);font-size:var(--t-xs);margin-top:4px;font-weight:600} .notificaciones-lista a:hover{background:none;text-decoration:underline} .notificaciones-lista time{font-size:var(--t-xs);color:var(--slate-400);white-space:nowrap;flex:none;margin-top:2px} .notificaciones-vacio{padding:26px 12px;text-align:center;color:var(--gris);font-size:var(--t-sm)} .notificaciones-vacio .icono{width:28px;height:28px;color:var(--slate-300);display:block;margin:0 auto 8px} main.app{padding:4px 0 32px;flex:1} main.app{padding-bottom:calc(var(--barra-inferior-alto) + 24px + env(safe-area-inset-bottom))} .barra-inferior{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--superficie-translucida);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--linea);display:flex;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px -16px rgba(15,23,42,.25)} .barra-inferior a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.68rem;font-weight:600;color:var(--gris);padding:4px 2px;border-radius:var(--r-md);text-decoration:none;max-width:110px} .barra-inferior a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .barra-inferior a.activo{color:var(--primario-700)} .barra-inferior a.activo svg{color:var(--primario-600)} footer.app-pie{color:var(--slate-400);margin-top:auto;padding:14px 0;font-size:var(--t-xs);text-align:center;border-top:1px solid var(--linea);background:var(--superficie)} footer.app-pie a{color:var(--slate-500)} .banda-impersonacion{color:#fff;font-size:var(--t-sm);padding:10px 0;position:relative;z-index:60} .banda-impersonacion .contenedor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px} .banda-impersonacion.impersonando{background:linear-gradient(90deg,#b45309,#d97706);background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 10px,transparent 10px 20px),linear-gradient(90deg,#b45309,#d97706)} .banda-impersonacion.trabajando{background:linear-gradient(90deg,#0f766e,#0e9f8a)} .banda-impersonacion form{display:inline} .banda-impersonacion .boton-fantasma{color:#fff;border:1px solid rgba(255,255,255,.4)} .banda-impersonacion .boton-fantasma:hover{background:rgba(255,255,255,.14);color:#fff} .banda-impersonacion a{color:#fff} @media (min-width:1024px){ .solo-movil{display:none!important} .sidebar{transform:none;position:sticky;inset:auto;top:0;height:100vh;align-self:flex-start;flex:none;box-shadow:none} .sidebar-fondo{display:none} .topbar-menu{display:none} .topbar-contexto{display:flex} .topbar-usuario .nombre,.topbar-usuario .icono{display:inline-block} .barra-inferior{display:none} main.app{padding-bottom:32px} .topbar{padding-left:24px;padding-right:24px} .modo-app .contenedor{padding-left:24px;padding-right:24px} /* colapsado a iconos */ html.sidebar-colapsado .sidebar{width:var(--sidebar-ancho-colapsado)} html.sidebar-colapsado .sidebar-cabecera{padding:0;justify-content:center} html.sidebar-colapsado .sidebar-cabecera .logo,html.sidebar-colapsado .sidebar-buscar,html.sidebar-colapsado .nav-grupo-titulo,html.sidebar-colapsado .nav-item .nav-texto,html.sidebar-colapsado .nav-item .contador-badge,html.sidebar-colapsado .sidebar-usuario div,html.sidebar-colapsado .sidebar-usuario>.icono,html.sidebar-colapsado .nav-sub-titulo{display:none} /* en colapsado el botón de expandir ocupa el sitio del logo, centrado y con el icono girado */ html.sidebar-colapsado .sidebar-cabecera [data-sidebar-colapsar]{display:inline-flex;width:40px;height:40px;background:var(--sidebar-fondo-2);color:#fff} html.sidebar-colapsado .sidebar-cabecera [data-sidebar-colapsar]:hover{background:var(--primario-600)} html.sidebar-colapsado .sidebar-cabecera [data-sidebar-colapsar] .icono{transform:rotate(180deg)} html.sidebar-colapsado .sidebar-nav{padding:6px 14px} html.sidebar-colapsado .nav-item{justify-content:center;padding:9px 0} html.sidebar-colapsado .nav-item.activo::before{left:-14px} html.sidebar-colapsado .nav-sub-lista.cerrado{display:block} html.sidebar-colapsado .nav-sub-lista .nav-item{padding-left:0} html.sidebar-colapsado .nav-grupo{border-top:1px solid var(--sidebar-linea);padding-top:6px;margin-top:6px} html.sidebar-colapsado .nav-grupo:first-child{border-top:0;margin-top:4px} html.sidebar-colapsado .sidebar-pie{padding:10px 8px} html.sidebar-colapsado .sidebar-usuario{justify-content:center;padding:6px} html.sidebar-colapsado .nav-item[data-tooltip]::after{left:calc(100% + 14px);bottom:auto;top:50%;transform:translateY(-50%) translateX(-4px)} html.sidebar-colapsado .nav-item[data-tooltip]:hover::after,html.sidebar-colapsado .nav-item[data-tooltip]:focus-visible::after{transform:translateY(-50%)} html:not(.sidebar-colapsado) .nav-item[data-tooltip]::after{display:none} } @media (max-width:1023.98px){ .nav-item[data-tooltip]::after,.sidebar-usuario[data-tooltip]::after,.sidebar-cabecera [data-sidebar-colapsar]{display:none} .sidebar-cabecera{padding-right:8px} } html.ui-listo .sidebar{transition:transform .22s cubic-bezier(.2,.7,.2,1),width .18s} html:not(.ui-listo) .sidebar{transition:none} html:not(.sidebar-colapsado) .sidebar-usuario[data-tooltip]::after{display:none} .sidebar-movil-contexto{display:none;padding:8px 12px 4px;border-bottom:1px solid var(--sidebar-linea)} .sidebar-movil-contexto form{display:flex;align-items:center;gap:6px;margin:0 0 6px} .sidebar-movil-contexto select{flex:1;background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff;min-height:34px;font-size:var(--t-xs)} .sidebar-movil-contexto .etiqueta{background:rgba(255,255,255,.08);border-color:transparent;color:var(--slate-300)} @media (max-width:1023.98px){.sidebar-movil-contexto:not(:empty){display:block}} /* ---------- 16. Cabecera y pie públicos ---------------------------------- */ header.sitio{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)} header.sitio .barra-sitio{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:12px;position:relative} header.sitio .logo{color:var(--ink)} header.sitio .logo small{color:var(--gris)} .menu-check{display:none} .menu-boton{width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;border-radius:var(--r);margin-right:-8px} .menu-boton:hover{background:var(--slate-100)} .menu-boton span{display:block;width:22px;height:2px;background:var(--slate-700);border-radius:2px;transition:transform .2s,opacity .2s} .menu-check:checked ~ .menu-boton span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-check:checked ~ .menu-boton span:nth-child(2){opacity:0} .menu-check:checked ~ .menu-boton span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} nav.menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--superficie);border-top:1px solid var(--linea);box-shadow:var(--sombra-xl);border-radius:0 0 var(--r-xl) var(--r-xl)} .menu-check:checked ~ nav.menu{display:block} nav.menu ul{list-style:none;margin:0;padding:10px 16px 16px} nav.menu a{display:block;padding:12px 4px;font-weight:500;color:var(--slate-700);border-bottom:1px solid var(--linea)} nav.menu li:last-child a{border:0} nav.menu a.activo{color:var(--primario-700)} nav.menu a.boton{display:inline-flex;margin-top:10px;border:0} @media (min-width:860px){ .menu-boton{display:none} nav.menu{display:block;position:static;background:none;border:0;box-shadow:none} nav.menu ul{display:flex;align-items:center;gap:2px;padding:0} nav.menu a{padding:8px 12px;border:0;border-radius:var(--r);font-size:var(--t-sm);color:var(--slate-600)} nav.menu a:hover{background:var(--slate-100);text-decoration:none;color:var(--ink)} nav.menu a.activo{color:var(--primario-700);background:var(--primario-50)} nav.menu a.boton{margin:0 0 0 8px;color:var(--primario-texto);background:var(--primario)} nav.menu a.boton:hover{background:var(--primario-hover);color:#fff} } footer.sitio{background:var(--slate-900);color:var(--slate-300);margin-top:56px;padding:44px 0 max(28px,env(safe-area-inset-bottom));font-size:var(--t-sm)} footer.sitio a{color:var(--slate-200)} footer.sitio .cols{display:grid;gap:26px;grid-template-columns:1fr} footer.sitio h4{color:#fff;margin:0 0 .8em;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em} footer.sitio ul{list-style:none;padding:0;margin:0} footer.sitio li{padding:4px 0} footer.sitio p{color:var(--slate-400);max-width:46ch} footer.sitio .marca{font-weight:700;color:#fff;font-size:1.1rem;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;margin-bottom:.7em} footer.sitio .legal{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:20px;color:var(--slate-400);font-size:var(--t-xs);display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between} footer.sitio .legal a{color:var(--slate-400)} @media (min-width:760px){footer.sitio .cols{grid-template-columns:1.4fr 1fr 1fr}} .legal-lista.mini{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 10px} .legal-lista.mini a{padding:5px 12px;border-radius:var(--r-pill);background:var(--slate-100);color:var(--slate-600);font-weight:500} .legal-lista.mini a.activo{background:var(--primario-50);color:var(--primario-700)} /* ---------- 17. Impresión y movimiento ----------------------------------- */ @media print{ .sidebar,.sidebar-fondo,.topbar,.barra-inferior,footer,.toasts,.dt-barra,.dt-pie,.paginacion,.boton,.acciones-fila,.banda-impersonacion,header.sitio,.no-imprimir{display:none!important} body,body.modo-app{background:#fff;font-size:12px;color:#000} main.app{padding:0} .tabla-envoltorio,.panel,.tarjeta{border:1px solid #ccc;box-shadow:none;break-inside:avoid} table.tabla thead th{position:static} .qr-alta svg{border:0} a{color:inherit} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ---------- 18. Búsqueda global (Ctrl+K), ayuda contextual y kbd ---------- */ .kbd,kbd.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:5px;border:1px solid var(--slate-300);border-bottom-width:2px;background:var(--slate-50);color:var(--slate-600);font:600 11px/1 var(--mono);letter-spacing:.02em;vertical-align:middle} .kbd+.kbd{margin-left:3px} .topbar-buscar{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 10px;border-radius:var(--r);border:0;background:none;color:var(--slate-600);cursor:pointer;font:inherit;font-size:var(--t-sm);flex:none} .topbar-buscar:hover{background:var(--slate-100);color:var(--ink)} .topbar-buscar .icono{width:20px;height:20px} .topbar-buscar .topbar-buscar-texto,.topbar-buscar .kbd{display:none} .solo-escritorio{display:none} @media (min-width:1024px){ .topbar-buscar{width:220px;justify-content:flex-start;border:1px solid var(--linea);background:var(--slate-50);color:var(--slate-500);padding:0 10px 0 12px;height:36px} .topbar-buscar:hover{border-color:var(--slate-300);background:var(--superficie)} .topbar-buscar .icono{width:17px;height:17px} .topbar-buscar .topbar-buscar-texto{display:inline;flex:1;text-align:left} .topbar-buscar .kbd{display:inline-flex} .solo-escritorio{display:inline-flex} } .app-pie .boton-enlace{font:inherit;font-size:inherit;color:inherit;padding:0;border:0;background:none;cursor:pointer;text-decoration:underline} .app-pie .boton-enlace .kbd{margin-left:2px} dialog.dialogo.buscador{width:min(640px,calc(100vw - 24px));margin-top:min(12vh,96px);max-height:min(72vh,640px);display:flex;flex-direction:column;overflow:hidden} dialog.dialogo.buscador:not([open]){display:none} .buscador-campo{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--linea)} .buscador-campo>.icono{width:20px;height:20px;color:var(--slate-400);flex:none} .buscador-campo input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:var(--t-lg);color:var(--ink);padding:6px 0;box-shadow:none} .buscador-campo input::-webkit-search-cancel-button,.buscador-campo input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none} .buscador.cargando .buscador-campo>.icono{animation:buscador-pulso .9s ease-in-out infinite} @keyframes buscador-pulso{0%,100%{opacity:1}50%{opacity:.35}} .buscador-resultados{overflow:auto;padding:6px 8px;flex:1;min-height:120px;scroll-padding:8px} .buscador-grupo{padding:6px 0 4px} .buscador-grupo+.buscador-grupo{border-top:1px solid var(--linea)} .buscador-grupo-titulo{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--slate-400);padding:6px 10px 4px} .buscador-lista{list-style:none;margin:0;padding:0} .buscador-lista li{display:flex;align-items:center;gap:4px;border-radius:var(--r-md)} .buscador-lista li:has(.buscador-item.activo){background:var(--primario-50)} .buscador-item{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-md);color:var(--texto);text-decoration:none;outline:0} .buscador-item.activo,.buscador-item:focus-visible{background:var(--primario-50);color:var(--primario-900)} .buscador-item:hover{text-decoration:none} .buscador-icono{width:32px;height:32px;border-radius:var(--r);background:var(--slate-100);color:var(--slate-500);display:inline-flex;align-items:center;justify-content:center;flex:none} .buscador-item.activo .buscador-icono{background:#fff;color:var(--primario-600)} .buscador-icono .icono{width:17px;height:17px} .buscador-texto{display:flex;flex-direction:column;min-width:0;gap:1px} .buscador-titulo{font-weight:600;font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .buscador-detalle{font-size:var(--t-xs);color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .buscador-item.activo .buscador-detalle{color:var(--primario-700)} mark.resaltado{background:none;color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--acento);text-decoration-thickness:2px;text-underline-offset:2px} .buscador-enlaces{display:none;gap:4px;padding-right:8px;flex:none} .buscador-lista li:has(.buscador-item.activo) .buscador-enlaces,.buscador-lista li:hover .buscador-enlaces{display:inline-flex} .buscador-enlace{font-size:var(--t-xs);font-weight:600;padding:4px 9px;border-radius:var(--r-pill);background:var(--superficie);border:1px solid var(--primario-200);color:var(--primario-700);text-decoration:none;white-space:nowrap} .buscador-enlace:hover{background:var(--primario-600);color:#fff;border-color:var(--primario-600);text-decoration:none} .buscador-vacio{text-align:center;padding:32px 20px;color:var(--gris)} .buscador-vacio .icono{width:32px;height:32px;color:var(--slate-300);margin-bottom:8px} .buscador-vacio p{margin:0 0 .3em;font-size:var(--t-sm)} .buscador-pie{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:8px 14px;border-top:1px solid var(--linea);background:var(--slate-50);font-size:var(--t-xs);color:var(--slate-500)} .buscador-pie span{display:inline-flex;align-items:center;gap:5px} .buscador-estado{margin-left:auto;font-weight:600} @media (max-width:640px){ dialog.dialogo.buscador{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0} .buscador-pie span:not(.buscador-estado){display:none} } /* panel lateral (ayuda contextual y otros detalles) */ dialog.dialogo.lateral{width:min(440px,100vw);max-width:none;height:100dvh;max-height:none;margin:0 0 0 auto;border-radius:0;display:flex;flex-direction:column;animation:lateral-entrar .22s cubic-bezier(.2,.7,.2,1)} dialog.dialogo.lateral:not([open]){display:none} @keyframes lateral-entrar{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}} .lateral-cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:18px 20px 12px;border-bottom:1px solid var(--linea)} .lateral-cabecera h2{margin:4px 0 0;font-size:var(--t-xl);letter-spacing:-.01em} .lateral-cabecera .cabecera-kicker{display:flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--gris);text-transform:uppercase;letter-spacing:.06em;font-weight:600} .lateral-cabecera .cabecera-kicker .icono{width:14px;height:14px;color:var(--primario-500)} .lateral-cuerpo{padding:16px 20px;overflow:auto;flex:1;font-size:var(--t-sm);line-height:1.6} .lateral-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 20px;border-top:1px solid var(--linea);background:var(--slate-50)} .ayuda-panel h3{margin:1.2em 0 .4em;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--slate-500);font-weight:700} .ayuda-panel h3:first-child{margin-top:0} .ayuda-panel p{margin:0 0 .8em;color:var(--texto)} .ayuda-panel ol,.ayuda-panel ul{margin:0 0 .8em;padding-left:1.3em} .ayuda-panel li{margin:0 0 .35em} .ayuda-panel .legal{display:flex;gap:10px;padding:10px 12px;border-radius:var(--r-md);background:var(--info-suave);border:1px solid var(--info-borde);color:var(--info-texto);font-size:var(--t-sm)} .ayuda-panel .legal .icono{width:18px;height:18px;flex:none;margin-top:2px} .ayuda-panel .legal p{margin:0;color:inherit} .ayuda-panel .enlaces{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0} .ayuda-panel .enlaces a{padding:5px 11px;border-radius:var(--r-pill);background:var(--slate-100);color:var(--slate-700);font-weight:500;font-size:var(--t-xs);text-decoration:none} .ayuda-panel .enlaces a:hover{background:var(--primario-50);color:var(--primario-700)} /* ---------- 19. Primeros pasos (onboarding) y tareas de hoy ---------------- */ .onboarding{border:1px solid var(--primario-200);background:linear-gradient(180deg,var(--primario-50),#fff 60%);border-radius:var(--r-xl);padding:20px;margin:0 0 18px;box-shadow:var(--sombra)} .onboarding-cabecera{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-bottom:14px} .onboarding-cabecera h2{margin:0;font-size:var(--t-lg);display:flex;align-items:center;gap:8px} .onboarding-cabecera h2 .icono{color:var(--primario-600)} .onboarding-cabecera p{margin:2px 0 0;color:var(--texto-2);font-size:var(--t-sm)} .onboarding-progreso{display:flex;align-items:center;gap:12px;flex:1;min-width:220px} .onboarding-progreso .barra{flex:1;height:10px} .onboarding-progreso strong{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:var(--t-sm)} .onboarding-acciones{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .onboarding-acciones form{margin:0;display:inline} .pasos-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:1fr} @media (min-width:860px){.pasos-lista{grid-template-columns:1fr 1fr}} .paso{display:grid;grid-template-columns:28px 1fr;gap:10px 12px;padding:12px 14px;border-radius:var(--r-lg);background:var(--superficie);border:1px solid var(--linea);position:relative;transition:border-color var(--transicion),box-shadow var(--transicion)} .paso:hover{border-color:var(--primario-200);box-shadow:var(--sombra)} .paso-estado{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--slate-300);color:transparent;margin-top:1px} .paso-estado .icono{width:15px;height:15px} .paso.hecho .paso-estado{background:var(--ok);border-color:var(--ok);color:#fff} .paso.hecho .paso-titulo{color:var(--slate-500);text-decoration:line-through;text-decoration-color:var(--slate-300)} .paso-titulo{font-weight:600;font-size:var(--t-sm);color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px} .paso-titulo .etiqueta{font-size:10px;padding:1px 7px} .paso-porque{margin:3px 0 0;font-size:var(--t-xs);color:var(--gris);line-height:1.5} .paso-ayuda{margin:6px 0 0;font-size:var(--t-xs);color:var(--texto-2);line-height:1.5;display:none} .paso:not(.hecho) .paso-ayuda{display:block} .paso-acciones{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .paso.hecho .paso-acciones{display:none} .paso-acciones form{margin:0} details.onboarding-plegado{margin:0 0 18px} details.onboarding-plegado>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--linea);background:var(--superficie);font-size:var(--t-sm);font-weight:600;color:var(--slate-700)} details.onboarding-plegado>summary::-webkit-details-marker{display:none} details.onboarding-plegado>summary:hover{border-color:var(--primario-200);color:var(--primario-700)} details.onboarding-plegado>summary .icono{width:16px;height:16px;color:var(--primario-500)} details.onboarding-plegado[open]>summary{margin-bottom:12px} .tareas-hoy{list-style:none;margin:0;padding:0} .tareas-hoy li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linea)} .tareas-hoy li:last-child{border-bottom:0} .tareas-hoy .tarea-punto{width:10px;height:10px;border-radius:50%;background:var(--ambar);flex:none;box-shadow:0 0 0 3px var(--ambar-suave)} .tareas-hoy .tarea-punto.info{background:var(--info);box-shadow:0 0 0 3px var(--info-suave)} .tareas-hoy .tarea-punto.mal{background:var(--mal);box-shadow:0 0 0 3px var(--mal-suave)} .tareas-hoy .tarea-punto.ok{background:var(--ok);box-shadow:0 0 0 3px var(--ok-suave)} .tareas-hoy a{flex:1;color:var(--texto);font-size:var(--t-sm);font-weight:500} .tareas-hoy a:hover{color:var(--primario-700)} .tareas-hoy .icono{width:16px;height:16px;color:var(--slate-400);flex:none} .presencia-mini{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px} .presencia-mini span{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);color:var(--gris)} .presencia-mini i{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--slate-300)} .presencia-mini i.dentro{background:var(--ok)}.presencia-mini i.pausa{background:var(--ambar)} main :is(h2,h3,details,section,.tarjeta)[id]{scroll-margin-top:calc(var(--topbar-alto) + 16px)} .pasos .pantalla{font-weight:600;color:var(--primario-700)}