/* Design tokens. :root is the LIGHT theme (the default). Every colour of the stylesheet lives in a token; no rule below may
   hold a colour literal (ThemeStylesheetTests enforces it). */
:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --text: #1f2933;
    --muted: #616e7c;
    --border: #d9dee4;
    --border-strong: #c3cad3;
    /* --accent is a FILL (buttons, avatar) and always carries --on-accent text; --accent-text is the accent used as
       text, links, rings and the active nav item. */
    --accent: #1d4ed8;
    --accent-hover: #1e40af;
    --accent-text: #1d4ed8;
    --accent-soft: rgba(29, 78, 216, 0.09);
    --on-accent: #fff;
    --sidebar-w: 15rem;
    --sidebar-w-collapsed: 4.25rem;
    --sidebar-current-w: var(--sidebar-w);
    --sidebar-bg: var(--surface);
    --sidebar-text: var(--text);
    --sidebar-muted: var(--muted);
    --sidebar-border: var(--border);
    --sidebar-hover: #eef1f5;
    --alta-bg: #fde2e2;
    --alta-fg: #a11919;
    --media-bg: #fdf0c9;
    --media-fg: #7a5200;
    --baja-bg: #dcf3e2;
    --baja-fg: #1e6b34;
    --danger: #a11919;
    --danger-hover: #7f1414;
    --ok-border: #1e6b34;
    --warn-border: #b7791f;
    --info-bg: #e8effd;
    --info-fg: #1e3a8a;
    --info-border: #c3d3f7;
    --banner-bg: #fff3cd;
    --banner-fg: #664d03;
    --chip-bg: rgba(255, 255, 255, 0.6);
    --input-bg: #ffffff;
    --input-border: var(--border);
    --shadow-menu: rgba(15, 23, 42, 0.16);
    --shadow-dialog: rgba(0, 0, 0, 0.25);
    --shadow-toast: rgba(0, 0, 0, 0.2);
    --overlay: rgba(31, 41, 51, 0.55);
    --overlay-nav: rgba(8, 12, 24, 0.55);
    /* Oficina (office) palette: a soft fill, readable text on it and a border, one trio per palette key. */
    --oficina-azul-bg: #e0ebff;
    --oficina-azul-fg: #1e3a8a;
    --oficina-azul-borde: #9db8f2;
    --oficina-verde-bg: #dcf3e2;
    --oficina-verde-fg: #1e6b34;
    --oficina-verde-borde: #8fcfa3;
    --oficina-ambar-bg: #fdf0c9;
    --oficina-ambar-fg: #7a5200;
    --oficina-ambar-borde: #e3c46a;
    --oficina-violeta-bg: #ece4fb;
    --oficina-violeta-fg: #5b2a9e;
    --oficina-violeta-borde: #c0a6ec;
    --oficina-rojo-bg: #fde2e2;
    --oficina-rojo-fg: #a11919;
    --oficina-rojo-borde: #eba3a3;
    --oficina-turquesa-bg: #d8f3f1;
    --oficina-turquesa-fg: #0f5f5a;
    --oficina-turquesa-borde: #86d0ca;
    --oficina-rosa-bg: #fde4ef;
    --oficina-rosa-fg: #9d174d;
    --oficina-rosa-borde: #f0a6c6;
    --oficina-gris-bg: #e8ebef;
    --oficina-gris-fg: #3d4852;
    --oficina-gris-borde: #b9c1cb;
    --dia-trabajado-bg: #e0ebff;
    --dia-trabajado-fg: #1e3a8a;
    --dia-trabajado-borde: #9db8f2;
    --dia-falta-bg: #fde2e2;
    --dia-falta-fg: #a11919;
    --dia-falta-borde: #eba3a3;
    --dia-vacaciones-bg: #dcf3e2;
    --dia-vacaciones-fg: #1e6b34;
    --dia-vacaciones-borde: #8fcfa3;
    --dia-licencia-bg: #ece4fb;
    --dia-licencia-fg: #5b2a9e;
    --dia-licencia-borde: #c0a6ec;
    --dia-feriado-bg: #ffe9d6;
    --dia-feriado-fg: #8a3b00;
    --dia-feriado-borde: #f0b483;
    color-scheme: light;
}

/* DARK theme. The explicit choice (data-tema="oscuro") and the automatic one (data-tema="auto" while the system prefers
   dark) declare the SAME tokens; CSS cannot share one block between a plain rule and a media query, so the list is
   repeated and ThemeStylesheetTests fails if the two ever differ. No data-tema (or "claro") = the light tokens above. */
html[data-tema='oscuro'] {
    color-scheme: dark;
    --bg: #0f141c;
    --surface: #171d28;
    --text: #e6e9ef;
    --muted: #9aa4b2;
    --border: #2b3442;
    --border-strong: #3a4658;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-text: #8ab4ff;
    --accent-soft: rgba(138, 180, 255, 0.14);
    --on-accent: #fff;
    --sidebar-hover: #202938;
    --alta-bg: #3a1a1f;
    --alta-fg: #ffb4b4;
    --media-bg: #3a2d10;
    --media-fg: #f5d27a;
    --baja-bg: #15301f;
    --baja-fg: #8fe3a4;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --ok-border: #3fb765;
    --warn-border: #d69e2e;
    --info-bg: #16264a;
    --info-fg: #a9c8ff;
    --info-border: #2f4a85;
    --banner-bg: #3a2d10;
    --banner-fg: #f5d27a;
    --chip-bg: rgba(0, 0, 0, 0.25);
    --input-bg: #0f141c;
    --input-border: #5f6b80;
    --shadow-menu: rgba(0, 0, 0, 0.5);
    --shadow-dialog: rgba(0, 0, 0, 0.6);
    --shadow-toast: rgba(0, 0, 0, 0.5);
    --overlay: rgba(0, 0, 0, 0.6);
    --overlay-nav: rgba(0, 0, 0, 0.6);
    --oficina-azul-bg: #16264a;
    --oficina-azul-fg: #a9c8ff;
    --oficina-azul-borde: #2f4a85;
    --oficina-verde-bg: #15301f;
    --oficina-verde-fg: #8fe3a4;
    --oficina-verde-borde: #2c6b43;
    --oficina-ambar-bg: #3a2d10;
    --oficina-ambar-fg: #f5d27a;
    --oficina-ambar-borde: #7a5f1d;
    --oficina-violeta-bg: #2a1e4a;
    --oficina-violeta-fg: #cdb4ff;
    --oficina-violeta-borde: #5a42a0;
    --oficina-rojo-bg: #3a1a1f;
    --oficina-rojo-fg: #ffb4b4;
    --oficina-rojo-borde: #7d3038;
    --oficina-turquesa-bg: #11332f;
    --oficina-turquesa-fg: #8ee6dc;
    --oficina-turquesa-borde: #1f6b64;
    --oficina-rosa-bg: #3d1a2c;
    --oficina-rosa-fg: #ffb3d1;
    --oficina-rosa-borde: #7d3358;
    --oficina-gris-bg: #232a35;
    --oficina-gris-fg: #c5ccd6;
    --oficina-gris-borde: #475264;
    --dia-trabajado-bg: #16264a;
    --dia-trabajado-fg: #a9c8ff;
    --dia-trabajado-borde: #2f4a85;
    --dia-falta-bg: #3a1a1f;
    --dia-falta-fg: #ffb4b4;
    --dia-falta-borde: #7d3038;
    --dia-vacaciones-bg: #15301f;
    --dia-vacaciones-fg: #8fe3a4;
    --dia-vacaciones-borde: #2c6b43;
    --dia-licencia-bg: #2a1e4a;
    --dia-licencia-fg: #cdb4ff;
    --dia-licencia-borde: #5a42a0;
    --dia-feriado-bg: #3d2512;
    --dia-feriado-fg: #ffc38f;
    --dia-feriado-borde: #8a5428;
}

@media (prefers-color-scheme: dark) {
    html[data-tema='auto'] {
        color-scheme: dark;
        --bg: #0f141c;
        --surface: #171d28;
        --text: #e6e9ef;
        --muted: #9aa4b2;
        --border: #2b3442;
        --border-strong: #3a4658;
        --accent: #2563eb;
        --accent-hover: #1d4ed8;
        --accent-text: #8ab4ff;
        --accent-soft: rgba(138, 180, 255, 0.14);
        --on-accent: #fff;
        --sidebar-hover: #202938;
        --alta-bg: #3a1a1f;
        --alta-fg: #ffb4b4;
        --media-bg: #3a2d10;
        --media-fg: #f5d27a;
        --baja-bg: #15301f;
        --baja-fg: #8fe3a4;
        --danger: #dc2626;
        --danger-hover: #b91c1c;
        --ok-border: #3fb765;
        --warn-border: #d69e2e;
        --info-bg: #16264a;
        --info-fg: #a9c8ff;
        --info-border: #2f4a85;
        --banner-bg: #3a2d10;
        --banner-fg: #f5d27a;
        --chip-bg: rgba(0, 0, 0, 0.25);
        --input-bg: #0f141c;
        --input-border: #5f6b80;
        --shadow-menu: rgba(0, 0, 0, 0.5);
        --shadow-dialog: rgba(0, 0, 0, 0.6);
        --shadow-toast: rgba(0, 0, 0, 0.5);
        --overlay: rgba(0, 0, 0, 0.6);
        --overlay-nav: rgba(0, 0, 0, 0.6);
        --oficina-azul-bg: #16264a;
        --oficina-azul-fg: #a9c8ff;
        --oficina-azul-borde: #2f4a85;
        --oficina-verde-bg: #15301f;
        --oficina-verde-fg: #8fe3a4;
        --oficina-verde-borde: #2c6b43;
        --oficina-ambar-bg: #3a2d10;
        --oficina-ambar-fg: #f5d27a;
        --oficina-ambar-borde: #7a5f1d;
        --oficina-violeta-bg: #2a1e4a;
        --oficina-violeta-fg: #cdb4ff;
        --oficina-violeta-borde: #5a42a0;
        --oficina-rojo-bg: #3a1a1f;
        --oficina-rojo-fg: #ffb4b4;
        --oficina-rojo-borde: #7d3038;
        --oficina-turquesa-bg: #11332f;
        --oficina-turquesa-fg: #8ee6dc;
        --oficina-turquesa-borde: #1f6b64;
        --oficina-rosa-bg: #3d1a2c;
        --oficina-rosa-fg: #ffb3d1;
        --oficina-rosa-borde: #7d3358;
        --oficina-gris-bg: #232a35;
        --oficina-gris-fg: #c5ccd6;
        --oficina-gris-borde: #475264;
        --dia-trabajado-bg: #16264a;
        --dia-trabajado-fg: #a9c8ff;
        --dia-trabajado-borde: #2f4a85;
        --dia-falta-bg: #3a1a1f;
        --dia-falta-fg: #ffb4b4;
        --dia-falta-borde: #7d3038;
        --dia-vacaciones-bg: #15301f;
        --dia-vacaciones-fg: #8fe3a4;
        --dia-vacaciones-borde: #2c6b43;
        --dia-licencia-bg: #2a1e4a;
        --dia-licencia-fg: #cdb4ff;
        --dia-licencia-borde: #5a42a0;
        --dia-feriado-bg: #3d2512;
        --dia-feriado-fg: #ffc38f;
        --dia-feriado-borde: #8a5428;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 16px;
}

h1 { font-size: 1.5rem; margin: 0 0 1rem; }

a { color: var(--accent-text); }

/* Simple header of the account pages (login, change password, access denied, consent): brand only, no menu. */
.app-header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    height: 3.8rem;
    padding: 0 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.app-brand { font-weight: 600; flex: none; white-space: nowrap; }

/* Menu layout: sidebar | page. The sidebar column is animated; narrow screens switch to a drawer (see the media blocks). */
.app-shell-menu {
    display: grid;
    grid-template-columns: var(--sidebar-current-w) minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns 150ms ease;
}
.app-shell-menu > .app-sidebar { grid-column: 1; grid-row: 1; }
.app-shell-menu > .app-contenido { grid-column: 2; grid-row: 1; }
.app-contenido { min-width: 0; }

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-border);
}
.app-sidebar a { color: var(--sidebar-text); text-decoration: none; }
.app-sidebar :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.sidebar-cabecera { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; margin-bottom: 0.75rem; }
.sidebar-cabecera .app-brand { overflow: hidden; text-overflow: ellipsis; }

/* Rounded-square hamburger; 2.75rem (44px) = the inner width of the collapsed rail and a comfortable touch target. */
.sidebar-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--sidebar-text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
}
.sidebar-toggle:hover { background: var(--sidebar-hover); border-color: var(--border-strong); }

.app-nav { display: flex; flex-direction: column; gap: 0.2rem; }

/* One row per item: line icon (always at the same x, so collapsing does not move it) + label. The horizontal padding is
   (collapsed inner width 2.75rem - icon box 1.5rem) / 2, which centers the icon in the collapsed rail. */
.app-sidebar .app-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.625rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--sidebar-text);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
}
.app-sidebar .app-nav a:hover { background: var(--sidebar-hover); }
/* Active section: translucent accent fill + a rounded 3px bar on the left edge (inset shadow follows the radius). */
.app-sidebar .app-nav a.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent-text); color: var(--accent-text); font-weight: 600; }
.nav-icono {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--sidebar-muted);
}
.nav-icono svg { flex: none; width: 1.25rem; height: 1.25rem; }
.app-sidebar .app-nav a:hover .nav-icono { color: var(--sidebar-text); }
.app-sidebar .app-nav a.active .nav-icono { color: var(--accent-text); }
.icono { flex: none; display: inline-flex; }
.nav-etiqueta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-separador { height: 1px; margin: 0.4rem 0.5rem; background: var(--border); }

.form-salir { margin: 0; }

/* Backdrop only exists on narrow screens. */
.sidebar-backdrop { display: none; }

/* App header: FIXED height, never grows (menus and messages float over the page). On wide screens only the avatar is
   shown (the sidebar has the hamburger and the brand); the left part appears below 900 px. */
.app-cabecera {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.75rem;
    height: 3.5rem;
    padding: 0 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.cabecera-toggle { display: none; }
.cabecera-marca { display: none; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app-cabecera .menu-usuario { margin-left: auto; flex: none; }
/* Bell + avatar are a pair at the right: the auto margin moves to the bell (the first one); without a bell (anonymous pages) the avatar keeps it. */
.app-cabecera .menu-campana { margin-left: auto; flex: none; }
.app-cabecera .menu-campana + .menu-usuario { margin-left: 0; }
/* Admin gear (Administración) sits between the bell and the avatar; the auto margin stays on the first of the group. */
.app-cabecera .menu-admin { margin-left: auto; flex: none; }
.app-cabecera .menu-campana + .menu-admin { margin-left: 0; }
.app-cabecera .menu-admin + .menu-usuario { margin-left: 0; }

/* User menu: initials avatar + caret; the card floats under it. Open state = data-abierto, set only by usermenu.js. */
.menu-usuario { position: relative; }
.avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}
.avatar-grande { width: 3.25rem; height: 3.25rem; font-size: 1.1rem; }
.avatar-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.4rem 0.25rem 0.25rem;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}
.avatar-boton:hover { background: var(--sidebar-hover); }
.avatar-boton:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.avatar-caret { display: inline-flex; color: var(--muted); }
.avatar-caret svg { width: 1rem; height: 1rem; }
.menu-usuario[data-abierto='true'] .avatar-caret svg { transform: rotate(180deg); }

/* Closed = visibility hidden + no height (no focus, no clicks, no room). NOT display: none: the notification toast lives
   inside the card and is position: fixed, so it has to stay visible while the card is closed (it opts back in below).
   overflow: hidden does not clip the fixed toast because the card is not its containing block (no transform/filter here). */
.menu-usuario-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 130;
    width: min(16rem, 92vw);
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
}
.menu-usuario[data-abierto='true'] .menu-usuario-panel {
    visibility: visible;
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    box-shadow: 0 10px 28px var(--shadow-menu);
}
/* Admin gear: a pill with the gear and the "Administración" tag; its card is the avatar's (same .menu-usuario-panel). */
.menu-admin { position: relative; }
.admin-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.25rem;
    padding: 0 0.85rem 0 0.7rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.admin-boton:hover { background: var(--sidebar-hover); color: var(--text); }
.admin-boton:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.admin-boton svg { width: 1.2rem; height: 1.2rem; }
.menu-admin[data-abierto='true'] .admin-boton { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.menu-admin[data-abierto='true'] .menu-usuario-panel {
    visibility: visible;
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    box-shadow: 0 10px 28px var(--shadow-menu);
}
.menu-usuario-panel :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.menu-usuario-perfil { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.75rem 0.5rem; min-width: 0; text-align: center; }
.menu-usuario-nombre { font-weight: 600; overflow-wrap: anywhere; }
.menu-usuario-rol { color: var(--muted); font-size: 0.8rem; }
.menu-usuario-separador { height: 1px; margin: 0.25rem 0; background: var(--border); }
.menu-usuario-item,
.menu-usuario-panel .avisos > .boton {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
}
.menu-usuario-item:hover,
.menu-usuario-panel .avisos > .boton:not(:disabled):hover { background: var(--sidebar-hover); }
.menu-usuario-item:hover .nav-icono,
.menu-usuario-panel .avisos > .boton:not(:disabled):hover .nav-icono { color: var(--text); }
/* Text wraps to two lines instead of being cut. */
.menu-usuario-panel .nav-etiqueta { white-space: normal; overflow-wrap: anywhere; }

/* Theme switcher (Claro / Oscuro / Auto) in the user menu card: a radio group drawn as a segmented control. tema.js owns
   aria-checked and tabindex and un-hides the block; without the script the buttons would do nothing, so it stays hidden. */
.menu-usuario-tema-bloque { padding: 0.25rem 0.5rem 0.4rem; }
.menu-usuario-tema-bloque[hidden] { display: none; }
.menu-usuario-tema-titulo { display: block; padding: 0.25rem 0 0.4rem; color: var(--muted); font-size: 0.8rem; }
.menu-usuario-tema { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--border-strong); border-radius: 10px; }
.tema-opcion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.4rem 0.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
.tema-opcion + .tema-opcion { border-left: 1px solid var(--border-strong); }
.tema-opcion:hover { background: var(--sidebar-hover); }
.tema-opcion[aria-checked='true'] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.tema-icono { display: inline-flex; }
/* Inset ring: the group clips (overflow hidden) anything drawn outside it. */
.menu-usuario-tema .tema-opcion:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }

/* Notification bell (left of the avatar). Open state = data-abierto, set only by usermenu.js (the wrapper is a data-menu-usuario).
   The dot is decorative; the unread count lives in the button's accessible name. Tokens only, so every theme works. */
.menu-campana { position: relative; }
.campana-boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
}
.campana-boton:hover { background: var(--sidebar-hover); }
.campana-boton:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.campana-boton svg { width: 1.35rem; height: 1.35rem; }
.campana-punto {
    position: absolute;
    top: 0.45rem;
    right: 0.5rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 2px var(--surface);
    pointer-events: none;
}
.campana-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 130;
    width: min(22rem, 92vw);
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
}
.menu-campana[data-abierto='true'] .campana-panel {
    visibility: visible;
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    box-shadow: 0 10px 28px var(--shadow-menu);
}
.campana-panel :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.campana-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.5rem 0.5rem; }
.campana-marcar-todas, .campana-mas, .campana-pestanas button {
    padding: 0.35rem 0.6rem;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--accent-text);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
.campana-marcar-todas:hover, .campana-mas:hover:not(:disabled) { background: var(--sidebar-hover); }
.campana-mas { display: block; width: 100%; margin-top: 0.25rem; text-align: center; }
.campana-mas:disabled { color: var(--muted); cursor: default; }
.campana-pestanas { display: flex; gap: 0.25rem; padding: 0 0.5rem 0.5rem; }
.campana-pestanas button { color: var(--muted); }
.campana-pestanas button[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.campana-lista { margin: 0; padding: 0; list-style: none; }
.campana-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.5rem;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
}
.campana-item:hover { background: var(--sidebar-hover); }
.campana-marca { flex: none; width: 0.55rem; height: 0.55rem; margin-top: 0.4rem; border-radius: 50%; background: var(--accent-text); }
.campana-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; overflow-wrap: anywhere; }
.campana-titulo { font-size: 0.9rem; }
.campana-fila-sin-leer .campana-titulo { font-weight: 600; }
.campana-cuerpo { color: var(--muted); font-size: 0.85rem; }
.campana-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; color: var(--muted); font-size: 0.75rem; }
.campana-destinatario { font-weight: 600; }
.campana-vacio { margin: 0; padding: 1rem 0.5rem; color: var(--muted); text-align: center; }

.app-main { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
/* A page that marks its header with .pagina-ancha (Empresas) uses the whole content width instead of the centered column. */
.app-main:has(.pagina-ancha) { max-width: none; }

.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.campo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 10rem; }
.campo label { font-size: 0.85rem; color: var(--muted); }

.campo input, .campo select, .boton {
    font: inherit;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
}

.boton { cursor: pointer; }
.boton:hover { background: var(--bg); }

.resultado-count { color: var(--muted); margin: 0 0 0.5rem; }

.paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 0.6rem 1rem;
    margin-top: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.paginacion-rango, .paginacion-pagina { color: var(--muted); font-size: 0.9rem; }
.campo-inline { flex-direction: row; align-items: center; gap: 0.5rem; min-width: 0; }
.paginacion-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.paginacion .boton:disabled { opacity: 0.5; cursor: not-allowed; }
.paginacion .boton:disabled:hover { background: var(--surface); }

.estado-vacio, .estado-cargando {
    padding: 2rem;
    text-align: center;
    color: var(--muted);
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 8px;
}

.estado-error {
    padding: 1rem;
    color: var(--alta-fg);
    background: var(--alta-bg);
    border-radius: 8px;
}

.tabla-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); }
.tabla th { font-size: 0.85rem; color: var(--muted); background: var(--bg); }
.tabla tbody tr:last-child td { border-bottom: none; }

.badge-prioridad, .badge-estado {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.prioridad-alta { background: var(--alta-bg); color: var(--alta-fg); }
.prioridad-media { background: var(--media-bg); color: var(--media-fg); }
.prioridad-baja { background: var(--baja-bg); color: var(--baja-fg); }

.badge-estado { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.estado-activo { border-color: var(--accent-text); color: var(--accent-text); }
.estado-pendiente { color: var(--text); }
.estado-pospuesto { border-color: var(--warn-border); color: var(--media-fg); }
.estado-completado { border-color: var(--ok-border); color: var(--baja-fg); }

/* Long observaciones are cut with an ellipsis; the full text is in the cell's title attribute. */
.tabla td.observaciones { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

.contador-campo { font-size: 0.8rem; color: var(--muted); text-align: right; }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.6rem 1.25rem;
    background: var(--banner-bg);
    color: var(--banner-fg);
    z-index: 1000;
}

#blazor-error-ui .reload { margin-left: 0.5rem; }

@media (max-width: 700px) {
    .app-main { padding: 1rem; }
    .campo { min-width: 100%; }
}
/* Focus lands on the h1 after navigation (FocusOnNavigate); it is not interactive, so no ring. */
h1:focus { outline: none; }

.encabezado-pagina { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.encabezado-pagina h1 { margin: 0; }

a.boton { display: inline-block; text-decoration: none; color: var(--text); }
.boton-primario { background: var(--accent); border-color: var(--accent); color: var(--on-accent) !important; }
.boton-primario:hover { background: var(--accent-hover); }
.boton-primario[disabled] { opacity: 0.6; cursor: not-allowed; }
.boton-peligro { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.boton-peligro:hover { background: var(--danger-hover); }

.mensaje { padding: 0.6rem 0.9rem; margin: 0 0 1rem; border-radius: 8px; }
.mensaje[hidden] { display: none; }
.mensaje-ok { background: var(--baja-bg); color: var(--baja-fg); }
.mensaje-error { background: var(--alta-bg); color: var(--alta-fg); }

.cambiar-estado { margin-left: 0.4rem; font: inherit; font-size: 0.85rem; padding: 0.15rem 0.3rem; border: 1px solid var(--input-border); border-radius: 6px; background: var(--input-bg); }

.acciones-fila { white-space: nowrap; }
.acciones-fila .boton { padding: 0.2rem 0.6rem; font-size: 0.9rem; }
.confirmar { margin-right: 0.4rem; font-weight: 600; }

.formulario {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 40rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.formulario .campo { min-width: 0; }
/* Flat two-column grid of the employee ficha (Nombre | Apellido, DNI | Dirección, Teléfono | Días); one column on phones. */
.formulario-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 600px) { .formulario-grilla { grid-template-columns: minmax(0, 1fr); } }
.empleado-sin-apellido { margin: 0.15rem 0 0; color: var(--muted); font-style: italic; }
.formulario .campo input, .formulario .campo select, .formulario .campo textarea {
    font: inherit;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
}

.formulario .campo input.invalid, .formulario .campo select.invalid, .formulario .campo textarea.invalid { border-color: var(--danger); }
.error-campo, .validation-message { color: var(--alta-fg); font-size: 0.85rem; margin: 0; }
.error-campo:empty { display: none; }
.sin-personas { margin: 0; padding: 0.6rem 0.8rem; background: var(--media-bg); color: var(--media-fg); border-radius: 6px; }
.acciones { display: flex; gap: 0.75rem; align-items: center; }

.panel-persona { margin-bottom: 1rem; }
.panel-persona h2 { font-size: 1.15rem; margin: 0; }

/* The per-row estado dropdown doubles as the state indicator, colored by its current value. */
.cambiar-estado { margin-left: 0; font-weight: 600; }
.cambiar-estado.estado-pendiente { color: var(--text); }
.cambiar-estado.estado-activo { border-color: var(--accent-text); color: var(--accent-text); }
.cambiar-estado.estado-pospuesto { border-color: var(--warn-border); color: var(--media-fg); background: var(--media-bg); }
.cambiar-estado.estado-completado { border-color: var(--ok-border); color: var(--baja-fg); background: var(--baja-bg); }
/* Read-only estado (a tarea assigned to someone else): same weight and colors as the select, without the control. */
.estado-texto { font-weight: 600; font-size: 0.85rem; }

/* Login, password change and access denied pages */
.cuenta-main { max-width: 26rem; margin: 2rem auto; }
.formulario-cuenta { display: flex; flex-direction: column; gap: 1rem; }
.formulario-salir { margin: 0; }
.mensaje-info { background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-border); }
.cuenta-avisos .mensaje { margin: 0 0 1rem; }

/* Change password: show/hide toggle inside the field, requirements checklist, actions row */
.campo-password { position: relative; display: flex; }
.campo-password input, .formulario .campo .campo-password input { flex: 1; width: 100%; min-width: 0; box-sizing: border-box; padding-right: 5.5rem; }
.ver-password {
    position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%);
    font: inherit; font-size: 0.85rem; padding: 0.15rem 0.55rem; cursor: pointer;
    color: var(--accent-text); background: transparent; border: 1px solid transparent; border-radius: 6px;
}
.ver-password[hidden] { display: none; }
.ver-password:hover { background: var(--bg); border-color: var(--border); }
.ver-password:focus-visible, .boton:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.requisitos { padding: 0.75rem 0.9rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.requisitos-titulo { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 600; }
.requisitos-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.requisitos-lista li { display: flex; gap: 0.5rem; align-items: baseline; color: var(--muted); }
.regla-marca { flex: none; width: 1.1rem; text-align: center; font-weight: 700; }
.requisitos-lista li[data-estado="cumple"] { color: var(--baja-fg); }
.requisitos-lista li[data-estado="no-cumple"] { color: var(--alta-fg); }
.requisitos-nota { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); }
.requisitos-nota[hidden] { display: none; }
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[data-cp-acciones] { flex-wrap: wrap; justify-content: space-between; }
[data-cp-acciones] .boton { flex: 1 1 10rem; text-align: center; }
.boton-secundario { background: transparent; color: var(--text); }
.boton-secundario:hover { background: var(--bg); }

/* Access management on /personas */
.acciones-persona { white-space: normal; min-width: 16rem; }
.acciones-persona .boton { margin: 0 0.25rem 0.25rem 0; }
.acciones-persona .rol-select { margin: 0 0.25rem 0.25rem 0; }
/* Short values stay on one line; .tabla-wrap scrolls horizontally on narrow screens. */
.tabla-personas th, .tabla-personas td { white-space: nowrap; }
.sin-acceso { color: var(--muted); }
.etiqueta-deshabilitado { margin-left: 0.4rem; border-color: var(--danger); color: var(--alta-fg); }

/* Persona modal (native <dialog>, same look as the postponement popup) */
.modal-dialogo {
    width: min(32rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 10px 30px var(--shadow-dialog);
}
.modal-dialogo::backdrop { background: var(--overlay); }
.modal-dialogo h2 { font-size: 1.2rem; margin: 0 0 0.75rem; overflow-wrap: anywhere; }
.modal-dialogo h3 { font-size: 1rem; margin: 0 0 0.5rem; }
/* Close cross: floated to the top-right corner and sticky so it stays reachable while the dialog scrolls. */
.modal-cerrar {
    position: sticky;
    top: 0;
    float: right;
    width: 2rem;
    height: 2rem;
    margin: -0.4rem -0.4rem 0 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.modal-cerrar:hover, .modal-cerrar:focus-visible { background: var(--border); color: var(--text); }
.dialogo-seccion { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.dialogo-seccion .acceso-estado { margin: 0 0 0.6rem; font-weight: 600; }
.dialogo-seccion .nota { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--muted); }
.zona-peligro { padding: 0.8rem 0.9rem; border: 1px solid var(--danger); border-radius: 8px; background: var(--alta-bg); }
.zona-peligro h3 { color: var(--alta-fg); }
.zona-peligro .nota { color: var(--text); }

/* One-time temporary password panel */
.panel-password { margin-bottom: 1rem; padding: 0.9rem 1.1rem; background: var(--media-bg); color: var(--media-fg); border: 1px solid var(--media-fg); border-radius: 8px; }
.panel-password p { margin: 0 0 0.5rem; }
.panel-password .nota { font-size: 0.9rem; }
.password-temporal { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; user-select: all; }

/* Audit log viewer */
.tabla-auditoria td { vertical-align: top; }
.audit-fecha { white-space: nowrap; }
.audit-detalle summary { cursor: pointer; color: var(--accent-text); }
.audit-detalle details[open] summary { margin-bottom: 0.4rem; }
.tabla-detalle { font-size: 0.85rem; margin-top: 0.25rem; }
.tabla-detalle th, .tabla-detalle td { padding: 0.3rem 0.5rem; overflow-wrap: anywhere; }
.audit-raw { margin: 0; max-width: 28rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85rem; }

/* "Avisos" (device notifications) control inside the user menu card */
.avisos { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; min-width: 0; }
/* The notifications button may need two lines: wrap instead of cutting the label; the icon stays top-left. */
.menu-usuario-panel .avisos > .boton {
    align-items: flex-start;
    height: auto;
    min-height: 2.5rem;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
}
.menu-usuario-panel .avisos > .boton .nav-etiqueta { white-space: normal; overflow-wrap: anywhere; padding-top: 0.125rem; }
.avisos .boton:disabled { opacity: 0.6; cursor: not-allowed; }
/* The Off button keeps its call to action look (accent text), adapted to the light card. */
.menu-usuario-panel .avisos > .boton-primario { color: var(--accent-text) !important; background: transparent; }
.menu-usuario-panel .avisos > .boton-primario .nav-icono { color: var(--accent-text); }
.menu-usuario-panel .avisos > .boton-primario:hover { background: var(--sidebar-hover); }
.avisos-nota { padding: 0 0.75rem 0.25rem; font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.avisos-probar { font-size: 0.85rem; }
.avisos-probar > summary { cursor: pointer; color: var(--muted); padding: 0.4rem 0.75rem; border-radius: 6px; white-space: nowrap; }
.avisos-probar > summary:hover, .avisos-probar[open] > summary { color: var(--text); background: var(--sidebar-hover); }
/* The admin test panel expands inline inside the card: buttons stacked and indented, no floating box. */
.avisos-probar-panel { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.4rem 0 0.2rem 0.75rem; }
.menu-usuario-panel .avisos-probar-panel {
    display: flex;
    flex-direction: column;
    position: static;
    box-shadow: none;
    border: 0;
    background: transparent;
}
.avisos-probar-panel .boton { white-space: normal; text-align: left; }
/* Floating message under the header, top right. An empty region has no size. It never takes room in the layout; it
   opts back in to visibility because the (hidden) closed card is its DOM parent. */
.avisos-toast {
    position: fixed;
    top: 4rem;
    right: 1rem;
    left: auto;
    bottom: auto;
    z-index: 140;
    width: max-content;
    max-width: min(28rem, calc(100vw - 2rem));
    visibility: visible;
    pointer-events: none;
}
.avisos-mensaje { margin: 0; padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.9rem; overflow-wrap: anywhere; box-shadow: 0 4px 14px var(--shadow-toast); pointer-events: auto; }

/* Wide screens: the collapsed rail (a per-browser preference set on <html> by sidebar.js). Labels are hidden VISUALLY
   only (never display: none), so they remain the accessible names of the icon-only buttons. */
@media (min-width: 900px) {
    html[data-sidebar='collapsed'] { --sidebar-current-w: var(--sidebar-w-collapsed); }
    html[data-sidebar='collapsed'] .app-sidebar .nav-etiqueta {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}

/* Narrow screens: the sidebar is an off-canvas drawer opened from the hamburger in the app header. It never uses transform
   (a transformed ancestor would turn fixed pieces into children of the drawer). The collapsed preference is ignored. */
@media (max-width: 899px) {
    .app-shell-menu { grid-template-columns: minmax(0, 1fr); transition: none; }
    .app-shell-menu > .app-contenido { grid-column: 1; grid-row: auto; }
    .app-cabecera { padding: 0 1rem; }
    .cabecera-toggle { display: inline-flex; }
    .cabecera-marca { display: block; }
    .app-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: calc(-1 * var(--sidebar-w) - 1rem);
        width: var(--sidebar-w);
        max-width: 90vw;
        visibility: hidden;
        transition: left 150ms ease, visibility 0s linear 150ms;
    }
    html[data-sidebar-open='true'] .app-sidebar { left: 0; visibility: visible; transition: left 150ms ease, visibility 0s; }
    .app-sidebar a { min-height: 44px; }
    .menu-usuario-item, .menu-usuario-panel .avisos > .boton { min-height: 44px; }
    .tema-opcion { min-height: 44px; }
    .campana-boton { min-width: 44px; min-height: 44px; }
    /* The gear keeps only its icon on narrow screens (the tag would crowd the header with the hamburger and the brand). */
    .admin-boton { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; }
    .admin-etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .campana-item, .campana-marcar-todas, .campana-pestanas button, .campana-mas { min-height: 44px; }
    .medidas-resumen { min-height: 44px; box-sizing: border-box; }
    /* Anchored to the bell the card would run off the left edge of a phone: pin it under the header instead. */
    .campana-panel { position: fixed; top: 4rem; right: 0.5rem; width: min(22rem, calc(100vw - 1rem)); }
    html[data-sidebar-open='true'] .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 90; background: var(--overlay-nav); }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell-menu { transition: none; }
    .app-sidebar { transition: none; }
    .medidas-chevron svg { transition: none; }
}

/* Postponement popup (native <dialog>, opened with showModal) */
.posponer-dialogo {
    width: min(26rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 10px 30px var(--shadow-dialog);
}
.posponer-dialogo::backdrop { background: var(--overlay); }
.posponer-dialogo h2 { font-size: 1.2rem; margin: 0 0 0.25rem; }
.posponer-tarea { margin: 0 0 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.posponer-repeticion { margin: 0 0 0.9rem; padding: 0.55rem 0.75rem; background: var(--media-bg); color: var(--media-fg); border-left: 4px solid var(--warn-border); border-radius: 6px; font-weight: 600; }
.posponer-opciones { margin: 0 0 0.9rem; padding: 0; border: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.posponer-opciones legend { padding: 0; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--muted); }
.posponer-opcion { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.posponer-opcion:hover { background: var(--bg); }
.posponer-opcion:focus-within { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.posponer-vista-previa { margin: 0 0 1rem; color: var(--muted); font-size: 0.95rem; }
.posponer-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; }

/* Postponement info under the estado of a row and the line under the Estado field */
.pospuesta-info { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; margin-top: 0.35rem; padding: 0.2rem 0.55rem; width: fit-content; max-width: 100%; font-size: 0.8rem; line-height: 1.3; background: var(--media-bg); color: var(--media-fg); border-radius: 999px; }
.pospuesta-info .pospuesta-veces { padding: 0 0.4rem; font-size: 0.72rem; font-weight: 600; background: var(--chip-bg); color: var(--muted); border-radius: 999px; white-space: nowrap; }
.pospuesta-aviso { margin: 0; font-size: 0.85rem; color: var(--media-fg); }

/* Empresas page: one card per company */
.lista-empresas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
/* Empresas only (Propiedades keeps one card per row): three columns, two on medium screens, one on narrow ones. */
.lista-empresas.lista-empresas-columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1300px) { .lista-empresas.lista-empresas-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .lista-empresas.lista-empresas-columnas { grid-template-columns: minmax(0, 1fr); } }
.tarjeta-empresa { width: 100%; box-sizing: border-box; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
/* Empresas only: every card is as tall as the tallest one (all rows equal); the add button sticks to the bottom of a taller card. */
.lista-empresas.lista-empresas-iguales { grid-auto-rows: 1fr; align-items: stretch; }
.lista-empresas-iguales .tarjeta-empresa { display: flex; flex-direction: column; }
.lista-empresas-iguales .tarjeta-empresa > :has(+ .medidas-agregar) { margin-bottom: 0.75rem; }
/* The data block takes the spare height (align-content keeps its own rows together), so the medidas row and the add button sit at
   the bottom at the same height in every card instead of following the content of each one. */
.lista-empresas-iguales .tarjeta-datos { flex: 1 1 auto; align-content: start; }
.lista-empresas-iguales .medidas-agregar { margin-top: auto; }
/* Empresas only: the autoridades text is clamped to 3 lines (a button that opens the full text; "Ver mas" is a hint under it). */
.lista-empresas-iguales dd.autoridades { white-space: normal; }
.lista-empresas-iguales .autoridades-texto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; white-space: pre-line; overflow-wrap: anywhere; cursor: pointer; }
.lista-empresas-iguales .autoridades-texto:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.lista-empresas-iguales .autoridades-ver-mas:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.lista-empresas-iguales .autoridades-ver-mas { display: block; margin: 0.15rem 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 0.85rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.autoridades-completas { margin: 0 0 1rem; white-space: pre-line; overflow-wrap: anywhere; }
/* Propiedades only: every group card is as tall as the tallest one; each sub-card keeps its detalle at the bottom so it aligns across the row. */
.lista-empresas.lista-propiedades-iguales { grid-auto-rows: 1fr; align-items: stretch; }
.lista-propiedades-iguales .grupo-empresa { display: flex; flex-direction: column; }
.lista-propiedades-iguales .tarjeta-propiedad { display: flex; flex-direction: column; }
.lista-propiedades-iguales .tarjeta-propiedad > .tarjeta-encabezado { margin-bottom: 0.75rem; }
.lista-propiedades-iguales .tarjeta-propiedad .tarjeta-datos { margin-top: auto; }
.lista-propiedades-iguales .tarjeta-propiedad h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
/* The detalle is clamped to 3 lines (a button that opens the full text; "Ver mas" is a hint under it). */
.lista-propiedades-iguales dd.detalle { white-space: normal; }
.lista-propiedades-iguales .detalle-texto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; white-space: pre-line; overflow-wrap: anywhere; cursor: pointer; }
.lista-propiedades-iguales .detalle-texto:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.lista-propiedades-iguales .detalle-ver-mas:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.lista-propiedades-iguales .detalle-ver-mas { display: block; margin: 0.15rem 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 0.85rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.detalle-completo { margin: 0 0 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.tarjeta-encabezado { display: flex; align-items: center; gap: 0.75rem; }
.tarjeta-encabezado h2 { font-size: 1.15rem; margin: 0; overflow-wrap: anywhere; }
/* The pencil sits at the right edge of the card header. */
.tarjeta-encabezado .editar { margin-left: auto; padding: 0.2rem 0.6rem; font-size: 0.9rem; }
.tarjeta-encabezado .eliminar-empresa, .tarjeta-encabezado .eliminar-propiedad { padding: 0.2rem 0.6rem; font-size: 0.9rem; }
.grupo-empresa .conteo { color: var(--muted); font-size: 0.85rem; }
.propiedades-empresa { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.tarjeta-propiedad { box-sizing: border-box; padding: 0.75rem 1rem; border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 6px; }
.tarjeta-propiedad h3 { font-size: 1rem; margin: 0; overflow-wrap: anywhere; }
.embargos-con { border-color: var(--danger); background: var(--alta-bg); color: var(--alta-fg); }
.embargos-sin { border-color: var(--ok-border); background: var(--baja-bg); color: var(--baja-fg); }
.tarjeta-datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.75rem; margin: 0.75rem 0 0; }
.tarjeta-datos dt { color: var(--muted); font-size: 0.85rem; }
.tarjeta-datos dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
/* Medidas accordion: native details/summary, closed by default; the open state is rendered by the page, the chevron follows [open]. */
.medidas-acordeon { position: relative; margin-top: 0.75rem; border-top: 1px solid var(--border); }
.medidas-resumen { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0; list-style: none; cursor: pointer; font-weight: 600; user-select: none; }
.medidas-resumen::-webkit-details-marker { display: none; }
.medidas-resumen:hover { color: var(--accent-text); }
.medidas-resumen:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.medidas-chevron { flex: none; display: inline-flex; }
.medidas-chevron svg { width: 1.1rem; height: 1.1rem; transition: transform 150ms ease; }
.medidas-acordeon[open] .medidas-chevron svg { transform: rotate(180deg); }
/* The open list is a floating layer under the summary: it covers what is below (even the next row) instead of growing the card.
   The accordion is positioned but has no z-index, so it creates no stacking context and the layer competes with the other cards directly. */
.medidas-acordeon > .medidas { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; box-sizing: border-box; max-height: 18rem; overflow-y: auto; padding: 0.25rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px var(--shadow-menu); }
/* Transparent click-catcher behind the open layer (above the cards, below the layer): a click outside closes it, no JavaScript. */
.medidas-fondo { position: fixed; inset: 0; z-index: 10; padding: 0; border: 0; background: transparent; cursor: default; }
.medidas { list-style: none; margin: 0; padding: 0; }
.medida { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.medida:last-child { border-bottom: none; }
.medida-juicio { font-weight: 600; flex: 1 1 100%; overflow-wrap: anywhere; }
.medida-vencimiento { color: var(--muted); }
.medida-acciones { margin-left: auto; display: inline-flex; gap: 0.25rem; }
.medida-acciones .boton, .agregar-medida { padding: 0.2rem 0.6rem; font-size: 0.9rem; }
.medidas-agregar { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.agregar-medida { font-weight: 600; }
.agregar-medida::before { content: "+"; margin-right: 0.4rem; font-weight: 700; }
.medida-detalle { flex: 1 1 100%; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Empresa form (inside the modal): editable list of medidas cautelares */
.empresa-dialogo { width: min(40rem, calc(100vw - 2rem)); }
.medidas-form h3 { margin: 0.5rem 0; }
.medida-fila { display: grid; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 8px; }
.medida-fila legend { padding: 0 0.4rem; font-size: 0.85rem; color: var(--muted); }
.medida-fila .eliminar-medida { justify-self: start; }
.formulario .campo input[type="number"], .formulario .campo input[type="date"], .formulario .campo input[type="text"] { min-width: 0; }
.medida-tipo { font-size: 0.85rem; font-weight: 600; padding: 0.05rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; }
.medida-fila .eliminar-medida { justify-self: start; }

/* Oficina colour classes: one per palette key; the page puts the one of the oficina on its card, chip or dot. */
.oficina-azul { background: var(--oficina-azul-bg); color: var(--oficina-azul-fg); border-color: var(--oficina-azul-borde); }
.oficina-verde { background: var(--oficina-verde-bg); color: var(--oficina-verde-fg); border-color: var(--oficina-verde-borde); }
.oficina-ambar { background: var(--oficina-ambar-bg); color: var(--oficina-ambar-fg); border-color: var(--oficina-ambar-borde); }
.oficina-violeta { background: var(--oficina-violeta-bg); color: var(--oficina-violeta-fg); border-color: var(--oficina-violeta-borde); }
.oficina-rojo { background: var(--oficina-rojo-bg); color: var(--oficina-rojo-fg); border-color: var(--oficina-rojo-borde); }
.oficina-turquesa { background: var(--oficina-turquesa-bg); color: var(--oficina-turquesa-fg); border-color: var(--oficina-turquesa-borde); }
.oficina-rosa { background: var(--oficina-rosa-bg); color: var(--oficina-rosa-fg); border-color: var(--oficina-rosa-borde); }

/* Personal: header of the oficina page. A card tinted with the oficina colour (the .oficina-<key> class sits on it, not on the page). */
.encabezado-oficina { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-style: solid; border-width: 1px 1px 1px 6px; border-radius: 8px; }
.encabezado-oficina-titulo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.encabezado-oficina .volver { color: inherit; font-size: 0.9rem; text-decoration: none; opacity: 0.85; }
.encabezado-oficina .volver:hover { text-decoration: underline; opacity: 1; }
.encabezado-oficina h1 { overflow-wrap: anywhere; }

/* Personal: dados de baja page. Cards are .tarjeta-empresa tinted by .oficina-<key>; only the border width is set here so that class keeps the border colour. */
.encabezado-pagina .encabezado-oficina-titulo .volver { color: var(--muted); font-size: 0.9rem; text-decoration: none; }
.encabezado-pagina .encabezado-oficina-titulo .volver:hover { text-decoration: underline; }
.tarjeta-baja { border-left-width: 6px; }
.tarjeta-baja p { margin: 0.35rem 0 0; }
.tarjeta-baja .baja-fecha { font-weight: 600; }
.tarjeta-baja .acciones { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Personal: Horas and Vacaciones sections of the oficina page */
/* Two columns: Horas over Vacaciones on the left, the employee calendar on the right (it drops below under 1100px); forms sit flat inside the cards. */
/* The two column wrappers dissolve (display: contents): the four cards are items of ONE 2x2 grid filled column by column
   (Horas | Calendario on the first row, Vacaciones | Empleados on the second), so each row is as tall as its tallest card
   and the cards line up. On narrow screens it is a single column in DOM order. */
.personal-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-auto-flow: column; gap: 1rem; align-items: stretch; margin-top: 1.5rem; }
.personal-columna { display: contents; }
@media (max-width: 1100px) { .personal-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } }
.panel-personal { box-sizing: border-box; min-width: 0; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.panel-personal h2 { margin: 0 0 1rem; font-size: 1.15rem; }
.panel-personal .formulario.horas-form { padding: 0; background: transparent; border: 0; border-radius: 0; }
.panel-personal .estado-vacio { padding: 1.25rem; }
/* "Empleados del sector": a compact list under the calendar; data on the left, edit and Dar de baja on the right. */
.lista-empleados-sector { list-style: none; margin: 0; padding: 0; }
.empleado-fila { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; }
.empleado-fila + .empleado-fila { border-top: 1px solid var(--border); }
.empleado-fila-info { flex: 1; min-width: 0; }
.empleado-nombre { overflow-wrap: anywhere; }
.empleado-vacaciones, .empleado-fila-datos { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.empleado-fila-acciones { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.empleado-fila-acciones .boton { padding: 0.2rem 0.6rem; font-size: 0.9rem; }
.horas-filtros { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin: 0 0 1rem; }
/* Two classes on purpose: .formulario is a column with a 40rem cap; here the fields sit in one row that wraps, aligned at the left. */
.formulario.horas-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; max-width: none; margin: 0 0 1rem; padding: 0.9rem 1rem; }
.horas-form .campo { flex: 0 1 12rem; }
.horas-form .campo:has(input[type="text"]:not([inputmode])) { flex-basis: 18rem; }
.horas-form .acciones { align-self: flex-end; }
.horas-lista { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; }
.horas-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.4rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.horas-valor, .vac-rango { font-weight: 600; }
.vac-nota { color: var(--muted); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.horas-total { margin: 0 0 1rem; }
.vac-saldo { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1rem; }
.vac-saldo div { min-width: 7rem; padding: 0.5rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.vac-saldo dt { font-size: 0.85rem; color: var(--muted); }
.vac-saldo dd { margin: 0; font-size: 1.4rem; font-weight: 700; }
.vac-saldo dd.vac-negativo { color: var(--danger); }
.vac-aviso { margin: 0 0 1rem; padding: 0.55rem 0.75rem; background: var(--media-bg); color: var(--media-fg); border-left: 4px solid var(--warn-border); border-radius: 6px; font-weight: 600; }

/* Personal: monthly vacation calendar. A 7-column grid built server-side; chips reuse the .oficina-<key> colours. */
.calendario-controles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin: 0 0 1rem; }
.calendario-titulo { margin: 0; min-width: 11rem; text-align: center; align-self: center; }
.calendario-filtro { margin-left: auto; }
.calendario-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.calendario-cabecera { padding: 0.35rem; background: var(--surface); color: var(--muted); font-size: 0.85rem; font-weight: 600; text-align: center; }
.calendario-dia { display: flex; flex-direction: column; gap: 0.2rem; min-height: 5.5rem; padding: 0.3rem; background: var(--surface); }
.calendario-dia.fin-de-semana { background: var(--bg); }
.calendario-dia.dia-feriado { background: var(--dia-feriado-bg); color: var(--dia-feriado-fg); border-color: var(--dia-feriado-borde); }
.calendario-dia.dia-feriado .calendario-numero { color: inherit; }
.calendario-dia.fuera-de-mes { opacity: 0.45; }
.calendario-numero { font-size: 0.8rem; color: var(--muted); }
.calendario-chip { padding: 0.05rem 0.4rem; border: 1px solid; border-radius: 999px; font-size: 0.78rem; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
    .calendario-grilla { overflow-x: auto; grid-template-columns: repeat(7, minmax(5.5rem, 1fr)); }
    .calendario-filtro { margin-left: 0; }
}
.oficina-gris { background: var(--oficina-gris-bg); color: var(--oficina-gris-fg); border-color: var(--oficina-gris-borde); }

/* Personal: "Cargar semana" result under the Horas selectors. */
.semana-resultado { margin: 0 0 0.5rem; font-weight: 600; }
.semana-omitidos { margin: 0 0 1rem; padding: 0.5rem 0.75rem 0.5rem 1.75rem; background: var(--media-bg); color: var(--media-fg); border-left: 4px solid var(--warn-border); border-radius: 6px; font-size: 0.9rem; }

/* Personal: month calendar of one employee. One class per day state, each painted only with its own tokens. */
.dia-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.dia-celda { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; min-height: 4.2rem; padding: 0.3rem; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.dia-finde { background: var(--bg); }
.dia-fuera { opacity: 0.45; }
.dia-celda .calendario-numero { color: inherit; opacity: 0.85; }
.dia-etiqueta { font-size: 0.78rem; font-weight: 600; overflow-wrap: anywhere; }
.dia-trabajado { background: var(--dia-trabajado-bg); color: var(--dia-trabajado-fg); border-color: var(--dia-trabajado-borde); }
.dia-falta { background: var(--dia-falta-bg); color: var(--dia-falta-fg); border-color: var(--dia-falta-borde); }
.dia-vacaciones { background: var(--dia-vacaciones-bg); color: var(--dia-vacaciones-fg); border-color: var(--dia-vacaciones-borde); }
.dia-licencia { background: var(--dia-licencia-bg); color: var(--dia-licencia-fg); border-color: var(--dia-licencia-borde); }
.dia-feriado { background: var(--dia-feriado-bg); color: var(--dia-feriado-fg); border-color: var(--dia-feriado-borde); }
.calendario-leyenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--muted); }
.calendario-leyenda li { display: flex; align-items: center; gap: 0.35rem; }
.dia-muestra { display: inline-block; width: 0.9rem; height: 0.9rem; border: 1px solid; border-radius: 3px; }
@media (max-width: 40rem) {
    .personal-calendario { overflow-x: auto; }
    .dia-grilla { grid-template-columns: repeat(7, minmax(4.2rem, 1fr)); }
}