:root {
  --fondo: #f6f7f9;
  --panel: #ffffff;
  --campo: #ffffff;
  --texto: #2A3463;
  --suave: #5d6878;
  --borde: #e3e6eb;
  --acento: #0f766e;
  --acento-claro: #e6f4f2;
  --peligro: #b42318;
  --peligro-claro: #fdecea;
  --aviso: #a15c07;
  --aviso-claro: #fdf3e2;
  --ok: #157f3c;
  --ok-claro: #e7f6ec;
  --tele: #5b4bc4;
  --tele-claro: #eeebfb;
  --gris-claro: #eef0f3;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12161c; --panel: #1a2029; --campo: #1a2029; --texto: #e7ebf0; --suave: #9aa4b2; --borde: #2c3440;
    --acento: #2dd4bf; --acento-claro: #123a37; --peligro: #f97066; --peligro-claro: #3b1a18;
    --aviso: #fdb022; --aviso-claro: #3a2a0c; --ok: #4ade80; --ok-claro: #12301e; --gris-claro: #252c36;
    --tele: #a99cf5; --tele-claro: #2a2550;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-size: 14px; line-height: 1.45; -webkit-tap-highlight-color: transparent; }
a { color: var(--acento); text-decoration: none; }
h1 { font-size: 22px; margin: 0; font-weight: 650; }
h2 { font-size: 15px; margin: 0 0 12px; font-weight: 600; }
h3 { font-size: 14px; margin: 0 0 8px; font-weight: 600; }
p { margin: 0 0 10px; }
.suave { color: var(--suave); }
.peque { font-size: 12px; }

.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.menu { background: var(--panel); border-right: 1px solid var(--borde); padding: 18px 12px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; padding: 0 8px 18px; }
.marca img { width: 28px; height: 28px; }
.menu nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px 8px; scrollbar-width: thin; }
.menu .grupo-items { display: flex; flex-direction: column; gap: 2px; }
/* Bloque plegado: solo se ve el enlace de la sección en la que estás. */
.menu .grupo-items.cerrado > a:not(.activo) { display: none; }
.menu a { color: var(--texto); padding: 8px 10px; border-radius: 8px; display: flex; align-items: center; gap: 10px; }
.menu a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu a:hover { background: var(--gris-claro); }
.menu a.activo { background: var(--acento-claro); color: var(--acento); font-weight: 600; }
.menu .grupo { font: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); padding: 14px 10px 4px; border: none; background: none; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 6px; border-radius: 6px; width: 100%; }
.menu .grupo:hover { color: var(--texto); }
.menu .grupo-txt { flex: 1; }
.menu .grupo-chevron { display: flex; opacity: .6; }
.menu .grupo:hover .grupo-chevron { opacity: 1; }
.menu .grupo-chevron svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.menu .grupo[aria-expanded="false"] .grupo-chevron svg { transform: rotate(-90deg); }
.menu .perfil { color: var(--suave); font-size: 13px; border-top: 1px solid var(--borde); border-radius: 0; padding-top: 12px; }
main { padding: 28px clamp(20px, 3vw, 44px) 60px; max-width: 1680px; width: 100%; margin: 0 auto; box-sizing: border-box; min-width: 0; outline: none; }
/* Menú plegable: franja de iconos */
.app { transition: grid-template-columns .18s ease; }
.marca { position: relative; }
.marca #marca-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plegar-menu { border: none; background: none; width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--suave); cursor: pointer; flex: none; padding: 0; }
.plegar-menu:hover { background: var(--gris-claro); color: var(--texto); }
.plegar-menu svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
@media (min-width: 861px) {
  .app.plegado { grid-template-columns: 64px 1fr; }
  .app.plegado .menu { padding: 18px 8px; }
  .app.plegado .marca { flex-direction: column; gap: 10px; padding: 0 0 14px; }
  .app.plegado .marca #marca-nombre, .app.plegado .menu .grupo, .app.plegado .menu a .txt, .app.plegado .menu .perfil { display: none; }
  .app.plegado .plegar-menu svg { transform: rotate(180deg); }
  .app.plegado .menu a { justify-content: center; padding: 10px 0; position: relative; }
  .app.plegado .menu .grupo + a, .app.plegado .menu nav > .grupo { margin-top: 0; }
  .app.plegado .menu nav .grupo { display: block; height: 1px; padding: 0; margin: 8px 6px; background: var(--borde); font-size: 0; width: auto; pointer-events: none; }
  .app.plegado .menu nav .grupo > * { display: none; }
  /* En la franja de iconos se ven siempre todos. */
  .app.plegado .menu .grupo-items.cerrado > a { display: flex; }
  .app.plegado .insignia-menu { position: absolute; top: 2px; right: 4px; margin: 0; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }
}
@media (max-width: 860px) { .plegar-menu { display: none; } }

.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.cabecera .sub { color: var(--suave); margin-top: 2px; }
.cabecera > div:first-child { flex: 1 1 320px; min-width: 0; }
.cabecera > .acciones { margin-left: auto; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--borde); background: var(--panel); color: var(--texto);
  padding: 8px 14px; border-radius: 8px; font: inherit; font-weight: 550; cursor: pointer; white-space: nowrap; }
.boton:hover { background: var(--gris-claro); }
.boton.principal { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton.rojo { background: var(--peligro); border-color: var(--peligro); color: #fff; }
@media (prefers-color-scheme: dark) { .boton.principal, .boton.rojo { color: #0b1512; } }
.boton.principal:hover, .boton.rojo:hover { filter: brightness(1.08); }
.boton.peligro { color: var(--peligro); }
.boton.mini { padding: 4px 10px; font-size: 13px; }
.boton.enlace { border: none; background: none; color: var(--acento); padding: 4px 6px; }
.boton:disabled { opacity: .55; cursor: default; }

.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; }
.panel + .panel, .panel + .tabla-cont, .tabla-cont + .panel, .rejilla + .panel, .rejilla + .tabla-cont { margin-top: 16px; }
.rejilla > .panel { margin-top: 0; }
.rejilla { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(4, 1fr); }
.tres { grid-template-columns: repeat(3, 1fr); }
.dos { grid-template-columns: 1fr 1fr; }
.kpi .etiqueta { color: var(--suave); font-size: 13px; }
.kpi .valor { font-size: 24px; font-weight: 650; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .nota { color: var(--suave); font-size: 12px; margin-top: 2px; }
.barra-progreso { height: 6px; background: var(--gris-claro); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.barra-progreso i { display: block; height: 100%; background: var(--acento); border-radius: 99px; }

/* Fichar */
.fichar { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 18px; gap: 10px; }
.fichar .reloj { font-size: 44px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fichar .estado-linea { color: var(--suave); }
.boton-fichar { width: 100%; max-width: 340px; padding: 18px; font-size: 18px; border-radius: 14px; margin-top: 6px; }
.alerta { padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.alerta.aviso { background: var(--aviso-claro); color: var(--aviso); }
.alerta.info { background: var(--acento-claro); color: var(--acento); }
.alerta.error { background: var(--peligro-claro); color: var(--peligro); }

.tabla-cont { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); overflow-x: auto; box-shadow: var(--sombra); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { font-size: 12px; color: var(--suave); font-weight: 550; background: var(--fondo); }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clic { cursor: pointer; }
tbody tr.clic:hover { background: var(--gris-claro); }
tr.subtotal td { font-weight: 600; background: var(--fondo); }
tr.nivel2 td:first-child { padding-left: 30px; }
tr.nivel3 td:first-child { padding-left: 48px; color: var(--suave); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.ancho { white-space: normal; width: 100%; }
.vacio { padding: 30px 20px; text-align: center; color: var(--suave); }

.filtros { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.filtros input, .filtros select { width: auto; }
.pastilla { border: 1px solid var(--borde); background: var(--panel); border-radius: 999px; padding: 5px 12px; cursor: pointer; font: inherit; color: var(--texto); }
.pastilla.activa { background: var(--texto); color: var(--panel); border-color: var(--texto); }

.etq { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--gris-claro); color: var(--suave); }
.etq.oficina, .etq.aprobada, .etq.trabajando { background: var(--ok-claro); color: var(--ok); }
.etq.teletrabajo { background: var(--tele-claro); color: var(--tele); }
.etq.pendiente, .etq.olvido { background: var(--aviso-claro); color: var(--aviso); }
.etq.rechazada { background: var(--peligro-claro); color: var(--peligro); }
.etq.ausente, .etq.vacaciones { background: var(--acento-claro); color: var(--acento); }

label { display: block; font-size: 13px; color: var(--suave); margin-bottom: 4px; }
input, select, textarea { width: 100%; font: inherit; font-size: 16px; color: var(--texto); background: var(--campo); border: 1px solid var(--borde);
  border-radius: 8px; padding: 8px 10px; }
@media (min-width: 861px) { input, select, textarea { font-size: 14px; } }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: transparent; }
textarea { min-height: 70px; resize: vertical; }
input[type=checkbox] { width: auto; }
.check { display: flex; align-items: center; gap: 8px; color: var(--texto); font-size: 14px; }
.campos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.campos .c2 { grid-column: span 2; }
.campos .c4 { grid-column: span 4; }
.ayuda { font-size: 12px; color: var(--suave); margin-top: 4px; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.lista li:last-child { border-bottom: none; }
.lista li.clic { cursor: pointer; }
.lista .detalle { color: var(--suave); font-size: 13px; }
.lista .der { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.dia { margin-bottom: 14px; }
.dia-cab { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px 6px; font-weight: 600; }
.dia-cab .suave { font-weight: 400; font-size: 13px; }

/* Árbol de proyectos */
.arbol details { border-bottom: 1px solid var(--borde); }
.arbol details:last-child { border-bottom: none; }
.arbol summary { display: flex; align-items: center; gap: 10px; padding: 10px 4px; cursor: pointer; list-style: none; }
.arbol summary::-webkit-details-marker { display: none; }
.arbol summary::before { content: '▸'; color: var(--suave); width: 12px; transition: transform .15s; }
.arbol details[open] > summary::before { transform: rotate(90deg); }
.arbol summary .nombre { flex: 1; font-weight: 550; }
.arbol .hijos { padding-left: 22px; }
.arbol .tarea { display: flex; align-items: center; gap: 10px; padding: 7px 4px 7px 26px; border-top: 1px dashed var(--borde); }
.arbol .tarea .nombre { flex: 1; }
.arbol .inactivo { opacity: .5; }
.arbol .fila-job { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--borde); }
.arbol .fila-job:first-child { border-top: none; }
.arbol .fila-job .nombre { flex: 1; }
.arbol .lider { font-size: 13px; padding: 2px 10px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--borde); white-space: nowrap; }
.arbol .lider.sin { color: var(--suave); border-style: dashed; }



/* Calendario del equipo */
.calendario { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.calendario th, .calendario td { padding: 0; text-align: center; border-bottom: 1px solid var(--borde); }
.calendario th.persona, .calendario td.persona { text-align: left; padding: 6px 10px; position: sticky; left: 0; background: var(--panel); min-width: 140px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
.calendario th { padding: 6px 0; min-width: 26px; }
.calendario th.finde, .calendario td.finde { background: var(--gris-claro); }
.calendario th.festivo, .calendario td.festivo { background: var(--aviso-claro); }
.calendario th.hoy { color: var(--acento); font-weight: 700; }
.calendario td.celda { height: 30px; }
.calendario td.celda span { display: block; height: 18px; margin: 0 1px; border-radius: 4px; }
.calendario .c-vacaciones { background: var(--acento); }
.calendario .c-pendiente { background: repeating-linear-gradient(45deg, var(--acento), var(--acento) 3px, transparent 3px, transparent 6px); border: 1px solid var(--acento); }
.calendario .c-otro { background: var(--tele); }
.leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--suave); flex-wrap: wrap; margin-top: 10px; }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }

/* Diálogo */
dialog { border: none; border-radius: 14px; padding: 0; width: min(760px, calc(100vw - 24px)); background: var(--panel); color: var(--texto); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(10, 15, 25, .45); }
dialog form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
dialog .pie { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
dialog .pie .izq { margin-right: auto; }
.selector-tarea { display: grid; gap: 10px; }

/* Entrar */
#fuera { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.caja-entrar { width: min(400px, 100%); }
.caja-entrar .marca { justify-content: center; padding: 0 0 18px; font-size: 20px; }
.caja-entrar form { display: flex; flex-direction: column; gap: 14px; }

.mas-lista a { display: flex; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--borde); color: var(--texto); font-size: 16px; }

#aviso { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--texto); color: var(--panel);
  padding: 10px 18px; border-radius: 8px; opacity: 0; transition: .2s; pointer-events: none; z-index: 30; max-width: calc(100vw - 32px); text-align: center; top: auto; right: auto; margin: 0; border: 0; }
#aviso.visible { opacity: 1; transform: translateX(-50%); }
#aviso.error { background: var(--peligro); color: #fff; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .menu { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; z-index: 20; flex-direction: row; padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid var(--borde); }
  .menu .marca, .menu .grupo, .menu .perfil, .menu a.solo-escritorio { display: none; }
  .menu nav { flex-direction: row; justify-content: space-around; overflow: visible; margin: 0; padding: 0; }
  .menu .grupo-items { display: contents; }
  .menu .grupo-items.cerrado > a:not(.solo-escritorio) { display: flex; }
  .menu a { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 4px; flex: 1; text-align: center; }
  .menu a svg { width: 22px; height: 22px; }
  main { padding: 16px 16px calc(90px + env(safe-area-inset-bottom)); }
  .kpis { grid-template-columns: 1fr 1fr; }
  .tres, .dos { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr 1fr; }
  .campos .c4 { grid-column: span 2; }
  #aviso { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .kpi .valor { font-size: 20px; }
}
@media (min-width: 861px) { .menu a.solo-movil { display: none; } }
@media (max-width: 520px) { .campos { grid-template-columns: 1fr; } .campos .c2, .campos .c4 { grid-column: span 1; } h1 { font-size: 20px; } }

/* Campana de avisos */
.boton.campana { position: relative; width: 40px; height: 40px; padding: 0; flex: none; }
.boton.campana svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.boton.campana .insignia { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--peligro); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.lista.avisos li.nuevo { font-weight: 600; }
.lista.avisos li.nuevo .detalle { font-weight: 400; }

/* Ayuda */
.pasos-ayuda { margin: 0 0 14px; padding-left: 40px; line-height: 1.55; }
.pasos-ayuda li { margin: 4px 0; }
.respuesta-ayuda { margin: 0 0 14px; padding-left: 26px; line-height: 1.55; color: var(--texto); }

/* Equipo hoy (en Fichajes) */
.equipo-hoy { margin-bottom: 14px; }
.equipo-hoy > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.equipo-hoy > summary::-webkit-details-marker { display: none; }
.equipo-hoy > summary::before { content: '▸'; color: var(--suave); transition: transform .15s; }
.equipo-hoy[open] > summary::before { transform: rotate(90deg); }
.equipo-hoy[open] > summary .peque { display: none; }

/* Login: olvidé mi contraseña */
.olvido { margin-top: 14px; text-align: center; font-size: .9em; }
.olvido summary { cursor: pointer; color: var(--acento); list-style: none; }
.olvido summary::-webkit-details-marker { display: none; }
.olvido p { margin: 8px 0 0; color: var(--suave); line-height: 1.5; }

/* ---------- gestor de tareas ---------- */
.lista.tareas li { justify-content: flex-start; align-items: flex-start; }
.lista.tareas .completar { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--acento); cursor: pointer; }
.lista.tareas .cuerpo-tarea { flex: 1; min-width: 0; }
.lista.tareas li.hecha .nombre { text-decoration: line-through; color: var(--suave); }
.meta-tarea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.prio { font-size: 12px; padding: 1px 8px; border-radius: 999px; font-weight: 550; }
.prio.alta { background: var(--peligro-claro); color: var(--peligro); }
.prio.media { background: var(--aviso-claro); color: var(--aviso); }
.prio.baja { background: var(--gris-claro); color: var(--suave); }
.fecha-tarea { font-size: 12.5px; color: var(--suave); }
.fecha-tarea.hoy { color: var(--ok); font-weight: 600; }
.fecha-tarea.vencida, .vencida { color: var(--peligro); font-weight: 600; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--acento-claro); color: var(--acento); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.avatar.sin-resp { background: var(--gris-claro); color: var(--suave); border: 1px dashed var(--borde); }
.grupo-proyectos + .grupo-proyectos { margin-top: 18px; }
.grupo-proyectos h3 { margin: 0 0 10px; font-size: 14px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.proyectos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tarjeta-proyecto { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--borde); border-radius: var(--radio); color: inherit; text-decoration: none; background: var(--panel); }
.tarjeta-proyecto:hover { border-color: var(--acento); }
.tarjeta-proyecto .nombre { font-weight: 600; }
.barra { height: 6px; border-radius: 999px; background: var(--gris-claro); overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--acento); }
.tablero { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.columna-tablero { background: var(--gris-claro); border-radius: var(--radio); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.columna-tablero h3 { margin: 2px 4px 4px; font-size: 14px; }
.zona-tarjetas { display: flex; flex-direction: column; gap: 8px; min-height: 40px; flex: 1; }
.tarjeta-tarea { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 10px; cursor: grab; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sombra); }
.tarjeta-tarea:hover { border-color: var(--acento); }
.tarjeta-tarea.arrastrando { opacity: .4; }
.tarjeta-tarea .meta-tarea { justify-content: flex-start; }
.tarjeta-tarea .avatar { margin-left: auto; }
.columna-tablero > input { background: transparent; border-style: dashed; }
dialog.ancho { width: min(1040px, calc(100vw - 24px)); }
dialog.estrecho { width: min(480px, calc(100vw - 24px)); }
.titulo-tarea { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.titulo-seccion { font-size: 14px; margin: 16px 0 8px; }
.subtareas { display: flex; flex-direction: column; gap: 6px; }
.subtareas .hecha span:first-of-type { text-decoration: line-through; color: var(--suave); }
.comentarios { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.comentarios textarea { width: 100%; }
.comentario { background: var(--fondo); border-radius: 8px; padding: 8px 10px; width: 100%; }
@media (max-width: 760px) { .tablero { grid-template-columns: repeat(3, 82vw); } }

/* Gestor de tareas v2 (tipo Asana) */
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); margin-bottom: 14px; overflow-x: auto; scrollbar-width: thin; }
.pestana { border: none; background: none; font: inherit; font-size: 14px; color: var(--suave); padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--texto); font-weight: 600; border-bottom-color: var(--acento); }
.pestana.mas { font-size: 18px; line-height: 1; padding: 6px 10px; }
.barra-tareas .buscar-tareas { width: 220px; }
.filtro-mini { width: auto; max-width: 180px; padding: 5px 8px; font-size: 13px; }
.tabla-tareas-cont { padding: 0; overflow-x: auto; }
.tabla-tareas { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 1080px; table-layout: fixed; }
.tabla-tareas th { position: sticky; top: 0; background: var(--panel); text-align: left; font-weight: 500; font-size: 12.5px; color: var(--suave); padding: 8px 6px; border-bottom: 1px solid var(--borde); white-space: nowrap; z-index: 1; }
.tabla-tareas td { padding: 2px 6px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.fila-seccion td { font-weight: 600; padding: 12px 8px 6px; cursor: pointer; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.fila-seccion .flecha { display: inline-block; width: 14px; color: var(--suave); }
.fila-tarea { cursor: pointer; }
.fila-tarea:hover { background: var(--gris-claro); }
.fila-tarea.arrastrando { opacity: .4; }
.fila-tarea.hecha .cel-nombre { text-decoration: line-through; color: var(--suave); }
.tabla-tareas .c-check { width: 34px; text-align: center; }
.c-check input { width: 17px; height: 17px; accent-color: var(--ok); cursor: pointer; }
.tabla-tareas .c-play { width: 136px; white-space: nowrap; overflow: hidden; }
.tabla-tareas .c-persona { width: 165px; }
.tabla-tareas td.c-nombre { position: relative; }
.tabla-tareas .c-pmo { width: 140px; }
.tabla-tareas .c-num { width: 84px; }
.tabla-tareas .c-fecha { width: 120px; }
.tabla-tareas .c-estado { width: 145px; }
.tabla-tareas .c-horas { width: 96px; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13px; }
.tabla-tareas .c-acc { width: 40px; text-align: right; padding-right: 8px; }
.tabla-tareas td.c-persona .cel-select { max-width: 130px; }
.tabla-tareas td.c-pmo .cel-select, .tabla-tareas td.c-estado .cel-select { max-width: 100%; }
.nombre-y-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nombre-y-meta .meta { font-size: 12px; white-space: nowrap; }
.tabla-tareas input.cel-nombre, .tabla-tareas input.cel-num, .tabla-tareas input.cel-fecha, .tabla-tareas .cel-select, input.cel-nueva {
  border: 1px solid transparent; background: transparent; padding: 5px 6px; font-size: 14px; border-radius: 6px; }
.tabla-tareas input.cel-nombre { flex: 1; min-width: 120px; }
.tabla-tareas input:hover, .tabla-tareas .cel-select:hover { border-color: var(--borde); background: var(--panel); }
.tabla-tareas input.cel-num { width: 64px; text-align: right; }
.tabla-tareas input.cel-fecha { width: 22px; padding: 4px 2px; color: transparent; cursor: pointer; }
.tabla-tareas input.cel-fecha::-webkit-datetime-edit { display: none; }
.fecha-y-etq { display: inline-flex; align-items: center; gap: 4px; }
.cel-select { width: auto; max-width: 150px; cursor: pointer; }
.iteracion { font-size: 12.5px !important; font-weight: 600; border-radius: 999px !important; padding: 3px 10px !important; }
.c-gris { background: var(--gris-claro) !important; color: var(--suave) !important; }
.c-naranja { background: #fde7d4 !important; color: #b4530a !important; }
.c-amarillo { background: #fdf3c4 !important; color: #8a6d00 !important; }
.c-verde { background: #d9f2e1 !important; color: #17793d !important; }
.c-azul { background: #dbe8fc !important; color: #1d4fb8 !important; }
.c-morado { background: #ece0fb !important; color: #6b30c4 !important; }
.c-rojo { background: #fbdcdc !important; color: #b42318 !important; }
@media (prefers-color-scheme: dark) {
  .c-naranja { background: #45290f !important; color: #fdba74 !important; }
  .c-amarillo { background: #3f3510 !important; color: #fde047 !important; }
  .c-verde { background: #12371f !important; color: #86efac !important; }
  .c-azul { background: #172a4d !important; color: #93c5fd !important; }
  .c-morado { background: #2e1c4a !important; color: #c4b5fd !important; }
  .c-rojo { background: #451a1a !important; color: #fca5a5 !important; }
}
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.abrir { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 1px solid var(--borde); background: var(--panel); color: var(--suave); font: inherit; font-size: 12px; cursor: pointer; opacity: 0; white-space: nowrap; padding: 2px 6px; border-radius: 6px; }
.fila-tarea:hover .abrir { opacity: 1; }
.abrir:hover { background: var(--panel); color: var(--texto); }
.bloqueada { font-size: 12px; }
.play-cel { display: inline-flex; align-items: center; gap: 3px; }
.play { border: 1px solid var(--borde); background: var(--panel); color: var(--acento); border-radius: 999px; min-width: 30px; height: 26px; padding: 0 8px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.play:hover { border-color: var(--acento); background: var(--acento-claro); }
.play.activo { background: var(--peligro); border-color: var(--peligro); color: #fff; font-weight: 600; }
.avatar.mini { width: 20px; height: 20px; font-size: 9px; }
.avatar.vivo { box-shadow: 0 0 0 2px var(--ok); }
.persona-cel { display: inline-flex; align-items: center; gap: 4px; }
.pasada { color: var(--peligro); font-weight: 600; }
.fila-nueva td { border-bottom: none; }
input.cel-nueva { width: 100%; color: var(--suave); }
input.cel-nueva:focus { color: var(--texto); background: var(--panel); }
.lista-estados { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fila-estado { display: flex; align-items: center; gap: 8px; width: 100%; }
.fila-estado input { flex: 1; }
.fila-estado select { width: auto; }
.barra-ficha { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.boton.finalizada { background: var(--ok-claro); color: var(--ok); border-color: var(--ok); }
.titulo-tarea { border: 1px solid transparent; resize: none; min-height: 0; overflow: hidden; padding: 4px 6px; }
.titulo-tarea:hover { border-color: var(--borde); }
.campos-ficha { display: flex; flex-direction: column; gap: 2px; }
.fila-ficha { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; min-height: 36px; }
.fila-ficha .etiqueta { color: var(--suave); font-size: 13.5px; }
.fila-ficha .valor > select, .fila-ficha .valor > input[type=date] { width: auto; max-width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 5px; background: var(--gris-claro); border-radius: 999px; padding: 2px 4px 2px 8px; font-size: 13px; }
.chip .avatar { width: 20px; height: 20px; font-size: 9px; margin-left: -4px; }
.chip button { border: none; background: none; cursor: pointer; color: var(--suave); font-size: 15px; line-height: 1; padding: 0 4px; }
.chip.hecha { color: var(--ok); }
input.corto { width: 90px; }
input.corto-largo { width: 200px; }
.descripcion { white-space: pre-wrap; border: 1px solid transparent; border-radius: 8px; padding: 8px; cursor: text; line-height: 1.5; }
.descripcion:hover { border-color: var(--borde); }
.descripcion a { color: var(--acento); word-break: break-all; }
.fila-sub { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.fila-sub .nombre { flex: 1; }
.fila-sub.hecha .nombre { text-decoration: line-through; color: var(--suave); }
.fila-sub input[type=checkbox] { accent-color: var(--ok); width: 16px; height: 16px; }
.horas-ficha { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.horas-ficha .peque { width: 100%; }
.cab-comentario { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
@media (max-width: 600px) { .fila-ficha { grid-template-columns: 1fr; gap: 2px; padding: 4px 0; } .barra-tareas .buscar-tareas { width: 100%; } }

.reloj-vivo { font-variant-numeric: tabular-nums; }
.play.activo { animation: latido 2s ease-in-out infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 4px var(--peligro-claro); } }

.nombre-lider { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.c-pmo .persona-cel { max-width: 100%; overflow: hidden; }
/* Bandeja de entrada */
.grupo-bandeja { max-width: 820px; }
.grupo-bandeja h3 { font-size: 14px; font-weight: 600; margin: 18px 0 8px; }
.lista.bandeja { padding: 0 14px; }
.aviso-bandeja { justify-content: flex-start !important; }
.aviso-bandeja .cuerpo-aviso { flex: 1; min-width: 0; }
.aviso-bandeja.nuevo .cuerpo-aviso > div:first-child { font-weight: 600; }
.aviso-bandeja .boton.mini { opacity: 0; }
.aviso-bandeja:hover .boton.mini, .aviso-bandeja:focus-within .boton.mini { opacity: 1; }
@media (hover: none) { .aviso-bandeja .boton.mini { opacity: 1; } }
.aviso-bandeja.clic:hover { background: var(--gris-claro); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.icono-aviso { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 14px; font-weight: 700; }
.icono-aviso.t-mencion { background: var(--acento-claro); color: var(--acento); }
.icono-aviso.t-tarea { background: var(--ok-claro); color: var(--ok); }
.icono-aviso.t-registro { background: var(--aviso-claro); color: var(--aviso); }
.punto-nuevo { width: 9px; height: 9px; border-radius: 50%; background: var(--acento); flex: none; }
.insignia-menu { margin-left: auto; background: var(--peligro); color: #fff; font-size: 11px; font-weight: 700; border-radius: 9px; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 5px; }
/* Asistente IA */
.chat-cont { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.chat-ia { display: flex; flex-direction: column; gap: 10px; min-height: 240px; max-height: 60vh; overflow-y: auto; padding: 4px; }
.chat-ia .vacio { margin: auto; text-align: center; }
.burbuja { max-width: 85%; padding: 10px 14px; border-radius: 14px; line-height: 1.5; font-size: 14.5px; overflow-wrap: anywhere; }
.burbuja.yo { align-self: flex-end; background: var(--acento); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.burbuja.ia { align-self: flex-start; background: var(--gris-claro); border-bottom-left-radius: 4px; }
.burbuja.ia p { margin: 0 0 6px; } .burbuja.ia p:last-child { margin-bottom: 0; }
.burbuja.ia ul { margin: 4px 0 6px; padding-left: 20px; }
.burbuja.ia a { color: var(--acento); font-weight: 600; }
.burbuja.error { background: var(--peligro-claro); color: var(--peligro); }
.burbuja.pensando { color: var(--suave); animation: latido-texto 1.4s ease-in-out infinite; }
@keyframes latido-texto { 50% { opacity: .45; } }
@media (prefers-color-scheme: dark) { .burbuja.yo { color: #0b1512; } }
.ejemplos { display: flex; flex-wrap: wrap; gap: 6px; }
.ejemplos .pastilla { font-size: 13px; }
.entrada-chat { display: flex; gap: 8px; align-items: flex-end; }
.entrada-chat textarea { min-height: 44px; flex: 1; }
/* Hoy (rediseño): barra de fichaje compacta, mis tareas y columna lateral */
.recorta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-fichaje { display: flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px 12px 18px; margin-bottom: 18px; flex-wrap: wrap; }
.bf-estado { display: flex; align-items: center; gap: 10px; }
.bf-punto { width: 10px; height: 10px; border-radius: 50%; background: #aab2bf; flex: none; }
.bf-punto.activo { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-claro); }
.bf-titulo { font-weight: 600; }
.bf-titulo a { color: inherit; text-decoration: none; }
.bf-titulo a:hover { color: var(--acento); }
.bf-sub { color: var(--suave); font-size: 12.5px; }
.bf-sep { width: 1px; align-self: stretch; background: var(--borde); }
.bf-crono { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; }
.bf-texto { min-width: 0; }
.bf-botones { display: flex; gap: 8px; }
.play.grande { height: 34px; min-width: 40px; padding: 0 14px; font-size: 13px; }
.hoy-columnas { display: flex; gap: 18px; align-items: flex-start; }
.hoy-principal { flex: 1; min-width: 0; }
.hoy-lateral { width: 340px; flex: none; display: flex; flex-direction: column; gap: 14px; }
.hoy-lateral .panel, .hoy-principal .panel { margin-top: 0; }
.tarjeta-hoy { display: flex; flex-direction: column; gap: 10px; }
.tarjeta-hoy h2 { margin: 0; font-size: 15px; }
.tres-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tres-cifras .etq-cifra { font-size: 12px; color: var(--suave); }
.tres-cifras .cifra { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aviso-txt { color: var(--aviso); }
.cab-mini { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tarjeta-hoy .lista li { padding: 7px 0; font-size: 13px; }
.mini-avisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mini-avisos li { font-size: 13px; cursor: pointer; }
.mini-avisos li.nuevo > div:first-child { font-weight: 600; }
.mini-avisos li:hover > div:first-child { color: var(--acento); }
.mis-tareas-hoy { padding: 0; overflow: hidden; }
.cab-tareas-hoy { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--borde); }
.cab-tareas-hoy h2 { margin: 0; font-size: 16px; flex: 1; }
.grupo-hoy { padding: 12px 18px 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.grupo-hoy.vencidas { color: var(--peligro); }
.grupo-hoy.hoy { color: var(--ok); }
.fila-hoy { display: flex; align-items: center; gap: 12px; padding: 8px 18px; border-bottom: 1px solid var(--borde); cursor: pointer; }
.fila-hoy:hover { background: var(--gris-claro); }
.fila-hoy .completar { width: 17px; height: 17px; accent-color: var(--ok); flex: none; cursor: pointer; }
.fh-nombre { flex: 1; min-width: 0; font-weight: 500; }
.fh-fecha { width: 64px; flex: none; }
.fh-horas { width: 78px; flex: none; text-align: right; }
.pildora { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 9px; white-space: nowrap; flex: none; }
@media (max-width: 1100px) { .hoy-columnas { flex-direction: column; align-items: stretch; } .hoy-lateral { width: auto; } }
@media (max-width: 600px) {
  .barra-fichaje { padding: 12px; gap: 12px; }
  .bf-sep { display: none; }
  .bf-estado { flex: 1; }
  .bf-crono { order: 3; flex-basis: 100%; }
  .fila-hoy { padding: 10px 12px; gap: 10px; }
  .fila-hoy .pildora, .fh-horas { display: none; }
  .cab-tareas-hoy { padding: 12px; flex-wrap: wrap; }
}

/* Reloj de la cabecera de Hoy */
.reloj-cabecera { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 7px 16px 7px 10px; box-shadow: var(--sombra); }
.reloj-cabecera svg { flex: none; }
.rc-fondo { fill: none; stroke: var(--acento-claro); stroke-width: 4; }
.rc-avance { fill: none; stroke: var(--acento); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .6s; }
.rc-agujas { fill: none; stroke: var(--texto); stroke-width: 2; stroke-linecap: round; }
.rc-hora { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.rc-dos { color: var(--acento); }
.rc-seg { font-size: 14px; color: var(--suave); font-weight: 600; margin-left: 4px; }
.rc-sub { font-size: 11.5px; color: var(--suave); margin-top: 3px; white-space: nowrap; }

/* Mi equipo: próximas vacaciones y carga */
.mi-equipo:empty { display: none; }
.mi-equipo { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.cab-equipo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cab-equipo h2 { margin: 0; font-size: 18px; }
.insignia-rol { font-size: 11px; font-weight: 600; color: var(--tele); background: var(--tele-claro); border-radius: 999px; padding: 2px 8px; }
.sel-equipo { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.sel-equipo select { width: auto; font-size: 13px; padding: 5px 8px; }
.equipo-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.tarjeta-hoy h3 { margin: 0; font-size: 15px; }
.gantt-cab { display: grid; grid-template-columns: 110px repeat(4, minmax(0, 1fr)); font-size: 11.5px; color: var(--suave); border-bottom: 1px solid var(--borde); padding-bottom: 6px; }
.gantt-fila { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; min-height: 30px; }
.gantt-persona { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; min-width: 0; }
.gantt-pista { position: relative; height: 22px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), var(--gris-claro) calc(25% - 1px), var(--gris-claro) 25%); }
.gantt-hoy { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--peligro); z-index: 1; }
.gantt-barra { position: absolute; top: 2px; height: 18px; min-width: 6px; background: var(--acento-claro); color: var(--acento); border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent); border-radius: 6px; font-size: 11px; font-weight: 600; display: flex; align-items: center; padding: 0 6px; white-space: nowrap; overflow: hidden; }
.gantt-barra.pendiente { background: var(--aviso-claro); color: var(--aviso); border-style: dashed; border-color: var(--aviso); }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--suave); }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.ley-vac { background: var(--acento-claro); border: 1px solid var(--acento); }
.ley-pend { background: var(--aviso-claro); border: 1px dashed var(--aviso); }
.leyenda i.ley-hoy { width: 2px; border-radius: 0; background: var(--peligro); }
.ley-baja { background: var(--acento); } .ley-media { background: #d97706; } .ley-alta { background: var(--peligro); }
.carga-fila { display: grid; grid-template-columns: 110px minmax(0, 1fr) 84px; align-items: center; gap: 10px; min-height: 30px; }
.carga-barra { height: 10px; border-radius: 999px; background: var(--gris-claro); overflow: hidden; }
.carga-barra span { display: block; height: 100%; border-radius: 999px; background: var(--acento); }
.carga-barra span.media { background: #d97706; } .carga-barra span.alta { background: var(--peligro); }
.carga-num { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.peligro-txt { color: var(--peligro); }
/* Pestaña Carga de Tareas */
.carga-lista { padding: 4px 0; margin: 12px 0; }
.carga-detalle { border-bottom: 1px solid var(--borde); }
.carga-detalle:last-child { border-bottom: none; }
.carga-fila.grande { grid-template-columns: 200px minmax(0, 1fr) 96px 300px; padding: 10px 18px; cursor: pointer; list-style: none; }
.carga-fila.grande::-webkit-details-marker { display: none; }
.carga-fila.grande:hover { background: var(--gris-claro); }
.carga-detalle[open] > .carga-fila { background: var(--gris-claro); }
.carga-extra { text-align: right; }
.carga-tareas { margin: 0; padding: 0 18px 8px 54px; }
.carga-tareas li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 110px 70px; gap: 10px; padding: 7px 0; font-size: 13px; }
.carga-tareas .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .equipo-columnas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .carga-fila.grande { grid-template-columns: 120px minmax(0, 1fr) 84px; padding: 10px 12px; }
  .carga-extra { grid-column: 1 / -1; text-align: left; }
  .carga-tareas { padding: 0 12px 8px; }
  .carga-tareas li { grid-template-columns: minmax(0, 1fr) auto; }
  .carga-tareas li > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 600px) {
  .reloj-cabecera { padding: 6px 12px 6px 8px; }
  .rc-hora { font-size: 20px; }
  .reloj-cabecera svg { width: 30px; height: 30px; }
  .gantt-cab, .gantt-fila { grid-template-columns: 76px repeat(4, minmax(0, 1fr)); }
  .gantt-fila { grid-template-columns: 76px minmax(0, 1fr); }
  .carga-fila { grid-template-columns: 76px minmax(0, 1fr) 76px; }
}
.gantt-etq { position: absolute; top: 3px; font-size: 11px; font-weight: 600; color: var(--acento); white-space: nowrap; }
.gantt-etq.pendiente { color: var(--aviso); }
.equipo-columnas .panel { margin-top: 0; }
/* Fotos de perfil */
.avatar.con-foto { padding: 0; overflow: hidden; background: var(--gris-claro); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.avatar.grande { width: 72px; height: 72px; font-size: 24px; }
.bloque-foto { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; margin-bottom: 14px; }
.bloque-foto .avatar { grid-row: span 2; }
.bloque-foto .ayuda { margin: 0; }

/* ---------- Rediseño: piezas comunes ---------- */
.pila { display: flex; flex-direction: column; gap: 16px; }
.pila > .panel { margin: 0; }
.seg { display: inline-flex; background: var(--gris-claro); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: none; background: none; font: inherit; font-size: 13px; color: var(--suave); padding: 5px 12px; border-radius: 7px; cursor: pointer; font-weight: 500; }
.seg button.on { background: var(--campo); color: var(--texto); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.titulo-periodo { font-size: 15px; }
.filtro-mini { width: auto; }
.kpis-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.kpi-c { padding: 14px 18px; border-left: 1px solid var(--borde); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi-c:first-child { border-left: none; }
.kpi-c .etq-cifra { font-size: 12px; color: var(--suave); }
.kpi-c .cifra { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-c .cifra .de { font-size: 14px; font-weight: 500; color: var(--suave); }
.kpi-c .barra { margin-top: 4px; }
.barra.doble { display: flex; }
.barra.doble span { background: var(--acento); border-radius: 0; }
.barra.doble i { display: block; height: 100%; background: var(--tele); }
.ok-txt { color: var(--ok); }
@media (max-width: 760px) { .kpis-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-c:nth-child(3) { border-left: none; } .kpi-c:nth-child(n+3) { border-top: 1px solid var(--borde); } }

/* Fichajes: línea de tiempo */
.tl { padding: 0; overflow: hidden; }
.tl-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 6px; flex-wrap: wrap; }
.tl-cab h2 { margin: 0; font-size: 15px; }
.tl-fila { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 18px; border-top: 1px solid var(--borde); }
.tl-fila.cab { border-top: none; min-height: 22px; }
.tl-fila.hoy { background: var(--acento-claro); }
.tl-fila.tenue { min-height: 30px; color: var(--suave); font-size: 12.5px; opacity: .75; }
.tl-dia { width: 76px; flex: none; font-weight: 500; }
.tl-nota { font-size: 12px; }
.tl-eje { flex: 1; position: relative; height: 16px; font-size: 11.5px; color: var(--suave); }
.tl-eje span { position: absolute; transform: translateX(-50%); }
.tl-pista { flex: 1; position: relative; height: 30px; border-radius: 6px; background-color: var(--fondo);
  background-image: linear-gradient(90deg, transparent calc(100% - 1px), var(--borde) calc(100% - 1px)); }
.tl-tramo { position: absolute; top: 4px; bottom: 4px; border: none; border-radius: 5px; background: var(--acento); cursor: pointer; padding: 0; }
.tl-tramo.teletrabajo { background: var(--tele); }
.tl-tramo.vivo { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 12px); }
.tl-tramo.editado { outline: 2px dashed var(--aviso); outline-offset: 2px; }
.tl-tramo:hover { filter: brightness(1.1); }
.tl-ahora { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--peligro); }
.tl-ausencia { flex: 1; height: 24px; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; font-size: 12px; font-weight: 600; color: var(--acento);
  background: repeating-linear-gradient(135deg, var(--acento-claro) 0 8px, transparent 8px 16px); }
.tl-total { width: 140px; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-variant-numeric: tabular-nums; }
.tl-dif { font-size: 12.5px; width: 56px; text-align: right; }
.tl-ley { padding: 12px 18px; border-top: 1px solid var(--borde); }
.ley-of { background: var(--acento); } .ley-tele { background: var(--tele); } .leyenda i.ley-edit { border: 1.5px dashed var(--aviso); }
@media (max-width: 600px) { .tl-fila { padding: 0 10px; gap: 8px; } .tl-dia { width: 54px; font-size: 12.5px; } .tl-total { width: 92px; } .tl-dif { display: none; } .tl-cab .suave { display: none; } }

/* Horas: hoja semanal */
.barra.apilada { display: flex; height: 8px; margin-top: 6px; }
.barra.apilada span { height: 100%; }
.kpi-c .leyenda { margin-top: 4px; gap: 10px; }
.hoja-semana { padding: 0; overflow: hidden; }
.hoja-semana .leyenda { padding: 10px 16px 14px; margin: 0; }
table.hs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.hs th, table.hs td { padding: 8px 10px; border-bottom: 1px solid var(--borde); text-align: left; font-weight: 500; }
table.hs thead th { font-size: 12px; color: var(--suave); background: var(--gris-claro); }
table.hs thead th small { display: block; font-size: 15px; color: var(--texto); font-weight: 600; }
table.hs .hs-t { min-width: 220px; }
.hs-nom { font-weight: 600; }
.hs-job { display: flex; align-items: center; margin-top: 2px; }
.hs-job .punto { width: 8px; height: 8px; }
table.hs .hs-c { text-align: center; width: 9%; padding: 4px; }
table.hs .hs-c.hoy { background: color-mix(in srgb, var(--acento) 7%, transparent); }
table.hs .hs-c.finde { opacity: .75; }
table.hs .num { text-align: right; white-space: nowrap; }
.hs-b { width: 100%; min-height: 34px; border: 1px dashed transparent; border-radius: 8px; background: none; font: inherit; color: var(--suave); cursor: pointer; }
.hs-b:hover { border-color: var(--borde); background: var(--campo); color: var(--texto); }
.hs-b.lleno { background: color-mix(in srgb, var(--acento) 10%, var(--campo)); color: var(--texto); font-weight: 600; border-style: solid; border-color: color-mix(in srgb, var(--acento) 25%, transparent); }
table.hs tfoot th { font-size: 12.5px; color: var(--suave); }
table.hs tfoot tr:first-child > * { border-top: 2px solid var(--borde); }
table.hs tfoot tr.falta > * { border-bottom: none; }
.chip-falta { border: none; border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: color-mix(in srgb, var(--aviso) 16%, transparent); color: var(--aviso); }
.chip-falta:hover { background: color-mix(in srgb, var(--aviso) 26%, transparent); }
@media (max-width: 760px) { .kpis-fila { grid-template-columns: 1fr 1fr; } table.hs .hs-t { min-width: 150px; } }

/* Vacaciones */
.rejilla-vac { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.rejilla-vac.tres { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.rejilla-vac > .panel { margin: 0; }
.cab-panel { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 8px; }
.cab-panel h2 { margin: 0; }
.saldo-fila { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.anillo-caja { position: relative; width: 132px; height: 132px; flex: none; }
.anillo-caja svg { width: 100%; height: 100%; }
.anillo-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anillo-centro b { font-size: 34px; line-height: 1; }
.anillo-centro span { font-size: 12px; color: var(--suave); }
.saldo-ley { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; font-size: 13.5px; }
.saldo-ley li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.saldo-ley li span { flex: 1; }
.saldo-ley li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.saldo-ley li.total { border-top: 1px solid var(--borde); margin-top: 4px; padding-top: 8px; color: var(--suave); }
.saldo-extra { margin-top: 10px; }
.aus-lista { list-style: none; margin: 0; padding: 0; }
.aus-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borde); }
.aus-item:first-child { border-top: none; }
.aus-info { flex: 1; min-width: 0; }
.aus-fecha { width: 44px; flex: none; text-align: center; border-radius: 10px; background: var(--gris-claro); padding: 5px 0; line-height: 1.1; }
.aus-fecha b { display: block; font-size: 18px; }
.aus-fecha span { font-size: 11px; color: var(--suave); text-transform: uppercase; }
.aviso-solape { margin-top: 5px; font-size: 12.5px; color: var(--aviso); background: color-mix(in srgb, var(--aviso) 10%, transparent); border-radius: 6px; padding: 3px 8px; display: inline-block; }
.aprobar-vac .aus-item { align-items: flex-start; }
.cal-cont { --cal-nom: 190px; overflow-x: auto; margin-top: 8px; }
.cal-fila { display: grid; align-items: stretch; min-width: 760px; min-height: 36px; border-bottom: 1px solid var(--borde); }
.cal-fila > * { grid-row: 1; }
.cal-fila.cab { min-height: 0; font-size: 12px; color: var(--suave); }
.cal-fila.cab .cal-d { display: flex; flex-direction: column; align-items: center; padding: 4px 0; font-weight: 600; color: var(--texto); }
.cal-fila.cab .cal-d small { font-weight: 400; color: var(--suave); font-size: 10.5px; }
.cal-nom { display: flex; align-items: center; gap: 8px; font-size: 13px; padding-right: 8px; overflow: hidden; white-space: nowrap; position: sticky; left: 0; background: var(--panel); z-index: 2; }
.cal-nom > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cal-nom .avatar { width: 24px; height: 24px; font-size: 10px; flex: none; }
.cal-d { border-left: 1px solid color-mix(in srgb, var(--borde) 60%, transparent); }
.cal-d.finde { background: var(--gris-claro); }
.cal-d.festivo { background: var(--aviso-claro); }
.cal-d.hoy { box-shadow: inset 2px 0 0 var(--peligro); }
.cal-barra { align-self: center; height: 22px; margin: 0 2px; border-radius: 6px; font-size: 11px; font-weight: 600; color: #fff; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; z-index: 1; }
.cal-barra.vac, .cal-ley.vac { background: var(--acento); }
.cal-barra.otra, .cal-ley.otra { background: var(--tele); }
.cal-barra.pend, .cal-ley.pend { background: var(--acento-claro); color: var(--acento); border: 1.5px dashed var(--acento); }
.cal-grupo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 14px 0 6px; color: var(--texto); min-width: 760px; }
@media (max-width: 1100px) { .rejilla-vac, .rejilla-vac.tres { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cal-cont { --cal-nom: 120px; } }

/* Tareas: atajos, cabecera de job y barra de horas */
.chips-filtro { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 12px; }
.atajo { border: 1px solid var(--borde); background: var(--panel); color: var(--texto); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.atajo b { font-weight: 600; color: var(--suave); font-size: 12px; }
.atajo:hover:not(:disabled) { border-color: var(--acento); }
.atajo:disabled { opacity: .45; cursor: default; }
.atajo.on { background: var(--texto); border-color: var(--texto); color: #fff; }
.atajo.on b { color: rgba(255, 255, 255, .75); }
.atajo.urgente:not(.on) b { color: var(--peligro); }
.cab-job { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cab-job-nom { font-weight: 700; }
.cab-job .avatar { width: 22px; height: 22px; font-size: 9.5px; }
.cab-job-horas { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cab-job-horas .mini-barra { width: 70px; margin: 0; }
.mini-barra { height: 4px; border-radius: 999px; background: var(--gris-claro); overflow: hidden; margin-top: 4px; }
.mini-barra span { display: block; height: 100%; background: var(--acento); border-radius: inherit; }
.mini-barra.justa span { background: var(--aviso); }
.mini-barra.pasada span { background: var(--peligro); }

/* Equipo */
.kpi-filtro { border: none; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-left: 1px solid var(--borde); }
.kpi-filtro:first-child { border-left: none; border-radius: 12px 0 0 12px; }
.kpi-filtro:last-child { border-radius: 0 12px 12px 0; }
.kpi-filtro:hover { background: var(--gris-claro); }
.kpi-filtro.on { background: color-mix(in srgb, var(--acento) 9%, transparent); box-shadow: inset 0 -3px 0 var(--acento); }
.equipo-cuerpo { display: flex; gap: 16px; align-items: flex-start; }
.equipo-cuerpo > :first-child { flex: 1; min-width: 0; }
.tabla-equipo { padding: 0; }
.tabla-equipo table td, .tabla-equipo table th { padding-left: 14px; }
.tabla-equipo tr.sel td { background: color-mix(in srgb, var(--acento) 8%, transparent); }
.ficha-lateral { width: 420px; flex: none; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 18px; position: sticky; top: 16px; }
.fl-cerrar { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 22px; color: var(--suave); cursor: pointer; }
.fl-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.fl-cab .avatar { width: 56px; height: 56px; font-size: 18px; }
.fl-cab h2 { margin: 0 0 2px; font-size: 17px; }
.fl-hoy { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; background: var(--gris-claro); border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; }
.fl-datos { display: grid; gap: 0; }
.fl-dato { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--borde); }
.fl-dato b { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.fl-acciones { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.fl-acciones > .boton { width: 100%; justify-content: center; text-align: center; }
.fl-acciones-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fl-acciones-2 .boton { justify-content: center; text-align: center; }
.fl-vac { margin-top: 14px; border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fl-vac-t { font-size: 13px; font-weight: 600; }
.dato-fijo { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; padding: 0 12px; border: 1px dashed var(--borde); border-radius: 10px; color: var(--texto); background: var(--fondo); }
.fl-log { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--borde); display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--suave); }
.fl-log b { font-size: 12px; font-weight: 600; color: var(--aviso); }
.fl-vac-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fl-vac-c { background: var(--fondo); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.fl-vac-c b { font-size: 20px; font-weight: 650; }
.fl-vac-c span { font-size: 12px; color: var(--suave); }
.nombre-enlace { border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.nombre-enlace:hover { color: var(--acento); text-decoration: underline; }
@media (max-width: 1000px) { .equipo-cuerpo { flex-direction: column; align-items: stretch; } .ficha-lateral { width: auto; position: static; align-self: stretch; } }
.con-ficha .tabla-equipo th:nth-child(n+5), .con-ficha .tabla-equipo td:nth-child(n+5), .con-ficha .tabla-equipo th:nth-child(3), .con-ficha .tabla-equipo td:nth-child(3) { display: none; }

/* Informes */
.rejilla-inf { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rejilla-inf.una { grid-template-columns: 1fr; }
.rejilla-inf > .panel { margin: 0; }
.barras-h { display: grid; gap: 8px; }
.bh-fila { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.bh-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-pista { height: 10px; border-radius: 999px; background: var(--gris-claro); overflow: hidden; }
.bh-val { display: block; height: 100%; background: var(--acento); border-radius: inherit; }
.bh-val.bajo { background: var(--aviso); }
.bh-num { font-variant-numeric: tabular-nums; color: var(--suave); min-width: 44px; text-align: right; }
.tabla-inf .tabla-cont { box-shadow: none; }
.pct-celda { display: inline-flex; align-items: center; gap: 8px; }
.pct-celda .mini-barra { width: 50px; margin: 0; }
.etq-mini { font-size: 11px; margin-left: 6px; }
.kpi-c .cifra.peque-cifra { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .rejilla-inf { grid-template-columns: 1fr; } }

/* Clientes y jobs */
.cj-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.cj-tarjeta { margin: 0 !important; padding: 16px 18px 8px; }
.cj-tarjeta.inactivo { opacity: .65; }
.cj-cab { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
.cj-cab .avatar { width: 38px; height: 38px; }
.cj-ini { width: 38px; height: 38px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center; flex: none; }
.cj-ini.gris { background: var(--gris-claro); color: var(--suave); }
.cj-tit { flex: 1; min-width: 0; }
.cj-tit h2 { margin: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-job { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--borde) 60%, transparent); font-size: 13.5px; }
.cj-job:last-child { border-bottom: none; }
.cj-job.inactivo { opacity: .6; }
.cj-job-nom { flex: 1; min-width: 0; text-align: left; border: none; background: none; font: inherit; color: var(--texto); cursor: pointer; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-job-nom:hover { color: var(--acento); }
.cj-codigo { font-size: 11px; font-weight: 600; background: var(--gris-claro); color: var(--suave); border-radius: 5px; padding: 1px 6px; margin-right: 6px; }
.cj-lider { max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cj-lider .avatar { width: 20px; height: 20px; font-size: 9px; }
.cj-horas { width: 64px; text-align: right; font-variant-numeric: tabular-nums; color: var(--suave); }
.menu-puntos { position: relative; }
.menu-puntos > summary { list-style: none; cursor: pointer; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--suave); font-size: 18px; line-height: 1; user-select: none; }
.menu-puntos > summary::-webkit-details-marker { display: none; }
.menu-puntos > summary:hover, .menu-puntos[open] > summary { background: var(--gris-claro); color: var(--texto); }
.menu-puntos-lista { position: absolute; right: 0; top: 32px; z-index: 30; background: var(--campo); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14); padding: 4px; min-width: 190px; display: flex; flex-direction: column; }
.menu-puntos-lista button { border: none; background: none; font: inherit; font-size: 13.5px; text-align: left; padding: 8px 10px; border-radius: 7px; cursor: pointer; color: var(--texto); }
.menu-puntos-lista button:hover { background: var(--gris-claro); }
.menu-puntos-lista button.peligro-txt { color: var(--peligro); }
@media (max-width: 600px) { .cj-rejilla { grid-template-columns: 1fr; } .cj-lider { display: none; } }

/* Ajustes */
.ajustes-cont { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.ajustes-cuerpo > .panel, .ajustes-cuerpo .pila > .panel { margin: 0; scroll-margin-top: 16px; }
.menu-ajustes { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.menu-ajustes button { border: none; background: none; font: inherit; font-size: 13.5px; text-align: left; padding: 8px 12px; border-radius: 8px; color: var(--suave); cursor: pointer; }
.menu-ajustes button:hover { background: var(--gris-claro); color: var(--texto); }
.menu-ajustes button.on { background: var(--panel); color: var(--texto); font-weight: 600; box-shadow: inset 3px 0 0 var(--acento); }
.barra-guardar { position: sticky; bottom: 16px; z-index: 20; margin-top: 16px; display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  background: var(--texto); color: #fff; border-radius: 12px; padding: 10px 12px 10px 18px; box-shadow: 0 10px 30px rgba(16, 24, 40, .25); }
.barra-guardar span { margin-right: auto; font-weight: 500; }
.barra-guardar .boton:not(.principal) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
@media (max-width: 900px) { .ajustes-cont { grid-template-columns: 1fr; } .menu-ajustes { position: static; flex-direction: row; overflow-x: auto; } .menu-ajustes button { white-space: nowrap; } }

/* Carga: teóricas, estimadas e imputadas por persona */
.kpis-fila.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.carga-tres { display: flex; gap: 14px; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; }
.carga-tres span { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.carga-tres i { font-style: normal; font-size: 10.5px; color: var(--suave); }
.carga-tres b { font-variant-numeric: tabular-nums; }
.carga-tres span.suave { flex-direction: row; font-size: 11.5px; }
@media (max-width: 860px) { .carga-tres { grid-column: 1 / -1; justify-content: flex-start; } .kpis-fila.cinco { grid-template-columns: 1fr 1fr; } }
.hs-b.solo { display: inline-flex; align-items: center; justify-content: center; cursor: default; }
/* Vacaciones: departamentos con más de la mitad fuera */
.cal-cob { min-height: 14px; border-bottom: none; }
.cal-cob .cal-nom { font-size: 11px; }
.cal-d.cob-alta, .leyenda i.cob-alta { background: color-mix(in srgb, var(--peligro) 55%, transparent); }
.cal-d.cob-pend, .leyenda i.cob-pend { background: color-mix(in srgb, var(--aviso) 45%, transparent); }
.cob-aviso { margin-left: 10px; font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--peligro); }

/* Subtareas con ficha propia y plantillas */
.fila-sub { flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--borde) 60%, transparent); }
.fila-sub .cel-select { max-width: 150px; }
.sub-abrir { border: none; background: none; font: inherit; color: var(--texto); text-align: left; cursor: pointer; padding: 0; min-width: 120px; }
.sub-abrir:hover { color: var(--acento); text-decoration: underline; }
.volver-padre { padding-left: 0; margin-bottom: 2px; }
.subs-plantilla { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.fila-sub-pl { display: flex; gap: 8px; align-items: center; }
.fila-sub-pl .sp-horas { max-width: 70px; }
.volver-padre { align-self: flex-start; display: block; text-align: left; margin-left: 0; }
.sub-marca { color: var(--suave); margin-right: 4px; flex: none; cursor: help; }
/* Menciones con @ */
.con-menciones { position: relative; }
.menciones-lista { position: absolute; left: 0; top: 100%; margin-top: 4px; z-index: 40; background: var(--campo); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .16); padding: 4px; min-width: 240px; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; }
.menciones-lista[hidden] { display: none; }
.mencion-op { display: flex; align-items: center; gap: 8px; border: none; background: none; font: inherit; font-size: 13.5px; text-align: left; padding: 6px 8px; border-radius: 7px; cursor: pointer; color: var(--texto); }
.mencion-op .avatar { width: 22px; height: 22px; font-size: 9.5px; }
.mencion-op.on, .mencion-op:hover { background: var(--gris-claro); }
.mencion { color: var(--acento); font-weight: 600; }
.con-menciones { width: 100%; } .con-menciones textarea { width: 100%; display: block; }

/* Roles, áreas, centros y clientes externos */
.etq-iter { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--gris-claro); color: var(--suave); }
.rol-etq { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--gris-claro); color: var(--suave); white-space: nowrap; }
.rol-etq.rol-admin { background: var(--acento-claro); color: var(--acento); }
.rol-etq.rol-area { background: #e7f1fd; color: #1d5fb4; }
.rol-etq.rol-responsable { background: var(--tele-claro); color: var(--tele); }
.rol-etq.rol-cliente { background: var(--aviso-claro); color: var(--aviso); }
.rol-etq.rol-interna { background: var(--peligro-claro); color: var(--peligro); }
@media (prefers-color-scheme: dark) { .rol-etq.rol-area { background: #16304f; color: #93c5fd; } }
.comentario.interno { border-left: 3px solid var(--peligro); padding-left: 10px; }
.cab-comentario .rol-etq { margin-left: 2px; }
.lista-checks { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: auto; }
.pila-av { display: inline-flex; }
.pila-av .avatar + .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); }
.centros-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.centros-lista > .panel { margin-top: 0; }
.centros-lista + * { margin-top: 12px; }
.centro-tarjeta { text-align: left; display: flex; flex-direction: column; gap: 6px; cursor: pointer; font: inherit; color: inherit; border: 1px solid var(--borde); }
.centro-tarjeta:hover { border-color: var(--acento); }
.centro-tarjeta h2 { margin: 0; font-size: 17px; }
.plantillas-cliente { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.plantilla-op { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); color: var(--texto); font: inherit; cursor: pointer; }
.plantilla-op.on { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); background: var(--acento-claro); }
.mas-lista .mas-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); padding: 16px 4px 4px; font-weight: 600; }
tr.hecha td { opacity: .65; }
.etq.hecha-job { background: var(--ok-claro, #e3f4ea); color: var(--ok, #17793d); font-size: 11px; margin-left: 8px; padding: 1px 8px; }
.tarjeta-proyecto .acciones-proy { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
/* Clientes y jobs: lista agrupada */
.cj-filtros .cj-buscar { width: 260px; max-width: 100%; flex: 0 1 260px; }
.cj-filtros .cj-sel { width: 190px; flex: 0 0 auto; max-width: 100%; }
.cj-tabla { max-height: calc(100vh - 210px); overflow: auto; }
.cj-tabla thead th { position: sticky; top: 0; z-index: 1; }
.cj-tabla td { white-space: nowrap; }
.cj-tabla .cj-key { width: 150px; font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.cj-tabla th.cj-lid { width: 220px; } .cj-tabla .cj-tar { width: 90px; } .cj-tabla .cj-hor { width: 80px; } .cj-tabla .cj-acc { width: 44px; text-align: right; }
.cj-tabla tr.cj-fila { cursor: pointer; }
.cj-tabla tr.cj-fila:hover td { background: color-mix(in srgb, var(--acento) 5%, transparent); }
.cj-tabla tr.cj-fila.inactivo td { opacity: .7; }
.cj-tabla .cj-nom { padding-left: 34px; white-space: normal; min-width: 220px; }
.enlace-fila { border: none; background: none; padding: 0; font: inherit; font-weight: 500; color: var(--texto); cursor: pointer; text-align: left; }
.enlace-fila:hover { color: var(--acento); }
.cj-tabla tr.cj-grupo td { background: var(--gris-claro); padding: 8px 12px; border-bottom: 1px solid var(--borde); }
.cj-grupo-in { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cj-grupo-in .menu-puntos summary { padding: 2px 6px; }
.cj-cnom { font-size: 14px; }
.cj-plegar { border: none; background: none; width: 22px; height: 22px; border-radius: 6px; cursor: pointer; color: var(--suave); font-size: 13px; transition: transform .15s; }
.cj-plegar.plegado { transform: rotate(-90deg); }
.cj-ckey { font-size: 11px; font-weight: 600; background: var(--acento-claro, #e6f4f2); color: var(--acento); border-radius: 5px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.cj-ckey.falta { background: var(--aviso-claro); color: var(--aviso); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Ficha lateral (diálogo pegado a la derecha) */
dialog.lado { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(680px, 100vw); border-radius: 0; }
dialog.lado form { min-height: 100%; box-sizing: border-box; padding: 22px 24px; }
dialog.lado .pie { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borde); }
.fj-cab { display: flex; flex-direction: column; gap: 6px; margin-top: -6px; }
.fj-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fj-dato { background: var(--fondo); border-radius: 10px; padding: 10px 12px; }
.fj-dato strong { font-size: 18px; display: block; margin-top: 2px; }
@media (max-width: 700px) { .cj-tabla .cj-key, .cj-tabla .cj-tar, .cj-tabla .cj-hor, .cj-tabla td.num { display: none; } .cj-filtros .cj-buscar { flex: 1 1 100%; } .cj-tabla .cj-nom { padding-left: 12px; } }

/* Prioridad de tareas */
.etq-prio { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.etq-prio.p-urgente { background: var(--peligro-claro); color: var(--peligro); }
.etq-prio.p-alta { background: var(--aviso-claro); color: var(--aviso); }
select.sel-prio.p-urgente { color: var(--peligro); font-weight: 600; }
select.sel-prio.p-alta { color: var(--aviso); font-weight: 600; }
select.sel-prio.p-ninguna { color: var(--suave); }
select.sel-prio option { color: var(--texto); font-weight: 400; }
.prio-ficha select { max-width: 220px; }

/* Adjuntos de tareas */
.adjuntos { display: flex; flex-direction: column; gap: 8px; border: 1px dashed transparent; border-radius: var(--radio); padding: 2px; }
.adjuntos.soltar { border-color: var(--acento); background: var(--acento-claro); }
.lista-adjuntos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.adjunto { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); min-width: 0; }
.adjunto .icono { flex-shrink: 0; }
.adjunto .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.adjunto .suave { flex-shrink: 0; white-space: nowrap; }
.zona-subir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) { .adjunto { flex-wrap: wrap; } .adjunto .nombre { flex-basis: calc(100% - 40px); } }

/* Registro de errores (Ajustes) */
.lista-errores .msg-error { font-weight: 500; overflow-wrap: anywhere; }
.pre-error { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; background: var(--gris-claro); padding: 8px 10px; border-radius: 8px; max-height: 240px; overflow: auto; margin: 6px 0 0; }

/* Informe de carga de trabajo */
:root {
  --cg-hueco: #dce8fb; --cg-hueco-t: #1d4690; --cg-ok: #dcefe8; --cg-ok-t: #0c5a4c; --cg-justo: #fbecc8; --cg-justo-t: #7a4f00;
  --cg-desb: #f9cdb4; --cg-desb-t: #8a2f06; --cg-muy: #b4410c; --cg-muy-t: #ffffff; --cg-azul: #1d4690; --cg-azul-barra: #3b6fd4; --cg-naranja: #d9692a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cg-hueco: #1b2b4a; --cg-hueco-t: #a9c4f5; --cg-ok: #123a32; --cg-ok-t: #8fe0c8; --cg-justo: #3d300f; --cg-justo-t: #f5cf7a;
    --cg-desb: #4a2414; --cg-desb-t: #f7b896; --cg-muy: #e0652a; --cg-muy-t: #1a0b03; --cg-azul: #8fb2f2; --cg-azul-barra: #5b8ce6; --cg-naranja: #e8834a;
  }
}
.fuerte { font-weight: 600; }
td.centro, th.centro { text-align: center; }
.enlace-btn { border: none; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--acento); cursor: pointer; text-align: left; }
.enlace-btn:hover { text-decoration: underline; }
.panel.sin-relleno { padding: 0; overflow: hidden; }
.cg-azul { color: var(--cg-azul); }
.cg-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px 12px; }
.cg-cab > div:first-child { flex: 1 1 320px; min-width: 0; }
.cg-cab h2 { margin: 0 0 2px; }
.cg-cab.sin-pad { padding: 0 0 12px; }
.tabla-carga { min-width: 900px; }
.tabla-carga th, .tabla-carga td { padding: 5px 4px; vertical-align: middle; }
.tabla-carga th:first-child { padding-left: 18px; text-align: left; min-width: 170px; }
.tabla-carga td:last-child, .tabla-carga th:last-child { padding-right: 18px; }
.tabla-carga .cg-total th, .tabla-carga .cg-total td { background: var(--gris-claro); }
.cg { display: block; min-width: 58px; border-radius: 6px; padding: 5px 2px; font-weight: 700; font-size: 13px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cg small { display: block; font-size: 10px; font-weight: 500; opacity: .85; }
.cg-hueco { background: var(--cg-hueco); color: var(--cg-hueco-t); }
.cg-ok { background: var(--cg-ok); color: var(--cg-ok-t); }
.cg-justo { background: var(--cg-justo); color: var(--cg-justo-t); }
.cg-desb { background: var(--cg-desb); color: var(--cg-desb-t); }
.cg-muy { background: var(--cg-muy); color: var(--cg-muy-t); }
.cg-vac { background: repeating-linear-gradient(45deg, var(--gris-claro) 0 4px, var(--borde) 4px 8px); color: var(--suave); font-weight: 500; }
.cg-nada { color: var(--suave); font-weight: 400; }
.cg-total .cg { padding: 8px 2px; }
.cg-leyenda { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 18px 14px; border-top: 1px solid var(--borde); }
.panel .cg-leyenda { border-top: 0; padding: 0; }
.panel.sin-relleno > .cg-leyenda { border-top: 1px solid var(--borde); padding: 12px 18px 14px; }
.cg-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cg-leyenda i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.cg-leyenda i.cg-linea { height: 0; border-top: 2px dashed var(--texto); border-radius: 0; }
.barra span.cg-barra-bien { background: var(--ok); }
.barra span.cg-barra-justo { background: var(--aviso); }
.barra span.cg-barra-mal, .barra span.cg-barra-mal { background: var(--cg-naranja); }
.cg-alertas { display: flex; flex-direction: column; gap: 8px; }
.cg-alerta { display: flex; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--gris-claro); }
.cg-alerta.n0 { background: var(--peligro-claro); }
.cg-alerta.n1 { background: var(--aviso-claro); }
.cg-alerta .peque { margin-top: 2px; }
.cg-alerta .enlace-btn { margin-top: 4px; }
.cg-ico { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: var(--cg-azul-barra); }
.cg-alerta.n0 .cg-ico { background: var(--peligro); }
.cg-alerta.n1 .cg-ico { background: var(--aviso); }
.cg-cal { display: grid; grid-template-columns: 56px repeat(5, minmax(0, 1fr)); gap: 5px; font-size: 12px; }
.cg-cal-d { text-align: center; color: var(--suave); font-weight: 600; }
.cg-cal-s { color: var(--suave); align-self: center; }
.cg-dia { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 42px; border-radius: 8px; background: var(--gris-claro); }
.cg-dia small { font-size: 10px; opacity: .8; }
.cg-dia strong { font-size: 15px; }
.cg-dia.pasado { opacity: .45; }
.cg-dia.algo { background: var(--panel); border: 1px solid var(--borde); }
.cg-dia.medio { background: var(--cg-justo); color: var(--cg-justo-t); }
.cg-dia.pico { background: var(--cg-naranja); color: #fff; }
.cg-dia.hoy { outline: 2px solid var(--acento); outline-offset: -2px; }
.cg-balance { display: flex; flex-direction: column; gap: 6px; }
.cg-bal-fila { display: grid; grid-template-columns: minmax(100px, 150px) minmax(0, 1fr) minmax(0, 1fr) 70px; align-items: center; font-size: 13px; }
.cg-bal-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; font-weight: 500; color: var(--texto); }
.cg-bal-izq, .cg-bal-der { display: flex; height: 16px; }
.cg-bal-izq { justify-content: flex-end; border-right: 1px solid var(--borde); }
.cg-bal-izq i { background: var(--cg-naranja); border-radius: 4px 0 0 4px; }
.cg-bal-der i { background: var(--cg-azul-barra); border-radius: 0 4px 4px 0; }
.cg-bal-fila .num { text-align: right; }
.cg-cal-fila { border-bottom: 1px solid var(--borde); }
.cg-cal-fila summary { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none; }
.cg-cal-fila summary::-webkit-details-marker { display: none; }
.cg-cal-n { font-size: 21px; font-weight: 700; min-width: 44px; text-align: right; }
.cg-cal-lista { margin: 0 0 10px 56px; padding: 0; list-style: none; display: grid; gap: 3px; }
.cg-como { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 24px; }
.cg-como p { margin: 4px 0; }
.cg-persona { display: flex; align-items: center; gap: 14px; }
.cg-persona .avatar { width: 52px; height: 52px; font-size: 18px; }
.cg-barras { display: grid; gap: 10px; min-width: 520px; }
.cg-col { display: flex; flex-direction: column; }
.cg-pista { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: 1px solid var(--borde); }
.cg-pct { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.cg-pila { width: 64%; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; }
.cg-pila i { display: block; }
.cg-cap { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--texto); opacity: .7; }
.cg-col-pie { text-align: center; font-size: 12px; padding-top: 6px; }
.cg-estado { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--gris-claro); color: var(--texto); }
.cg-estado.e-vencida { background: var(--cg-muy); color: var(--cg-muy-t); }
.cg-estado.e-riesgo { background: var(--cg-desb); color: var(--cg-desb-t); }
.cg-estado.e-plazo { background: var(--cg-ok); color: var(--cg-ok-t); }
.cg-estado.e-supera { background: var(--cg-justo); color: var(--cg-justo-t); }
@media (max-width: 900px) { .kpis-fila.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tabla-cg-tareas td:nth-child(1), .tabla-cg-tareas td:nth-child(2) { white-space: normal; min-width: 180px; }
.tabla-cg-tareas td:nth-child(1) { min-width: 240px; }
.cg-pista .cg-pct { position: relative; z-index: 1; background: var(--panel); padding: 0 4px; border-radius: 4px; }
.cg-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; position: relative; padding: 12px 16px; }
.cg-periodo .seg button { padding: 7px 14px; }
.cg-rango { display: flex; align-items: center; gap: 8px; }
.cg-rango .boton.mini { min-width: 34px; }
.cg-pop { position: absolute; top: calc(100% + 6px); left: 16px; z-index: 20; width: min(400px, calc(100vw - 48px)); background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, .18); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cg-pop-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cg-pop-fechas .campo, .cg-pop-fechas label { margin: 0; }
.pastilla.mini { font-size: 12px; padding: 4px 10px; }
th.cg-col-hoy { background: var(--acento-claro); }
.cg-ent-dia { margin-bottom: 12px; }
.cg-ent-cab { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--borde); }
.cg-ent-n { font-size: 12px; padding: 1px 9px; border-radius: 999px; background: var(--gris-claro); }
.cg-ent-n.medio { background: var(--cg-justo); color: var(--cg-justo-t); }
.cg-ent-n.pico { background: var(--cg-naranja); color: #fff; }
.cg-ent-lista { list-style: none; margin: 0; padding: 4px 0 0; display: grid; gap: 2px; font-size: 13px; }
.cg-ent-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.cg-ent-lista li .suave { white-space: nowrap; }
.cg-reasig { display: flex; flex-direction: column; max-height: 380px; overflow: auto; border: 1px solid var(--borde); border-radius: 10px; }
.cg-reasig-fila { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--borde); cursor: pointer; margin: 0; }
.cg-reasig-fila:last-child { border-bottom: 0; }
.cg-reasig-fila:hover { background: var(--gris-claro); }
.cg-reasig-fila input { width: auto; margin: 0; }
.cg-reasig-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cg-reasig-cifras { display: flex; align-items: center; gap: 6px; }
.cg-reasig-cifras .cg { min-width: 48px; padding: 3px 4px; font-size: 12px; text-align: center; }
.cg-tarea-enlace { color: var(--texto); background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.cg-fecha { width: auto; padding: 4px 6px; font: inherit; font-size: 13px; color: inherit; }
.cg-tarea-enlace:hover { color: var(--acento); text-decoration: underline; }

/* Cabecera de Tareas (v52): pestañas como selector, menú «Más» y filtros en panel */
.seg-grande { padding: 4px; border-radius: 10px; }
.seg-grande button { font-size: 14px; padding: 7px 16px; border-radius: 8px; white-space: nowrap; }
.seg-grande .seg-mas { font-size: 16px; padding: 5px 12px; }
.tareas-pestanas { margin-bottom: 16px; overflow-x: auto; scrollbar-width: thin; }
.barra-tareas { gap: 8px; align-items: center; }
.barra-tareas .buscar-tareas { width: 340px; max-width: 100%; }
.desplegable { position: relative; }
.desplegable > summary { list-style: none; cursor: pointer; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary .boton { display: inline-flex; align-items: center; gap: 6px; pointer-events: none; }
.desplegable-caja { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, .14); padding: 8px; min-width: 200px; }
.desplegable.derecha .desplegable-caja { left: auto; right: 0; }
.menu-lista { display: flex; flex-direction: column; }
.menu-lista button { text-align: left; border: none; background: none; font: inherit; font-size: 14px; color: var(--texto); padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.menu-lista button:hover { background: var(--gris-claro); }
.panel-filtros { display: flex; flex-direction: column; gap: 10px; padding: 8px; width: 280px; font-size: 13px; }
.campo-filtro { display: flex; flex-direction: column; gap: 4px; color: var(--suave); }
.campo-filtro select, .campo-filtro select.filtro-mini { width: 100%; max-width: none; }
.boton.con-filtros { border-color: var(--acento); background: var(--acento-claro); color: var(--acento); }
.etq-filtro { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 12px; background: var(--panel); border: 1px solid var(--borde); border-radius: 999px; font-size: 13px; }
.etq-filtro button { border: none; background: none; color: var(--suave); font-size: 16px; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; line-height: 1; }
.etq-filtro button:hover { background: var(--gris-claro); color: var(--texto); }
@media (max-width: 600px) { .panel-filtros { width: min(280px, calc(100vw - 48px)); } }

/* Jobs, página del job y Clientes (v53) */
.kpis-jobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpis-jobs > .kpi-jobs { text-align: left; font: inherit; color: inherit; padding: 12px 16px; margin: 0; cursor: default; }
.kpi-jobs .etq-cifra { font-size: 12px; color: var(--suave); }
.kpi-jobs .cifra { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tabla-jobs .jb-avance { width: 170px; }
.tabla-jobs .jb-horas { width: 230px; }
.jb-par { display: flex; align-items: center; gap: 10px; }
.jb-par > .peque { min-width: 40px; white-space: nowrap; }
.jb-horas .jb-par > .peque { min-width: 96px; text-align: right; }
.jb-barra { flex: 1; height: 6px; border-radius: 3px; background: var(--gris-claro); overflow: hidden; display: block; min-width: 50px; }
.jb-barra > span { display: block; height: 100%; background: var(--acento); border-radius: 3px; }
.jb-barra > span.mal { background: var(--peligro); }
.jb-barra.vacia { background: none; }
.miga { color: var(--suave); margin-bottom: 6px; }
.miga a { color: var(--acento); text-decoration: none; }
.kpis-job { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpis-job .kpi-c { border-left: 1px solid var(--borde); margin: 0; }
a.cab-job-nom { color: inherit; text-decoration: none; }
a.cab-job-nom:hover { color: var(--acento); text-decoration: underline; }
.cl-cont { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cl-cont > :first-child { flex: 999 1 560px; min-width: 0; }
.cl-ficha { flex: 0 1 300px; position: sticky; top: 12px; margin: 0 !important; }
.cl-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cl-cifras > div { background: var(--gris-claro); border-radius: 10px; padding: 10px 12px; }
.cl-cifras strong { font-size: 18px; }
.cl-jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cl-jobs li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.cl-jobs a { color: var(--texto); text-decoration: none; }
.cl-jobs a:hover { color: var(--acento); }
.tabla-clientes tr.elegida td { background: var(--acento-claro); }
@media (max-width: 760px) { .kpis-jobs, .kpis-job { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-ficha { position: static; } }
.tabla-clientes td { white-space: normal; } .tabla-clientes td.cj-key, .tabla-clientes td.num { white-space: nowrap; } .tabla-clientes th { white-space: nowrap; }
.cg-periodo + .filtros { margin-top: 12px; }
/* Cliente: una tarjeta por job con su avance */
.jobs-cliente { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
.job-cliente { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; margin: 0; color: inherit; text-decoration: none; }
.job-cliente:hover { border-color: var(--acento); }
.job-cliente .jb-barra { flex: none; }
.rol-etq.rol-colaborador { background: var(--acento-claro, #e6f4f2); color: var(--acento); }
/* Selector de rango de fechas */
.boton-rango { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.boton-rango svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.rango-caja { display: flex; gap: 16px; padding: 4px; }
.rc-atajos { display: flex; flex-direction: column; gap: 2px; min-width: 140px; border-right: 1px solid var(--borde); padding-right: 12px; }
.rc-atajos button { text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 8px; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.rc-atajos button:hover { background: var(--gris-claro); }
.rc-atajos button.on { background: var(--acento-claro); color: var(--acento); font-weight: 600; }
.rc-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rc-meses { display: flex; gap: 20px; }
.rc-titulo { font-weight: 600; text-align: center; margin-bottom: 6px; }
.rc-rejilla { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px 0; }
.rc-sem { font-size: 11px; color: var(--suave); text-align: center; padding: 4px 0; }
.rc-dia { height: 32px; border: 0; background: none; font: inherit; font-size: 13px; color: inherit; cursor: pointer; border-radius: 0; font-variant-numeric: tabular-nums; }
.rc-dia:hover { outline: 1px solid var(--acento); outline-offset: -1px; border-radius: 8px; }
.rc-dia.en { background: var(--acento-claro); }
.rc-dia.ini, .rc-dia.fin { background: var(--acento); color: #fff; border-radius: 8px; }
.rc-dia.hoy { font-weight: 700; text-decoration: underline; }
@media (max-width: 720px) {
  .rango-caja { flex-direction: column; }
  .rc-atajos { flex-direction: row; flex-wrap: wrap; border-right: 0; padding-right: 0; }
  .rc-meses > .rc-mes:first-child { display: none; }
}
.etq-ambito { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--gris-claro); color: var(--suave); margin-left: 4px; vertical-align: 1px; }
.etq-ambito.de-centro { background: var(--acento-claro); color: var(--acento); }
/* Ventanas: título con la × de cerrar arriba a la derecha */
.dlg-cab { display: flex; align-items: flex-start; gap: 12px; position: sticky; top: 0; z-index: 3; background: var(--panel); padding: 8px 0; margin: -8px 0; box-shadow: 0 -24px 0 var(--panel); }
.dlg-cab > h2 { flex: 1; min-width: 0; margin: 0; }
.dlg-arriba { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dlg-arriba[hidden] { display: none; }
.dlg-arriba .boton { padding-top: 6px; padding-bottom: 6px; }
.dlg-cerrar { flex: none; width: 32px; height: 32px; margin: -6px -8px 0 0; border: none; background: none; border-radius: 8px; font-size: 24px; line-height: 1; color: var(--suave); cursor: pointer; }
.dlg-cerrar:hover { background: var(--gris-claro); color: var(--texto); }

/* Importar (Administración) */
.imp-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 16px; align-items: start; }
.imp-panel { padding: 0; overflow: hidden; }
.imp-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 18px; }
.imp-cab h2 { margin: 0; font-size: 19px; flex: 1; }
.imp-chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.imp-chip.ok { background: var(--ok-claro); color: var(--ok); }
.imp-chip.aviso { background: var(--aviso-claro); color: var(--aviso); }
.imp-chip.gris { background: var(--gris-claro); color: var(--suave); }
.imp-chip.nuevo { background: var(--acento-claro); color: var(--acento); }
.imp-periodo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 18px 14px; }
.imp-periodo input { width: auto; }
.imp-rejilla > .panel { margin-top: 0; }
.imp-fila { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--borde); }
.imp-q { min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
@media (max-width: 600px) { .imp-fila { grid-template-columns: minmax(0, 1fr) auto; } .imp-fila .imp-estado { grid-column: 1; grid-row: 2; } .imp-fila > .boton { grid-row: 1 / span 2; grid-column: 2; } }
.imp-resultado:empty { display: none; }
.imp-resultado .alerta { margin: 4px 0 0; }
.imp-detalle { margin-top: 4px; font-size: 13px; }
.imp-detalle summary { cursor: pointer; color: var(--acento); }
.imp-detalle h3 { font-size: 13px; margin: 10px 0 4px; }
.imp-lanzar { margin-top: 16px; }
.imp-pasos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.imp-paso { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.imp-historial { margin-top: 16px; }
.imp-proyectos { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto; }
.imp-proyecto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.imp-proyecto select { width: 100%; }
.imp-proyecto-opc { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 600px) { .imp-proyecto { grid-template-columns: 1fr; } }

/* ---------- Hoy (v78): barra con más aire, reloj en el lateral, bloques de alto fijo, recordatorio, calendario del mes ---------- */
.barra-fichaje { padding: 20px 24px; gap: 28px; margin-bottom: 20px; }
.barra-fichaje .bf-estado { gap: 12px; min-width: 200px; }
.barra-fichaje .bf-titulo { font-size: 16px; }
.barra-fichaje .bf-sub { margin-top: 3px; }
.barra-fichaje .bf-crono { gap: 14px; }
.barra-fichaje .bf-botones { gap: 12px; }
.hoy-columnas { align-items: stretch; gap: 20px; }
.hoy-lateral { width: 360px; gap: 18px; }
.hoy-principal { position: relative; min-height: 520px; }
.hoy-bloques { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 18px; }
.hoy-bloques > .panel { margin-top: 0; min-height: 0; display: flex; flex-direction: column; }
.hoy-bloques > .mis-tareas-hoy { flex: 1.25 1 0; }
.hoy-bloques > .imputado-hoy { flex: 1 1 0; }
.hoy-bloques.solo-imputado > .imputado-hoy { flex: 1 1 0; }
.hoy-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mis-tareas-hoy > .boton.enlace { flex: none; }
.reloj-lateral { padding: 16px 18px; }
.reloj-lateral .reloj-cabecera { border: 0; box-shadow: none; padding: 0; background: none; justify-content: center; gap: 16px; }
.reloj-lateral .reloj-cabecera svg { width: 56px; height: 56px; }
.reloj-lateral .rc-hora { font-size: 46px; }
.reloj-lateral .rc-seg { font-size: 20px; }
.reloj-lateral .rc-sub { font-size: 12.5px; margin-top: 6px; white-space: normal; }
.alerta.recordatorio { display: flex; align-items: center; gap: 12px; background: var(--acento-claro); color: var(--acento); border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent); }
.alerta.recordatorio .rec-texto { flex: 1; display: flex; align-items: center; gap: 8px; font-weight: 500; }
.icono-svg { display: inline-flex; flex: none; }
.cumples { display: flex; align-items: center; gap: 12px; background: #fff6dc; border: 1px solid #f3d98c; color: #7a4f00; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.acciones-aviso { display: flex; gap: 6px; flex: none; }
.calendario-mes .cab-mini { flex-wrap: wrap; gap: 10px; }
.cal-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-nav b { min-width: 120px; text-align: center; }
.cal-scroll { overflow-x: auto; }
.cal-tabla { min-width: 860px; }
.cal-fila { display: grid; align-items: center; min-height: 36px; border-top: 1px solid var(--borde); }
.cal-cab { border-top: 0; padding-bottom: 6px; align-items: end; }
.cal-num { grid-row: 1; text-align: center; font-size: 11px; color: var(--suave); line-height: 1.3; }
.cal-num b { display: block; font-size: 12px; color: var(--texto); }
.cal-num.hoy, .cal-num.hoy b { color: var(--peligro); font-weight: 700; }
.cal-fila > .gantt-persona { grid-column: 1; grid-row: 1; }
.cal-dia { grid-row: 1; align-self: stretch; position: relative; }
.cal-dia.finde { background: var(--gris-claro); }
.cal-dia.festivo { background: #fdecea; }
.cal-dia.hoy::after { content: ''; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: var(--peligro); }
.cal-barra { grid-row: 1; z-index: 1; height: 22px; margin: 0 2px; border-radius: 6px; font-size: 11px; font-weight: 600; display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; border: 1.5px solid; box-sizing: border-box; }
.cal-barra.vac { background: var(--acento-claro); border-color: var(--acento); color: var(--acento); }
.cal-barra.pend { background: var(--panel); border-color: var(--aviso); border-style: dashed; color: var(--aviso); }
.cal-barra.per { background: #e8edfb; border-color: #3b5bdb; color: #24409c; }
.cal-barra.otra { background: var(--gris-claro); border-color: #8a94a6; color: #4a5566; }
.ley-cal { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 6px; border: 1.5px solid transparent; box-sizing: border-box; }
.ley-cal.vac { background: var(--acento-claro); border-color: var(--acento); }
.ley-cal.pend { border: 1.5px dashed var(--aviso); }
.ley-cal.per { background: #e8edfb; border-color: #3b5bdb; }
.ley-cal.otra { background: var(--gris-claro); border-color: #8a94a6; }
.ley-cal.hoy { width: 2px; background: var(--peligro); border: 0; }
.ley-cal.finde { background: var(--gris-claro); }
.ley-cal.festivo { background: #fdecea; }
@media (max-width: 1100px) {
  .hoy-principal { min-height: 0; }
  .hoy-bloques { position: static; }
  .hoy-bloques > .panel { flex: none; }
  .hoy-scroll { max-height: 420px; }
  .hoy-lateral { width: auto; }
}
@media (max-width: 700px) {
  .barra-fichaje { padding: 14px; gap: 14px; }
  .reloj-lateral .rc-hora { font-size: 36px; }
  .aviso-bandeja { flex-wrap: wrap; }
}
@media (prefers-color-scheme: dark) {
  .cumples { background: #3a3018; border-color: #6b5a26; color: #f5dc9a; }
  .cal-barra.per, .ley-cal.per { background: #1f2a4a; color: #b8c6f5; }
  .cal-dia.festivo, .ley-cal.festivo { background: #3a2222; }
}
.aviso-bandeja .acciones-aviso .boton.mini { opacity: 1; }
.mis-tareas-hoy > .boton.enlace { align-self: flex-start; }

/* «Ver como» (v81) */
.boton.ver-como { max-width: 260px; }
.boton.ver-como b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton.ver-como.activo { background: #fdf3e2; border-color: #f1d7a8; color: #6b3d05; }
.vc-caja { width: 340px; max-width: calc(100vw - 32px); }
.vc-caja input[type=search] { width: 100%; box-sizing: border-box; margin-top: 6px; }
.vc-tit { font-size: 12px; color: var(--suave); padding: 2px 4px 0; }
.vc-lista { margin-top: 6px; max-height: min(480px, 60vh); overflow: auto; }
.vc-gr { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); padding: 10px 10px 4px; }
.vc-op { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--texto); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.vc-op:hover, .vc-op:focus-visible { background: var(--fondo); }
.vc-op.on { background: var(--acento-claro); }
.vc-av { width: 28px; height: 28px; border-radius: 50%; background: var(--acento-claro); color: var(--acento); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vc-txt { display: flex; flex-direction: column; min-width: 0; }
.vc-rol { font-size: 12px; color: var(--suave); }
.vc-pie { font-size: 12px; color: var(--suave); margin: 8px 4px 2px; }
.franja-vc { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; background: #2A3463; color: #fff; padding: 8px 24px; min-height: 44px; box-sizing: border-box; font-size: 14px; }
.franja-vc .vc-franja-txt { flex: 1; min-width: 0; }
.franja-vc .boton { background: #fff; color: #2A3463; border-color: #fff; flex-shrink: 0; }
body.ver-como .menu { top: 44px; height: calc(100vh - 44px); }
.bf-nota-vc { font-size: 12px; color: var(--suave); max-width: 240px; align-self: center; }
@media (max-width: 700px) { .franja-vc { padding: 8px 16px; font-size: 13px; gap: 10px; } .boton.ver-como { max-width: 180px; } }
.acc-comentario { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.acc-comentario .boton.enlace.mini { padding: 2px 6px; min-height: 0; font-size: 12px; }
.acc-comentario .boton.peligro { color: var(--peligro); }
.comentario textarea { width: 100%; box-sizing: border-box; margin: 4px 0 6px; }
/* Tareas recurrentes (v89) */
.control-repetir .fila-rep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.extra-rep { display: inline-flex; align-items: center; gap: 6px; }
.dias-rep { display: inline-flex; gap: 4px; }
.dia-rep { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--borde); background: var(--panel); color: var(--texto); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.dia-rep.on { background: var(--acento); border-color: var(--acento); color: #fff; }
.num-rep { width: 64px; }
.marca-repetir { color: var(--acento); font-weight: 700; margin-left: 4px; cursor: help; }
@media (prefers-color-scheme: dark) { .dia-rep.on { color: #0b1512; } }
.control-repetir select { width: auto; max-width: 100%; }
.cj-acc { width: 36px; text-align: right; }
/* Barra de filtros común (Tareas, Jobs, Clientes) */
.seg-grande button { display: inline-flex; align-items: center; gap: 6px; }
.seg button .bf-n { font-weight: 600; font-size: 12px; color: var(--suave); background: var(--borde); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.seg button.on .bf-n { background: var(--acento-claro); color: var(--acento); }
.bf-barra { gap: 8px; align-items: center; margin-bottom: 10px; }
.bf-buscar { position: relative; display: inline-flex; align-items: center; flex: 1 1 200px; min-width: 160px; max-width: 340px; margin: 0; }
.bf-buscar .icono { position: absolute; left: 11px; color: var(--suave); pointer-events: none; }
.bf-buscar input { width: 100%; padding-left: 34px; padding-right: 34px; }
.bf-nf { background: var(--acento); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 0 7px; line-height: 18px; margin-left: 2px; }
.bf-hueco { flex: 1; }
.bf-contador { white-space: nowrap; font-variant-numeric: tabular-nums; }
.filtros select.bf-agrupar, select.bf-agrupar { box-sizing: border-box; width: 136px; min-height: 36px; font-size: 13px; font-weight: 600; padding: 7px 10px; margin: 0; }
.job-de-tarea { display: block; flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-job { cursor: pointer; }
.tarjeta-job .tj-cab { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 24px; }
.tarjeta-job .nombre .etq { margin-left: 6px; }
.tj-col { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tj-col .cj-ckey { font-size: 11px; }
@media (max-width: 700px) { .bf-buscar { flex-basis: 100%; max-width: none; } .bf-hueco { display: none; } }
.nombre-y-meta:has(.job-de-tarea) { flex-wrap: wrap; row-gap: 0; }
/* Filtros de varios valores (casillas; áreas arriba y personas debajo) */
.panel-filtros { width: 320px; max-height: min(70vh, 620px); overflow-y: auto; }
.multi { display: flex; flex-direction: column; gap: 4px; }
.multi-buscar { width: 100%; padding: 5px 8px; font-size: 13px; }
.multi-lista { max-height: 180px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 8px; padding: 4px; background: var(--campo); }
.multi-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); padding: 6px 6px 2px; }
.multi-op { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; color: var(--texto); font-size: 13px; cursor: pointer; margin: 0; font-weight: 400; }
.multi-op:hover { background: var(--gris-claro); }
.multi-op input { width: auto; margin: 0; flex: none; }
.multi-op.area span { font-weight: 600; }
.acento-txt { color: var(--acento); font-weight: 600; }
.vista-multi .multi-lista { max-height: 150px; }
@media (max-width: 600px) { .panel-filtros { width: min(320px, calc(100vw - 48px)); } }
/* Un botón por filtro en la barra */
.boton.bf-filtro { width: 136px; justify-content: space-between; gap: 6px; font-size: 13px; font-weight: 600; padding: 7px 12px; min-height: 36px; white-space: nowrap; overflow: hidden; }
.boton.bf-filtro .icono { width: 13px; height: 13px; color: var(--suave); }
.boton.bf-filtro.act { border-style: solid; border-color: var(--acento); background: var(--acento-claro); color: var(--acento); }
/* Con algo elegido el botón crece para que se lea (hasta 300 px; más, con puntos suspensivos). */
.boton.bf-filtro.act { justify-content: flex-start; width: auto; min-width: 136px; max-width: 260px; }
.boton.bf-filtro.act b { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Atajos (Urgentes, Vencidas…) con el aspecto de las pestañas; a su derecha, casillas como «Ver finalizadas». */
.bf-atajos { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.bf-pestanas { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.bf-pestanas .tareas-pestanas { margin-bottom: 0; min-width: 0; }
.bf-dcha { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.seg-atajos { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.seg-atajos button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 10px; }
@media (max-width: 700px) { .bf-atajos { flex-wrap: wrap; } .seg-atajos { flex-basis: 100%; } }
.seg-atajos button:disabled { opacity: .45; cursor: default; }
.seg button .bf-n.rojo, .seg button.on .bf-n.rojo { background: var(--peligro-claro); color: var(--peligro); }
.seg-grande .icono { width: 13px; height: 13px; color: var(--suave); }
.bf-quitar { pointer-events: auto; border: none; background: none; color: inherit; font-size: 16px; line-height: 1; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; margin-right: -4px; }
.bf-quitar:hover { background: rgba(0, 0, 0, .08); }
.panel-filtro-uno { width: 280px; padding: 6px; }
.panel-filtro-uno .multi-lista { max-height: 300px; }
@media (max-width: 600px) { .panel-filtro-uno { width: min(280px, calc(100vw - 48px)); } }
.bf-check { font-size: 13px; margin: 0 4px; white-space: nowrap; }

/* Ficha del job: horas con y sin tarea */
.kpi-horas-job { text-align: left; font: inherit; color: inherit; cursor: pointer; }
.kpi-horas-job:hover, .kpi-horas-job.act { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.kh-cab { display: flex; justify-content: space-between; gap: 8px; }
.kh-ver { color: var(--acento); font-weight: 600; }
.kh-sin, .barra.apilada span.kh-sin { background: #9fb3d1; }
.leyenda i.kh-sin, .barra.apilada span.kh-sin { background: #9fb3d1; }
.kh-pasado { margin-left: auto; font-weight: 600; }
.sin-tarea-job { margin-top: 12px; padding: 0; }
.st-titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: var(--gris-claro); border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.st-tot { display: flex; gap: 14px; align-items: center; }
.tabla-sin-tarea { font-size: 14px; }
.tabla-sin-tarea td { padding: 8px 12px; border-bottom: 1px solid var(--borde); }
.tabla-sin-tarea tr:last-child td { border-bottom: none; }
.st-grupo { cursor: pointer; }
.st-grupo:hover td { background: var(--gris-claro); }
.st-flecha { display: inline-block; width: 16px; color: var(--suave); }
.st-nom { padding-left: 40px !important; }
.st-h { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-acc { width: 120px; text-align: right; }
.hj-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.hj-barra .sel-filtro { width: auto; }
.hj-barra .sel-filtro.act { border-color: var(--acento); background: var(--acento-claro); }
.hj-buscar { width: 240px; max-width: 100%; }
.hj-resumen { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.hj-resumen > .hj-caja { padding: 12px 16px; margin: 0; min-width: 0; }
.hj-caja .etq-cifra { font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.hj-meses { display: flex; align-items: flex-end; gap: 8px; height: 110px; }
.hj-mes { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--suave); height: 100%; min-width: 0; }
.hj-col { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.hj-col i { display: block; width: 100%; background: var(--acento); }
.hj-col i:first-child { border-radius: 4px 4px 0 0; }
.hj-col i.kh-sin, .barra.apilada span.kh-sin { background: #9fb3d1; }
.hj-fila { display: grid; grid-template-columns: 80px 1fr auto; gap: 10px; align-items: center; width: 100%; border: none; background: none; font: inherit; font-size: 13px; color: var(--texto); padding: 5px 4px; border-radius: 6px; cursor: pointer; text-align: left; }
.hj-fila:hover { background: var(--gris-claro); }
.hj-fila.act { background: var(--acento-claro); }
.hj-pista { height: 6px; border-radius: 3px; background: var(--gris-claro); overflow: hidden; }
.hj-pista i { display: block; height: 100%; background: var(--acento); }
.hj-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-horas-job { font-size: 14px; }
.tabla-horas-job th, .tabla-horas-job td { padding: 8px 12px; border-bottom: 1px solid var(--borde); text-align: left; }
.tabla-horas-job th.st-h, .tabla-horas-job td.st-h { text-align: right; }
.tabla-horas-job .c-check { width: 34px; text-align: center; }
.tabla-horas-job .hj-fecha { width: 80px; white-space: nowrap; }
.tabla-horas-job tr.sel td { background: var(--acento-claro); }
.hj-grupo { cursor: pointer; }
.hj-grupo td { background: var(--gris-claro); }
.hj-tarea { font-weight: 500; }
.etq-sin-tarea { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--gris-claro); color: var(--suave); margin-left: 6px; }
@media (max-width: 900px) { .hj-resumen { grid-template-columns: 1fr; } }

/* Saldo de horas del job: naranja por debajo del 20 %, naranja oscuro del 10 %, rojo del 5 % */
.kpis-job { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1300px) { .kpis-job { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cifra.saldo-n1 { color: #d97706; } .cifra.saldo-n2 { color: #b54708; } .cifra.saldo-n3 { color: var(--peligro); }
.saldo-barra { margin-top: 6px; }
.saldo-barra.saldo-n1 span { background: #d97706; } .saldo-barra.saldo-n2 span { background: #b54708; } .saldo-barra.saldo-n3 span { background: var(--peligro); }
@media (max-width: 760px) { .kpis-job { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Horas: imputado frente a fichado y reparto 3dids / clientes */
.barra.ok span { background: var(--ok); } .barra.aviso span { background: var(--aviso); } .barra.peligro span { background: var(--peligro); }
.barra.reparto { position: relative; overflow: visible; margin-top: 8px; }
.barra.reparto span { border-radius: 999px; }
.marca-obj { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--texto); border-radius: 1px; transform: translateX(-1px); }

/* Horas: tarjetas en cadena (fichado → imputado → reparto) */
.kpis-cadena { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); align-items: stretch; }
.kpis-cadena.solo { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
.kc { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px 18px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kc-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--suave); }
.kc-cab b { color: var(--texto); font-weight: 600; }
.kc-cifra { font-size: 28px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kc-cifra small { font-size: 13px; font-weight: 500; color: var(--suave); }
.kc-txt { font-size: 13px; color: var(--suave); }
.kc-pie { font-size: 12px; color: var(--suave); }
.kc-pista { position: relative; height: 8px; border-radius: 999px; background: var(--gris-claro); margin: 4px 0 2px; }
.kc-pista span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--acento); }
.kc-pista.ok span { background: var(--ok); } .kc-pista.aviso span { background: #d97706; } .kc-pista.peligro span { background: var(--peligro); }
.kc-pista i, .kc-reparto i { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--texto); border-radius: 1px; transform: translateX(-1px); }
.kc-reparto { position: relative; display: flex; height: 8px; border-radius: 999px; background: var(--gris-claro); margin: 4px 0 2px; }
.kc-reparto span { height: 100%; background: var(--acento); }
.kc-reparto span.kh-sin { background: #9fb3d1; }
.kc-reparto span:first-child { border-radius: 999px 0 0 999px; } .kc-reparto span:nth-child(2) { border-radius: 0 999px 999px 0; }
.kc-aviso { display: inline-block; width: max-content; max-width: 100%; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--aviso-claro); color: var(--aviso); }
.kc-flecha { display: flex; align-items: center; justify-content: center; color: var(--suave); font-size: 18px; }
@media (max-width: 900px) { .kpis-cadena, .kpis-cadena.solo { grid-template-columns: 1fr; gap: 10px; } .kc-flecha { display: none; } }
/* Ajustes › Pantalla de oficina: imagen de una noticia */
.noticia-img { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.noticia-img img { max-width: 160px; max-height: 100px; object-fit: contain; background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 6px; }
/* Ventanas más anchas en pantalla grande: tres campos por fila (los .c4 ocupan la fila entera) */
@media (min-width: 861px) {
  dialog:not(.estrecho) .campos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  dialog:not(.estrecho) .campos > * { grid-column: span 2; }
  dialog:not(.estrecho) .campos > .c4 { grid-column: span 6; }
}

/* Hoy › ¿Dónde está el equipo hoy? (oficina, teletrabajo, sin fichar, ausencias) */
.donde-equipo:empty { display: none; }
.donde-equipo { margin-top: 22px; }
.donde-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.donde-barra h2 { margin: 0; }
.donde-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.donde-col { --c: var(--suave); --c-claro: var(--gris-claro); background: color-mix(in srgb, var(--c-claro) 55%, var(--panel)); border-radius: var(--radio); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.donde-oficina { --c: var(--ok); --c-claro: var(--ok-claro); }
.donde-teletrabajo { --c: var(--tele); --c-claro: var(--tele-claro); }
.donde-sin_fichar { --c: var(--aviso); --c-claro: var(--aviso-claro); }
.donde-cab { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.donde-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.donde-n { margin-left: auto; font-weight: 650; color: var(--c); }
.donde-tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.donde-tarjeta .avatar:not(.con-foto) { background: var(--c-claro); color: var(--c); }
.donde-txt { display: flex; flex-direction: column; min-width: 0; }
.donde-nombre { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donde-mas { font: inherit; font-size: 13px; color: var(--acento); cursor: pointer; justify-content: center; }
@media (max-width: 1000px) { .donde-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .donde-cols { grid-template-columns: minmax(0, 1fr); } }
/* Fichajes: «+ Añadir olvidado» más grande (el doble de ancho) */
.boton.boton-doble { min-width: 260px; padding-top: 11px; padding-bottom: 11px; font-size: 15px; justify-content: center; }
@media (max-width: 600px) { .boton.boton-doble { min-width: 0; flex: 1 1 100%; order: -1; white-space: nowrap; } }
/* Calendario de Vacaciones: el fondo de cada día (fin de semana, festivo, hoy) ocupa toda la fila, no solo la cabecera */
.cal-cont .cal-fila { align-items: stretch; }
.cal-cont .cal-fila > .cal-d { align-self: stretch; }
.cal-cont .cal-barra { align-self: center; }
/* Navegación de mes (‹ Octubre ›) siempre junta, también en móvil */
.nav-mes { display: inline-flex; align-items: center; gap: 8px; }

/* Cabeceras de tabla que ordenan al pulsarlas. */
th.ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
th.ordenable:hover { color: var(--texto); }
th.ordenable::after { content: '↕'; margin-left: 4px; font-size: 11px; opacity: 0; }
th.ordenable:hover::after { opacity: .45; }
th.orden-asc::after { content: '↑'; opacity: 1; color: var(--acento); }
th.orden-desc::after { content: '↓'; opacity: 1; color: var(--acento); }
.cg-hoy { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 600; color: #0f766e; background: #e6f4f2; border-radius: 999px; padding: 1px 8px; vertical-align: 1px; }
/* Calendario (Gantt) de Carga de trabajo y Tareas */
.gantt { overflow-x: auto; border-top: 1px solid var(--borde); }
.gantt-in { display: flex; flex-direction: column; }
.gt-fila { display: grid; align-items: center; border-bottom: 1px solid #eef0f3; min-height: 36px; }
.gt-fila > * { min-width: 0; }
.gt-cab { background: #fafbfc; min-height: 46px; font-size: 12px; color: var(--suave, #5d6878); position: sticky; top: 0; z-index: 2; }
.gt-nom { padding: 0 12px; display: flex; align-items: center; gap: 8px; height: 100%; position: sticky; left: 0; background: inherit; z-index: 1; background-color: #fff; border-right: 1px solid #eef0f3; }
.gt-cab .gt-nom { background-color: #fafbfc; font-weight: 600; }
.gt-dia { text-align: center; line-height: 1.25; border-left: 1px solid #eef0f3; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.gt-dia b { color: var(--texto); font-size: 13px; }
.gt-dia.hoy { background: #e6f4f2; }
.gt-dia.hoy b, .gt-dia.hoy span { color: #0f766e; font-weight: 700; }
.gt-hueco { height: 100%; border-left: 1px solid #f3f4f6; }
.gt-hueco.hoy { background: rgba(15, 118, 110, .07); }
.gt-cel { padding: 3px; text-align: center; border-left: 1px solid #f3f4f6; }
.gt-cel.hoy { background: rgba(15, 118, 110, .07); }
.gt-cel .cg { width: 100%; box-sizing: border-box; }
.gt-persona, .gt-grupo { background: #fbfcfd; }
.gt-persona .gt-nom, .gt-grupo .gt-nom { background-color: #fbfcfd; font-weight: 600; }
.gt-pers { display: flex; align-items: center; gap: 6px; width: 100%; }
.gt-plegar { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-plegar:focus-visible, .gt-tn:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; border-radius: 4px; }
.gt-flecha { width: 12px; color: var(--suave, #5d6878); font-size: 12px; }
.gt-tn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 13px; padding-left: 20px; white-space: nowrap; overflow: hidden; min-width: 0; width: 100%; }
.gt-tn span { overflow: hidden; text-overflow: ellipsis; }
.gt-tn small { margin-left: auto; flex: none; }
.gt-tn:hover span { text-decoration: underline; }
.gt-tn.hecha span { text-decoration: line-through; color: var(--suave, #5d6878); }
.gt-bar { --c: #4f6bed; all: unset; box-sizing: border-box; height: 22px; margin: 0 2px; border-radius: 6px; background: var(--c); color: #fff; font-size: 11.5px; font-weight: 600; padding: 0 8px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
button.gt-bar { cursor: pointer; }
button.gt-bar:hover { filter: brightness(1.08); }
.gt-bar.corte-i { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.gt-bar.corte-d { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.gt-bar.venc, .gt-muestra.venc { background: #fdecea; color: #b42318; box-shadow: inset 0 0 0 1.5px #b42318; }
.gt-bar.raya, .gt-muestra.raya { background: repeating-linear-gradient(135deg, var(--c, #7a5af5) 0 6px, color-mix(in srgb, var(--c, #7a5af5) 55%, #fff) 6px 12px); }
.gt-bar.hecha, .gt-muestra.hecha { background: #e3e6eb; color: #5d6878; }
.gt-bar.solo-entrega { padding: 0 6px; }
.gt-bar.gt-tramo { height: 8px; padding: 0; opacity: .35; }
.cg-leyenda i.gt-muestra { width: 18px; height: 10px; border-radius: 3px; }
.gt-nav { display: flex; align-items: center; gap: 6px; }
.gt-nav strong { margin-left: 6px; }
/* Carga real: equipo y cola de cada persona */
.tabla-cr { width: 100%; border-collapse: collapse; }
.tabla-cr th { font-size: 12px; color: var(--suave, #5d6878); font-weight: 600; text-align: left; padding: 10px 14px; background: #fafbfc; border-bottom: 1px solid var(--borde); }
.tabla-cr td { padding: 10px 14px; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.tabla-cr tr.clicable { cursor: pointer; }
.tabla-cr tr.clicable:hover td { background: #fafbfc; }
.tabla-cr .num { text-align: right; }
.cr-barra { display: inline-block; width: 140px; height: 8px; border-radius: 4px; background: #eef0f3; overflow: hidden; vertical-align: middle; margin-right: 8px; }
.cr-barra span { display: block; height: 100%; border-radius: 4px; }
.cr-barra .bien { background: #16a37b; }
.cr-barra .justo { background: #e0a020; }
.cr-barra .mal { background: #d14334; }
.pill-cr { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pill-cr.p-rojo { background: #fdecea; color: #b42318; }
.pill-cr.p-gris { background: #eef0f3; color: #5d6878; }
.pill-cr.p-verde { background: #e6f4f2; color: #0f766e; }
.pill-cr.p-azul { background: #e8eefc; color: #2f4fb8; }
.pill-cr.p-naranja { background: #fdf3e2; color: #a15c07; }
.cr-cola { display: grid; gap: 4px; padding: 4px 18px 16px; }
.cr-dia { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cr-dia-cab { font-size: 11.5px; color: var(--suave, #5d6878); text-align: center; padding: 3px 0; }
.cr-dia.hoy .cr-dia-cab { color: #0f766e; font-weight: 700; background: #e6f4f2; border-radius: 6px; }
.cr-pila { display: flex; flex-direction: column; gap: 2px; height: 72px; background: #f6f7f9; border-radius: 6px; padding: 2px; }
.cr-blq { all: unset; cursor: pointer; border-radius: 4px; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; min-height: 6px; overflow: hidden; }
.cr-blq.tarde { box-shadow: inset 0 0 0 2px #b42318; }
.cr-blq:focus-visible { outline: 2px solid #0f766e; outline-offset: 1px; }
.cr-gasto { min-width: 150px; display: flex; flex-direction: column; gap: 4px; }
.cr-gasto-txt { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.cr-barra.fina { width: 100%; height: 6px; margin: 0; }
.tabla-tareas a.enlace-tarea { flex: 1; min-width: 120px; color: var(--texto); text-decoration: none; padding: 5px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-tareas a.enlace-tarea:hover { color: #0f766e; text-decoration: underline; }
.cap-filas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-top: 10px; }
.cap-fila { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

/* Vacaciones › Quitar días */
.dias-quitar { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.cal-barra.clic { cursor: pointer; }
.cal-barra.clic:hover { filter: brightness(.92); }
/* Tipos de tarea */
.etq-tipo { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tabla-tareas .c-tipo { width: 112px; }
.tabla-tareas td.c-tipo select:not(.etq-tipo-sel) { color: var(--suave); }
.tabla-tareas td.c-tipo .cel-select { max-width: 100%; }
select.etq-tipo-sel { border-radius: 999px !important; font-weight: 600; font-size: 12.5px !important; padding: 3px 10px !important; border-color: transparent; }
.fila-tipo.inactivo > input, .fila-tipo.inactivo > .punto { opacity: .5; }
.fila-tipo .check { white-space: nowrap; margin: 0; }
.fila-tipo input.corto { flex: none; }
textarea.caja-comentario { min-height: 140px; resize: vertical; line-height: 1.5; }

/* Barra fina de fichaje y cronómetro, arriba en todas las pantallas (menos Hoy) */
.columna { min-width: 0; display: flex; flex-direction: column; }
.barra-global { position: sticky; top: 0; z-index: 15; min-height: 48px; box-sizing: border-box; background: var(--panel); border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 14px; padding: 6px clamp(20px, 3vw, 44px); font-size: 13px; }
.barra-global[hidden] { display: none; }
.franja-vc ~ .app .barra-global { top: 44px; }
.barra-global .bf-sep { align-self: auto; height: 26px; }
.bg-estado { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.bg-estado .bf-punto { width: 9px; height: 9px; }
.bg-estado .bf-punto.activo { box-shadow: 0 0 0 3px var(--ok-claro); }
.bg-fich { font-weight: 600; }
.bg-fich .suave { font-weight: 400; }
.bg-crono { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.play.bg-play { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.play.bg-imputar { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.bg-texto { min-width: 0; line-height: 1.25; }
.bg-titulo { font-weight: 600; font-size: 13.5px; max-width: 460px; }
.bg-titulo a { color: inherit; text-decoration: underline; text-decoration-color: var(--borde); text-underline-offset: 3px; }
.bg-titulo a:hover { color: var(--acento); }
.bg-sub { color: var(--suave); font-size: 12px; max-width: 460px; }
.bg-sin { white-space: nowrap; }
.bg-botones { display: flex; gap: 8px; margin-left: auto; }
.bg-menu { position: absolute; top: calc(100% + 4px); width: 460px; max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, .16); padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 30; box-sizing: border-box; }
.bg-menu input { margin: 0 0 4px; }
.bg-lista { max-height: min(420px, 60vh); overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.bg-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); font-weight: 600; padding: 8px 10px 2px; }
.bg-op { font: inherit; text-align: left; border: 0; background: none; color: var(--texto); padding: 7px 10px; border-radius: 7px; cursor: pointer; min-width: 0; }
.bg-op:hover, .bg-op:focus-visible, .bg-op.primera { background: var(--acento-claro); }
.bg-op-nom { font-weight: 600; }
.bg-libre { border-top: 1px solid var(--borde); border-radius: 0 0 7px 7px; margin-top: 4px; padding-top: 10px; color: var(--suave); }
.bg-vacio { padding: 10px; }
@media (max-width: 860px) {
  .barra-global { padding: 6px 12px; gap: 10px; }
  .barra-global .bg-estado, .barra-global .bf-sep, .barra-global .bg-botones, .barra-global .bg-descartar, .barra-global .bg-sub, .barra-global .bg-sin { display: none; }
  .bg-menu { left: 8px !important; }
}

/* Selector de job con buscador (sustituye al desplegable agrupado por cliente) */
.combo { position: relative; min-width: 0; }
.combo .combo-input { width: 100%; box-sizing: border-box; padding-right: 30px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6878' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.combo .combo-input:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%235d6878' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }
.combo select.combo-sel { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; padding: 0; margin: 0; border: 0; }
.combo-lista { position: absolute; left: 0; top: calc(100% + 4px); min-width: 100%; width: max-content; max-width: min(460px, calc(100vw - 32px)); max-height: 300px; overflow-y: auto; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 24, 40, .16); padding: 4px; z-index: 40; box-sizing: border-box; }
.combo-op { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-op:hover, .combo-op.activo { background: var(--acento-claro); }
.combo-op.sel { font-weight: 600; color: var(--acento); }
.combo-op.especial { color: var(--suave); }
.combo-vacio { padding: 8px 10px; color: var(--suave); font-size: 13px; }
.combo.bf-agrupar { width: 200px; flex: none; }
.combo.bf-agrupar .combo-input { min-height: 36px; font-size: 13px; font-weight: 600; margin: 0; }
.mover-res { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow-y: auto; margin-top: 4px; }
.mover-elegida { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; background: var(--acento-claro); }
.historial-tarea { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.historial-tarea li { display: flex; gap: 12px; align-items: baseline; }
.historial-tarea .hist-cuando { color: var(--suave); font-size: 12px; white-space: nowrap; min-width: 150px; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .historial-tarea li { flex-direction: column; gap: 0; } }
/* Imágenes y menciones en comentarios */
.mencion { color: var(--acento); font-weight: 600; background: var(--acento-claro); border-radius: 4px; padding: 0 3px; }
.com-imagenes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.com-imagenes a { display: block; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; background: var(--gris-claro); }
.com-imagenes img { display: block; max-width: 260px; max-height: 180px; object-fit: contain; }
.com-previa { display: flex; flex-wrap: wrap; gap: 8px; }
.com-previa:empty { display: none; }
.com-previa-img { position: relative; width: 88px; height: 88px; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; background: var(--gris-claro); }
.com-previa-img img { width: 100%; height: 100%; object-fit: cover; }
.com-previa-img .quitar { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; line-height: 22px; padding: 0; font-size: 14px; }
.comentarios.soltar { outline: 2px dashed var(--acento); outline-offset: 4px; border-radius: 8px; }
/* Ficha de persona: modalidad de trabajo */
.modalidades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.modalidad { border: 1px solid var(--borde); border-radius: 10px; padding: 11px 12px; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13px; }
.modalidad > span { display: flex; flex-direction: column; gap: 2px; }
.modalidad.on { border-color: var(--acento); background: var(--acento-claro); box-shadow: inset 0 0 0 1px var(--acento); }
.modalidad input { margin-top: 2px; width: auto; flex: none; }
.dias-tele { display: flex; gap: 6px; }
.dias-tele button { border: 1px solid var(--borde); background: var(--panel); border-radius: 8px; width: 44px; height: 36px; font: inherit; font-size: 13px; color: var(--texto); cursor: pointer; }
.dias-tele button.on { border-color: var(--tele); background: var(--tele-claro); color: var(--tele); font-weight: 650; }
@media (max-width: 640px) { .modalidades { grid-template-columns: 1fr; } }
/* Calendario de Vacaciones: teletrabajo */
.cal-barra.tele, .cal-ley.tele { background: var(--tele-claro); border: 1.5px solid var(--tele); color: var(--tele); }
.cal-barra.tele-pend, .cal-ley.tele-pend { background: var(--panel); border: 1.5px dashed var(--tele); color: var(--tele); }
.cal-d.tele-fijo, .cal-ley.tele-fijo { background: color-mix(in srgb, var(--tele-claro) 85%, transparent); }
.cal-ley { box-sizing: border-box; }
.tele-resumen { font-size: 13px; background: var(--tele-claro); color: var(--tele); border-radius: 8px; padding: 8px 12px; margin: 4px 0 8px; }
/* ¿Dónde está el equipo?: mañana (tres columnas) y esta semana (tabla) */
.donde-cols.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.donde-semana { width: 100%; border-collapse: collapse; }
.donde-semana th, .donde-semana td { padding: 6px 6px; border-bottom: 1px solid var(--borde); text-align: center; font-size: 13px; }
.donde-semana th:first-child, .donde-semana td:first-child { text-align: left; width: 34%; }
.donde-semana th { font-weight: 600; color: var(--suave); }
.donde-semana th.hoy { color: var(--peligro); }
.donde-semana .persona-cel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.donde-tot td { font-weight: 650; color: var(--ok); }
.dsem { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 24px; border-radius: 6px; font-size: 11.5px; font-weight: 600; box-sizing: border-box; }
.dsem.oficina, .dsem-ley.oficina { background: var(--ok-claro); color: var(--ok); }
.dsem.teletrabajo, .dsem-ley.teletrabajo { background: var(--tele-claro); color: var(--tele); }
.dsem.oficina.pend, .dsem-ley.pend { background: var(--panel); color: var(--tele); border: 1.5px dashed var(--tele); }
.dsem.ausente, .dsem-ley.ausente { background: var(--gris-claro); color: var(--suave); }
.dsem.libre { color: var(--suave); }
.dsem-ley { box-sizing: border-box; }
@media (max-width: 1000px) { .donde-cols.tres { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .dsem { min-width: 36px; font-size: 10.5px; } .donde-semana th:first-child, .donde-semana td:first-child { width: auto; } }
@media (max-width: 560px) { .donde-semana .avatar { display: none; } .donde-semana .donde-nombre { white-space: normal; font-size: 12px; } .donde-semana th, .donde-semana td { padding: 6px 3px; } }
/* Descripción con formato */
.texto-md { line-height: 1.55; overflow-wrap: anywhere; }
.texto-md ul, .texto-md ol { margin: 4px 0; padding-left: 22px; }
.texto-md li { margin: 2px 0; }
.texto-md h4 { font-size: 15px; margin: 10px 0 4px; }
.texto-md .md-img img, .texto-md img { max-width: 100%; max-height: 420px; border: 1px solid var(--borde); border-radius: 8px; display: block; margin: 6px 0; }
.editor-caja { border: 1px solid var(--borde); border-radius: 10px; background: var(--campo, var(--panel)); }
.editor-caja:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro); }
.barra-formato { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.barra-formato .fmt { border: 0; background: none; color: var(--texto); font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 6px; cursor: pointer; min-width: 28px; }
.barra-formato .fmt:hover { background: var(--gris-claro); }
.barra-formato .fmt.b { font-weight: 700; } .barra-formato .fmt.i { font-style: italic; } .barra-formato .fmt.s { text-decoration: line-through; }
.fmt-sep { width: 1px; height: 18px; background: var(--borde); margin: 0 4px; }
.editor-md { min-height: 110px; max-height: 60vh; overflow-y: auto; padding: 10px 12px; outline: none; }
.editor-md:empty::before { content: attr(data-placeholder); color: var(--suave); }
/* Botón Seguir (campana) de tareas y jobs */
.boton.seguir { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.dlg-cab > .boton.seguir { padding-top: 6px; padding-bottom: 6px; }
.ic-seguir { display: inline-flex; }
.ic-seguir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.boton.seguir.on { color: var(--acento); border-color: var(--acento); background: var(--acento-claro); }
.boton.seguir.on .ic-seguir svg { fill: currentColor; }
.boton.seguir:disabled { opacity: 1; cursor: default; }
/* Mi perfil: en escritorio las tarjetas van en horizontal (2 columnas); en el móvil, una debajo de otra */
.perfil-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; max-width: 1000px; }
.perfil-rejilla > .panel { margin: 0; }
@media (max-width: 760px) { .perfil-rejilla { grid-template-columns: 1fr; } }
/* Retraso de un job sobre su vencimiento (fecha comprometida) */
.etq-retraso { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--peligro); background: var(--peligro-claro); white-space: nowrap; }
.rep-lista { max-height: 300px; overflow: auto; } .rep-lista li { padding: 6px 0; }
/* Cola de carga (Para hoy y Su cola): ancho fijo, sin scroll horizontal; el nombre se corta con «…» */
.tabla-cr.fija { table-layout: fixed; }
.tabla-cr.fija th, .tabla-cr.fija td { padding: 8px 8px; }
.tabla-cr.fija col.cr-n { width: 34px; } .tabla-cr.fija col.cr-it { width: 142px; } .tabla-cr.fija col.cr-mo { width: 132px; }
.tabla-cr.fija col.cr-ga { width: 136px; } .tabla-cr.fija col.cr-pe { width: 74px; } .tabla-cr.fija col.cr-f { width: 64px; }
.tabla-cr.fija col.cr-ll { width: 104px; } .tabla-cr.fija col.cr-ac { width: 104px; } .tabla-cr.fija td:last-child { padding-right: 12px; } .tabla-cr.fija td.num + td, .tabla-cr.fija th.num + th { padding-left: 14px; }
.tabla-cr.fija .cr-celda-nom { overflow: hidden; }
.tabla-cr .cr-nombre { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-cr.fija select { max-width: 100%; }
.tabla-cr.fija .pill-cr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; vertical-align: middle; }
.tabla-cr.fija .cr-celda-nom > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hoy: la carga de trabajo propia a todo el ancho (v196) */
.hoy-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: stretch; }
.hoy-fila > .panel { margin-top: 0; }
.carga-hoy { display: flex; flex-direction: column; gap: 0; margin-top: 18px; }
.carga-hoy > .filtros { margin: 0 0 4px; }
.carga-hoy .play-cel { justify-content: flex-end; }
.hoy-fila > .reloj-lateral { display: flex; align-items: center; justify-content: center; }
.fin-rep { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .fin-rep input { width: auto; } .fin-rep[hidden] { display: none; }
/* Hoy compacto (v198): sin reloj; Mi jornada y Cumpleaños en tarjetas bajas */
.hoy-fila { grid-template-columns: 2fr 1fr; }
.hoy-fila.sola { grid-template-columns: 1fr; }
.hoy-fila > .tarjeta-hoy { padding: 12px 16px; gap: 6px; }
.hoy-fila > .tarjeta-hoy h2 { font-size: 14px; }
.hoy-fila .tres-cifras .cifra { font-size: 18px; }
.hoy-fila .tres-cifras .etq-cifra { font-size: 11.5px; }
.hoy-fila .barra { margin: 2px 0; }
.hoy-fila > .tarjeta-hoy > .boton { align-self: flex-start; padding: 4px 10px; font-size: 13px; }
@media (max-width: 900px) { .hoy-fila { grid-template-columns: 1fr; } }
.hoy-fila > .jornada-hoy { display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 28px; row-gap: 4px; align-items: center; }
.hoy-fila > .jornada-hoy > h2 { grid-column: 1; grid-row: 1 / span 3; }
.hoy-fila > .jornada-hoy > .tres-cifras { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 22px; }
.hoy-fila > .jornada-hoy > .barra, .hoy-fila > .jornada-hoy > .suave { grid-column: 3; }
.hoy-fila > .jornada-hoy > .boton { grid-column: 4; justify-self: end; }
@media (max-width: 1250px) { .hoy-fila > .jornada-hoy { grid-template-columns: 1fr; } .hoy-fila > .jornada-hoy > * { grid-column: 1 !important; grid-row: auto !important; justify-self: start; } }
/* Hipervínculos (v200) */
.pop-enlace { display: grid; gap: 8px; padding: 12px; margin: 6px 0; background: var(--panel, #fff); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 6px 20px rgba(16, 24, 40, .12); max-width: 420px; }
.pop-enlace label { display: grid; gap: 3px; font-size: 12px; color: var(--suave); }
.pop-enlace .acciones { display: flex; gap: 8px; }
.texto-md a, .comentario a, .editor-md a { color: var(--acento); text-decoration: underline; word-break: break-word; }
.editor-md a { cursor: pointer; }
.tabla-cr .completar { width: 17px; height: 17px; accent-color: var(--ok); cursor: pointer; vertical-align: middle; }

/* Novedades */
.insignia-menu.nueva { background: var(--acento); }
.novedades { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.nov-semana { display: flex; flex-direction: column; gap: 0; }
.nov-semana.cerrada { flex-direction: row; align-items: center; gap: 12px; }
.nov-semana.cerrada h2 { flex: 1; }
.nov-semana h2 { margin: 0; font-size: 17px; }
.nov-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.etq-nueva { white-space: nowrap; background: var(--acento); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 600; padding: 2px 8px; }
.nov-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--gris-claro); }
.nov-item p { margin: 3px 0 4px; color: var(--suave); }
.nov-area { align-self: start; justify-self: start; border-radius: 6px; font-size: 12px; font-weight: 600; padding: 3px 8px; }
.nov-registro { background: var(--acento-claro); color: var(--acento); }
.nov-tareas { background: var(--tele-claro); color: var(--tele); }
.nov-admin { background: var(--aviso-claro); color: var(--aviso); }
@media (max-width: 640px) { .nov-item { grid-template-columns: 1fr; } .nov-semana.cerrada { flex-wrap: wrap; } }
/* Fichajes: el día abre Imputar con esa fecha */
button.tl-dia { font: inherit; font-weight: 500; text-align: left; background: none; border: 0; padding: 4px 0; border-radius: 6px; color: inherit; cursor: pointer; }
button.tl-dia:hover { color: var(--acento); text-decoration: underline; }
.tl-pista.clic { cursor: copy; }
/* Celebración al finalizar una tarea (v209) */
.fiesta { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.fiesta .confeti { position: absolute; top: -20px; display: block; animation: confeti-cae linear forwards; }
@keyframes confeti-cae { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--dx), 105vh) rotate(var(--giro)); opacity: 0; } }
.fiesta-msg { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 999px;
  background: var(--panel, #fff); color: var(--acento, #0f766e); font-size: 22px; font-weight: 700; box-shadow: 0 12px 40px rgba(16, 24, 40, .18); animation: fiesta-pop 2.9s ease forwards; }
.fiesta-emoji { font-size: 34px; display: inline-block; animation: fiesta-baile .5s ease-in-out 3 alternate; }
@keyframes fiesta-pop { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 12% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(.95); opacity: 0; } }
@keyframes fiesta-baile { from { transform: rotate(-15deg) scale(1); } to { transform: rotate(15deg) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .fiesta-msg, .fiesta-emoji { animation: none; } }
.fiesta-msg.abajo { top: 62%; }
/* Unicornio (v213) */
.uni-vuelo { position: absolute; top: 34%; left: 0; display: flex; flex-direction: row-reverse; align-items: center; gap: 4px; white-space: nowrap; animation: uni-cruza 2.8s ease-in-out forwards; }
.uni { font-size: 96px; display: inline-block; transform: scaleX(-1); animation: uni-salta .35s ease-in-out infinite alternate; }
.uni-estela { font-size: 34px; opacity: .9; letter-spacing: 4px; }
@keyframes uni-cruza { from { transform: translateX(-40vw); } to { transform: translateX(110vw); } }
@keyframes uni-salta { from { transform: scaleX(-1) translateY(0) rotate(-6deg); } to { transform: scaleX(-1) translateY(-26px) rotate(6deg); } }
/* Check grande (v213) */
.check-caja { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; animation: check-sale 3s ease forwards; }
.check-grande { width: 180px; height: 180px; filter: drop-shadow(0 12px 30px rgba(22, 163, 123, .35)); }
.cg-circ { fill: #16a37b; transform-origin: 60px 60px; animation: check-circ .45s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.cg-pal { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; animation: check-traza .45s .35s ease-out forwards; }
.check-txt { background: var(--panel, #fff); color: #16a37b; font-weight: 700; font-size: 22px; padding: 8px 20px; border-radius: 999px; box-shadow: 0 8px 24px rgba(16, 24, 40, .15); }
@keyframes check-circ { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes check-traza { to { stroke-dashoffset: 0; } }
@keyframes check-sale { 0%, 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .uni-vuelo { animation: none; left: 50%; transform: translateX(-50%); } .uni { animation: none; } .cg-circ, .cg-pal { animation: none; stroke-dashoffset: 0; } }

/* Mientras carga una sección, la anterior se ve atenuada y no se puede pulsar. */
#vista.cargando { opacity: .45; pointer-events: none; transition: opacity .15s; }
.cr-vivos { margin-right: 6px; vertical-align: middle; } .tabla-cr td.num:last-child { white-space: nowrap; }
.cr-nom-fila { display: flex; align-items: center; gap: 6px; min-width: 0; } .cr-nom-fila .cr-nombre { min-width: 0; flex: 0 1 auto; } .cr-nom-fila .cr-vivos { margin: 0; flex: none; }
.cr-nom-fila { padding: 2px 3px 2px 0; }
.zona-tarjetas.soltar-aqui { outline: 2px dashed var(--acento); outline-offset: -4px; border-radius: 10px; background: var(--acento-claro); }
/* Vacaciones: saldo de la persona elegida */
.saldo-tit { display: flex; align-items: center; gap: 10px; }
/* Vacaciones › Año del equipo: personas × meses */
.an-cont { --an-nom: 200px; --an-saldo: 120px; overflow-x: auto; margin-top: 8px; }
.an-fila { display: grid; gap: 4px; align-items: center; min-width: 760px; min-height: 38px; border-bottom: 1px solid var(--borde); }
.an-fila.cab { min-height: 0; padding-bottom: 6px; font-size: 12px; color: var(--suave); }
.an-fila.tot { border-bottom: 0; min-height: 30px; }
.an-mes { font: inherit; font-size: 12px; font-weight: 600; color: var(--suave); background: none; border: 0; cursor: pointer; padding: 2px 0; }
.an-mes:hover { color: var(--acento); }
.an-nom { display: flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; color: var(--texto); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; min-width: 0; }
.an-nom span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-nom:hover span { color: var(--acento); text-decoration: underline; }
.an-c { height: 26px; border-radius: 6px; border: 0; background: var(--fondo); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; color: var(--texto); }
.an-c.n1, .an-ley.n1 { background: var(--acento-claro); color: var(--acento); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent); }
.an-c.n2, .an-ley.n2 { background: color-mix(in srgb, var(--acento) 40%, var(--panel)); color: var(--texto); }
.an-c.n3, .an-ley.n3 { background: var(--acento); color: #fff; }
.an-c.pend, .an-ley.pend { background: var(--panel); color: var(--aviso); box-shadow: inset 0 0 0 1.5px var(--aviso); }
.an-c:hover { filter: brightness(.94); }
.an-saldo { text-align: right; font-size: 13px; }
.an-fila.cab .an-saldo { font-size: 12px; }
.an-tot { text-align: center; font-size: 12px; font-weight: 650; color: var(--suave); }
.an-ley { box-sizing: border-box; }
@media (max-width: 600px) { .an-cont { --an-nom: 130px; --an-saldo: 80px; } }
/* Vacaciones › Año de una persona: 12 meses en calendario */
.ap-cont { display: flex; gap: 20px; align-items: flex-start; margin-top: 10px; flex-wrap: wrap; }
.ap-meses { flex: 999 1 640px; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; }
.ap-tit { font-size: 13px; margin-bottom: 4px; }
.ap-sem, .ap-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.ap-sem span { text-align: center; font-size: 10.5px; color: var(--suave); }
.ap-d { height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--borde) 70%, transparent); box-sizing: border-box; font-family: inherit; color: var(--texto); padding: 0; }
.ap-d.vacio { background: none; border: 0; }
.ap-d.finde { background: var(--gris-claro); border-color: transparent; color: var(--suave); }
.ap-d.festivo { background: var(--aviso-claro); border-color: color-mix(in srgb, var(--aviso) 35%, transparent); color: var(--aviso); font-weight: 650; }
.ap-d.vac { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 650; }
.ap-d.pend { background: var(--panel); border: 1.5px dashed var(--aviso); color: var(--aviso); font-weight: 650; }
.ap-d.otra { background: #e8edfb; border-color: #3b5bdb; color: #24409c; font-weight: 650; }
.ap-d.tele { background: var(--tele-claro); border-color: transparent; color: var(--tele); font-weight: 650; }
.ap-d.hoy { box-shadow: inset 0 0 0 2px var(--peligro); }
button.ap-d.clic { cursor: pointer; }
button.ap-d.clic:hover { filter: brightness(.93); }
.ap-lado { flex: 1 1 240px; max-width: 280px; display: flex; flex-direction: column; gap: 14px; }
.ap-caja { border: 1px solid var(--borde); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ap-saldo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ap-saldo li { display: flex; justify-content: space-between; }
.ap-saldo li.total { border-top: 1px solid var(--borde); padding-top: 8px; }
.ap-saldo li.total b { color: var(--acento); font-size: 16px; }
.leyenda-v span { display: flex; align-items: center; gap: 8px; }
.leyenda-v .ap-d { width: 16px; height: 16px; flex: none; }
@media (max-width: 1100px) { .ap-meses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ap-meses { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-lado { max-width: none; } }
@media (max-width: 420px) { .ap-meses { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-color-scheme: dark) { .ap-d.otra { background: #1f2a4a; color: #b8c6f5; border-color: #3b5bdb; } }
.aus-item { flex-wrap: wrap; row-gap: 6px; } .aus-item .aus-info { flex: 1 1 150px; }
/* Fichajes: fichado lejos de su centro (más de 100 km) */
.tl-tramo.lejos { box-shadow: 0 0 0 2px var(--peligro); }
.etq.lejos { background: var(--peligro-claro); color: var(--peligro); margin-left: 4px; }
.leyenda i.ley-lejos { border: 2px solid var(--peligro); box-sizing: border-box; }

/* Ficha de tarea en dos columnas (2026-11-09, opción A): contenido a la izquierda, datos agrupados a la derecha. */
dialog.ficha { width: min(1280px, calc(100vw - 24px)); }
dialog.ficha form { padding: 0; gap: 0; }
dialog.ficha .pie:empty { display: none; }
dialog.ficha .dlg-cab { margin: 0; padding: 12px 20px; align-items: center; border-bottom: 1px solid var(--borde); flex-wrap: wrap; box-shadow: none; }
dialog.ficha .dlg-cab > h2 { font-size: 13.5px; font-weight: 500; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
dialog.ficha .barra-ficha { margin: 0; flex-wrap: nowrap; }
dialog.ficha .barra-ficha .menu-puntos > summary { width: 34px; height: 34px; border: 1px solid var(--borde); }
.ficha-2col { display: grid; grid-template-columns: minmax(0, 1fr) 480px; align-items: start; }
.ficha-contenido { padding: 18px 26px 26px; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--borde); min-height: 100%; box-sizing: border-box; }
.ficha-contenido .titulo-tarea { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.ficha-contenido .titulo-seccion { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.ficha-panel { background: var(--fondo); padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.fp-grupo { display: flex; flex-direction: column; gap: 8px; }
.fp-grupo > h4 { margin: 0; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.fp-grupo + .fp-grupo { border-top: 1px solid var(--borde); padding-top: 12px; }
.fp-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: start; }
.fp-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fp-etq { font-size: 12px; color: var(--suave); }
.fp-campo select, .fp-campo input[type=date], .fp-campo input.corto, .fp-filas select { width: 100%; max-width: none; box-sizing: border-box; }
.fp-campo .prio-ficha select { max-width: none; }
.fp-campo select { min-height: 36px; }
.ficha-panel .control-repetir > .suave.peque { display: none; }
.fp-campo > .check { min-height: 36px; display: flex; align-items: center; gap: 6px; }
.fp-nota { font-size: 12px; font-weight: 600; }
.fp-filas { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px 10px; align-items: center; font-size: 13.5px; }
.fp-filas .chips { gap: 4px; }
.fp-filas .cel-select { width: auto; }
.fp-horas { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; padding-top: 22px; }
.fp-barra { height: 6px; background: var(--borde); border-radius: 3px; overflow: hidden; }
.fp-barra > span { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.fp-barra.justa > span { background: var(--aviso); }
.fp-barra.pasada > span { background: var(--peligro); }
.ficha-panel .horas-ficha:empty { display: none; }
.ficha-panel .sel-job { width: 100%; }
.ficha-panel .control-repetir .fila-rep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.ficha-panel .control-repetir .fila-rep > .extra-rep:empty { display: none; }
.ficha-panel .control-repetir .extra-rep { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ficha-panel .fin-rep input { flex: 1; min-width: 0; }
/* Panel compacto: campos más bajos y menos aire para que quepa sin scroll en escritorio. */
.ficha-panel { padding: 14px 20px 16px; gap: 10px; }
.ficha-panel .fp-grupo { gap: 6px; }
.ficha-panel .fp-grupo + .fp-grupo { padding-top: 10px; }
.ficha-panel select, .ficha-panel input:not([type=checkbox]) { min-height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 13.5px; }
.ficha-panel .fp-campo select { min-height: 32px; }
.ficha-panel .fp-campo > .check { min-height: 32px; }
.ficha-panel .fp-horas { padding-top: 20px; }
.ficha-panel .fp-filas .chips input { flex: 1; min-width: 140px; }
.fp-pestanas { display: flex; gap: 18px; border-bottom: 1px solid var(--borde); margin: 18px 0 10px; }
.fp-pestanas button { border: none; background: none; font: inherit; font-size: 14px; padding: 6px 0; color: var(--suave); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fp-pestanas button.activa { color: var(--texto); font-weight: 600; border-bottom-color: var(--acento); }
@media (max-width: 900px) {
  .ficha-2col { grid-template-columns: 1fr; }
  .ficha-panel { order: -1; }
  .ficha-contenido { border-right: 0; padding: 14px 16px 20px; }
  dialog.ficha .barra-ficha { flex-wrap: wrap; }
}
/* Ficha de tarea en escritorio: alto fijo; la columna izquierda hace scroll y el panel derecho queda fijo (2026-11-10). */
@media (min-width: 901px) {
  dialog.ficha { height: calc(100vh - 40px); max-height: calc(100vh - 40px); overflow: hidden; }
  dialog.ficha form { height: 100%; box-sizing: border-box; }
  dialog.ficha .ficha-2col { flex: 1; min-height: 0; align-items: stretch; }
  dialog.ficha .ficha-contenido { overflow-y: auto; min-height: 0; height: 100%; }
  dialog.ficha .ficha-panel { overflow-y: auto; min-height: 0; height: 100%; box-sizing: border-box; }
}
/* Franja para activar los avisos del navegador (2026-11-10). */
.oferta-avisos { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; align-items: center; gap: 12px; max-width: 460px; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, .18); padding: 12px 14px; }
.oferta-avisos > .ic-seguir { color: var(--acento); display: grid; place-items: center; }
.oferta-avisos > div { flex: 1; min-width: 0; }
@media (max-width: 600px) { .oferta-avisos { left: 16px; right: 16px; bottom: 76px; flex-wrap: wrap; } }