@font-face{font-family:'Sora';font-style:normal;font-weight:600 800;font-display:swap;src:url('/vendor/sora-latin.woff2') format('woff2')}
/* ═══════════════════════════════════════════════════════════════════════════
   Base visual calcada del portal de Compras ("Carmen Castell"),
   con la paleta morada acordada. Ver CONTEXTO.md y ARQUITECTURA.md.
   ═══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F0EFE9;
  --surface:#fff;
  --surface2:#F5F4F0;
  --border:rgba(0,0,0,0.09);
  --border-md:rgba(0,0,0,0.16);
  --text:#18180F;
  --text2:#6A6A60;
  --text3:#A8A89E;
  --accent:#6D28D9;
  --accent-bg:#EDE9FE;
  --accent-txt:#4C1D95;
  --accent2:#0E7490;

  /* Paleta semántica */
  --info:#0B6BB5;
  --info-bg:#E4F1FB;
  --info-txt:#0A4C82;
  --warn:#B45309;
  --warn-bg:#FEF3C7;
  --warn-txt:#7C3A06;
  --danger:#C62828;
  --danger-bg:#FDECEC;
  --danger-txt:#8E1F1F;

  /* Sombras suaves */
  --shadow-sm:0 1px 2px rgba(20,20,15,.04), 0 1px 3px rgba(20,20,15,.05);
  --shadow-md:0 4px 14px rgba(20,20,15,.07), 0 2px 5px rgba(20,20,15,.04);
  --shadow-lg:0 14px 40px rgba(20,20,15,.12);

  --r:14px;
  --r-sm:8px;
  --sidebar:220px;

  /* Estados de tarea. Antes iban cableados en cada regla, lo que dejaba el
     fondo claro fijo mientras el texto seguía a las variables: en modo oscuro
     salía texto casi blanco sobre amarillo pálido. Ahora el par entero cambia
     con el tema. Los valores claros son los de siempre. */
  --st-pend-bg:#FEF3C7;   --st-pend-tx:#A16207;  --st-pend-bd:#FDE68A;
  --st-curso-bg:#DBEAFE;  --st-curso-tx:#1D4ED8;
  --st-ok-bg:#DCFCE7;     --st-ok-tx:#15803D;
  --st-dang-bg:#FEE2E2;   --st-dang-tx:#B91C1C;  --st-dang-bd:#FECACA;
  --st-esp-bg:#FFEDD5;    --st-esp-tx:#C2410C;   --st-esp-bd:#FED7AA;
  --st-freq-bg:#E0F2FE;   --st-freq-tx:#0369A1;
  /* El ámbar era #F97316, un naranja fuerte que en una franja de 3 px se leía
     como el rojo de al lado. Y la diferencia importa: rojo es «alguien pide
     ayuda ahora», ámbar es «hay algo parado». Se separan (17/08/2026). */
  --st-linea-dang:#DC2626; --st-linea-warn:#F59E0B; --st-linea-ok:#16A34A;

  --dot-pending:#F59E0B;
  --dot-approved:#16A34A;

  /* Chips de estado (se adaptan al modo oscuro) */
  --ok-bg:#DCFCE7;   --ok-txt:#166534;
  --pend-bg:#FEF3C7; --pend-txt:#92400E;
  --we-bg:#fee2e2;   --we-txt:#dc2626;
  --pre-bg:#DBEAFE;  --pre-txt:#1E40AF;
  --den-bg:#FEE2E2;  --den-txt:#991B1B;
  --can-bg:#F3F4F6;  --can-txt:#6B7280;

  /* Post-it de las notas. Franja saturada + fondo en tinte suave: en una línea,
     un fondo fuerte se come el texto y el color deja de informar. */
  --nota-amarillo:#E8A93C;  --nota-amarillo-bg:#FCF4E1;
  --nota-rosa:#DB6E93;      --nota-rosa-bg:#FBEDF2;
  --nota-azul:#4A93CE;      --nota-azul-bg:#E9F2FA;
  --nota-verde:#4FA168;     --nota-verde-bg:#EAF5ED;
}

/* ─── MODO OSCURO ─────────────────────────────────────────────────────────
   Paleta de sala de control (2/08/2026). Sustituye al oscuro cálido anterior
   (#1C1C1A) por uno frío y más profundo. Es el MISMO atributo, así que
   `toggleDarkMode()` y las preferencias ya guardadas siguen funcionando: solo
   cambian los valores.
   Los adornos de consola (rejilla, esquinas, brillo) NO viven aquí: se aplican
   únicamente dentro de `.console`, que solo envuelve al Panel de control. Un
   calendario de vacaciones no debe parecer un instrumento.
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"]{
  --bg:#080B11;
  --surface:#0F141C;
  --surface2:#151C26;
  --border:rgba(120,200,230,0.15);
  --border-md:rgba(120,200,230,0.30);
  --text:#E6EDF5;
  --text2:#8DA0B4;
  --text3:#5A6B7D;
  --accent:#A78BFA;
  --accent-bg:#1E1733;
  --accent-txt:#C4B5FD;
  --accent2:#22D3EE;
  --info:#38BDF8;
  --info-bg:#0D2233;
  --info-txt:#7DD3FC;
  --warn:#FBBF24;
  --warn-bg:#2A2110;
  --warn-txt:#FCD34D;
  --danger:#FF5A5A;
  --danger-bg:#2A1114;
  --danger-txt:#FCA5A5;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.35);
  --shadow-md:0 6px 22px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  --shadow-lg:0 16px 44px rgba(0,0,0,.65);

  /* Mismos estados, invertidos: fondo profundo y texto claro. */
  --st-pend-bg:#33280E;   --st-pend-tx:#FCD34D;  --st-pend-bd:#584312;
  --st-curso-bg:#12263C;  --st-curso-tx:#7DD3FC;
  --st-ok-bg:#0E2E24;     --st-ok-tx:#4ADE80;
  --st-dang-bg:#331419;   --st-dang-tx:#FCA5A5;  --st-dang-bd:#5A1F26;
  --st-esp-bg:#33210F;    --st-esp-tx:#FDBA74;   --st-esp-bd:#5A3714;
  --st-freq-bg:#0E2838;   --st-freq-tx:#67E8F9;
  --st-linea-dang:#FF5A5A; --st-linea-warn:#FBBF24; --st-linea-ok:#34D399;

  --ok-bg:#0C2620;   --ok-txt:#34D399;
  --pend-bg:#2A2110; --pend-txt:#FCD34D;
  --we-bg:#2A1114;   --we-txt:#FF5A5A;
  --pre-bg:#0D2233;  --pre-txt:#7DD3FC;
  --den-bg:#2A1114;  --den-txt:#FCA5A5;
  --can-bg:#151C26;  --can-txt:#8DA0B4;

  --nota-amarillo:#D9A23C;  --nota-amarillo-bg:#2A2413;
  --nota-rosa:#CE6C8D;      --nota-rosa-bg:#2B1A20;
  --nota-azul:#4C8CC0;      --nota-azul-bg:#152230;
  --nota-verde:#4E9765;     --nota-verde-bg:#15251A;

}
[data-theme="dark"] .hero{background:linear-gradient(135deg,#3B1D74 0%,#4C2896 55%,#2B2470 130%)}
[data-theme="dark"] .skel{background:linear-gradient(90deg,#2A2A27 25%,#323230 37%,#2A2A27 63%);background-size:200% 100%}
[data-theme="dark"] .login-field input,[data-theme="dark"] input[type=date],[data-theme="dark"] select,[data-theme="dark"] .form-input{color-scheme:dark}

/* Botón toggle modo oscuro */
.dark-toggle-btn{background:none;border:none;cursor:pointer;color:var(--text3);font-size:15px;padding:4px 5px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;flex-shrink:0}
.dark-toggle-btn:hover{color:var(--text);background:var(--surface2)}

body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;min-height:100vh}

/* Tipografía display para títulos y cifras grandes */
.page-hdr h1,.kpi-val,.hero-hello,.countdown-num,.login-logo-name,
.modal-head h3,.modal-success h3,.logo-name{font-family:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}

/* ─── LAYOUT: SIDEBAR + MAIN ────────────────────────────────────────────── */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);background:var(--surface);border-right:0.5px solid var(--border);flex-shrink:0}
.mobile-bar{display:none}
.sidebar-content{display:flex;flex-direction:column;padding:20px 0;height:100%}
.logo{padding:0 18px 20px;border-bottom:0.5px solid var(--border);margin-bottom:12px}
.logo-name{font-size:13px;font-weight:700;color:var(--text)}
.logo-sub{font-size:10px;color:var(--text3);margin-top:1px}
.user-chip{display:flex;align-items:center;gap:8px;padding:8px 14px;margin:0 6px 16px;background:var(--surface2);border-radius:var(--r-sm)}
.u-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--accent-bg);color:var(--accent-txt)}
.u-name{font-size:11px;font-weight:600;color:var(--text)}
.u-role{font-size:10px;color:var(--text3)}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 18px;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;margin:0 6px;border-radius:var(--r-sm);transition:all .1s;position:relative}
.nav-item i{font-size:15px}
.nav-text-s{display:none}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:var(--accent-bg);color:var(--accent-txt);font-weight:600}
.nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:9px;font-weight:800;min-width:17px;height:17px;padding:0 5px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.nav-item.nav-logout,.nav-item.nav-logout i{color:#e11d48}
.nav-item.nav-logout:hover{background:rgba(225,29,72,.1);color:#e11d48}
.nav-sep{height:0.5px;background:var(--border);margin:8px 18px}
/* Las cabeceras de apartado (`.nav-group-toggle` y esta) comparten pinta: son
   la misma cosa, un rótulo que anuncia un bloque del menú. Ver el bloque
   «CABECERAS DE APARTADO» más abajo para el porqué del fondo. */
.nav-label{display:flex;align-items:center;gap:8px;width:calc(100% - 12px);margin:10px 6px 2px;padding:8px 10px 8px 12px;border-radius:var(--r-sm);background:var(--surface2);color:var(--text);font:800 11px/1.2 Sora,sans-serif;text-transform:uppercase;letter-spacing:.07em}
.nav-label i{font-size:16px;color:var(--accent)}
/* «Cerrar sesión» llevaba `margin-top:auto`, o sea pegado al fondo de la
   ventana: en una pantalla alta quedaba a media barra del último menú, como si
   se hubiera caído. Ahora va justo debajo, separado por una línea y un par de
   líneas de aire —que es como ya estaba en móvil—. */
.sidebar-bottom{margin-top:18px;padding:0 6px}
.sidebar-bottom::before{content:'';display:block;height:0.5px;background:var(--border);margin:0 12px 10px}

.main{flex:1;padding:24px;overflow-y:auto}
.page{display:none}.page.active{display:block}
.page-hdr{margin-bottom:20px}
.page-hdr h1{font-size:20px;font-weight:700;letter-spacing:-.5px}
.page-hdr p{font-size:12px;color:var(--text2);margin-top:3px}
/* Cabeceras con botones (Salva, 21/08/2026). El patrón es
   `.page-hdr > div(título+texto) + botones`, y sin esta regla los botones caían
   pegados al párrafo, sin un pelo de aire: se leían como parte de la frase de
   arriba. Pasaba en Agenda, Clientes, Generador de plantillas y Ausencias a la
   vez, porque el fallo no era de ninguna de ellas sino de `.page-hdr`.
   `> div + *` y no `> div + div` a propósito: en Clientes el segundo hijo es un
   `<button>` suelto, no un `div`. Se excluye `.task-page-hdr`, que ya reparte en
   dos columnas y ahí el margen empujaría los botones hacia abajo. */
.page-hdr:not(.task-page-hdr)>div+*{margin-top:12px}

/* ─── COMPONENTES BASE ──────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.kpi{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm);transition:box-shadow .2s, transform .2s}
.kpi:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.kpi-lbl{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.kpi-val{font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1}
.kpi-sub{font-size:11px;color:var(--text2);margin-top:4px}
.kpi-val.green{color:var(--accent)}
.kpi-val.orange{color:#B45309}
.dias-bar{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;margin-top:10px}
.dias-fill{height:100%;border-radius:3px;background:var(--accent)}

.card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.card-head{padding:12px 16px;border-bottom:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-head-title{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:6px}
.card-head-title i{font-size:14px}
.card-body{padding:14px 16px}

.badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px}
.badge-green{background:var(--ok-bg);color:var(--ok-txt)}
.badge-orange{background:var(--pend-bg);color:var(--pend-txt)}

.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--r-sm);font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{opacity:.88}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-outline{background:transparent;border:0.5px solid var(--border-md);color:var(--text)}
/* «He terminado por hoy». Vive en la cabecera desde que se retiró la tarjeta
   «Tu día» (5/09/2026), al lado de «Apuntar tarea», que es la primaria. Cerrar
   el día no es una acción más de la fila ni compite con la de apuntar: pasa una
   vez al día y es la que da por terminado lo demás, así que se distingue por el
   tono —el mismo verde de «hecho» del resto del portal— y no por el peso. */
.btn-cerrar-dia{background:var(--st-ok-bg);color:var(--st-ok-tx);border:0.5px solid transparent}
.btn-cerrar-dia:hover{border-color:var(--st-ok-tx)}
.btn-outline:hover{background:var(--surface2)}
.btn.is-loading,.btn.is-ok,.btn.is-err{pointer-events:none}
.btn.is-ok{background:var(--accent)!important;color:#fff!important}
.btn.is-err{background:var(--danger)!important;color:#fff!important}

.form-input{background:var(--surface);border:0.5px solid var(--border-md);border-radius:var(--r-sm);padding:9px 12px;font-size:13px;color:var(--text);font-family:inherit;outline:none;transition:border-color .15s}
.form-input:focus{border-color:var(--accent)}
.form-input::placeholder{color:var(--text3)}

/* ─── LOGIN / RECUPERACIÓN ──────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px}
.login-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r);padding:26px 24px;width:380px;box-shadow:var(--shadow-md)}
.login-logo{text-align:center;margin-bottom:18px}
.login-logo-av{width:58px;height:58px;border-radius:50%;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;font-family:'Sora',sans-serif;margin:0 auto 12px}
.login-logo-name{font-size:18px;font-weight:800;letter-spacing:-.5px}
.login-logo-sub{font-size:11px;color:var(--text3);margin-top:3px}
.login-field{margin-bottom:14px}
.login-field label{font-size:11px;font-weight:600;color:var(--text2);display:block;margin-bottom:5px}
.login-field input{width:100%;padding:10px 12px;border:0.5px solid var(--border-md);border-radius:var(--r-sm);font-size:13px;outline:none;transition:border-color .15s;background:var(--surface);color:var(--text)}
.login-field input:focus{border-color:var(--accent)}
/* LA CAJA DE VISITAS de la ficha del empleado.
   Va en un recuadro porque sus tres controles se miran entre ellos —tener
   cartera cambia lo que significa la primera opción de agendas— y sueltos entre
   el cumpleaños y el color parecían tres preguntas sin relación.
   Y nace PLEGADA cuando esa persona no tiene nada de Visitas, que son catorce de
   las quince: el cuadro entero ocupaba media ventana para decir que no. */
.caja-plegable{border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.caja-cab{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  border:0;background:var(--surface2);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.caja-cab:hover{background:var(--border)}
.caja-cab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.caja-tit{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto}
/* El resumen es lo que hace que plegar no esconda nada: dice el estado completo
   sin abrir. Si no cabe se recorta, nunca parte la cabecera en dos renglones. */
.caja-resumen{flex:1 1 auto;min-width:0;font-size:12px;color:var(--text2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caja-accion{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--accent)}
.caja-cab[aria-expanded="true"] .caja-accion i{transform:rotate(180deg)}
.caja-accion i{transition:transform .15s}
.caja-cuerpo{padding:12px}
.caja-cuerpo > label.sub{display:block;margin:12px 0 6px;font-size:11px;font-weight:700;
  color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
/* La ayuda del desplegable. Sustituye a las tres explicaciones que llevaban las
   opciones cuando eran botones de radio: se pierde el alto de dos de ellas y no
   se pierde el aviso, que es lo que importaba —«esta persona no verá Visitas» y
   «todas incluye a los que se den de alta mañana». */
.caja-ayuda{display:block;margin-top:5px;font-size:11px;line-height:1.4;color:var(--text2)}

/* Visible solo para un lector de pantalla o un gestor de contraseñas. La clase
   se usaba en dos sitios del panel desde hace semanas y NUNCA estuvo definida,
   así que esas dos etiquetas se veían en pantalla; al escribirla aquí se
   esconden, que es lo que se quiso siempre. No se usa `display:none`: un campo
   así lo ignoran tanto los lectores de pantalla como el llavero del iPhone, y
   entonces no serviría para lo que se pone. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* El ojo de «ver la contraseña». Va DENTRO del campo y no debajo: al lado de
   la caja se lee como parte de ella, y debajo competiría con «¿No recuerdas tu
   contraseña?», que es lo otro que hay ahí y significa algo muy distinto.
   El hueco a la derecha del input se reserva siempre, así que el texto nunca
   pasa por debajo del botón. */
.login-pass{position:relative;display:block}
.login-pass input{padding-right:40px}
.login-pass-btn{position:absolute;top:50%;right:4px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:0;background:none;color:var(--text3);font-size:16px;cursor:pointer;
  border-radius:var(--r-sm);transition:color .15s,background .15s}
.login-pass-btn:hover{color:var(--text);background:var(--surface2)}
.login-pass-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Mientras la contraseña está a la vista, el ojo se queda encendido: es lo que
   avisa de que lo escrito se está leyendo desde cualquier sitio de la oficina. */
.login-pass-btn[aria-pressed="true"]{color:var(--accent)}
.login-btn{width:100%;padding:11px;background:var(--accent);color:#fff;border:none;border-radius:var(--r-sm);font-size:13px;font-weight:700;cursor:pointer;margin-top:8px}
.login-btn:hover{opacity:.88}
.login-btn:disabled{opacity:.5;cursor:not-allowed}
.login-hint{font-size:10px;color:var(--text3);text-align:center;margin-top:14px}
.login-link{display:block;width:100%;border:0;background:transparent;color:var(--accent);font:600 11px/1.45 inherit;text-align:center;cursor:pointer;padding:8px 4px 0}
.login-link:hover{text-decoration:underline}
/* La ayuda del login nace plegada: son tres líneas de letra pequeña que solo
   hacen falta el día que falla la contraseña, y apiladas bajo el botón partían
   en dos renglones en móvil. */
.login-help{margin-top:10px;padding-top:10px;border-top:0.5px solid var(--border)}
.login-help .login-hint{margin-top:0}
.login-help .login-link{padding-top:6px}
.login-hint-quiet{margin-top:10px;opacity:.65}
.login-error{display:none;color:#dc2626;font-size:11px;margin-bottom:8px;text-align:center;line-height:1.5}
.login-theme-corner{position:fixed;top:14px;right:14px;z-index:10}

/* ─── SPLASH DE ARRANQUE ────────────────────────────────────────────────── */
#view-boot{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg)}
#view-boot .boot-av{width:68px;height:68px;border-radius:50%;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;font-family:'Sora',sans-serif;letter-spacing:.02em;animation:bootPulse 1.1s ease-in-out infinite}
#view-boot .boot-txt{font-size:12px;color:var(--text3);font-weight:600}
@keyframes bootPulse{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1)}}

/* ─── TOAST / ESTADOS VACÍOS / SKELETONS ────────────────────────────────── */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 20px;border-radius:var(--r-sm);font-size:12px;font-weight:500;opacity:0;transition:opacity .2s;pointer-events:none;z-index:999;white-space:nowrap}
.toast.show{opacity:1}

.empty-state{text-align:center;padding:26px 18px;color:var(--text2)}
.empty-state .es-ico{width:48px;height:48px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px;color:var(--text3)}
.empty-state .es-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.empty-state .es-sub{font-size:11.5px;line-height:1.5;max-width:260px;margin:0 auto}

@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skel{background:linear-gradient(90deg,#ECEAE3 25%,#F6F5F1 37%,#ECEAE3 63%);background-size:200% 100%;animation:shimmer 1.3s ease-in-out infinite;border-radius:6px;display:block}
.skel-line{height:11px;margin:7px 0}
.skel-kpi{height:74px;border-radius:var(--r)}
.skel-row{height:42px;margin-bottom:8px;border-radius:var(--r-sm)}

/* ─── HERO (Mi resumen) ─────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;border-radius:var(--r);padding:22px 24px;margin-bottom:18px;color:#fff;
  background:linear-gradient(135deg,#6D28D9 0%,#7C3AED 55%,#4338CA 130%);box-shadow:var(--shadow-md)}
.hero::after{content:'';position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08)}
.hero-date{font-size:11px;font-weight:600;text-transform:capitalize;opacity:.85;letter-spacing:.02em}
.hero-hello{font-size:23px;font-weight:800;letter-spacing:-.5px;margin:3px 0 10px}
.hero-status{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);padding:9px 15px;border-radius:30px;font-size:13px;font-weight:700}
.hero-status i{font-size:16px}

/* ─── MODAL ─────────────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(20,20,15,.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:900;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal{background:var(--surface);border-radius:var(--r);width:100%;max-width:440px;box-shadow:var(--shadow-lg);transform:translateY(14px) scale(.98);transition:transform .22s;max-height:88vh;overflow-y:auto}
/* Formularios largos —el editor del generador tiene dieciséis campos—. En 440px
   eran una tira estrecha de dos pantallas de alto en un monitor de sobremesa.
   El `min(...)` es a propósito: esta regla es más específica que el
   `.modal{max-width:100%}` de móvil, así que sin él lo pisaría y en el teléfono
   el modal se saldría de la pantalla. */
.modal.is-ancho{max-width:min(860px,100%)}
/* Un punto medio para la ficha del empleado: con 440px, «Rol» y «Grupo de turno»
   quedaban en dos columnas de 200px y casi todo partía en dos renglones, lo que
   alargaba la ventana justo cuando lo que sobra es alto. Mismo `min(...)` y
   mismo motivo que arriba: en el teléfono manda el ancho de la pantalla. */
.modal.is-medio{max-width:min(520px,100%)}
.modal-overlay.show .modal{transform:translateY(0) scale(1)}
/* Al pulsar fuera, el cuadro da un respingo en vez de cerrarse: dice «te he
   oído, pero por aquí no se sale» sin borrar nada de lo escrito. */
.modal-overlay.show .modal.rebota{animation:modal-rebota .22s ease}
@keyframes modal-rebota{30%{transform:scale(1.015)}60%{transform:scale(.995)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.modal-overlay.show .modal.rebota{animation:none}}
/* El título y su explicación van uno al lado del otro, pero sin sitio se
   pegaban letra con letra («Editar tarea|Puedes cambiar…»). Con el hueco y el
   salto, en pantalla estrecha la explicación baja a su propia línea. */
.modal-head{padding:14px 18px 12px;border-bottom:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2px 14px}
.modal-head p{flex:1 1 210px}
.modal-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px}
.modal-close{background:none;border:none;cursor:pointer;color:var(--text3);font-size:16px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background .1s}
.modal-close:hover{background:var(--surface2);color:var(--text)}
.modal-body{padding:16px 20px}
.modal-foot{padding:12px 20px 18px;display:flex;gap:10px;justify-content:flex-end;border-top:0.5px solid var(--border)}
.modal-success{text-align:center;padding:28px 24px}
.modal-success .ms-ring{width:72px;height:72px;border-radius:50%;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto 16px;animation:pop .4s cubic-bezier(.18,.89,.32,1.28) both}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.modal-success h3{font-size:17px;font-weight:800;margin-bottom:7px}
.modal-success p{font-size:12.5px;color:var(--text2);line-height:1.55;max-width:320px;margin:0 auto}

/* ─── BENTO GRID (Mi resumen empleado) ──────────────────────────────────── */
.bento-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.bento-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r);padding:14px;min-height:110px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.bento-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:8px;display:flex;align-items:center;gap:5px}
.bento-lbl i{font-size:12px}
.bento-cumples-card{grid-column:1/-1;min-height:auto}
.hoy-row{display:flex;align-items:center;gap:10px;padding:7px 0}
.hoy-row+.hoy-row{border-top:0.5px solid var(--border)}
.hoy-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.hoy-name{font-size:12.5px;font-weight:600;color:var(--text)}
.hoy-sub{font-size:10.5px;color:var(--text2)}
.hoy-right{margin-left:auto;text-align:right;font-size:10.5px;color:var(--text2);white-space:nowrap;flex-shrink:0}
.hoy-right b{display:block;font-size:11px;color:var(--text)}
.bento-donut-inner{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.bento-donut-ring{width:64px;height:64px;flex-shrink:0}
.bento-donut-leg{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.donut-leg-item{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--text2);min-width:0}
.donut-leg-item .dleg-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut-leg-item .dleg-val{margin-left:auto;font-weight:700;color:var(--text);font-size:10px;flex-shrink:0}

/* ─── CUENTA ATRÁS ──────────────────────────────────────────────────────── */
.countdown{display:flex;align-items:center;gap:16px;background:var(--info-bg);border:0.5px solid var(--info);border-radius:var(--r);padding:16px 20px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.countdown-num{font-size:40px;font-weight:800;line-height:1;color:var(--info-txt);letter-spacing:-1.5px}
.countdown-txt{flex:1}
.countdown-title{font-size:13px;font-weight:800;color:var(--info-txt)}
.countdown-sub{font-size:11.5px;color:var(--info-txt);opacity:.85;margin-top:2px}
.hero-joke{font-size:12px;opacity:.92;margin-top:11px;font-style:italic;max-width:520px;line-height:1.5}

/* ─── LÍNEA DE PROGRESO ─────────────────────────────────────────────────── */
.prog{display:flex;align-items:flex-start;gap:0;margin:6px 0 2px}
.prog-step{flex:1;text-align:center;position:relative;min-width:0}
.prog-step::before{content:'';position:absolute;top:11px;left:-50%;width:100%;height:2.5px;background:var(--border-md);z-index:0}
.prog-step:first-child::before{display:none}
.prog-step.done::before,.prog-step.current::before{background:var(--accent)}
.prog-dot{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;background:var(--surface2);border:2px solid var(--border-md);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-size:11px;color:var(--text3);transition:all .25s}
.prog-step.done .prog-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.prog-step.current .prog-dot{background:var(--surface);border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px var(--accent-bg)}50%{box-shadow:0 0 0 7px var(--accent-bg)}}
.prog-lbl{font-size:9.5px;font-weight:600;color:var(--text3);line-height:1.25;padding:0 2px}
.prog-step.done .prog-lbl,.prog-step.current .prog-lbl{color:var(--text)}

/* ─── MIS NORMAS CLARAS ─────────────────────────────────────────────────── */
.normas-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.norma{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;background:var(--surface2);border-radius:var(--r-sm)}
.norma i{font-size:18px;flex-shrink:0;margin-top:1px}
.norma-h{font-size:12px;font-weight:700;color:var(--text)}
.norma-p{font-size:11px;color:var(--text2);line-height:1.5;margin-top:2px}

/* ─── CALENDARIO ANUAL ──────────────────────────────────────────────────── */
.year-label{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.month-block{border:0.5px solid var(--border);border-radius:var(--r);padding:8px 6px}
.month-block.is-current-month{box-shadow:0 0 0 2px var(--accent);border-color:var(--accent)}
.month-name{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);text-align:center;margin-bottom:5px}
.mini-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.mc-hdr{text-align:center;font-size:8px;font-weight:700;color:var(--text3);padding-bottom:2px}
.mc-cell{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:3px;font-size:9px;font-weight:600;color:var(--text3);cursor:default;overflow:hidden;transition:outline .1s}
.mc-cell.selectable{cursor:pointer}
.mc-cell.selectable:hover{outline:1.5px solid var(--accent)}
.mc-cell.mc-today{outline:2px solid var(--accent)!important;color:var(--accent);font-weight:800;z-index:1}
.mc-cell.mc-selected{outline:2px solid var(--accent)!important;background:rgba(109,40,217,.1)}
.mc-cell.mc-blocked{background:var(--surface2);color:var(--text3)}
.mc-cell.mc-blocked:not(.selectable){cursor:not-allowed}
.mc-cell.mc-weekend{color:var(--we-txt);background:var(--we-bg)}
.mc-cell.mc-festivo{background:var(--we-bg)!important;cursor:not-allowed}
.mc-cell.mc-festivo .mc-num{color:var(--we-txt)!important;font-weight:700}
.mc-cell.mc-own-approved .mc-num{background:var(--ok-bg);color:var(--ok-txt);border-radius:3px;font-weight:800}
.mc-cell.mc-own-pending  .mc-num{background:var(--pend-bg);color:var(--pend-txt);border-radius:3px;font-weight:800}
.mc-cell.mc-own-approved,.mc-cell.mc-own-pending{cursor:default}
.mc-num{position:relative;z-index:2;font-size:9px;font-weight:700;line-height:1;display:flex;width:100%;height:70%;align-items:center;justify-content:center;overflow:hidden;border-radius:2px}
.mc-num.one{background:var(--emp-bg);color:var(--emp-col)}
.mc-num.multi{font-weight:800}
.mc-dots{display:flex;gap:2px;align-items:center;justify-content:center;position:relative;z-index:2;margin-top:1px}
.mc-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0}
/* Día en periodo de revisión (campaña) y puente: marcas sutiles */
.mc-cell.mc-campana::after{content:'';position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:60%;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--warn) 0 3px,transparent 3px 5px);z-index:1;opacity:.55}

/* Leyenda */
.legend-wrap{padding-top:2px;display:flex;gap:14px 20px;flex-wrap:wrap;align-items:center}
.leg-emp{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text2)}
.leg-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.leg-sep{width:0.5px;height:14px;background:var(--border-md)}
.leg-status{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text2)}
.leg-dot-ex{width:7px;height:7px;border-radius:50%}
.cancel-note{display:flex;align-items:flex-start;gap:8px;margin-bottom:14px;padding:10px 12px;background:var(--surface2);border:0.5px solid var(--border-md);border-radius:8px;font-size:11.5px;line-height:1.5;color:var(--text2)}
.cancel-note i{color:var(--accent);font-size:15px;flex-shrink:0;margin-top:1px}
.cal-actions-bar{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:0.5px solid var(--border)}
.sel-info{font-size:12px;color:var(--text2)}
.sel-info span{font-weight:700;color:var(--text)}
.cal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.btn-mini{font-size:11px;font-weight:600;padding:6px 12px;border-radius:30px;border:0.5px solid var(--border-md);background:var(--surface);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.btn-mini:hover{background:var(--surface2)}
.btn-mini.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.month-select{display:none}
.year-select{font-size:12px;font-weight:700;padding:5px 9px;border-radius:var(--r-sm);border:0.5px solid var(--border-md);background:var(--surface);color:var(--text);cursor:pointer;font-family:'Sora',sans-serif}

/* Tooltip de día */
.cal-tip{position:fixed;z-index:1000;background:#141410;color:#fff;border-radius:8px;padding:9px 11px;font-size:11px;line-height:1.5;max-width:220px;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(4px);transition:opacity .15s, transform .15s;pointer-events:none}
.cal-tip.show{opacity:1;transform:translateY(0)}
.cal-tip-title{font-weight:700;margin-bottom:3px;font-size:11px}
.cal-tip-row{display:flex;align-items:center;gap:6px;margin-top:3px}
.cal-tip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* Filas de solicitudes + resumen del modal */
.sol-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:0.5px solid var(--border)}
.sol-row:last-child{border-bottom:none}
.sol-fechas{flex:1;min-width:0}
.sol-periodo{font-size:12px;font-weight:600;overflow-wrap:anywhere}
.sol-sub{font-size:10px;color:var(--text2)}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:0.5px solid var(--border);font-size:12.5px}
.sum-row:last-child{border-bottom:none}
.sum-row .sl{color:var(--text2)}
.sum-row .sv{font-weight:700;color:var(--text)}
.sum-note{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:11px 13px;border-radius:var(--r-sm);font-size:11.5px;line-height:1.5}
.sum-note.info{background:var(--info-bg);color:var(--info-txt)}
.sum-note.warn{background:var(--warn-bg);color:var(--warn-txt)}
.sum-note i{font-size:15px;flex-shrink:0;margin-top:1px}
.modal-head h3{font-size:16px;font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;gap:8px}
.modal-head p{font-size:11.5px;color:var(--text2);margin-top:3px}
.cal-add{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--info-txt);background:var(--info-bg);border:none;border-radius:20px;padding:3px 9px;cursor:pointer;text-decoration:none}
.cal-add:hover{filter:brightness(.97)}

/* Chips y selects de filtro */
.filter-bar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.filter-chip{font-size:11px;font-weight:600;padding:6px 13px;border-radius:30px;border:0.5px solid var(--border-md);background:var(--surface);color:var(--text2);cursor:pointer;transition:all .12s;display:inline-flex;align-items:center;gap:5px}
.filter-chip:hover{background:var(--surface2)}
.filter-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.filter-select{font-size:11px;font-weight:600;padding:6px 10px;border-radius:var(--r-sm);border:0.5px solid var(--border-md);background:var(--surface);color:var(--text);cursor:pointer}

/* ─── WALLCHART "¿QUIÉN ESTÁ FUERA?" ────────────────────────────────────── */
.wout-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wout-table{border-collapse:separate;border-spacing:0;width:100%;min-width:420px;font-size:11px}
.wout-hdr th{padding:5px 3px;font-size:10px;font-weight:700;text-align:center;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;background:var(--surface);border-bottom:0.5px solid var(--border);white-space:nowrap}
.wout-hdr th.wout-today-hdr{background:var(--accent-bg);color:var(--accent-txt);font-weight:800}
.wout-hdr th.wout-weekend-hdr{background:var(--we-bg);color:var(--we-txt)}
.wout-hdr th.wout-vac-hdr{font-weight:800}
.wout-emp-col{padding:6px 10px 6px 0;font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;vertical-align:middle;min-width:90px;width:1%}
.wout-cell{width:30px;min-width:30px;max-width:30px;height:26px;text-align:center;vertical-align:middle;border-left:0.5px solid var(--border);padding:2px}
.wout-pip{width:22px;height:22px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800}
/* «Fuera» va en gris hueco y sin inicial: no es una vacación de nadie, es la
   ausencia de una persona. Que se distinga de un vistazo del color propio de
   cada uno, y que no invite a preguntarse de qué tipo es. */
.wout-fuera{border:1.5px dashed var(--text3);color:var(--text3);background:transparent;font-size:12px}
.wout-dot{width:8px;height:8px;border-radius:50%;margin:0 auto;background:var(--surface2);opacity:.35}
.wout-today-col{background:rgba(109,40,217,.05)}
[data-theme="dark"] .wout-today-col{background:rgba(167,139,250,.08)}
.wout-weekend-col{background:#FEF2F2}
[data-theme="dark"] .wout-weekend-col{background:rgba(239,83,80,.06)}

/* ─── TARJETAS DE EQUIPO (panel responsable) ────────────────────────────── */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.team-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);transition:box-shadow .2s, transform .2s}
.team-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.tc-top{display:flex;align-items:center;gap:9px}
.tc-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.tc-meta{flex:1;min-width:0}
.tc-name{font-size:12px;font-weight:700;color:var(--text)}
.tc-group{font-size:10px;color:var(--text3);margin-top:1px}
.tc-disp{text-align:right;flex-shrink:0}
.tc-disp-n{font-size:24px;font-weight:800;letter-spacing:-1px;line-height:1;font-family:'Sora',sans-serif}
.tc-disp-l{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-top:1px}
.tc-bar{height:5px;background:var(--surface2);border-radius:3px;overflow:hidden}
.tc-bar-fill{height:100%;border-radius:3px}
.tc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.tc-stat{background:var(--surface2);border-radius:var(--r-sm);padding:6px 3px;text-align:center}
.tc-stat-n{font-size:15px;font-weight:700;font-family:'Sora',sans-serif}
.tc-stat-l{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-top:1px}
.tc-next{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;border-radius:var(--r-sm);padding:5px 8px}

/* ─── ACCIONES PENDIENTES ───────────────────────────────────────────────── */
.alert-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:0.5px solid var(--border)}
.alert-row:last-child{border-bottom:none}
.alert-ico{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.alert-ico.warn{background:var(--pend-bg);color:var(--pend-txt)}
.alert-ico.info{background:var(--info-bg);color:var(--info-txt)}
.alert-title{font-size:12px;font-weight:700;margin-bottom:2px;overflow-wrap:anywhere}
.alert-desc{font-size:11px;color:var(--text2);margin-bottom:6px;overflow-wrap:anywhere}
.alert-btns{display:flex;gap:6px;flex-wrap:wrap}
.abtn{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:4px 10px;border-radius:var(--r-sm);cursor:pointer;border:0.5px solid var(--border-md);background:transparent;color:var(--text);transition:background .1s}
.abtn:hover{background:var(--surface2)}
.abtn.green{background:var(--ok-bg);color:var(--ok-txt);border-color:transparent}
.abtn.red{background:var(--den-bg);color:var(--den-txt);border-color:transparent}

/* ─── RESUMEN MENSUAL DEL EQUIPO ────────────────────────────────────────── */
.ms-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ms-box{background:var(--surface2);border-radius:var(--r-sm);padding:12px 14px}
.ms-box-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);margin-bottom:8px;display:flex;align-items:center;gap:5px}
.ms-item{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:4px 0}
.ms-item .mi-v{font-weight:700}
.ms-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;flex:1;margin:0 8px}
.ms-bar-fill{height:100%;border-radius:3px;background:var(--accent)}

/* ─── GRÁFICOS Y HEATMAP ────────────────────────────────────────────────── */
.chart-wrap{position:relative;height:180px;width:100%}
.hmap-outer{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.hmap-table{border-collapse:separate;border-spacing:2px;font-size:9px}
.hmap-day-hdr{width:14px;height:12px;text-align:center;color:var(--text3);font-weight:600;padding:0 1px}
.hmap-month-lbl{font-size:9px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;padding-right:8px;white-space:nowrap;vertical-align:middle}
.hmap-cell{width:14px;height:14px;border-radius:3px;cursor:default;transition:transform .12s,box-shadow .12s}
.hmap-cell:hover{transform:scale(1.35);box-shadow:0 2px 6px rgba(0,0,0,.2);z-index:2;position:relative}
.hmap-libre{opacity:.2}
.hmap-today-cell{outline:1.5px solid var(--accent)}
.hmap-legend{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text3);margin-top:8px}
.hmap-legend-item{width:12px;height:12px;border-radius:2px}

@media(max-width:900px){#adm-kpis-bar{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:600px){#adm-kpis-bar{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:768px){
  .team-grid{grid-template-columns:1fr;gap:8px}
  .ms-grid{grid-template-columns:1fr}
  #adm-charts-row,#adm-stats-charts{grid-template-columns:1fr!important}
}

/* ─── ADMINISTRACIÓN: formularios y listas ──────────────────────────────── */
.adm-list-row{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:0.5px solid var(--border)}
.adm-list-row:last-child{border-bottom:none}
.adm-list-row.inactivo{opacity:.55}
.adm-row-main{flex:1;min-width:0}
.adm-row-name{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.adm-row-sub{font-size:11px;color:var(--text2);margin-top:2px;overflow-wrap:anywhere}
.adm-row-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.adm-employee-card{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px 4px;border-bottom:0.5px solid var(--border)}
.adm-employee-card:last-child{border-bottom:none}
.adm-employee-card.inactivo{opacity:.55}
.adm-employee-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.adm-employee-card .adm-row-sub{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden}
.adm-employee-user{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-employee-user i{font-size:12px;flex-shrink:0}
.adm-employee-birthday{white-space:nowrap;color:var(--text3);flex-shrink:0}
.adm-reset-short{display:none}
.adm-group-card{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px 4px;border-bottom:0.5px solid var(--border)}
.adm-group-card:last-child{border-bottom:none}
.adm-group-icon{width:34px;height:34px;border-radius:var(--r-sm);background:var(--accent-bg);color:var(--accent-txt);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.adm-group-members{font-size:11px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:20px}
.tag-admin{background:var(--accent-bg);color:var(--accent-txt)}
.tag-baja{background:var(--can-bg);color:var(--can-txt)}
/* «Fuera del equipo» no es una baja: la cuenta funciona con normalidad. Va en
   gris apagado, no en rojo, para que no parezca un problema. */
.tag-fuera{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
.tag-visitas{background:var(--accent-bg);color:var(--accent-txt);border:1px solid var(--accent-bg)}
.tag-grupo{background:var(--surface2);color:var(--text2)}
/* `minmax(0,1fr)`, no `1fr`. Un `1fr` pelado tiene mínimo automático: la columna
   NO puede encogerse por debajo de lo que mida su contenido, así que un campo
   con un texto largo debajo se quedaba con 283px y dejaba al de al lado en 138,
   y la rejilla entera se salía del modal —recortada, sin forma de verla—. */
/* `hidden` tiene que ganar SIEMPRE.
   El navegador trae de serie `[hidden]{display:none}`, pero es una regla suya y
   la pierde contra cualquier clase nuestra: `.form-group{display:flex}` la pisa.
   Resultado, hasta el 11/08/2026: los grupos de «Orden de rotación» y «Personas
   destinatarias» llevaban el atributo puesto y se pintaban igual. Solo lo
   parecía al abrir el editor porque su contenido está vacío hasta que se elige
   el modo; en cuanto se elegía uno, ya no había forma de que se fuera. */
[hidden]{display:none!important}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:11px;font-weight:600;color:var(--text2)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:9px 11px;font-size:13px;line-height:1.4;border-radius:var(--r-sm);border:0.5px solid var(--border-md);background:var(--surface);color:var(--text);font-family:inherit}
/* Una casilla no es un campo de texto: con el `width:100%` de arriba salía de
   283px de ancha, pegada al borde derecho y lejísimos de su etiqueta. */
.form-group input[type=checkbox],.form-group input[type=radio]{width:auto;flex:0 0 auto;padding:0;accent-color:var(--accent)}
.form-group textarea{resize:vertical}
/* Lista de casillas en rejilla: los doce meses y las personas destinatarias.
   Sin esto cada casilla era una línea y elegir los meses de una trimestral
   ocupaba una pantalla entera. `auto-fill` sirve para las dos: los meses caben
   de seis en seis y los nombres, de dos o tres. */
.tpl-meses{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px 10px}
.tpl-meses label{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--text);cursor:pointer}
/* El contenedor de los meses se vacía y se rellena al cambiar la frecuencia, así
   que no puede ser una celda más: en una frecuencia sin meses dejaba un hueco en
   blanco en mitad del formulario, y con meses encerraba la rejilla en media
   columna. `display:contents` lo borra del reparto y deja que su `.form-group
   full` ocupe la fila entera, que es lo que dice su clase. */
#tpl-meses-contenedor{display:contents}
/* «Añadir paso» es un botón pequeño dentro de una columna flex: sin esto se
   estiraba de lado a lado del modal y parecía una barra. */
.template-steps-editor + .btn{align-self:flex-start}
/* Las personas destinatarias elegidas, como etiquetas seguidas. A diferencia de
   la rotación no van numeradas ni con flechas: cada una recibe su propia tarea
   y el orden no significa nada. */
.template-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.template-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 6px 5px 10px;border:1px solid var(--border);border-radius:99px;background:var(--surface2);color:var(--text);font-size:11px;font-weight:600}
.template-chip button{display:grid;place-items:center;width:17px;height:17px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text3);font-size:11px;cursor:pointer}
/* El periodo de cada persona, dentro de su propia etiqueta. Es un botón porque
   se pulsa para cambiarlo, pero no tiene que parecer un botón más: lo que dice
   —«siempre», «cada año, ene – jul»— es un dato, no una acción. */
.template-chip-periodo{width:auto!important;height:auto!important;gap:4px;display:inline-flex!important;align-items:center;padding:2px 7px!important;border-radius:99px!important;background:var(--surface)!important;color:var(--text3)!important;font:600 10px/1.3 inherit;white-space:nowrap}
.template-chip-periodo:hover{color:var(--accent)!important;box-shadow:inset 0 0 0 1px var(--accent)}
.template-chip.con-periodo{background:var(--accent-bg);border-color:transparent;color:var(--accent-txt)}
.template-chip.con-periodo .template-chip-periodo{color:var(--accent-txt)!important}
/* El panel de fechas de una persona, DENTRO del editor. No es una ventana
   emergente a propósito: el portal solo tiene una, y abrir la segunda borraba
   la del generador (lo encontró Salva el 11/08/2026 probándolo). */
.template-periodo{margin-top:9px;padding:11px 12px;border:1px solid var(--accent);border-radius:var(--r-sm);background:var(--surface)}
.template-periodo>strong{display:block;margin-bottom:8px;color:var(--accent-txt);font:700 11px/1.3 Sora,sans-serif}
.template-periodo-campos{display:flex;flex-wrap:wrap;gap:9px 14px;align-items:flex-end}
.template-periodo-campos>label{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:600;color:var(--text2)}
.template-periodo-campos input[type=date]{padding:7px 9px;font-size:12px;border-radius:var(--r-sm);border:0.5px solid var(--border-md);background:var(--surface);color:var(--text);font-family:inherit}
.template-periodo-anual{flex-direction:row!important;align-items:center;gap:6px!important;padding-bottom:8px;color:var(--text)!important}
.template-periodo-anual input{width:auto;accent-color:var(--accent)}
.template-periodo>small{display:block;margin-top:8px;color:var(--text3);font-size:10px;line-height:1.45}
.template-periodo-acciones{display:flex;justify-content:flex-end;gap:7px;margin-top:9px}
.template-chip button:hover{background:var(--st-dang-bg);color:var(--st-dang-tx)}
.template-chip button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:2px solid var(--accent);border-color:transparent}
/* Los ejemplos, en gris clarito y en cursiva. Sin esto el navegador los pinta
   en un gris casi de texto normal y parecen datos ya escritos: al abrir una
   ficha de cliente daba la sensación de estar mirando la de otro, o de haber
   rellenado algo sin querer (Salva, 20/08/2026). */
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text3);opacity:.75;font-style:italic}
.color-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.color-option{position:relative;display:block;cursor:pointer}
.color-option input{position:absolute;opacity:0;pointer-events:none}
.color-card{display:flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:5px 4px;border:1.5px solid var(--border-md);border-radius:8px;font-size:10px;font-weight:700;color:var(--text2);transition:border-color .12s,box-shadow .12s,transform .12s}
.color-option:hover .color-card{transform:translateY(-1px)}
.color-option input:checked + .color-card{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg);color:var(--text)}
.color-option input:focus-visible + .color-card{outline:2px solid var(--accent);outline-offset:2px}
.color-dot{width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;flex-shrink:0}
.form-err{background:var(--danger-bg);color:var(--danger-txt);padding:8px 10px;border-radius:var(--r-sm);font-size:11.5px;margin-top:10px;display:none}
.inline-add{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.inline-add .form-group{flex:1;min-width:120px}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
@media(max-width:600px){
  .adm-employee-card{grid-template-columns:42px minmax(0,1fr);align-items:start;gap:11px;padding:14px;margin-bottom:10px;border:0.5px solid var(--border);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm)}
  .adm-employee-card:last-child{border-bottom:0.5px solid var(--border)}
  .adm-employee-avatar{width:42px;height:42px;font-size:12px}
  .adm-employee-card .adm-row-main{padding-top:1px}
  .adm-employee-card .adm-row-name{font-size:14px;gap:5px}
  .adm-employee-card .adm-row-sub{display:flex;flex-direction:row;align-items:center;gap:6px;margin-top:5px;font-size:10.5px}
  .adm-employee-user{flex:1;width:auto;max-width:none}
  .adm-employee-birthday{margin-left:auto}
  .adm-row-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px;margin-top:2px}
  .adm-row-actions .abtn{justify-content:center;min-height:32px;padding:6px 5px;font-size:10px;gap:3px;white-space:nowrap}
  .adm-reset-long{display:none}
  .adm-reset-short{display:inline}
  .adm-group-card{grid-template-columns:42px minmax(0,1fr);align-items:start;gap:11px;padding:12px 14px;margin-bottom:10px;border:0.5px solid var(--border);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm)}
  .adm-group-card:last-child{border-bottom:0.5px solid var(--border)}
  .adm-group-icon{width:42px;height:42px;font-size:17px}
  .adm-group-card .adm-row-main{padding-top:2px}
  .adm-group-card .adm-row-name{font-size:14px}
  .adm-group-members{margin-top:4px;font-size:11px}
  .adm-group-card .adm-row-actions{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1px}
}

/* Selector de año (administración) */
.anio-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:0.5px solid var(--border);border-radius:var(--r);margin-bottom:8px;background:var(--surface2)}
.anio-num{font-size:22px;font-weight:800;font-family:'Sora',sans-serif;color:var(--text)}
.anio-estado{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:20px}
.anio-abierto{background:var(--ok-bg);color:var(--ok-txt)}
.anio-cerrado{background:var(--can-bg);color:var(--can-txt)}

/* Festivos / periodos chips */
.chip-list{display:flex;flex-direction:column;gap:6px}
.chip-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface2);border-radius:var(--r-sm);font-size:12px}
.chip-item .ci-fecha{font-weight:700;color:var(--text);min-width:120px}
.chip-item .ci-nombre{flex:1;color:var(--text2);overflow-wrap:anywhere}
.chip-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:15px;padding:3px;border-radius:6px;flex-shrink:0}
.chip-del:hover{background:var(--danger-bg);color:var(--danger)}
.periodo-tipo{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:20px}
.pt-bloqueado{background:var(--den-bg);color:var(--den-txt)}
.pt-revision{background:var(--pend-bg);color:var(--pend-txt)}
.subtab-bar{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.subtab{padding:7px 14px;border-radius:var(--r-sm);font-size:12px;font-weight:600;cursor:pointer;border:0.5px solid var(--border-md);background:transparent;color:var(--text2);transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.subtab.active{background:var(--accent);color:#fff;border-color:transparent}

/* ─── INFORME PARA LABORAL ──────────────────────────────────────────────── */
.emp-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:6px}
.emp-check{display:flex;align-items:center;gap:9px;padding:9px 11px;border:0.5px solid var(--border-md);border-radius:var(--r-sm);cursor:pointer;transition:all .12s;background:var(--surface)}
.emp-check:hover{background:var(--surface2)}
.emp-check.on{border-color:var(--accent);background:var(--accent-bg)}
.emp-check input{width:16px;height:16px;accent-color:var(--accent);flex-shrink:0}
.emp-check .ec-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex-shrink:0}
.emp-check .ec-name{font-size:12px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Documento del informe (colores fijos: se ve igual en pantalla y en el PDF) */
#informe-print-area{background:#fff;color:#18180F;border-radius:var(--r);overflow:hidden;border:0.5px solid var(--border)}
.inf-doc{padding:0}
.inf-header{background:linear-gradient(135deg,#6D28D9 0%,#4338CA 100%);color:#fff;padding:26px 30px}
.inf-header h2{font-family:'Sora',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.4px;margin-bottom:4px}
.inf-header .inf-sub{font-size:12.5px;opacity:.9}
.inf-header .inf-meta{font-size:11px;opacity:.8;margin-top:10px}
.inf-body{padding:22px 30px}
.inf-emp{border:1px solid #E6E4DD;border-radius:12px;padding:18px 20px;margin-bottom:16px;page-break-inside:avoid}
.inf-emp:last-child{margin-bottom:0}
.inf-emp-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #EFEEE8}
.inf-emp-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}
.inf-emp-name{font-family:'Sora',sans-serif;font-size:16px;font-weight:800;color:#18180F}
.inf-emp-grupo{font-size:11.5px;color:#6A6A60;margin-top:1px}
.inf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.inf-stat{background:#F7F6F1;border-radius:10px;padding:12px 8px;text-align:center}
.inf-stat-n{font-family:'Sora',sans-serif;font-size:24px;font-weight:800;line-height:1;letter-spacing:-1px}
.inf-stat-l{font-size:9.5px;color:#6A6A60;text-transform:uppercase;letter-spacing:.05em;margin-top:5px;font-weight:600}
.inf-periodos-t{font-size:10.5px;font-weight:700;color:#8A8A80;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.inf-per-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid #F0EFE9;font-size:12.5px}
.inf-per-row:last-child{border-bottom:none}
.inf-per-fecha{font-weight:600;color:#18180F}
.inf-per-dias{color:#6A6A60;font-size:11.5px}
.inf-per-vacia{font-size:12px;color:#A8A89E;font-style:italic;padding:6px 0}
.inf-footer{padding:16px 30px;border-top:1px solid #EFEEE8;font-size:10.5px;color:#8A8A80;text-align:center}

@media print{
  body{background:#fff!important}
  body>*{display:none!important}
  #print-root{display:block!important;position:absolute;inset:0;margin:0;padding:0}
  #print-root #informe-print-area{border:none;border-radius:0}
  @page{margin:12mm}

  /* ── Imprimir el Panel de control ──────────────────────────────────────
     Se activa desde su botón, que pone `pc-print` en el body justo antes de
     abrir el diálogo. Sin esto, imprimir el panel daba una hoja en blanco. */
  body.pc-print>#view-admin{display:block!important}
  body.pc-print .sidebar,
  body.pc-print .page-hdr>div:last-child,
  body.pc-print #toast,
  body.pc-print .pc-obj-edit,
  body.pc-print .pc-cambios-x{display:none!important}
  /* Las tarjetas del panel tienen alto fijo y hacen scroll dentro; en papel eso
     recorta justo lo que se quiere enseñar. Aquí crecen a su contenido. */
  body.pc-print .pc-card{height:auto!important;overflow:visible!important;break-inside:avoid;box-shadow:none}
  body.pc-print .pc-card-body{height:auto!important;overflow:visible!important}
  body.pc-print .pc-diario{max-height:none!important}
  body.pc-print .pc-band{break-inside:avoid}
  /* En papel no hay hover ni clic: los botones del panel se imprimen como texto
     para que no parezcan pulsables sobre una hoja. */
  body.pc-print .pc-sb-btn,body.pc-print .pc-tile,body.pc-print .pc-st,body.pc-print .pc-mio-x,body.pc-print .pc-mio-mas{border-color:var(--border)!important;background:none!important}
  body.pc-print .pc-mini{display:none!important}
}

/* Animación de aparición de KPIs y confeti */
@keyframes kpiIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.kpi.animate-in{animation:kpiIn .35s ease both}
.confetti-piece{position:fixed;width:8px;height:8px;z-index:1200;pointer-events:none;border-radius:1px;will-change:transform,opacity}

/* ─── ACCESIBILIDAD / ANIMACIONES ───────────────────────────────────────── */
:focus-visible{outline:2.5px solid var(--info);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.login-btn:focus-visible{outline:2.5px solid var(--info);outline-offset:2px}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.page.active{animation:fadeInUp .28s ease both}
@media (prefers-reduced-motion: reduce){
  .page.active{animation:none}
  *{transition:none!important}
}

/* ─── RESPONSIVE — MÓVIL PRIORITARIO ────────────────────────────────────── */
html,body{max-width:100%;overflow-x:hidden}
@media (max-width: 768px) {
  body{font-size:13px}
  .app{flex-direction:column;min-height:auto}
  .sidebar{width:100%;border-right:none;border-bottom:0.5px solid var(--border);flex-shrink:0;position:sticky;top:0;z-index:50;background:var(--surface)}
  .mobile-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;user-select:none}
  .mobile-bar-left{display:flex;align-items:center;gap:10px}
  .mobile-bar-left i.menu-ico{font-size:18px;color:var(--text)}
  .mobile-bar-page{font-size:14px;font-weight:700;color:var(--text)}
  .mobile-bar i.chevron{font-size:16px;color:var(--text2);transition:transform .2s}
  .sidebar.open .mobile-bar i.chevron{transform:rotate(180deg)}
  .sidebar-content{display:none;flex-direction:column;padding:4px 0 10px;border-top:0.5px solid var(--border);max-height:75vh;overflow-y:auto}
  .sidebar.open .sidebar-content{display:flex}
  .logo{display:none}
  .user-chip{margin:8px 6px 10px}
  .nav-item{padding:12px 18px;font-size:14px;flex-direction:row;gap:11px}
  .nav-group-toggle,.nav-label{font-size:12px}
  .nav-group-toggle span i,.nav-label i{font-size:18px}
  .nav-item i{font-size:18px;width:20px;text-align:center}
  .sidebar-bottom{margin-top:6px;padding:0}
  .sidebar-bottom::before{content:'';display:block;height:0.5px;background:var(--border);margin:6px 18px 8px}
  .main{padding:12px 10px}
  .page-hdr{margin-bottom:14px}
  .page-hdr h1{font-size:18px}
  .page-hdr p{font-size:11px}
  .kpis{grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
  .kpi{padding:11px 10px}
  .kpi-lbl{font-size:9px;margin-bottom:6px;gap:4px}
  .kpi-val{font-size:22px}
  .kpi-sub{font-size:10px}
  .card{margin-bottom:10px}
  .card-head{padding:11px 14px}
  .card-body{padding:12px}
  .login-card{width:100%;max-width:360px;padding:28px 22px}
  .modal{max-width:100%}

  /* Calendario anual: 2 meses por fila; selector de mes visible */
  .year-grid{grid-template-columns:1fr 1fr;gap:6px}
  .month-block{padding:6px 5px}
  .month-name{font-size:8px}
  .mc-hdr{font-size:6px}
  .mc-cell{font-size:8px}
  .mc-num{font-size:8px}
  .legend-wrap{gap:8px 12px;font-size:9px}
  .leg-emp,.leg-status{font-size:9px}
  .cal-actions-bar{flex-direction:column;align-items:stretch;gap:10px}
  .cal-actions-bar .btn{justify-content:center;padding:11px}
  .month-select{display:block;width:100%;margin-bottom:10px;padding:10px;font-size:13px;border-radius:var(--r-sm);border:0.5px solid var(--border-md);background:var(--surface);color:var(--text)}
  .year-grid.single-month .month-block{display:none}
  .year-grid.single-month{display:block}
  .year-grid.single-month .month-block.show-mobile{display:block;width:100%;padding:12px 8px}
  .year-grid.single-month .month-block.show-mobile .month-name{font-size:12px;margin-bottom:8px}
  .year-grid.single-month .month-block.show-mobile .mc-hdr{font-size:11px;padding-bottom:4px}
  .year-grid.single-month .month-block.show-mobile .mini-cal{gap:3px}
  .year-grid.single-month .month-block.show-mobile .mc-cell{font-size:13px;border-radius:6px}
  .year-grid.single-month .month-block.show-mobile .mc-num{font-size:13px}

  .normas-grid{grid-template-columns:1fr}
  .filter-chip{padding:8px 14px;font-size:12px}
  .cal-add{padding:5px 11px;font-size:11px}
  .badge{font-size:9px;padding:3px 8px}
  .sol-row{gap:8px}
  .sol-periodo{font-size:12px}
  .sol-sub{font-size:10px}
  .wout-emp-col{min-width:70px;font-size:10px}

  .bento-row{gap:8px}
  .bento-card{padding:9px;min-height:92px}
  .bento-lbl{font-size:8px;margin-bottom:5px;gap:3px}
  .bento-lbl i{font-size:10.5px}
  .bento-donut-ring{width:48px;height:48px}
  .bento-donut-inner{flex-direction:column;gap:4px}
  .bento-donut-leg{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:3px 8px;width:100%}
  .donut-leg-item{gap:3px}
  .donut-leg-item .dleg-txt{display:none}
  .donut-leg-item .dleg-val{margin-left:0;font-size:9px}
}
@media (max-width: 430px) {
  .main{padding:11px 9px}
  .kpis{gap:6px}
  .kpi-val{font-size:20px}
}

/* ── «Mis tareas · hoy»: titular, cifras-filtro, bloques y filas ───────── */
/* Las columnas son FIJAS a propósito. Con el alto libre de las tarjetas, un
   título largo desplazaba el estado y no había dos filas alineadas: con quince
   tareas al día eso obliga a leerlas una a una en vez de barrerlas con la
   vista. En móvil se vuelve a apilar, que ahí no hay ancho que repartir. */


/* La fecha y, pegado a ella, el botón de actualizar. Estaba en la fila de
   acciones de arriba, con el mismo tamaño que «Apuntar tarea» y «He terminado
   por hoy», ocupando un cuarto de la fila: y no hace falta casi nunca, porque
   hay un latido cada minuto que ya detecta altas y cambios. Solo cubre los
   borrados, que es el caso raro. Aquí sigue a mano y deja de competir. */
.task-page-fecha{display:flex;align-items:center;gap:7px}
.task-refrescar{width:22px;height:22px;flex:none;border-radius:6px;border:0.5px solid var(--border-md);background:var(--surface);color:var(--text3);cursor:pointer;display:grid;place-items:center;font-size:12px}
.task-refrescar:hover{border-color:var(--accent);color:var(--accent)}

.task-summary-grid .task-kpi{width:100%;text-align:left;font-family:inherit;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s,opacity .15s}
.task-summary-grid .task-kpi:hover{transform:translateY(-1px);border-color:var(--accent)}
.task-summary-grid .task-kpi.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
/* Una alarma que vale cero no es una noticia. «En espera» y «Atrasadas» se
   apagan hasta casi desaparecer mientras no haya nada, y vuelven enteras en
   cuanto lo hay: así el color rojo del panel significa algo. Siguen siendo
   pulsables —el filtro funciona igual— y al pasar por encima se encienden. */
.task-summary-grid .task-kpi.is-apagada{opacity:.42}
.task-summary-grid .task-kpi.is-apagada:hover,
.task-summary-grid .task-kpi.is-apagada:focus-visible{opacity:1}

/* La franja de «ya está», encima de la lista. Verde de «hecho», sin confeti:
   la fiesta sigue detrás de «He terminado por hoy». Esto solo dice el estado. */
.task-dia-hecho{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:0.5px solid var(--border);background:var(--st-ok-bg);color:var(--st-ok-tx)}
.task-dia-hecho i{font-size:19px;flex:none}
.task-dia-hecho strong{display:block;font:700 12.5px/1.3 Sora,sans-serif}
.task-dia-hecho span{display:block;font-size:10.5px;margin-top:2px;opacity:.85}

/* Los dos post-it de cumpleaños. Van antes del tablón, que es donde se mira al
   llegar, y son la única cosa del portal que se pinta sola y no pide nada. */
.cumple-nota{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r);margin-bottom:10px;border:0.5px solid var(--border)}
.cumple-nota .cumple-tarta{font-size:24px;line-height:1;flex:none}
.cumple-nota strong{display:block;font:700 13px/1.3 Sora,sans-serif;color:var(--text)}
.cumple-nota span{display:block;font-size:11px;line-height:1.45;color:var(--text2);margin-top:3px}
.cumple-mia{background:var(--accent-bg);border-color:transparent}
.cumple-mia strong{color:var(--accent-txt)}
.cumple-equipo{background:var(--surface)}

/* El estado de un día que no se trabaja. Más aire y sin botón de acción:
   no hay nada que hacer, que es exactamente lo que tiene que transmitir. */
.task-empty-descanso .es-ico{color:var(--accent)}
.task-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:-24px;z-index:3;background:var(--surface)}
.task-list-progress{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--text3);white-space:nowrap}
.task-list-progress b{font:700 12px Sora,sans-serif;color:var(--text)}
.task-list-bar{display:block;width:64px;height:5px;border-radius:99px;background:var(--surface2);overflow:hidden}
.task-list-bar::after{content:'';display:block;width:var(--pct);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#4f46e5)}
.task-block{border-bottom:0.5px solid var(--border)}
.task-block:last-child{border-bottom:0}
.task-block-head{width:100%;display:flex;align-items:center;gap:9px;padding:9px 16px;border:0;background:var(--surface2);color:var(--text2);font:700 10px/1 Sora,sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;text-align:left}
.task-block-head strong{color:var(--text);font-size:10.5px}
.task-block-head small{flex:1;min-width:0;overflow:hidden;text-transform:none;letter-spacing:0;font-weight:500;font-size:10px;color:var(--text3);text-overflow:ellipsis;white-space:nowrap}
.task-block-count{background:var(--surface);border-radius:99px;padding:2px 7px;font-size:10px;color:var(--text2)}
/* Separador de día dentro de un bloque. No es un desplegable —el bloque entero
   ya se pliega y anidar dos niveles de carpetas es peor que el problema— sino
   una línea que dice de qué día es lo que viene debajo. */
.task-block-day{display:flex;align-items:center;gap:8px;padding:7px 16px;background:var(--surface2);border-top:0.5px solid var(--border);font:700 10.5px/1 Sora,sans-serif;color:var(--text2)}
.task-block-day small{font:600 10.5px/1 Sora,sans-serif;color:var(--text3)}
.task-block-day i{margin-left:auto;font-style:normal;background:var(--surface);border-radius:99px;padding:2px 7px;font-size:10px;color:var(--text2)}
/* Lo cerrado por adelantado. En ámbar y con todas las letras: la etiqueta del
   día («En 3 días») hay que saber leerla como un futuro, y esto no. */
.task-block-day.is-futuro{color:var(--warn)}
.task-block-day.is-futuro b{background:var(--warn-bg);color:var(--warn);border-radius:99px;padding:3px 8px;font:700 10px/1 Sora,sans-serif}
/* ── BUSCADOR DE PERSONA (ceder una tarea) ────────────────────────────────
   La lista se queda A LA VISTA en vez de desplegarse, como el buscador de
   clientes de Visitas: al escribir se ve cuántas quedan, que es la señal de que
   se va por buen camino. Alto máximo de unas seis filas y media, para que se
   note que hay más debajo y no se coma la ventana. */
.task-picker{border:0.5px solid var(--border-md);border-radius:9px;background:var(--surface);overflow:hidden}
.task-picker-buscar{position:relative;border-bottom:0.5px solid var(--border)}
.task-picker-buscar>.ti{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:14px;pointer-events:none}
.task-picker-buscar input{width:100%;border:0;background:transparent;padding:10px 12px 10px 32px;font:400 12.5px/1.3 Sora,sans-serif;color:var(--text)}
.task-picker-buscar input:focus{outline:none}
.task-picker-buscar input::-webkit-search-cancel-button{cursor:pointer}
.task-picker-lista{list-style:none;margin:0;padding:5px;max-height:212px;overflow-y:auto}
.task-picker-op{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;cursor:pointer}
.task-picker-op strong{flex:1;min-width:0;font:600 12.5px/1.3 Sora,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-picker-op .task-person-av{width:26px;height:26px;flex:0 0 auto}
/* El tic solo se ve en la elegida. Ocupa su sitio siempre para que la fila no
   dé un salto al elegirla. */
.task-picker-op>.ti{flex:0 0 auto;color:var(--accent);opacity:0}
.task-picker-op.is-elegida>.ti{opacity:1}
.task-picker-op.is-activa{background:var(--surface2)}
.task-picker-op:hover{background:var(--accent-bg)}
.task-picker-op.is-elegida{background:var(--accent-bg);color:var(--accent-txt)}
.task-picker-op.is-elegida .task-person-av{background:var(--accent);color:#fff}
.task-picker-vacio{padding:12px 10px;font-size:11.5px;color:var(--text3);text-align:center}
.task-block-chev{transition:transform .18s}
.task-block.is-folded .task-block-chev{transform:rotate(-90deg)}
/* Los días de «Esta semana». Misma mecánica que los bloques de la pantalla de
   hoy, pero la cabecera lleva el día en grande: lo que se viene a mirar aquí es
   CUÁNDO, no qué. Al revés que en los bloques —que se pliegan— aquí el estado
   normal es plegado, así que la flecha gira cuando está ABIERTO. */
.task-week-day+.task-week-day{border-top:.5px solid var(--border)}
.task-week-day-head{width:100%;display:flex;align-items:center;gap:10px;padding:10px 16px;border:0;background:none;color:var(--text2);font-family:inherit;text-align:left;cursor:pointer}
.task-week-day-head:hover{background:var(--surface2)}
.task-week-day-when{display:flex;align-items:baseline;gap:7px;min-width:0}
.task-week-day-when strong{font:700 12px/1.3 Sora,sans-serif;color:var(--text)}
.task-week-day-when small{font-size:9.5px;color:var(--text3)}
.task-week-day-what{flex:1;min-width:0;font-size:10px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-week-day .task-block-chev{transform:rotate(-90deg)}
.task-week-day.is-open .task-block-chev{transform:rotate(0)}
.task-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-bottom:0.5px solid var(--border)}
.task-row:last-child{border-bottom:0}
/* Las clases de estado (`task-espera`, `task-ayuda`…) son de la ETIQUETA, y
   llevan fondo y color propios. En la fila entera teñían el fondo y —peor— el
   texto del detalle, que salía en naranja sobre un rectángulo mostaza. La fila
   se queda en su color y del estado solo toma una marca lateral, y solo cuando
   dice algo: pendiente y en curso son lo normal y no necesitan señal. */
.task-list .task-row{background:var(--surface);color:var(--text)}
.task-list .task-row.task-espera{border-left:3px solid var(--st-linea-warn)}
.task-list .task-row.task-ayuda{border-left:3px solid var(--st-linea-dang)}
.task-list .task-row.task-realizada,.task-list .task-row.task-noprocede{opacity:.66}
.task-list .task-row.is-open,.task-list .task-row.is-closing{background:var(--surface2);opacity:1}
/* La densidad, aflojada el 6/09/2026. Era de hoja de cálculo: título a 12,5 px
   y todo lo demás entre 9,5 y 10, en una pantalla que el equipo tiene abierta
   ocho horas. Sube el título a 14, la letra pequeña a 10,5-11 y el alto de fila
   de 11 a 13 px de relleno.
   Lo que NO se ha tocado es que las columnas sean fijas: están así a propósito
   para que quince filas se barran con la vista en vez de leerse una a una (ver
   el comentario de arriba). Lo que sí cambia es el REPARTO. «Frecuencia» tenía
   78 px y «Trimestral» —la más larga de las ocho— mide 59 a 11 px; «Duración»
   tenía 62 y «1 h 30 min» mide 56. Esos 24 px de sobra se los queda el título,
   que es lo único de la fila que hay que leer de verdad y lo único que se
   cortaba con puntos suspensivos. Medido en el navegador, no a ojo. */
.task-row-main{display:grid;grid-template-columns:26px minmax(0,1fr) 84px 68px 66px 96px;align-items:center;gap:10px;width:100%;padding:13px 4px 13px 14px;border:0;background:transparent;color:inherit;font-family:inherit;text-align:left;cursor:pointer}
.task-row-main:hover{background:var(--surface2)}
/* Con los tiempos aparcados (13/08/2026) la columna de duración no se pinta, así
   que la rejilla tiene una columna menos. Sin esto, el estado se iría al hueco
   de la duración y la última columna quedaría vacía: las filas dejarían de
   alinearse justo en lo que se lee de un barrido. */
.task-row.sin-tiempos .task-row-main{grid-template-columns:26px minmax(0,1fr) 84px 68px 96px}
.task-row-check{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);color:var(--text3);font-size:14px}
.task-row.task-realizada .task-row-check{background:var(--st-ok-bg);color:var(--st-ok-tx)}
.task-row-title{min-width:0}
.task-row-title strong{display:block;font:700 14px/1.35 Sora,sans-serif;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-row-title small{display:flex;gap:7px;flex-wrap:wrap;margin-top:3px}
.task-row-late,.task-row-flag{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:var(--text3)}
.task-row-late{color:var(--st-dang-tx);font-weight:700}
.task-row-late.is-declared{color:var(--st-esp-tx)}
/* «Varias personas» / «Por turnos» en la fila del empleado. Va con el color de
   acento y no en gris: las demás señales de esta línea avisan de algo que va mal
   —atrasada, sin validar, cambio pedido— y esta no avisa de nada, informa. Es el
   mismo azul que la lleva en el Panel de control y en el Planificador. */
.task-row-flag.is-varias{color:var(--accent-txt);font-weight:700}
/* LAS TRES ETIQUETAS DE LA FILA, del 7/09/2026. El equipo dijo que en su
   segunda pantalla —más pequeña que la principal— «no se ven las etiquetas», y
   sobre todo la de diaria/semanal. Era verdad por tres motivos a la vez:
   la frecuencia era texto GRIS CLARO de 11 px sobre blanco, el estado una
   pastilla de 9 px —lo más pequeño de toda la pantalla— y la prioridad ni
   siquiera era una pastilla: llevaba el color de fondo pegado al texto, sin
   relleno ni bordes, como un subrayado de rotulador.
   Las tres pasan a ser la misma pastilla de 11 px, y la frecuencia con el azul
   que ya lleva en el Planificador, en el catálogo y en el Panel: la misma cosa
   se pinta igual en todo el portal, y así se reconoce sin leerla. */
.task-row-time{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-row-freq{justify-self:start;font:700 11px/1 Sora,sans-serif;border-radius:99px;padding:5px 8px;background:var(--st-freq-bg);color:var(--st-freq-tx);white-space:nowrap}
.task-row-prio,.task-row-state{justify-self:start;font:700 11px/1 Sora,sans-serif;border-radius:99px;padding:5px 8px;white-space:nowrap}
.task-row-actions{display:flex;align-items:center;gap:6px;padding:0 14px 0 6px}
.task-row-done{white-space:nowrap}
.task-row-more{width:28px;height:28px;border-radius:8px;border:0.5px solid var(--border-md);background:var(--surface);color:var(--text2);cursor:pointer;display:grid;place-items:center}
.task-row-more:hover{border-color:var(--accent);color:var(--accent)}
.task-row-detail,.task-quick-time{grid-column:1/-1}
.task-row-detail{padding:2px 16px 14px 50px;border-top:0.5px dashed var(--border)}
.task-row-menu{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:0.5px solid var(--border)}
/* El cierre en dos clics. Nace en la propia fila y no en un cuadro emergente:
   el número ya viene puesto —lo calcula el servidor con la media de esa
   persona en esa tarea— y lo único que se pide es confirmarlo o corregirlo. */
.task-quick-time{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 14px 12px 50px;border-top:0.5px dashed var(--border)}
.task-quick-time-q{font-size:11px;font-weight:700;color:var(--text2);margin-right:2px}
.task-quick-opt{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border:1px solid var(--border-md);border-radius:99px;background:var(--surface);color:var(--text);font:600 11px Sora,sans-serif;cursor:pointer;transition:border-color .15s,background .15s}
.task-quick-opt:hover{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.task-quick-opt.is-base{border-color:var(--accent);color:var(--accent)}
.task-quick-opt small{font-size:9px;color:var(--text3);font-weight:500}
.task-quick-cancel{margin-left:auto;width:26px;height:26px;border:0;border-radius:7px;background:transparent;color:var(--text3);cursor:pointer}
.task-quick-cancel:hover{background:var(--surface);color:var(--text)}
/* ── Fase 2: la jornada, el cierre del día y los motivos de un toque ────── */
/* La barra mide la carga pendiente contra la jornada REAL de esa fecha, que en
   Pedidos no son ocho horas casi nunca. Con un número fijo, un viernes de cinco
   horas y media y un jueves de diez salían igual de llenos. */














/* Progreso ambiental: al quedar el día resuelto, el punto del menú deja de ser
   un número y pasa a ser una marca. Se ve sin cortar el trabajo. */
.nav-badge.is-resuelto{background:var(--st-ok-bg);color:var(--st-ok-tx)}
/* Los motivos de un toque. Escribir a diario no lo sostiene nadie, y un
   recuadro en blanco con mínimo de tres caracteres acaba recibiendo «xxx». */
.task-motivos-sugeridos,.cierre-motivos{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cierre-motivos{margin:7px 0 0}
.task-motivo{padding:6px 10px;border:1px solid var(--border-md);border-radius:99px;background:var(--surface);color:var(--text2);font:600 10.5px Sora,sans-serif;cursor:pointer}
.task-motivo:hover{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.task-motivo.is-libre{border-style:dashed}
/* La tarjeta de cierre: una sola celebración al día, y al final. El tono se
   ajusta al día que ha sido; no se le echa fiesta a una jornada en la que no se
   pudo trabajar. */
.cierre-head.is-fiesta h3{color:var(--accent)}
.cierre-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.cierre-dato{padding:11px;border-radius:var(--r-sm);background:var(--surface2)}
.cierre-dato span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3)}
.cierre-dato b{display:block;margin-top:4px;font:700 22px/1 Sora,sans-serif;color:var(--text)}
.cierre-dato small{display:block;margin-top:4px;font-size:9.5px;color:var(--text3);line-height:1.35}
.cierre-abiertas h4{margin:0 0 8px;font:700 11px/1 Sora,sans-serif;color:var(--text2)}
.cierre-tarea{padding:10px 11px;border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:7px}
.cierre-tarea.is-silencio{border-color:var(--st-dang-bd)}
.cierre-tarea-cab{display:flex;align-items:center;justify-content:space-between;gap:9px}
.cierre-tarea-cab strong{flex:1;min-width:0;font:700 11.5px/1.35 Sora,sans-serif}
.cierre-tag{flex:0 0 auto;padding:3px 7px;border-radius:99px;background:var(--st-dang-bg);color:var(--st-dang-tx);font:700 8.5px Sora,sans-serif;white-space:nowrap}
.cierre-tag.is-ok{background:var(--st-esp-bg);color:var(--st-esp-tx)}
/* El tipo de tarea al lado de cada pregunta (Merxe, 20/08/2026): contestar «no
   me dio tiempo» no significa lo mismo en una diaria —que vuelve mañana— que en
   una mensual o en una puntual. Misma píldora que la ficha de la tarea. */
.task-tipo{flex:0 0 auto;padding:3px 7px;border-radius:99px;background:var(--st-freq-bg);color:var(--st-freq-tx);font:700 8.5px Sora,sans-serif;white-space:nowrap}
/* Las que pasan del tope no llevan botones: con seis por tarea, diez abiertas
   serían sesenta y nadie contesta a sesenta cosas. Se nombran y se contestan
   desde la lista, que está justo detrás. */
.cierre-resto{margin-top:9px;padding:9px 11px;border-radius:var(--r-sm);background:var(--surface2)}
.cierre-resto-fila{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:4px 0;font-size:11px;color:var(--text2)}
.cierre-resto-fila>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cierre-nota{margin:7px 0 0;font-size:10px;color:var(--text3);line-height:1.4}
/* El aviso de la mañana siguiente: recupera lo que se quedó sin decir ayer.
   Pregunta solo por el día anterior y se puede quitar. */
.task-ayer{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;margin-bottom:12px;border:1px solid var(--st-dang-bd);border-radius:var(--r);background:var(--surface)}
.task-ayer.is-ok{border-color:var(--st-ok-bd)}
.task-ayer>i{flex:0 0 auto;margin-top:1px;color:var(--st-dang-tx);font-size:17px}
.task-ayer.is-ok>i{color:var(--st-ok-tx)}
.task-ayer>div{flex:1;min-width:0;font-size:11.5px;line-height:1.5;color:var(--text2)}
.task-ayer strong{display:block;color:var(--text);font:700 12px/1.4 Sora,sans-serif}
.task-ayer-tarea{margin-top:9px;padding-top:9px;border-top:0.5px solid var(--border)}
.task-ayer-tarea>span:first-child{font-weight:600;color:var(--text)}
.task-ayer-tarea>.task-tipo{display:inline-block;margin-left:6px;vertical-align:1px}
.task-ayer-x{flex:0 0 auto;width:26px;height:26px;border:0;border-radius:7px;background:transparent;color:var(--text3);cursor:pointer}
.task-ayer-x:hover{background:var(--surface2);color:var(--text)}

/* La marca de «ha cerrado su día» en la tarjeta del equipo, y el botón que
   borra del catálogo, que es el único del portal que no se puede deshacer. */
.pc-eq-cerrado{margin-left:5px;color:var(--ok-txt);font-size:12px;vertical-align:-1px}
/* Hueco y apagado: es una ausencia de dato, no una alarma. Quien no ha abierto
   el portal puede estar perfectamente trabajando; el aviso es para mirarlo, no
   para dar por hecho nada. */
.pc-eq-sinsenal{margin-left:5px;color:var(--text3);font-size:12px;vertical-align:-1px}
/* ── MOSAICO DE EQUIPO ──────────────────────────────────────────────────────
   Una ficha por persona, cuatro por fila en escritorio. 300 px es el ancho al
   que el título de una tarea cabe entero; con trece columnas de verdad tocaban
   a 110 px y no se leía ninguno. */
.pc-fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.pc-fi{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.pc-fi.danger{border-left:3px solid var(--st-linea-dang)}
.pc-fi.warning{border-left:3px solid var(--st-linea-warn)}
.pc-fi.success{border-left:3px solid var(--st-linea-ok)}
.pc-fi.off{opacity:.72}
.pc-fi-head{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:0;border-bottom:.5px solid var(--border);background:transparent;color:var(--text);font-family:inherit;text-align:left;cursor:pointer}
.pc-fi-head:hover{background:var(--surface2)}
.pc-fi-quien{min-width:0;flex:1}
.pc-fi-quien strong,.pc-fi-quien small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-fi-quien strong{font:700 11.5px/1.2 Sora,sans-serif}
.pc-fi-quien small{margin-top:2px;color:var(--text3);font-size:9px}
.pc-fi-cuenta{flex:0 0 auto;font:700 12px/1 Sora,sans-serif;color:var(--text2)}
.pc-fi-body{flex:1;padding:8px 10px}
/* El encabezado de cada grupo de frecuencia dentro de la ficha (Merxe,
   19/08/2026). Va MUY fino a propósito: la ficha mide unos 300 px y lo que
   tiene que leerse son los títulos de las tareas, no las etiquetas. Mayúsculas
   pequeñas y color apagado para que se lea como una separación, no como una
   fila más. El primero no lleva margen arriba, que si no la lista arranca
   despegada del borde. */
.pc-fi-frec{display:flex;align-items:baseline;gap:5px;margin:9px 0 4px;
  color:var(--text2);font:700 8.5px/1 Sora,sans-serif;text-transform:uppercase;letter-spacing:.07em}
.pc-fi-frec:first-child{margin-top:0}
.pc-fi-frec span{font-weight:400;letter-spacing:0;opacity:.75}
.pc-fi-tareas{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
.pc-fi-tareas li{display:flex;align-items:center;gap:6px;min-width:0;font-size:11px;color:var(--text)}
/* El punto lleva el color del estado: es la misma señal que daban las barras,
   sin fingir que además mide cuánto dura la tarea. */
.pc-fi-tareas i{flex:0 0 auto;width:7px;height:7px;border-radius:50%}
.pc-fi-tareas span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}
.pc-fi-tareas b{flex:0 0 auto;color:var(--text3);font:700 9px Sora,sans-serif}
.pc-fi-tareas .is-hecha span{color:var(--text3);text-decoration:line-through}
.pc-fi-off,.pc-fi-vacio{display:flex;align-items:center;gap:5px;margin:0;font-size:11px}
.pc-fi-vacio{color:var(--text3)}
.pc-fi-pie{display:flex;align-items:center;gap:3px;padding:7px 10px;border-top:.5px solid var(--border);background:var(--surface2)}
.pc-fi-pie-tit{margin-right:auto;color:var(--text3);font:700 8.5px/1 Sora,sans-serif;text-transform:uppercase;letter-spacing:.05em}
.pc-fi-dia{display:flex;flex-direction:column;align-items:center;gap:1px;width:23px;padding:3px 0;border:1px solid var(--border-md);border-radius:5px;background:var(--surface);cursor:pointer}
.pc-fi-dia b{font:700 8px/1 Sora,sans-serif;opacity:.75}
.pc-fi-dia small{font:700 10px/1 Sora,sans-serif}
.pc-fi-dia.is-libre{color:var(--text3);background:var(--surface2)}
.pc-fi-dia:hover{outline:1px solid var(--accent)}
@media (max-width:800px){.pc-fichas{grid-template-columns:1fr}}
.btn-danger{border:1px solid var(--danger);background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(1.08)}
.task-borrar:hover{border-color:var(--danger);color:var(--danger)}

/* Fase 3: la racha, los hitos y el «bien hecho». */






.cierre-hito{display:flex;align-items:center;gap:11px;margin:12px 0;padding:13px;border-radius:var(--r-sm);background:var(--accent-bg);border:1px solid var(--accent)}
.cierre-hito i{font-size:24px;color:var(--accent);flex:0 0 auto}
.cierre-hito strong{display:block;font:700 13px/1.35 Sora,sans-serif;color:var(--text)}
.cierre-hito span{display:block;margin-top:3px;font-size:11px;color:var(--text2)}
.undo-guino{display:block;font-style:normal;font-size:10.5px;line-height:1.3;opacity:.82}
.undo-carmen{display:inline-flex;align-items:center;gap:5px;margin-left:3px}
.undo-carmen img{width:25px;height:25px;flex:0 0 25px;border:1px solid rgba(255,255,255,.65);border-radius:50%;object-fit:cover}
/* El «bien hecho» no se descarta solo: es lo único de todo esto que ha escrito
   una persona, y merece quedarse hasta que se lea. */
.task-bien-aviso{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;margin-bottom:12px;border:1px solid var(--accent);border-radius:var(--r);background:var(--accent-bg)}
.task-bien-aviso i{flex:0 0 auto;margin-top:1px;color:var(--accent);font-size:18px}
.task-bien-aviso strong{display:block;font:700 12.5px/1.4 Sora,sans-serif;color:var(--text)}
.task-bien-aviso span{display:block;margin-top:3px;font-size:11px;color:var(--text2)}
.task-bien-aviso em{display:block;margin-top:5px;font-size:11.5px;color:var(--accent-txt)}
.task-bien:hover{border-color:var(--accent);color:var(--accent)}

/* Mismo arreglo que en la fila del empleado, ahora en la tarjeta del
   Planificador: las clases de estado (`task-espera`, `task-ayuda`…) son de la
   ETIQUETA y llevan fondo y color propios. Puestas en el <article> teñían la
   tarjeta entera y el texto de dentro, que salía naranja sobre mostaza. La
   tarjeta se queda en su color y del estado toma solo una marca lateral, y solo
   cuando dice algo: pendiente y en curso son lo normal. Se usa `article.` para
   ganar en especificidad a las clases de la etiqueta, que van más abajo. */
article.task-item{background:var(--surface);color:var(--text)}
article.task-item.task-espera{border-left:3px solid var(--st-linea-warn)}
article.task-item.task-ayuda{border-left:3px solid var(--st-linea-dang)}
article.task-item.task-realizada,article.task-item.task-noprocede{opacity:.7}
/* El bloc de la tarea. Es el único hueco del portal donde se escribe sin ser
   para justificarse, y el pie dice quién lo lee: creerlo privado y descubrir
   que no lo era se lleva por delante la confianza, y esa no vuelve. */
.task-notas{margin-top:10px;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface2)}
.task-notas-cab{display:block;margin-bottom:5px;color:var(--text2);font:700 9px Sora,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.task-notas-cab i{color:var(--accent);margin-right:3px}
.task-notas textarea{width:100%;min-height:44px;padding:7px 8px;border:1px solid var(--border-md);border-radius:7px;background:var(--surface);color:var(--text);font:inherit;font-size:11.5px;line-height:1.45;resize:vertical}
.task-notas textarea:focus{outline:none;border-color:var(--accent)}
.task-notas-pie{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:6px}
.task-notas-pie small{color:var(--text3);font-size:9.5px}
.task-notas.is-lectura p{margin:0;font-size:11.5px;line-height:1.5;color:var(--text2);white-space:pre-wrap}
.task-ayuda-vista{align-items:center;background:var(--st-dang-bg);color:var(--st-dang-tx)}
.task-ayuda-vista .btn{margin-left:auto}

/* La barra de deshacer. Cinco segundos, y se va sola sin pedir nada. */
/* ── LA CHAPA DEL PRIMERO DEL DÍA ─────────────────────────────────────────
   Aparece arriba y centrada, por encima de todo, y se va sola a los 7 segundos.
   NO es una ventana emergente: cerrar una tarea es el gesto que más se repite
   en el portal y ponerle delante algo que hay que quitar convertiría el premio
   en un peaje. Por eso tampoco atrapa el ratón salvo para quitarla.
   Va por encima de la barra de deshacer (1300), que sale justo a la vez al
   cerrar una tarea, y por debajo del arranque del portal (2000). */
.chapa-dia{position:fixed;left:50%;top:16%;z-index:1350;width:min(330px,calc(100vw - 32px));
  display:grid;justify-items:center;gap:5px;text-align:center;padding:20px 22px 18px;
  border-radius:18px;background:var(--surface);box-shadow:var(--shadow-lg);
  border:1px solid var(--accent);cursor:pointer;
  opacity:0;pointer-events:none;transform:translate(-50%,-14px) scale(.94);
  transition:opacity .22s,transform .28s cubic-bezier(.2,1.3,.4,1)}
.chapa-dia.is-dentro{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1)}
.chapa-dia-icono{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:#fff;font-size:23px;margin-bottom:3px}
.chapa-dia strong{font:700 13.5px/1.3 Sora,sans-serif;color:var(--accent-txt)}
.chapa-dia span{font-size:12px;line-height:1.45;color:var(--text2)}
/* «Solo lo ves tú» no es un detalle: sin esa línea la primera reacción es
   «¿me están comparando con los demás?», y esto no es un marcador. */
.chapa-dia small{margin-top:3px;font-size:9.5px;color:var(--text3)}
@media (prefers-reduced-motion:reduce){.chapa-dia{transition:opacity .2s}}
.undo-bar{position:fixed;left:50%;bottom:22px;z-index:1300;display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:12px;background:var(--text);color:var(--surface);box-shadow:var(--shadow-lg);font-size:12px;opacity:0;pointer-events:none;transform:translate(-50%,14px);transition:opacity .2s,transform .2s}
.undo-bar.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.undo-txt{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.undo-btn{border:0;background:transparent;color:inherit;opacity:.75;font:700 11px Sora,sans-serif;cursor:pointer;padding:5px 8px;border-radius:7px}
.undo-btn:hover{opacity:1;background:rgba(255,255,255,.14)}
.undo-btn.is-strong{opacity:1;background:rgba(255,255,255,.16)}
@media (prefers-reduced-motion:reduce){.undo-bar,.task-summary-grid .task-kpi,.task-block-chev{transition:none}}
@media (max-width:1100px){
  /* Aquí se iba TAMBIÉN la frecuencia, por «dato de apoyo». Y resulta que era
     justo lo que el equipo echaba de menos (7/09/2026): en la segunda pantalla,
     que es la estrecha, la etiqueta de diaria/semanal no es que se viera poco,
     es que no estaba. Se queda; se va solo el tiempo, que hoy ni se dibuja
     —los tiempos están aparcados— y era el otro dato de apoyo de verdad. */
  .task-row-main,.task-row.sin-tiempos .task-row-main{grid-template-columns:26px minmax(0,1fr) auto auto auto;gap:8px;padding:11px 4px 11px 12px}
  .task-row-time{display:none}
  .task-row-detail,.task-quick-time{padding-left:14px}
  .task-list-head{position:static}
}
@media (max-width:800px){
  /* Sin sitio para las tres, la que se va es la PRIORIDAD: ya se lee en el
     orden de la lista, que empieza por lo urgente. Se quedan la frecuencia
     —que es lo que pidió el equipo— y el estado. */
  .task-row-main,.task-row.sin-tiempos .task-row-main{grid-template-columns:24px minmax(0,1fr) auto auto}
  .task-row-prio{display:none}
  .task-row-actions{padding-right:12px}
}

/* ── Módulo de tareas ─────────────────────────────────────────────────── */
/* ── CABECERAS DE APARTADO ────────────────────────────────────────────────
   «Tareas», «Visitas», «Información», «Vacaciones», «Administración» se
   distinguían de sus opciones solo por ser MÁS PEQUEÑAS (10 px) y del mismo
   gris que ellas: el rótulo del bloque pesaba menos que su contenido, y al
   mirar la barra de un vistazo no se veía dónde empezaba y acababa cada
   apartado. Ahora cada cabecera es una banda con fondo propio, texto a color
   pleno, más cuerpo y el icono en el morado de la marca; las opciones quedan
   sangradas debajo (banda a 18 px del borde, opciones a 24 px). Pedido por
   Salva el 1/09/2026, para las vistas de empleado, comercial y responsable.
   El fondo es `--surface2`, el mismo de la ficha del usuario de arriba: no
   añade un color nuevo a la barra, solo lo usa para separar. */
.nav-group{margin:10px 0 2px}
.nav-group-toggle{width:calc(100% - 12px);margin:0 6px;border:0;border-radius:var(--r-sm);background:var(--surface2);color:var(--text);padding:8px 10px 8px 12px;display:flex;justify-content:space-between;align-items:center;font:800 11px/1.2 Sora,sans-serif;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:background .12s}
.nav-group-toggle:hover{background:var(--border-md)}
.nav-group-toggle span{display:flex;align-items:center;gap:8px}
.nav-group-toggle span i{font-size:16px;color:var(--accent)}
.nav-group-toggle>i{font-size:14px;color:var(--text3);transition:transform .18s}
.nav-group-items{padding-top:2px}.nav-group.is-collapsed .nav-group-toggle>i{transform:rotate(-90deg)}.nav-group.is-collapsed .nav-group-items{display:none}.nav-group-items .nav-item{width:100%;border:0;background:transparent;text-align:left;font-family:inherit;cursor:pointer}.nav-group-items .nav-item.active{color:var(--accent);background:var(--accent-bg)}
.task-page-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.task-page-hdr .btn{padding:7px 13px;font-size:11px}.task-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.task-kpi{display:flex;align-items:center;gap:9px;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r);padding:11px 12px;box-shadow:var(--shadow-sm)}.task-kpi-icon{width:30px;height:30px;border-radius:9px;background:var(--accent-bg);color:var(--accent);display:grid;place-items:center;font-size:16px}.task-kpi strong,.task-kpi span{display:block}.task-kpi strong{font:700 18px/1 Sora,sans-serif;color:var(--text)}.task-kpi span{font-size:9.5px;color:var(--text3);margin-top:3px}.task-kpi.success .task-kpi-icon{background:var(--st-ok-bg);color:var(--st-ok-tx)}.task-kpi.danger .task-kpi-icon{background:var(--st-dang-bg);color:var(--st-dang-tx)}
.task-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px}.task-manager-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr);gap:14px}.task-side-card{height:max-content}.task-list{padding:0!important}.task-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:0.5px solid var(--border)}.task-item:last-child{border-bottom:0}.task-check{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);color:var(--text3);flex:0 0 auto;margin-top:2px}.task-check.done{background:var(--st-ok-bg);color:var(--st-ok-tx)}.task-main{min-width:0;flex:1}.task-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.task-title-row h3,.task-template h3{font:700 13px/1.35 Sora,sans-serif;margin:0;color:var(--text)}.task-main p,.task-template p{font-size:11px;line-height:1.5;color:var(--text2);margin:4px 0 7px}.task-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:10px;color:var(--text3)}.task-meta i{margin-right:3px}.task-actions{min-width:116px;display:flex;align-items:flex-end;gap:6px;flex-direction:column}.task-status,.task-priority{font-size:9px;font-weight:700;border-radius:99px;padding:4px 7px;white-space:nowrap}.task-pendiente{background:var(--st-pend-bg);color:var(--st-pend-tx)}.task-curso{background:var(--st-curso-bg);color:var(--st-curso-tx)}.task-realizada{background:var(--st-ok-bg);color:var(--st-ok-tx)}.task-bloqueada{background:var(--st-dang-bg);color:var(--st-dang-tx)}.task-noprocede{background:var(--surface2);color:var(--text3)}.priority-alta{background:var(--st-dang-bg);color:var(--st-dang-tx)}.priority-normal{background:var(--accent-bg);color:var(--accent)}.priority-baja{background:var(--surface2);color:var(--text3)}.task-state-select{font:600 10px/1.2 Sora,sans-serif;padding:5px 7px;border:0.5px solid var(--border-md);border-radius:7px;background:var(--surface);color:var(--text);max-width:135px}.task-person{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:0.5px solid var(--border)}.task-person:last-child{border-bottom:0}.task-person-av{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);font-size:9px;font-weight:700}.task-person>div:nth-child(2){flex:1;min-width:0}.task-person strong,.task-person span{display:block}.task-person strong{font-size:11px}.task-person span{font-size:9px;color:var(--text3);margin-top:2px}.task-person>b{font:700 12px Sora,sans-serif;color:var(--accent)}.task-template{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border-bottom:0.5px solid var(--border)}.task-template:last-child{border-bottom:0}.task-template>div:nth-child(2){flex:1}.task-template-icon{width:31px;height:31px;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);border-radius:8px}.task-template span{font-size:10px;color:var(--text3)}.task-template>.task-status{color:inherit;height:max-content}.task-empty{padding:32px 16px}.task-empty .btn{margin-top:14px}.access-temporal{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.access-temporal>div{background:var(--surface2);border-radius:8px;padding:10px}.access-temporal span,.access-temporal strong{display:block}.access-temporal span{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}.access-temporal strong{font:700 13px/1.4 Sora,sans-serif;margin-top:4px;word-break:break-word}.access-temporal-password{color:var(--accent)}.form-group small,.form-hint{font-size:10px;line-height:1.4;color:var(--text3);margin:5px 0 0}
.task-espera{background:var(--st-esp-bg);color:var(--st-esp-tx)}.task-ayuda{background:var(--st-dang-bg);color:var(--st-dang-tx)}.task-meta .task-moved{color:var(--accent);font-weight:400}
.task-meta-dia{font-weight:700;color:var(--text)}
.task-meta-dia i{color:var(--text3)}
.task-frequency{display:inline-block;font-size:9px;font-weight:700;border-radius:99px;padding:4px 7px;white-space:nowrap;background:var(--st-freq-bg);color:var(--st-freq-tx)}.task-frequency i{margin-right:2px}.task-varias{display:inline-block;font-size:9px;font-weight:700;border-radius:99px;padding:4px 7px;white-space:nowrap;background:var(--accent-bg);color:var(--accent-txt)}.task-varias i{margin-right:2px}.task-week-section+.task-week-section{border-top:8px solid var(--surface2)}.task-week-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 16px 10px}.task-week-section-head span{font:700 11px Sora,sans-serif;color:var(--text)}.task-week-section-head span i{color:var(--accent);margin-right:5px}.task-week-section-head small{font-size:10px;color:var(--text3);text-align:right}.task-routine-list{padding:0 16px 12px}.task-routine{display:flex;align-items:flex-start;gap:9px;padding:10px 0;border-top:.5px solid var(--border)}.task-routine-icon{width:27px;height:27px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:var(--accent-bg);color:var(--accent)}.task-routine-icon.done{background:var(--st-ok-bg);color:var(--st-ok-tx)}.task-routine>div:not(.task-routine-icon){min-width:0;flex:1}.task-routine strong,.task-routine span,.task-routine small{display:block}.task-routine strong{font:600 11px/1.4 Sora,sans-serif}.task-routine span{font-size:10px;color:var(--text2);margin-top:1px}.task-routine small{font-size:9px;color:var(--text3);line-height:1.4;margin-top:3px}.task-routine>.task-frequency{display:inline-block;color:var(--st-freq-tx);margin-top:1px}
@media (max-width:800px){.nav-group-toggle{padding:10px 10px 10px 12px}.task-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.task-kpi{padding:11px}.task-kpi strong{font-size:18px}.task-layout,.task-manager-grid{grid-template-columns:1fr}.task-page-hdr{align-items:center}.task-page-hdr .btn{white-space:nowrap;padding:8px 10px;font-size:11px}.task-item{padding:13px;gap:9px}.task-actions{min-width:94px}.task-state-select{max-width:105px;font-size:9px}.task-title-row h3{font-size:12px}.task-meta{gap:6px}.access-temporal{grid-template-columns:1fr}}
.task-checklist{margin-top:10px;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface2)}.task-checklist-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;color:var(--text2);font-size:9px;font-weight:700}.task-checklist-head i{color:var(--accent);margin-right:3px}.task-checklist-head b{color:var(--accent);font:700 10px Sora,sans-serif}.task-checklist-step{display:flex;align-items:flex-start;gap:7px;padding:4px 0;color:var(--text2);font-size:10px;line-height:1.35;cursor:pointer}.task-checklist-step input{width:14px;height:14px;flex:0 0 auto;margin:0;accent-color:var(--accent)}.task-checklist-step.is-done span{text-decoration:line-through;color:var(--text3)}.task-wait-reason{display:flex;gap:6px;margin-top:9px;padding:7px 8px;border-radius:7px;background:var(--st-esp-bg);color:var(--st-esp-tx);font-size:10px;line-height:1.4}.task-wait-reason i{flex:0 0 auto;margin-top:1px}.task-wait-history{margin-top:8px;color:var(--text3);font-size:9px}.task-wait-history summary{cursor:pointer;list-style:none}.task-wait-history summary::-webkit-details-marker{display:none}.task-wait-history summary i{color:var(--st-esp-tx);margin-right:3px}.task-wait-history>div{margin-top:6px;padding:7px 8px;border-left:2px solid var(--st-esp-bd);background:var(--surface2)}.task-wait-history p{margin:0 0 5px;line-height:1.4}.task-wait-history p:last-child{margin-bottom:0}.task-wait-history strong{display:block;color:var(--text2);font-size:8px}.template-steps-editor{display:grid;gap:6px;margin:3px 0 8px}.template-step-editor{display:flex;align-items:center;gap:6px}.template-step-editor>span,.template-rotation-order{width:19px;height:19px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:var(--accent-bg);color:var(--accent);font:700 9px Sora,sans-serif}.template-step-editor input{min-width:0;flex:1}.template-rotation-editor{margin:3px 0 8px}.template-rotation-add{display:flex;gap:7px}.template-rotation-add select{min-width:0;flex:1}.template-rotation-list{display:grid;gap:5px;margin:8px 0 0;padding:0;list-style:none}.template-rotation-list li{display:flex;align-items:center;gap:7px;padding:7px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface2)}.template-rotation-list li>strong{min-width:0;flex:1;overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.template-rotation-actions{display:flex;gap:3px}.template-rotation-actions .btn{padding:4px 6px}@media (max-width:800px){}@media (max-width:560px){.task-checklist{padding:8px}.template-step-editor{gap:5px}.template-rotation-actions .btn{padding:4px 5px}}
.task-template-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.task-review-flag{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border-radius:99px;background:var(--st-pend-bg);color:var(--st-pend-tx);font-size:9px!important;font-weight:700}.task-review-option{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid var(--st-pend-bd);border-radius:9px;background:var(--st-pend-bg);cursor:pointer}.task-review-option input{width:16px;height:16px;margin:1px 0 0;accent-color:var(--st-pend-tx)}.task-review-option strong,.task-review-option small{display:block}.task-review-option strong{font-size:11px;color:var(--st-pend-tx)}.task-review-option small{margin-top:3px;color:var(--st-pend-tx)}.task-template-tools #tpl-filtro-revision span{margin-left:3px;font-weight:700}
.task-person-group-head:disabled{cursor:default}.task-person-group-head:disabled:hover{background:transparent}
.task-detail-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:12px}.task-detail-summary>div{padding:12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow-sm)}.task-detail-summary strong,.task-detail-summary span{display:block}.task-detail-summary strong{font:700 20px/1 Sora,sans-serif;color:var(--text)}.task-detail-summary span{margin-top:4px;color:var(--text3);font-size:9px}.task-detail-summary .danger{border-color:var(--st-dang-bd);background:var(--st-dang-bg)}.task-detail-summary .danger strong{color:var(--st-dang-tx)}.task-detail-summary .warning{border-color:var(--st-esp-bd);background:var(--st-esp-bg)}.task-detail-summary .warning strong{color:var(--st-esp-tx)}.task-detail-toolbar,.task-planner-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 12px}.task-planner-toolbar{flex-direction:column;align-items:stretch;gap:8px}.task-planner-toolbar .task-detail-toolbar{margin:0}
/* La barra de acciones en bloque solo existe cuando hay algo elegido, y se
   distingue del resto: lo que hay dentro es irreversible. */
.task-planner-acciones{padding:8px 10px;border:1px solid var(--accent);border-radius:var(--r-sm);background:var(--accent-bg)}
.task-planner-acciones strong{margin-right:2px;color:var(--accent-txt);font:700 10px/1 Sora,sans-serif}.task-detail-filter{border:1px solid var(--border-md);border-radius:99px;padding:7px 10px;background:var(--surface);color:var(--text2);font:600 10px/1 Sora,sans-serif;cursor:pointer}.task-detail-filter:hover,.task-detail-filter.is-active{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}.task-planner-field{display:flex;align-items:center;gap:7px;color:var(--text3);font-size:10px}.task-planner-field select{max-width:175px;padding:7px 26px 7px 8px;font-size:10px}.task-person-groups,.task-day-groups{display:grid;gap:9px}.task-person-group,.task-day-group{overflow:hidden;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm)}.task-person-group-head,.task-day-group-head{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border:0;background:transparent;color:var(--text);font-family:inherit;text-align:left;cursor:pointer}.task-person-group-head:hover,.task-day-group-head:hover{background:var(--surface2)}.task-person-group-head>.ti,.task-day-group-head>.ti{color:var(--text3);transition:transform .18s}.task-person-group.is-open .task-person-group-head>.ti,.task-day-group.is-open .task-day-group-head>.ti{transform:rotate(180deg)}.task-person-group-main,.task-day-group-main{min-width:0;flex:1}.task-person-group-main strong,.task-person-group-main small,.task-day-group-main strong,.task-day-group-main small,.task-day-group-date strong,.task-day-group-date small,.task-person-group-count strong,.task-person-group-count small{display:block}.task-person-group-main strong,.task-day-group-main strong{overflow:hidden;font:700 12px/1.25 Sora,sans-serif;text-overflow:ellipsis;white-space:nowrap}.task-person-group-main small,.task-day-group-main small{overflow:hidden;margin-top:3px;color:var(--text3);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.task-person-group-count{text-align:right}.task-person-group-count strong{font:700 14px/1 Sora,sans-serif}.task-person-group-count small{margin-top:3px;color:var(--text3);font-size:8px}.task-person-group.danger{border-left:3px solid var(--st-linea-dang)}.task-person-group.warning{border-left:3px solid var(--st-linea-warn)}.task-person-group.success{border-left:3px solid var(--st-linea-ok)}.task-person-group-tasks,.task-day-group-tasks{border-top:.5px solid var(--border)}.task-day-group-date{width:78px;flex:0 0 auto}.task-day-group-date strong{font:700 10px/1.2 Sora,sans-serif;color:var(--accent)}.task-day-group-date small{margin-top:3px;color:var(--text3);font-size:8px}.task-day-group-hito{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:99px;background:var(--st-pend-bg);color:var(--st-pend-tx);font:700 8px/1 Sora,sans-serif}.task-day-group.danger{border-left:3px solid var(--st-linea-dang)}.task-day-group.warning{border-left:3px solid var(--st-linea-warn)}.task-day-group.success{border-left:3px solid var(--st-linea-ok)}@media (max-width:800px){.task-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.task-planner-toolbar{align-items:flex-start;flex-direction:column}.task-planner-field{width:100%;justify-content:space-between}.task-planner-field select{max-width:70%;flex:1}.task-person-group-head,.task-day-group-head{padding:11px}.task-day-group-date{width:64px}.task-day-group-hito{display:none}}@media (max-width:390px){.task-person-group-count{display:none}}
@media (min-width:801px){.task-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1250px){.task-summary-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:560px){}
.task-planner-person-head{display:flex;align-items:center;gap:8px;width:100%;padding:10px 13px;border:0;background:var(--surface2);color:var(--text);font-family:inherit;text-align:left;cursor:pointer}.task-planner-person-head>span:nth-child(2){flex:1;min-width:0}.task-planner-person-head strong,.task-planner-person-head small{display:block}.task-planner-person-head strong{font:700 11px/1.2 Sora,sans-serif}.task-planner-person-head small{margin-top:3px;font-size:9px;color:var(--text3)}.task-planner-person-head>.ti{color:var(--text3);transition:transform .18s}.task-planner-person.is-open .task-planner-person-head>.ti{transform:rotate(180deg)}.task-planner-person-tasks{border-top:.5px solid var(--border)}
/* El bloque de cada trabajador es un apilado normal: cabecera arriba y tareas
   debajo. Se llamaba igual que los desplegables de filtro de la barra superior
   —`task-planner-person`—, así que heredaba su `display:flex` y salía el nombre
   en una columna y sus tareas en otra. Los filtros son ahora
   `task-planner-field`; esta línea solo separa a un trabajador del siguiente. */
.task-planner-person+.task-planner-person{border-top:.5px solid var(--border)}
/* La casilla de selección y la tarjeta van en la MISMA línea. Sin esta regla el
   `<div>` que las envuelve era un bloque normal: la casilla caía suelta encima
   de la tarjeta, a todo lo ancho, y no se veía de cuál era. */
.task-planner-row{display:flex;align-items:flex-start;gap:9px;padding:8px 12px 0}
.task-planner-row>input[type=checkbox]{flex:0 0 auto;width:15px;height:15px;margin-top:15px;accent-color:var(--accent);cursor:pointer}
.task-planner-row>input[type=checkbox]:disabled{opacity:.35;cursor:default}
.task-planner-row>.task-item{flex:1;min-width:0}
.task-command-console-title,.task-command-console-title{display:flex;align-items:center;gap:11px;min-width:0}.task-command-console-title strong{font:700 12px/1.3 Sora,sans-serif;color:var(--text)}@keyframes task-command-pulse{50%{opacity:.35;transform:scale(.82)}}.task-command-filter{display:flex;align-items:center;gap:9px;min-width:0;padding:11px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);font-family:inherit;text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}.task-command-filter:hover{transform:translateY(-1px);border-color:var(--accent)}.task-command-filter.is-active{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 2px rgba(109,40,217,.14)}.task-command-filter-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:var(--surface2);color:var(--accent);font-size:16px}.task-command-filter>span:last-child{min-width:0}.task-command-filter strong,.task-command-filter small{display:block}.task-command-filter strong{font:700 19px/1 Sora,sans-serif}.task-command-filter small{overflow:hidden;margin-top:4px;color:var(--text3);font-size:9px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.task-command-filter.danger{border-color:var(--st-dang-bd)}.task-command-filter.danger .task-command-filter-icon{background:var(--st-dang-bg);color:var(--st-dang-tx)}.task-command-filter.warning .task-command-filter-icon{background:var(--st-esp-bg);color:var(--st-esp-tx)}.task-radar-person-main{min-width:0;flex:1}.task-radar-person-main strong,.task-radar-person-main small{display:block}.task-radar-person-main strong{overflow:hidden;font:700 11px/1.3 Sora,sans-serif;text-overflow:ellipsis;white-space:nowrap}.task-radar-person-main small{margin-top:2px;color:var(--text3);font-size:9px}.task-milestone-list{padding:0!important}.task-month-progress-top{display:flex;align-items:baseline;gap:7px}.task-month-progress-top strong{font:700 30px/1 Sora,sans-serif;color:var(--accent)}.task-month-progress-top span{font-size:10px;color:var(--text3)}.task-month-progress-track{height:8px;overflow:hidden;margin:11px 0 9px;border-radius:99px;background:var(--surface2)}.task-month-progress-track span{display:block;width:var(--pct);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#4f46e5)}@media (max-width:1050px){}@media (max-width:560px){.task-command-filter{gap:7px;padding:9px}.task-command-filter strong{font-size:17px}.task-command-filter-icon{width:27px;height:27px;font-size:14px}.task-month-progress-top strong{font-size:27px}}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL DE CONTROL (2/08/2026)
   Rejilla estricta de 12 columnas en bandas de altura fija: cada banda suma
   exactamente 12 y todas sus tarjetas miden lo mismo, así no quedan huecos.
   Escrito de ESCRITORIO hacia abajo (regla 6 de AGENTS.md).
   ═══════════════════════════════════════════════════════════════════════════ */
.console{font-variant-numeric:tabular-nums}
[data-theme="dark"] .console{background-image:linear-gradient(rgba(120,200,230,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,200,230,.045) 1px,transparent 1px);background-size:40px 40px}
.pc-band{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-bottom:12px}
.pc-band>*{min-width:0;min-height:0}
/* Cabecera del Panel rediseñada: deja claro el estado y las dos salidas útiles
   antes de que empiece la cuadrícula de detalle. */
.pc-command-deck{display:grid;grid-template-columns:minmax(260px,1.5fr) minmax(230px,.9fr) auto;align-items:stretch;gap:0;margin:0 0 12px;overflow:hidden;border:1px solid var(--border-md);border-radius:var(--r);background:linear-gradient(120deg,var(--surface) 0%,var(--surface) 54%,var(--accent-bg) 150%);box-shadow:var(--shadow-sm)}
.pc-command-main{padding:17px 19px;min-width:0}
.pc-command-eyebrow{display:block;margin-bottom:7px;color:var(--accent);font:700 8px/1 'Sora',sans-serif;letter-spacing:.15em;text-transform:uppercase}
.pc-command-title{display:block;font:700 17px/1.2 'Sora',sans-serif;letter-spacing:-.03em}
.pc-command-title.alerta{color:var(--danger)}.pc-command-title.ok{color:var(--ok-txt)}
.pc-command-main p{margin:6px 0 0;color:var(--text2);font-size:10.5px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-command-metrics{display:flex;align-items:stretch;border-left:1px solid var(--border);min-width:0}
.pc-command-metrics span{display:flex;flex:1 1 0;flex-direction:column;justify-content:center;gap:4px;padding:13px 14px;border-right:1px solid var(--border);min-width:0}
.pc-command-metrics span:last-child{border-right:0}.pc-command-metrics b{font:700 21px/1 'Sora',sans-serif;color:var(--text)}.pc-command-metrics small{font:700 7.5px/1 'Sora',sans-serif;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.pc-command-actions{display:flex;align-items:center;gap:7px;padding:12px 14px;border-left:1px solid var(--border);white-space:nowrap}
.pc-command-actions .btn{font-size:10px}
.pc-s3{grid-column:span 3}.pc-s4{grid-column:span 4}.pc-s5{grid-column:span 5}
.pc-s6{grid-column:span 6}.pc-s7{grid-column:span 7}.pc-s8{grid-column:span 8}.pc-s9{grid-column:span 9}.pc-s12{grid-column:span 12}
/* Alto de cada banda. Las que contienen tarjetas `pc-crece` —la línea de tiempo
   (D) y Radar + Carga de la semana (E)— van a `auto`: listan una fila por
   trabajador y con 13 personas cualquier número fijo esconde a la mitad.
   OJO: este es el tope que de verdad recortaba. Los de las media queries de más
   abajo solo actúan en ventanas estrechas; este actúa SIEMPRE, y por eso quitar
   aquellos no cambió nada. */
/* La banda B crece con su contenido: la Misión lleva ahora el objetivo y, si
   la hay, la línea de «no proceden», que antes no estaban ahí. */
/* La banda C va al DOBLE (13/08/2026, a petición de Salva): «Quién va a faltar»
   y «Qué decidir» son las dos tarjetas donde se maneja el día, y a 252 px
   enseñaban dos o tres líneas y a rascar. Con una persona fuera y sus rutinas
   desplegadas, la lista se pasaba la jornada dentro de un visor de tres líneas.
   Es un número fijo a propósito, como el resto de la banda: las dos tarjetas
   tienen que medir lo mismo o la rejilla se descuadra. */
.pc-b{height:auto}.pc-c{height:504px}.pc-d{height:auto}.pc-e{height:auto}.pc-f{height:344px}
/* Radar y línea de tiempo forman una sola lectura operativa: a la izquierda se
   ve quién va cargado; a la derecha, qué está ocurriendo durante la jornada.
   Ambas listas pueden crecer con la plantilla, por eso la tarjeta exterior es
   `pc-crece` y ninguna de las dos queda recortada. */
.pc-equipo-operacion{padding:0;overflow:visible}
.pc-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
.pc-card-head{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:9px 13px;border-bottom:1px solid var(--border);background:var(--surface2)}
.pc-card-head h2{font:700 9.5px/1 'Sora',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--text2);margin:0}
.pc-card-head .pc-sub{margin-left:auto;font-size:9px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}
.pc-card-body{flex:1 1 auto;min-height:0;padding:11px 13px;overflow:auto}
.pc-card-body.pc-flush{padding:0}
.pc-card.pc-alarm{border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.pc-card.pc-alarm::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--danger);z-index:2}
.pc-card.pc-alarm .pc-card-head h2{color:var(--danger)}
[data-theme="dark"] .console .pc-card::after{content:"";position:absolute;bottom:4px;right:4px;width:9px;height:9px;border-bottom:1.5px solid var(--accent2);border-right:1.5px solid var(--accent2);opacity:.55;pointer-events:none}
/* Banda A */
.pc-status{position:relative;display:flex;align-items:stretch;height:58px;overflow:hidden;border:1px solid var(--border-md);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm)}
.pc-status::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;background:linear-gradient(115deg,transparent 45%,var(--accent-bg))}
/* «Desde que lo miraste»: informativo, no alarma. Va debajo del titular y solo
   aparece cuando de verdad ha cambiado algo. */
.pc-cambios{display:flex;align-items:center;gap:8px;margin:-4px 0 10px;padding:8px 14px;background:var(--info-bg);border-radius:var(--r-sm);font-size:11px;color:var(--info)}
.pc-cambios[hidden]{display:none}
.pc-cambios>i{font-size:14px;flex-shrink:0}
.pc-cambios>span{flex:1;min-width:0}
.pc-cambios-x{flex:0 0 auto;padding:3px 9px;border:0.5px solid currentColor;border-radius:999px;background:none;color:inherit;font:600 10px inherit;cursor:pointer;opacity:.8}
.pc-cambios-x:hover{opacity:1}
/* El destello de una cifra que se acaba de mover. Corto y sin desplazar nada:
   si empujara el contenido, media pantalla saltaría en cada refresco. */
@keyframes pc-destello{0%{background:var(--accent-bg)}100%{background:transparent}}
.pc-movido{animation:pc-destello 1.6s ease-out;border-radius:4px}
@media (prefers-reduced-motion:reduce){.pc-movido{animation:none;outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}}
/* EL OBJETIVO, bajo el anillo: la referencia contra la que se lee el %. */
.pc-objetivo{flex:0 0 auto;padding:8px 12px;text-align:center;border-top:0.5px solid var(--border);background:var(--surface2)}
.pc-objetivo:empty{display:none}
.pc-obj{display:inline-block;padding:4px 9px;border-radius:999px;font-size:9px;line-height:1.35}
.pc-obj b{font-weight:700}
.pc-obj-ok{background:var(--ok-bg);color:var(--ok-txt)}
.pc-obj-malo{background:var(--danger-bg);color:var(--danger)}
.pc-obj-neutro{background:var(--surface2);color:var(--text2)}
.pc-obj-vacio{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:0.5px dashed var(--border-md);border-radius:999px;background:none;color:var(--text3);font:600 10px inherit;cursor:pointer}
.pc-obj-vacio:hover{border-color:var(--accent);color:var(--accent)}
.pc-obj-edit{margin-left:auto;padding:2px 6px;border:0;background:none;color:var(--text3);cursor:pointer;font-size:13px;line-height:1;border-radius:6px}
.pc-obj-edit:hover{color:var(--accent);background:var(--accent-bg)}
/* «18 días de retraso» en la cola. Va en rojo dentro de la fila de datos, no
   como badge aparte: es un dato más de la tarea, pero el que más pesa. */
.pc-q-tarde{color:var(--danger);font-weight:700}
/* El aviso de que el dato puede no ser de ahora. Es lo único del panel que
   invalida todo lo demás de la pantalla, así que va en ámbar y arriba. */
.pc-desfase{display:flex;align-items:center;gap:8px;margin:-4px 0 10px;padding:8px 14px;background:var(--warn-bg);border-radius:var(--r-sm);font-size:11px;color:var(--warn)}
.pc-desfase[hidden]{display:none}
.pc-desfase>i{font-size:14px;flex-shrink:0}
.pc-desfase>span{flex:1;min-width:0}
/* ── LO TUYO DE HOY ────────────────────────────────────────────────────────
   La franja de las tareas de la propia responsable. Merxe tiene el Panel
   abierto todo el día y el Panel no la incluye a ella a propósito, así que sus
   tareas se le pasaban. Ya había DOS contadores para eso —el globo del menú y
   el número del título de la pestaña— y ninguno le funcionaba, y por eso esto
   no es un contador más: enseña los TÍTULOS. Un «Llamar a proveedor Serrano»
   se reconoce de un vistazo; un «4» no dice qué hay que hacer.
   Ancho completo y ~40 px de alto: no le quita sitio a «Misión de hoy», que es
   donde se decide el día. */
.pc-mio{display:flex;align-items:center;gap:10px;margin:-4px 0 10px;padding:9px 13px;border:1px solid var(--border-md);border-left:3px solid var(--accent);border-radius:var(--r-sm);background:var(--surface)}
.pc-mio[hidden]{display:none}
.pc-mio>i{flex:0 0 auto;font-size:15px;color:var(--accent)}
.pc-mio-t{flex:0 0 auto;font:700 8px/1 'Sora',sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--text3)}
/* Las fichas se recortan antes que empujar el botón fuera de la fila: en una
   ventana estrecha vale más ver dos títulos enteros que tres a medias. */
.pc-mio-lista{display:flex;gap:6px;flex:1;min-width:0;overflow:hidden}
.pc-mio-x{display:inline-flex;align-items:center;gap:5px;max-width:230px;padding:4px 9px;border:1px solid var(--border);border-radius:999px;background:var(--surface2);color:var(--text);font:inherit;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.pc-mio-x:hover{border-color:var(--accent)}
.pc-mio-x b{flex:0 0 auto;width:6px;height:6px;border-radius:50%}
.pc-mio-mas{flex:0 0 auto;padding:4px 10px;border:0;border-radius:999px;background:var(--accent-bg);color:var(--accent-txt);font:700 10px 'Sora',sans-serif;cursor:pointer}
.pc-mio-mas:hover{background:var(--accent);color:#fff}
/* Con el día resuelto la franja NO desaparece: si se fuera, el resto de la
   pantalla daría un salto cada mañana y el sitio dejaría de ser un sitio. */
.pc-mio-ok{flex:1;min-width:0;color:var(--ok-txt);font-size:11px;font-weight:600}
/* En estrecho las fichas pasan a su propia línea y ENVUELVEN. Con la fila
   recortada («overflow:hidden», que en escritorio es lo que se quiere para no
   empujar el botón fuera) la tercera quedaba partida por la mitad en el móvil:
   media palabra no se lee y encima parece que algo se ha roto. */
@media (max-width:900px){
  .pc-mio{flex-wrap:wrap}
  .pc-mio-lista{order:3;flex-basis:100%;flex-wrap:wrap;overflow:visible}
  .pc-mio-x{max-width:100%}
  .pc-mio-mas{margin-left:auto}
}
/* EL DIARIO: la lista de lo que ha ido pasando hoy. Se lee de pasada, así que
   la hora va fija a la izquierda para poder barrerla con la vista, y el color
   solo marca el borde: si cada línea llevara fondo, veinte movimientos serían
   un semáforo roto. Tope de alto porque un día movido puede dar sesenta. */
.pc-diario{max-height:280px;overflow-y:auto}
.pc-dia{display:flex;align-items:baseline;gap:10px;padding:7px 16px;border-bottom:0.5px solid var(--border);border-left:3px solid transparent;font-size:11px}
.pc-dia:last-child{border-bottom:0}
.pc-dia-h{flex:0 0 auto;font:700 10px/1 'Sora',sans-serif;color:var(--text3);font-variant-numeric:tabular-nums}
.pc-dia-t{flex:1;min-width:0;color:var(--text2)}
.pc-dia-t b{color:var(--text);font-weight:600}
.pc-dia-t span{color:var(--text)}
.pc-dia-ok{border-left-color:var(--ok-txt)}
.pc-dia-malo{border-left-color:var(--danger)}
.pc-dia-aviso{border-left-color:var(--warn)}
.pc-dia-normal{border-left-color:var(--border-md)}
.pc-dia-apagado{border-left-color:var(--text3);opacity:.75}
/* EL TITULAR del panel: la conclusión del día en una frase, antes que ninguna
   cifra. Las cifras van en tono apagado y lo que pide atención en color: si
   todo pesara lo mismo habría que leer la frase entera para saber si pasa algo. */
.pc-titular{margin:0 0 10px;padding:2px 0 2px 11px;border-left:3px solid var(--ok-txt);font:600 11px/1.5 'Sora',sans-serif;color:var(--text)}
.pc-titular.is-alarma{border-left-color:var(--danger)}
.pc-titular-cifras{color:var(--text2);font-weight:500}
.pc-titular-alerta{color:var(--danger)}
.pc-titular-aviso{color:var(--text)}
.pc-titular-ok{color:var(--ok-txt);font-weight:600}
@media (max-width:768px){.pc-titular{font-size:11px;padding:2px 0 2px 9px}}
.pc-sb{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:3px;flex:1 1 0;padding:0 15px;border-right:1px solid var(--border);min-width:0}
.pc-sb:last-child{border-right:0}
.pc-sb-l{font:700 7.5px/1 'Sora',sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--text3)}
.pc-sb-v{font:700 13px/1.1 'Sora',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-sb-v.ok{color:var(--ok-txt)}.pc-sb-v.warn{color:var(--warn)}.pc-sb-v.danger{color:var(--danger)}
/* La celda «Por validar» es un botón; el resto de la tira son divs. Se le quita
   el aspecto de botón para que la tira siga leyéndose como una sola pieza, y se
   le deja el cursor y el realce al pasar por encima para que se note que sí se
   pulsa. */
.pc-sb-btn{appearance:none;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-top:0;border-bottom:0;border-left:0;transition:background .15s}
.pc-sb-btn:hover{background:var(--accent-bg)}
.pc-sb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Banda B */
/* La cifra manda a la izquierda y los seis accesos ocupan el resto. Sustituye
   al anillo con su leyenda, que repetía pendientes y en curso justo al lado del
   semáforo que ya los contaba. */
.pc-mision-fila{display:flex;align-items:stretch;gap:16px}
.pc-mision-cifra{flex:0 0 auto;min-width:132px;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface2);color:var(--text);font-family:inherit;cursor:pointer;text-align:left}
.pc-mision-cifra:hover{border-color:var(--accent)}
.pc-mision-cifra b{font:700 40px/1 'Sora',sans-serif;letter-spacing:-1.5px}
.pc-mision-cifra span{font-size:10px;color:var(--text3)}
.pc-mision-cifra.ok b{color:var(--ok-txt)}
.pc-mision-cifra.warn b{color:var(--warn)}
.pc-mision-cifra.danger b{color:var(--danger)}
.pc-mision-col{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;min-width:132px}
.pc-mision-col .pc-mision-cifra{flex:1}
.pc-mision-fila .pc-tiles{flex:1;min-width:0;height:auto}
.pc-ring-aparte button{border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:900px){.pc-mision-fila{flex-direction:column}}
.pc-mision{display:flex;align-items:center;gap:14px;height:100%}
.pc-ring{position:relative;flex:0 0 auto;width:118px;height:118px}
.pc-ring svg{transform:rotate(-90deg);display:block}
.pc-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.pc-ring-c b{font:700 24px/1 'Sora',sans-serif;letter-spacing:-.02em}
.pc-ring-c span{margin-top:5px;font:700 7px/1 'Sora',sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--text3)}
.pc-ring-leg{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;height:118px}
/* «No procede» va aquí, fuera de la leyenda de segmentos, porque no es una
   porción del día: no cuenta ni como hecha ni como pendiente. */
.pc-ring-aparte{margin-top:4px;color:var(--text3);font-size:9px;line-height:1.3}
.pc-ring-leg div,.pc-ring-leg button{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text2);padding:2px 0;border-bottom:1px solid var(--border)}
.pc-ring-leg button{width:100%;appearance:none;background:none;font-family:inherit;text-align:left;cursor:pointer;border-top:0;border-left:0;border-right:0;transition:color .12s}
.pc-ring-leg button:hover{color:var(--accent)}
.pc-ring-leg button:hover b{color:var(--accent)}
.pc-ring-leg button[aria-pressed="true"]{color:var(--accent-txt)}
.pc-ring-leg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.pc-ring-leg div:last-child,.pc-ring-leg button:last-child{border-bottom:0}
.pc-ring-leg i{width:6px;height:6px;border-radius:2px;flex:0 0 auto}
.pc-ring-leg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-ring-leg b{font:700 11px/1 'Sora',sans-serif;color:var(--text)}
.pc-tiles{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:8px;height:100%}
.pc-tile{display:flex;flex-direction:column;justify-content:space-between;gap:2px;padding:8px 9px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-family:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .14s,background .14s}
.pc-tile:hover{border-color:var(--accent)}
.pc-tile.is-active{border-color:var(--accent);background:var(--accent-bg)}
.pc-tile-t{display:flex;align-items:center;justify-content:space-between;gap:5px}
.pc-tile-l{font:700 7.5px/1 'Sora',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-tile-d{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.pc-tile-v{font:700 22px/1 'Sora',sans-serif}
.pc-stats{display:flex;flex-direction:column;justify-content:space-between;height:100%}
.pc-st{display:flex;align-items:center;gap:9px;padding:5px 0;border:0;border-bottom:1px solid var(--border);background:none;width:100%;cursor:pointer;color:var(--text);font-family:inherit;text-align:left}
/* Cifra informativa sin pantalla a la que ir: no debe parecer pulsable. */
.pc-st-quieto{cursor:default}
/* Fila de la pantalla de olvidadas. La casilla va grande a propósito: se marcan
   varias seguidas y con dianas pequeñas se falla. */
.olvidada{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:.5px solid var(--border);cursor:pointer}
.olvidada:last-child{border-bottom:0}
.olvidada:hover{background:var(--surface2)}
.olvidada.is-picked{background:var(--accent-bg)}
.olvidada input{width:17px;height:17px;flex:0 0 auto;margin:0;accent-color:var(--accent)}
.olvidada-main{min-width:0;flex:1}
.olvidada-main strong,.olvidada-main small{display:block}
.olvidada-main strong{overflow:hidden;font:700 11px/1.35 Sora,sans-serif;text-overflow:ellipsis;white-space:nowrap}
.olvidada-main small{margin-top:2px;color:var(--text3);font-size:9px}

/* Días que lleva una tarea sin cerrar. Rojo cuando nadie ha dicho nada —es el
   caso que hay que sacar a la luz— y neutro cuando está declarada en espera o
   pidiendo ayuda: ahí el dato informa, no acusa. */
.task-wait-age{flex:0 0 auto;margin-left:auto;padding:1px 6px;border-radius:99px;background:var(--surface);font-size:9px;white-space:nowrap}
.task-late{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:99px;background:var(--st-dang-bg);color:var(--st-dang-tx);font-weight:700}
.task-late.is-declared{background:var(--surface2);color:var(--text3)}
/* De otro día pero dentro de su plazo: es un dato, no una alarma. */
.task-late.is-en-plazo{background:var(--surface2);color:var(--text3);font-weight:600}

/* Tarea apuntada por un empleado y todavía sin revisar. Ámbar y no rojo: no es
   un problema, es un paso pendiente del circuito normal. */
.task-unvalidated{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--warn-bg);color:var(--warn)}
.task-unvalidated .btn{margin-left:auto}
/* Un cambio de día pedido. Va en morado y no en el ámbar de «sin validar»
   porque no bloquea nada: la tarea se puede hacer igual, solo está esperando
   respuesta. Pintarlo de aviso haría creer que hay algo parado. */
/* Tarea que viene de un generador archivado: la tarjeta entera en rojo. El
   borde de la izquierda es lo que se ve al recorrer una lista larga con el ojo;
   el fondo solo, sin él, se confunde con el de una tarea que pide ayuda. */
.task-item.task-de-archivado{background:var(--st-dang-bg);border-left:3px solid var(--st-dang-tx)}
.task-archivada-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:99px;background:var(--st-dang-tx);color:#fff;font:700 9px/1 Sora,sans-serif;white-space:nowrap}
.task-change{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--accent-bg);color:var(--accent-txt)}
.task-change-note{display:block;margin-top:3px;color:var(--text2);font-style:italic}
.task-change-actions{display:flex;gap:6px;margin-left:auto}
.task-actions [data-task-change-day]{white-space:nowrap}
/* Aviso de que la lista que se está viendo no es la del título de la pantalla:
   con el filtro «Por validar» salen tareas de otros días, y sin decirlo parece
   que el portal se ha equivocado de fecha. */
.task-scope-note{display:flex;align-items:flex-start;gap:7px;margin:0 0 10px;padding:9px 11px;border-radius:var(--r-sm);background:var(--warn-bg);color:var(--warn);font-size:10px;line-height:1.45}
.task-scope-note i{flex:0 0 auto;margin-top:1px}
.pc-st:last-child{border-bottom:0}
.pc-st-n{font:700 19px/1 'Sora',sans-serif;min-width:30px;flex:0 0 auto}
.pc-st-l{font-size:9.5px;line-height:1.3;color:var(--text3);flex:1;min-width:0}
/* Banda C */
.pc-tray{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--border)}
.pc-tray:last-child{border-bottom:0}
.pc-tray-r{width:20px;height:20px;flex:0 0 auto;border-radius:5px;display:grid;place-items:center;font:700 9px/1 'Sora',sans-serif;background:var(--surface2);color:var(--text3)}
.pc-tray.p1 .pc-tray-r{background:var(--danger-bg);color:var(--danger)}
.pc-tray.p2 .pc-tray-r{background:var(--warn-bg);color:var(--warn)}
.pc-tray.p3 .pc-tray-r{background:var(--pend-bg);color:var(--pend-txt)}
.pc-tray-m{flex:1;min-width:0}
.pc-tray-m strong{display:block;font:700 11.5px/1.3 'Sora',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-tray-m small{display:block;margin-top:2px;font-size:9.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-acts{display:flex;gap:5px;flex:0 0 auto}
.pc-mini{border:1px solid var(--border-md);background:var(--surface);color:var(--text);border-radius:99px;padding:5px 10px;font:600 9.5px/1 'Sora',sans-serif;cursor:pointer;white-space:nowrap}
.pc-mini:hover{background:var(--surface2)}
.pc-mini.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.pc-mini.gh{border-color:transparent;color:var(--text3);padding:5px 7px}
.pc-abs{border-bottom:1px solid var(--border);padding:10px 13px}
.pc-abs:last-child{border-bottom:0}
/* Cabecera plegable: una línea por persona. Antes la lista de tareas de cada
   ausencia venía siempre abierta y con tres personas fuera la tarjeta se comía
   la pantalla. */
.pc-abs-h{display:flex;align-items:center;gap:9px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pc-abs-m{flex:1;min-width:0}
.pc-abs-m strong{display:block;font:700 10.5px/1.3 'Sora',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-abs-m small{display:block;margin-top:2px;font-size:9px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-abs-cuenta{flex:0 0 auto;font:700 8.5px/1 'Sora',sans-serif;color:var(--text3)}
.pc-abs-cuenta.is-alerta{color:var(--danger)}
.pc-abs-h>.ti{color:var(--text3);transition:transform .18s}
.pc-abs.is-open .pc-abs-h>.ti{transform:rotate(180deg)}
.pc-abs-detalle{margin-top:8px}
/* «12 días sin cerrar» junto al título: la línea representa a la rutina entera,
   no a un día suelto, y sin decirlo parecería que solo hay una. */
.pc-abs-veces{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:20px;background:var(--surface2);color:var(--text3);font:700 8px/1.4 'Sora',sans-serif;vertical-align:middle}
.pc-abs-av{width:26px;height:26px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font:700 8.5px/1 'Sora',sans-serif}
.pc-abs-h>div{flex:1;min-width:0}
.pc-abs-h strong{display:block;font:700 11.5px/1.2 'Sora',sans-serif}
.pc-abs-h small{display:block;margin-top:2px;font-size:9px;color:var(--text3)}
.pc-tag{font:700 7.5px/1 'Sora',sans-serif;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:4px 7px;white-space:nowrap;flex:0 0 auto}
.pc-abs-t{display:flex;align-items:center;gap:8px;padding:5px 0 5px 35px;font-size:10px}
.pc-abs-t time{width:52px;flex:0 0 auto;color:var(--text3);font-size:9px}
.pc-abs-t strong{flex:1;min-width:0;display:flex;align-items:center;font:600 10px/1.3 'Sora',sans-serif}
/* Se recorta el TÍTULO, no la fila. Con la frecuencia y «varias personas» al
   lado, el `text-overflow` del <strong> se comía justo las pastillas —van al
   final— y la etiqueta desaparecía en cuanto el título era largo, que es
   siempre. Ahora lo que cede es el texto y las pastillas se quedan. */
.pc-abs-tit{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-abs-t strong>span:not(.pc-abs-tit){flex:0 0 auto}
/* Una tarea que ya tiene quien la haga. Va en verde y atenuada a propósito: es
   información, no una tarea pendiente de que Merxe haga nada. Lo que necesita
   ver de un vistazo es a QUIÉN ha ido a parar. */
.pc-abs-t.is-cubierta strong{font-weight:400;color:var(--text2)}
/* Una rutina parada no es una alerta ni un logro: es una decisión ya tomada que
   solo tiene que poder encontrarse para deshacerla. Va apagada y tachada, como
   algo que está ahí pero fuera de juego. */
/* «Varias personas» no es una alarma, es un matiz que cambia la decisión: se
   distingue de las demás pastillas grises con el color de acento, sin llegar a
   competir con el rojo de «sin cubrir». */
.pc-abs-veces.is-varias{background:var(--accent-bg);color:var(--accent-txt)}
.pc-abs-veces.is-varias i{margin-right:3px;vertical-align:-1px}
/* La frecuencia, en el mismo azul que la lleva el Planificador y el catálogo:
   es el mismo dato y tiene que reconocerse sin leerlo. */
.pc-abs-frec{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:20px;background:var(--st-freq-bg);color:var(--st-freq-tx);font:700 8px/1.4 'Sora',sans-serif;vertical-align:middle}
.pc-abs-frec i{margin-right:3px;vertical-align:-1px}
.pc-abs-t.is-parada strong{font-weight:400;color:var(--text3)}
.pc-abs-t.is-parada .pc-abs-tit{text-decoration:line-through}
.pc-abs-t.is-parada .pc-abs-veces{text-decoration:none}
.pc-abs-quien{display:flex;align-items:center;gap:3px;flex:0 0 auto;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 9px/1 'Sora',sans-serif;color:var(--ok-txt)}
/* Banda D */
/* Banda D · línea de tiempo. Dos columnas de carriles: con 13 personas pasa de
   ~420 px de alto a poco más de 200 y deja de partir el panel en dos. El ancho
   de la columna de nombres se comparte con el eje de horas —tienen que empezar
   en el mismo punto— y por eso va en una variable, no repetido en dos sitios.
   Debajo de 1400 px vuelve a una sola columna: ahí la mitad de pista dejaría
   las barras en un sello. Se esconde el eje del segundo grupo para que los dos
   se lean como la lista única de siempre (comparten el mismo eje, que es
   idéntico y queda alineado). */
/* EQUIPO EN LA JORNADA (banda D). Una fila por persona: quién, sus tareas del
   día una tras otra, y el resumen. Sustituye a la línea de tiempo a dos
   columnas y al radar, que eran dos tarjetas para la misma pregunta.

   UNA SOLA COLUMNA, que es lo acordado y además lo que hace legibles los
   títulos: a media anchura una tarea de 15 minutos medía 2 px. El ancho del
   nombre va en variable porque el eje de horas tiene que empezar justo donde
   empiezan las pistas; si se separan, las etiquetas dejan de caer sobre su
   línea. */
.pc-eq-eje{--pc-eq-name:150px}
.pc-eq-hours{position:relative;margin-left:var(--pc-eq-name);margin-right:112px;height:18px;border-bottom:1px solid var(--border);margin-bottom:5px}
.pc-eq-hour{position:absolute;font:700 8px/18px 'Sora',sans-serif;color:var(--text3);border-left:1px solid var(--border);padding-left:4px}
.pc-eq{--pc-eq-name:150px;display:flex;align-items:center;gap:10px;width:100%;padding:7px 0;border:0;border-bottom:1px solid var(--border);background:none;color:var(--text);font-family:inherit;text-align:left;cursor:pointer}
.pc-eq:last-child{border-bottom:0}
.pc-eq:hover{background:var(--surface2)}
.pc-eq-quien{width:var(--pc-eq-name);flex:0 0 auto;display:flex;align-items:center;gap:8px;min-width:0}
.pc-eq-av{width:26px;height:26px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font:700 8.5px/1 'Sora',sans-serif;background:var(--accent-bg);color:var(--accent-txt)}
.pc-eq.danger .pc-eq-av{background:var(--danger-bg);color:var(--danger)}
.pc-eq.warn .pc-eq-av{background:var(--warn-bg);color:var(--warn)}
.pc-eq.ok .pc-eq-av{background:var(--ok-bg);color:var(--ok-txt)}
.pc-eq.off .pc-eq-av{background:var(--surface2);color:var(--text3)}
.pc-eq-n{min-width:0}
.pc-eq-n strong{display:block;font:700 10.5px/1.3 'Sora',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-eq-n small{display:block;margin-top:2px;font-size:9px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-eq-track{position:relative;flex:1;min-width:0;height:26px;border-radius:5px;background:var(--surface2);border:1px solid var(--border);overflow:hidden}
.pc-eq-g{position:absolute;top:0;bottom:0;width:1px;background:var(--border)}
.pc-eq-b{position:absolute;top:3px;bottom:3px;border-radius:3px;font:700 8px/1 'Sora',sans-serif;display:flex;align-items:center;padding:0 5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pc-eq-off{position:absolute;inset:3px;border-radius:3px;display:flex;align-items:center;justify-content:center;font:700 8.5px/1 'Sora',sans-serif;letter-spacing:.1em;text-transform:uppercase;background:repeating-linear-gradient(45deg,var(--surface2),var(--surface2) 5px,transparent 5px,transparent 10px)}
.pc-eq-s{width:102px;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.pc-eq-s b{font:700 11px/1 'Sora',sans-serif;color:var(--text2)}
.pc-eq-s small{font-size:8px;color:var(--text3);text-align:right}
.pc-eq-np{color:var(--text3);font-style:italic}
.pc-eq-load{width:100%;height:4px;margin-top:2px;border-radius:99px;background:var(--surface2);overflow:hidden}
.pc-eq-load i{display:block;height:100%;border-radius:99px}
/* En pantallas estrechas la pista se queda sin sitio útil: se apila el resumen
   debajo del nombre y la pista pasa a ocupar la fila entera. */
@media (max-width:1100px){
  .pc-eq-eje,.pc-eq{--pc-eq-name:118px}
  .pc-eq-hours{margin-right:0}
  .pc-eq{flex-wrap:wrap}
  .pc-eq-track{order:3;flex:1 0 100%}
  .pc-eq-s{width:auto;flex-direction:row;align-items:center;gap:7px;margin-left:auto}
  .pc-eq-load{display:none}
}
/* Carga de la semana (banda E) */
.pc-wk{display:grid;grid-template-columns:82px repeat(7,1fr);gap:4px}
.pc-wk-h{font:700 7.5px/1 'Sora',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);text-align:center;padding-bottom:4px}
.pc-wk-n{font:600 10px/24px 'Sora',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
/* Dos cifras por casilla y no una: arriba el porcentaje de jornada CON su signo
   —sin él se leía como un número de tareas— y debajo, en pequeño, cuántas
   tareas hay ese día. Son dos datos distintos y hasta ahora se confundían. */
.pc-wk-c{height:27px;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:700 8.5px/1 'Sora',sans-serif;border:1px solid var(--border);font-family:inherit;cursor:pointer}
.pc-wk-c b{font:700 9px/1 'Sora',sans-serif}
.pc-wk-c small{font:600 7px/1 'Sora',sans-serif;opacity:.7}
.pc-leg{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:8.5px;color:var(--text3);flex-wrap:wrap}
.pc-leg i{width:12px;height:9px;border-radius:2px;display:inline-block;border:1px solid var(--border)}
.pc-spark{display:block;width:100%;height:14px}
.pc-trend{width:100%;height:100%;display:block}
.pc-empty{display:flex;align-items:center;justify-content:center;gap:8px;min-height:90px;padding:16px;color:var(--text3);font-size:10px;text-align:center}
.pc-empty i{color:var(--accent);font-size:18px}
/* Sala de control */
body.pc-zen .sidebar,body.pc-zen .page-hdr{display:none}
body.pc-zen .main{padding:10px}
#pc-zen-out{display:none;position:fixed;top:12px;right:14px;z-index:120}
body.pc-zen #pc-zen-out{display:inline-flex}
/* Ausencias en Administración */
.abs-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:0.5px solid var(--border)}
.abs-row:last-child{border-bottom:0}
.abs-row-m{flex:1;min-width:0}
.abs-row-m strong{display:block;font:700 12px/1.3 'Sora',sans-serif}
.abs-row-m small{display:block;margin-top:3px;font-size:10px;color:var(--text2)}
/* De escritorio hacia abajo */
/* Los topes de alto se pusieron cuando el portal estaba vacío, para que una
   tarjeta con dos filas dentro no quedara ridícula. Con la plantilla real ya no
   protegen de nada: recortan.
   Las tarjetas marcadas `pc-crece` —Radar, Carga de la semana y Línea de
   tiempo— quedan EXENTAS: listan una fila por trabajador, así que su alto es
   una constante conocida y esconder parte del equipo es justo lo que no puede
   pasar. Las demás conservan tope porque su contenido no depende de la
   plantilla y sí puede dispararse.
   OJO: el tope se decide por `pc-crece`, no por el número de columnas. La
   versión anterior filtraba por `.pc-s4`/`.pc-s3`, y al mover las bandas el
   tope habría caído sobre una tarjeta distinta sin que nada lo delatara. */
@media (max-width:1280px){
  /* Con la Misión y el semáforo ya en una sola tarjeta, la banda B es 9 + 3.
     Por debajo de 1280 el semáforo se queda sin ancho, así que la Misión pasa a
     la fila entera y Vacaciones baja debajo. */
  .pc-band.pc-b>.pc-s9{grid-column:span 12}
  .pc-band.pc-b>.pc-s3{grid-column:span 12}
  .pc-band.pc-b{height:auto}.pc-band.pc-b>*{height:auto}
  .pc-band.pc-e>.pc-s7{grid-column:span 7}
  .pc-band.pc-e>.pc-s5{grid-column:span 5}
  .pc-band.pc-f>.pc-s8{grid-column:span 7}
  .pc-band.pc-f>.pc-s4{grid-column:span 5}
}
@media (max-width:960px){
  /* Una tarjeta por fila. */
  .pc-band>*{grid-column:span 12!important;grid-row:auto!important}
  .pc-band,.pc-band>*{height:auto!important}
  .pc-card{min-height:180px;max-height:340px}
  .pc-card.pc-crece{max-height:none}
  .pc-status{height:auto;flex-wrap:wrap}
  .pc-sb{flex:1 1 33%;padding:9px 13px;border-bottom:1px solid var(--border)}
  .pc-tiles{grid-template-rows:repeat(2,minmax(62px,1fr))}
  .pc-mision{height:auto;padding:4px 0}
  .pc-command-deck{grid-template-columns:1fr auto}.pc-command-metrics{grid-column:1/-1;border-top:1px solid var(--border);border-left:0}.pc-command-actions{border-left:1px solid var(--border)}
}
@media (max-width:620px){
  .pc-command-deck{grid-template-columns:1fr}.pc-command-main{padding:15px}.pc-command-main p{white-space:normal}.pc-command-actions{border-left:0;border-top:1px solid var(--border);padding:10px 12px}.pc-command-actions .btn{flex:1}.pc-command-metrics span{padding:11px 12px}
  .pc-sb{flex:1 1 50%}
  .pc-tiles{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,minmax(58px,1fr))}
  .pc-eq-eje,.pc-eq{--pc-eq-name:64px}
  .pc-eq-hour:nth-child(even){color:transparent}
  .pc-acts{flex-direction:column}
  .pc-wk{grid-template-columns:56px repeat(7,1fr)}
  .pc-abs-t{padding-left:0}
}
/* Ausencias en el calendario anual de la responsable. Rayado, para no
   confundirlas nunca con un día de vacaciones. */
.mc-cell.mc-ausencia{background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,var(--danger-bg) 3px,var(--danger-bg) 6px);box-shadow:inset 0 0 0 1.5px var(--danger)}
/* Catálogo de tareas agrupado por frecuencia (3/08/2026): con 272 plantillas,
   una lista plana obliga a leerlas todas para encontrar una. */
.task-freq-group+.task-freq-group{border-top:8px solid var(--surface2)}
.task-freq-head{position:sticky;top:0;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;padding:9px 16px;background:var(--surface2);border:0;border-bottom:0.5px solid var(--border);font:inherit;text-align:left;cursor:pointer}
.task-freq-head:hover{background:var(--surface3,var(--surface2));filter:brightness(1.04)}
.task-freq-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.task-freq-head span{font:700 10px/1 'Sora',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--text2)}
.task-freq-head span i{color:var(--accent);margin-right:5px;transition:transform .15s ease}
.task-freq-head small{font-size:9.5px;color:var(--text3);white-space:nowrap}
/* Plegado: el grupo se queda en su cabecera y el contador de al lado dice
   cuántas tareas hay escondidas, para que no parezca que están vacías. */
.task-freq-group.plegado .task-freq-body{display:none}
.task-freq-group.plegado .task-freq-head span i{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.task-freq-head span i{transition:none}}
/* Aviso de tarea puntual en la tarjeta, con la salida a convertirla en
   periódica. Tono neutro a propósito: no es un problema, es una opción. */
.task-promote{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:8px 10px;background:var(--surface2);border-radius:var(--r-sm);font-size:10px;color:var(--text3)}
.task-promote i{font-size:13px;flex-shrink:0}
.task-promote span{flex:1;min-width:120px}
/* «¿Cuánto has tardado?»: tres botones al cerrar una tarea. Tono neutro y
   tamaño pequeño porque es opcional; contestada, baja aún más el volumen. */
.task-time{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:8px 10px;background:var(--surface2);border-radius:var(--r-sm);font-size:10px;color:var(--text2)}
.task-time.is-answered{color:var(--text3);background:transparent;padding:6px 10px}
.task-time>i{font-size:13px;flex-shrink:0}
.task-time>span:not(.task-time-opts){flex:1;min-width:130px}
.task-time-opts{display:flex;gap:4px;flex-wrap:wrap}
.task-time-opt{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border:0.5px solid var(--border-md);border-radius:999px;background:var(--surface);color:var(--text2);font:600 10px inherit;cursor:pointer;transition:all .12s}
.task-time-opt:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.task-time-opt.is-picked{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-txt)}
.task-time-opt:disabled{opacity:.5;cursor:default}
/* La cuenta de respuestas, en el editor, justo debajo de la duración. */
.tpl-ajustes{margin-top:6px;padding:7px 9px;background:var(--accent-bg);border-radius:var(--r-sm);font-size:10px;color:var(--accent-txt);line-height:1.5}
.tpl-ajustes em{font-style:normal;font-weight:700}
/* Pie del catálogo: las puntuales ya cerradas no se listan, pero se cuentan. */
.task-archived-note{display:flex;align-items:center;gap:6px;padding:12px 16px;font-size:10px;color:var(--text3);border-top:0.5px solid var(--border)}
.task-archived-note i{font-size:13px;flex-shrink:0}
/* Jornada por temporada: siete casillas de horas, una por día. */
.jor-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin-top:4px}
.jor-dia{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:0.5px solid var(--border-md);border-radius:var(--r-sm);background:var(--surface2)}
.jor-dia>span{font:700 10px/1 'Sora',sans-serif;color:var(--text2)}
.jor-dia input{width:100%;min-width:0;text-align:center;border:0.5px solid var(--border-md);border-radius:6px;background:var(--surface);color:var(--text);padding:6px 2px;font:600 12px/1 inherit}
.jor-dia small{font-size:9px;color:var(--text3)}
.jor-resumen{color:var(--text3)!important;font-size:9.5px!important}
@media (max-width:620px){.jor-dias{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Aviso de versión nueva: abajo, por encima de todo y en cualquier pantalla.
   No tapa la zona de trabajo y no se va solo, porque el mensaje sigue siendo
   cierto hasta que se recargue. */
.version-nueva{position:fixed;left:50%;bottom:16px;z-index:1200;display:flex;align-items:center;gap:10px;
  width:min(560px,calc(100vw - 24px));padding:11px 12px;transform:translateX(-50%);
  border:1px solid var(--accent);border-radius:var(--r-sm);background:var(--surface);
  box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:12px;color:var(--text)}
.version-nueva>.ti{flex:0 0 auto;color:var(--accent);font-size:16px}
.version-nueva>span{flex:1;line-height:1.4}
.version-nueva .btn{flex:0 0 auto;white-space:nowrap}
.version-nueva-x{flex:0 0 auto;padding:3px 5px;border:0;border-radius:5px;background:transparent;color:var(--text3);cursor:pointer}
.version-nueva-x:hover{background:var(--surface2);color:var(--text)}
@media (max-width:600px){.version-nueva{align-items:flex-start;flex-wrap:wrap}.version-nueva>span{flex:1 1 100%;order:2}.version-nueva .btn{order:3}}

/* ═══════════════════════════════════════════════════════════════════════════
   VISITAS · la agenda comercial (19/08/2026)
   Escritorio primero, como manda la regla 6: la preparadora monta la semana en
   el ordenador. El comercial mira la agenda en el móvil, así que a partir de
   900px las filas se apilan en vez de encogerse.
   ═══════════════════════════════════════════════════════════════════════════ */
.vis-hdr-acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vis-nota{font-size:12px;color:var(--text2);margin-top:6px}
.vis-error{margin-top:10px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--danger-bg);color:var(--danger-txt);font-size:13px}
.vis-aviso{display:flex;flex-direction:column;gap:8px;padding:12px 14px;margin-bottom:14px;
  border-radius:var(--r);background:var(--info-bg);color:var(--info-txt);font-size:13.5px}
.vis-aviso .ti{margin-right:4px}
/* El aviso del archivo va en fila: el icono al lado del texto y no encima, que
   es lo que hace `.vis-aviso` por defecto para los avisos de pantalla. */
.vis-aviso-archivo{flex-direction:row;align-items:flex-start;gap:9px}
.vis-aviso-archivo .ti{margin:2px 0 0;flex:none}

/* ── Agenda ──────────────────────────────────────────────────────────────── */
/* ── LA TIRA ────────────────────────────────────────────────────────────────
   La agenda dejó de ser una semana por pantalla y pasó a ser una lista de
   semanas plegadas (Salva, 20/08/2026). Lo que había aquí —cinco tarjetas de
   día, `.vis-dia*`— se retiró con ellas. */
.vis-dia-vacio{padding:14px 16px;font-size:13px;color:var(--text3);font-style:italic}
.vis-tira{display:flex;flex-direction:column;gap:8px}
.vis-tira-acciones{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.vis-tira-acciones.is-fin{margin:12px 0 0;justify-content:center}
/* El buscador comparte fila con los filtros de la tira. Crece con el hueco que
   sobra pero con tope: una caja de buscar de media pantalla no ayuda a nadie y
   empuja los botones contra el borde. Va con el contenedor delante porque
   `tareas-catalogo.css` —donde vive `.task-template-search`— se carga después
   que esta hoja, y a igual peso ganaría lo suyo. */
.vis-tira-acciones .vis-buscador{flex:0 1 340px;min-width:220px}
@media (max-width:800px){.vis-tira-acciones .vis-buscador{flex:1 1 100%;min-width:0}}

.vis-t-semana{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.vis-t-semana.es-actual{border-color:var(--accent)}
/* La cabecera es un contenedor con DOS botones: el que pliega, que ocupa casi
   todo, y el de imprimir. Antes la cabecera entera era el botón; meter otro
   dentro habría sido HTML inválido. */
.vis-t-cab{display:flex;align-items:center;gap:4px;padding-right:9px}
.vis-t-plegar{display:flex;align-items:center;gap:11px;flex:1;min-width:0;padding:11px 4px 11px 14px;
  border:0;background:transparent;color:var(--text);cursor:pointer;text-align:left;font:inherit}
.vis-t-plegar:hover{background:var(--surface2)}
.vis-t-plegar:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Más oscuro que el resto de la franja a propósito (Salva, 21/08/2026): iba en
   `--text2` con el borde a medio tono y en las pantallas flojas de almacén —o
   con luz de lado— desaparecía. Es la única acción de la franja plegada, así
   que tiene que verse sin buscarla. */
.vis-t-imprimir{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;
  border:1px solid var(--border-md);border-radius:var(--r-sm);background:var(--surface);
  color:var(--text);cursor:pointer;font-size:15px}
.vis-t-imprimir:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.vis-t-imprimir:disabled{opacity:.35;cursor:default}
.vis-t-flecha{flex:0 0 auto;color:var(--text3);font-size:15px;transition:transform .15s}
.vis-t-semana.is-abierta .vis-t-flecha{transform:rotate(90deg)}
.vis-t-semana.is-abierta .vis-t-plegar{background:var(--surface2)}
.vis-t-titulo{flex:1;min-width:0;font:700 13px/1.35 Sora,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vis-t-chip{flex:0 0 auto;padding:2px 8px;border-radius:99px;background:var(--accent-bg);
  color:var(--accent-txt);font:700 9.5px Sora,sans-serif;white-space:nowrap}
.vis-t-chip.is-pisa{background:var(--st-dang-bg);color:var(--st-dang-tx)}
.vis-t-total{flex:0 0 auto;min-width:74px;text-align:right;font-size:11.5px;color:var(--text2)}
.vis-t-total.is-vacia{color:var(--text3);font-style:italic}

/* Las cinco barritas: sin abrir la semana, dónde está la carga. Un día vacío
   deja su hueco marcado —no desaparece— o no se sabría cuál falta. */
.vis-pulso{flex:0 0 auto;display:flex;align-items:flex-end;gap:2px;height:14px}
.vis-pulso i{width:4px;border-radius:1.5px;background:var(--border-md)}
.vis-pulso i.con{background:var(--accent)}

.vis-t-cuerpo{border-top:1px solid var(--border)}
.vis-t-dia{display:flex;align-items:center;gap:9px;padding:7px 14px;background:var(--surface2);
  border-top:1px solid var(--border);font:600 11.5px/1.3 Sora,sans-serif;color:var(--text2)}
.vis-t-dia:first-child{border-top:none}
.vis-t-dia>span:first-child{flex:1;min-width:0;text-transform:capitalize}
.vis-t-dia em{font-style:normal;color:var(--text3)}
.vis-t-dia.es-hoy>span:first-child{color:var(--accent)}
.vis-t-hoy{padding:1px 6px;border-radius:99px;background:var(--accent);color:#fff;font-size:9px;text-transform:none}
.vis-t-festivo{color:var(--st-esp-tx);text-transform:none;font-weight:700}
.vis-t-cuenta{flex:0 0 auto;font-size:11px;color:var(--text3)}
.vis-t-libre{flex:0 0 auto;font-size:11px;color:var(--text3);font-style:italic;font-weight:400}
.vis-t-dia.is-libre{color:var(--text3)}
.vis-t-mas{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;
  border:0.5px solid var(--border-md);border-radius:6px;background:var(--surface);
  color:var(--text3);cursor:pointer;font-size:12px}
.vis-t-mas:hover{border-color:var(--accent);color:var(--accent)}

.vis-fila{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:start;
  padding:12px 16px;border-top:1px solid var(--border)}
.vis-fila:first-child{border-top:none}
.vis-fila.se-pisa{background:var(--danger-bg)}
.vis-fila-hora{display:flex;flex-direction:column;line-height:1.25}
.vis-fila-hora b{font-size:15px}
.vis-fila-hora span{font-size:12px;color:var(--text2)}
.vis-fila-cliente{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vis-fila-cliente b{font-size:14.5px}
.vis-cli-num{font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums}
.vis-chip-pisa{font-size:11px;font-weight:600;padding:1px 7px;border-radius:99px;
  background:var(--danger);color:#fff}
.vis-fila-datos{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;font-size:12.5px;color:var(--text2)}
.vis-fila-datos .ti{margin-right:3px;opacity:.7}
.vis-fila-motivo{margin-top:6px;font-size:13px;color:var(--text)}
.vis-fila-acciones{display:flex;gap:6px}

/* ── Clientes ────────────────────────────────────────────────────────────── */
.vis-cli-lista{display:flex;flex-direction:column;padding:0}
.vis-cli-fila{display:grid;grid-template-columns:64px 1fr 1fr 130px auto;gap:12px;align-items:center;
  width:100%;text-align:left;padding:10px 16px;border:none;border-top:1px solid var(--border);
  background:none;color:inherit;font:inherit;cursor:pointer}
.vis-cli-fila:first-child{border-top:none}
.vis-cli-fila:hover{background:var(--surface2)}
.vis-cli-nombre{display:flex;flex-direction:column;min-width:0}
.vis-cli-nombre b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vis-cli-nombre small{font-size:11.5px;color:var(--text2)}
.vis-cli-contacto,.vis-cli-tel{font-size:12.5px;color:var(--text2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.vis-cli-duenio{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;
  background:var(--accent-bg);color:var(--accent-txt);white-space:nowrap}
.vis-cli-duenio.es-huerfano{background:var(--warn-bg);color:var(--warn-txt)}

/* El aviso de clientes sin comercial. Lo que había aquí era el reparto en
   bloque de la importación del Excel, retirado el 20/08/2026 con la cartera ya
   repartida: ver el porqué largo en `visitas.js`. */
.vis-sin-comercial{background:var(--warn-bg);color:var(--warn-txt);font-size:13.5px}

/* Rejilla de seis columnas SOBRE el sistema de formularios del portal, no en
   vez de él: `form-group` sigue poniendo la etiqueta, el borde y el foco. Seis
   columnas porque son las que dan mitades (3), tercios (2) y dos tercios (4)
   sin números raros. La ficha de cliente pedía las tres cosas. */
.form-grid.vis-form{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 14px}
.vis-form>.form-group{grid-column:span 3}
.vis-form>.form-group.corto{grid-column:span 2}
.vis-form>.form-group.largo{grid-column:span 4}
.vis-form>.form-group.full{grid-column:1/-1}

/* Separadores. Una ficha de cliente son quince campos: sin agruparlos por lo
   que se pregunta —dónde está, con quién se habla, cómo se le llama— es una
   pared de cajas y no se encuentra nada. */
.vis-form-sep{display:flex;align-items:center;gap:10px;margin:18px 0 10px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--text3)}
.vis-form-sep::after{content:'';flex:1;height:1px;background:var(--border)}
/* Un teléfono de la persona y otro de la empresa, uno debajo del otro, no se
   distinguían leyéndolos: «no está claro si se refiere a la persona de contacto
   o a un segundo contacto» (Salva, 20/08/2026). La aclaración va en la propia
   pantalla, no en un manual que nadie abre. */
.vis-form-nota{margin:-4px 0 10px;font-size:11.5px;line-height:1.45;color:var(--text3)}
.vis-form-nota-al-lado{margin:0;align-self:center}
/* El segundo contacto está vacío en los 199 clientes: ocupaba media ficha para
   no decir nada. Plegado sigue estando, y se abre solo cuando ese cliente sí
   tiene dos personas. */
.vis-form-plegable{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.vis-form-plegable>summary{cursor:pointer;font:700 10px/1 Sora,sans-serif;text-transform:uppercase;
  letter-spacing:.09em;color:var(--text3);list-style:none;display:flex;align-items:center;gap:7px}
.vis-form-plegable>summary::before{content:'\ea61';font-family:'tabler-icons';font-size:14px;
  text-transform:none;letter-spacing:0;transition:transform .15s}
.vis-form-plegable[open]>summary::before{transform:rotate(90deg)}
.vis-form-plegable>summary::-webkit-details-marker{display:none}
.vis-form-plegable>summary span{text-transform:none;letter-spacing:0;font-weight:400;font-size:11px}
.vis-form-plegable[open]>summary{margin-bottom:10px}

@media (max-width:640px){
  .form-grid.vis-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vis-form>.form-group,
  .vis-form>.form-group.corto,
  .vis-form>.form-group.largo{grid-column:1/-1}
}

.vis-historial{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.vis-historial-cab{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text2);margin-bottom:6px}
.vis-historial-ultima{font-size:13px;margin-bottom:6px}
.vis-historial-fila{display:grid;grid-template-columns:110px 56px 1fr;gap:8px;
  font-size:12.5px;color:var(--text2);padding:3px 0}

/* ── La ventana de imprimir ──────────────────────────────────────────────────
   Imprimir dejó de ser una pantalla y pasó a ser una ventana que se abre desde
   la cabecera de cada semana (Salva, 20/08/2026, fusionando las dos propuestas).
   A la izquierda se elige, a la derecha se ve el papel de verdad encogido. */
.vimp-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:18px}
.vimp-izq{min-width:0}
.vimp-der{min-width:0;display:flex;flex-direction:column;gap:7px}
.vimp-previa-cab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text3)}
.vimp-previa-cab .ti{margin-right:4px}
.vimp-previa{flex:1;max-height:60vh;overflow:auto;padding:10px;border-radius:var(--r-sm);
  background:var(--surface2);border:1px solid var(--border)}
/* El papel se enseña a escala, no redibujado: es el mismo HTML que va a la
   impresora, así que no puede quedarse desfasado y engañar. */
.vimp-papel{transform:scale(.34);transform-origin:top left;width:294%;pointer-events:none}
.vimp-papel .vp-hoja{box-shadow:0 2px 10px rgba(20,20,15,.18);margin-bottom:16px;background:#fff;color:#18180F}

.vimp-opciones{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.vimp-op{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border:1px solid var(--border-md);
  border-radius:var(--r-sm);cursor:pointer;font-size:13px}
.vimp-op input{margin-top:2px;accent-color:var(--accent)}
.vimp-op b{display:block;font:600 13px/1.3 Sora,sans-serif}
.vimp-op small{display:block;font-size:11.5px;color:var(--text2);margin-top:1px}

.vimp-tramo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.vimp-tramo>span{font-size:11.5px;color:var(--text2)}
.vimp-tramo-btns{display:flex;gap:5px;flex-wrap:wrap}
.vimp-tramo-btn{height:28px;padding:0 11px;border:1px solid var(--border-md);border-radius:99px;
  background:var(--surface);color:var(--text2);font:600 11.5px Sora,sans-serif;cursor:pointer}
.vimp-tramo-btn.is-activo{background:var(--accent);border-color:var(--accent);color:#fff}

.vimp-sel-cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.vimp-cuenta{font-size:11.5px;color:var(--text2)}
.vimp-lista{display:flex;flex-direction:column;gap:11px;max-height:42vh;overflow:auto}
.vimp-dia-hdr{display:flex;align-items:center;gap:8px;padding:4px 0;font:700 11px Sora,sans-serif;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text2);cursor:pointer}
.vimp-dia-hdr input{accent-color:var(--accent)}
.vimp-dia-hdr em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--text3)}
.vimp-fila{display:grid;grid-template-columns:20px 50px 1fr 120px;gap:9px;align-items:center;
  padding:5px 7px;border-radius:6px;font-size:12.5px;cursor:pointer}
.vimp-fila:hover{background:var(--surface2)}
.vimp-fila input{accent-color:var(--accent)}
.vimp-hora{font-variant-numeric:tabular-nums;color:var(--text2)}
.vimp-cli{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.vimp-donde{font-size:11.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* La hoja en blanco del taco: los huecos que en una hoja normal llevan el
   nombre del cliente aquí son una raya para escribir a mano. */
.vh-linea-libre{display:block;min-height:1.1em;border-bottom:1px solid #9b9b93}
/* La hoja de un apunte: donde el cliente lleva su número, ella lleva la palabra.
   Se distingue en la mano sin tener que leerla entera. */
#print-root .vh-apunte .vh-num,.vimp-papel .vh-apunte .vh-num{
  letter-spacing:.06em;text-transform:uppercase;font-size:9px}

/* ── En pantalla estrecha ─────────────────────────────────────────────────────
   Escritorio primero, como manda la regla 6: la preparadora monta la semana en
   el ordenador. El comercial mira la agenda en el móvil, así que a partir de
   900px las filas se apilan en vez de encogerse.

   Va al final de la sección a propósito: son anulaciones de las reglas de
   arriba y en CSS eso solo funciona si van después. */

@media (max-width:900px){
  .vis-fila{grid-template-columns:60px 1fr;grid-template-areas:'hora cuerpo' 'acc acc'}
  .vis-fila-hora{grid-area:hora}
  .vis-fila-cuerpo{grid-area:cuerpo}
  .vis-fila-acciones{grid-area:acc;justify-content:flex-end}
  .vis-cli-fila{grid-template-columns:56px 1fr auto}
  .vis-cli-contacto,.vis-cli-tel{display:none}
  .vimp-fila{grid-template-columns:20px 46px 1fr}
  .vimp-donde{display:none}
  .vimp-cuerpo{grid-template-columns:minmax(0,1fr)}
  .vimp-der{display:none}
}

/* Los festivos ya no llevan chip propio: en la tira se dicen en la línea del
   día (`.vis-t-festivo`), que es donde se leen sin ocupar sitio. */

/* ── La tarjeta del Panel de control ──────────────────────────────────────── */
.pc-vis-cifra{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.pc-vis-cifra b{font:800 32px/1 Sora,sans-serif;color:var(--accent)}
.pc-vis-cifra span{font-size:13px;color:var(--text2)}

/* La rejilla de tres semanas: una fila por comercial y un cuadro por día
   laborable. Las semanas son bloques con fondo propio y un pasillo de 16 px
   entre ellos; pegadas, los quince días se leían como una tira continua y había
   que contar cuadros para saber dónde acababa una (Salva, 21/08/2026).

   En pantalla estrecha no se apila ni se encoge: se desliza. Encoger los
   cuadros los deja del tamaño de un punto y apilar rompe justo lo que hace útil
   la rejilla, que es comparar a la gente entre sí de una pasada. */
.pc-vis-scroll{overflow-x:auto;margin-bottom:12px}
.pc-vis-rej{display:grid;grid-template-columns:minmax(104px,150px) repeat(3,minmax(0,1fr));
  column-gap:16px;row-gap:6px;align-items:center;min-width:540px}

.pc-vis-sem-cab{display:flex;flex-direction:column;gap:2px;padding:0 6px 2px}
.pc-vis-sem-rot{font-size:11.5px;font-weight:600;color:var(--text2)}
.pc-vis-sem-rango{font-size:10.5px;color:var(--text3)}
.pc-vis-dias{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:3px}
.pc-vis-dias span{font-size:10px;color:var(--text3);text-align:center}
.pc-vis-dias span.es-hoy{color:var(--accent);font-weight:700}

.pc-vis-quien{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0}
.pc-vis-quien-n{font-size:12.5px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pc-vis-quien b{font:800 13px/1 Sora,sans-serif;font-variant-numeric:tabular-nums;color:var(--text2)}

/* Cada semana es un botón porque en el Panel ninguna cifra puede ser un
   callejón sin salida: si dice que a alguien le falta una semana, pulsarla
   tiene que llevar a SU agenda y a ESA semana. */
.pc-vis-sem{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;
  padding:4px 6px;border:0.5px solid transparent;border-radius:var(--r-sm);
  background:var(--surface2);cursor:pointer;font:inherit;color:inherit;
  transition:border-color .12s,box-shadow .12s}
.pc-vis-sem:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.pc-vis-sem.es-hueco{background:var(--warn-bg)}

.pc-vis-d{height:24px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.pc-vis-d.es-vacio{background:var(--surface);border:0.5px solid var(--border)}
.pc-vis-d.es-festivo{border:0.5px solid var(--border);background:repeating-linear-gradient(
  45deg,transparent,transparent 3px,var(--border-md) 3px,var(--border-md) 4px)}
.pc-vis-d.es-una{background:var(--accent-bg);color:var(--accent-txt)}
.pc-vis-d.es-lleno{background:var(--accent);color:var(--surface)}
.pc-vis-d.es-pisa{background:var(--warn);color:var(--surface)}
.pc-vis-d.es-provisional{border:1px solid var(--warn);color:var(--warn-txt);background:repeating-linear-gradient(
  135deg,var(--warn-bg),var(--warn-bg) 3px,transparent 3px,transparent 6px)}

.pc-vis-leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin-bottom:12px;font-size:10.5px;color:var(--text3)}
.pc-vis-leyenda span{display:flex;align-items:center;gap:5px}
.pc-vis-leyenda .pc-vis-d{width:12px;height:12px;border-radius:3px}

.pc-vis-aviso{display:flex;align-items:flex-start;gap:8px;padding:10px 13px;
  border-radius:var(--r-sm);background:var(--warn-bg);color:var(--warn-txt);font-size:13px;line-height:1.5}

/* Controles de cabecera: comercial y salto de semana. */
.vis-ctrl{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text2)}
.vis-ctrl>span{white-space:nowrap}
.vis-ctrl select,.vis-ctrl input{height:32px;border:0.5px solid var(--border-md);
  border-radius:var(--r-sm);background:var(--surface);color:var(--text);
  padding:0 9px;font:inherit;font-size:12.5px}
.vis-ctrl-semana{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vis-ctrl-ir input{max-width:150px}

/* De quién es la agenda, en botones y no en un desplegable: comerciales hay
   pocos y caben a la vista, y es la pregunta de la que depende todo lo demás en
   esta pantalla (Salva, 20/08/2026). Los mismos botones filtran la lista en la
   pantalla de Clientes, con la cuenta de cada cartera al lado. */
.vis-comerciales{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vis-comerciales-filtro{margin-bottom:12px}
.vis-comercial-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;
  border:0.5px solid var(--border-md);border-radius:99px;background:var(--surface);
  color:var(--text2);font:600 12px/1 Sora,sans-serif;cursor:pointer;white-space:nowrap}
.vis-comercial-btn:hover{border-color:var(--accent);color:var(--text)}
.vis-comercial-btn.is-activo{background:var(--accent);border-color:var(--accent);color:#fff}
.vis-comercial-ini{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--accent-bg);color:var(--accent-txt);font-size:9px;font-weight:700}
.vis-comercial-btn.is-activo .vis-comercial-ini{background:rgba(255,255,255,.25);color:#fff}
.vis-comercial-cuenta{font-size:10.5px;opacity:.75;font-weight:700}

/* El buscador de la ventana de nueva visita: la lista se queda a la vista para
   que se vea cuántos van quedando al escribir. */
/* ── La casilla de cliente, que es a la vez el buscador (21/08/2026) ─────────
   Sustituye a la caja de buscar + `select size=6` siempre abierto. El porqué
   está en `visitas.js`, encima de `engancharBuscadorDeCliente`. */
.vis-combo{position:relative}
.vis-combo>.ti{position:absolute;left:10px;top:15px;transform:translateY(-50%);
  color:var(--text3);font-size:15px;pointer-events:none}
.vis-combo input{padding-left:31px!important;padding-right:34px!important;
  text-overflow:ellipsis}
.vis-combo-flecha{position:absolute;right:1px;top:1px;width:32px;height:28px;
  display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:none;
  color:var(--text2);cursor:pointer;font-size:16px}
.vis-combo-flecha:hover{color:var(--accent)}
.vis-combo input[aria-expanded="true"]+.vis-combo-flecha .ti{transform:rotate(180deg)}
/* La lista va POR ENCIMA y no empujando el formulario hacia abajo: si empujara,
   el día y las horas se moverían de sitio cada vez que se escribe una letra. */
.vis-combo-lista{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 4px);
  max-height:238px;overflow-y:auto;padding:4px;margin:0;list-style:none;
  background:var(--surface);border:1px solid var(--border-md);border-radius:var(--r-sm);
  box-shadow:0 8px 24px rgba(20,20,15,.18)}
.vis-combo-op{padding:7px 9px;border-radius:6px;font-size:12.5px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vis-combo-op:hover,.vis-combo-op.is-activo{background:var(--accent-bg);color:var(--accent)}
/* El que ya está puesto lleva su marca aunque no sea el que se está recorriendo
   con las flechas: son dos cosas distintas y en una lista de 199 se agradece. */
.vis-combo-op[aria-selected="true"]{font-weight:700}
.vis-combo-op[aria-selected="true"]::after{content:'✓';float:right;margin-left:8px}
.vis-combo-vacio{padding:9px;font-size:12.5px;color:var(--text3);text-align:center}

/* ── Apuntes libres (21/08/2026) ──────────────────────────────────────────── */
/* Las dos pestañas del alta: un cliente de la cartera, o un apunte suelto. Van
   arriba y con el mismo peso las dos — el apunte no es un caso raro escondido
   detrás de un enlace, es la otra mitad de lo que se apunta en la agenda. */
.vis-modo{display:flex;gap:6px;margin-bottom:14px}
.vis-modo-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  height:36px;border:0.5px solid var(--border-md);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text2);font:600 12.5px Sora,sans-serif;cursor:pointer;
  transition:border-color .12s,background .12s,color .12s}
.vis-modo-btn:hover{border-color:var(--accent);color:var(--accent)}
.vis-modo-btn.is-activo{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-txt)}

/* Donde un cliente lleva su número, un apunte lleva su etiqueta: en una lista de
   doce visitas hay que ver de un golpe cuál no es un cliente. */
.vis-cli-num.es-apunte{padding:1px 7px;border-radius:99px;background:var(--surface2);
  color:var(--text2);font-weight:600}
.vis-cli-num.es-apunte .ti{font-size:11px;margin-right:2px}

/* Una reserva no es una cita confirmada. Ámbar y rayas: ni gris de cancelación
   ni color a secas, porque tiene que seguir diciéndolo en pantallas flojas. */
.vis-fila.es-provisional{border-left:3px solid var(--warn);background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 5px,var(--warn-bg) 5px,var(--warn-bg) 7px)}
.vis-chip-provisional{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:2px 7px;border-radius:99px;
  background:var(--warn-bg);color:var(--warn-txt);font-size:10.5px;font-weight:700;white-space:nowrap}
.vis-chip-provisional .ti{font-size:12px}
.vis-confirmada{grid-column:1/-1;display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid var(--border-md);
  border-radius:var(--r-sm);cursor:pointer;background:var(--surface2)}
.vis-confirmada input{margin-top:3px;accent-color:var(--accent)}
.vis-confirmada b,.vis-confirmada small{display:block}
.vis-confirmada b{font:600 12.5px/1.3 Sora,sans-serif;color:var(--text)}
.vis-confirmada small{margin-top:2px;font-size:11.5px;color:var(--text2)}
.btn-outline.btn-xs.is-activo{border-color:var(--warn);background:var(--warn-bg);color:var(--warn-txt)}

/* ═══════════════════════════════════════════════════════════════════════════
   VISITAS · el papel
   Estos estilos NO son para la pantalla: se pintan dentro de `#print-root`, que
   solo es visible en el diálogo de imprimir. Van en negro sobre blanco a
   propósito y sin variables de tema: una hoja no tiene modo oscuro.

   POR QUÉ `:is(#print-root,.vimp-papel)` Y NO SOLO `#print-root` (21/08/2026):
   la previsualización «Así va a salir» del cuadro de imprimir pinta EL MISMO
   HTML, pero cuelga del modal, que va pegado a `body` y no dentro de
   `#print-root`. Con la regla atada solo al id, ninguna alcanzaba a la previa:
   se veía el texto en crudo, con la letra del navegador, y prometía una hoja
   que no era la que salía. `:is()` conserva la especificidad del id, así que no
   cambia nada de lo que ya funcionaba en el papel.
   ═══════════════════════════════════════════════════════════════════════════ */
/* `print-color-adjust:exact` NO es decorativo (21/08/2026): sin él Chrome tira
   los fondos al imprimir salvo que el que imprime marque «Gráficos de fondo» en
   el diálogo, y nadie lo marca. Es lo que dejó invisible la banda del día —
   fondo negro fuera, letra blanca sobre blanco— y, antes de eso, lo que hacía
   que la banda gris de siempre no llegara nunca al papel. Aun así, NADA de esta
   hoja puede depender de que esto funcione: mira el comentario de
   `.vp-dia-titulo`. */
:is(#print-root,.vimp-papel) .vp-hoja{background:#fff;color:#000;font-family:'Sora',system-ui,sans-serif;
  padding:0;page-break-after:always;break-after:page;
  print-color-adjust:exact;-webkit-print-color-adjust:exact}
:is(#print-root,.vimp-papel) .vp-hoja:last-child{page-break-after:auto;break-after:auto}

:is(#print-root,.vimp-papel) .vp-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding-bottom:10px;border-bottom:2.5px solid #000;margin-bottom:16px}
:is(#print-root,.vimp-papel) .vp-cab h1{font-size:26px;font-weight:800;letter-spacing:-.02em}
:is(#print-root,.vimp-papel) .vp-sub{font-size:13px;color:#444;margin-top:2px}
:is(#print-root,.vimp-papel) .vp-cab-der{text-align:right}
:is(#print-root,.vimp-papel) .vp-comercial{display:block;font-size:15px;font-weight:700}
:is(#print-root,.vimp-papel) .vp-cuenta{display:block;font-size:12px;color:#444}

:is(#print-root,.vimp-papel) .vp-dia{margin-bottom:14px;page-break-inside:avoid;break-inside:avoid}
:is(#print-root,.vimp-papel) .vp-dia+.vp-dia{margin-top:18px}
/* El día manda sobre su tabla (Salva, 21/08/2026). Primero solo se subió de 13 a
   16px sobre la banda gris de siempre, y no bastaba: los nombres de los clientes
   van en negrilla, así que a igualdad de tono el ojo no encontraba dónde
   empezaba cada día.
   SE ARREGLA REFORZANDO EL DÍA, NO DEBILITANDO A LOS CLIENTES. La otra salida
   era quitarle la negrilla a los nombres, y es peor: el nombre es lo que se
   busca dentro de cada día, y dejarlo en letra fina para que destaque su
   cabecera cambia la jerarquía por el lado equivocado.

   EL PRIMER INTENTO FUE BANDA NEGRA CON LETRA BLANCA, Y EN EL PAPEL DESAPARECÍA
   (Salva, 21/08/2026): Chrome no imprime los fondos si no marcas «Gráficos de
   fondo», así que se iba el negro y quedaba letra blanca sobre blanco. Invisible
   del todo — peor que el problema que venía a arreglar. Y explica el problema de
   origen: la banda gris de siempre tampoco llegaba nunca al papel.

   DE AHÍ LA REGLA DE ESTA HOJA: **ningún dato puede depender de un fondo.** El
   día se marca con RAYAS Y LETRA NEGRA, que se imprimen siempre pase lo que
   pase, y el fondo gris se queda solo como mejora si el navegador lo pinta. Si
   sale, es una banda gris enmarcada; si no sale, siguen estando las dos rayas y
   la letra grande. En los dos casos se ve dónde empieza el día. */
:is(#print-root,.vimp-papel) .vp-dia-titulo{font-size:16px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;padding:5px 8px 4px;color:#000;background:#E8E8E2;
  border-top:3px solid #000;border-bottom:1.5px solid #000;margin-bottom:6px}
:is(#print-root,.vimp-papel) .vp-tabla{width:100%;border-collapse:collapse;table-layout:fixed}
:is(#print-root,.vimp-papel) .vp-tabla td{padding:7px 8px;border-bottom:1px solid #DDD;vertical-align:top;font-size:12.5px}
:is(#print-root,.vimp-papel) .vp-hora{width:50px;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
:is(#print-root,.vimp-papel) .vp-cli b{display:block;font-size:14px;font-weight:700}
:is(#print-root,.vimp-papel) .vp-cli em{display:block;font-size:11.5px;color:#444;font-style:italic;margin-top:1px}
:is(#print-root,.vimp-papel) .vp-cli .vp-provisional{font-weight:800;color:#7C2D12;text-transform:uppercase}
:is(#print-root,.vimp-papel) .vp-donde{width:132px;color:#333}
:is(#print-root,.vimp-papel) .vp-quien{width:112px;color:#333}
:is(#print-root,.vimp-papel) .vp-tel{width:148px;font-variant-numeric:tabular-nums;word-break:break-word}

/* ── La hoja de visita ───────────────────────────────────────────────────── */
/* Aire por los lados (Salva, 21/08/2026): con los 14mm de `@page` la hoja salía
   a sangre y el renglón llegaba al filo del folio. Se probó con 9mm —23mm en
   total— y se pasaba: el texto se metía demasiado hacia dentro y la hoja
   encogía. Se dejan en 4,5mm, justo a medio camino entre los 14 de antes y los
   23 de la primera prueba. Van en la hoja y no en `@page` porque `@page` es de
   todo el portal —lo comparten el Informe para Laboral y el Panel— y esto es de
   este papel. Solo en la hoja del día: el plan es una tabla y ahí el ancho se
   aprovecha. */
:is(#print-root,.vimp-papel) .vh-hoja{padding-left:4.5mm;padding-right:4.5mm}
:is(#print-root,.vimp-papel) .vh-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding-bottom:10px;border-bottom:2.5px solid #000}
:is(#print-root,.vimp-papel) .vh-num{font-size:11px;font-weight:700;color:#666;letter-spacing:.08em}
/* Las dos cosas que se buscan en el papel antes de entrar son de quién es la
   casa y por quién preguntar (Salva, 21/08/2026). El nombre sube de 22 a 28px;
   el contacto va en negrilla, y eso lo pone `hojaVisitaHTML` con un `<b>`. */
:is(#print-root,.vimp-papel) .vh-cab h1{font-size:28px;font-weight:800;line-height:1.12;letter-spacing:-.02em;margin-top:2px}
:is(#print-root,.vimp-papel) .vh-dir{font-size:12px;color:#444;margin-top:3px}
:is(#print-root,.vimp-papel) .vh-cab-cita{text-align:right;white-space:nowrap}
:is(#print-root,.vimp-papel) .vh-dia{display:block;font-size:12px;color:#444}
:is(#print-root,.vimp-papel) .vh-hora{display:block;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
:is(#print-root,.vimp-papel) .vh-comercial{display:block;font-size:11.5px;color:#444;margin-top:2px}
:is(#print-root,.vimp-papel) .vh-provisional{display:inline-block;margin-top:5px;padding:2px 5px;border:1.5px solid #7C2D12;
  color:#7C2D12;font-size:9px;font-weight:800;letter-spacing:.08em}

:is(#print-root,.vimp-papel) .vh-datos{display:flex;gap:26px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid #DDD}
:is(#print-root,.vimp-papel) .vh-datos dt{font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:#777}
:is(#print-root,.vimp-papel) .vh-datos dd{font-size:12.5px;margin-top:1px}
:is(#print-root,.vimp-papel) .vh-motivo,:is(#print-root,.vimp-papel) .vh-notas{font-size:12.5px;padding:6px 9px;margin-top:8px;
  border-left:3px solid #000;background:#F4F4F0}
:is(#print-root,.vimp-papel) .vh-notas{border-left-color:#B45309}

:is(#print-root,.vimp-papel) .vh-bloque{margin-top:12px;page-break-inside:avoid;break-inside:avoid}
:is(#print-root,.vimp-papel) .vh-bloque h3{font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:#555;margin-bottom:3px}
/* Las líneas para escribir a mano. 8mm entre renglones: menos y no cabe una
   letra normal de adulto con prisa. */
:is(#print-root,.vimp-papel) .vh-pauta span{display:block;height:8mm;border-bottom:1px solid #CFCFC8}
:is(#print-root,.vimp-papel) .vh-proxima-campos{display:flex;gap:22px;margin-top:2px}
:is(#print-root,.vimp-papel) .vh-proxima-campos label{flex:1;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:#555}
:is(#print-root,.vimp-papel) .vh-proxima-campos span{display:block;height:8mm;border-bottom:1px solid #CFCFC8;margin-top:2px}

@media print{
  /* El taco de visitas usa el mismo `#print-root` que el Informe de Laboral,
     pero con márgenes propios: la hoja de visita necesita el folio entero. */
  body.vis-print #print-root{padding:0}
  @page{margin:14mm}
}

/* ── INFORMACIÓN · Teléfonos ─────────────────────────────────────────────────
   Escritorio primero: la agenda se consulta con la web abierta al lado, y ahí
   una tabla se lee de un vistazo. Por debajo de 900px cada fila se convierte en
   una tarjeta con las etiquetas delante, porque siete columnas en un móvil no
   son una tabla: son un churro que hay que arrastrar a los lados. */

.info-filtros{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.info-buscador{position:relative;flex:1;min-width:240px}
.info-buscador i{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--text3);font-size:16px;pointer-events:none}
.info-buscador input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--border-md);
  border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-size:14px}
.info-buscador input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.info-filtros select{padding:9px 10px;border:1px solid var(--border-md);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font-size:14px}
.info-cuenta{font-size:12px;color:var(--text2);white-space:nowrap}

/* La tabla puede desbordar a lo ancho en pantallas justas; que lo haga DENTRO
   de su caja y no arrastrando la página entera. */
.info-tabla-caja{overflow-x:auto}
.info-tabla{width:100%;border-collapse:collapse;font-size:14px}
.info-tabla thead th{position:sticky;top:0;z-index:2;background:var(--surface);
  text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);padding:8px 10px;border-bottom:1px solid var(--border-md);white-space:nowrap}
.info-tabla td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.info-tabla tbody tr:hover td{background:var(--surface2)}

/* La fila de título de departamento. Es un `th` dentro del cuerpo: hace de
   separador y de encabezado sin repetir la cabecera de columnas catorce veces. */
.info-tabla .info-grupo th{position:sticky;top:31px;z-index:1;
  background:var(--accent-bg);color:var(--accent-txt);
  text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:6px 10px;border-bottom:1px solid var(--border)}
.info-tabla .info-grupo th span{opacity:.65;font-weight:600;margin-left:6px}
.info-tabla .info-grupo:hover th{background:var(--accent-bg)}

.info-enlace{display:inline-flex;align-items:center;gap:5px;color:var(--accent2);
  text-decoration:none;border-radius:var(--r-sm);padding:2px 4px;margin:-2px -4px;white-space:nowrap}
.info-enlace:hover{background:var(--surface2);text-decoration:underline}
.info-enlace i{font-size:14px;opacity:.6}
.info-plano{color:var(--text2)}
.info-vacio{color:var(--text3)}
.info-acciones{white-space:nowrap;text-align:right}
.info-acciones .btn{margin-left:4px}
.info-nada{color:var(--text2);padding:18px 4px;text-align:center}

@media(max-width:900px){
  .info-tabla,.info-tabla tbody,.info-tabla tr,.info-tabla td{display:block;width:100%}
  .info-tabla thead{display:none}
  .info-tabla tbody{margin-bottom:10px}
  .info-tabla .info-grupo th{display:block;position:static;border-radius:var(--r-sm)}
  .info-tabla tr:not(.info-grupo){border:1px solid var(--border);border-radius:var(--r-sm);
    padding:8px 10px;margin-top:8px;background:var(--surface)}
  .info-tabla td{border:none;padding:3px 0;display:flex;gap:10px;align-items:baseline}
  /* Sin la cabecera de columnas, cada dato necesita decir qué es. */
  .info-tabla td::before{content:attr(data-col);flex:0 0 104px;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;color:var(--text3)}
  .info-tabla td[data-col="Nombre"]{font-size:15px;padding-bottom:6px}
  .info-tabla td[data-col="Nombre"]::before{display:none}
  .info-tabla .info-acciones{justify-content:flex-end;padding-top:6px}
  .info-tabla .info-acciones::before{display:none}
  .info-tabla tbody tr:hover td{background:transparent}
}

/* ── INFORMACIÓN · correcciones propuestas ───────────────────────────────────
   La cola de Merxe encima de la lista, y el aviso de en qué quedó lo tuyo. */

.info-revision{margin-bottom:12px;border-left:3px solid var(--accent)}
.info-rev-lista{display:grid;gap:10px}
.info-rev-card{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface2)}
.info-rev-card header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.info-rev-tipo{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  padding:2px 7px;border-radius:999px}
.info-rev-cambio{background:var(--info-bg);color:var(--info-txt)}
.info-rev-alta{background:var(--accent-bg);color:var(--accent-txt)}
.info-rev-baja{background:var(--danger-bg);color:var(--danger-txt)}
.info-rev-quien{font-size:12px;color:var(--text2)}
.info-rev-cambios{list-style:none;display:grid;gap:4px;font-size:13px}
.info-rev-cambios li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.info-rev-campo{flex:0 0 118px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text3)}
.info-rev-antes{color:var(--text2);text-decoration:line-through}
.info-rev-despues{color:var(--text);font-weight:700}
.info-rev-cambios i{font-size:13px;color:var(--text3)}
.info-rev-nada{font-size:13px;color:var(--text2)}
.info-rev-card footer{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}

/* «En revisión» junto al nombre. Deliberadamente discreto: la fila sigue
   diciendo el número que vale hoy, y esto es una nota al margen, no una alarma. */
.info-pendiente{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:999px;
  background:var(--warn-bg);color:var(--warn-txt);vertical-align:middle}
.info-pendiente i{font-size:11px}

.info-avisos{display:grid;gap:6px}
.info-avisos:not(:empty){margin-bottom:12px}
.info-aviso{display:flex;align-items:baseline;gap:7px;font-size:13px;padding:8px 11px;
  border-radius:var(--r-sm);border:1px solid var(--border)}
.info-aviso-ok{background:var(--ok-bg);color:var(--ok-txt)}
.info-aviso-no{background:var(--warn-bg);color:var(--warn-txt)}
/* Un alta esperando. Neutro a propósito: no es ni una buena ni una mala
   noticia, es un «está en camino». */
.info-aviso-espera{background:var(--surface2);color:var(--text2)}
.info-aviso-espera b{color:var(--text)}

@media(max-width:900px){
  .info-rev-campo{flex:0 0 100%}
  .info-rev-card footer{justify-content:stretch}
  .info-rev-card footer .btn{flex:1}
}


/* ── NOTAS Y RECADOS ────────────────────────────────────────────────────────
   El bloc de post-it. Una nota es una LÍNEA con una franja de color a la
   izquierda, no un cuadro: en la columna de 270 px de «Mis tareas · hoy» caben
   así tres veces más, y el color se lee igual de bien.                        */
.task-side-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.task-main-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.task-main-col .task-summary-grid{margin-bottom:0}

.notas-body{display:flex;flex-direction:column;gap:12px;padding:14px 16px!important}
.notas-nueva{border:0.5px solid var(--border-md);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.notas-nueva:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.notas-caja{display:block;width:100%;border:0;resize:none;background:transparent;color:var(--text);
  font:400 12px/1.5 Inter,system-ui,sans-serif;padding:10px 12px;min-height:38px;max-height:120px;overflow-y:auto}
.notas-caja:focus{outline:none}
.notas-caja::placeholder{color:var(--text3)}
.notas-nueva-pie{display:flex;align-items:center;gap:8px;
  padding:6px 8px 6px 12px;border-top:0.5px solid var(--border);background:var(--surface2)}
.notas-nueva-pie .notas-colores{margin-right:auto}
.notas-colores{display:flex;gap:6px}
.notas-color{width:15px;height:15px;border-radius:50%;border:1.5px solid transparent;cursor:pointer;padding:0}
.notas-color.is-amarillo{background:var(--nota-amarillo)}
.notas-color.is-rosa{background:var(--nota-rosa)}
.notas-color.is-azul{background:var(--nota-azul)}
.notas-color.is-verde{background:var(--nota-verde)}
.notas-color[aria-pressed="true"]{border-color:var(--text);transform:scale(1.15)}
.notas-para{font:500 10px/1.2 Sora,sans-serif;border:0.5px solid var(--border-md);border-radius:6px;
  background:var(--surface);color:var(--text2);padding:4px 6px;max-width:130px}
/* El botón de guardar va A LA DERECHA DEL TODO y no entre los colores y el
   desplegable: en medio quedaría flotando, y el sitio donde todo el mundo busca
   un «enviar» es el final de la fila. Enter sigue funcionando; el botón está
   para quien no lo sepa y para cuando el foco se ha ido al desplegable. */
.notas-nueva-pie .notas-guardar{display:grid;place-items:center;width:26px;height:23px;flex:0 0 auto;
  border:0;border-radius:6px;cursor:pointer;background:var(--accent);color:#fff}
.notas-nueva-pie .notas-guardar i{font-size:14px}
.notas-nueva-pie .notas-guardar:hover{filter:brightness(1.08)}

.notas-lista{display:flex;flex-direction:column;gap:6px}
/* En la tarjeta salen TODAS las pendientes, sin tope ni «ver más». Lo único que
   las contiene es este alto: veinte notas no pueden empujar la página entera. */
.notas-card .notas-lista{max-height:min(64vh,640px);overflow-y:auto;margin-right:-4px;padding-right:4px}

.nota{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border-radius:var(--r-sm);
  border:0.5px solid var(--border);border-left:3px solid var(--nota-amarillo);background:var(--nota-amarillo-bg)}
.nota.is-rosa{border-left-color:var(--nota-rosa);background:var(--nota-rosa-bg)}
.nota.is-azul{border-left-color:var(--nota-azul);background:var(--nota-azul-bg)}
.nota.is-verde{border-left-color:var(--nota-verde);background:var(--nota-verde-bg)}
.nota.is-fijada{border-left-width:6px}
.nota.is-hecha{background:var(--surface2);border-left-color:var(--border-md)}
.nota.is-hecha .nota-texto{text-decoration:line-through;color:var(--text3)}
.nota.is-solo-lectura,.nota.is-enviada{padding-left:11px}
/* Un recado que ya te han acusado se apaga: sigue ahí —que es lo que faltaba,
   porque una desaparición no se ve— pero deja de pedir nada. */
.nota.is-enviada.is-visto{background:var(--surface2);border-left-color:var(--border-md)}
.nota-acuse{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:99px;
  background:var(--surface2);color:var(--text2)}
.nota-acuse.is-visto{background:var(--st-ok-bg);color:var(--st-ok-tx)}
/* Un teléfono escrito en una nota se marca de un clic, igual que en la página
   de teléfonos: `tel:` lo entienden el móvil, el softphone y el ordenador. */
.nota-tel{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.nota-tel:hover{color:var(--accent);text-decoration-style:solid}

.nota-check{flex:0 0 auto;width:19px;height:19px;margin-top:1px;border-radius:50%;padding:0;cursor:pointer;
  display:grid;place-items:center;background:var(--surface);border:1.5px solid var(--border-md);color:transparent}
.nota-check i{font-size:12px}
.nota-check:hover{border-color:var(--st-ok-tx);color:var(--text3)}
.nota-check[aria-pressed="true"]{background:var(--st-ok-bg);border-color:var(--st-ok-bg);color:var(--st-ok-tx)}
.nota-cuerpo{flex:1;min-width:0}
.nota-texto{font:400 12px/1.45 Inter,system-ui,sans-serif;color:var(--text);margin:0;
  overflow-wrap:anywhere;white-space:pre-wrap}
.nota-texto[data-nota-editar]{cursor:text;border-radius:4px}
.nota-texto[data-nota-editar]:hover{background:rgba(125,125,125,.10)}
.nota.is-fijada .nota-pie i.ti-flag{color:var(--nota-amarillo)}
.nota-pie{font:500 9px/1.3 Sora,sans-serif;color:var(--text3);margin:5px 0 0;
  display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nota-editar{width:100%;border:0.5px solid var(--accent);border-radius:6px;background:var(--surface);color:var(--text);
  font:400 12px/1.45 Inter,system-ui,sans-serif;padding:6px 8px;resize:none;max-height:120px}
.nota-editar:focus{outline:none;box-shadow:0 0 0 3px var(--accent-bg)}
/* «Gracias» solo sale en un recado que todavía no has acusado, y desaparece en
   cuanto lo pulsas. No completa la nota: solo avisa al que la mandó. */
.nota-gracias{margin-top:7px;font:600 9px/1 Sora,sans-serif;padding:5px 8px;border-radius:99px;cursor:pointer;
  background:var(--surface);border:0.5px solid var(--border-md);color:var(--text2);display:inline-flex;align-items:center;gap:4px}
.nota-gracias:hover{border-color:var(--accent);color:var(--accent)}

.nota-acciones{display:flex;gap:2px;flex:0 0 auto;opacity:0;transition:opacity .15s}
.nota:hover .nota-acciones,.nota:focus-within .nota-acciones{opacity:1}
/* En la página hay sitio de sobra y los botones se ven SIEMPRE: uno que solo
   aparece al pasar el ratón por encima no existe para quien no sabe que está.
   En la tarjeta de 270 px no caben los tres a la vez sin comerse el texto, así
   que allí sí salen al pasar por encima. */
.notas-pagina .nota-acciones{opacity:1}
.nota-accion{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;cursor:pointer;padding:0;
  background:transparent;border:0;color:var(--text3)}
.nota-accion i{font-size:13px}
.nota-accion:hover{background:var(--surface);color:var(--text)}
.nota-accion.is-on{color:var(--nota-amarillo)}
.nota-accion.is-color{opacity:1}
.nota-punto{width:11px;height:11px;border-radius:50%;background:var(--nota-amarillo);display:block}
.nota.is-rosa .nota-punto{background:var(--nota-rosa)}
.nota.is-azul .nota-punto{background:var(--nota-azul)}
.nota.is-verde .nota-punto{background:var(--nota-verde)}
.nota.is-fijada .nota-accion.is-on{color:var(--text)}

.notas-vacio,.notas-ayuda{font-size:11px;line-height:1.55;color:var(--text3);margin:0;padding:4px 2px}
.notas-ayuda{padding-bottom:8px}
/* Va donde se escribe, no en un pie de página: si alguien se entera de que la
   responsable lo lee tres semanas después, vuelve al papel el mismo día. */
.notas-privacidad{font:500 9px/1.3 Sora,sans-serif;color:var(--text3);margin:0;
  display:flex;align-items:center;gap:5px}
.notas-privacidad i{font-size:11px}

/* La página de Notas, a dos columnas y no a tres (5/09/2026).
   Los tres bloques NO pesan lo mismo y ponerlos en tercios iguales diría que sí:
   «Pendientes» es el único donde se ESCRIBE —lleva la caja— y el único que se
   mira a menudo; los recados enviados se consultan de reojo («¿lo ha visto?») y
   las completadas son un archivo. Así que la principal se lleva más ancho y las
   dos de consulta se apilan al lado, que además llena la página igual. */
.notas-pagina{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:14px;align-items:start;max-width:1180px}
.notas-col-lado{display:flex;flex-direction:column;gap:14px;min-width:0}
.notas-pagina .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.notas-pagina .card-head b{color:var(--text3);font-weight:600}

/* La pantalla de la responsable: una tarjeta por persona, como el Panel. */
.notas-equipo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.notas-persona{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r);padding:14px 16px}
.notas-persona-cab{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.notas-persona-cab strong{display:block;font:700 12px/1.3 Sora,sans-serif;color:var(--text)}
.notas-persona-cab span{display:block;font-size:9px;color:var(--text3);margin-top:2px}
.notas-persona-lista{display:flex;flex-direction:column;gap:6px}
.notas-sin-nada{margin-top:16px;font-size:11px;color:var(--text3)}
.notas-sin-nada summary{cursor:pointer;font:600 11px/1.4 Sora,sans-serif}
.notas-sin-nada p{margin:8px 0 0;line-height:1.6}

/* El aviso del Panel: una línea, y solo si hay algo que decir. */
.notas-aviso{display:flex;align-items:center;gap:9px;width:100%;cursor:pointer;text-align:left;
  padding:10px 14px;margin-bottom:12px;border-radius:var(--r-sm);
  background:var(--surface);border:0.5px solid var(--border-md);color:var(--text2);font-size:12px}
.notas-aviso:hover{border-color:var(--accent);color:var(--text)}
.notas-aviso span{flex:1}
.notas-aviso b{color:var(--text)}

/* El aviso de abajo con «Deshacer». Sin `pointer-events` el botón se pinta y no
   se puede pulsar: `.toast` es transparente a los clics a propósito. */
.toast.has-accion{pointer-events:auto;display:inline-flex;align-items:center;gap:12px}
.toast-accion{background:transparent;border:0;cursor:pointer;padding:2px 4px;
  font:700 12px/1 Sora,sans-serif;color:var(--bg);text-decoration:underline;text-underline-offset:2px}

@media(max-width:980px){
  /* En móvil el bloc baja por debajo de las tareas, que es el orden natural:
     primero lo que hay que hacer, después lo que uno se apunta. Y la página de
     Notas vuelve a una sola columna, en el orden en que importan. */
  .task-side-col{flex-direction:column}
  .notas-card .notas-lista{max-height:none}
  .notas-pagina{grid-template-columns:minmax(0,1fr);max-width:none}
}