/* Quincenea · páginas por función (/funciones y /funciones/{slug}).
   La mini demo de cada página es una tarjeta arena sobre el héroe ciruela, como
   la «Próxima quincena» de la portada: va siempre en claro, también en el tema
   oscuro, así que redefine los tokens claros dentro de .fdemo y lo de adentro
   (campos, casillas, pastillas) se pinta igual que en el sitio claro.
   Movimiento: solo color, opacidad y el arco del medidor; con
   prefers-reduced-motion la regla general de estilo.css lo deja quieto. */

.visualmente-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}

/* ── Héroe de la función ──────────────────────────────────────────────── */
.funcion-heroe{padding-top:var(--e4)}
.funcion-migas{color:var(--heroe-suave)}
.heroe-marca .funcion-migas a{color:var(--heroe-suave)}
.funcion-fila{align-items:start;margin-top:var(--e4)}
.funcion-heroe h1{font-size:clamp(2rem,1.1rem + 3.2vw,3.25rem)}
.funcion-demo-col{min-width:0}

/* ── La tarjeta de la mini demo ───────────────────────────────────────── */
.fdemo{
  --fondo:#fff6f0; --papel:#ffffff; --alterno:#f3e9e2; --tinta:#2b0f3a; --suave:#4a2f57; --tenue:#6b4a78;
  --enlace:#2b0f3a; --enlace-hover:#c2410c; --linea:#eadbd1; --borde-campo:#9c7f8f; --foco:#c2410c; --acento:#2b0f3a;
  --listo-fondo:#d4f25c; --listo-tinta:#2b0f3a; --listo-marca:#c2410c; --revisar-fondo:#ffe3d6; --revisar-tinta:#9a3412;
  --contorno-hover:rgba(43,15,58,.06); --error:#a1262f; --error-fondo:#fbe7e8;
  --casilla-marca:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 20 L16 30 L32 10' fill='none' stroke='%23d4f25c' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:light;
  background:var(--fondo);color:var(--tinta);border-radius:28px;padding:24px;box-shadow:var(--sombra-heroe);display:grid;gap:14px;min-width:0}
.heroe-marca .fdemo a:not(.boton){color:var(--enlace)}
.fdemo :focus-visible{outline-color:var(--foco)}
.fdemo-cab{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}  /* con letra grande el saldo baja de renglón en vez de salirse */
.fdemo-cab>*{min-width:0}
.fdemo-eti{font-size:.875rem;font-weight:700;color:var(--tenue);margin:0}
.fdemo-tit{font:800 1.35rem/1.15 var(--titulos);letter-spacing:-.02em;margin:2px 0 0}
.fdemo-sub{font:700 1.05rem/1.25 var(--titulos);letter-spacing:-.01em;margin:4px 0 0}
.fdemo-nota{font-size:.875rem;line-height:1.5;color:var(--suave);margin:0}
.fdemo-cifra{font:800 2rem/1 var(--titulos);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:0}
.fdemo-hora{font-variant-numeric:tabular-nums;font-weight:800;margin-right:6px}
.fdemo .pastilla{margin:0;padding:5px 10px;font-size:.8125rem;line-height:1.25}
.fdemo-boton-suave{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:0;border-radius:var(--r-boton);box-shadow:inset 0 0 0 2px currentColor;background:transparent;color:var(--tinta);font:700 .95rem var(--texto);cursor:pointer;transition:background-color .12s ease-out}
.fdemo-boton-suave:hover{background:var(--contorno-hover)}
.fdemo .boton-chico{min-height:44px}
.fdemo-campo{display:grid;gap:6px;font-weight:700;font-size:.9375rem}
.fdemo-campo input,.fdemo-campo select{min-height:48px}
.fdemo [hidden]{display:none!important}
.fdemo-nuevo{animation:fdemo-entra .2s var(--curva)}
@keyframes fdemo-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Pestañas (asistencia) y país (incidencias): la pastilla de la portada. */
.fdemo-pestanas{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--alterno);overflow-x:auto}
.fdemo-pestanas button{flex:1 0 auto;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--tinta);font:700 .9rem var(--texto);cursor:pointer;white-space:nowrap}
.fdemo-pestanas button[aria-selected="true"]{background:var(--tinta);color:var(--fondo)}
.fdemo .quincena-pais{margin:0;justify-self:start}
.fdemo-panel{display:grid;gap:12px}
.fdemo-panel+.fdemo-panel{padding-top:14px;border-top:1px solid var(--linea)}
.js .fdemo-panel+.fdemo-panel{padding-top:0;border-top:0}

/* ── Asistencia ───────────────────────────────────────────────────────── */
.fdemo-qr{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.qr{width:156px;height:156px;flex:none;border-radius:12px}
.qr-fondo{fill:#fff}
.qr-modulos{fill:#2b0f3a;transition:opacity .2s ease-out}
.qr.cambia .qr-modulos{opacity:.2}
.fdemo-qr>div{flex:1;min-width:170px;display:grid;gap:8px;justify-items:start}
.fdemo-barra{width:100%;height:8px;border-radius:999px;background:var(--alterno);overflow:hidden}
.fdemo-barra span{display:block;height:100%;width:100%;background:var(--revisar-tinta);border-radius:999px;transition:width 1s linear}
.fdemo-telefono{background:var(--papel);border-radius:22px;padding:16px;display:grid;gap:12px;max-width:360px}
.fdemo-fila-senal{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700}
.fdemo-interruptor{min-height:44px;padding:0 14px;border-radius:999px;border:2px solid var(--tinta);background:var(--listo-fondo);color:var(--tinta);font:800 .875rem var(--texto);cursor:pointer}
.fdemo-interruptor[aria-pressed="false"]{background:var(--revisar-fondo);color:var(--revisar-tinta);border-color:var(--revisar-tinta)}
.fdemo-marcar{width:100%}
.fdemo-marcas,.fdemo-checadas{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fdemo-marcas li,.fdemo-checadas li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;background:var(--alterno);border-radius:12px;padding:10px 12px;font-size:.95rem;line-height:1.35}
.fdemo-checadas li{background:var(--papel)}
.fdemo-marcas .pastilla{margin-left:auto}
.fdemo-latido{display:flex;align-items:center;gap:8px;margin:0;font-weight:700;font-size:.95rem}
.fdemo-punto{width:10px;height:10px;border-radius:50%;background:#3f6212;box-shadow:0 0 0 0 rgba(63,98,18,.5);animation:fdemo-late 2s ease-out infinite}
@keyframes fdemo-late{0%{box-shadow:0 0 0 0 rgba(63,98,18,.45)}70%{box-shadow:0 0 0 8px rgba(63,98,18,0)}100%{box-shadow:0 0 0 0 rgba(63,98,18,0)}}

/* ── Vacaciones ───────────────────────────────────────────────────────── */
.fdemo-saldo{flex:none;display:grid;justify-items:center;gap:4px;min-width:96px;padding:12px 14px;border-radius:18px;background:var(--listo-fondo);color:var(--listo-tinta);font-size:.8125rem;font-weight:700;text-align:center;line-height:1.2}
.fdemo-saldo .fdemo-cifra{font-size:1.9rem;transition:transform .3s var(--curva)}
.fdemo-saldo .fdemo-cifra.late{transform:scale(1.12)}
.fdemo-dias{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.fdemo-dia{display:grid;justify-items:center;align-content:center;gap:0;min-height:58px;padding:6px 2px;border:2px solid transparent;border-radius:12px;background:var(--papel);color:var(--tinta);font:600 .75rem/1.2 var(--texto);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}
.fdemo-dia strong{font:800 1.1rem/1.1 var(--titulos);font-variant-numeric:tabular-nums}
.fdemo-dia small{font-size:.6875rem;font-weight:800}
.fdemo-dia:disabled{cursor:default}
.fdemo-dia.feriado{background:var(--revisar-fondo);color:var(--revisar-tinta)}
.fdemo-dia.elegido{background:var(--tinta);color:var(--fondo)}
.fdemo-dia.feriado.elegido{background:var(--revisar-fondo);color:var(--revisar-tinta);border-color:var(--tinta)}
.fdemo-dia.inicio{box-shadow:0 0 0 3px var(--listo-fondo)}
.fdemo-resumen{margin:0;font-size:.95rem}
.fdemo-enviar{justify-self:start}
.fdemo-jefe{background:var(--papel);border-radius:18px;padding:14px 16px;display:grid;gap:10px}
.fdemo-acciones{display:flex;gap:8px;flex-wrap:wrap}
.fdemo-estado{margin:0;font-size:.9rem;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.fdemo-otra{justify-self:start}

/* ── Calendario legal: el semáforo ────────────────────────────────────── */
.fdemo-medidor{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.medidor{width:132px;height:132px;flex:none}
.medidor-fondo{stroke:var(--alterno)}
.medidor-arco{stroke:#c2410c;transition:stroke-dashoffset .6s var(--curva),stroke .3s ease-out}
.medidor[data-nivel="amarillo"] .medidor-arco{stroke:#b45309}
.medidor[data-nivel="verde"] .medidor-arco{stroke:#3f6212}
.medidor-texto{display:grid;gap:8px;justify-items:start;flex:1;min-width:160px}
.medidor-texto .fdemo-cifra{font-size:2.6rem}
.medidor-de{font:700 1rem var(--texto);color:var(--tenue);letter-spacing:0}
.fdemo-revisiones{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fdemo-revisiones li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;background:var(--papel);border-radius:12px;padding:10px 12px;transition:background-color .2s ease-out}
.fdemo-revisiones li>button{grid-column:2/-1;justify-self:start;min-height:40px;font-size:.875rem}
.rev-punto{width:12px;height:12px;border-radius:50%;background:#3f6212}
.rev-amarillo .rev-punto{background:#b45309}
.rev-rojo .rev-punto{background:#c2410c}
.rev-texto{display:grid;font-size:.875rem;line-height:1.35;color:var(--suave)}
.rev-texto strong{color:var(--tinta);font-size:.95rem}
.rev-estado{font-size:.8125rem;font-weight:800;padding:4px 9px;border-radius:999px;background:var(--listo-fondo);color:var(--listo-tinta);white-space:nowrap}
.rev-amarillo .rev-estado{background:#fdf1dc;color:#8a4b00}
.rev-rojo .rev-estado{background:var(--revisar-fondo);color:var(--revisar-tinta)}

/* ── Incidencias para tu nómina ───────────────────────────────────────── */
.fdemo-cuenta{width:60px;height:60px;border-radius:16px;font-size:1.25rem;background:var(--revisar-fondo);color:var(--revisar-tinta)}
.fdemo-cuenta.cero{background:var(--listo-fondo);color:var(--listo-tinta)}
.fdemo-cifras{margin:0 0 8px;font-weight:700;font-size:.95rem}
.fdemo-pendientes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fdemo-pendientes li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--revisar-fondo);border-radius:12px;padding:8px 12px;font-weight:600;font-size:.95rem;line-height:1.35;transition:background-color .2s ease-out}
.fdemo-pendientes li.hecho{background:var(--papel);color:var(--tenue)}
.fdemo-pendientes li.hecho>span:first-child{text-decoration:line-through;text-decoration-thickness:1px}
.fdemo-pendientes .estado{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:var(--listo-fondo);color:var(--listo-tinta);font-weight:800;font-size:.8125rem}
.fdemo-tipo{font-size:.75rem;font-weight:800;color:var(--revisar-tinta);white-space:nowrap}
.fdemo-pendientes li:not([data-frena]) .fdemo-tipo{color:var(--tenue)}
.fdemo-listo{margin-top:8px;padding:12px 14px;border-radius:14px;background:var(--listo-fondo);color:var(--listo-tinta)}
.fdemo-exportar{display:grid;gap:10px;margin-top:10px}
.fdemo-exportar .boton:disabled{background:var(--alterno);color:var(--tenue)!important;cursor:not-allowed}

/* ── Pagos en Venezuela ───────────────────────────────────────────────── */
.fdemo-tasa{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.25rem);font-variant-numeric:tabular-nums}
.fdemo-tasa span{font:700 1rem var(--texto);color:var(--tenue);letter-spacing:0}
.fdemo-conceptos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.concepto{background:var(--papel);border-radius:14px;padding:12px 14px;display:grid;gap:8px;transition:background-color .2s ease-out}
.concepto-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.concepto-color{font-size:.8125rem;font-weight:800;padding:4px 10px;border-radius:999px}
.sem-rojo .concepto-color{background:var(--error-fondo);color:var(--error)}
.sem-amarillo .concepto-color{background:#fdf1dc;color:#8a4b00}
.sem-verde .concepto-color{background:var(--listo-fondo);color:var(--listo-tinta)}
.concepto-control{display:flex;flex-wrap:wrap;gap:4px 16px;padding:8px 10px;border-radius:12px}
.concepto-control .casilla{align-items:center;min-height:44px;font-size:.9rem;font-weight:600;gap:8px}
.fdemo-pasivo{background:var(--listo-fondo);color:var(--listo-tinta);border-radius:16px;padding:14px 16px;display:grid;gap:4px}
.fdemo-pasivo .fdemo-nota{color:var(--listo-tinta)}

/* ── Expediente y firma ───────────────────────────────────────────────── */
.fdemo-docs{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.fdemo-docs li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:7px 12px;border-radius:10px;background:var(--papel);font-size:.9rem;font-weight:600;transition:background-color .2s ease-out}
.doc-estado{flex:none;font-size:.8125rem;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--listo-fondo);color:var(--listo-tinta)}
.doc-vence .doc-estado{background:#fdf1dc;color:#8a4b00}
.doc-falta .doc-estado{background:var(--revisar-fondo);color:var(--revisar-tinta)}
.fdemo-documento{background:var(--papel);border-radius:14px;padding:14px 16px;font-size:.9rem;line-height:1.5;display:grid;gap:10px;border:1px dashed var(--linea)}
.fdemo-firma-linea{margin:0;padding-top:8px;border-top:1px solid var(--linea);font-weight:700}
.fdemo-firma{font:italic 500 1.35rem/1.2 var(--texto);color:var(--suave)}
.fdemo-firma.firmada{color:#1e3a8a}
.fdemo-firmar{display:grid;gap:12px}
.fdemo-firmar .boton{justify-self:start}
.fdemo-auditoria{background:var(--papel);border-radius:14px;padding:14px 16px;display:grid;gap:8px}
.fdemo-auditoria dl{display:grid;gap:2px 0;margin:0}
.fdemo-auditoria dt{font-size:.8125rem;font-weight:800;color:var(--tenue);margin-top:6px}
.fdemo-auditoria dd{margin:0;font-size:.875rem}
.huella{font:600 .78rem/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}

/* ── El resto de la página ────────────────────────────────────────────── */
.funcion-bloques{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px;align-items:start}
.funcion-bloque h2{margin:0 0 12px}
.funcion-bloque p:last-child{margin-bottom:0}
.funcion-bloque .lista-check{margin:0 0 1em}
.funcion-bloque .lista-check li{margin:8px 0}
.funcion-enlaces h2{margin-bottom:var(--e4)}
.funcion-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:16px}
.funcion-cta{margin-top:var(--e8)}
.funcion-cta-botones{display:grid;gap:10px;justify-items:start}
.funcion-cta-segundo{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:800;color:var(--ciruela)}

/* ── Índice /funciones ────────────────────────────────────────────────── */
.funciones-grupo{margin:var(--e7) 0 var(--e4)}
.funciones-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.funcion-tarjeta .modulo-ico{margin-bottom:8px}
.funciones-mas{max-width:72ch}

@media (max-width:720px){
  .fdemo{padding:18px;border-radius:24px}
  .fdemo-tit{font-size:1.2rem}
  .qr{width:132px;height:132px}
  .fdemo-dia{min-height:54px}
  .fdemo-dia strong{font-size:1rem}
}