/* Letra Inter (licencia SIL OFL, ver fonts/OFL.txt), guardada en el panel: no depende de servicios externos. */
@font-face {
    font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
    src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
    src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Colores base. --brand y --accent se reemplazan con los de cada empresa (MainLayout). */
:root {
    --brand: #1A5DAB;
    --accent: #94D402;
    --bg: #f4f6f9;
    --card: #ffffff;
    --text: #18202a;
    --muted: #5d6877;
    --border: #e1e5eb;
    --error: #b42318;
    --warn-bg: #fff6db;
    --brand-soft: color-mix(in srgb, var(--brand) 10%, #fff);
    /* Texto sobre la marca (blanco o casi negro) y la marca como texto sobre blanco: MainLayout los calcula
       con el contraste de los colores de cada empresa (ColorContrast), así un color claro no deja texto ilegible. */
    --on-brand: #fff;
    --brand-ink: var(--brand);
    --on-accent: #111827;
    --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
    --shadow-lg: 0 8px 28px rgba(16, 24, 40, .12);
    --radius: 14px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-feature-settings: "cv11", "ss01";
    /* En % y no en px: así respeta el tamaño de letra que la persona eligió en su navegador (15 px con el normal). */
    font-size: 93.75%;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
h1 { font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .35rem; }
h2 { font-size: 1.08rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 .75rem; }
h3 { font-weight: 650; }
/* Blazor enfoca el título al navegar (para lectores de pantalla); sin marco visible. */
h1:focus, h1:focus-visible { outline: none; box-shadow: none; }
a { color: var(--brand-ink); text-underline-offset: .15em; }
.muted { color: var(--muted); }
.error { color: var(--error); }
.ok { color: #1a7f37; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* Menú lateral: fijo a la izquierda, con su propio desplazamiento si es largo. */
.shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 248px; flex-shrink: 0; color: var(--on-brand); position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 82%, #000));
    display: flex; flex-direction: column; padding: 1.1rem .75rem; gap: 1rem;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--on-brand) 25%, transparent) transparent;
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 650; font-size: 1.05rem; padding: 0 .5rem; letter-spacing: -.01em; }
.brand img { height: 36px; width: auto; background: #fff; border-radius: 8px; padding: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
/* Modo dueño: el logotipo de iAstoy es la marca principal. */
.brand.owner { flex-direction: column; align-items: flex-start; gap: .35rem; }
.brand.owner img { height: 44px; padding: 4px 8px; }
.brand.owner span { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.topbar .brand.owner { flex-direction: row; align-items: center; }
.topbar .brand.owner img { height: 30px; }
/* Presencia de iAstoy en el panel de cada cliente: chica, abajo del menú. */
.powered-by { display: flex; align-items: center; gap: .45rem; margin-top: .35rem; font-size: .78rem; }
.powered-by span { opacity: .8; }
.powered-by img { height: 24px; width: auto; background: #fff; border-radius: 6px; padding: 2px 6px; }
.sidebar nav a {
    color: var(--on-brand); text-decoration: none; padding: .48rem .7rem; border-radius: 9px; opacity: .9; font-size: .92rem;
    display: flex; align-items: center; gap: .65rem; position: relative;
    transition: background-color .18s var(--ease), opacity .18s var(--ease), transform .18s var(--ease);
}
.sidebar nav a:hover { background: color-mix(in srgb, var(--on-brand) 10%, transparent); opacity: 1; }
.sidebar nav a:active { transform: scale(.98); }
.sidebar nav a.active { background: color-mix(in srgb, var(--on-brand) 17%, transparent); opacity: 1; font-weight: 600; }
.sidebar nav a.active::before {
    content: ""; position: absolute; left: -.75rem; top: 20%; bottom: 20%; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent);
}
.sidebar nav a .badge { margin-left: auto; }
/* Título de grupo: botón que cierra y abre sus secciones (la flecha gira al cerrarlo). */
.nav-group {
    font-size: .75rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; opacity: .85; padding: .9rem .7rem .3rem;
    background: none; border: 0; color: var(--on-brand); width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left;
    transition: opacity .18s var(--ease);
}
.nav-group:hover { opacity: .95; }
/* Título de sección (Operación, Consulta, Configuración...): agrupa varios grupos; no se cierra. */
.nav-section {
    margin: 1.1rem .7rem .1rem; padding-top: .7rem; border-top: 1px solid color-mix(in srgb, var(--on-brand) 14%, transparent);
    font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-brand);
}
.nav-group .ico { width: 1rem; height: 1rem; transition: transform .2s var(--ease); }
.nav-group[aria-expanded="false"] .ico { transform: rotate(-90deg); }
.nav-items { display: flex; flex-direction: column; gap: 2px; animation: fade-in .18s ease-out; }
/* Búsqueda rápida del menú. */
.nav-search { position: relative; display: flex; align-items: center; margin-bottom: -.35rem; }
.nav-search > .ico { position: absolute; left: .65rem; opacity: .75; pointer-events: none; }
.sidebar .nav-search input {
    width: 100%; color: var(--on-brand); background: color-mix(in srgb, var(--on-brand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--on-brand) 20%, transparent);
    padding: .48rem 3.3rem .48rem 2.1rem; font-size: .88rem;
}
.sidebar .nav-search input::placeholder { color: color-mix(in srgb, var(--on-brand) 72%, transparent); }
.sidebar .nav-search input:hover { border-color: color-mix(in srgb, var(--on-brand) 35%, transparent); }
.sidebar .nav-search input:focus { background: color-mix(in srgb, var(--on-brand) 20%, transparent); border-color: transparent; box-shadow: 0 0 0 2px var(--accent); }
.nav-search input::-webkit-search-cancel-button { filter: invert(1); }
.nav-search kbd {
    position: absolute; right: .5rem; font: 600 .66rem/1 inherit; letter-spacing: .02em; padding: .25rem .35rem; border-radius: 5px;
    border: 1px solid color-mix(in srgb, var(--on-brand) 30%, transparent); opacity: .7; pointer-events: none;
}
.nav-search input:focus ~ kbd, .nav-search input:not(:placeholder-shown) ~ kbd { display: none; }
.sidebar nav a.selected { background: color-mix(in srgb, var(--on-brand) 17%, transparent); opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-brand) 35%, transparent); }
.sidebar nav a .nav-hint { margin-left: auto; font-size: .75rem; opacity: .85; }
/* Mis accesos: cada sección lleva su estrella a la derecha; sale al pasar el ratón o con el teclado, y fija si ya lo está. */
.nav-row { position: relative; display: flex; align-items: center; }
.sidebar .nav-row > a { flex: 1; min-width: 0; padding-right: 2.1rem; }
.nav-row .star-button { position: absolute; right: .3rem; opacity: 0; color: var(--on-brand); }
.nav-row:hover .star-button, .nav-row:focus-within .star-button, .nav-row.pinned .star-button { opacity: .85; }
.nav-row.pinned .star-button { color: var(--accent); }
.nav-divider { border: 0; border-top: 1px solid color-mix(in srgb, var(--on-brand) 14%, transparent); margin: .8rem .7rem .35rem; }
.sidebar nav a > .ico:last-child:not(:first-child) { margin-left: auto; opacity: .7; }
.star-button {
    background: none; border: 0; padding: .3rem; border-radius: 6px; line-height: 0; cursor: pointer; color: var(--muted);
    transition: opacity .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.star-button:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.star-button.on { color: var(--accent); }
.star-button:disabled { cursor: not-allowed; opacity: .35 !important; }
@media (hover: none) { .nav-row .star-button { opacity: .6; } }
/* Configuración y Reportes: las secciones en tarjetas, con para qué sirve cada una. */
.hub-filter { position: relative; display: flex; align-items: center; max-width: 26rem; margin: .5rem 0 1rem; }
.hub-filter > .ico { position: absolute; left: .7rem; color: var(--muted); pointer-events: none; }
.hub-filter input { width: 100%; padding-left: 2.2rem; }
.hub-section { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 .6rem; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; align-items: start; }
.hub-card h3 { margin: 0 0 .5rem; font-size: 1.02rem; color: var(--brand-ink); }
.hub-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.hub-card li { display: flex; align-items: flex-start; gap: .25rem; }
.hub-card li > a {
    flex: 1; min-width: 0; display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .5rem; border-radius: 8px;
    color: inherit; text-decoration: none; transition: background-color .15s var(--ease);
}
.hub-card li > a:hover { background: var(--brand-soft); }
.hub-card li > a > .ico { margin-top: .15rem; color: var(--brand-ink); }
.hub-card li > a span { display: flex; flex-direction: column; gap: .1rem; }
.hub-card li > a small { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.hub-card .star-button { margin-top: .35rem; }
.hub-tip { margin-top: 1.25rem; font-size: .88rem; }
.nav-empty { font-size: .85rem; opacity: .75; padding: .5rem .7rem; margin: 0; }
.ico { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -.2em; }
.user { margin-top: auto; display: flex; flex-direction: column; gap: .35rem; font-size: .88rem; padding: .75rem .5rem 0; border-top: 1px solid color-mix(in srgb, var(--on-brand) 15%, transparent); }
.user .link { color: var(--on-brand); }
.user a { color: var(--on-brand); text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.user button.link { text-decoration: none; display: flex; align-items: center; gap: .5rem; opacity: .85; }
.user button.link:hover, .user a:hover { opacity: 1; text-decoration: underline; }

/* Barra superior y botón de menú: solo en pantallas angostas (celular o tableta). */
.topbar { display: none; }
.menu-toggle { background: none; border: 0; color: var(--on-brand); padding: .4rem; border-radius: 8px; display: inline-flex; }
.menu-toggle .ico { width: 1.6rem; height: 1.6rem; }

.content { flex: 1; min-width: 0; padding: 2rem 2.25rem 3rem; max-width: 1240px; }
.content.center {
    display: grid; place-items: center; max-width: none; min-height: 100vh;
    background:
        radial-gradient(60rem 40rem at 10% -10%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 60%),
        radial-gradient(50rem 35rem at 110% 110%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
        var(--bg);
}

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.35rem; box-shadow: var(--shadow-sm); }
/* Tablas anchas: se desplazan dentro de su tarjeta en lugar de salirse. */
/* También si la tabla va dentro de otro bloque; no en tarjetas con buscador de personas, cuya lista flotante se cortaría. */
.card:has(table):not(:has(.person-picker)) { overflow-x: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.tile { text-decoration: none; color: inherit; border-top: 4px solid var(--accent); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.two-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; align-items: start; }
/* minmax(0, …) y min-width: 0: una tabla ancha se desplaza dentro de su tarjeta y no ensancha la página. */
.two-cols > *, .grid > *, .kpis > * { min-width: 0; }
@media (max-width: 900px) {
    .two-cols { grid-template-columns: minmax(0, 1fr); }
    .shell { flex-direction: column; }
    .topbar {
        display: flex; align-items: center; justify-content: space-between; gap: .75rem; position: sticky; top: 0; z-index: 50;
        background: var(--brand); color: var(--on-brand); padding: .6rem 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.15);
    }
    .topbar .brand { padding: 0; }
    .topbar .brand img { height: 30px; }
    .sidebar {
        position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(300px, 85vw); height: 100vh;
        transform: translateX(-102%); transition: transform .28s var(--ease); box-shadow: var(--shadow-lg);
    }
    .shell.nav-open .sidebar { transform: none; }
    .nav-search kbd { display: none; }
    .scrim { position: fixed; inset: 0; z-index: 55; background: rgba(10, 15, 25, .45); border: 0; animation: fade-in .2s ease-out; }
    .content { padding: 1.25rem 1rem 2.5rem; }
    h1 { font-size: 1.4rem; }
}

.login { width: min(420px, 100%); position: relative; padding: 2rem 1.75rem 1.75rem; box-shadow: var(--shadow-lg); border-color: transparent; }
.login h1 { color: var(--brand-ink); padding-right: 7rem; }
.login-logo { margin: 0 0 .75rem; line-height: 0; }
.login-logo img { height: 64px; width: auto; display: block; }

form label { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; font-size: .88rem; font-weight: 500; color: var(--muted); }
/* Renglón de varios campos: hasta 3 por fila si caben (cada uno de al menos ~8.5rem); si no, se acomodan abajo.
   min-width: 0 para que una lista con opciones largas no ensanche la columna ni se salga de la tarjeta. */
form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); gap: .5rem; }
form .row > * { min-width: 0; }
form .row > label > input:not([type=checkbox]):not([type=radio]), form .row > label > select { width: 100%; }
input, select, textarea {
    font: inherit; font-size: .94rem; color: var(--text); padding: .55rem .7rem;
    border: 1px solid var(--border); border-radius: 9px; background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); width: 1rem; height: 1rem; }
button { font: inherit; cursor: pointer; }
button.primary {
    background: var(--brand); color: var(--on-brand); border: 0; padding: .65rem 1.2rem; border-radius: 9px; width: 100%; font-weight: 600;
    box-shadow: 0 1px 2px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.12);
    transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
button.primary:hover:not(:disabled), a.button:hover { filter: brightness(1.08); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent); }
button.primary:active:not(:disabled), a.button:active { transform: scale(.98); }
button.primary:disabled { opacity: .55; cursor: not-allowed; }
button.link { background: none; border: 0; padding: 0; color: var(--brand-ink); text-decoration: underline; text-underline-offset: .15em; text-align: left; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .6rem .6rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; background: #f8f9fb; }
thead th:first-child { border-top-left-radius: 8px; }
thead th:last-child { border-top-right-radius: 8px; }
tbody tr { transition: background-color .15s ease; }
tbody tr:hover td { background: color-mix(in srgb, var(--brand) 4%, transparent); }
tr.flagged td, tbody tr.flagged:hover td { background: var(--warn-bg); }

.tree { list-style: none; margin: 0; padding: 0; }
.tree li { padding: .4rem 0; border-bottom: 1px dashed var(--border); }
.tag { display: inline-block; font-size: .75rem; padding: .1rem .45rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); margin-right: .35rem; }

/* Botones como enlace y acciones de página */
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
a.button, button.primary.inline {
    display: inline-block; width: auto; background: var(--brand); color: var(--on-brand); border: 0; font-weight: 600;
    padding: .6rem 1.1rem; border-radius: 9px; text-decoration: none; margin: .25rem .5rem .25rem 0;
    transition: filter .15s ease, transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}
a.button.secondary { background: #fff; color: var(--brand-ink); border: 1px solid color-mix(in srgb, var(--brand) 45%, #fff); }
a.button.secondary:hover { background: var(--brand-soft); filter: none; }
button.link.small { font-size: .85rem; margin-left: .5rem; }
form h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
form small, label small { color: var(--muted); font-size: .8rem; }
.steps h2 { margin-top: .5rem; }
.status { font-size: .78rem; font-weight: 600; padding: .12rem .55rem; border-radius: 999px; white-space: nowrap; }
.status.ok { background: #e3f2e5; color: #1e6b2b; }
.status.pending { background: var(--warn-bg); color: #8a5a00; }

/* Invitaciones imprimibles: 2 por fila en pantalla, tarjetas que no se parten al imprimir */
.invitations { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1rem; margin-top: 1rem; }
.invitation {
    display: grid; grid-template-columns: 170px 1fr; gap: 1rem; align-items: start;
    background: #fff; border: 1px dashed #999; border-radius: 12px; padding: 1rem; break-inside: avoid;
}
.invitation .qr svg { width: 170px; height: 170px; display: block; }
.invitation h3 { margin: 0; font-size: 1.1rem; }
.invitation ol { margin: .5rem 0; padding-left: 1.2rem; font-size: .9rem; }
.invitation .code { font-family: Consolas, monospace; font-size: 1.6rem; letter-spacing: .15em; font-weight: 700; margin: .25rem 0; }

@media print {
    .sidebar, .no-print { display: none !important; }
    .shell { display: block; }
    .content { padding: 0; max-width: none; }
    body, .shell { background: #fff; }
    .invitations { grid-template-columns: 1fr 1fr; gap: .5cm; }
    .invitation { grid-template-columns: 4cm 1fr; }
    .invitation .qr svg { width: 4cm; height: 4cm; }
}

/* Turnos y reporte de asistencia */
.status.bad { background: #fde7e5; color: var(--error); }
.status.info { background: #e3eefa; color: #1f4e79; }
.status.neutral { background: #eef0f3; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.filters label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--muted); }
.quick { display: flex; flex-wrap: wrap; gap: 1rem; margin: .75rem 0 0; }
.days { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
form .days label { flex-direction: row; align-items: center; gap: .25rem; margin: 0; padding: .3rem .55rem;
    border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
form label.check { flex-direction: row; align-items: center; gap: .4rem; color: var(--text); }
td.num, th.num { text-align: right; }
tr.selected td { background: #eef4fb; }
.over { color: var(--error); font-weight: 600; }
.card.spaced { margin-top: 1rem; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }

/* Vista previa de la marca en Empresa */
.preview { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.preview-bar { background: var(--brand); color: var(--on-brand); padding: .9rem 1rem; font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; gap: .6rem; }
/* Sin recuadro: igual que en la app, el logo se pinta tal cual sobre el color de la marca. */
.preview-bar img { height: 36px; width: auto; max-width: 96px; object-fit: contain; }
.preview-banner { display: block; width: 100%; aspect-ratio: 3 / 1; max-height: 160px; object-fit: cover; }
.preview-body { padding: 1.25rem 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.preview-button { background: var(--brand); color: var(--on-brand); padding: .7rem 1.2rem; border-radius: 999px; }
input[type=color] { padding: .2rem; height: 2.6rem; width: 100%; }

/* Bajas y bitácora */
button.primary.inline.danger { background: var(--error); }
label.check.inline { display: inline-flex; align-items: center; gap: .3rem; color: var(--text); }
td > label.check { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .9rem .25rem 0; white-space: nowrap; color: var(--text); }
tr.inactive td { color: var(--muted); }
td.links a + a { margin-left: .75rem; }
td.links button.link + button.link { margin-left: .75rem; }
textarea { width: 100%; font: inherit; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px; resize: vertical; }
.history td { vertical-align: top; font-size: .9rem; }
.history ul { margin: 0; padding-left: 1rem; }
.inline-field { display: flex; gap: .75rem; align-items: center; }
.inline-field input { flex: 1; }
.inline-field button.link { white-space: nowrap; font-size: .85rem; }
.spaced-bottom { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border, #e3e6ea); }

/* Marca: logos y banners */
.image-picker { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.image-picker-label { font-weight: 500; }
.image-picker-row { display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; }
.logo-thumb { height: 56px; width: 56px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: var(--brand); padding: 4px; }
.banner-thumb { height: 56px; width: 168px; object-fit: cover; border: 1px solid var(--border); border-radius: 8px; }
.swatch { display: inline-block; width: .9rem; height: .9rem; border-radius: 4px; vertical-align: middle; margin-right: .15rem; border: 1px solid rgba(0,0,0,.15); }

/* Aviso de privacidad */
.warn { background: var(--warn-bg); padding: .5rem .75rem; border-radius: 8px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; margin: .4rem 0; }
.field-grid label { display: flex; flex-direction: column; gap: .25rem; }
pre.stack { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Consolas, monospace; font-size: .78rem; max-height: 18rem; overflow: auto; background: var(--bg); padding: .6rem; border-radius: 8px; margin: .4rem 0 0; }
pre.notice { white-space: pre-wrap; font-family: inherit; font-size: .9rem; background: var(--bg); padding: .75rem; border-radius: 8px; }
details { margin-bottom: .5rem; }
details summary { cursor: pointer; }

/* Verificación en dos pasos */
.qr svg { width: 200px; height: 200px; }
ul.codes { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; }
ul.codes code { letter-spacing: .05em; }
.user a { color: var(--on-brand); }

/* Avisos */
.badge { display: inline-block; min-width: 1.4em; padding: 0 .4em; margin-left: .3rem; border-radius: 999px;
         background: var(--accent); color: #1d232b; font-size: .8rem; font-weight: 600; text-align: center; }
ul.notifications { list-style: none; padding: 0; margin: .5rem 0 0; }
ul.notifications li { padding: .6rem .75rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: .15rem; }
ul.notifications li.unread { background: var(--warn-bg); border-radius: 8px; }
ul.notifications button.link { text-align: left; padding: 0; }

/* Aviso de pago vencido */
.billing-banner { background: var(--warn-bg); color: #8a5a00; padding: .6rem .9rem; border-radius: 8px; margin-bottom: 1rem; }
.billing-banner.bad { background: #fde7e5; color: var(--error); }

/* Panel del día */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin: 1rem 0; }
.kpi { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .15rem; box-shadow: var(--shadow-sm);
       transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi span { color: var(--muted); font-size: .85rem; }
.kpi b { font-size: 2rem; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); font-size: .78rem; }
/* La destacada lleva una franja arriba que no la hace más alta que las demás. */
.kpi.hl::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand); }
/* Un nombre (empresa, turno) en lugar de un número: más chico para que no ocupe tres renglones. */
.kpi b.kpi-text { font-size: 1.3rem; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.warn-text { color: #8a5a00; }
ul.alerts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
ul.alerts li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem .75rem; border-radius: 8px; background: #eef0f3; }
ul.alerts li.warn { background: var(--warn-bg); }
ul.alerts li.bad { background: #fde7e5; }
ul.alerts li.info { background: #e3eefa; }
ul.alerts li a { white-space: nowrap; font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; }
.bar { display: flex; flex-direction: column; align-items: center; gap: .2rem; color: var(--muted); }
.b-ontime { fill: #5b8a6a; }
.b-late { fill: #e0a100; }
.b-absent { fill: var(--error); }

/* Errores: una página que falla muestra un aviso con "Reintentar"; si se cae la conexión, barra abajo. */
.page-error { border-left: 4px solid var(--error); max-width: 640px; }
#blazor-error-ui {
    display: none; position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 1000; width: min(560px, calc(100% - 2rem));
    padding: .8rem 1.1rem; background: #1d232b; color: #fff; border-radius: 12px; box-shadow: var(--shadow-lg);
    animation: toast-in .3s var(--ease);
}
#blazor-error-ui a { color: #ffd166; }
#blazor-error-ui .reload { font-weight: 600; margin-left: .5rem; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* Cambios en vivo: aviso nuevo o "Actualizar" cuando el administrador cambió algo de la página abierta. */
.live-toast {
    position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 900; width: min(560px, calc(100% - 2rem));
    padding: .8rem 2.4rem .8rem 1.1rem; background: #1d232b; color: #fff; border-radius: 12px; box-shadow: var(--shadow-lg);
    display: grid; gap: .35rem; animation: toast-in .3s var(--ease);
}
.live-toast .link { color: #ffd166; font-weight: 600; margin-left: .4rem; }
.live-toast .dismiss { position: absolute; top: .45rem; right: .6rem; margin: 0; font-size: 1.2rem; color: #fff; }
@media (prefers-reduced-motion: reduce) { .live-toast { animation: none; } }

/* Horas semanales */
table.limits th.current, table.limits td.current { background: #eef4fb; font-weight: 700; color: var(--text); }

/* Tiempo extra */
.two-cols.wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr); }
@media (max-width: 900px) { .two-cols.wide-left { grid-template-columns: minmax(0, 1fr); } }

/* Resumen gerencial */
tr.total td { font-weight: 700; border-top: 2px solid var(--border); background: #f7f8fa; }

/* Procesos y gestión del periodo */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.tabs button { background: #eef0f3; border: 1px solid var(--border); border-radius: 999px; padding: .35rem .8rem; font-size: .88rem; color: var(--text);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.tabs button:hover:not(.on) { background: var(--brand-soft); }
.tabs button.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
code.hash { word-break: break-all; font-size: .78rem; }
ul.notifications.scroll { max-height: 420px; overflow-y: auto; }

/* Selector de idioma (menú lateral, inicio de sesión y Mi cuenta). */
.language select { width: auto; }
.user .language select { background: color-mix(in srgb, var(--on-brand) 8%, transparent); color: var(--on-brand); border-color: color-mix(in srgb, var(--on-brand) 30%, transparent); font-size: .82rem; padding: .25rem .4rem; max-width: 100%; }
.user .language option { color: #000; }
.login .language { position: absolute; top: 1rem; right: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Correo: editor de plantillas y vista previa. */
textarea.code-editor { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; line-height: 1.4; white-space: pre; }
.placeholders { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .8rem; }
.placeholders button.tag { cursor: pointer; border: 1px solid var(--border); font-family: ui-monospace, Consolas, monospace; }
iframe.email-preview { width: 100%; height: 780px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
/* Vacaciones: calendario del mes */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-head { font-size: .8rem; color: var(--muted); text-align: center; padding: .25rem 0; }
.cal-day { min-height: 4.5rem; background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: .2rem; display: flex; flex-direction: column; gap: 2px; }
.cal-day.other { background: #f6f7f9; color: var(--muted); }
.cal-day.today { border-color: var(--brand); }
.cal-entry { background: #e3f1e6; border: 1px solid #b7dcc0; border-radius: 3px; font-size: .75rem; text-align: left; padding: 0 .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.cal-entry.pending { background: #fff6dd; border-style: dashed; border-color: #e0b84a; }
h2.month { margin: 0 .5rem; min-width: 12rem; text-align: center; }

/* Rol semanal */
.table-scroll { overflow-x: auto; }
table.roster { border-collapse: collapse; width: 100%; min-width: 60rem; }
table.roster th, table.roster td { padding: .25rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.roster th.today { color: var(--brand-ink); }
.r-cell { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 2.8rem; padding: .25rem .35rem;
    border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text); font: inherit; font-size: .8rem; text-align: left; cursor: pointer; }
.r-cell span { white-space: nowrap; }
.r-cell small { color: var(--muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.r-cell:disabled { cursor: default; opacity: .6; }
.r-cell.src-shift { background: #eef4fa; border-color: #c9d9ea; }
.r-cell.src-roster { background: #e3f1e6; border-color: #b7dcc0; }
.r-cell.src-off { background: #f6f7f9; color: var(--muted); }
.r-cell.src-holiday { background: #fdeee9; border-color: #f2c4b5; }
.r-cell.src-away { background: #f1ebfa; border-color: #d4c3ee; }
.r-cell.pending { border: 2px dashed #e0b84a; }
.r-cell.selected { outline: 3px solid var(--brand); outline-offset: -1px; }
.roster-legend { display: flex; flex-wrap: wrap; gap: .4rem; }
.roster-legend .r-cell { width: auto; min-height: 0; display: inline-flex; cursor: default; }
.roster-editor, .roster-publish { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.roster-publish input { flex: 1; min-width: 16rem; }

/* Políticas */
.policy-layout { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.policy-list { flex: 1 1 14rem; display: flex; flex-direction: column; gap: .5rem; }
.policy-item { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .6rem .75rem; text-align: left;
    background: var(--card); border: 1px solid var(--border); border-radius: 8px; font: inherit; color: var(--text); cursor: pointer; }
.policy-item small { color: var(--muted); font-size: .78rem; }
.policy-item.on { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.policy-edit { flex: 999 1 28rem; }
.policy-sim { flex: 1 1 20rem; }
.policy-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.policy-edit h3, .policy-sim h3 { margin: 1.1rem 0 .4rem; font-size: 1rem; }
.rule { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.rule > div:first-child { display: flex; flex-direction: column; }
.rule small { color: var(--muted); }
.rule input[type=number] { width: 5rem; }
table.history.compact td, table.history.compact th { padding: .3rem .4rem; font-size: .85rem; }
table.history tr.changed td { background: var(--warn-bg); }
.policy-version { padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .85rem; }
.rule > div:last-child { white-space: nowrap; }
.policy-save { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.policy-save label { display: flex; flex-direction: column; gap: .25rem; }
.policy-save label:last-child { flex: 1; min-width: 16rem; }

/* Reglas de la contraseña nueva: se marcan mientras se escriben. */
.password-rules { list-style: none; padding: 0; margin: .25rem 0; font-size: .9rem; }
.password-rules li::before { content: "○ "; }
.password-rules li.ok::before { content: "✓ "; }
.password-rules li.pending { color: var(--muted); }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Movimiento: entradas suaves y cortas. Se apagan si la computadora pide reducir animaciones. */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
main.content > * { animation: rise-in .32s var(--ease) both; }
main.content > *:nth-child(2) { animation-delay: .03s; }
main.content > *:nth-child(3) { animation-delay: .06s; }
main.content > *:nth-child(4) { animation-delay: .09s; }
main.content > *:nth-child(n+5) { animation-delay: .12s; }
.kpis > *, .grid > * { animation: rise-in .35s var(--ease) both; }
.kpis > :nth-child(2), .grid > :nth-child(2) { animation-delay: .04s; }
.kpis > :nth-child(3), .grid > :nth-child(3) { animation-delay: .08s; }
.kpis > :nth-child(4), .grid > :nth-child(4) { animation-delay: .12s; }
.kpis > :nth-child(n+5), .grid > :nth-child(n+5) { animation-delay: .16s; }
.bars rect { transform-box: fill-box; transform-origin: bottom; animation: grow-up .5s var(--ease) both; }
@keyframes grow-up { from { transform: scaleY(0); } to { transform: none; } }
.badge { animation: pop .3s var(--ease); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.login { animation: rise-in .45s var(--ease) both; }
details[open] > :not(summary) { animation: fade-in .2s ease-out; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* Botón para elegir archivo (logo, banner, Excel). */
input[type=file] { padding: .35rem; max-width: 100%; }
input[type=file]::file-selector-button {
    font: inherit; font-size: .88rem; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft);
    border: 0; border-radius: 7px; padding: .4rem .8rem; margin-right: .75rem; cursor: pointer; transition: filter .15s ease;
}
input[type=file]::file-selector-button:hover { filter: brightness(.96); }

/* Ticket de horas: encabezado con estado, total destacado e historial. Al imprimir sale solo el ticket. */
.ticket-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ticket-total { font-size: 1.1rem; margin: .75rem 0 .25rem; }
.ticket-events { list-style: none; padding: 0; margin: .5rem 0; }
.ticket-events li { padding: .45rem 0; border-bottom: 1px solid var(--border); }
.ticket-events li .status { margin-right: .35rem; }
tr.selected td { background: var(--brand-soft); }
@media print {
    .ticket { box-shadow: none; border: 1px solid #999; }
}

/* Organigrama: cadena de mando y quién autoriza qué. */
.chain { margin: .25rem 0 1rem; padding-left: 1.4rem; }
.chain li { margin: .2rem 0; }
.route { border-top: 1px solid var(--border); padding: .6rem 0; }
.route:first-child { border-top: 0; }
.route ol { margin: .3rem 0 0; padding-left: 1.4rem; }
.step-editor { border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; margin: .5rem 0; }
.state-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; background: var(--muted); }
.state-dot.ok { background: #2e9b44; }
.state-dot.pending { background: #d49a00; }
.state-dot.bad { background: var(--error); }
.state-dot.info { background: #2f6fb3; }
button.kpi, a.kpi { text-align: left; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
button.kpi.hl { border-color: var(--brand); }
/* Condiciones de trabajo: lista por secciones y aviso emergente de cambios (MainLayout). */
.cond-section { margin-bottom: 1rem; }
.cond-section h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--brand-ink); }
.cond-list { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: .35rem 1rem; margin: 0; }
.cond-list dt { font-weight: 600; }
.cond-list dd { margin: 0; }
/* «Cambiar en …» / «Ver ficha»: el dato se ve aquí pero se captura en otra página. */
.cond-link, .employee-link { font-size: .8rem; font-weight: 500; margin-left: .5rem; white-space: nowrap; }
td > .employee-link { font-size: inherit; margin-left: 0; }
.cond-list.glance { margin-bottom: 1rem; }
.cond-list dd small { display: block; color: var(--muted); }
.cond-change { border: 1px solid var(--border); border-radius: 10px; padding: .75rem 1rem; margin-bottom: .75rem; background: var(--card); }
.cond-change .diff { margin: .15rem 0 .5rem; }
.cond-change .before { color: var(--muted); text-decoration: line-through; }
.cond-change .pending { color: #8A5A00; font-weight: 600; }
/* Encima de la barra de arriba y del menú del celular (50 y 60). */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: grid; place-items: center; z-index: 75; padding: 1rem; animation: fade-in .2s ease-out; }
.modal { animation: modal-in .26s var(--ease) both; background: var(--card); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,.25); max-width: 40rem; width: 100%; max-height: 85vh; overflow-y: auto; padding: 1.4rem 1.5rem; }
.modal h2 { margin-top: 0; }
.modal .actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1rem; }
.modal .actions button.primary { width: auto; }
@media (max-width: 640px) { .cond-list { grid-template-columns: 1fr; } .cond-list dd { margin-bottom: .4rem; } }
.small { font-size: .85rem; }

/* Novedades: versión abajo del menú y página con lo que trae cada versión. */
.user a.version-link { font-weight: 400; font-size: .8rem; opacity: .9; }
.user a.version-link:hover { opacity: 1; }
.release h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.release h3 { font-size: 1rem; margin: 1rem 0 .25rem; }
.release ul { margin: .25rem 0 0; padding-left: 1.25rem; }
.release li { margin: .2rem 0; }
.pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: .75rem; font-weight: 600; }

/* Contratos: el texto en una caja que se lee hasta el final antes de aceptar. */
.contract-text { max-height: 55vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.contract-text:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.contract-text pre.notice { margin: 0; }
.contract-status { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }


/* Interruptor (por ejemplo "Recordar empresa" al entrar): gris apagado, verde encendido (el rojo se leía como error). */
form label.switch { flex-direction: row; align-items: center; gap: .6rem; color: var(--text); cursor: pointer; user-select: none; }
label.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.switch .switch-track {
    position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px;
    background: #7c8798; transition: background-color .18s var(--ease);
}
label.switch .switch-track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease);
}
label.switch input:checked + .switch-track { background: #2e9e44; }
label.switch input:checked + .switch-track::after { transform: translateX(18px); }
label.switch input:focus-visible + .switch-track { box-shadow: var(--ring); }
@media (prefers-reduced-motion: reduce) { label.switch .switch-track, label.switch .switch-track::after { transition: none; } }
/* Ayuda: botón flotante, panel lateral con la ayuda de la página, bienvenida y centro de ayuda. */
.help-fab {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: inline-flex; align-items: center; gap: .45rem;
    background: var(--brand); color: var(--on-brand); border: 0; border-radius: 999px; padding: .6rem 1rem .6rem .8rem; font-weight: 600;
    box-shadow: var(--shadow-lg); transition: transform .15s var(--ease), filter .15s ease;
}
.help-fab:hover { filter: brightness(1.08); transform: translateY(-1px); }
.help-fab .ico { width: 1.3rem; height: 1.3rem; }
.content { padding-bottom: 5rem; }
.help-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(10, 15, 25, .35); border: 0; animation: fade-in .2s ease-out; }
.help-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(440px, 100vw); overflow-y: auto;
    background: var(--card); box-shadow: var(--shadow-lg); padding: 1.1rem 1.4rem 2rem; animation: slide-in .28s var(--ease) both;
}
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }
.help-drawer header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.help-kicker { display: inline-flex; align-items: center; gap: .4rem; color: var(--brand-ink); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.help-close { background: none; border: 0; color: var(--muted); padding: .35rem; border-radius: 8px; display: inline-flex; }
.help-close:hover { background: var(--bg); color: var(--text); }
.help-close .ico { width: 1.3rem; height: 1.3rem; }
.help-drawer h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.help-drawer h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1.1rem 0 .4rem; }
.help-drawer p { margin: 0; }
.help-steps, .help-tips, .help-links { margin: 0; padding-left: 1.3rem; }
.help-steps li, .help-tips li, .help-links li { margin: .3rem 0; }
.help-steps li::marker { color: var(--brand-ink); font-weight: 700; }
.help-faq { border-bottom: 1px solid var(--border); padding: .5rem 0; }
.help-faq summary { cursor: pointer; font-weight: 600; }
.help-faq p { margin: .4rem 0 .2rem; color: var(--text); }
.help-all { margin-top: 1.5rem !important; }
.help-scrim.static { z-index: 80; }
.help-welcome {
    position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 2rem));
    box-shadow: var(--shadow-lg); border-top: 5px solid var(--accent); padding: 1.6rem; animation: welcome-in .3s var(--ease) both;
}
@keyframes welcome-in { from { opacity: 0; transform: translate(-50%, -47%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%); } }
.help-welcome h2 { font-size: 1.35rem; }
.help-welcome .actions { align-items: center; }
/* «Pregúntale a la ayuda»: la caja, las preguntas sugeridas y la respuesta armada con la ayuda. */
.help-ask { margin: 1rem 0; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; max-width: 760px; }
.help-ask-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.help-ask-row input { flex: 1 1 240px; min-width: 0; padding: .7rem .9rem; font-size: 1rem; }
.help-suggested { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 1rem; max-width: 760px; }
.help-suggested > small { flex-basis: 100%; }
.help-suggested .chip {
    background: var(--card); border: 1px solid var(--border); color: var(--text); border-radius: 999px;
    padding: .4rem .8rem; font-size: .88rem; cursor: pointer; text-align: left; max-width: 100%;
}
.help-suggested .chip:hover, .help-suggested .chip:focus-visible { border-color: var(--brand-ink); color: var(--brand-ink); }
.help-answer { border-left: 5px solid var(--accent); padding: 1rem 1.25rem; max-width: 760px; }
.help-answer h2 { font-size: 1.2rem; margin: .4rem 0; }
.help-answer p { margin: 0 0 .5rem; }
.help-answer ul { margin: 0 0 .75rem; padding-left: 1.3rem; }
.help-answer li { margin: .25rem 0; }
.help-drawer-ask { display: flex; gap: .4rem; margin: 0 0 1rem; }
.help-drawer-ask input { flex: 1; min-width: 0; padding: .5rem .7rem; }
h2.help-section { margin: 1.75rem 0 .5rem; }
.help-grid { margin-top: .5rem; }
.help-grid .tile h3 { margin: 0 0 .35rem; font-size: 1rem; }
.help-grid .tile p { margin: 0 0 .5rem; font-size: .9rem; }
.help-topics { display: flex; flex-direction: column; gap: .5rem; }
.help-topic { padding: .8rem 1.1rem; }
.help-topic summary { cursor: pointer; }
.help-topic h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .9rem 0 .3rem; }
.help-topic ol, .help-topic ul { margin: 0 0 .5rem; padding-left: 1.3rem; }
a.button.small { padding: .4rem .8rem; font-size: .88rem; }
.help-guide { list-style: none; counter-reset: paso; padding: .5rem 1.25rem; margin-top: 1rem; }
.help-guide li { counter-increment: paso; display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; padding: .9rem 0 .9rem 2.6rem; border-bottom: 1px solid var(--border); position: relative; }
.help-guide li:last-child { border-bottom: 0; }
.help-guide li::before {
    content: counter(paso); position: absolute; left: 0; top: .85rem; width: 1.8rem; height: 1.8rem; border-radius: 999px;
    display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; font-size: .9rem;
}
.help-guide li.done::before { content: "✓"; background: #e3f2e5; color: #1e6b2b; }
.help-guide li p { margin: 0 0 .4rem; }
.help-progress { margin: .5rem 0 0; }
@media (max-width: 900px) {
    .help-fab { right: .9rem; bottom: .9rem; padding: .7rem; }
    .help-fab span { display: none; }
}
@media print { .help-fab, .help-drawer, .help-scrim, .help-welcome { display: none !important; } }

/* Mi plan: módulos incluidos (palomita) y los que se pueden agregar (+) */
.module-list { list-style: none; padding: 0; margin: .4rem 0 .8rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .35rem .75rem; }
.module-list li::before { content: "✓"; color: var(--brand-ink); font-weight: 700; margin-right: .45rem; }
.module-list.off li { color: var(--muted); }
.module-list.off li::before { content: "+"; color: var(--muted); }

/* Buscador de personas (PersonPicker) */
.person-picker { display: flex; flex-direction: column; gap: .3rem; min-width: 16rem; position: relative; }
.person-picker .picked { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; color: var(--text); font-weight: 600; }
.person-picker .picked small, .picker-list small { font-weight: 400; }
.picker-drop { position: absolute; top: 100%; left: 0; min-width: min(24rem, 90vw); z-index: 30; margin-top: .25rem; display: flex; flex-direction: column; gap: .3rem;
    background: var(--card); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow-md, 0 8px 24px rgba(16, 24, 40, .12)); padding: .35rem; }
.picker-drop > small { padding: 0 .4rem .2rem; }
.picker-list { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.picker-list button { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; width: 100%; text-align: left; background: none;
    border: 0; border-radius: 6px; padding: .45rem .55rem; color: var(--text); cursor: pointer; font: inherit; }
.picker-list button:hover, .picker-list button:focus-visible, .picker-list button.first { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.card:has(.picker-drop) { position: relative; z-index: 5; }

/* Menú del proveedor (personal de iAstoy): separado del de la empresa, con fondo oscuro y candado. */
.nav-provider {
    margin-top: .6rem; border-radius: 12px; padding: .1rem .35rem .45rem;
    background: rgba(8, 24, 52, .55); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-brand) 18%, transparent);
}
.nav-provider .nav-group { opacity: .85; }
.nav-provider .nav-group > span { display: inline-flex; align-items: center; gap: .4rem; }
.nav-role { margin: -.1rem .7rem .35rem; font-size: .75rem; opacity: .9; }
/* Etiqueta de lo que solo ve el Dueño de iAstoy (menú y títulos). */
.owner-only {
    display: inline-block; margin-left: auto; font-size: .7rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
    padding: .12rem .4rem; border-radius: 99px; background: #b3261e; color: #fff; vertical-align: middle;
}
h1 .owner-only { margin-left: .5rem; font-size: .75rem; }

/* Decidir varias a la vez */
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .6rem .75rem; margin-bottom: .75rem;
    border: 1px solid var(--border); border-radius: 9px; background: color-mix(in srgb, var(--brand) 5%, var(--card)); }
.bulk-bar .grow { flex: 1 1 14rem; min-width: 0; }

/* Mapa de OpenStreetMap (GeoMap.razor + mapa.js) */
.map-box { height: 320px; margin: .5rem 0; }
.mapa { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: #e8ecef; cursor: grab; touch-action: none; user-select: none; }
.mapa:active { cursor: grabbing; }
.mapa-capa, .mapa-marcas { position: absolute; inset: 0; }
.mapa-marcas { pointer-events: none; }
.mapa-capa img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; }
.mapa-pin, .mapa-punto, .mapa-circulo { position: absolute; left: 0; top: 0; }
.mapa-pin::after { content: ""; position: absolute; width: 18px; height: 18px; left: -9px; top: -24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    background: var(--brand); border: 2px solid #fff; box-shadow: var(--shadow); }
.mapa-circulo { border-radius: 50%; translate: -50% -50%; border: 2px solid var(--brand); background: color-mix(in srgb, var(--brand) 15%, transparent); }
.mapa-punto { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: var(--shadow-sm); pointer-events: auto; }
.mapa-punto.alerta { background: #d97706; }
.mapa-botones { position: absolute; top: .5rem; left: .5rem; display: flex; flex-direction: column; gap: 2px; }
.mapa-botones button { width: 2rem; height: 2rem; padding: 0; font-size: 1.1rem; line-height: 1; background: var(--card); color: var(--text); border: 1px solid var(--border); }
.mapa-credito { position: absolute; right: 0; bottom: 0; padding: 0 .35rem; font-size: .7rem; background: rgba(255, 255, 255, .8); }
.map-search { display: flex; gap: .5rem; align-items: center; }
.map-search input { flex: 1; }
.map-search button { flex: none; width: auto; }
.map-results { border: 1px solid var(--border); border-radius: 8px; margin: .25rem 0; }

/* Lista vacía con el primer paso (EmptyState.razor) */
.empty-state { display: grid; justify-items: center; gap: .6rem; padding: 1.4rem 1rem; border: 1px dashed var(--border); border-radius: 10px; text-align: center; color: var(--muted); }
.empty-state p { margin: 0; max-width: 60ch; }

/* Asistente de Primeros pasos (SetupWizard.razor) */
.wizard-progress { display: flex; align-items: center; gap: .8rem; margin: .5rem 0 1rem; }
.wizard-progress progress { flex: 1; max-width: 28rem; height: .6rem; accent-color: var(--brand); }
.wizard-dots { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; }
.wizard-dots button { width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 50%; background: var(--card); color: var(--text); border: 1px solid var(--border); font-weight: 600; }
.wizard-dots button.done { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.wizard-dots button.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.wizard-step h2 { margin-top: .2rem; }
.wizard-step .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; }

/* Tickets de soporte: conversación con la empresa a la izquierda e iAstoy a la derecha; notas internas en amarillo. */
.ticket-thread { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.ticket-msg { max-width: 92%; border: 1px solid var(--border); border-radius: 10px; padding: .55rem .7rem; background: var(--card); }
.ticket-msg.provider { align-self: flex-end; background: color-mix(in srgb, var(--brand) 7%, var(--card)); }
/* Mesa de ayuda: el trabajador que reportó, a la izquierda con otro tono; la gente de la empresa, como siempre. */
.ticket-msg.employee { background: color-mix(in srgb, #2e9d5b 8%, var(--card)); }
.ticket-msg.escalated { border-color: var(--brand); border-width: 2px; }
.ticket-search { display: flex; flex-wrap: wrap; gap: .4rem; align-items: end; margin-bottom: .6rem; }
.ticket-search input[type=search] { min-width: 14rem; flex: 1; }
.ticket-msg.internal { background: color-mix(in srgb, #f5b400 14%, var(--card)); border-style: dashed; }
.ticket-msg pre.notice { margin: .35rem 0 0; background: transparent; padding: 0; }
.ticket-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }
.ticket-change { text-align: center; }
.ticket-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.ticket-counts { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.ticket-counts button.active { background: var(--brand); color: var(--on-brand); }
.stars { display: inline-flex; gap: .15rem; }
.stars button { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #f5b400; padding: 0 .1rem; }

/* Saltar al contenido: el primer Tab lleva directo a la página sin recorrer todo el menú (teclado y lectores de pantalla). */
.skip-link {
    position: absolute; left: .75rem; top: -4rem; z-index: 100; padding: .6rem 1rem; border-radius: 9px;
    background: var(--card); color: var(--brand-ink); font-weight: 600; box-shadow: var(--shadow-lg);
}
.skip-link:focus, .skip-link:focus-visible { top: .75rem; }
main.content:focus { outline: none; }

/* ---- Accesibilidad de cada persona (Mi cuenta → Accesibilidad). accesibilidad.js pone estos atributos en <html>. ---- */
/* Tamaño de letra: todo está en rem, así crece la página completa (con el tamaño del navegador encima). */
html[data-text="1"] { font-size: 112.5%; }
html[data-text="2"] { font-size: 131.25%; }
html[data-text] .sidebar { width: 280px; }
/* Texto más grueso. */
html[data-bold] body { font-weight: 500; }
html[data-bold] b, html[data-bold] strong, html[data-bold] th, html[data-bold] h1, html[data-bold] h2, html[data-bold] h3 { font-weight: 800; }
html[data-bold] .muted, html[data-bold] small, html[data-bold] label { font-weight: 600; }
/* Alto contraste: texto negro, bordes oscuros, sin transparencias en el menú y enlaces siempre subrayados. */
html[data-contrast] {
    --text: #000; --muted: #2b333d; --border: #59636e; --bg: #fff; --card: #fff;
    --brand-soft: #fff; --ring: 0 0 0 3px #000;
}
html[data-contrast] .card, html[data-contrast] input, html[data-contrast] select, html[data-contrast] textarea { border-width: 2px; border-color: var(--border); }
html[data-contrast] .sidebar { background: color-mix(in srgb, var(--brand) 55%, #000); --on-brand: #fff; }
html[data-contrast] .topbar { background: color-mix(in srgb, var(--brand) 55%, #000); --on-brand: #fff; }
html[data-contrast] .sidebar nav a, html[data-contrast] .nav-group, html[data-contrast] .user a, html[data-contrast] .sidebar a.version-link { opacity: 1; }
html[data-contrast] .sidebar nav a.active { outline: 2px solid #fff; }
html[data-contrast] a, html[data-contrast] button.link { text-decoration: underline; text-decoration-thickness: 2px; }
html[data-contrast] :focus-visible { box-shadow: none; outline: 3px solid #000; outline-offset: 2px; }
html[data-contrast] .sidebar :focus-visible { outline-color: #fff; }
html[data-contrast] th { background: #e9ecef; color: #000; }
html[data-contrast] .status, html[data-contrast] .tag, html[data-contrast] .pill { outline: 1px solid #000; }
/* Menos movimiento: igual que si el sistema lo pidiera (prefers-reduced-motion). */
html[data-motion] *, html[data-motion] *::before, html[data-motion] *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
}
.a11y-options { display: grid; gap: .25rem; }
.a11y-options legend { font-weight: 600; margin-bottom: .25rem; }
.a11y-options label.switch { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; font-weight: 500; cursor: pointer; position: relative; }
.a11y-options label.switch + p { margin: .1rem 0 .4rem 3.1rem; }
.a11y-sizes { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .75rem; }
.a11y-sizes label { flex-direction: row; align-items: center; gap: .4rem; border: 1px solid var(--border); border-radius: 9px; padding: .45rem .75rem; margin: 0; color: var(--text); cursor: pointer; }
.a11y-sizes label:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft); }
.a11y-sizes .s1 { font-size: 1.125rem; }
.a11y-sizes .s2 { font-size: 1.3rem; }
.contrast-warning { border-left: 4px solid #b54708; background: var(--warn-bg); padding: .55rem .75rem; border-radius: 8px; font-size: .9rem; margin: 0 0 .85rem; }

/* Uso de la app: barras por semana (porcentaje de gente que checó con la app). */
.week-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: .5rem; align-items: end; height: 160px; margin: .5rem 0; }
.week-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .15rem; }
.week-bar .fill { width: 70%; max-width: 48px; background: var(--brand); border-radius: 6px 6px 0 0; transition: height .4s var(--ease); }
.week-bar small { font-variant-numeric: tabular-nums; }

/* Foto de perfil en la ficha del trabajador. */
.emp-summary .emp-photo { float: right; display: flex; flex-direction: column; align-items: center; gap: .25rem; margin-left: 1rem; }
.emp-summary .emp-photo img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }

/* Pases de revisión: banda del modo soporte, código que se da una sola vez y consultas bloqueadas. */
.support-banner { font-weight: 600; border: 2px solid var(--error); }
.support-banner button.link { margin-left: .5rem; }
.support-banner .ico { width: 1.1rem; height: 1.1rem; vertical-align: -.2em; margin-right: .3rem; }
.pass-code { font: 700 2rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .15em; text-align: center; padding: .8rem; border: 2px dashed var(--brand, #1A5DAB); border-radius: 10px; user-select: all; }
tr.bad-row td { background: #fde7e5; }
.pass-strip .row { align-items: flex-end; }
.pass-strip ul.plain { list-style: none; padding: 0; margin: .5rem 0; }
.pass-strip ul.plain li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .3rem 0; }
.pass-box { margin: 1rem 0; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .2rem .8rem; }
.pass-events { table-layout: fixed; width: 100%; }
.pass-events th:first-child { width: 6.5rem; }
.pass-events th:last-child { width: 7rem; }
.pass-events .pass-query { overflow-wrap: anywhere; }
.pass-change { border: 1px solid var(--border, #dde3ea); border-radius: 8px; padding: .5rem .7rem; margin: .5rem 0; }
.pass-change.reverted { opacity: .65; }
.pass-change table { margin: .3rem 0; }
.support-banner.emergency { background: #b3261e; color: #fff; }
.emergency-box { margin-top: .6rem; border-left: 4px solid #b3261e; padding-left: .6rem; }
.emergency-box summary { color: #b3261e; font-weight: 600; cursor: pointer; }
.emergency-title { color: #b3261e; }

/* Portal: cambios de turno que me ofrecen o me piden. */
ul.swap-list { list-style: none; padding: 0; margin: 0; }
ul.swap-list li { padding: .6rem 0; border-bottom: 1px solid var(--border, #e5e7eb); }
ul.swap-list li:last-child { border-bottom: 0; }

/* Comunicados: el texto se muestra con sus saltos de línea; lista de sucursales con casillas. */
.announcement-body { white-space: pre-wrap; overflow-wrap: anywhere; border-left: 3px solid var(--border, #ddd); padding: .25rem 0 .25rem .75rem; margin: .75rem 0; }
.announcement-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.visit-facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: .75rem 0; }
.visit-facts dt { font-weight: 600; }
.visit-facts dd { margin: 0; }
.visit-photos { display: flex; flex-wrap: wrap; gap: .75rem; margin: .75rem 0; align-items: flex-start; }
.visit-photos img { width: 9rem; height: 9rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--border, #ddd); }
.visit-photos img.signature { object-fit: contain; background: #fff; }
.visit-photos figure { margin: 0; }
.visit-photos figcaption { font-size: .8rem; color: var(--muted, #666); max-width: 9rem; }
.visit-summary { display: flex; flex-wrap: wrap; gap: .5rem; }
.checks-list { display: flex; flex-direction: column; gap: .2rem; max-height: 14rem; overflow-y: auto; margin: .25rem 0; }

/* ---- Pulido general (2026-11-03) ---- */
/* Cajas de texto y listas con la misma altura: en una fila de filtros quedan parejas. */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]), select { height: 2.6rem; }
.sidebar .nav-search input, .user .language select { height: auto; }
/* Celular: cada filtro ocupa todo el ancho y los renglones de varios campos se acomodan solos. */
@media (max-width: 640px) {
    .filters > label, .filters > .person-picker { flex: 1 1 100%; }
    .filters > label > input, .filters > label > select, .filters > .person-picker input { width: 100%; }
    .filters > button, .filters > a.button { flex: 1 1 auto; }
    .card { padding: 1.1rem 1rem; }
}
/* Pantallas táctiles: renglones y botones chicos crecen a unos 44 px para que se toquen con el dedo sin fallar. */
@media (pointer: coarse) {
    .sidebar nav a { padding-top: .68rem; padding-bottom: .68rem; }
    .nav-group { min-height: 2.75rem; }
    .star-button, .help-close, .menu-toggle { min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; }
    .nav-row .star-button { right: 0; }
    .hub-card li > a { padding-top: .6rem; padding-bottom: .6rem; }
    .tabs button { padding: .55rem .95rem; }
}
select { max-width: 100%; }
/* Un párrafo completo con estilo de etiqueta (por ejemplo «Todavía no configuras el correo»): sí se parte en renglones. */
p.status, div.status { white-space: normal; display: block; border-radius: 10px; padding: .45rem .7rem; font-size: .85rem; }

/* Tablas en el celular: cada renglón es una tarjeta, con el título de la columna a la izquierda de cada dato
   (tablas.js copia los títulos a data-label). Así nada se corta ni hay que mover la tabla de lado. */
@media (max-width: 640px) {
    table.stack { display: block; font-size: .92rem; }
    table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    table.stack tbody, table.stack tfoot { display: flex; flex-direction: column; gap: .6rem; }
    table.stack tr { display: block; border: 1px solid var(--border); border-radius: 10px; padding: .2rem .8rem; background: var(--card); }
    /* El título va a la izquierda (posición fija) y el dato a la derecha, aunque el dato sean varias piezas. */
    table.stack td {
        display: block; position: relative; min-height: 2.2rem; padding: .5rem 0 .5rem calc(36% + .75rem);
        border-bottom: 0; text-align: left; overflow-wrap: anywhere;
    }
    /* La línea va arriba de cada dato (no abajo), así no queda una línea suelta si el último dato está vacío. */
    table.stack td + td { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
    table.stack td::before {
        content: attr(data-label); position: absolute; left: 0; top: .62rem; width: 36%;
        color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1.3;
    }
    /* Celdas sin título (casilla, acciones o un aviso a todo lo ancho): a todo lo ancho. */
    table.stack td[data-label=""] { padding-left: 0; }
    table.stack td[data-label=""]::before { display: none; }
    table.stack td.num { text-align: left; }
    table.stack td.links a + a, table.stack td.links button.link + button.link { margin-left: 1rem; }
    table.stack tbody tr:hover td { background: none; }
    table.stack tr.flagged, table.stack tr.bad-row, table.stack tr.selected, table.stack tr.changed { background: var(--warn-bg); }
    table.stack tr.bad-row { background: #fde7e5; }
    table.stack tr.selected { background: var(--brand-soft); border-color: var(--brand); }
    table.stack tr.flagged td, table.stack tr.bad-row td, table.stack tr.selected td, table.stack tr.changed td { background: none; }
    table.stack tr.inactive { opacity: .8; }
    table.stack tr.total { border-width: 2px; }
    table.stack .status { white-space: normal; display: inline-block; }
    table.stack td.vacia { display: none; }
    table.stack { margin-top: .75rem; }
}
/* Casilla suelta en una tarjeta (fuera de un formulario): en su propio renglón, con su explicación abajo. */
.card > label.check { display: flex; align-items: center; gap: .45rem; margin: .85rem 0 .2rem; color: var(--text); }
.card > label.check + small, .card > label.check ~ small.muted { display: block; }
/* En una columna angosta (pantalla mediana) el buscador de personas y el del mapa se encogen en lugar de salirse. */
.person-picker { min-width: min(16rem, 100%); }
.map-search input, .inline-field input { min-width: 0; }
.filters > label { min-width: 0; max-width: 100%; }
.filters > label > input, .filters > label > select { max-width: 100%; }

/* Enviar a nómina: las claves son cortas (FINJ, HE2) y los botones van uno junto al otro. */
input.payroll-code { width: 9rem; max-width: 100%; box-sizing: border-box; }
.payroll-actions button.primary { width: auto; }
/* Asistente de Enviar a nómina */
.payroll-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.payroll-banner p { margin: 0; flex: 1 1 20rem; }
.payroll-banner button, .payroll-wizard .actions button, .payroll-checks + button { width: auto; }
.payroll-systems { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.payroll-system { display: grid; grid-template-columns: auto 1fr; gap: .25rem .5rem; align-items: start; padding: .8rem; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--card); }
.payroll-system input { margin: .2rem 0 0; width: auto; }
.payroll-system span { grid-column: 2; font-size: .9rem; }
.payroll-system.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.payroll-req { padding-left: 1.2rem; }
.payroll-req li { margin: .3rem 0; }
.payroll-checks { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .55rem; }
.payroll-checks li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; align-items: start; }
.payroll-checks .status { justify-self: start; }
.payroll-checks button.link { width: auto; }
.payroll-checks a, .payroll-checks button.link { display: inline-block; margin-left: .3rem; }
.payroll-names { display: block; margin-top: .15rem; }
.payroll-preview .status { white-space: normal; display: inline-block; }
.payroll-wizard button.secondary { background: var(--card); color: var(--brand-ink); border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--card)); padding: .6rem 1.1rem; border-radius: 9px; font-weight: 600; }
.payroll-wizard button.secondary:hover:not(:disabled) { background: var(--brand-soft); }
@media (max-width: 640px) { .payroll-checks li { grid-template-columns: 1fr; gap: .2rem; } }

/* Página de Avisos: un renglón con ícono y color por tipo, agrupados por día y con los repetidos juntos. */
.notif-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 1rem 0 .25rem; }
.notif-bar .tabs { margin: 0; }
.notif-readall { display: inline-flex; align-items: center; gap: .4rem; background: var(--card); color: var(--brand-ink); border: 1px solid var(--border);
                 border-radius: 999px; padding: .35rem .85rem; font-size: .88rem; font-weight: 600; transition: background-color .15s ease, border-color .15s ease; }
.notif-readall:hover { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.notif-day { margin-top: 1.4rem; }
.notif-day h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; margin: 0 0 .55rem .2rem; display: flex; align-items: center; }
.notif-list { list-style: none; padding: 0; margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.notif { --tone: #5d6877; --tone-bg: #eef0f3;
         position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; align-items: start;
         padding: .9rem 1.1rem; border-top: 1px solid var(--border); transition: background-color .15s ease; animation: fade-in .25s ease-out both; }
.notif:first-child { border-top: 0; }
.notif:hover { background: color-mix(in srgb, var(--brand) 3%, var(--card)); }
.notif.unread { background: color-mix(in srgb, var(--brand) 5%, var(--card)); }
.notif.unread:hover { background: color-mix(in srgb, var(--brand) 8%, var(--card)); }
.notif.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone); }
.notif-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--tone-bg); color: var(--tone); }
.notif-icon .ico { width: 1.25rem; height: 1.25rem; vertical-align: 0; }
.notif-main { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
/* El título ocupa todo el renglón para tocarlo (el botón «Ver los N» queda encima). */
.notif-title { all: unset; cursor: pointer; font-weight: 500; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
.notif-title::after { content: ""; position: absolute; inset: 0; }
.notif.unread .notif-title { font-weight: 650; }
.notif-title:focus-visible { outline: none; }
.notif:has(.notif-title:focus-visible) { box-shadow: inset var(--ring); }
.notif-body { margin: 0; color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.notif-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: .2rem; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.notif-tag { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: var(--tone-bg); color: var(--tone); font-weight: 600; font-size: .74rem; }
.notif-more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: .1rem .2rem; color: var(--brand-ink); font-size: .8rem; font-weight: 600; border-radius: 6px; }
.notif-more:hover { text-decoration: underline; }
.notif-count { display: inline-block; min-width: 1.6em; padding: 0 .4em; border-radius: 999px; background: var(--tone); color: #fff; font-size: .74rem; text-align: center; }
.notif-repeats { position: relative; z-index: 1; list-style: none; margin: .4rem 0 0; padding: .4rem 0 0 .75rem; border-left: 2px solid var(--tone-bg); display: grid; gap: .25rem; font-size: .85rem; }
.notif-repeats li.unread button { font-weight: 650; }
.notif-dot { width: .6rem; height: .6rem; margin-top: .45rem; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 3px var(--tone-bg); }
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2.2rem 1rem; text-align: center; }
.notif-empty p { margin: 0; }
.notif-empty .notif-icon { --tone: #5d6877; --tone-bg: #eef0f3; width: 3rem; height: 3rem; }
.notif-empty .notif-icon.tone-resuelto { --tone: #1a7f37; --tone-bg: #e3f4e8; }
/* Familias de color (texto con contraste AA sobre su fondo y sobre blanco). */
.tone-seguridad { --tone: #b42318; --tone-bg: #fde8e6; }
.tone-autorizar { --tone: #9a5b00; --tone-bg: #fff1d6; }
.tone-resuelto  { --tone: #1a7f37; --tone-bg: #e3f4e8; }
.tone-rechazado { --tone: #b42318; --tone-bg: #fde8e6; }
.tone-horario   { --tone: #6941c6; --tone-bg: #efeafd; }
.tone-reportes  { --tone: #175cd3; --tone-bg: #e5efff; }
.tone-soporte   { --tone: #0e7490; --tone-bg: #e0f4f8; }
.tone-plan      { --tone: var(--brand-ink); --tone-bg: var(--brand-soft); }
.tone-personas  { --tone: #c11574; --tone-bg: #fce7f3; }
.tone-otros     { --tone: #5d6877; --tone-bg: #eef0f3; }
html[data-contrast] .notif-tag, html[data-contrast] .notif-icon { outline: 1px solid currentColor; }
html[data-contrast] .notif-body, html[data-contrast] .notif-meta { color: var(--text); }
@media (max-width: 640px) {
    .notif { padding: .8rem .85rem; gap: .7rem; }
    .notif-icon { width: 2.2rem; height: 2.2rem; border-radius: 10px; }
}

/* ---- Diseño premium (2026-11-05): botones con relieve y luz, tarjetas con profundidad, carga con esqueleto ---- */
/* La luz y la sombra salen del color de cada empresa (--brand), así se ve bien con cualquier marca. */
:root {
    --shadow-depth: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 24px -14px rgba(16, 24, 40, .22);
}
button.primary, a.button:not(.secondary), button.primary.inline, .tabs button.on {
    --btn-c: var(--brand);
    --btn-light: color-mix(in srgb, var(--btn-c) 80%, #fff);
    --btn-dark: color-mix(in srgb, var(--btn-c) 86%, #000);
}
button.primary, a.button:not(.secondary), button.primary.inline {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 10px;
    background: linear-gradient(180deg, var(--btn-light) 0%, var(--btn-c) 52%, var(--btn-dark) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 0 rgba(0,0,0,.14),
                0 1px 2px rgba(16,24,40,.18), 0 6px 14px -5px color-mix(in srgb, var(--btn-c) 55%, transparent);
    transition: transform .14s var(--ease), box-shadow .18s ease, filter .18s ease;
}
button.primary.inline.danger, button.primary.danger {
    --btn-c: var(--error); --btn-light: color-mix(in srgb, var(--error) 80%, #fff); --btn-dark: color-mix(in srgb, var(--error) 86%, #000);
    background: linear-gradient(180deg, var(--btn-light) 0%, var(--btn-c) 52%, var(--btn-dark) 100%);
}
/* Destello que cruza el botón al pasar el ratón. */
button.primary::after, a.button:not(.secondary)::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%);
}
button.primary:hover:not(:disabled), a.button:not(.secondary):hover {
    transform: translateY(-1px); filter: brightness(1.04);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 0 rgba(0,0,0,.14),
                0 2px 4px rgba(16,24,40,.16), 0 10px 22px -7px color-mix(in srgb, var(--btn-c) 65%, transparent);
}
button.primary:hover:not(:disabled)::after, a.button:not(.secondary):hover::after { transform: translateX(120%); transition: transform .7s ease; }
/* Al presionar se hunde. */
button.primary:active:not(:disabled), a.button:not(.secondary):active {
    transform: translateY(1px); filter: brightness(.97);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.22), 0 1px 1px rgba(16,24,40,.12);
}
button.primary:disabled { box-shadow: none; filter: saturate(.7); }
/* Botones claros (secundarios): blanco con un poco de luz arriba y sombra suave. */
a.button.secondary, button.secondary, .payroll-wizard button.secondary, button.inline:not(.primary):not(.link) {
    background: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--card) 94%, #8a96a8) 100%);
    color: var(--brand-ink); border: 1px solid color-mix(in srgb, var(--border) 70%, #b9c2ce); border-radius: 10px; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(16,24,40,.08);
    transition: transform .14s var(--ease), box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
button.secondary, button.inline:not(.primary):not(.link) { padding: .6rem 1.1rem; }
a.button.secondary:hover, button.secondary:hover:not(:disabled), .payroll-wizard button.secondary:hover:not(:disabled), button.inline:not(.primary):not(.link):hover:not(:disabled) {
    transform: translateY(-1px); background: linear-gradient(180deg, var(--card) 0%, var(--brand-soft) 100%);
    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px -3px rgba(16,24,40,.18);
}
a.button.secondary:active, button.secondary:active:not(:disabled), button.inline:not(.primary):not(.link):active:not(:disabled) {
    transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(16,24,40,.12);
}
button.inline.danger:not(.primary) { color: var(--error); background: linear-gradient(180deg, var(--card), #fdf1f0); border-color: #f1c4bf; }
/* Pestañas: la elegida con relieve de la marca. */
.tabs button.on { background: linear-gradient(180deg, var(--btn-light), var(--brand) 60%, var(--btn-dark));
                  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 8px -3px color-mix(in srgb, var(--brand) 55%, transparent); }

/* Tarjetas e indicadores con profundidad. */
.card { box-shadow: var(--shadow-depth); border-color: color-mix(in srgb, var(--border) 80%, #fff); }
.kpi {
    background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 97%, var(--brand)));
    border-color: color-mix(in srgb, var(--border) 80%, #fff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-depth);
}
.kpi:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 16px 30px -14px color-mix(in srgb, var(--brand) 40%, transparent); }
.kpi > b { animation: kpi-in .45s var(--ease) both; }
@keyframes kpi-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Ícono del indicador, en una pastilla con la marca. */
.kpi-ico {
    position: absolute; top: .8rem; right: .8rem; width: 2rem; height: 2rem; border-radius: 10px; display: grid; place-items: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 16%, var(--card)), color-mix(in srgb, var(--brand) 8%, var(--card)));
    color: var(--brand-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(16,24,40,.1);
}
.kpi-ico .ico { width: 1.05rem; height: 1.05rem; vertical-align: 0; }
.kpi:has(.kpi-ico) > span { padding-right: 2.4rem; }
.tile:hover { box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 18px 34px -16px color-mix(in srgb, var(--brand) 45%, transparent); }

/* Listas flotantes (buscador de personas) y avisos con más profundidad. */
.picker-drop { border-radius: 12px; box-shadow: 0 2px 6px rgba(16,24,40,.08), 0 18px 40px -12px rgba(16,24,40,.3); }
.live-toast, #blazor-error-ui { box-shadow: 0 4px 10px rgba(0,0,0,.18), 0 22px 44px -14px rgba(0,0,0,.45); }
.live-toast .ico { color: #ffd166; }

/* Mientras carga: renglones grises que brillan. */
.loading-block { display: grid; gap: .6rem; padding: .35rem 0; max-width: 40rem; }
.sk-line {
    display: block; height: .85rem; border-radius: 999px;
    background: linear-gradient(90deg, #e9edf2 0%, #f6f8fa 40%, #e9edf2 80%); background-size: 200% 100%;
    animation: sk-shine 1.3s ease-in-out infinite;
}
@keyframes sk-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Menú lateral: los títulos de sección (OPERACIÓN) se distinguen de los grupos que se abren y cierran (Asistencia). */
.nav-section { display: flex; align-items: center; gap: .45rem; font-size: .72rem; letter-spacing: .14em; opacity: 1; }
.nav-section::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.nav-group { text-transform: none; letter-spacing: 0; font-size: .86rem; font-weight: 600; opacity: .92; padding-top: .7rem; }
.sidebar nav a.active { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-brand) 22%, transparent), 0 2px 6px -2px rgba(0,0,0,.25); }

/* Alto contraste: botones lisos con borde grueso, sin brillo. Menos movimiento: sin destello ni brillo. */
html[data-contrast] button.primary, html[data-contrast] a.button:not(.secondary), html[data-contrast] .tabs button.on {
    background: color-mix(in srgb, var(--brand) 75%, #000); box-shadow: none; border: 2px solid #000; filter: none;
}
html[data-contrast] button.primary.danger, html[data-contrast] button.primary.inline.danger { background: #8f1c13; }
html[data-contrast] a.button.secondary, html[data-contrast] button.secondary, html[data-contrast] button.inline:not(.primary):not(.link) {
    background: #fff; border: 2px solid #000; box-shadow: none; color: #000;
}
html[data-contrast] button.primary::after, html[data-contrast] a.button::after { display: none; }
html[data-contrast] .card, html[data-contrast] .kpi { box-shadow: none; background: #fff; }
html[data-contrast] .sk-line { background: #c9d0d8; }
html[data-motion] button.primary::after, html[data-motion] a.button::after { display: none; }
html[data-motion] .sk-line, html[data-motion] .kpi > b { animation: none; }
@media (prefers-reduced-motion: reduce) {
    button.primary::after, a.button::after { display: none; }
    .sk-line, .kpi > b { animation: none; }
    button.primary:hover:not(:disabled), a.button:hover, .kpi:hover, a.button.secondary:hover, button.secondary:hover { transform: none; }
}
@media print { button.primary, a.button, .card, .kpi { box-shadow: none !important; background: #fff !important; color: #000 !important; } }

/* «Ver como»: el menú de otra persona, en lista. */
.view-as-menu { list-style: none; margin: 0 0 12px; padding: 0; columns: 2 200px; }
.view-as-menu li { display: flex; gap: 8px; align-items: center; padding: 3px 0; break-inside: avoid; }

/* «Deshacer» de las acciones en grupo: barra fija abajo mientras corre la cuenta. */
.undo-bar { position: sticky; bottom: 12px; z-index: 20; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin: 12px 0; padding: 10px 14px; border-radius: 12px; background: #1f2937; color: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .25); }
.undo-bar .muted { color: #cbd5e1; }
.undo-bar .link { color: #fff; }

/* Vista previa de a quién le toca un cambio, antes de guardar. */
.impact-preview { border-left: 4px solid var(--warning, #d98a00); margin: .75rem 0; }
.impact-preview ul { margin: .5rem 0; padding-left: 1.2rem; }

/* Armar planes (Planes > Armar planes): tarjetas de plan, matriz con desplazamiento y funciones de serie con costo. */
.pb-toolbar { position: sticky; top: 0; z-index: 15; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
    padding: .5rem 0; margin-bottom: .5rem; background: var(--bg, var(--surface)); }
.pb-state { font-size: .8rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--border); }
.pb-state.dirty { border-color: var(--warning, #b4540a); color: var(--warning, #b4540a); background: var(--warn-bg); }
.pb-state.ok { border-color: var(--accent); }
.pb-file { display: inline-flex; gap: .4rem; align-items: center; font-size: .9rem; }
.pb-notice { border-left: 4px solid var(--accent); padding: .4rem .8rem; }
.pb-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.pb-plan { border: 1px solid var(--border); border-radius: 12px; padding: .75rem; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.pb-plan.inactive { opacity: .75; }
.pb-plan label { display: flex; flex-direction: column; gap: .2rem; }
.pb-plan input, .pb-plan textarea { width: 100%; min-width: 0; }
.pb-add { border-style: dashed; justify-content: center; align-items: center; min-height: 140px; background: transparent; cursor: pointer; font-weight: 600; }
.pb-move { display: flex; gap: .5rem; flex-wrap: wrap; }
.pb-scroll { overflow-x: auto; max-width: 100%; }
.pb-matrix { min-width: 560px; }
.pb-matrix input[type=number] { width: 5.5rem; }
.pb-functions summary { cursor: pointer; font-size: .85rem; color: var(--muted, inherit); }
.pb-functions ul { margin: .3rem 0; padding-left: 1.1rem; max-width: 60ch; }
.pb-functions li { margin: .2rem 0; }
.pb-group { border: 1px solid var(--border); border-radius: 10px; margin: .4rem 0; }
.pb-group > summary { cursor: pointer; padding: .55rem .75rem; font-weight: 600; display: flex; justify-content: space-between; gap: .5rem; }
.pb-feature { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1rem; padding: .55rem .75rem; border-top: 1px solid var(--border); }
.pb-feature.on { background: var(--warn-bg); }
.pb-feature-ctl { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; justify-content: flex-end; }
.pb-feature-ctl input[type=number] { width: 5rem; }
.pb-save { position: sticky; bottom: 12px; z-index: 20; box-shadow: 0 8px 24px rgba(15, 23, 42, .2); border-left: 4px solid var(--brand); }
.pb-save ul { margin: .3rem 0 .6rem; padding-left: 1.2rem; max-height: 30vh; overflow-y: auto; }
@media (max-width: 640px) {
    .pb-feature { grid-template-columns: 1fr; }
    .pb-feature-ctl { justify-content: flex-start; }
}