/* fichajes.es — estilos propios de producto sobre ui.css (tokens y componentes): landing pública, pantalla de fichar
   y jornadas. Todo lo genérico (botones, formularios, tablas, tarjetas, layout) vive en ui.css. */

/* ---- hero (landing) ---- */
.hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:linear-gradient(160deg,var(--slate-950) 0%,var(--primario-900) 55%,var(--primario-700) 100%);padding:44px 0 88px}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 60% at 12% 0%,rgba(34,211,238,.35) 0%,transparent 60%),radial-gradient(45% 55% at 100% 100%,rgba(129,140,248,.45) 0%,transparent 60%),radial-gradient(30% 40% at 70% 20%,rgba(124,58,237,.35) 0%,transparent 60%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(80% 100% at 50% 0%,#000 10%,transparent 100%);mask-image:radial-gradient(80% 100% at 50% 0%,#000 10%,transparent 100%)}
.hero-cuerpo{display:grid;gap:32px;align-items:center}
.hero h1{color:#fff;font-size:clamp(2.1rem,2.8vw + 1.3rem,3.7rem);font-weight:800;line-height:1.03;letter-spacing:-.035em;margin:.4em 0 .45em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero-sub{font-size:clamp(1.02rem,.5vw + .9rem,1.2rem);line-height:1.6;color:rgba(255,255,255,.82);max-width:58ch;margin:0 0 1.4em}
.hero-sub strong{color:#fff;font-weight:600}
.hero .kicker{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;text-transform:none;font-size:var(--t-sm);letter-spacing:0;padding:6px 14px 6px 11px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero .kicker::before{background:var(--acento);width:8px;height:8px;box-shadow:0 0 0 0 rgba(34,211,238,.6);animation:pulso 2.2s infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(34,211,238,.6)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero-acciones{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.hero-acciones .boton{flex:1 1 auto;justify-content:center;min-height:48px;font-size:var(--t-base);border-radius:var(--r-md)}
.hero .boton-fantasma{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3)}
.hero .boton-fantasma:hover{background:rgba(255,255,255,.18);color:#fff}
.hero-nota{font-size:var(--t-sm);color:rgba(255,255,255,.65);margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px}
.hero-nota span::before{content:"✓";color:var(--acento);margin-right:5px;font-weight:700}
.hero-visual{display:none}
.hero-datos{list-style:none;margin:-46px 0 26px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--sombra-xl);position:relative;z-index:2}
.hero-datos li{background:var(--superficie);padding:16px 16px 14px;min-width:0}
.hero-datos strong{display:block;font-size:clamp(1.3rem,1vw + 1rem,1.7rem);font-weight:800;letter-spacing:-.03em;color:var(--primario-700);font-variant-numeric:tabular-nums;line-height:1.15;overflow-wrap:anywhere}
.hero-datos span{display:block;font-size:var(--t-sm);color:var(--ink);font-weight:600;margin-top:5px;line-height:1.3}
.hero-datos small{display:block;font-size:var(--t-xs);color:var(--gris);margin-top:2px}
@keyframes subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-cuerpo>*{animation:subir .5s cubic-bezier(.2,.7,.2,1) both}
.hero-visual{animation-delay:.1s}
.hero-datos{animation:subir .5s .08s cubic-bezier(.2,.7,.2,1) both}
@media (min-width:860px){.hero{padding:64px 0 100px}.hero-cuerpo.con-visual{grid-template-columns:1.05fr .95fr;gap:48px}.hero-visual{display:block}.hero-acciones .boton{flex:0 0 auto}.hero-datos{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:-54px}.hero-datos li{padding:20px 20px 18px}}
/* maqueta del móvil en el hero */
.movil{width:min(300px,86%);margin:0 auto;background:#0b1224;border-radius:40px;padding:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7),inset 0 0 0 2px rgba(255,255,255,.08);transform:rotate(-3deg)}
.movil-pantalla{background:linear-gradient(180deg,#f8fafc,var(--primario-50));border-radius:28px;padding:26px 18px 22px;color:var(--ink);text-align:center;min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.movil-hora{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.movil .boton-fichar{width:170px;height:170px;font-size:1.5rem}

/* ---- landing: secciones ---- */
.seccion.centrada h2,.seccion .sub{text-align:center}
.seccion .sub{color:var(--gris);max-width:60ch;margin:0 auto 1.8em;font-size:1.05rem}
.seccion-titulo{text-align:center;margin:0 0 .3em;font-size:clamp(1.5rem,1.2vw + 1.1rem,2.1rem);letter-spacing:-.025em}
.beneficios{display:grid;gap:14px;grid-template-columns:1fr}
.beneficio{border:1px solid var(--linea);border-radius:var(--r-2xl);padding:24px 22px;background:var(--superficie);box-shadow:var(--sombra);transition:transform var(--transicion),box-shadow var(--transicion)}
.beneficio:hover{transform:translateY(-3px);box-shadow:var(--sombra-lg)}
.beneficio i{display:inline-flex;width:44px;height:44px;border-radius:var(--r-lg);background:var(--primario-50);color:var(--primario-600);align-items:center;justify-content:center;margin-bottom:14px}
.beneficio i svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.beneficio h3{margin:0 0 .4em;font-size:var(--t-lg)}
.beneficio p{margin:0;color:var(--texto-2)}
@media (min-width:760px){.beneficios{grid-template-columns:repeat(3,1fr)}}
.pasos{list-style:none;counter-reset:paso;padding:0;margin:0;display:grid;gap:14px}
.pasos li{counter-increment:paso;position:relative;padding:20px 20px 20px 70px;border:1px solid var(--linea);border-radius:var(--r-xl);background:var(--superficie);box-shadow:var(--sombra-xs)}
.pasos li::before{content:counter(paso);position:absolute;left:20px;top:20px;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primario-500),var(--primario-700));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 6px 14px -6px var(--c-sombra)}
.pasos strong{display:block;margin-bottom:3px;color:var(--ink)}
.pasos span{color:var(--texto-2);font-size:.95rem}
@media (min-width:760px){.pasos{grid-template-columns:repeat(3,1fr)}}
.legal-lista{display:grid;gap:10px;grid-template-columns:1fr;list-style:none;padding:0;margin:0}
.legal-lista li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-lg);background:var(--superficie);border:1px solid var(--linea);font-size:.95rem;color:var(--texto-2)}
.legal-lista li strong{color:var(--ink)}
.legal-lista li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--ok-suave) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;margin-top:1px}
@media (min-width:760px){.legal-lista{grid-template-columns:1fr 1fr}}
.precios{display:grid;gap:16px;grid-template-columns:1fr}
.precio{border:1px solid var(--linea);border-radius:var(--r-2xl);padding:26px 24px;background:var(--superficie);position:relative;box-shadow:var(--sombra);display:flex;flex-direction:column}
.precio.destacada{border:2px solid var(--primario-500);box-shadow:0 30px 60px -30px var(--c-sombra)}
.precio .badge{position:absolute;top:-13px;left:24px;background:linear-gradient(135deg,var(--primario-500),var(--primario-700));color:#fff;border-radius:var(--r-pill);padding:3px 12px;font-size:var(--t-xs);font-weight:700}
.precio h3{margin:0 0 .2em;font-size:var(--t-lg)}
.precio .importe{font-size:2.5rem;font-weight:800;letter-spacing:-.04em;color:var(--ink);margin:.15em 0}
.precio .importe small{font-size:var(--t-sm);font-weight:500;color:var(--gris);letter-spacing:0}
.precio ul{list-style:none;padding:0;margin:0 0 1.2em;flex:1}
.precio li{padding:8px 0 8px 26px;border-bottom:1px solid var(--linea);font-size:.95rem;position:relative;color:var(--texto-2)}
.precio li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:16px;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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.precio li:last-child{border:0}
@media (min-width:760px){.precios{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.cta{background:linear-gradient(140deg,var(--primario-800),var(--primario-600));color:#fff;border-radius:var(--r-2xl);padding:32px 26px;margin:2.2em 0;position:relative;overflow:hidden;box-shadow:var(--sombra-alta);text-align:center}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 100% 0%,rgba(34,211,238,.35),transparent 65%)}
.cta>*{position:relative}
.cta h3{margin:0 0 .35em;color:#fff;font-size:clamp(1.3rem,1vw + 1rem,1.7rem);letter-spacing:-.02em}
.cta p{margin:0 auto 1.2em;color:rgba(255,255,255,.85);max-width:52ch}
.cta .boton{background:#fff;color:var(--primario-700);min-height:48px;font-size:var(--t-base);padding:0 24px}
.cta .boton:hover{background:var(--primario-50)}

/* ---- login / registro ---- */
.pagina-acceso{padding:24px 0 48px}
.pagina-acceso .tarjeta-centrada{margin-top:18px}
.acceso-pie{text-align:center;margin:18px 0 0;font-size:var(--t-sm);color:var(--gris)}
.acceso-ventajas{list-style:none;padding:0;margin:14px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:var(--t-xs);color:var(--gris)}
.acceso-ventajas li::before{content:"✓";color:var(--ok);margin-right:5px;font-weight:700}

/* ---- pantalla de fichar ---- */
.fichar{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 0 8px}
.fichar-hora{font-size:clamp(3rem,10vw,4.8rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink);margin:6px 0 2px}
.fichar-fecha{color:var(--gris);font-weight:500;text-transform:capitalize}
.fichar-quien{margin:6px 0 18px;font-size:var(--t-sm);color:var(--gris)}
.fichar-quien strong{color:var(--ink)}
.estado-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 11px;border-radius:var(--r-pill);font-weight:600;font-size:var(--t-sm);border:1px solid var(--linea);background:var(--superficie);color:var(--slate-600);margin:0 0 22px;box-shadow:var(--sombra-xs)}
.estado-chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--slate-400)}
.estado-chip.dentro{color:var(--ok-texto);border-color:var(--ok-borde);background:var(--ok-suave)}.estado-chip.dentro::before{background:var(--ok);box-shadow:0 0 0 0 rgba(5,150,105,.5);animation:pulso-ok 2s infinite}
.estado-chip.pausa{color:var(--ambar-texto);border-color:var(--ambar-borde);background:var(--ambar-suave)}.estado-chip.pausa::before{background:var(--ambar)}
@keyframes pulso-ok{0%{box-shadow:0 0 0 0 rgba(5,150,105,.5)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.boton-fichar{position:relative;width:min(220px,62vw);height:min(220px,62vw);border-radius:50%;border:0;color:#fff;font-size:1.7rem;font-weight:800;letter-spacing:-.02em;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(120% 120% at 30% 20%,var(--primario-400),var(--primario-700) 70%);box-shadow:0 26px 50px -20px var(--c-sombra),inset 0 -8px 20px rgba(0,0,0,.18),inset 0 4px 10px rgba(255,255,255,.25);transition:transform .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation}
.boton-fichar::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--c-borde-suave);animation:anillo 2.8s infinite}
@keyframes anillo{0%{transform:scale(.96);opacity:.9}100%{transform:scale(1.18);opacity:0}}
.boton-fichar small{font-size:.8rem;font-weight:500;opacity:.85;letter-spacing:0}
.boton-fichar:active{transform:scale(.96)}
.boton-fichar:focus-visible{outline:3px solid var(--primario-300);outline-offset:6px}
.boton-fichar.salida{background:radial-gradient(120% 120% at 30% 20%,#f87171,#b91c1c 70%);box-shadow:0 26px 50px -20px rgba(185,28,28,.55),inset 0 -8px 20px rgba(0,0,0,.18),inset 0 4px 10px rgba(255,255,255,.25)}
.boton-fichar.salida::before{border-color:rgba(185,28,28,.25)}
.boton-fichar.pausa_fin{background:radial-gradient(120% 120% at 30% 20%,#fbbf24,#b45309 70%);box-shadow:0 26px 50px -20px rgba(180,83,9,.55),inset 0 -8px 20px rgba(0,0,0,.18),inset 0 4px 10px rgba(255,255,255,.25)}
.boton-fichar.pausa_fin::before{border-color:rgba(180,83,9,.25)}
.boton-fichar[disabled]{filter:grayscale(.6);opacity:.7;cursor:wait}
.boton-fichar.ok{animation:confirmar .5s ease-out}
@keyframes confirmar{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.fichar-secundarias{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px 0 6px}
.fichar-secundarias .boton{min-height:42px}
.fichar-mensaje{min-height:26px;margin:14px 0 0;font-weight:600;color:var(--ok-texto)}
.fichar-mensaje.error{color:var(--mal-texto)}
.fichar-mensaje.aviso{color:var(--ambar-texto)}
.hoy-resumen{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-xl);overflow:hidden;margin:22px 0 16px;width:100%;max-width:520px;box-shadow:var(--sombra-xs)}
.hoy-resumen div{background:var(--superficie);padding:14px 8px;text-align:center}
.hoy-resumen strong{display:block;font-size:1.3rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hoy-resumen span{font-size:var(--t-xs);color:var(--gris);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
@media (max-width:420px){.hoy-resumen strong{font-size:1.05rem}.hoy-resumen span{font-size:.62rem}}
.hoja-tipos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.fichar .aviso{width:100%;max-width:520px;text-align:left}
.fichar .k-enlace{background:none;border:0;color:var(--primario);font:inherit;font-weight:600;cursor:pointer;padding:0}
.fichar .linea-tiempo{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-xl);padding:6px 16px}
.fichar .linea-tiempo:empty{display:none}
.selector-empleo{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:0 0 10px}
.selector-empleo select{min-height:36px;font-size:var(--t-xs)}
@media (prefers-reduced-motion:reduce){.hero-cuerpo>*,.hero-datos,.kicker::before,.boton-fichar::before,.estado-chip.dentro::before{animation:none}}

/* ---- impresión ---- */
@media print{.hero,.cta,.hero-visual{display:none!important}}

/* ---- firma de documentos (views/partials/firma-widget.php + assets/js/firma.js) ---- */
.firma-widget{margin:12px 0}
.firma-widget .tabs{margin-bottom:12px}
.firma-form{max-width:640px}
.firma-lienzo{position:relative;background:#fff;border:2px dashed var(--slate-300);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/1;max-width:600px;box-shadow:var(--sombra-xs)}
.firma-lienzo canvas{display:block;width:100%;height:100%;cursor:crosshair;background:transparent}
.firma-lienzo:focus-within{border-color:var(--primario);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.firma-guia{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:var(--slate-300);font-size:1.4rem;font-weight:700;letter-spacing:.06em;pointer-events:none;user-select:none}
.firma-lienzo.con-firma .firma-guia{display:none}
.firma-linea{position:absolute;left:8%;right:8%;bottom:22%;border-bottom:1px solid var(--slate-300);pointer-events:none}
.firma-form input.codigo-grande{width:100%;max-width:220px;text-align:center;font-size:1.6rem;letter-spacing:.35em}
.firma-evidencia{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:var(--t-sm);margin:10px 0}
.firma-evidencia dt{color:var(--gris);font-weight:600}
.firma-evidencia dd{margin:0;overflow-wrap:anywhere}
.firma-trazo{display:inline-block;max-width:300px;width:100%;border:1px solid var(--linea);border-radius:var(--r-md);background:#fff;padding:4px}
.firma-trazo svg{width:100%;height:auto;display:block}
.documentos-lista .paso-estado{flex:none}

/* ---- modalidad (presencial / teletrabajo) en la tabla de jornadas ---- */
.modalidad-form{display:inline}
.boton-etiqueta{cursor:pointer;font:inherit;border-style:dashed}
.boton-etiqueta:hover{filter:brightness(.95)}

/* ---- acceso corporativo (SSO) en la pantalla de entrada ---- */
.sso-separador{display:flex;align-items:center;gap:10px;margin:16px 0 10px;color:var(--gris);font-size:var(--t-sm)}
.sso-separador::before,.sso-separador::after{content:"";flex:1;border-top:1px solid var(--linea)}
.sso-botones{display:grid;gap:8px}

/* ---- analítica avanzada: KPIs enlazados, gráfica de líneas, variaciones, alertas ---- */
.analitica-kpis .tarjeta{text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.analitica-kpis .tarjeta:hover{border-color:var(--primario-400,var(--primario));transform:translateY(-1px)}
.analitica-kpis .tarjeta.activa{border-color:var(--primario);box-shadow:0 0 0 2px var(--primario-100,rgba(37,99,235,.15)) inset}
.delta{font-variant-numeric:tabular-nums;font-weight:600}
.delta.ok{color:var(--ok-texto)}.delta.mal{color:var(--mal-texto)}
.grafica-lineas{display:block;color:var(--ink);font-family:inherit}
.grafica-leyenda{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;padding:0;margin:8px 0 0;font-size:var(--t-sm);color:var(--gris)}
.grafica-leyenda .muestra{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.campos-fila{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.tabla tr.apagada td{opacity:.6}
.tabla tr.destacada td{background:var(--primario-50,rgba(37,99,235,.06))}
@media (max-width:520px){.campos-fila{grid-template-columns:1fr}}

/* ---- apariencia (tema claro/oscuro) en el perfil y atajo en el menú de usuario ---- */
.opciones-tema{border:0;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.opcion-tema{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--linea);border-radius:var(--r-lg);cursor:pointer;background:var(--superficie)}
.opcion-tema.activa{border-color:var(--primario);box-shadow:0 0 0 2px var(--primario-100) inset}
.opcion-tema input{margin:0}
.muestra-tema{width:34px;height:22px;border-radius:6px;border:1px solid var(--linea-fuerte);flex:none}
.muestra-claro{background:linear-gradient(135deg,#fff 50%,#e2e8f0 50%)}
.muestra-oscuro{background:linear-gradient(135deg,#0f172a 50%,#334155 50%)}
.muestra-auto{background:linear-gradient(135deg,#fff 50%,#0f172a 50%)}
.dropdown-form{margin:0}

/* ---- catálogo de convenios sectoriales ---- */
.tarjetas.convenios{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.tarjetas.convenios .tarjeta.activa{border-color:var(--primario);box-shadow:0 0 0 2px var(--primario-100) inset}
.tarjetas.convenios .lista-simple li{padding:5px 0}

/* ---- patrones anómalos ---- */
.hallazgo{border-top:1px solid var(--linea);padding:8px 0}
.hallazgo summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.hallazgo summary::-webkit-details-marker{display:none}
.hallazgo-cuerpo{padding:6px 0 0 4px}
.tarjetas.conectores{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tarjetas.conectores .tarjeta h3{display:flex;justify-content:space-between;gap:8px;align-items:center}