/* Portal del trabajador — hoja MÓVIL PRIMERO sobre sus propios tokens
   (tokens.css, dirección «Despacho» del rediseño del 24/10/2026). No lee la
   guía de la gestión (nf-guia.css): los componentes que tomaba de ella
   (tarjeta, aviso, vacío, lista de opciones) están aquí con prefijo emp-.
   Prefijo reservado: emp- */
html, body { margin: 0; }
.emp-body { background: var(--emp-papel); color: var(--emp-tinta); font-family: var(--emp-letra); font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.emp-body a { color: var(--emp-marca); }
.emp-body *, .emp-body *::before, .emp-body *::after { box-sizing: border-box; }

/* Componentes base (antes, de la guía de la gestión). */
.emp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.emp-cifra { font-family: var(--emp-cifras); font-variant-numeric: tabular-nums; }
.emp-bloque { background: var(--emp-superficie); border-radius: var(--emp-radio); box-shadow: var(--emp-sombra); border: 1px solid var(--emp-linea); overflow: hidden; }
.emp-bloque-cab { padding: 14px 20px 10px; font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.02rem; color: var(--emp-tinta); display: flex; align-items: center; gap: 8px; position: relative; }
/* La línea bajo la cabecera, degradada: corta la tarjeta sin encajonarla. */
.emp-bloque-cab::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: var(--emp-separador); }
.emp-bloque-cab > .emp-i:first-child { color: var(--emp-marca-osc); font-size: .9em; }
/* Un encabezado DENTRO de la cabecera no trae el tamaño del navegador: manda la cabecera. */
.emp-bloque-cab h1, .emp-bloque-cab h2, .emp-bloque-cab h3, .emp-bloque-cab h4 { font: inherit; color: inherit; line-height: 1.3; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.emp-bloque-cuerpo { padding: 16px 20px; }
.emp-vacio { text-align: center; padding: 26px 20px; color: var(--emp-apagado); }
.emp-vacio .emp-i { font-size: 1.8rem; opacity: .45; display: block; margin-bottom: 10px; }
.emp-opciones { position: fixed; z-index: 1060; top: 0; left: 0; width: max-content; max-width: 420px; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--emp-superficie); border: 1px solid var(--emp-linea); border-radius: var(--emp-radio-sm); box-shadow: var(--emp-sombra-alta); }
.emp-opciones[hidden] { display: none; }
.emp-opcion { padding: 9px 10px; border-radius: 8px; color: var(--emp-tinta); cursor: pointer; }
.emp-opcion.activa { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); }
.emp-tabla-scroll { overflow: auto; max-height: 68vh; position: relative; }

/* Cabecera sin sesión (entrada) */
.emp-top { background: var(--emp-superficie); border-bottom: 1px solid var(--emp-linea); position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); }
.emp-top-in { max-width: 960px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; }
.emp-marca { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--emp-tinta); font-weight: 600; letter-spacing: 0.02em; min-width: 0; }
.emp-body a.emp-marca { color: var(--emp-tinta); }
.emp-marca img { border-radius: 8px; flex-shrink: 0; width: auto; max-width: 120px; object-fit: contain; }
.emp-marca strong { font-weight: 800; }
/* Monograma: la inicial de la empresa cuando no ha subido su logotipo
   (empleado/_icono_app.php). Sustituye al aro de fábrica, que era el mismo
   del portal de NewFox. El tamaño lo pone cada sitio con --mono. */
.emp-monograma { --mono: 30px; display: inline-grid; place-items: center; flex-shrink: 0; width: var(--mono); height: var(--mono); border-radius: calc(var(--mono) * 0.28); background: var(--emp-marca-osc); color: var(--emp-marca-tinte); font-family: var(--emp-letra-titulos); font-weight: 400; font-size: calc(var(--mono) * 0.56); line-height: 1; box-shadow: var(--emp-sombra-suave); }
.emp-marca-sec { color: var(--emp-apagado); font-weight: 500; font-size: 0.85rem; white-space: nowrap; }
.emp-marca-sec::before { content: '·'; margin-right: 9px; color: var(--emp-linea); }
@media (max-width: 720px) { .emp-marca-sec { display: none; } }
.emp-ico { color: var(--emp-apagado); text-decoration: none; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; background: transparent; font: inherit; font-size: 1.1rem; cursor: pointer; position: relative; }
.emp-ico:hover, .emp-ico:focus-visible { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); outline: none; }

/* Iconos: Lucide en trazo (empleado/_iconos.php). Miden lo que la letra que
   los rodea, así que un font-size en el contenedor los escala. */
.emp-i { width: 1.15em; height: 1.15em; flex-shrink: 0; stroke-width: 1.75; vertical-align: -0.18em; display: inline-block; }
.emp-i.gira { animation: emp-gira 1s linear infinite; }
.emp-i.late { animation: emp-late 1s ease-in-out infinite; }
@keyframes emp-gira { to { transform: rotate(360deg); } }
@keyframes emp-late { 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .emp-i.gira, .emp-i.late { animation: none; } }

/* Con sesión: CABECERA arriba (marca y, en escritorio, las secciones y la
   jornada) y BARRA DE SECCIONES abajo en el móvil. El resto, en la hoja «Más». */
.emp-app { display: flex; flex-direction: column; flex: 1; min-height: 100vh; min-height: 100dvh; width: 100%; }
.emp-cab { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px; min-height: 60px;
    padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--emp-papel) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* La línea de abajo, degradada como los separadores: corta sin encajonar. */
.emp-cab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--emp-separador); }
.emp-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.emp-nav a, .emp-nav-mas { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; min-height: 40px; border-radius: var(--emp-radio-pildora); border: 0; background: transparent;
    color: var(--emp-tinta-2); font: inherit; font-size: .95rem; font-weight: 500; text-decoration: none; cursor: pointer; position: relative; white-space: nowrap; }
.emp-body .emp-nav a { color: var(--emp-tinta-2); }
.emp-nav a:hover, .emp-nav-mas:hover { background: color-mix(in srgb, var(--emp-marca-tinte) 70%, transparent); color: var(--emp-marca-osc); }
.emp-body .emp-nav a.activo, .emp-nav-mas.activo { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); font-weight: 600; }
.emp-nav .emp-badge, .emp-nav-mas .emp-badge { margin-left: 0; }
.emp-cab-fic { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: var(--emp-radio-pildora); background: var(--emp-superficie);
    border: 1px solid var(--emp-linea); box-shadow: var(--emp-sombra-suave); font-size: .9rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.emp-body a.emp-cab-fic { color: var(--emp-tinta); }
.emp-cab-fic:hover { border-color: color-mix(in srgb, var(--emp-marca) 45%, transparent); }
.emp-cab-fic .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--emp-apagado); }
.emp-cab-fic.est-dentro .punto { background: var(--emp-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--emp-ok) 18%, transparent); }
.emp-cab-fic.est-olvidada .punto { background: var(--emp-aviso); }
.emp-body a.emp-cab-fic.est-olvidada { color: var(--emp-aviso-fuerte); }

/* Barra del móvil: abajo, al alcance del pulgar, con fichar en el centro. */
.emp-barra-inf { display: none; }
.emp-barra-inf a, .emp-barra-mas { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding: 8px 2px 6px; min-height: 56px;
    border: 0; background: transparent; color: var(--emp-apagado); font: inherit; font-size: .7rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; cursor: pointer; position: relative; }
.emp-body .emp-barra-inf a { color: var(--emp-apagado); }
.emp-barra-inf a .emp-i, .emp-barra-mas .emp-i { width: 24px; height: 24px; }
.emp-barra-inf .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.emp-body .emp-barra-inf a.activo, .emp-barra-mas.activo { color: var(--emp-marca-osc); }
/* El activo lleva una raya arriba además del color: no se distingue solo por el tono. */
.emp-barra-inf a.activo::before, .emp-barra-mas.activo::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--emp-marca-osc); }
.emp-barra-inf .emp-badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; box-shadow: 0 0 0 2px var(--emp-superficie); }
.emp-barra-fic .circ { width: 54px; height: 54px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center; background: var(--emp-marca-osc); color: #fff; box-shadow: var(--emp-sombra-alta); transition: transform .12s var(--emp-ease); }
.emp-barra-fic .circ .emp-i { width: 24px; height: 24px; }
.emp-barra-fic:active .circ { transform: scale(.94); }
.emp-barra-fic.est-dentro .circ { background: var(--emp-ok); }
.emp-barra-fic.est-olvidada .circ { background: var(--emp-aviso-fuerte); }
.emp-body .emp-barra-inf a.emp-barra-fic.activo::before { display: none; }

/* La hoja «Más»: abajo en el móvil, desplegable bajo la cabecera en escritorio. */
.emp-mas { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--emp-superficie);
    border-radius: 24px 24px 0 0; box-shadow: var(--emp-sombra-alta); padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); animation: emp-sube .24s var(--emp-ease); }
.emp-mas[hidden] { display: none; }
.emp-mas-cab { display: flex; align-items: center; gap: 12px; padding: 10px 2px 14px; position: relative; }
.emp-mas-cab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--emp-separador); }
.emp-mas-ava { width: 44px; height: 44px; border-radius: 50%; background: var(--emp-marca-tinte); color: var(--emp-marca-osc); font-weight: 600; display: grid; place-items: center; flex-shrink: 0; object-fit: cover; }
.emp-mas-yo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.emp-mas-yo strong { font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.05rem; overflow-wrap: anywhere; }
.emp-mas-yo small { color: var(--emp-apagado); font-size: .82rem; }
.emp-mas-grupo { padding: 12px 0 4px; }
.emp-mas-tit { margin: 0 2px 8px; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--emp-apagado); }
.emp-mas-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.emp-mas-lista a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px; min-height: 84px; border-radius: var(--emp-radio-sm);
    background: var(--emp-superficie-2); border: 1px solid var(--emp-linea-suave); text-align: center; font-size: .84rem; font-weight: 500; line-height: 1.2; text-decoration: none; position: relative; }
.emp-body .emp-mas-lista a { color: var(--emp-tinta); }
.emp-mas-lista a .emp-i { width: 24px; height: 24px; color: var(--emp-marca-osc); }
.emp-mas-lista a:hover { border-color: color-mix(in srgb, var(--emp-marca) 40%, transparent); }
.emp-body .emp-mas-lista a.activo { background: var(--emp-marca-tinte); border-color: transparent; color: var(--emp-marca-osc); font-weight: 600; }
.emp-mas-lista .emp-badge { position: absolute; top: 8px; right: 8px; margin: 0; }
.emp-mas-salir { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 12px; min-height: 48px; border-radius: var(--emp-radio-sm); border: 1px solid var(--emp-linea); text-decoration: none; font-weight: 500; }
.emp-body a.emp-mas-salir { color: var(--emp-tinta-2); }
.emp-mas-salir:hover { background: var(--emp-superficie-2); }
.emp-velo { position: fixed; inset: 0; z-index: 65; background: color-mix(in srgb, var(--emp-tinta) 40%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.emp-velo[hidden] { display: none; }
body.emp-mas-abierta { overflow: hidden; }

@media (max-width: 999px) {
    .emp-nav, .emp-cab-fic { display: none; }
    .emp-barra-inf { display: flex; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--emp-superficie);
        padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); box-shadow: 0 -8px 24px -16px color-mix(in srgb, var(--emp-marca-osc) 45%, transparent); }
    .emp-barra-inf::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--emp-separador); }
    /* Lo que tapa la barra fija se recupera abajo: nada queda debajo de ella. */
    .emp-body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .emp-mas .en-barra-m { display: none; }
}
@media (min-width: 1000px) {
    .emp-cab { padding-left: max(24px, calc((100% - 1100px) / 2)); padding-right: max(24px, calc((100% - 1100px) / 2)); }
    .emp-mas { left: auto; right: max(24px, calc((100% - 1100px) / 2)); top: 68px; bottom: auto; width: 380px; max-height: calc(100vh - 90px); border-radius: var(--emp-radio); padding: 6px 16px 16px; animation: none; }
    .emp-mas .en-barra-e { display: none; }
    .emp-mas-lista { grid-template-columns: 1fr; gap: 2px; }
    .emp-mas-lista a { flex-direction: row; justify-content: flex-start; min-height: 44px; padding: 10px 12px; background: transparent; border-color: transparent; text-align: left; font-size: .95rem; }
    .emp-mas-lista a .emp-i { width: 20px; height: 20px; }
    .emp-mas-lista a:hover { background: var(--emp-superficie-2); }
    .emp-mas-lista .emp-badge { position: static; margin-left: auto; }
    .emp-velo { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .emp-mas { animation: none; } }
.emp-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--emp-peligro); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 0 5px; margin-left: 2px; line-height: 1; }
.emp-nov { list-style: none; margin: 0 0 12px; padding: 0; }
.emp-nov li { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--emp-linea-suave); font-size: 0.92rem; }
.emp-nov li:last-child { border-bottom: 0; }
.emp-nov li.nuevo { font-weight: 600; }
.emp-nov li .emp-i { color: var(--emp-marca-osc); }
.emp-nov li.vac_no .emp-i { color: var(--emp-peligro); } .emp-nov li.vac_ok .emp-i { color: var(--emp-ok); }
.emp-nov a { color: inherit; text-decoration: none; flex: 1; min-width: 0; }
.emp-nov .f { font-family: var(--emp-cifras); font-size: 0.78rem; color: var(--emp-apagado); white-space: nowrap; }

/* Contenido */
.emp-wrap { flex: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 18px 16px 32px; }
.emp-h1 { font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.6rem; line-height: 1.2; margin: 4px 0 16px; letter-spacing: -0.01em; text-wrap: balance; }
.emp-h1 small { display: block; font-family: var(--emp-letra); font-size: 0.9rem; font-weight: 400; letter-spacing: 0; color: var(--emp-apagado); margin-top: 2px; }
.emp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.emp-aviso { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 16px; border-radius: var(--emp-radio-sm); border: 1px solid transparent; font-size: .94rem; }
.emp-aviso > .emp-i:first-child { margin-top: .2em; }
/* Texto en el color fuerte de cada estado: los cuatro pasan AA sobre su tinte. */
.emp-aviso-ok { background: var(--emp-ok-tinte); border-color: color-mix(in srgb, var(--emp-ok) 25%, transparent); color: var(--emp-ok); }
.emp-aviso-warn { background: var(--emp-aviso-tinte); border-color: color-mix(in srgb, var(--emp-aviso) 30%, transparent); color: var(--emp-aviso-fuerte); }
.emp-aviso-danger { background: var(--emp-peligro-tinte); border-color: color-mix(in srgb, var(--emp-peligro) 25%, transparent); color: var(--emp-peligro); }
.emp-aviso-info { background: var(--emp-info-tinte); border-color: color-mix(in srgb, var(--emp-info) 25%, transparent); color: var(--emp-info); }

/* Tarjeta de identidad */
.emp-yo { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.emp-foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--emp-marca-tinte); border: 2px solid var(--emp-superficie); box-shadow: var(--emp-sombra); flex-shrink: 0; }
.emp-foto-ini { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.4rem; color: var(--emp-marca-osc); }
.emp-yo-nom { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.emp-yo-sub { color: var(--emp-apagado); font-size: 0.88rem; margin-top: 3px; }
.emp-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 0.9rem; }
.emp-kv dt { color: var(--emp-apagado); font-weight: 500; margin: 0; }
.emp-kv dd { margin: 0; font-weight: 500; }
.emp-kv dd.mono { font-family: var(--emp-cifras); font-size: 0.86rem; }

/* Documentos: filtros por tipo, una lista por años y la fila de documento. */
.emp-chips { display: flex; gap: 6px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.emp-chips::-webkit-scrollbar { display: none; }
.emp-chips a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; min-height: 38px; border-radius: var(--emp-radio-pildora); border: 1px solid var(--emp-linea); background: var(--emp-superficie); color: var(--emp-tinta-2); text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap; }
.emp-body .emp-chips a { color: var(--emp-tinta-2); }
.emp-chips a:hover { border-color: color-mix(in srgb, var(--emp-marca) 40%, transparent); }
.emp-body .emp-chips a.on { background: var(--emp-marca-osc); border-color: var(--emp-marca-osc); color: #fff; }
.emp-chips .n { font-size: .8rem; opacity: .75; }
.emp-docs { list-style: none; margin: 0; padding: 0; }
.emp-doc-anyo { margin-bottom: 14px; }
.emp-doc-anyo > summary { list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 4px 2px 8px; cursor: pointer; }
.emp-doc-anyo > summary::-webkit-details-marker { display: none; }
.emp-doc-anyo > summary:focus-visible { outline: 2px solid var(--emp-marca); outline-offset: 2px; border-radius: 6px; }
.emp-doc-anyo > summary .a { font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.3rem; color: var(--emp-tinta); }
.emp-doc-anyo > summary .n { font-size: .85rem; color: var(--emp-apagado); }
.emp-doc-anyo > summary .pl { margin-left: auto; align-self: center; color: var(--emp-apagado); transition: transform .2s var(--emp-ease); }
.emp-doc-anyo:not([open]) > summary .pl { transform: rotate(-90deg); }
.emp-docs li + li { border-top: 1px solid var(--emp-linea-suave); }
.emp-docs a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: 'ico t ir' 'ico m ir'; align-items: center; column-gap: 14px; row-gap: 1px; padding: 12px 18px; color: var(--emp-tinta); text-decoration: none; min-height: 64px; }
.emp-body .emp-docs a { color: var(--emp-tinta); }
.emp-docs a:hover { background: var(--emp-superficie-2); }
/* Sin línea de detalle (el título ya dice el mes): el título, centrado con su icono. */
.emp-docs a.sin-m { grid-template-areas: 'ico t ir'; }
.emp-docs a:focus-visible { outline: 2px solid var(--emp-marca); outline-offset: -2px; }
.emp-doc-ico { grid-area: ico; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--emp-marca-tinte); color: var(--emp-marca-osc); }
.emp-doc-ico .emp-i { width: 20px; height: 20px; }
/* Las listas que aún pintan el icono suelto (la del Inicio) van igual de alineadas. */
.emp-docs a > .emp-i:first-child { grid-area: ico; justify-self: center; width: 20px; height: 20px; color: var(--emp-marca-osc); }
.emp-docs .t { grid-area: t; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.emp-docs .m { grid-area: m; font-size: .82rem; color: var(--emp-apagado); }
.emp-docs .cad-pronto { color: var(--emp-aviso-fuerte); font-weight: 600; }
.emp-docs .cad-caducado { color: var(--emp-peligro); font-weight: 600; }
.emp-docs .ir { grid-area: ir; color: var(--emp-apagado); }
.emp-docs li.nuevo .t { font-weight: 600; }
.emp-docs-mini { margin: -6px 0 12px; }
.emp-docs-mini a { padding: 9px 4px; min-height: 0; }
.emp-drive-subir { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; text-decoration: none; }
.emp-body a.emp-drive-subir { color: var(--emp-marca-osc); }
.emp-drive .emp-h2 small { font-family: var(--emp-letra); font-size: .85rem; color: var(--emp-apagado); margin-left: 4px; }
.emp-drive > .emp-hint { margin: 0; }
/* Texto oscuro sobre el tinte (4,5:1 garantizado por Marca.php): en blanco sobre el principal, a este tamaño, no llegaba a AA. */
.emp-nuevo { display: inline-block; font-size: .74rem; font-weight: 600; background: var(--emp-marca-tinte); color: var(--emp-marca-osc); border-radius: var(--emp-radio-pildora); padding: 2px 8px; vertical-align: middle; line-height: 1.3; }

/* Vacaciones */
.emp-saldo { display: flex; align-items: center; gap: 16px; }
.emp-saldo-n { font-family: var(--emp-letra); font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--emp-marca-osc); letter-spacing: -0.02em; }
.emp-saldo-n.neg { color: var(--emp-peligro); }
.emp-saldo-t { font-weight: 600; line-height: 1.25; }
.emp-saldo-t small { font-weight: 500; color: var(--emp-apagado); font-size: 0.8rem; }
.emp-docs .t.mono { font-family: var(--emp-cifras); font-weight: 600; font-size: 0.9rem; }

/* Solicitudes de vacaciones */
.emp-vac-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.emp-sol { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.emp-sol > .emp-i { font-size: 1.2rem; color: var(--emp-marca); width: 26px; text-align: center; }
.emp-sol .t { font-weight: 600; }
.emp-sol .m { font-size: 0.78rem; color: var(--emp-apagado); }
.emp-est { display: inline-block; font-size: .76rem; font-weight: 600; border-radius: var(--emp-radio-pildora); padding: 2px 9px; vertical-align: middle; line-height: 1.35; }
.emp-est-propuesta { background: var(--emp-aviso-tinte); color: var(--emp-aviso-fuerte); }
.emp-est-tramite { background: var(--emp-info-tinte); color: var(--emp-info); }
.emp-est-aprobada { background: var(--emp-ok-tinte); color: var(--emp-ok); }
.emp-est-rechazada { background: var(--emp-peligro-tinte); color: var(--emp-peligro); }
.emp-est-cancelada { background: var(--emp-superficie-3); color: var(--emp-tinta-2); }

/* Variables */
.emp-var-nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.emp-var-nav .emp-btn { padding: 10px 8px; font-size: 0.86rem; }
.emp-var-filtro { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.emp-var-filtro label { flex: 1 1 140px; display: block; font-size: .86rem; color: var(--emp-apagado); font-weight: 500; }
.emp-var-filtro .emp-input { margin-top: 4px; padding: 9px 10px; font-size: 0.92rem; }
.emp-var-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.emp-kpi { padding: 12px 14px; }
.emp-kpi .l { font-size: .86rem; color: var(--emp-apagado); font-weight: 500; }
.emp-kpi .v { font-size: 1.35rem; font-weight: 700; margin-top: 2px; }
.emp-kpi.total { background: var(--emp-marca-tinte); border-color: var(--emp-marca); }
.emp-kpi.total .v { color: var(--emp-marca-osc); }
.emp-var-tabla-wrap { overflow-x: auto; }
.emp-var-tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.emp-var-tabla th, .emp-var-tabla td { padding: 10px 14px; border-bottom: 1px solid var(--emp-linea-suave); text-align: left; }
.emp-var-tabla th { font-size: .86rem; color: var(--emp-apagado); background: var(--emp-superficie-2); }
.emp-var-tabla .n { text-align: right; white-space: nowrap; }
.emp-var-tabla tbody tr:nth-child(even) td { background: var(--emp-superficie-2); }
.emp-var-tabla tr.c { cursor: pointer; }
.emp-var-tabla tr.c:hover td, .emp-var-tabla tr.c:focus-visible td { background: var(--emp-marca-tinte); }
.emp-var-tabla tr.c:focus-visible { outline: 2px solid var(--emp-marca); outline-offset: -2px; }
.emp-var-tabla tr.c td:first-child .emp-i { color: var(--emp-apagado); font-size: 0.72rem; transition: transform .15s; }
.emp-var-tabla tr.c.open td:first-child .emp-i { transform: rotate(90deg); }
.emp-var-tabla tfoot td { font-weight: 700; background: var(--emp-superficie-2); }
.emp-var-tabla tr.det td { background: var(--emp-superficie-2) !important; padding: 8px 14px 10px; }
.emp-var-det { display: grid; gap: 6px; }
.emp-var-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.84rem; background: var(--emp-superficie); border: 1px solid var(--emp-linea-suave); border-radius: 8px; padding: 6px 10px; }
.emp-var-row span { display: inline-flex; flex-direction: column; }
.emp-var-row small { font-size: .78rem; color: var(--emp-apagado); font-weight: 500; }
@media (max-width: 720px) { .emp-var-kpis { grid-template-columns: 1fr 1fr; } .emp-var-tabla .col2 { display: none; } .emp-var-nav .emp-btn span { display: none; } }

/* Formularios */
.emp-form { display: grid; gap: 12px; }
.emp-form label { display: block; font-size: .86rem; color: var(--emp-tinta-2); font-weight: 500; margin-bottom: 5px; }
.emp-input { width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--emp-linea); border-radius: 12px; background: var(--emp-superficie); color: var(--emp-tinta); }
.emp-input:focus { outline: none; border-color: var(--emp-marca); box-shadow: 0 0 0 3px var(--emp-marca-tinte); }
.emp-input.mono { font-family: var(--emp-cifras); letter-spacing: 0.04em; text-transform: uppercase; }
.emp-pwd { position: relative; }
.emp-pwd .emp-input { padding-right: 46px; }
.emp-ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--emp-apagado); width: 36px; height: 36px; border-radius: 8px; cursor: pointer; }
.emp-ojo:hover { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); }
/* Fondo del OSCURO, no del principal: el texto blanco a 1rem necesita 4,5:1 y Marca.php solo garantiza 3:1 al principal (lo que basta para texto grande). */
.emp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font: inherit; font-size: 1rem; font-weight: 600; padding: 13px 18px; border-radius: var(--emp-radio-boton); border: 1px solid var(--emp-marca-osc); background: var(--emp-marca-osc); color: #fff; cursor: pointer; text-decoration: none; box-shadow: var(--emp-sombra-suave); transition: transform .12s var(--emp-ease), background .15s; }
.emp-btn:active { transform: scale(.97); }
.emp-btn:hover { background: color-mix(in srgb, var(--emp-marca-osc) 82%, #000); border-color: color-mix(in srgb, var(--emp-marca-osc) 82%, #000); color: #fff; }
.emp-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--emp-marca) 55%, transparent); outline-offset: 2px; }
.emp-body a.emp-btn { color: #fff; } /* `.emp-body a` pinta los enlaces de azul: sobre el fondo azul del botón el texto desaparecía */
.emp-btn.secundario { background: var(--emp-superficie); color: var(--emp-marca-osc); border-color: var(--emp-linea); }
.emp-body a.emp-btn.secundario { color: var(--emp-marca-osc); }
/* Color y borde también: .emp-btn:hover pone el texto en blanco, y sobre el tinte no se leía. */
.emp-btn.secundario:hover { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); border-color: color-mix(in srgb, var(--emp-marca) 40%, transparent); }
.emp-hint { font-size: 0.82rem; color: var(--emp-apagado); }
.emp-hint.mal { color: var(--emp-peligro); font-weight: 600; }
.emp-links { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; margin-top: 6px; flex-wrap: wrap; }

/* Login: tarjeta centrada */
.emp-login .emp-bloque-cuerpo { padding: 22px 22px 18px; }

.emp-pie { text-align: center; color: var(--emp-apagado); font-size: 0.78rem; padding: 14px 16px 18px; }
@media (max-width: 720px) {
    .emp-pie { padding-bottom: 18px; }
    /* iOS hace zoom al enfocar un campo de menos de 16px: se evita, no se tapa. */
    .emp-input, .emp-body select, .emp-body textarea { font-size: 16px; }
    .emp-wrap { padding-left: 14px; padding-right: 14px; }
    .emp-body .emp-bloque-cuerpo { padding-left: 14px; padding-right: 14px; }
}
.emp-body a, .emp-body button { -webkit-tap-highlight-color: color-mix(in srgb, var(--emp-marca) 15%, transparent); touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) { .emp-body * { transition: none !important; } }

/* Registro de jornada (conductores). La zebra va por la clase .par que pone
   PHP, no por nth-child: en el móvil cada día ocupa dos filas. */
.emp-jor-tabla tbody tr:nth-child(even) td { background: transparent; }
.emp-jor-tabla tbody tr.par td { background: var(--emp-superficie-2); }
.emp-jor-tabla tr.inc td { background: var(--emp-aviso-tinte) !important; }
.emp-jor-dow { font-size: 0.72rem; color: var(--emp-apagado); text-transform: uppercase; margin-left: 2px; }
.emp-jor-pdf { width: auto; margin-left: auto; padding: 6px 12px; font-size: 0.82rem; }
.emp-jor-leyenda { margin: 12px 2px 0; line-height: 1.5; }
.emp-jor-leyenda strong { color: var(--emp-tinta); }
/* En el móvil las tres columnas que no caben (duración, disponibilidad,
   descanso) van en un renglón propio bajo el día: se pierde anchura, no dato. */
.emp-jor-subrow { display: none; }
@media (max-width: 720px) {
    .emp-jor-tabla th, .emp-jor-tabla td { padding: 9px 6px; }
    .emp-jor-tabla td.emp-jor-fec { padding-left: 10px; }
    .emp-jor-tabla tbody tr:not(.emp-jor-subrow) td { border-bottom: 0; padding-bottom: 2px; }
    .emp-jor-subrow { display: table-row; }
    .emp-jor-sub { font-size: 0.7rem; color: var(--emp-apagado); font-family: var(--emp-cifras); padding: 0 6px 8px 10px !important; }
    .emp-jor-sub b { font-family: var(--emp-letra); font-weight: 600; }
    .emp-jor-pdf { font-size: 0.78rem; padding: 6px 10px; }
}

/* Mi calendario: meses apilados (el formato de la referencia del propietario). */
.emp-cal-nav { display: flex; gap: 8px; margin-bottom: 10px; }
.emp-cal-nav .emp-btn { width: auto; padding: 9px 14px; font-size: 0.86rem; }
.emp-cal-nav.abajo { justify-content: center; margin: 14px 0 4px; }
.emp-cal-card { padding: 4px 14px 12px; }
.emp-cal-mes + .emp-cal-mes { border-top: 1px solid var(--emp-linea-suave); }
@media (min-width: 1000px) {
    .emp-cal-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; padding: 6px 20px 10px; }
    .emp-cal-mes + .emp-cal-mes { border-top: 0; }
    .emp-cal-mes:nth-child(n+3) { border-top: 1px solid var(--emp-linea-suave); }
    .emp-cal-nav.abajo { grid-column: 1 / -1; }
}
/* Baldosas al estilo del calendario impreso de la casa (27/09/2026): gris
   para el día normal, azul marino el domingo, azul claro los días del mes
   vecino; esquina superior izquierda redondeada y el NÚMERO del día grande
   abajo a la derecha, que es lo que se lee primero. Lo demás (servicios,
   «Hoy») es una etiqueta pequeña arriba a la izquierda, donde el calendario
   de papel pone el nombre del festivo: informa sin competir con el día.
   Contrastes medidos: número sobre gris 12,3:1, blanco sobre marino 11,5:1,
   atenuado del pasado 5:1, domingo pasado 5,4:1. */
.emp-cal-mes h2 { font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.25rem; text-align: left; margin: 18px 2px 10px; color: var(--emp-tinta); }
.emp-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.emp-cal-dow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--emp-tinta-2); text-align: center; padding: 2px 0 8px; }
.emp-cal-dia, .emp-cal-fuera { position: relative; height: 56px; border: 0; border-radius: 10px; background: var(--emp-superficie); box-shadow: inset 0 0 0 1px var(--emp-linea-suave); font: inherit; color: var(--emp-tinta); padding: 0; display: block; text-align: left; }
.emp-cal-dia { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.emp-cal-dia .n, .emp-cal-fuera .n { position: absolute; right: 7px; bottom: 5px; font-size: 1.3rem; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.emp-cal-dia .et { position: absolute; left: 6px; top: 5px; right: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 1px 5px; font-size: 0.62rem; font-weight: 600; line-height: 1.15; color: var(--emp-tinta-2); white-space: nowrap; overflow: hidden; }
/* Solo el cochecito: dice que ese día hay servicios; cuántos y cuáles, en el detalle del día (27/09/2026). */
.emp-cal-dia .et .s { font-size: 0.72rem; opacity: 0.85; }
.emp-cal-dia .hx { font-size: 0.66rem; color: var(--emp-tipo-vip-tx); }
/* Tacto de app (27/09/2026): respuesta en el momento de pulsar, y mantener el dedo no selecciona el número ni saca el menú del sistema. */
.emp-cal-dia { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: filter .1s ease-out, transform .1s ease-out; }
.emp-cal-dia:active { filter: brightness(0.9); transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) { .emp-cal-dia { transition: none; } .emp-cal-dia:active { transform: none; } }
/* Días del mes vecino: muy apagados, que no se confundan con días de este mes (decorativos, aria-hidden). */
.emp-cal-fuera { background: transparent; box-shadow: none; } /* hueco antes del día 1: vacío */
.emp-cal-fuera .n { color: var(--emp-linea); }
/* Domingos y festivos: el tinte de la marca con el oscuro encima (4,5:1 garantizado por Marca.php), no el bloque oscuro del portal anterior. */
.emp-cal-dia.dom { background: var(--emp-marca-tinte); } .emp-cal-dia.dom .n { color: var(--emp-marca-osc); } .emp-cal-dia.dom .et, .emp-cal-dia.dom .hx { color: var(--emp-marca-osc); }
.emp-cal-fuera.dom { background: color-mix(in srgb, var(--emp-marca-tinte) 50%, transparent); } .emp-cal-fuera.dom .n { color: var(--emp-apagado); }
.emp-cal-dia.pasado { background: var(--emp-superficie-3); } .emp-cal-dia.pasado .n { color: var(--emp-apagado); }
.emp-cal-dia.pasado.dom { background: color-mix(in srgb, var(--emp-marca-tinte) 55%, var(--emp-superficie-3)); } .emp-cal-dia.pasado.dom .n { color: var(--emp-apagado); }
/* Días en los que la persona NO estaba de alta: igual de apagados que un día de otro mes, mande lo que mande
   debajo (domingo, festivo, pasado). Tres clases de especificidad para ganar a las ausencias y al domingo. */
.emp-cal .emp-cal-dia.inact { background: var(--emp-superficie-2); } .emp-cal .emp-cal-dia.inact .n { color: var(--emp-linea); } .emp-cal .emp-cal-dia.inact .et, .emp-cal .emp-cal-dia.inact .hx { color: var(--emp-linea); }
.emp-cal .emp-cal-dia.inact.dom { background: color-mix(in srgb, var(--emp-marca-tinte) 50%, transparent); } .emp-cal .emp-cal-dia.inact.dom .n { color: var(--emp-apagado); }
.emp-cal .emp-cal-dia.hoy { box-shadow: inset 0 0 0 2px var(--emp-marca-osc); } .emp-cal-dia.hoy .n { font-weight: 700; }
/* Ausencias confirmadas: la baldosa entera del color; solicitadas: rayado. Mandan sobre el domingo, para que un periodo se lea seguido. */
.emp-cal-dia.aus, .emp-cal-dia.pend, .emp-cal-dia.dom, .emp-cal-dia.pasado, .emp-cal-dia.hor-libre { box-shadow: none; }
.emp-cal-dia.a-vac { background: #F4E2B8; } .emp-cal-dia.a-vac .n { color: #6B4A00; }
.emp-cal-dia.a-per { background: #DCD8F2; } .emp-cal-dia.a-per .n { color: var(--emp-tipo-vip-tx); }
.emp-cal-dia.a-med { background: #F9DCDC; } .emp-cal-dia.a-med .n { color: #8F2525; }
.emp-cal-dia.a-otr { background: var(--emp-linea); } .emp-cal-dia.a-otr .n { color: var(--emp-tinta-2); }
.emp-cal-dia.aus .et, .emp-cal-dia.pend .et { color: var(--emp-tinta-2); } .emp-cal-dia.aus .hx, .emp-cal-dia.pend .hx { color: var(--emp-tipo-vip-tx); }
.emp-cal-dia.p-vac { background: repeating-linear-gradient(135deg, #F4E2B8 0 6px, #FBF4E4 6px 12px); } .emp-cal-dia.p-vac .n { color: #6B4A00; }
.emp-cal-dia.p-per { background: repeating-linear-gradient(135deg, #DCD8F2 0 6px, #F2F0FA 6px 12px); } .emp-cal-dia.p-per .n { color: var(--emp-tipo-vip-tx); }
.emp-cal-dia.conflicto .et .s { color: #A8231F; }
@media (hover: hover) and (pointer: fine) { .emp-cal-dia:hover { filter: brightness(0.95); } }
.emp-cal-dia:focus-visible { outline: 3px solid var(--emp-marca-osc); outline-offset: 1px; }
@media (min-width: 560px) { .emp-cal-dia, .emp-cal-fuera { height: 64px; } .emp-cal-dia .n, .emp-cal-fuera .n { font-size: 1.5rem; right: 9px; bottom: 7px; } .emp-cal-dia .et { font-size: 0.66rem; left: 8px; top: 6px; } }
@media (max-width: 380px) { .emp-cal { gap: 2px; } .emp-cal-dia, .emp-cal-fuera { height: 52px; border-radius: 8px; } .emp-cal-dia .n, .emp-cal-fuera .n { font-size: 1.15rem; right: 5px; bottom: 4px; } .emp-cal-dia .et { left: 4px; font-size: 0.58rem; } }
.emp-cal-leyenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; padding: 14px 16px; margin-top: 12px; font-size: 0.82rem; color: var(--emp-tinta-2); }
.emp-cal-leyenda .k { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 18px; border-radius: 5px; vertical-align: -4px; margin-right: 8px; font-style: normal; background: var(--emp-linea); }
.emp-cal-leyenda .k.dom { background: var(--emp-marca-tinte); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--emp-marca) 30%, transparent); } .emp-cal-leyenda .k.fuera { background: var(--emp-superficie-2); box-shadow: inset 0 0 0 1px var(--emp-linea); }
.emp-cal-leyenda .k.a-vac { background: #F4E2B8; } .emp-cal-leyenda .k.p-vac { background: repeating-linear-gradient(135deg, #E9CB85 0 3px, #FBF4E4 3px 6px); }
.emp-cal-leyenda .k.a-per { background: #DCD8F2; } .emp-cal-leyenda .k.p-per { background: repeating-linear-gradient(135deg, #BDB9DE 0 3px, #F2F0FA 3px 6px); }
.emp-cal-leyenda .k.a-med { background: #F9DCDC; } .emp-cal-leyenda .k.a-otr { background: var(--emp-linea); }
.emp-cal-leyenda .k.horas { color: var(--emp-tipo-vip-tx); font-size: 0.72rem; }
.emp-cal-leyenda .k.srv { color: var(--emp-tinta-2); }
.emp-cal-leyenda .k.srv .emp-i { font-size: 0.66rem; }
.emp-cal-leyenda .k.hoy { box-shadow: inset 0 0 0 2px var(--emp-marca); }
/* Horario del cuadrante (RRHH → Horarios, 28/09/2026): las horas en mono arriba a la izquierda;
   el día LIBRE del cuadrante en amarillo pálido, el color del Excel de la oficina (distinto del arena de vacaciones). */
/* El horario en Outfit con cifras de ancho fijo (petición del propietario, 28/09/2026): en mono se leía apretado y pesado. */
.emp-cal-dia .et .hr { font-family: var(--emp-letra); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.66rem; line-height: 1.1; letter-spacing: 0; color: var(--emp-tinta); white-space: normal; }
/* Domingo y festivo van ya en el tinte: la hora, en el oscuro (en blanco no se leía). */
.emp-cal-dia.dom .et .hr { color: var(--emp-marca-osc); }
.emp-cal-dia.hor-libre { background: #FFF1A8; } .emp-cal-dia.hor-libre .n { color: #6B5300; }
.emp-cal-dia.hor-libre .et .hr { color: #6B5300; }
.emp-cal-leyenda .k.hor, .emp-cal-leyenda .k.hor-l { font-family: var(--emp-letra); font-variant-numeric: tabular-nums; font-size: 0.55rem; font-weight: 600; color: var(--emp-tinta); width: 30px; }
.emp-cal-leyenda .k.hor-l { background: #FFF1A8; color: #6B5300; }
.emp-cal-linea { margin: 0 0 10px; font-size: 0.94rem; }
.emp-cal-linea .emp-i { color: var(--emp-marca); width: 18px; text-align: center; }
.emp-cal-conf, .emp-cal-conf .emp-i { color: var(--emp-peligro); }
.emp-cal-srvs { list-style: none; margin: 0 0 12px; padding: 0; }
.emp-cal-srvs li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--emp-linea-suave); }
.emp-cal-srvs li:first-child { border-top: 0; }
.emp-cal-srvs .h { font-weight: 700; font-size: 0.98rem; color: var(--emp-marca-osc); white-space: nowrap; }
.emp-cal-srvs .b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.emp-cal-srvs .tp { font-weight: 600; font-size: 0.9rem; }
.emp-cal-srvs .tp .emp-i { width: 16px; text-align: center; color: var(--emp-apagado); }
.emp-cal-srvs .r { font-size: 0.86rem; color: var(--emp-tinta-2); overflow-wrap: anywhere; }
.emp-cal-srvs .m { grid-column: 2; font-size: 0.74rem; color: var(--emp-apagado); }
.emp-cal-pedir { display: grid; gap: 8px; margin-top: 6px; }
/* Sin esto el display:grid de arriba gana al atributo hidden y los botones de pedir salían también en días pasados. */
.emp-cal-pedir[hidden] { display: none; }
.emp-cal-pedir .emp-btn { justify-content: flex-start; padding: 11px 14px; font-size: 0.92rem; }

/* Cabecera de pantalla con su acción (Peticiones, Calendario): el botón al
   lado del título en escritorio y debajo en el móvil, nunca flotando. */
.emp-cabpag { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.emp-cabpag .emp-h1 { margin-bottom: 0; flex: 1 1 320px; }
.emp-cabpag > .emp-btn { width: auto; flex-shrink: 0; }
@media (max-width: 719px) { .emp-cabpag > .emp-btn { width: 100%; } }

/* Hojas: desde abajo en el móvil (el detalle del día, los tipos) y a
   pantalla completa el formulario. Cabecera clara con título en serif: la
   banda oscura con texto blanco era la del portal anterior. */
body.emp-hoja-abierta { overflow: hidden; }
.emp-hoja { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; justify-content: flex-end; margin: 0;
    background: color-mix(in srgb, var(--emp-tinta) 40%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.emp-hoja[hidden] { display: none; }
.emp-hoja > .emp-hoja-cab, .emp-hoja > .emp-hoja-cuerpo { width: 100%; max-width: 560px; margin: 0 auto; }
.emp-hoja-cab { display: flex; align-items: center; gap: 8px; background: var(--emp-superficie); color: var(--emp-tinta); padding: 14px 10px 10px 20px; border-radius: 24px 24px 0 0; min-height: 60px; position: relative; }
.emp-hoja-cab::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: var(--emp-separador); }
.emp-hoja-cab h2 { flex: 1; margin: 0; font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.15rem; }
.emp-hoja-cab .emp-ico:disabled { opacity: .4; cursor: default; background: transparent; }
.emp-hoja-cuerpo { background: var(--emp-superficie); padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); max-height: 78vh; overflow-y: auto; overscroll-behavior: contain; }
.emp-hoja.visible .emp-hoja-cab, .emp-hoja.visible .emp-hoja-cuerpo { animation: emp-sube .22s var(--emp-ease); }
@keyframes emp-sube { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .emp-hoja.visible .emp-hoja-cab, .emp-hoja.visible .emp-hoja-cuerpo { animation: none; } }
.emp-hoja-full { justify-content: stretch; background: var(--emp-papel); -webkit-backdrop-filter: none; backdrop-filter: none; }
.emp-hoja-full > .emp-hoja-cab { border-radius: 0; max-width: none; background: var(--emp-papel); padding-top: calc(12px + env(safe-area-inset-top)); }
.emp-hoja-full > .emp-hoja-cuerpo { flex: 1; max-height: none; background: transparent; max-width: 640px; }
/* Enviar: una franja fija al pie de la hoja, con su texto, siempre a la vista. */
.emp-hoja-enviar { flex-shrink: 0; width: calc(100% - 32px); max-width: 608px; margin: 0 auto calc(12px + env(safe-area-inset-bottom)); min-height: 52px; }
.emp-hoja-enviar:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.emp-hoja-enviar:disabled:active { transform: none; }
@media (min-width: 1000px) {
    .emp-hoja { justify-content: center; }
    .emp-hoja > .emp-hoja-cab { border-radius: var(--emp-radio) var(--emp-radio) 0 0; }
    .emp-hoja > .emp-hoja-cuerpo { border-radius: 0 0 var(--emp-radio) var(--emp-radio); }
    .emp-hoja-full { background: color-mix(in srgb, var(--emp-tinta) 40%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); justify-content: center; padding: 4vh 0; }
    .emp-hoja-full > .emp-hoja-cab { max-width: 640px; border-radius: var(--emp-radio) var(--emp-radio) 0 0; background: var(--emp-superficie); padding-top: 14px; }
    .emp-hoja-full > .emp-hoja-cuerpo { flex: 0 1 auto; background: var(--emp-superficie); max-height: 74vh; padding-bottom: 12px; }
    .emp-hoja-full .emp-hoja-enviar { width: 640px; max-width: 100%; margin: 0 auto; border-radius: 0 0 var(--emp-radio) var(--emp-radio); box-shadow: none; }
}

/* Hoja de tipos */
.emp-sol-tipos { list-style: none; margin: -6px -8px; padding: 0; }
.emp-sol-tipos li + li { border-top: 1px solid var(--emp-linea-suave); }
.emp-sol-tipo { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 8px; border: 0; background: transparent; font: inherit; color: var(--emp-tinta); text-align: left; cursor: pointer; border-radius: 10px; }
.emp-sol-tipo:hover, .emp-sol-tipo:focus-visible { background: var(--emp-marca-tinte); outline: none; }
.emp-sol-tipo[aria-disabled="true"] { opacity: .6; }
.emp-sol-tx { display: flex; flex-direction: column; min-width: 0; }
.emp-sol-tx strong { font-weight: 600; font-size: 0.98rem; }
.emp-sol-tx small { font-size: 0.8rem; color: var(--emp-apagado); line-height: 1.3; }
.emp-sol-sel { font-size: .86rem; font-weight: 500; color: var(--emp-marca-osc); border: 1px solid color-mix(in srgb, var(--emp-marca) 40%, transparent); border-radius: var(--emp-radio-pildora); padding: 6px 10px; white-space: nowrap; }
.emp-sol-tipo[aria-disabled="true"] .emp-sol-sel { color: var(--emp-apagado); border-color: var(--emp-linea); }
/* En un móvil estrecho «ELEGIR» se comía medio ancho y el texto del tipo iba en cinco renglones: toda la fila
   ya es el botón, así que ahí basta el icono (el rótulo sigue para lectores de pantalla). */
@media (max-width: 420px) { .emp-sol-sel .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .emp-sol-sel:has(i) { padding: 8px 10px; font-size: 1rem; } }
.emp-sol-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; flex-shrink: 0; }
.emp-sol-ico .emp-i { width: 20px; height: 20px; }
.emp-sol-ico.mini { width: 28px; height: 28px; border-radius: 8px; vertical-align: middle; }
.emp-sol-ico.mini .emp-i { width: 16px; height: 16px; }
.emp-sol-ico.t-vac { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); }
.emp-sol-ico.t-per { background: var(--emp-tipo-vip-fondo); color: var(--emp-tipo-vip-tx); }
.emp-sol-ico.t-ap  { background: var(--emp-tipo-exc-fondo); color: var(--emp-tipo-exc-tx); }
.emp-sol-ico.t-dat { background: var(--emp-tipo-lle-fondo); color: var(--emp-tipo-lle-tx); }
.emp-sol-ico.t-cer { background: var(--emp-tipo-dis-fondo); color: var(--emp-tipo-dis-tx); }
.emp-sol-ico.t-otr { background: var(--emp-tipo-otro-fondo); color: var(--emp-tipo-otro-tx); }

/* Formulario de nueva solicitud */
.emp-sol-campos { background: var(--emp-superficie); border-radius: 14px; padding: 16px 16px 6px; box-shadow: var(--emp-sombra); }
.emp-sol-f { margin-bottom: 16px; }
.emp-sol-f[hidden] { display: none; }
.emp-sol-l { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.emp-sol-v { color: var(--emp-tinta-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.emp-sol-cambiar { border: 0; background: none; color: var(--emp-marca-osc); font: inherit; font-size: 0.85rem; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 10px 8px; margin: -10px 0; min-height: 44px; }
/* El lápiz de «pedir un cambio» de Mis datos: 32 px de área táctil, tinte al pasar/enfocar. */
.emp-lapiz { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px 0 -6px 2px; border: 0; border-radius: 8px; background: none; color: var(--emp-marca-osc); font-size: 0.85rem; cursor: pointer; vertical-align: middle; touch-action: manipulation; }
.emp-lapiz:hover, .emp-lapiz:focus-visible { background: var(--emp-marca-tinte); outline: none; }
.emp-lapiz:focus-visible { box-shadow: 0 0 0 3px var(--emp-marca-tinte); }
.emp-sol-info { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); border-radius: 10px; padding: 9px 12px; font-size: 0.88rem; }
.emp-sol-sel-w { position: relative; }
.emp-sol-sel-w select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.emp-sol-sel-w .emp-i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--emp-tinta-2); }
/* Botón que sustituye al <select> nativo (empleado/assets/nf-select.js):
   mismo aspecto que .emp-input, alineado a la izquierda, con la opción vacía
   en gris (como un placeholder) y la lista reutiliza .emp-opciones/-opt de
   la guía — ahí NO va azul de sistema, va el tinte de la casa. */
.nf-select-btn { display: flex; align-items: center; width: 100%; text-align: left; cursor: pointer; }
.nf-select-btn span.vacio { color: var(--emp-apagado); }
.nf-select-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.nf-select-btn[aria-expanded="true"] { border-color: var(--emp-marca); box-shadow: 0 0 0 3px var(--emp-marca-tinte); }
/* El ancho lo pone el JS (el de su botón). Nada de min-width: 100%: la lista es FIXED y ese 100 % es la
   pantalla entera — así salía la lista estirada hasta el borde derecho (27/09/2026). */
.emp-opciones[role="listbox"] { min-width: 0; max-width: none; }
/* En el móvil una opción larga («Accidente, enfermedad grave u hospitalización…») se PARTE en dos
   renglones en vez de cortarse con puntos: un motivo a medias no se puede elegir con seguridad. */
.emp-opciones[role="listbox"] .emp-opcion { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; padding: 9px 10px; }
.emp-sol-sel-w .nf-select-btn { padding-right: 42px; }
.emp-opciones[role="listbox"] .emp-opcion[aria-selected="true"] { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); font-weight: 600; }

/* Mi jornada (empleado/fichaje.php): el botón grande de fichar. */
.emp-fic-btn { font-size: 1.05rem; padding: 16px 18px; }
.emp-fic-fin { background: var(--emp-peligro); border-color: var(--emp-peligro); }
.emp-fic-fin:hover, .emp-fic-fin:focus-visible { background: #B42318; border-color: #B42318; }

.emp-sol-campo { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 0 0 14px; border: 1px solid var(--emp-linea); border-radius: 12px; background: var(--emp-superficie); font: inherit; font-size: 16px; color: var(--emp-tinta); text-align: left; cursor: pointer; overflow: hidden; }
.emp-sol-campo > span { flex: 1; min-width: 0; padding: 12px 0; }
.emp-sol-campo:disabled { cursor: default; background: var(--emp-superficie-2); color: var(--emp-tinta); }
.emp-sol-campo > span.vacio { color: #8A97A3; }
/* El icono es un <svg>: no se estira como el <i> de antes (con alto
   automático un svg mide 150px), así que lleva el alto del campo (50px menos
   los bordes) y el dibujo se queda en 20px centrado por el relleno. */
.emp-sol-campo > .emp-i { align-self: center; box-sizing: content-box; width: 20px; height: 48px; padding: 0 14px; background: var(--emp-superficie-3); color: var(--emp-tinta-2); border-left: 1px solid var(--emp-linea); border-radius: 0 11px 11px 0; flex-shrink: 0; }
.emp-sol-campo:focus-visible, .emp-sol-file:focus-within { outline: none; border-color: var(--emp-marca); box-shadow: 0 0 0 3px var(--emp-marca-tinte); }
.emp-sol-file { position: relative; }
.emp-sol-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.emp-sol-horas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.emp-sol-horas .emp-input { width: 100%; min-width: 0; }  /* un input de hora tiene ancho mínimo propio: a 320 px el de «Hasta» se salía */
.emp-sol-f .emp-input.mal, .emp-sol-campo.mal { border-color: var(--emp-peligro); box-shadow: 0 0 0 3px var(--emp-peligro-tinte); }
.emp-sol-f textarea.emp-input { resize: vertical; min-height: 84px; }
.emp-sol-err { background: var(--emp-peligro-tinte); color: var(--emp-peligro); border-radius: 10px; padding: 10px 12px; font-size: 0.9rem; margin-bottom: 14px; }
.emp-sol-err small { color: var(--emp-tinta-2); }

/* Selector de rango de fechas (a pantalla completa) */
.emp-rango > .emp-hoja-cab h2 { text-align: left; }
.emp-rango-dow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--emp-superficie); color: var(--emp-apagado); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; text-align: center; padding: 8px 12px; border-bottom: 1px solid var(--emp-linea-suave); }
.emp-rango > .emp-hoja-cuerpo { background: var(--emp-superficie); padding: 0 12px 90px; max-width: 640px; }
.emp-rango-mes h3 { text-align: left; font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.05rem; color: var(--emp-tinta); margin: 20px 6px 8px; text-transform: capitalize; }
.emp-rango-g { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.emp-rango-g button { height: 44px; border: 0; background: transparent; font: inherit; font-size: 0.98rem; color: var(--emp-tinta); cursor: pointer; position: relative; }
.emp-rango-g button:disabled { color: color-mix(in srgb, var(--emp-apagado) 45%, transparent); cursor: default; }
.emp-rango-g button.hoy { font-weight: 700; color: var(--emp-marca-osc); text-decoration: underline; text-underline-offset: 4px; }
.emp-rango-g button.ocup::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: var(--emp-tipo-vip-tx); }
.emp-rango-g button.sel-en { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); }
.emp-rango-g button.sel-ini, .emp-rango-g button.sel-fin { background: var(--emp-marca-osc); color: #fff; }
.emp-rango-g button.sel-ini { border-radius: 22px 0 0 22px; }
.emp-rango-g button.sel-fin { border-radius: 0 22px 22px 0; }
.emp-rango-g button.sel-uno { border-radius: 22px; }
.emp-rango-g button:focus-visible { outline: 2px solid var(--emp-marca-osc); outline-offset: -2px; border-radius: 10px; }
.emp-rango-pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; background: var(--emp-superficie); border-top: 1px solid var(--emp-linea); padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); font-size: 0.92rem; text-align: center; }
.emp-rango-pie .mal { display: block; margin-top: 4px; color: var(--emp-peligro); font-weight: 600; font-size: 0.86rem; }
@media (min-width: 1000px) {
    .emp-rango > .emp-hoja-cuerpo { flex: 1 1 auto; max-height: 64vh; border-radius: 0; padding-bottom: 20px; }
    .emp-rango-dow { max-width: 640px; width: 100%; margin: 0 auto; }
    .emp-rango-pie { position: static; max-width: 640px; width: 100%; margin: 0 auto; border-radius: 0 0 16px 16px; }
}

/* Mis solicitudes */
.emp-sol-lista { list-style: none; margin: 0; padding: 0; }
.emp-sol-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; border-top: 1px solid var(--emp-linea-suave); }
.emp-sol-item:first-child { border-top: 0; }
.emp-sol-item .emp-sol-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; flex-shrink: 0; }
.emp-sol-ico .emp-i { width: 20px; height: 20px; }
.emp-sol-item .b { min-width: 0; }
.emp-sol-item .t { font-weight: 600; }
.emp-sol-item .t .m { font-weight: 500; color: var(--emp-tinta-2); }
.emp-sol-item .f { font-size: 0.88rem; margin-top: 2px; }
.emp-sol-item .n { font-size: 0.86rem; background: var(--emp-superficie-2); border-radius: 8px; padding: 6px 10px; margin-top: 6px; overflow-wrap: anywhere; }
.emp-sol-item .n.res { background: var(--emp-marca-tinte); }
.emp-sol-item .meta { font-size: 0.76rem; color: var(--emp-apagado); margin-top: 6px; }
.emp-sol-item form { grid-column: 2; }
.emp-sol-retirar { width: auto; padding: 7px 12px; font-size: 0.84rem; margin-top: 8px; }
.emp-sol-item.est-cancelada, .emp-sol-item.est-rechazada { opacity: .85; }

/* ── Mis datos (27/09/2026, propuesta A): lista agrupada como los ajustes
   de un móvil. Fila con flecha = se pide cambiada (pulsable entera); fila
   con candado = la lleva RRHH. La ventana de un dato es una .emp-hoja. ── */
.emp-dat { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px 16px; align-items: start; }
.emp-dat-g h2 { font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.12rem; color: var(--emp-tinta); margin: 0 0 6px 4px; display: flex; align-items: center; gap: 7px; }
.emp-dat-l { list-style: none; margin: 0; padding: 0; background: var(--emp-superficie); border: 1px solid var(--emp-linea); border-radius: 14px; overflow: hidden; }
.emp-dat-l li + li { border-top: 1px solid var(--emp-linea-suave); }
.emp-dat-f { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'k add ico' 'v add ico' 'p add ico'; align-items: center; column-gap: 0; row-gap: 1px; width: 100%; min-height: 58px; padding: 10px 14px 10px 16px; border: 0; background: transparent; font: inherit; color: var(--emp-tinta); text-align: left; }
.emp-dat-f .k { grid-area: k; font-size: 0.78rem; font-weight: 500; color: var(--emp-apagado); }
.emp-dat-f .v { grid-area: v; font-weight: 600; font-size: 0.96rem; overflow-wrap: anywhere; min-width: 0; }
.emp-dat-f .v.mono { font-family: var(--emp-cifras); font-size: 0.9rem; font-weight: 500; }
.emp-dat-f .v.vacio { color: var(--emp-apagado); font-weight: 500; font-style: italic; }
.emp-dat-ico { grid-area: ico; color: var(--emp-apagado); font-size: 0.78rem; margin-left: 12px; }
.emp-dat-f.ro .emp-dat-ico { opacity: .55; font-size: 0.7rem; }
.emp-dat-f.ed { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.emp-dat-f.ed .emp-dat-ico { color: var(--emp-marca); font-size: 0.9rem; }
.emp-dat-f.ed:active { background: var(--emp-marca-tinte); }
@media (hover: hover) and (pointer: fine) { .emp-dat-f.ed:hover { background: var(--emp-marca-tinte); } }
.emp-dat-f.ed:focus-visible { outline: 3px solid color-mix(in srgb, var(--emp-marca) 35%, transparent); outline-offset: -3px; }
.emp-dat-add { grid-area: add; margin-left: 12px; font-size: 0.82rem; font-weight: 600; color: var(--emp-marca-osc); }
.emp-dat-pend { grid-area: p; margin-top: 4px; font-size: 0.82rem; color: var(--emp-tinta-2); }
.emp-dat-pend .emp-est { margin-left: 0; }
.emp-dat-pend .n .mono { font-family: var(--emp-cifras); }
.emp-dat-f.pend .emp-dat-ico { color: var(--emp-aviso-fuerte); }
.emp-dat-cad { grid-area: p; font-size: 0.8rem; font-weight: 600; margin-top: 2px; }
.emp-dat-f.doc-caducado .v, .emp-dat-f.doc-caducado .emp-dat-cad { color: var(--emp-peligro); }
.emp-dat-f.doc-pronto .v, .emp-dat-f.doc-pronto .emp-dat-cad { color: var(--emp-aviso-fuerte); }
.emp-dat-pie { font-size: 0.8rem; color: var(--emp-apagado); margin: 7px 4px 0; }
/* La ventana */
#datHoja .emp-hoja-cuerpo { display: flex; flex-direction: column; gap: 14px; }
.emp-dat-ahora { margin: 0; font-size: 0.88rem; color: var(--emp-tinta-2); background: var(--emp-papel); border-radius: 10px; padding: 9px 12px; overflow-wrap: anywhere; }
.emp-dat-ahora span, .emp-dat-vista span { color: var(--emp-apagado); font-weight: 600; }
.emp-dat-ed .emp-input.mal, .emp-dat-dom .emp-input.mal { border-color: var(--emp-peligro); box-shadow: 0 0 0 3px var(--emp-peligro-tinte); }
#datEml { text-transform: none; }
.emp-dat-est { font-size: 0.84rem; color: var(--emp-apagado); margin-top: 6px; min-height: 1.3em; }
.emp-dat-est.ok { color: var(--emp-ok, color-mix(in srgb, var(--emp-ok) 80%, #000)); font-weight: 600; }
.emp-dat-est.mal { color: var(--emp-peligro); font-weight: 600; }
.emp-dat-dom { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 10px; }
.emp-dat-dom .c-via { grid-column: span 4; } .emp-dat-dom .c-num { grid-column: span 2; }
.emp-dat-dom .c-piso, .emp-dat-dom .c-puerta { grid-column: span 3; }
.emp-dat-dom .c-cp { grid-column: span 2; } .emp-dat-dom .c-mun { grid-column: span 4; }
@media (max-width: 380px) { .emp-dat-dom .c-via, .emp-dat-dom .c-mun { grid-column: 1 / -1; } .emp-dat-dom .c-num, .emp-dat-dom .c-cp { grid-column: span 3; } }
.emp-dat-vista { margin: 10px 0 0; font-size: 0.86rem; background: var(--emp-marca-tinte); color: var(--emp-marca-osc); border-radius: 10px; padding: 9px 12px; overflow-wrap: anywhere; }
.emp-dat-vista span { color: var(--emp-marca-osc); }
.emp-dat-nota textarea { resize: vertical; min-height: 60px; }
#datHoja .emp-sol-err { margin: 0; }
.emp-dat-rrhh { margin: 0; font-size: 0.82rem; }
.emp-dat-enviar:disabled { opacity: .5; cursor: not-allowed; }

/* Mi jornada: el aviso de que se guarda la ubicación al fichar (28/09/2026) */
.emp-fic-geo-nota { display: flex; gap: 8px; align-items: flex-start; margin: 0 2px 16px; font-size: 0.84rem; }
.emp-fic-geo-nota .emp-i { color: var(--emp-marca-osc); margin-top: 2px; }

/* El check que se dibuja al fichar (entrada o salida registrada). */
.emp-ft-ok svg { width: 110px; height: 110px; }
.emp-ft-ok circle { fill: none; stroke: var(--emp-ok); stroke-width: 8; stroke-dasharray: 330; stroke-dashoffset: 330; animation: emp-ft-trazo .45s ease-out forwards; }
.emp-ft-ok path { fill: none; stroke: var(--emp-ok); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: emp-ft-trazo .3s .35s ease-out forwards; }
@keyframes emp-ft-trazo { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .emp-ft-ok circle, .emp-ft-ok path { animation: none; stroke-dashoffset: 0; } }
.emp-fic-dif { font-weight: 600; } .emp-fic-dif.mas { color: var(--emp-ok); } .emp-fic-dif.menos { color: var(--emp-peligro); }
/* CAPA DE CARGA (data-emp-carga): para las pantallas que el servidor tarda
   en calcular, sobre todo Mis variables. Aparece al pulsar el enlace y la
   quita la página nueva al llegar. */
.emp-carga{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:color-mix(in srgb, var(--emp-marca-osc) 49%, transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:empCargaEntra .18s ease-out;}
.emp-carga[hidden]{display:none;}
.emp-carga-caja{display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--emp-superficie);border-radius:16px;padding:26px 30px;box-shadow:0 12px 40px color-mix(in srgb, var(--emp-marca-osc) 25%, transparent);max-width:calc(100vw - 32px);text-align:center;}
.emp-carga-txt{font-weight:600;color:var(--emp-tinta,var(--emp-tinta));font-size:15px;}
.emp-carga-rosco{width:44px;height:44px;border-radius:50%;border:4px solid var(--emp-marca-tinte);border-top-color:var(--emp-marca);animation:empRosco .8s linear infinite;flex:none;}
.emp-carga-rosco.peq{width:14px;height:14px;border-width:2px;display:inline-block;vertical-align:-2px;margin-right:6px;}
.emp-carga-linea{display:flex;align-items:center;}
@keyframes empRosco{to{transform:rotate(360deg);}}
@keyframes empCargaEntra{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion: reduce){.emp-carga-rosco{animation-duration:2.4s;}.emp-carga{animation:none;}}
.emp-carga-sub{font-size:13px;color:var(--emp-apagado,#4A5866);margin-top:-8px;}

/* Ausencia sin fichar (28/09/2026): día con horario y sin fichaje ni ausencia. Tinte rojo + borde, y el número en rojo. */
.emp-cal .emp-cal-dia.sinfic { background: var(--emp-peligro-tinte); box-shadow: inset 0 0 0 2px var(--emp-peligro); }
.emp-cal .emp-cal-dia.sinfic .n, .emp-cal .emp-cal-dia.sinfic .et .hr { color: #A32A2A; }
.emp-cal-leyenda .k.sinfic { background: var(--emp-peligro-tinte); box-shadow: inset 0 0 0 2px var(--emp-peligro); }
.emp-cal-sinfic { background: var(--emp-peligro-tinte); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.emp-cal-sinfic p { margin: 0 0 6px; color: #8E2424; }
.emp-cal-sinfic .emp-hint { color: #5F3A3A; }
.emp-cal-sinfic .emp-btn { margin-top: 6px; }

/* ───────── Evolución: comunicaciones, formación y certificados (docs/PORTAL-EMPLEADO-EVOLUCION.md) ───────── */
.emp-com { list-style: none; margin: 0; padding: 0; }
.emp-com li + li { border-top: 1px solid var(--emp-linea-suave); }
.emp-com a { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'ico t f' 'ico x f'; column-gap: 12px; row-gap: 2px; padding: 13px 18px; color: var(--emp-tinta); text-decoration: none; align-items: center; }
.emp-com .ico { grid-area: ico; width: 38px; height: 38px; border-radius: 10px; background: var(--emp-superficie-3); color: var(--emp-apagado); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.emp-com li.nuevo .ico { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); }
.emp-com .t { grid-area: t; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.emp-com li.nuevo .t { color: var(--emp-marca-osc); }
.emp-com .x { grid-area: x; font-size: 0.82rem; color: var(--emp-apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-com .f { grid-area: f; font-family: var(--emp-cifras); font-size: 0.74rem; color: var(--emp-apagado); text-align: right; line-height: 1.3; }
.emp-com .f b { display: block; color: var(--emp-aviso-fuerte); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .emp-com a:hover { background: var(--emp-marca-tinte); } }
.emp-com a:focus-visible { outline: 2px solid var(--emp-marca); outline-offset: -2px; }
.emp-com-tit { font-size: 1.25rem; margin: 0 0 8px; }
@media (max-width: 999px) { .emp-com-tit { font-size: 1.15rem; position: static; width: auto; height: auto; clip: auto; margin: 0 0 8px; } }
.emp-com-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 0.82rem; color: var(--emp-apagado); margin: 0 0 14px; }
.emp-com-meta .emp-i { margin-right: 4px; }
.emp-com-cuerpo { font-size: 1rem; line-height: 1.6; max-width: 70ch; overflow-wrap: anywhere; }
.emp-com-cuerpo p { margin: 0 0 1em; } .emp-com-cuerpo h2 { font-size: 1.05rem; margin: 1.2em 0 0.4em; } .emp-com-cuerpo ul { padding-left: 20px; margin: 0 0 1em; }
.emp-com-h2 { font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.12rem; color: var(--emp-tinta); margin: 18px 0 8px; }
.emp-adj { display: flex; flex-wrap: wrap; gap: 8px; }
.emp-adj a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--emp-linea); border-radius: 10px; background: var(--emp-superficie); text-decoration: none; color: var(--emp-tinta); font-size: 0.86rem; font-weight: 500; min-height: 44px; }
.emp-adj a .emp-i { color: var(--emp-peligro); } .emp-adj a small { color: var(--emp-apagado); font-family: var(--emp-cifras); font-size: 0.72rem; }
.emp-leida { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--emp-ok); font-weight: 600; }
.emp-sec-h2 { font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.12rem; color: var(--emp-tinta); margin: 0 0 8px; }
.emp-sec-h2 .mono { color: var(--emp-marca-osc); }
.emp-for { display: grid; gap: 12px; margin-bottom: 20px; }
.emp-for-card { background: var(--emp-superficie); border: 1px solid var(--emp-linea); border-radius: var(--emp-radio); box-shadow: var(--emp-sombra); display: grid; grid-template-columns: auto 1fr auto; gap: 14px; padding: 14px 16px; align-items: center; text-decoration: none; color: var(--emp-tinta); }
.emp-body a.emp-for-card { color: var(--emp-tinta); }
.emp-for-card .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--emp-marca-tinte); color: var(--emp-marca-osc); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.emp-for-card .t { font-weight: 700; font-size: 1rem; }
.emp-for-card .s { font-size: 0.8rem; color: var(--emp-apagado); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.emp-for-card .prog { display: block; margin-top: 8px; max-width: 320px; }
.emp-for-card .ir { color: var(--emp-apagado); }
.emp-for-card:focus-visible { outline: 2px solid var(--emp-marca); outline-offset: 2px; }
.emp-prog { height: 8px; background: var(--emp-superficie-3); border-radius: 99px; overflow: hidden; min-width: 70px; }
.emp-prog i { display: block; height: 100%; background: var(--emp-marca); border-radius: 99px; }
.emp-prog.ok i { background: var(--emp-ok); } .emp-prog.bad i { background: var(--emp-peligro); }
.emp-est-muted { background: var(--emp-superficie-3); color: var(--emp-apagado); } .emp-est-info { background: var(--emp-info-tinte); color: var(--emp-info); } .emp-est-primary { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); }
.emp-est-ok { background: var(--emp-ok-tinte); color: var(--emp-ok); } .emp-est-danger { background: var(--emp-peligro-tinte); color: var(--emp-peligro); } .emp-est-warn { background: var(--emp-aviso-tinte); color: var(--emp-aviso-fuerte); }
.emp-lec { list-style: none; margin: 0; padding: 0; }
.emp-lec li + li { border-top: 1px solid var(--emp-linea-suave); }
.emp-lec a { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; text-decoration: none; color: var(--emp-tinta); min-height: 54px; }
.emp-lec .n { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--emp-linea); display: inline-flex; align-items: center; justify-content: center; font-family: var(--emp-cifras); font-size: 0.78rem; font-weight: 600; color: var(--emp-apagado); }
.emp-lec li.hecha .n { background: var(--emp-ok); border-color: var(--emp-ok); color: #fff; }
.emp-lec li.actual .n { border-color: var(--emp-marca); color: var(--emp-marca-osc); }
.emp-lec li.actual a { background: var(--emp-marca-tinte); }
.emp-lec li.cerrada a { opacity: 0.55; }
.emp-lec .t { font-weight: 600; } .emp-lec .m { font-size: 0.78rem; color: var(--emp-apagado); } .emp-lec .ir { color: var(--emp-apagado); font-size: 0.85rem; }
.emp-anillo { --p: 0; width: 78px; height: 78px; border-radius: 50%; background: conic-gradient(var(--emp-marca) calc(var(--p) * 1%), var(--emp-superficie-3) 0); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.emp-anillo.ok { background: conic-gradient(var(--emp-ok) calc(var(--p) * 1%), var(--emp-superficie-3) 0); }
.emp-anillo.bad { background: conic-gradient(var(--emp-peligro) calc(var(--p) * 1%), var(--emp-superficie-3) 0); }
.emp-anillo b { width: 60px; height: 60px; border-radius: 50%; background: var(--emp-superficie); display: inline-flex; align-items: center; justify-content: center; font-family: var(--emp-cifras); font-weight: 600; font-size: 0.95rem; }
.emp-cur-cab { display: flex; gap: 16px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--emp-linea); }
.emp-cur-cab .t { font-weight: 700; font-size: 1.05rem; } .emp-cur-cab .s { font-size: 0.82rem; color: var(--emp-apagado); margin-top: 2px; }
.emp-leccion { font-size: 1rem; line-height: 1.65; max-width: 72ch; overflow-wrap: anywhere; }
.emp-leccion h2 { font-size: 1.05rem; margin: 1.3em 0 0.4em; } .emp-leccion p { margin: 0 0 1em; } .emp-leccion ul { padding-left: 20px; margin: 0 0 1em; }
.emp-leccion figure { margin: 14px 0; }
.emp-leccion figure img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.emp-leccion .video { position: relative; border-radius: 12px; overflow: hidden; background: var(--emp-tinta); aspect-ratio: 16 / 9; }
.emp-leccion .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.emp-leccion figcaption { font-size: 0.78rem; color: var(--emp-apagado); margin-top: 6px; }
.emp-lec-nav { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 18px; }
.emp-preg { border: 1px solid var(--emp-linea); border-radius: 12px; padding: 14px 16px; margin: 0 0 12px; background: var(--emp-superficie); min-width: 0; }
.emp-preg legend, .emp-preg .q { font-weight: 600; margin-bottom: 8px; padding: 0; float: left; width: 100%; }
.emp-preg .q small, .emp-preg legend small { display: block; color: var(--emp-apagado); font-weight: 500; font-size: 0.78rem; }
.emp-preg label { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--emp-linea-suave); margin-bottom: 6px; cursor: pointer; min-height: 44px; clear: both; }
.emp-preg label:has(input:checked) { background: var(--emp-marca-tinte); border-color: var(--emp-marca); }
.emp-preg label.ok { background: var(--emp-ok-tinte); border-color: #BFE3CF; } .emp-preg label.mal { background: var(--emp-peligro-tinte); border-color: #F5C6C6; }
.emp-preg input { width: 18px; height: 18px; accent-color: var(--emp-marca); flex: none; }
.emp-preg label:focus-within { outline: 2px solid var(--emp-marca); outline-offset: 1px; }
.emp-res { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.emp-cert { border: 1px solid var(--emp-linea); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: var(--emp-superficie); }
.emp-cert .ico { width: 42px; height: 42px; border-radius: 10px; background: var(--emp-aviso-tinte); color: var(--emp-aviso-fuerte); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.emp-cert .ico.hist { background: var(--emp-superficie-3); color: var(--emp-apagado); }
.emp-cert .t { font-weight: 600; } .emp-cert .m { font-size: 0.8rem; color: var(--emp-apagado); }
.emp-tabla-movil { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.emp-tabla-movil th { text-align: left; font-size: 0.7rem; color: var(--emp-apagado); padding: 10px 14px; border-bottom: 2px solid var(--emp-linea); }
.emp-tabla-movil td { padding: 10px 14px; border-bottom: 1px solid var(--emp-linea-suave); vertical-align: middle; }
@media (max-width: 999px) {
  .emp-com a { padding: 12px 12px; } .emp-com .x { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .emp-for-card { grid-template-columns: auto 1fr; padding: 12px; } .emp-for-card .ir { display: none; }
  .emp-cur-cab { padding: 14px; }
  .emp-cert { grid-template-columns: auto 1fr; } .emp-cert > a, .emp-cert > button { grid-column: 1 / -1; }
  .emp-tabla-movil thead { display: none; }
  .emp-tabla-movil tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid var(--emp-linea-suave); }
  .emp-tabla-movil tbody td { padding: 2px 0; border: 0; }
  .emp-tabla-movil tbody td:first-child { grid-column: 1 / -1; font-weight: 600; }
}

/* Registro de jornada en la PORTADA (solo quien teletrabaja): la misma pieza
   que «Mi jornada», más compacta, y siempre la primera tarjeta. */

/* Vista de administrador (vista.php): la banda que sale en TODAS las
   pantallas mientras se mira el portal de otra persona, y la lista para elegirla. */
.emp-vista { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; padding: 10px 18px; background: var(--emp-aviso-tinte); color: var(--emp-aviso-fuerte); border-bottom: 1px solid rgba(138, 95, 0, .25); font-size: 0.9rem; position: sticky; top: 0; z-index: 30; }
.emp-vista > .emp-i { font-size: 1rem; }
.emp-vista-t { flex: 1 1 260px; min-width: 0; }
.emp-vista-acc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.emp-vista-acc a { color: var(--emp-aviso-fuerte); font-weight: 600; }
.emp-vista-acc form { margin: 0; }
.emp-vista-acc button { font: inherit; font-weight: 700; border: 0; border-radius: 99px; padding: 7px 14px; background: var(--emp-aviso-fuerte); color: #fff; cursor: pointer; }
.emp-vista-acc button:focus-visible { outline: 3px solid var(--emp-marca-tinte); outline-offset: 2px; }
.emp-vista-lista button { display: grid; grid-template-columns: 26px 1fr auto; grid-template-areas: 'ico t ir' 'ico m ir'; align-items: center; column-gap: 12px; width: 100%; padding: 12px 18px; min-height: 56px; border: 0; background: none; font: inherit; color: var(--emp-tinta); text-align: left; cursor: pointer; }
.emp-vista-lista button:hover, .emp-vista-lista button:focus-visible { background: var(--emp-marca-tinte); outline: none; }
.emp-vista-lista button[aria-current] { background: var(--emp-aviso-tinte); }
.emp-vista-lista button > .emp-i:first-child { grid-area: ico; font-size: 1.1rem; color: var(--emp-marca); text-align: center; }
.emp-vista-lista li[hidden] { display: none; }
.emp-vista-abr { font-family: var(--emp-cifras); font-size: 0.78rem; font-weight: 500; color: var(--emp-apagado); }
@media (max-width: 999px) { .emp-vista { position: static; padding: 10px 14px; } }

/* Visor de documentos (assets/visor.js): los PDF y las fotos se abren ENCIMA
   del portal con una barra que siempre deja volver. Con el portal instalado
   como aplicación no hay barra del navegador, y un PDF abierto a pelo dejaba
   a la persona sin salida. */
body.emp-visor-abierto { overflow: hidden; }
.emp-visor { position: fixed; inset: 0; z-index: 2100; display: flex; flex-direction: column; background: var(--emp-superficie-3); }
.emp-visor[hidden] { display: none; }
.emp-visor-barra { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 8px calc(10px + env(safe-area-inset-left)); background: var(--emp-marca-osc); color: #fff; box-shadow: 0 2px 10px color-mix(in srgb, var(--emp-marca-osc) 25%, transparent); }
.emp-visor-cerrar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border: 0; border-radius: 12px; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-weight: 600; cursor: pointer; flex: none; }
.emp-visor-cerrar .emp-i { font-size: 1.05rem; }
.emp-visor-tit { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-visor-zoom { display: inline-flex; gap: 4px; flex: none; }
.emp-visor-zoom[hidden] { display: none; }
.emp-visor-ico { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: #fff; font-size: 1.05rem; cursor: pointer; flex: none; }
.emp-visor-ico[hidden] { display: none; }
.emp-visor-cerrar:hover, .emp-visor-ico:hover, .emp-visor-cerrar:focus-visible, .emp-visor-ico:focus-visible { background: rgba(255,255,255,.26); outline: none; }
.emp-visor-cuerpo { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); outline: none; }
.emp-visor-hojas { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: min-content; }
.emp-visor-hoja { display: block; background: var(--emp-superficie); box-shadow: 0 2px 10px color-mix(in srgb, var(--emp-marca-osc) 20%, transparent); border-radius: 2px; }
.emp-visor-img { display: block; max-width: 100%; margin: 0 auto; border-radius: 8px; background: var(--emp-superficie); }
.emp-visor-txt { margin: 0 auto; max-width: 900px; padding: 16px; background: var(--emp-superficie); border-radius: 12px; white-space: pre-wrap; font-family: var(--emp-cifras); font-size: 0.85rem; }
.emp-visor-marco { display: block; width: 100%; height: calc(100% - 64px); min-height: 60vh; border: 0; background: var(--emp-superficie); border-radius: 8px; }
.emp-visor-pie { display: flex; justify-content: center; padding-top: 12px; }
.emp-visor-msg { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 420px; margin: 12vh auto 0; padding: 26px 24px; background: var(--emp-superficie); border-radius: 16px; text-align: center; color: var(--emp-tinta); box-shadow: 0 8px 30px color-mix(in srgb, var(--emp-marca-osc) 14%, transparent); }
.emp-visor-msg p { margin: 0; }

/* ── SEGURO DE SALUD (seguro.php, 30/09/2026). Todo en una columna, pensado
   para el móvil: la tarjeta de «lo paga la empresa» primero (es el argumento
   que suele pasar desapercibido), la calculadora, y el resultado como una
   cuenta de tres líneas más el descuento por nómina en grande. ── */
.emp-seg-grid { display: grid; gap: 14px; }
.emp-seg-grid .emp-bloque { margin: 0; }
.emp-seg-empresa { background: var(--emp-marca-tinte); border-color: var(--emp-marca); }
.emp-seg-empresa .emp-bloque-cuerpo { display: flex; align-items: center; gap: 16px; }
.emp-seg-empresa-n { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--emp-marca-osc); letter-spacing: -0.02em; white-space: nowrap; }
.emp-seg-empresa-t { font-size: 0.92rem; line-height: 1.35; color: var(--emp-tinta); }
.emp-seg-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
@media (max-width: 360px) { .emp-seg-2col { grid-template-columns: 1fr; } }
.emp-seg-famrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 44px; gap: 8px; align-items: center; margin-bottom: 8px; }
.emp-seg-famrow .emp-input { padding: 10px 12px; }
.emp-seg-famrow .emp-ico, .emp-seg-fam-cab .emp-ico { color: var(--emp-peligro); }
.emp-seg-fam { border: 1px solid var(--emp-linea); border-radius: 14px; padding: 12px 14px 14px; margin: 0 0 10px; background: var(--emp-superficie-2); }
.emp-seg-fam-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.emp-seg-fam-t { font-size: .86rem; font-weight: 500; color: var(--emp-apagado); }
.emp-seg-res { position: relative; transition: opacity .18s ease; }
.emp-seg-esperando .emp-seg-res, .emp-seg-esperando { opacity: .55; }
.emp-seg-personas { list-style: none; margin: 0; padding: 0; }
.emp-seg-personas li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--emp-linea-suave); }
.emp-seg-personas li:last-child { border-bottom: 0; }
.emp-seg-p-rot { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.emp-seg-p-rot small { font-weight: 500; color: var(--emp-apagado); display: block; font-size: 0.8rem; }
.emp-seg-p-prima { font-weight: 600; white-space: nowrap; }
.emp-seg-p-prima small { font-family: var(--emp-letra); font-weight: 500; color: var(--emp-apagado); font-size: 0.78rem; }
.emp-seg-p-falta { font-size: 0.82rem; color: var(--emp-apagado); text-align: right; }
.emp-seg-p-sin { font-size: 0.82rem; font-weight: 600; color: var(--emp-aviso-fuerte); text-align: right; }
.emp-seg-sin { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--emp-aviso-tinte); color: #5F3A00; font-size: 0.9rem; line-height: 1.4; }
.emp-seg-sin .emp-i { margin-top: 3px; color: var(--emp-aviso-fuerte); }
.emp-seg-sin a { color: var(--emp-aviso-fuerte); font-weight: 700; font-family: var(--emp-cifras); }
.emp-seg-total { margin: 12px 0 0; border-radius: 14px; border: 1px solid var(--emp-linea); overflow: hidden; }
.emp-seg-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; font-size: 0.92rem; border-bottom: 1px solid var(--emp-linea-suave); }
.emp-seg-fila strong { font-weight: 600; white-space: nowrap; }
.emp-seg-emp { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); }
.emp-seg-emp .emp-i { margin-right: 4px; }
.emp-seg-tu { font-weight: 600; }
.emp-seg-mio { border-color: var(--emp-ok, color-mix(in srgb, var(--emp-ok) 80%, #000)); margin-bottom: 14px; }
.emp-seg-yo { font-weight: 500; color: var(--emp-apagado); font-size: 0.8rem; }
.emp-seg-mes { font-family: var(--emp-letra); font-weight: 500; color: var(--emp-apagado); font-size: 0.78rem; }
.emp-seg-nomina { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--emp-ok-tinte); }
.emp-seg-nomina-n { font-size: 1.8rem; font-weight: 800; color: var(--emp-ok, color-mix(in srgb, var(--emp-ok) 80%, #000)); line-height: 1; white-space: nowrap; }
.emp-seg-nomina-t { font-size: 0.9rem; line-height: 1.3; }
.emp-seg-nomina-t small { color: var(--emp-apagado); }
.emp-seg-como { margin-top: 10px; font-size: 0.85rem; color: var(--emp-tinta-2); }
.emp-seg-como summary { cursor: pointer; font-weight: 600; color: var(--emp-marca-osc); }
.emp-seg-como ul { margin: 8px 0 0; padding-left: 18px; }
.emp-seg-como li { margin: 4px 0; }
.emp-seg-orient { margin: 10px 0 0; }
.emp-seg-texto p { margin: 0 0 8px; }
.emp-seg-lista { margin: 0; padding-left: 0; list-style: none; }
.emp-seg-lista li { position: relative; padding: 6px 0 6px 26px; border-bottom: 1px solid var(--emp-linea-suave); font-size: 0.92rem; }
.emp-seg-lista li:last-child { border-bottom: 0; }
.emp-seg-lista li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 2px; top: 7px; color: var(--emp-ok, color-mix(in srgb, var(--emp-ok) 80%, #000)); font-size: 0.8rem; }
.emp-seg-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px; border: 1px solid var(--emp-linea); border-radius: 12px; font-size: 0.88rem; line-height: 1.4; cursor: pointer; }
.emp-seg-consent input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--emp-marca); }
.emp-seg-consent.mal { border-color: var(--emp-peligro); box-shadow: 0 0 0 3px var(--emp-peligro-tinte); }
.emp-seg-form { display: grid; gap: 14px; }
.emp-seg-form .emp-bloque { margin: 0; }
.emp-seg-resumen .emp-seg-p-rot small { display: block; }
.emp-seg-estado { margin-bottom: 14px; }
/* Alta de un familiar (30/09/2026): el botón en «Tu seguro» y la línea de cuánto pasa a costar la prima de la familia. */
.emp-seg-anadir-fam { margin-top: 12px; }
.emp-seg-pasa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: var(--emp-marca-tinte); color: var(--emp-marca-osc); font-size: 0.92rem; }
.emp-seg-pasa strong { font-weight: 700; color: var(--emp-tinta); }
#segFam.mal { outline: 2px solid var(--emp-peligro); outline-offset: 4px; border-radius: 14px; }
.emp-seg-estado .emp-bloque-cab .emp-est { margin-left: 8px; }

/* ── El mes de un vistazo en la portada (A1, 30/09/2026) ──────────────── */
.emp-mini-card .emp-bloque-cab { display: flex; align-items: center; gap: 8px; }
.emp-mini-ver { margin-left: auto; font-size: 0.8rem; font-weight: 600; color: var(--emp-marca-osc); text-decoration: none; white-space: nowrap; }
.emp-mini-ver:hover, .emp-mini-ver:focus-visible { text-decoration: underline; }
.emp-mini-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.emp-mini-cal .dow { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: var(--emp-tinta-2); text-align: center; padding: 0 0 4px; }
.emp-mini-cal .hueco { display: block; }
.emp-mini-cal .d { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; aspect-ratio: 1; min-height: 34px; border-radius: 8px; background: var(--emp-superficie-2); box-shadow: inset 0 0 0 1px var(--emp-linea-suave); color: var(--emp-tinta); text-decoration: none; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; }
.emp-mini-cal .d .n { font-size: 0.92rem; font-weight: 500; line-height: 1; }
.emp-mini-cal .d .h { font-family: var(--emp-letra); font-size: 0.52rem; font-weight: 700; line-height: 1; color: var(--emp-tinta); white-space: nowrap; max-width: 100%; overflow: hidden; }
.emp-mini-cal .d .s { font-size: 0.55rem; color: var(--emp-tinta-2); }
.emp-mini-cal .d.dom { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); } .emp-mini-cal .d.dom .h, .emp-mini-cal .d.dom .s { color: var(--emp-marca-osc); }
.emp-mini-cal .d.pasado { background: var(--emp-superficie-3); color: var(--emp-apagado); }
.emp-mini-cal .d.pasado.dom { background: color-mix(in srgb, var(--emp-marca-tinte) 55%, var(--emp-superficie-3)); color: var(--emp-apagado); }
.emp-mini-cal .d.inact { background: var(--emp-superficie-2); color: var(--emp-linea); } .emp-mini-cal .d.inact .h { color: var(--emp-linea); }
.emp-mini-cal .d.a-vac { background: #F4E2B8; color: #6B4A00; }
.emp-mini-cal .d.a-per { background: #DCD8F2; color: var(--emp-tipo-vip-tx); }
.emp-mini-cal .d.a-med { background: #F9DCDC; color: #8F2525; }
.emp-mini-cal .d.a-otr { background: var(--emp-linea); color: var(--emp-tinta-2); }
.emp-mini-cal .d.p-vac { background: repeating-linear-gradient(135deg, #F4E2B8 0 4px, #FBF4E4 4px 8px); color: #6B4A00; }
.emp-mini-cal .d.p-per { background: repeating-linear-gradient(135deg, #DCD8F2 0 4px, #F2F0FA 4px 8px); color: var(--emp-tipo-vip-tx); }
.emp-mini-cal .d.hor-libre { background: #FFF1A8; color: #6B5300; } .emp-mini-cal .d.hor-libre .h { color: #6B5300; }
.emp-mini-cal .d.sinfic { box-shadow: inset 0 0 0 2px var(--emp-peligro); }
.emp-mini-cal .d.hoy { box-shadow: inset 0 0 0 2px var(--emp-marca); } .emp-mini-cal .d.hoy .n { font-weight: 800; }
.emp-mini-cal .d.hoy.sinfic { box-shadow: inset 0 0 0 2px var(--emp-peligro); }
.emp-mini-cal .d:focus-visible { outline: 3px solid var(--emp-marca-osc); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .emp-mini-cal .d:hover { filter: brightness(0.95); } }
.emp-mini-nota { margin: 10px 0 0; }
.emp-mini-fest { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--emp-linea-suave); }
.emp-mini-fest .t { display: block; font-size: .86rem; font-weight: 500; color: var(--emp-tinta-2); margin-bottom: 6px; }
.emp-mini-fest .t .emp-i { color: var(--emp-marca-osc); margin-right: 4px; }
.emp-mini-fest ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.emp-mini-fest li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 0.88rem; }
.emp-mini-fest .f { font-family: var(--emp-cifras); font-size: 0.82rem; color: var(--emp-marca-osc); font-weight: 600; }
.emp-mini-fest .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-mini-fest .q { font-size: 0.78rem; color: var(--emp-apagado); white-space: nowrap; }
/* ── Eventos de la empresa (30/09/2026): un punto naranja con aro blanco en el día —se ve igual sobre el gris,
   el azul del domingo y el color de una ausencia— y una estrella en la lista de próximos y en el detalle del día. ── */
.emp-mini-cal .d .evp { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #D9480F; box-shadow: 0 0 0 1.5px #fff; }
.emp-cal-dia.ev .et { right: 18px; }
.emp-cal-dia .evp { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #D9480F; box-shadow: 0 0 0 2px #fff; }
.emp-cal-leyenda .k.ev { position: relative; background: var(--emp-linea); }
.emp-cal-leyenda .k.ev .evp { position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: #D9480F; box-shadow: 0 0 0 1.5px #fff; }
.emp-mini-fest a.nm { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .emp-mini-fest a.nm:hover { text-decoration: underline; } }
.emp-mini-fest li.ev .nm .emp-i { color: #B63D0C; font-size: 0.72rem; margin-right: 2px; }
.emp-cal-ev { background: #FDF0E9; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.emp-cal-ev p { margin: 0; }
.emp-cal-ev .t { font-size: 0.96rem; }
.emp-cal-ev .t .emp-i { color: #B63D0C; margin-right: 4px; }
.emp-cal-ev .d { font-size: 0.86rem; color: var(--emp-tinta-2); margin-top: 4px; }
.emp-cal-ev .d .mono { font-family: var(--emp-cifras); }
/* «Cómo llegar»: el enlace de Google Maps del evento, con cara de botón pequeño para el dedo. */
.emp-body a.emp-cal-mapa { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 12px; border-radius: 999px; background: var(--emp-superficie); border: 1px solid #F2C9B3; color: #9A3208; font-weight: 600; font-size: 0.86rem; text-decoration: none; }
.emp-body a.emp-cal-mapa:hover { background: #FFF7F2; }

/* ── Tablón (B2, 30/09/2026): publicaciones como en una red social, sin reacciones ── */
.emp-tablon { display: grid; gap: 14px; }
.emp-tablon-inicio { margin: 0 0 18px; }
.emp-h2 { display: flex; align-items: center; gap: 8px; font-family: var(--emp-letra-titulos); font-size: 1.12rem; font-weight: var(--emp-peso-titulos); margin: 0 0 10px; color: var(--emp-tinta); }
.emp-h2 .emp-i { color: var(--emp-marca-osc); }
.emp-post { background: var(--emp-superficie); border-radius: 14px; box-shadow: var(--emp-sombra-suave, 0 1px 3px color-mix(in srgb, var(--emp-marca-osc) 11%, transparent)); padding: 16px 18px; border: 1px solid var(--emp-linea-suave); }
.emp-post.pendiente { border-color: var(--emp-marca); box-shadow: 0 0 0 1px var(--emp-marca) inset, var(--emp-sombra-suave, 0 1px 3px color-mix(in srgb, var(--emp-marca-osc) 11%, transparent)); }
.emp-post.t-circular.pendiente { border-color: var(--emp-aviso-fuerte); box-shadow: 0 0 0 1px var(--emp-aviso-fuerte) inset; }
.emp-post.archivada { opacity: .85; }
.emp-post-cab { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font-size: 0.8rem; color: var(--emp-apagado); margin-bottom: 8px; }
.emp-post-cab .emp-nuevo, .emp-post-arch { margin-left: auto; }
.emp-post-arch { font-size: 0.76rem; font-weight: 600; }
.emp-post-tipo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; }
.emp-post-tipo.t-info { background: #E3F0F7; color: #1C5C7D; }
.emp-post-tipo.t-com { background: var(--emp-marca-tinte); color: var(--emp-marca-osc); }
.emp-post-tipo.t-warn { background: var(--emp-aviso-tinte); color: var(--emp-aviso-fuerte); }
.emp-post-meta .mono { font-family: var(--emp-cifras); }
.emp-post-tit { font-size: 1.12rem; font-weight: 700; margin: 0 0 8px; line-height: 1.3; overflow-wrap: anywhere; }
.emp-post-tit a { color: var(--emp-tinta); text-decoration: none; }
.emp-post-tit a:hover, .emp-post-tit a:focus-visible { color: var(--emp-marca-osc); text-decoration: underline; }
.emp-post-cuerpo { font-size: 0.98rem; line-height: 1.6; max-width: 70ch; overflow-wrap: anywhere; }
.emp-post-cuerpo p { margin: 0 0 0.9em; } .emp-post-cuerpo p:last-child { margin-bottom: 0; }
.emp-post-cuerpo h2 { font-size: 1rem; margin: 1.1em 0 0.35em; } .emp-post-cuerpo ul { padding-left: 20px; margin: 0 0 0.9em; }
.emp-post-cuerpo.plegado { max-height: 9.6em; overflow: hidden; position: relative; }
.emp-post-cuerpo.plegado::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3.2em; background: linear-gradient(rgba(255,255,255,0), var(--emp-superficie)); }
.emp-post-mas { border: 0; background: none; padding: 6px 0 0; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--emp-marca-osc); cursor: pointer; }
.emp-post-fotos { display: grid; gap: 6px; margin-top: 12px; }
.emp-post-fotos.n2 { grid-template-columns: 1fr 1fr; } .emp-post-fotos.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.emp-post-fotos a { display: block; border-radius: 10px; overflow: hidden; background: var(--emp-superficie-3); }
.emp-post-fotos img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.emp-post-fotos.n2 img, .emp-post-fotos.n3 img { aspect-ratio: 4 / 3; max-height: none; }
.emp-post-adj { margin-top: 12px; }
.emp-post-pie { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--emp-linea-suave); font-size: 0.86rem; }
.emp-post-form { display: flex; flex-direction: column; gap: 4px; }
.emp-post-btn { width: auto; padding: 9px 14px; font-size: 0.88rem; }
.emp-post-ok { color: var(--emp-ok); font-weight: 600; }
.emp-post-no { color: var(--emp-apagado); }
.emp-post-cad { margin-left: auto; font-size: 0.78rem; color: var(--emp-apagado); }
.emp-chips a.pend .n { color: var(--emp-aviso-fuerte); font-weight: 700; }
@media (max-width: 480px) { .emp-post { padding: 14px 14px; border-radius: 12px; } .emp-post-btn { width: 100%; } .emp-post-form { width: 100%; } }

/* Contratos por firmar con Signaturit (01/10/2026). */
.emp-firmar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.emp-firmar > .emp-h2 { margin: 0; }
.emp-firmar > .emp-hint { margin: 0; }
.emp-por-firmar { background: var(--emp-aviso-tinte); color: var(--emp-aviso-fuerte); }
.emp-firmado { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 600; color: var(--emp-ok); background: var(--emp-ok-tinte); border-radius: var(--emp-radio-pildora); padding: 2px 8px; vertical-align: middle; }

/* ===== Inicio (rediseño del 24/10/2026) =====
   Dos columnas en escritorio: lo que se hace (jornada, pendiente, tablón,
   lo último) y el vistazo (días, documentos, el mes). En el móvil, una
   detrás de otra en ese mismo orden. */
.emp-ini { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) { .emp-ini { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; } }
.emp-ini-prin, .emp-ini-lado { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.emp-ini-sec { display: flex; flex-direction: column; gap: 10px; }
.emp-ini-sec > .emp-h2 { margin: 0; }
.emp-ini-sec > .emp-h2 .emp-mini-ver { margin-left: auto; font-family: var(--emp-letra); font-size: .85rem; font-weight: 500; }

/* La jornada: el estado y UN botón, el que toca ahora. */
.emp-jornada { padding: 18px 20px; }
.emp-jornada-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.emp-jornada-tx { flex: 1 1 200px; min-width: 0; }
.emp-jornada-tx p { margin: 0; }
.emp-jornada-est { font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.25rem; line-height: 1.25; }
.emp-jornada-tx .emp-hint { margin-top: 3px; }
.emp-jornada-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--emp-linea); flex-shrink: 0; align-self: flex-start; margin-top: .55rem; }
.emp-jornada-punto.est-dentro { background: var(--emp-ok); box-shadow: 0 0 0 5px color-mix(in srgb, var(--emp-ok) 16%, transparent); }
.emp-jornada-punto.est-olvidada { background: var(--emp-aviso); box-shadow: 0 0 0 5px color-mix(in srgb, var(--emp-aviso) 18%, transparent); }
.emp-jornada-form { margin: 0; }
.emp-jornada .emp-btn { width: auto; }
.emp-jornada-geo { margin: 12px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.emp-jornada-geo .emp-i { margin-top: .1em; color: var(--emp-marca-osc); }
.emp-jornada .emp-ft-ok svg { width: 52px; height: 52px; }
@media (max-width: 719px) {
    .emp-jornada-form, .emp-jornada .emp-btn { width: 100%; }
    .emp-jornada-ver { width: 100%; }
}

/* Pendiente: cada tarea con su botón. */
.emp-tareas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.emp-tarea { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; background: var(--emp-superficie); border: 1px solid var(--emp-linea); border-radius: var(--emp-radio-sm); box-shadow: var(--emp-sombra-suave); }
.emp-tarea-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--emp-marca-tinte); color: var(--emp-marca-osc); }
.emp-tarea-ico .emp-i { width: 20px; height: 20px; }
.emp-tarea.t-sinfic .emp-tarea-ico, .emp-tarea.t-cad .emp-tarea-ico { background: var(--emp-aviso-tinte); color: var(--emp-aviso-fuerte); }
.emp-tarea.urgente .emp-tarea-ico { background: var(--emp-peligro-tinte); color: var(--emp-peligro); }
.emp-tarea-tx { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.emp-tarea-tx strong { font-weight: 500; overflow-wrap: anywhere; }
.emp-tarea-tx small { color: var(--emp-apagado); font-size: .82rem; margin-top: 2px; }
.emp-btn.emp-tarea-acc { width: auto; flex-shrink: 0; padding: 8px 14px; font-size: .9rem; min-height: 44px; }
@media (max-width: 479px) { .emp-tarea { gap: 10px; padding: 10px; } .emp-tarea-ico { width: 34px; height: 34px; border-radius: 10px; } .emp-tarea-tx strong { font-size: .94rem; } }
.emp-ini-aldia { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--emp-ok); font-weight: 500; }

/* El vistazo de la columna lateral. */
.emp-vistazo { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; text-decoration: none; color: var(--emp-tinta); }
.emp-body a.emp-vistazo { color: var(--emp-tinta); transition: border-color .15s, transform .12s var(--emp-ease); }
a.emp-vistazo:hover { border-color: color-mix(in srgb, var(--emp-marca) 40%, transparent); }
a.emp-vistazo:active { transform: scale(.99); }
.emp-vistazo-tit { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.02rem; }
.emp-vistazo-tit .emp-i { color: var(--emp-marca-osc); }
.emp-vistazo-tit .emp-nuevo { margin-left: auto; font-family: var(--emp-letra); }
.emp-vistazo-n { display: flex; align-items: baseline; gap: 8px; font-weight: 500; color: var(--emp-tinta-2); }
.emp-cifra-grande { font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 2.6rem; line-height: 1; color: var(--emp-marca-osc); letter-spacing: -0.02em; }
.emp-cifra-grande.neg { color: var(--emp-peligro); }
/* La barra del año: lo aprobado, lo pedido (rayado) y lo que queda (el fondo). */
.emp-saldo-barra { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--emp-marca-tinte); }
.emp-saldo-barra i { display: block; height: 100%; }
.emp-saldo-barra .us, .emp-saldo-ley i.us { background: var(--emp-marca-osc); }
.emp-saldo-barra .pe, .emp-saldo-ley i.pe { background: repeating-linear-gradient(45deg, var(--emp-marca-osc) 0 3px, color-mix(in srgb, var(--emp-marca) 35%, var(--emp-superficie)) 3px 6px); }
.emp-saldo-ley { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--emp-apagado); }
.emp-saldo-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.emp-vistazo .emp-docs-mini { margin: 0 -4px; }
.emp-vistazo .emp-docs-mini a { padding: 8px 4px; grid-template-columns: 22px 1fr auto; }
.emp-vistazo-ir { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: .9rem; text-decoration: none; }
.emp-body a.emp-vistazo-ir { color: var(--emp-marca-osc); }
.emp-vistazo-ir:hover { text-decoration: underline; }

/* ===== Mi jornada ===== */
.emp-jornada-grande { padding: 22px 22px 18px; margin-bottom: 12px; }
.emp-jornada-grande .emp-jornada-est { font-size: 1.5rem; }
.emp-jornada-oficina { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--emp-radio-boton); background: var(--emp-superficie-2); border: 1px dashed var(--emp-linea); color: var(--emp-tinta-2); font-weight: 500; }
/* El resumen de la jornada: pares dato-valor en fila, como un recibo. */
.emp-jornada-res-t { margin: 16px 0 0; padding-top: 14px; position: relative; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--emp-apagado); }
.emp-jornada-res-t::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--emp-separador); }
.emp-jornada-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 18px; margin: 8px 0 0; }
.emp-jornada-res div { display: flex; justify-content: space-between; gap: 12px; }
.emp-jornada-res dt { font-size: .8rem; color: var(--emp-apagado); }
.emp-jornada-res dd { margin: 0; font-weight: 600; }
/* Cerrar una jornada olvidada diciendo la hora. */
.emp-fic-diferido { margin-top: 16px; padding-top: 14px; position: relative; display: grid; gap: 10px; }
.emp-fic-diferido::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--emp-separador); }
.emp-fic-diferido-t { margin: 0; font-weight: 500; }
.emp-fic-diferido-f { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.emp-fic-diferido-f > div { flex: 0 1 160px; }
.emp-fic-diferido-f .emp-btn { width: auto; }
.emp-fic-diferido .emp-hint { margin: 0; }
@media (max-width: 719px) { .emp-fic-diferido-f > div, .emp-fic-diferido-f .emp-btn { flex: 1 1 100%; width: 100%; } }

/* El periodo (del 26 al 25, como la nómina) con sus flechas. */
.emp-periodo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.emp-periodo .emp-h2 { flex: 1; flex-direction: column; align-items: center; gap: 0; text-align: center; margin: 0; }
.emp-periodo .emp-h2 small { font-family: var(--emp-letra); font-size: .82rem; color: var(--emp-apagado); }
.emp-periodo .emp-ico { border: 1px solid var(--emp-linea); background: var(--emp-superficie); }
.emp-periodo-hoy { flex-basis: 100%; text-align: center; font-size: .88rem; font-weight: 500; }

/* Balance del periodo: tres cifras en una fila, sin cajas. */
.emp-fic-bal { padding: 14px 18px; display: grid; gap: 10px; }
.emp-fic-bal-g { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
.emp-fic-bal-g div { display: flex; flex-direction: column; }
.emp-fic-bal-g dt { font-size: .8rem; color: var(--emp-apagado); }
.emp-fic-bal-g dd { margin: 0; font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.35rem; }
.emp-fic-bal-g .mas dd { color: var(--emp-ok); } .emp-fic-bal-g .menos dd { color: var(--emp-peligro); }
.emp-fic-bal-aviso { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; color: var(--emp-aviso-fuerte); background: var(--emp-aviso-tinte); border-radius: var(--emp-radio-sm); padding: 10px 12px; }
.emp-fic-bal-aviso .emp-i { margin-top: 2px; }

/* Lo que no hace falta siempre, plegado. */
.emp-mas-datos > summary { cursor: pointer; font-size: .88rem; font-weight: 500; color: var(--emp-marca-osc); list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.emp-mas-datos > summary::-webkit-details-marker { display: none; }
.emp-mas-datos > summary::after { content: "+"; font-weight: 600; }
.emp-mas-datos[open] > summary::after { content: "–"; }
.emp-mas-datos > summary:focus-visible { outline: 2px solid var(--emp-marca); outline-offset: 2px; border-radius: 4px; }
.emp-mas-datos p { margin: 6px 0 0; }

/* Las jornadas del periodo: el día a la izquierda, las horas y su duración. */
.emp-jornadas { list-style: none; margin: 0; padding: 0; }
.emp-jornadas li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 18px; }
.emp-jornadas li + li { border-top: 1px solid var(--emp-linea-suave); }
.emp-jornadas-dia { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.emp-jornadas-dia b { font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.35rem; color: var(--emp-marca-osc); }
.emp-jornadas-dia small { font-size: .74rem; color: var(--emp-apagado); text-transform: uppercase; letter-spacing: .04em; }
.emp-jornadas-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.emp-jornadas-tx .h { font-weight: 500; }
.emp-jornadas-tx .m { font-size: .82rem; color: var(--emp-apagado); }
.emp-jornadas-dur { font-weight: 600; white-space: nowrap; }
.emp-jornadas li.abierta .emp-jornadas-dur { color: var(--emp-ok); }
.emp-jornadas-total { margin: 0; padding: 12px 18px; display: flex; justify-content: space-between; position: relative; color: var(--emp-tinta-2); }
.emp-jornadas-total::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: var(--emp-separador); }
.emp-bloque.emp-vacio { margin: 0; }
.emp-nov.emp-bloque { margin: 0; padding: 4px 18px; }

/* ===== Ausencias y Peticiones ===== */
.emp-aus-saldo { padding: 20px 22px; }
.emp-aus-saldo .emp-cifra-grande { font-size: 3.2rem; }
.emp-saldo-ley i.qu { background: var(--emp-marca-tinte); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--emp-marca) 30%, transparent); }
.emp-aus-notas { list-style: none; margin: 4px 0 0; padding: 12px 0 0; display: grid; gap: 6px; position: relative; font-size: .9rem; color: var(--emp-tinta-2); }
.emp-aus-notas::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--emp-separador); }
.emp-aus-notas li { display: flex; gap: 8px; align-items: flex-start; }
.emp-aus-notas .emp-i { margin-top: .15em; color: var(--emp-marca-osc); }
.emp-sol-lista.emp-bloque { margin: 0; }
.emp-sol-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 14px 18px; }
.emp-sol-item + .emp-sol-item { border-top: 1px solid var(--emp-linea-suave); }
.emp-sol-item .t { font-weight: 500; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.emp-sol-item .t .m { color: var(--emp-tinta-2); font-weight: 400; }
.emp-sol-item .f { font-size: .9rem; color: var(--emp-tinta-2); margin-top: 2px; }
.emp-sol-item .n { font-size: .9rem; background: var(--emp-superficie-2); border-radius: var(--emp-radio-sm); padding: 8px 12px; margin-top: 8px; overflow-wrap: anywhere; }
.emp-sol-item .n.res { background: var(--emp-marca-tinte); display: flex; gap: 6px; align-items: flex-start; }
.emp-sol-item .n.res .emp-i { margin-top: .15em; color: var(--emp-marca-osc); }
.emp-sol-item .meta { font-size: .8rem; color: var(--emp-apagado); margin-top: 6px; }
.emp-sol-item form { grid-column: 2; margin-top: 8px; }
.emp-btn.emp-sol-retirar { width: auto; padding: 6px 14px; font-size: .88rem; min-height: 40px; }
/* Las fechas de la columna lateral: un número grande y lo que es. */
.emp-fechas { list-style: none; margin: 0 -4px; padding: 0; }
.emp-fechas li + li { border-top: 1px solid var(--emp-linea-suave); }
.emp-fechas a { display: flex; align-items: center; gap: 12px; padding: 9px 4px; text-decoration: none; border-radius: 8px; }
.emp-body .emp-fechas a { color: var(--emp-tinta); }
.emp-fechas a:hover { background: var(--emp-superficie-2); }
.emp-fechas .d { width: 44px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.emp-fechas .d b { font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.3rem; color: var(--emp-marca-osc); }
.emp-fechas .d small { font-size: .72rem; color: var(--emp-apagado); }
.emp-fechas .tx { min-width: 0; display: flex; flex-direction: column; }
.emp-fechas .tx strong { font-weight: 500; }
.emp-fechas .tx small { font-size: .82rem; color: var(--emp-apagado); }
.emp-pie-nota { margin: 22px 2px 8px; }

/* ===== Entrada (login.php) ===== */
.emp-entrada { justify-content: center; align-items: center; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
.emp-entrada-caja { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; }
.emp-entrada-cab { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.emp-entrada-cab img { height: 48px; width: auto; max-width: 180px; margin-bottom: 8px; }
.emp-entrada-cab .emp-monograma { --mono: 52px; margin-bottom: 8px; }
.emp-entrada-cab h1 { margin: 0; font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); font-size: 1.85rem; line-height: 1.15; text-wrap: balance; }
.emp-entrada-cab p { margin: 0; color: var(--emp-apagado); }
.emp-entrada-form { padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 16px; }
.emp-entrada-form .emp-aviso { margin: 0; }
.emp-entrada-form .emp-form { gap: 14px; }
.emp-entrada-form .emp-btn { margin-top: 6px; }
.emp-entrada-otro { text-align: center; font-size: .92rem; font-weight: 500; text-decoration: none; padding: 4px; }
.emp-body a.emp-entrada-otro { color: var(--emp-marca-osc); }
.emp-entrada-otro:hover { text-decoration: underline; }
.emp-entrada-pie { text-align: center; margin: 0 8px; }
.emp-input[aria-invalid="true"] { border-color: var(--emp-peligro); }
.emp-ojo { display: grid; place-items: center; }
.emp-ojo:focus-visible { outline: 2px solid var(--emp-marca-osc); outline-offset: 1px; }
/* Sin sesión (recuperar la contraseña): el mismo aire que la entrada. */
.emp-sin-sesion { padding: max(28px, env(safe-area-inset-top)) 16px 4px; }
.emp-sin-sesion img { height: 40px; margin-bottom: 4px; }
.emp-sin-sesion .emp-monograma { --mono: 40px; margin-bottom: 4px; }
.emp-sin-sesion-portal { font-family: var(--emp-letra-titulos); font-size: 1.2rem; color: var(--emp-tinta); }
.emp-login { max-width: 420px; margin: 12px auto 0; }
.emp-login h2 { font-family: var(--emp-letra-titulos); font-weight: var(--emp-peso-titulos); line-height: 1.3; }
/* Las cifras del periodo en rejilla: dos por fila en el móvil, todas en una en escritorio. */
.emp-fic-bal-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 22px; }
.emp-fic-bal-g .emp-hint { font-size: .78rem; }
.emp-wrap > .emp-periodo, .emp-wrap > .emp-fic-bal { margin-bottom: 12px; }