/* Europrodat NuevaApp — UI principal */

:root {
    --ep-primary: #185fa5;
    --ep-primary-dark: #0f2744;
    --ep-primary-soft: #e8f1fb;
    --ep-border: #e2e8f0;
    --ep-text: #334155;
    /* Gris secundario: era #64748b, 4,40:1 sobre el fondo de página, por
       debajo del 4,5 mínimo (auditoría del 04/10/2026). #5b6779 da 5,30. */
    --ep-text-muted: #5b6779;
    /* Azul para RELLENOS con texto blanco encima. En claro es el mismo que
       --ep-primary; existe por el tema oscuro (ver allí). */
    --ep-primary-fill: #185fa5;
    --ep-header-h: 60px;
    --ep-radius: 0.75rem;
    --ep-font-scale: 1.15;

    /* Superficies (se invierten en el tema oscuro) */
    --ep-bg: #f4f6f9;
    --ep-surface: #fff;
    --ep-surface-2: #fafbfc;
    --ep-surface-3: #f8fafc;
    --ep-surface-4: #f1f5f9;
    --ep-scroll-thumb: #c2cedd;
}

html {
    font-size: calc(100% * var(--ep-font-scale));
}

body.ep-app {
    margin: 0;
    min-height: 100vh;
    background: var(--ep-bg);
    color: var(--ep-text);
}

/* ===== Barras de scroll con estilo de la web ===== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #b8c6da transparent;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c2cedd;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ep-primary);
    border: 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── Header ── */
.ep-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--ep-header-h);
    background: var(--ep-surface);
    border-bottom: 1px solid var(--ep-border);
    box-shadow: 0 1px 3px rgba(15, 39, 68, 0.06);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
}

.ep-header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    text-decoration: none;
    color: var(--ep-primary-dark);
}

.ep-header-brand:hover {
    color: var(--ep-primary);
}

.ep-logo {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    border: 1px solid var(--ep-border);
    /* Blanca, como las demás placas de logotipo: --ep-primary-soft es un azul
       muy claro con el que los logotipos blancos desaparecían, y en el tema
       oscuro se vuelve azul marino y desaparecían los oscuros. La is-empty de
       más abajo se queda con el azul claro, que ahí es el fondo del icono. */
    background: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ep-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ep-logo.is-empty {
    background: var(--ep-primary-soft);
}

.ep-logo.is-empty i {
    color: var(--ep-primary);
    opacity: 0.45;
    font-size: 1.1rem;
}

/* El nombre de la empresa se enseña ENTERO, aunque sea largo: se parte en dos
   líneas en vez de recortarse con puntos suspensivos. */
.ep-company-name {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.ep-header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.ep-session-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--ep-primary-soft);
    color: var(--ep-primary-dark);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.ep-session-badge i {
    font-size: 1rem;
    opacity: 0.75;
}

.ep-header-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.ep-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--ep-text-muted);
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.ep-header-actions .ep-icon-btn i {
    font-size: 1.5rem;
    -webkit-text-stroke: 0.45px currentColor;
    paint-order: stroke fill;
    transition: transform 0.15s;
}

.ep-icon-btn:hover,
.ep-icon-btn:focus-visible,
.ep-icon-btn.show {
    background: var(--ep-primary-soft);
    color: var(--ep-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 95, 165, 0.18);
}

.ep-icon-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.ep-icon-btn.text-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Toggle de tema: por defecto (claro) se muestra la luna */
.ep-theme-toggle .bi-sun-fill {
    display: none;
}

.ep-theme-toggle .bi-moon-stars-fill {
    display: inline-block;
}

.ep-profile-panel {
    /* Ancho fijo, pero nunca más que la pantalla (en móvil se estrecha solo). */
    width: min(450px, calc(100vw - 1.5rem));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ep-border);
    border-radius: 0.9rem;
    box-shadow: 0 18px 44px rgba(15, 39, 68, 0.22);
}

/* Banner de perfil con degradado de marca */
.ep-profile-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: #fff;
    background: linear-gradient(135deg, #185fa5 0%, #2b6fb0 55%, #3b86d4 100%);
}

.ep-profile-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(130px 90px at 88% -25%, rgba(255, 255, 255, 0.28), transparent 70%);
}

.ep-profile-hero-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.ep-profile-name {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.15;
    word-break: break-word;
}

.ep-profile-badge {
    align-self: flex-start;
    max-width: 100%;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.28);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-profile-body {
    padding: 0.4rem 0;
}

.ep-profile-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}

/* Pie de la tarjeta de perfil: acciones sobre la propia cuenta. */
.ep-profile-foot {
    border-top: 1px solid var(--ep-border);
    padding: 0.5rem 1rem 0.6rem;
}

.ep-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--ep-primary);
    text-decoration: none;
}

.ep-profile-link:hover { text-decoration: underline; }

.ep-profile-row > .bi {
    color: var(--ep-primary);
    font-size: 0.95rem;
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
}

.ep-profile-row .label {
    color: var(--ep-text-muted);
    min-width: 3.4rem;
}

.ep-profile-row .value {
    font-weight: 500;
    word-break: break-word;
    margin-left: auto;
    text-align: right;
}

/* ── Main ── */
.ep-main {
    min-height: calc(100vh - var(--ep-header-h));
}

.ep-main--page {
    padding: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Vista cliente: un 25 % más ancha que el resto (1100 → 1375 px), que tiene
   menú lateral y tablas y se le queda corto el ancho normal. */
.ep-main--page.ep-main--wide {
    max-width: 1375px;
}

body.ep-app.ep-app--split {
    overflow: hidden;
}

.ep-main--split {
    height: calc(100vh - var(--ep-header-h));
    padding: 0.75rem;
    max-width: none;
    margin: 0;
    overflow: hidden;
}

/* ── Pantalla dual ── */
.ep-split {
    display: flex;
    height: 100%;
    border-radius: var(--ep-radius);
    overflow: hidden;
    border: 1px solid var(--ep-border);
    background: var(--ep-surface);
    box-shadow: 0 1px 3px rgba(15, 39, 68, 0.06);
}

.ep-split-pane {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ep-surface);
}

.ep-split-pane + .ep-split-resizer + .ep-split-pane {
    flex: 1 1 auto;
}

.ep-split-head {
    flex-shrink: 0;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--ep-border);
    background: var(--ep-surface-2);
}

.ep-split-head--staff {
    text-align: right;
}

.ep-split-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ep-text-muted);
    margin-bottom: 0.1rem;
}

.ep-split-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ep-primary-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ep-split-head--staff .ep-split-title {
    justify-content: flex-end;
}

.ep-split-eye {
    color: #c9a227;
    font-size: 1.15rem;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.ep-split-body {
    flex: 1;
    overflow: auto;
    padding: 1.25rem;
}

.ep-split-resizer {
    flex: 0 0 10px;
    position: relative;
    z-index: 10;
    cursor: col-resize;
    background: var(--ep-surface-4);
    border-left: 1px solid var(--ep-border);
    border-right: 1px solid var(--ep-border);
    touch-action: none;
    user-select: none;
}

.ep-split-resizer:hover,
.ep-split-resizer.is-dragging {
    background: var(--ep-primary-soft);
}

.ep-split-resizer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 32px;
    border-radius: 4px;
    background: repeating-linear-gradient(
        to bottom,
        #94a3b8 0,
        #94a3b8 2px,
        transparent 2px,
        transparent 5px
    );
}

body.ep-split-dragging {
    cursor: col-resize !important;
    user-select: none !important;
}

body.ep-split-dragging * {
    cursor: col-resize !important;
}

/* ── Administración: barra de acciones ── */
.ep-admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.15rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ep-border);
    background: var(--ep-surface);
}

.ep-admin-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 0.65rem;
    border: 1px solid var(--ep-border);
    background: var(--ep-surface);
    color: var(--ep-text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ep-admin-tool i {
    font-size: 1.45rem;
    -webkit-text-stroke: 0.35px currentColor;
}

.ep-admin-tool:hover {
    background: var(--ep-primary-soft);
    border-color: #bfd7f0;
    color: var(--ep-primary);
}

.ep-admin-tool.is-active {
    background: var(--ep-primary-fill);
    border-color: var(--ep-primary-fill);
    color: #fff;
}

.ep-admin-tool.is-active i {
    -webkit-text-stroke: 0;
}

.ep-admin-workspace {
    flex: 1;
    overflow: auto;
    padding: 1rem 1.25rem 1.5rem;
}

/* ── Formularios administración ── */
.ep-admin-form-wrap {
    max-width: 100%;
}

.ep-admin-form-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ep-text);
    text-align: right;
    margin: 0 0 1.25rem;
    line-height: 1.25;
}

.ep-admin-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ep-admin-field {
    display: grid;
    grid-template-columns: minmax(7rem, 28%) 1fr;
    gap: 0.65rem 1rem;
    align-items: start;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--ep-border);
}

.ep-admin-field:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ep-admin-field--inline .ep-admin-inline-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.ep-admin-inline-text {
    font-size: 0.88rem;
    color: var(--ep-text-muted);
}

.ep-admin-input--date {
    width: auto;
    min-width: 11rem;
    max-width: 100%;
    padding-right: 2rem;
}

.ep-admin-date-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ep-admin-date-picker-icon {
    position: absolute;
    right: 0.65rem;
    color: var(--ep-text-muted);
    pointer-events: none;
    font-size: 1rem;
}

.ep-admin-date-picker input[type="date"] {
    color-scheme: light;
}

.ep-admin-date-picker input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ep-admin-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ep-text);
    margin: 0;
    min-height: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    text-align: right;
}

.ep-admin-input {
    font-size: 0.92rem;
    border-radius: 0.5rem;
    border-color: var(--ep-border);
}

.ep-admin-input::placeholder {
    color: #9ca3af;
    font-style: italic;
}

.ep-admin-input--readonly {
    background: var(--ep-surface-3);
    color: var(--ep-text-muted);
    cursor: default;
}

.ep-admin-input.is-valid {
    border-color: #86efac;
}

.ep-admin-input.is-invalid {
    border-color: #fca5a5;
}

.ep-admin-validation {
    grid-column: 2;
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.15rem;
}

.ep-admin-validation:empty {
    display: none;
}

.ep-admin-field > .invalid-feedback {
    grid-column: 2;
}

.ep-admin-validation.is-valid {
    color: #15803d;
}

.ep-admin-validation.is-invalid {
    color: #b91c1c;
}

.ep-admin-dni-notice {
    grid-column: 2;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0.4rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.8rem;
    line-height: 1.35;
}

.ep-admin-dni-notice i {
    color: #d97706;
    font-size: 0.95rem;
    margin-top: 0.05rem;
    flex-shrink: 0;
}

.ep-admin-dni-notice strong {
    font-weight: 700;
}

.ep-admin-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    border-radius: 50%;
    background: #e2e8f0;
    color: var(--ep-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: help;
}

.ep-admin-field-note {
    grid-column: 2;
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--ep-text-muted);
}

.ep-admin-field--roles {
    align-items: start;
}

.ep-admin-roles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.45rem 0.75rem;
}

.ep-admin-role-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.88rem;
    color: var(--ep-text);
    cursor: pointer;
}

.ep-admin-role-check input {
    margin: 0;
}

.ep-admin-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
}

.ep-admin-credentials {
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: 0.65rem;
    border: 1px solid #86efac;
    background: #f0fdf4;
    color: #14532d;
}

.ep-admin-credentials-head {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

.ep-admin-credentials-head i {
    font-size: 1.5rem;
    color: #16a34a;
    flex-shrink: 0;
}

.ep-admin-credentials-head p {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #166534;
}

.ep-admin-credentials-list {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 0.85rem;
}

.ep-admin-credentials-list div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0.5rem;
    align-items: baseline;
}

.ep-admin-credentials-list dt {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #166534;
}

.ep-admin-credentials-list dd {
    margin: 0;
    font-size: 0.92rem;
}

.ep-admin-credentials-password dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.ep-admin-credentials-foot {
    font-size: 0.82rem;
    color: #166534;
}

.ep-admin-section--hidden {
    display: none !important;
}

.ep-admin-role-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.5rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 0.82rem;
    line-height: 1.35;
}

.ep-admin-role-alert i {
    color: #d97706;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.ep-admin-field--situacion .ep-admin-situacion {
    grid-column: 2;
}

.ep-admin-situacion-question {
    margin: 0 0 0.55rem;
    font-size: 0.88rem;
    color: var(--ep-text);
}

.ep-admin-situacion-options {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.ep-admin-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.88rem;
    cursor: pointer;
}

.ep-admin-review-row {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ep-admin-field--review .ep-admin-review-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9rem;
    cursor: pointer;
}

.ep-admin-review-actions {
    margin-left: auto;
}

/* El check y el botón de alta están siempre a la vista, apagados mientras
   falten datos. El title vive en este envoltorio porque un control con
   disabled no recibe el ratón y el navegador nunca llegaría a enseñarlo. */
.ep-admin-review-wrap {
    display: inline-flex;
}

.ep-admin-review-wrap--blocked {
    cursor: not-allowed;
}

.ep-admin-review-wrap--blocked .ep-admin-review-check,
.ep-admin-review-wrap--blocked .btn {
    pointer-events: none;
    opacity: 0.55;
}

.ep-admin-missing-note {
    grid-column: 2;
    margin: 0.35rem 0 0;
}

.ep-admin-missing-note:empty {
    display: none;
}

.ep-admin-field-error {
    grid-column: 2;
}

@media (max-width: 768px) {
    .ep-admin-credentials-list div {
        grid-template-columns: 1fr;
    }

    .ep-admin-field--situacion .ep-admin-situacion,
    .ep-admin-review-row,
    .ep-admin-field-error {
        grid-column: 1;
    }

    .ep-admin-form-title {
        text-align: left;
        font-size: 1.15rem;
    }

    .ep-admin-field {
        grid-template-columns: 1fr;
    }

    /* La etiqueta es flex: sin justify-content seguía pegada a la
       derecha, encima de su campo. */
    .ep-admin-label {
        text-align: left;
        justify-content: flex-start;
        min-height: 0;
        padding-top: 0;
    }

    .ep-admin-field-note {
        grid-column: 1;
    }
}

.ep-admin-client-slot {
    flex: 1;
    overflow: auto;
    padding: 1.25rem;
    background: var(--ep-surface-2);
}

.ep-admin-empty {
    text-align: center;
    color: var(--ep-text-muted);
    padding: 2rem 1rem;
}

.ep-admin-empty i {
    font-size: 2.25rem;
    color: var(--ep-primary);
    opacity: 0.2;
    display: block;
    margin-bottom: 0.75rem;
}

/* En el móvil la pantalla dual deja de ser dos cajas de alto fijo con su
   propio scroll cada una (la de búsqueda se quedaba en un tercio de pantalla
   y la del cliente, vacía, ocupaba la otra mitad): es una página normal que
   se desplaza entera, con el cliente debajo. El asa para redimensionar no
   tiene sentido con el dedo y se quita. */
@media (max-width: 768px) {
    body.ep-app.ep-app--split {
        overflow: visible;
    }

    .ep-main--split {
        height: auto;
        overflow: visible;
        padding: 0.5rem;
    }

    .ep-split {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .ep-split-pane,
    .ep-split-pane + .ep-split-resizer + .ep-split-pane {
        flex: none;
        overflow: visible;
    }

    .ep-split-body,
    .ep-admin-workspace,
    .ep-admin-client-slot {
        flex: none;
        overflow: visible;
    }

    .ep-split-resizer {
        display: none;
    }

    /* Sin cliente elegido, la columna del cliente solo diría «busca un
       cliente»: sobra. Aparece en cuanto hay una ficha que enseñar. */
    .ep-split-pane[data-split-pane="right"]:has(> .ep-admin-client-slot > .ep-admin-empty:only-child) {
        display: none;
    }

    .ep-split-pane[data-split-pane="right"] {
        border-top: 1px solid var(--ep-border);
        scroll-margin-top: calc(var(--ep-header-h) + 0.5rem);
    }
}

/* ── Inicio ── */
.ep-home-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.15rem 1.25rem;
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    box-shadow: 0 1px 3px rgba(15, 39, 68, 0.06);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.ep-home-card:hover {
    border-color: #bfd7f0;
    box-shadow: 0 4px 12px rgba(15, 39, 68, 0.08);
    transform: translateY(-1px);
    color: inherit;
}

.ep-home-card--muted .ep-home-card-icon {
    background: var(--ep-surface-4);
    color: var(--ep-text-muted);
}

.ep-home-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: var(--ep-primary-soft);
    color: var(--ep-primary);
    font-size: 1.35rem;
}

.ep-home-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ep-home-card-body strong {
    font-size: 1rem;
    color: var(--ep-primary-dark);
}

.ep-home-card-body small {
    color: var(--ep-text-muted);
    line-height: 1.4;
}

.ep-home-card-arrow {
    flex-shrink: 0;
    color: #cbd5e1;
    font-size: 1.1rem;
}

.ep-home-card:hover .ep-home-card-arrow {
    color: var(--ep-primary);
}

.ep-admin-field-note--info {
    color: #1d4ed8;
    margin-bottom: 1rem;
}

.ep-admin-field-note--warn {
    color: #b45309;
    margin: 0.65rem 0 0.5rem;
}

.ep-admin-validation.is-pending {
    color: #b45309;
}

.ep-admin-pending-fj {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: 0.65rem;
    border: 1px solid #fde68a;
    background: #fffbeb;
}

.ep-admin-pending-fj-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    flex: 1;
    min-width: 16rem;
}

.ep-admin-pending-fj-head i {
    font-size: 1.5rem;
    color: #d97706;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.ep-admin-pending-fj-head p {
    color: #92400e;
}

.ep-admin-link-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.65rem;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
}

.ep-admin-link-banner i {
    font-size: 1.4rem;
    color: #2563eb;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.ep-admin-link-banner p:first-child {
    color: #1e3a8a;
}

.ep-admin-link-user {
    margin-top: 0.5rem;
    padding: 1rem 1.1rem;
    border-radius: 0.65rem;
    border: 1px dashed #cbd5e1;
    background: var(--ep-surface-3);
}

.ep-admin-link-user-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.ep-admin-link-user-head i {
    font-size: 1.4rem;
    color: #2563eb;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.ep-admin-link-user-head p:first-child {
    color: var(--ep-text);
    font-weight: 600;
}

.ep-admin-create-fj {
    margin-top: 0.35rem;
}

.ep-admin-create-fj-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ep-admin-field--logo .ep-admin-logo-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.85rem;
}

.ep-admin-logo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: 0.55rem;
    border: 1px dashed #94a3b8;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    color: var(--ep-text);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ep-admin-logo-btn:hover {
    border-color: var(--ep-primary);
    color: var(--ep-primary);
    background: #eff6ff;
}

.ep-admin-logo-preview {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 0.55rem;
    border: 1px solid #e2e8f0;
    /* Blanca fija, como las demás placas. Aquí NO se puede mirar el logotipo
       para decidir (ver ClientLogoService::esClaro()): es la vista previa del
       fichero recién elegido en el alta, que todavía no está en disco. */
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.ep-admin-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ep-admin-logo-remove {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (max-width: 768px) {
    .ep-header {
        padding: 0 0.75rem;
        gap: 0.5rem;
    }

    /* En móvil el nombre se hace más pequeño, pero sigue viéndose entero. */
    .ep-company-name {
        font-size: 0.95rem;
    }

    .ep-session-badge span:not(#ep-session-timer) {
        display: none;
    }
}

/* ===== Cabecera en pantallas estrechas =====
   Hasta ocho iconos de 44 px, el nombre de la empresa y la sesión no caben en
   una fila de móvil: a 375 px desbordaba 174 px, el nombre se aplastaba en una
   columna de letras encima del contenido y Asistencia, Perfil y Cerrar sesión
   quedaban fuera de la pantalla (auditoría del 04/10/2026). Por debajo de
   720 px los iconos pasan a un menú, cada uno con su texto, y el nombre se
   corta en una sola línea (entero en su title). En escritorio nada cambia: el
   botón del menú y los textos no existen. */
.ep-icon-label,
.ep-header-menu-toggle {
    display: none;
}

@media (max-width: 719.98px) {
    .ep-header {
        gap: 0.5rem;
        padding: 0 0.5rem 0 0.75rem;
    }

    .ep-header-brand {
        flex: 1 1 auto;
        gap: 0.5rem;
    }

    .ep-company-name {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
    }

    .ep-header-center {
        flex: 0 0 auto;
    }

    .ep-session-badge {
        padding: 0.25rem 0.55rem;
        font-size: 0.85rem;
    }

    .ep-header-menu-toggle {
        display: inline-flex;
        flex-shrink: 0;
    }

    .ep-header-menu-toggle i {
        font-size: 1.6rem;
    }

    .ep-header-actions {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.125rem;
        padding: 0.5rem 0.75rem max(0.75rem, env(safe-area-inset-bottom));
        background: var(--ep-surface);
        border-bottom: 1px solid var(--ep-border);
        box-shadow: 0 12px 24px rgba(15, 39, 68, 0.14);
        max-height: calc(100dvh - var(--ep-header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .ep-header-actions.is-open {
        display: flex;
    }

    .ep-header-actions > form,
    .ep-header-actions > .dropdown {
        width: 100%;
    }

    .ep-header-actions .ep-icon-btn {
        width: 100%;
        height: 48px;
        justify-content: flex-start;
        gap: 0.85rem;
        padding: 0 0.75rem;
    }

    /* Sin el salto hacia arriba del escritorio: en una lista vertical hace
       que las filas parezcan moverse al pasar el dedo. */
    .ep-header-actions .ep-icon-btn:hover,
    .ep-header-actions .ep-icon-btn:focus-visible,
    .ep-header-actions .ep-icon-btn.show {
        transform: none;
        box-shadow: none;
    }

    .ep-header-actions .ep-icon-btn i {
        font-size: 1.3rem;
        width: 1.5rem;
        text-align: center;
    }

    .ep-header-actions .ep-icon-label {
        display: inline;
        font-size: 1rem;
        font-weight: 500;
        color: var(--ep-text);
    }

    .ep-header-actions .ep-icon-btn.text-danger .ep-icon-label {
        color: inherit;
    }

    /* La ficha del perfil se abre DENTRO del menú, debajo de su fila, en vez
       de flotar con la posición calculada para escritorio. */
    .ep-header-actions .dropdown-menu.show {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 100%;
        margin: 0.25rem 0 0.5rem;
    }
}

/* ===== Buscador de administración ===== */
.ep-admin-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ep-admin-search-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--ep-border, #d9dee6);
    border-radius: 999px;
    background: var(--ep-surface);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ep-text-muted);
    user-select: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ep-admin-search-check:hover {
    border-color: #94a3b8;
}

.ep-admin-search-check input {
    accent-color: var(--ep-primary, #1d4ed8);
    margin: 0;
}

.ep-admin-search-check:has(input:checked) {
    background: var(--ep-primary, #1d4ed8);
    border-color: var(--ep-primary, #1d4ed8);
    color: #fff;
}

.ep-admin-search-box {
    position: relative;
    margin-bottom: 0.5rem;
}

.ep-admin-search-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.ep-admin-search-box .ep-admin-input {
    padding-left: 2.2rem;
}

.ep-admin-search-box .ep-admin-input:disabled {
    background: var(--ep-surface-4);
    cursor: not-allowed;
}

.ep-admin-search-hint {
    font-size: 0.78rem;
    color: var(--ep-text-muted, #64748b);
    margin: 0 0 0.5rem;
    min-height: 1rem;
}

.ep-admin-search-count {
    font-size: 0.78rem;
    color: var(--ep-text-muted, #64748b);
    margin-bottom: 0.4rem;
}

.ep-admin-search-state {
    padding: 0.75rem;
    font-size: 0.85rem;
    color: var(--ep-text-muted, #64748b);
}

.ep-admin-search-state--error {
    color: #b91c1c;
}

.ep-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.ep-admin-table.is-resizing {
    user-select: none;
    cursor: col-resize;
}

.ep-admin-table thead th {
    position: relative;
    text-align: left;
    padding: 0.5rem 0.85rem 0.5rem 0.6rem;
    background: var(--ep-surface-3);
    border-bottom: 2px solid #e2e8f0;
    color: var(--ep-text-muted);
    font-weight: 600;
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ep-admin-table tbody td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--ep-border);
    color: var(--ep-text);
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

.ep-admin-table tbody tr:hover {
    background: var(--ep-surface-3);
}

.ep-admin-th-label {
    margin-right: 0.3rem;
}

.ep-admin-th-sort {
    cursor: pointer;
    user-select: none;
}

.ep-col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
}

.ep-col-resizer::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 2px;
    height: 60%;
    width: 2px;
    background: #cbd5e1;
    border-radius: 1px;
}

.ep-col-resizer:hover::after,
.ep-admin-table.is-resizing .ep-col-resizer::after {
    background: var(--ep-primary, #1d4ed8);
}

.ep-admin-th-sort i {
    font-size: 0.7rem;
    color: #94a3b8;
    vertical-align: middle;
}

.ep-admin-th-sort:hover {
    color: var(--ep-primary, #1d4ed8);
}

.ep-admin-th-sort.is-active {
    color: var(--ep-primary, #1d4ed8);
}

.ep-admin-th-sort.is-active i {
    color: var(--ep-primary, #1d4ed8);
}

.ep-admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ep-admin-pagination-left {
    display: flex;
    align-items: center;
}

.ep-admin-pagination-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.ep-admin-page-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--ep-border, #d9dee6);
    border-radius: 0.4rem;
    background: var(--ep-surface);
    color: var(--ep-text);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ep-admin-page-btn:hover:not(:disabled) {
    background: var(--ep-primary, #1d4ed8);
    border-color: var(--ep-primary, #1d4ed8);
    color: #fff;
}

.ep-admin-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ep-admin-page-info {
    font-size: 0.8rem;
    color: var(--ep-text-muted, #64748b);
    margin: 0 0.4rem;
}

.ep-admin-table-wrap {
    overflow-x: auto;
    /* position: relative hace de esta caja el «contenedor» de lo que va en
       absoluto dentro: los textos para lectores de pantalla (visually-hidden,
       en absoluto) se escapaban de la caja con desplazamiento y ensanchaban
       la página 62 px en el móvil (verificación del 05/10/2026). */
    position: relative;
}

/* ===== Filas clicables del buscador ===== */
.ep-admin-row-click {
    cursor: pointer;
}

.ep-admin-row-click:hover {
    background: #eef4fb;
}

.ep-admin-row-click.is-selected {
    background: #dcebfb;
    box-shadow: inset 3px 0 0 var(--ep-primary, #185fa5);
}

.ep-admin-client-servicios-row {
    cursor: default;
}

.ep-admin-client-servicios-row:hover {
    background: transparent;
}

.ep-admin-client-servicios-row td {
    padding: 0;
    border-top: none;
    background: var(--ep-surface-2);
    box-shadow: inset 3px 0 0 var(--ep-primary, #185fa5);
}

.ep-admin-client-gerencia-row {
    cursor: default;
}

.ep-admin-client-gerencia-row:hover {
    background: transparent;
}

.ep-admin-client-gerencia-row td {
    padding: 0;
    border-top: none;
    background: var(--ep-surface-2);
    box-shadow: inset 3px 0 0 var(--ep-primary, #185fa5);
}

.ep-admin-client-gerencia {
    padding: 0.35rem 0.55rem 0.45rem;
}

.ep-admin-gerencia-title {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ep-primary-dark, #0f2744);
}

.ep-admin-gerencia-table-wrap {
    overflow-x: auto;
}

.ep-admin-gerencia-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.ep-admin-gerencia-table th,
.ep-admin-gerencia-table td {
    padding: 0.28rem 0.4rem;
    text-align: left;
    border-bottom: 1px solid var(--ep-border);
}

.ep-admin-gerencia-table th {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ep-text-muted);
}

.ep-admin-gerencia-radio-cell {
    text-align: center;
    white-space: nowrap;
}

.ep-admin-gerencia-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    font-size: 0.78rem;
    cursor: pointer;
}

.ep-admin-gerencia-flash {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0 0 0.4rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.ep-admin-gerencia-flash .bi {
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.ep-admin-gerencia-flash--ok {
    background: #e3f6ec;
    color: #1c7c43;
}

.ep-admin-gerencia-flash--error {
    background: #fdecea;
    color: #c0392b;
}

.ep-admin-gerencia-member.is-current-manager {
    background: rgba(24, 95, 165, 0.07);
}

.ep-admin-gerencia-member.is-current-manager td {
    font-weight: 600;
}

.ep-admin-gerencia-radio.is-active {
    color: var(--ep-primary, #185fa5);
    font-weight: 600;
}

.ep-admin-client-gerencia-row.is-busy {
    opacity: 0.85;
}

.ep-admin-gerencia-radio input {
    margin: 0;
}

.ep-admin-gerencia-loading {
    padding: 0.35rem 0.55rem;
}

.ep-admin-empty--error i {
    color: #c0392b;
    opacity: 0.4;
}

/* ===== Ficha editable (Vista cliente) ===== */
.ep-ficha {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ep-ficha-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ep-border);
}

.ep-ficha-kind {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ep-primary, #185fa5);
}

.ep-ficha-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0.2rem 0 0;
    color: var(--ep-sidebar, #0f2744);
}

.ep-ficha-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.ep-ficha-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ep-ficha-badge--active { background: #e3f6ec; color: #1c7c43; }
.ep-ficha-badge--inactive { background: #fdecea; color: #c0392b; }
.ep-ficha-badge--manager { background: #eef0fb; color: #3b3b98; }
.ep-ficha-badge--users { background: #eef4fb; color: #185fa5; }
/* Ámbar y no verde: estar exento del 2FA no es un estado bueno, es una
   excepción concedida y tiene que verse como tal. */
.ep-ficha-badge--exento { background: #fff4d6; color: #8a6100; }

.ep-ficha-2fa {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ep-ficha-2fa-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ep-ficha-2fa-row .ep-admin-review-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9rem;
    cursor: pointer;
}

.ep-ficha-2fa .ep-admin-field-note {
    margin: 0;
}

.ep-ficha-logo {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.ep-ficha-logo-preview {
    width: 96px;
    height: 96px;
    border: 1px solid var(--ep-border);
    border-radius: 0.5rem;
    /* Blanca SIEMPRE, no var(--ep-surface): en el tema oscuro la superficie se
       vuelve oscura y los logotipos oscuros (casi todos) se perdían. */
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.ep-ficha-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ep-ficha-logo-preview.is-empty {
    flex-direction: column;
    gap: 0.25rem;
    color: var(--ep-text-muted, #94a3b8);
    font-size: 0.7rem;
    background: #f7f9fb;
}

.ep-ficha-logo-preview.is-empty i {
    font-size: 1.6rem;
}

.ep-ficha-logo-preview.is-empty img {
    display: none;
}

.ep-ficha-logo-actions {
    flex: 1;
    min-width: 160px;
}

.ep-ficha-logo-actions .ep-admin-field-note {
    margin: 0.4rem 0 0;
}

/* ===== Modal de confirmación ===== */
.ep-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 39, 68, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ep-modal-overlay.is-open {
    opacity: 1;
}

.ep-modal {
    width: 100%;
    max-width: 420px;
    background: var(--ep-surface);
    border-radius: 0.9rem;
    padding: 1.5rem 1.4rem 1.25rem;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
    transform: translateY(8px) scale(0.97);
    transition: transform 0.15s ease;
}

.ep-modal--wide {
    max-width: 630px;
}

.ep-modal-overlay.is-open .ep-modal {
    transform: translateY(0) scale(1);
}

.ep-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.ep-modal-icon.is-danger {
    background: #fdecea;
    color: #c0392b;
}

.ep-modal-icon.is-warning {
    background: #fff4e0;
    color: #b8860b;
}

.ep-modal-icon.is-info {
    background: rgba(24, 95, 165, 0.12);
    color: #185fa5;
}

.ep-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ep-sidebar, #0f2744);
    margin: 0 0 0.5rem;
}

.ep-modal-body {
    font-size: 0.9rem;
    color: var(--ep-text);
    line-height: 1.45;
}

.ep-modal-body p {
    margin: 0 0 0.5rem;
}

.ep-modal-body p:last-child {
    margin-bottom: 0;
}

.ep-modal-warn {
    font-weight: 600;
    color: #c0392b;
}

.ep-modal-note {
    font-size: 0.9rem;
    color: var(--ep-text-muted);
}

.ep-modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 1.25rem;
}

.ep-modal-actions .btn {
    min-width: 120px;
}

.ep-modal-actions .btn-light {
    background: #eef1f5;
    border-color: #eef1f5;
}

.ep-ficha-msg {
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
}

.ep-ficha-msg--ok { background: #e3f6ec; color: #1c7c43; }
.ep-ficha-msg--error { background: #fdecea; color: #c0392b; }

.ep-ficha-sep {
    margin-top: 0.5rem;
    border-top: 1px solid var(--ep-border);
    position: relative;
}

.ep-ficha-sep span {
    position: relative;
    top: -0.65rem;
    background: var(--ep-surface-2);
    padding-right: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ep-text-muted, #64748b);
}

.ep-ficha-pass {
    display: flex;
    gap: 0.5rem;
}

.ep-ficha-pass .ep-admin-input {
    flex: 1;
}

.ep-ficha-pass-btn {
    white-space: nowrap;
}

.ep-ficha-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    font-size: 0.9rem;
    padding-top: 0.6rem;
}

.ep-ficha-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.ep-ficha-role {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--ep-border);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    background: var(--ep-surface);
}

.ep-ficha-role:has(input:checked) {
    border-color: var(--ep-primary, #185fa5);
    background: #eef4fb;
    font-weight: 600;
}

.ep-ficha-role.is-locked {
    cursor: not-allowed;
    opacity: 0.85;
    background: #f3f5f8;
}

.ep-ficha-commission {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ep-ficha-commission .ep-admin-input {
    max-width: 6rem;
}

.ep-admin-client-servicios {
    margin-top: 0;
    padding: 0.25rem 0.55rem 0.3rem;
    border-top: none;
    background: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.ep-admin-servicios-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.22rem 0.1rem;
    border: none;
    background: transparent;
    color: var(--ep-primary-dark, #0f2744);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    border-radius: 0.35rem;
    transition: background 0.15s, color 0.15s;
}

.ep-admin-servicios-toggle:hover,
.ep-admin-servicios-toggle:focus-visible {
    background: var(--ep-primary-soft);
    color: var(--ep-primary);
}

.ep-admin-servicios-chevron {
    color: #c9a227;
    font-size: 0.85rem;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.ep-admin-servicios-toggle.is-open .ep-admin-servicios-chevron {
    transform: rotate(90deg);
}

.ep-admin-servicios-panel {
    margin: 0 0 0.2rem 1.2rem;
    padding: 0.4rem 0.55rem;
    border-left: 2px solid var(--ep-border);
    background: var(--ep-surface-3);
    border-radius: 0 0.4rem 0.4rem 0;
}

.ep-admin-servicios-placeholder {
    margin: 0;
}

.ep-admin-servicios-notice {
    margin: 0 0 0.45rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--ep-text-muted);
    background: #fff8e6;
    border-radius: 0.35rem;
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
}

.ep-admin-servicios-notice .bi {
    color: #c9a227;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.ep-admin-servicios-table-wrap {
    overflow-x: auto;
}

.ep-admin-servicios-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.ep-admin-servicios-table th,
.ep-admin-servicios-table td {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--ep-border);
    text-align: left;
    vertical-align: middle;
}

.ep-admin-servicios-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ep-text-muted);
}

.ep-admin-servicios-price-input {
    width: 4rem;
    padding: 0.15rem 0.35rem;
    text-align: center;
}

.ep-admin-contratar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ep-admin-contratar-table-wrap {
    overflow-x: auto;
}

.ep-admin-contratar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    background: transparent;
}

.ep-admin-contratar-table thead th {
    padding: 0.2rem 0.35rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ep-text-muted);
    text-align: left;
    border-bottom: 1px solid rgba(24, 95, 165, 0.35);
    background: transparent;
}

.ep-admin-contratar-table thead th:nth-child(3),
.ep-admin-contratar-table thead th:nth-child(4) {
    text-align: center;
}

.ep-admin-contratar-th-check {
    width: 2.2rem;
}

.ep-admin-contratar-table tbody td {
    padding: 0.28rem 0.35rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(24, 95, 165, 0.22);
    background: transparent;
}

.ep-admin-contratar-table tbody tr:last-child td {
    border-bottom-color: rgba(24, 95, 165, 0.28);
}

.ep-admin-contratar-row.is-active td {
    border-bottom-color: rgba(24, 95, 165, 0.38);
}

.ep-admin-contratar-check-cell {
    width: 2.2rem;
    text-align: center;
}

.ep-admin-contratar-check-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    border: 1px solid var(--ep-border);
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
}

.ep-admin-contratar-check-box input {
    margin: 0;
    cursor: pointer;
}

.ep-admin-contratar-name {
    font-weight: 500;
    color: var(--ep-primary-dark, #0f2744);
    white-space: nowrap;
}

.ep-admin-contratar-level-cell {
    white-space: nowrap;
    text-align: center;
}

.ep-admin-contratar-levels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
}

.ep-admin-contratar-level-label {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    margin: 0;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--ep-text);
}

.ep-admin-contratar-level-label input:disabled {
    cursor: not-allowed;
}

.ep-admin-contratar-level-na {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: var(--ep-text-muted);
    font-size: 0.85rem;
}

.ep-admin-contratar-cost-cell {
    width: 5.5rem;
    text-align: center;
}

.ep-admin-contratar-cost-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    position: relative;
}

.ep-admin-contratar-cost-wrap--hint {
    cursor: help;
}

.ep-admin-contratar-cost-wrap--hint::after {
    content: attr(data-hint);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.35rem);
    transform: translateX(-50%);
    z-index: 20;
    min-width: 9rem;
    max-width: 14rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: center;
    color: #fff;
    background: var(--ep-primary-dark, #0f2744);
    border-radius: 0.35rem;
    box-shadow: 0 4px 12px rgba(15, 39, 68, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

.ep-admin-contratar-cost-wrap--hint:hover::after,
.ep-admin-contratar-cost-wrap--hint:focus-within::after {
    opacity: 1;
    visibility: visible;
}

.ep-admin-servicios-upload {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.45rem;
    margin-bottom: 0;
    padding: 0.45rem 0.55rem;
    border: 1px dashed rgba(24, 95, 165, 0.35);
    border-radius: 0.4rem;
    background: rgba(24, 95, 165, 0.04);
}

.ep-admin-servicios-upload--compact {
    gap: 0;
    margin-top: 0.4rem;
    padding: 0.28rem 0.45rem;
}

.ep-admin-servicios-upload-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem 0.55rem;
    width: 100%;
}

.ep-admin-servicios-upload-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.ep-admin-servicios-empty {
    margin: 0 0 0.35rem;
}

.ep-admin-servicios-upload-hint {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.25;
    color: var(--ep-text-muted);
}

.ep-admin-servicios-upload-hint .bi {
    opacity: 0.75;
}

.ep-admin-servicios-upload-btn {
    margin: 0;
    cursor: pointer;
}

.ep-admin-servicios-upload-status {
    margin: 0;
    min-height: 1rem;
}

.ep-admin-contratar-price {
    width: 3.75rem;
    padding: 0.15rem 0.35rem;
    text-align: center;
}

.ep-admin-contratar-price:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ep-admin-contratar-cost-suffix {
    font-size: 0.78rem;
    color: var(--ep-text-muted);
}

.ep-admin-contratar-pdf {
    align-self: flex-start;
    margin-top: 0.1rem;
}

.ep-admin-contratar-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin-top: 0.1rem;
}

.ep-admin-contratar-footer .ep-admin-contratar-pdf {
    align-self: center;
    margin-top: 0;
    flex: 0 0 auto;
}

.ep-admin-contratar-upload {
    flex: 1 1 18rem;
    min-width: 15rem;
    display: flex;
}

.ep-admin-contratar-upload .ep-admin-servicios-upload {
    margin-top: 0;
    width: 100%;
}

.ep-admin-contratar-implantacion-detail td {
    padding: 0.35rem 0.35rem 0.5rem 2.4rem;
    border-bottom: 1px solid rgba(24, 95, 165, 0.22);
    background: rgba(24, 95, 165, 0.03);
}

.ep-admin-implantacion-files-title {
    margin: 0 0 0.35rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ep-primary-dark, #0f2744);
}

.ep-admin-implantacion-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.25rem 0.65rem;
}

.ep-admin-implantacion-file-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    font-size: 0.78rem;
    color: var(--ep-text);
    cursor: pointer;
}

.ep-admin-implantacion-file-label input:disabled {
    cursor: not-allowed;
}

.ep-admin-implantacion-file-delete {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ep-text-muted);
    line-height: 1;
    cursor: pointer;
}

.ep-admin-implantacion-file-delete:hover,
.ep-admin-implantacion-file-delete:focus-visible {
    color: #dc2626;
}

.ep-admin-implantacion-files-hint {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: var(--ep-text-muted);
    font-style: italic;
}

.ep-admin-implantacion-files.is-waiting-files .ep-admin-implantacion-files-hint {
    color: var(--ep-primary);
    font-style: normal;
}

.ep-admin-implantacion-files-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.ep-admin-implantacion-file-new {
    width: min(100%, 14rem);
    font-size: 0.78rem;
    padding: 0.15rem 0.4rem;
}

.ep-ficha-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ep-border);
}

.ep-ficha-nomember {
    font-style: italic;
}

.ep-ficha-manager-current {
    margin-top: -0.25rem;
}

.ep-ficha-manager-current strong {
    color: var(--ep-primary-dark, #1e3a8a);
}

.ep-ficha-manager-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ep-ficha-manager-select {
    flex: 1 1 12rem;
    min-width: 0;
}

.ep-ficha-manager-row .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ===== Bocadillo informativo (tooltip propio) ===== */
.ep-tip {
    position: relative;
    display: inline-flex;
}

.ep-tip > .btn:disabled,
.ep-tip > .btn[disabled] {
    pointer-events: none;
}

.ep-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 230px;
    background: var(--ep-sidebar, #0f2744);
    color: #fff;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.3;
    padding: 0.45rem 0.6rem;
    border-radius: 0.45rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 30;
    pointer-events: none;
}

.ep-tip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ep-sidebar, #0f2744);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 30;
    pointer-events: none;
}

.ep-tip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.ep-tip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* ===================================================================== */
/* ===== Tema oscuro ===================================================== */
/* ===================================================================== */
html[data-theme="dark"] {
    /* En oscuro el azul hacía dos papeles que no caben en un solo color:
       como texto sobre el fondo oscuro necesita ser claro, y como relleno con
       texto blanco encima necesita ser profundo. Con #3b86d4 para los dos,
       el texto daba 4,33:1 y el blanco encima 3,79:1, los dos por debajo del
       mínimo (auditoría del 04/10/2026). Ahora --ep-primary es el de texto
       (6,0:1 sobre la superficie) y --ep-primary-fill el de los rellenos
       (5,4:1 con blanco). */
    --ep-primary: #5aa1e6;
    --ep-primary-fill: #2b6cb0;
    --ep-primary-dark: #e3edfb;
    --ep-primary-soft: #173352;
    --ep-border: #2b3a4d;
    --ep-text: #d4dcea;
    --ep-text-muted: #94a3b8;

    --ep-bg: #0e1622;
    --ep-surface: #16202e;
    --ep-surface-2: #1b2735;
    --ep-surface-3: #1a2532;
    --ep-surface-4: #212e40;
    --ep-scroll-thumb: #3a4a5e;

    color-scheme: dark;
}

/* Barras de scroll */
html[data-theme="dark"] * {
    scrollbar-color: var(--ep-scroll-thumb) transparent;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--ep-scroll-thumb);
}

/* Sombras más marcadas sobre fondo oscuro */
html[data-theme="dark"] .ep-header,
html[data-theme="dark"] .ep-card,
html[data-theme="dark"] .ep-admin-search-row,
html[data-theme="dark"] .ep-modal {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Controles de formulario (Bootstrap + propios) */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .ep-admin-input,
html[data-theme="dark"] .ep-ficha-input,
html[data-theme="dark"] .ep-ficha select,
html[data-theme="dark"] .ep-admin-search-select {
    background-color: var(--ep-surface-3);
    border-color: var(--ep-border);
    color: var(--ep-text);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .ep-admin-input:focus {
    background-color: var(--ep-surface-3);
    color: var(--ep-text);
    border-color: var(--ep-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 134, 212, 0.25);
}

html[data-theme="dark"] .ep-admin-input--readonly {
    background-color: var(--ep-surface-2);
    color: var(--ep-text-muted);
}

html[data-theme="dark"] .ep-admin-input::placeholder,
html[data-theme="dark"] .form-control::placeholder {
    color: var(--ep-text-muted);
}

/* El selector de fecha debe usar el esquema oscuro */
html[data-theme="dark"] .ep-admin-date-picker input[type="date"] {
    color-scheme: dark;
}

/* Menús desplegables (perfil) */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--ep-surface);
    border-color: var(--ep-border);
    color: var(--ep-text);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .dropdown-header {
    color: var(--ep-text-muted);
}

/* Títulos que usaban el azul oscuro como texto */
html[data-theme="dark"] .ep-ficha-title,
html[data-theme="dark"] .ep-modal-title {
    color: var(--ep-primary-dark);
}

/* Filas clicables del buscador */
html[data-theme="dark"] .ep-admin-row-click:hover {
    background: var(--ep-surface-4);
}

html[data-theme="dark"] .ep-admin-row-click.is-selected {
    background: var(--ep-primary-soft);
}

html[data-theme="dark"] .ep-admin-client-servicios-row td,
html[data-theme="dark"] .ep-admin-client-gerencia-row td {
    background: var(--ep-surface-3);
}

/* Botón claro del modal */
html[data-theme="dark"] .ep-modal-actions .btn-light {
    background: var(--ep-surface-4);
    border-color: var(--ep-border);
    color: var(--ep-text);
}

/* Roles en la ficha */
html[data-theme="dark"] .ep-ficha-role:has(input:checked) {
    background: var(--ep-primary-soft);
}

html[data-theme="dark"] .ep-ficha-role.is-locked {
    background: var(--ep-surface-2);
}

/* Toggle de tema en el header */
html[data-theme="dark"] .ep-theme-toggle .bi-sun-fill {
    display: inline-block;
}

html[data-theme="dark"] .ep-theme-toggle .bi-moon-stars-fill {
    display: none;
}

/* ===== Borrado en masa + papelera ===== */
.ep-admin-search-filters-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.ep-admin-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ep-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 8px;
    padding: 7px 15px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s, opacity 0.15s;
    background: transparent;
}

/* Recuperar borrados: mismo estilo que borrar pero en verde (nunca rojo). */
.ep-bulk-btn--recover {
    border: 2px solid #198754;
    color: #198754;
}
.ep-bulk-btn--recover:hover {
    background: #198754;
    color: #fff;
}

.ep-bulk-btn--icon {
    padding: 7px 11px;
    font-size: 1rem;
}
.ep-bulk-btn--icon i {
    font-size: 1.05rem;
}

.ep-bulk-btn--delete {
    border: 2px solid #dc3545;
    color: #dc3545;
}
.ep-bulk-btn--delete:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ep-bulk-btn--delete:not(:disabled) {
    background: #dc3545;
    color: #fff;
    box-shadow: 0 2px 10px rgba(220, 53, 69, 0.4);
}
.ep-bulk-btn--delete:not(:disabled):hover {
    background: #bb2d3b;
}

.ep-bulk-btn--restore {
    border: 2px solid #198754;
    color: #198754;
}
.ep-bulk-btn--restore:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ep-bulk-btn--restore:not(:disabled) {
    background: #198754;
    color: #fff;
    box-shadow: 0 2px 10px rgba(25, 135, 84, 0.4);
}
.ep-bulk-btn--restore:not(:disabled):hover {
    background: #157347;
}

.ep-admin-del-col {
    width: 46px;
    text-align: center;
    white-space: nowrap;
}
.ep-admin-del-col input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.ep-admin-table tbody tr.is-marked-delete {
    background: rgba(220, 53, 69, 0.1);
}
.ep-admin-table tbody tr.is-marked-restore {
    background: rgba(25, 135, 84, 0.1);
}

.ep-admin-bulk-bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}
.ep-papelera-bottom {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

/* Restaurar y eliminar definitivamente van juntos, arriba y abajo del listado. */
.ep-papelera-bottom {
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Tablas de resultado dentro de los modales */
.ep-bulk-result-table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 10px;
    font-size: 0.85rem;
}
.ep-bulk-result-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
}
.ep-bulk-dni {
    color: var(--ep-text-muted, #6b7280);
    font-size: 0.8rem;
    white-space: nowrap;
}
.ep-bulk-reason {
    color: #b02a37;
    font-size: 0.8rem;
}
.ep-bulk-fail-title {
    margin-top: 10px;
    color: #b02a37;
}

/* Papelera */
.ep-papelera-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.ep-papelera-search {
    flex: 1 1 auto;
    margin-bottom: 0;
}
.ep-papelera-group {
    margin-bottom: 22px;
}
.ep-papelera-group-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ep-primary);
    border-bottom: 2px solid color-mix(in srgb, var(--ep-primary) 25%, transparent);
    padding-bottom: 5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.ep-papelera-empty {
    font-style: italic;
    margin: 0;
}
.ep-papelera-row-action {
    text-align: right;
    white-space: nowrap;
}
.ep-papelera-restore-one {
    border: 1px solid #198754;
    background: transparent;
    color: #198754;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.ep-papelera-restore-one:hover {
    background: #198754;
    color: #fff;
}

/* ── Listar e imprimir ── */
.ep-admin-list-picker {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.ep-admin-list-picker td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--ep-border);
    vertical-align: middle;
}

.ep-admin-list-picker tr:hover {
    background: var(--ep-surface-3);
}

.ep-admin-list-picker__label {
    font-weight: 700;
    color: var(--ep-primary-dark);
    font-size: 0.85rem;
    white-space: nowrap;
}

.ep-admin-list-picker__desc {
    color: var(--ep-text-muted, #64748b);
    font-size: 0.85rem;
    width: 100%;
}

.ep-admin-list-picker__check {
    text-align: right;
    white-space: nowrap;
}

.ep-admin-list-checkcell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}

.ep-admin-list-role {
    position: relative;
    max-width: 13rem;
    font-size: 0.85rem;
}

.ep-admin-list-role > summary {
    list-style: none;
    cursor: pointer;
    white-space: nowrap;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--ep-border);
    border-radius: 0.4rem;
    background: var(--ep-surface);
    color: var(--ep-primary-dark);
    font-weight: 500;
}

.ep-admin-list-role > summary::-webkit-details-marker,
.ep-admin-list-role > summary::marker {
    display: none;
    content: '';
}

.ep-admin-list-role > summary::after {
    content: '\25BE';
    margin-left: 0.4rem;
    color: #94a3b8;
}

.ep-admin-list-role[open] > summary {
    border-color: var(--ep-primary);
    color: var(--ep-primary);
}

.ep-admin-list-role-menu {
    position: absolute;
    right: 0;
    z-index: 30;
    margin-top: 0.3rem;
    min-width: 13rem;
    padding: 0.35rem;
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: 0.55rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    text-align: left;
}

.ep-admin-list-role-menu label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.45rem;
    border-radius: 0.4rem;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
}

.ep-admin-list-role-menu label:hover {
    background: var(--ep-surface-3);
}

.ep-admin-list-role-menu input {
    accent-color: var(--ep-primary);
    margin: 0;
}

.ep-admin-list-check input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--ep-primary);
    cursor: pointer;
    margin: 0;
}

/* Bloques de resultados */
.ep-admin-list-block {
    border: 1px solid var(--ep-border);
    border-radius: 0.6rem;
    background: var(--ep-surface);
    padding: 0.75rem 0.85rem;
    margin-bottom: 1rem;
}

.ep-admin-list-block__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.ep-admin-list-block__title {
    font-weight: 700;
    color: var(--ep-primary-dark);
    font-size: 1rem;
}

.ep-admin-list-block__count {
    font-size: 0.78rem;
    color: var(--ep-text-muted, #64748b);
    white-space: nowrap;
}

.ep-admin-list-search {
    position: relative;
    margin-bottom: 0.5rem;
}

.ep-admin-list-search i {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.ep-admin-list-search .ep-admin-input {
    padding-left: 2.2rem;
}

.ep-admin-list-tablewrap {
    max-height: 22rem;
    overflow: auto;
    border: 1px solid var(--ep-border);
    border-radius: 0.5rem;
}

.ep-admin-list-table {
    margin: 0;
}

.ep-admin-list-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.ep-admin-list-table .ep-admin-th-label {
    display: inline-block;
    padding-right: 0.4rem;
}

.ep-admin-list-clickable {
    cursor: pointer;
}

.ep-admin-list-clickable:hover td {
    background: var(--ep-primary-soft);
}

.ep-admin-list-block__foot {
    margin-top: 0.6rem;
    display: flex;
    justify-content: flex-end;
}

.ep-admin-list-combined {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

.ep-admin-list-xlsx,
.ep-admin-list-xlsx-all {
    background: #1a7a44;
    color: #fff;
    border: none;
}

.ep-admin-list-xlsx:hover,
.ep-admin-list-xlsx-all:hover {
    background: #156136;
    color: #fff;
}

/* Comisiones (panel derecho "Vista cliente") */
.ep-admin-comisiones {
    padding: 0.5rem;
}

.ep-admin-comisiones-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ep-primary-dark);
    margin: 0 0 0.25rem;
}

.ep-admin-comisiones-name {
    font-weight: 600;
    color: var(--ep-primary);
    margin: 0 0 0.75rem;
}

.ep-admin-comisiones-empty {
    text-align: center;
    color: var(--ep-text-muted, #64748b);
    padding: 1rem;
}

.ep-admin-comisiones-totals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--ep-primary-soft);
    border-radius: 0.5rem;
    font-weight: 700;
    color: var(--ep-primary-dark);
}

.ep-admin-comisiones-sum {
    font-size: 1.05rem;
}

.ep-admin-comisiones-foot {
    margin-top: 0.6rem;
    display: flex;
    justify-content: flex-end;
}

/* ── Módulo LOPD (buscador + avisos + asignar auditor) ── */
/* En LOPD el contenedor de página no debe limitar el ancho: así el 75% es
   del ancho real de pantalla, no de los 1100px por defecto de .ep-main--page. */
.ep-main--page:has(.ep-lopd) {
    max-width: none;
}

.ep-lopd {
    width: 75%;
    max-width: none;
    margin: 0 auto;
    padding: 1.25rem;
    color: var(--ep-text);
}

/* Botón "Asignar auditor" centrado. */
#ep-lopd-assign {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0.25rem auto 0;
}

.ep-lopd h1,
.ep-lopd-client-head h2 {
    color: var(--ep-primary-dark);
}

.ep-lopd-avisos li strong {
    color: var(--ep-text);
}

.ep-lopd-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ep-border);
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--ep-surface);
}

.ep-lopd-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--ep-border);
    transition: background 0.12s;
}

.ep-lopd-list-item:last-child {
    border-bottom: none;
}

.ep-lopd-list-item:hover {
    background: var(--ep-primary-soft);
}

.ep-lopd-list-name {
    font-weight: 600;
    color: var(--ep-primary-dark);
}

.ep-lopd-list-doc {
    font-size: 0.85rem;
    color: var(--ep-text-muted);
    white-space: nowrap;
}

.ep-lopd-client-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.ep-lopd-doc-badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--ep-primary-soft);
    color: var(--ep-primary);
    white-space: nowrap;
}

.ep-lopd-col {
    border: 1px solid var(--ep-border);
    border-radius: 0.7rem;
    background: var(--ep-surface);
    padding: 1rem 1.1rem;
    height: 100%;
}

.ep-lopd-col-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ep-primary-dark);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ep-border);
}

.ep-lopd-avisos {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ep-lopd-avisos li {
    display: flex;
    gap: 0.55rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--ep-border);
}

.ep-lopd-avisos li:last-child {
    border-bottom: none;
}

.ep-lopd-avisos li > .bi:first-child,
.ep-lopd-avisos li > a > .bi:first-child {
    color: #c98a00;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* Cada aviso lleva a la pantalla donde se resuelve: la línea entera es el
   enlace, con una flecha a la derecha que lo anuncia. */
.ep-lopd-aviso-link {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    border-radius: 0.45rem;
    padding: 0.15rem 0.35rem;
    margin: -0.15rem -0.35rem;
    transition: background-color 0.12s ease;
}

.ep-lopd-aviso-link:hover,
.ep-lopd-aviso-link:focus-visible {
    background: var(--ep-surface-2);
    color: inherit;
}

.ep-lopd-aviso-link:hover strong {
    text-decoration: underline;
}

.ep-lopd-aviso-go {
    margin-left: auto;
    align-self: center;
    font-size: 0.8rem;
    color: var(--ep-text-muted);
}

/* Los tres niveles, con los mismos colores que la página /avisos. Faltaba el
   amarillo y las advertencias salían sin color propio. */
.ep-lopd-avisos li.is-urgente > a > .bi:first-child { color: #b42318; }
.ep-lopd-avisos li.is-aviso > a > .bi:first-child { color: #d5a300; }
.ep-lopd-avisos li.is-info > a > .bi:first-child { color: var(--ep-text-muted); }
html[data-theme="dark"] .ep-lopd-avisos li.is-urgente > a > .bi:first-child { color: #ff8a7a; }
html[data-theme="dark"] .ep-lopd-avisos li.is-aviso > a > .bi:first-child { color: #ffd54a; }

.ep-lopd-assigned {
    font-size: 0.9rem;
    margin-bottom: 0.85rem;
}

.ep-lopd-assigned .bi-person-check-fill {
    color: #1a7a44;
}

/* ── LOPD · Asignaciones por auditor (columna 2) ── */
.ep-lopd-asignaciones {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--ep-border);
}

.ep-lopd-asig-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ep-text-muted);
    margin-bottom: 0.5rem;
}

.ep-lopd-asig-auditor {
    font-weight: 600;
    color: var(--ep-primary-dark);
    margin-bottom: 0.6rem;
}

.ep-lopd-asig-auditor .bi {
    color: var(--ep-primary);
    margin-right: 0.3rem;
}

/* La cartera del auditor ya no se pinta línea a línea: se dice cuántas hay y
   el detalle se baja en XLSX. */
.ep-lopd-asig-total {
    font-size: 0.9rem;
    margin: 0 0 0.6rem;
}

.ep-lopd-asig-total strong {
    font-size: 1.1rem;
    color: var(--ep-primary);
}

/* Centrado en su columna. El ancho se ajusta al texto en vez de fijarlo: un
   ancho a ojo se queda corto en cuanto cambia la etiqueta y parte el botón en
   dos líneas. En bloque, así que align-items y gap ya no pintan nada; al icono
   y al texto los separa el espacio del propio HTML. */
.ep-lopd-asig-xlsx {
    display: block;
    width: fit-content;
    margin: auto;
}

/* ── LOPD · Columna Tramitar ── */
.ep-lopd-tramitar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ep-lopd-tramitar-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--ep-border);
    border-radius: 0.6rem;
    background: var(--ep-surface);
    color: var(--ep-text);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.05s;
}

.ep-lopd-tramitar-btn > .bi:first-child {
    color: var(--ep-primary);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.ep-lopd-tramitar-btn span {
    flex: 1 1 auto;
}

.ep-lopd-tramitar-btn:not(.is-disabled):hover {
    background: var(--ep-primary-soft);
    border-color: var(--ep-primary);
}

.ep-lopd-tramitar-btn:not(.is-disabled):active {
    transform: translateY(1px);
}

.ep-lopd-tramitar-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ep-lopd-tramitar-lock {
    color: var(--ep-text-muted);
    font-size: 0.8rem;
}

.ep-lopd-libro-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-left: 1.2rem;
    margin-top: 0.1rem;
}

.ep-lopd-libro-arrow {
    color: var(--ep-text-muted);
    font-size: 1.15rem;
    transform: rotate(20deg);
    flex-shrink: 0;
}

.ep-lopd-libro-btn {
    flex: 1 1 auto;
}

/* ── LOPD · Vista de una opción de tramitar ── */
.ep-lopd-tramitar-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 0;
}

#ep-lopd-tramitar-body {
    margin-top: 0;
}

.ep-lopd-tramitar-crumb {
    font-weight: 600;
    color: var(--ep-text-muted);
}

.ep-lopd-tramitar-crumb .bi {
    color: var(--ep-border);
}

.ep-lopd-tramitar-empty {
    padding: 2rem 1rem;
}

/* ── LOPD · Auditoría LOPD (cuestionario + historial) ── */
.ep-audit-listhead,
.ep-audit-formhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.ep-audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ep-audit-table th,
.ep-audit-table td {
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--ep-border);
}

.ep-audit-table th {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ep-text-muted);
}

/* En el móvil la zona LOPD usa todo el ancho (al 75 % le quedaban 260 px y
   los títulos se partían palabra a palabra), y el historial de auditorías,
   que a 8 columnas medía 711 px y obligaba al navegador a alejar la página
   entera, pasa a una tarjeta por auditoría: cada dato con el nombre de su
   columna (data-label) y los botones abajo a la derecha. */
@media (max-width: 767.98px) {
    .ep-lopd {
        width: 100%;
        padding: 0.75rem 0;
    }

    .ep-audit-table,
    .ep-audit-table tbody {
        display: block;
        position: relative;
    }

    .ep-audit-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .ep-audit-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.5rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--ep-border);
    }

    .ep-audit-table td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        flex: 1 1 100%;
        padding: 0;
        border: 0;
        text-align: right;
    }

    .ep-audit-table td::before {
        content: attr(data-label);
        text-align: left;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ep-text-muted);
    }

    .ep-audit-table td.ep-audit-accion {
        flex: 0 0 auto;
    }

    .ep-audit-table td.ep-audit-accion::before {
        content: none;
    }

    .ep-audit-table td:not(.ep-audit-accion) + td.ep-audit-accion {
        margin-left: auto;
    }
}

.ep-audit-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ep-audit-meta .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ep-text-muted);
    margin-bottom: 0.2rem;
}

.ep-audit-blocks {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.4rem;
}

.ep-audit-block {
    border: 1px solid var(--ep-border);
    border-radius: 0.6rem;
    margin-bottom: 0.7rem;
    background: var(--ep-surface);
    overflow: hidden;
}

.ep-audit-block > summary {
    cursor: pointer;
    padding: 0.6rem 0.8rem;
    font-weight: 600;
    color: var(--ep-primary-dark);
    background: var(--ep-primary-soft);
    list-style: none;
}

.ep-audit-block > summary::-webkit-details-marker { display: none; }

.ep-audit-block-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--ep-primary-fill);
    color: #fff;
    font-size: 0.78rem;
    margin-right: 0.35rem;
}

.ep-audit-block-body {
    padding: 0.6rem 0.8rem 0.8rem;
}

.ep-audit-q {
    display: grid;
    grid-template-columns: 2rem 1fr 9rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--ep-border);
}

.ep-audit-q:last-of-type { border-bottom: none; }

.ep-audit-q-num {
    text-align: right;
    color: var(--ep-text-muted);
    font-size: 0.82rem;
}

.ep-audit-q-text {
    font-size: 0.86rem;
    line-height: 1.3;
}

.ep-audit-compliance {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 2px solid var(--ep-primary-soft);
}

.ep-audit-compliance-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ep-primary-dark);
    margin-bottom: 0.35rem;
}

.ep-audit-obs {
    margin-top: 0;
}

.ep-audit-formfoot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--ep-border);
}

@media (max-width: 768px) {
    .ep-audit-q { grid-template-columns: 1.6rem 1fr; }
    .ep-audit-q-sel { grid-column: 2; }
    .ep-audit-meta { grid-template-columns: 1fr; }
}

/* ── LOPD · Auditoría de riesgos (campos mixtos) ── */
.ep-risk-field {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--ep-border);
}

.ep-risk-field:last-child { border-bottom: none; }

.ep-risk-q {
    font-size: 0.9rem;
    line-height: 1.35;
    margin-bottom: 0.5rem;
    color: var(--ep-text);
}

.ep-risk-radios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.1rem;
}

.ep-risk-radio,
.ep-risk-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    cursor: pointer;
    margin: 0;
}

.ep-risk-radio input,
.ep-risk-check input { cursor: pointer; }

.ep-risk-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.35rem 1rem;
}

.ep-risk-input { max-width: 100%; }
.ep-risk-field select.ep-risk-input { max-width: 22rem; }

.ep-risk-other {
    flex: 1 1 12rem;
    min-width: 10rem;
}

/* ── LOPD · Implantación (línea temporal + nodos) ── */
.ep-impl-timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    margin: 0.5rem 0 1.5rem;
    padding: 0 0.5rem;
}

.ep-impl-line {
    position: absolute;
    top: 15px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: var(--ep-border);
    z-index: 0;
}

.ep-impl-node {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    text-align: center;
}

.ep-impl-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--ep-surface);
    border: 2px solid var(--ep-border);
    color: var(--ep-text-muted);
    transition: all 0.15s;
}

.ep-impl-node.is-completed .ep-impl-dot {
    background: #1a7a44;
    border-color: #1a7a44;
    color: #fff;
}

.ep-impl-node.is-active .ep-impl-dot {
    background: var(--ep-primary-fill);
    border-color: var(--ep-primary-fill);
    color: #fff;
    transform: scale(1.12);
}

.ep-impl-node.is-completed:not(.is-locked) { cursor: pointer; }

.ep-impl-node.is-completed .ep-impl-node-title { color: #1a7a44; }

.ep-impl-node:not(.is-locked):not(.is-active):hover .ep-impl-dot {
    border-color: var(--ep-primary);
    color: var(--ep-primary);
}

.ep-impl-node.is-locked {
    cursor: not-allowed;
    opacity: 0.55;
}

.ep-impl-node-title {
    font-size: 0.68rem;
    line-height: 1.15;
    color: var(--ep-text-muted);
    max-width: 5rem;
}

.ep-impl-node.is-active .ep-impl-node-title {
    color: var(--ep-primary-dark);
    font-weight: 600;
}

.ep-impl-node-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--ep-primary-dark);
    margin-bottom: 0.9rem;
}

.ep-impl-node-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--ep-primary-fill);
    color: #fff;
    font-size: 0.85rem;
}

.ep-impl-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.ep-impl-panel {
    border: 1px solid var(--ep-border);
    border-radius: 0.6rem;
    background: var(--ep-surface);
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    /* overflow:hidden evita que una lista larga empuje la fila del grid (crecer la página);
       min-height da un alto cómodo cuando ambas columnas tienen poco contenido. */
    overflow: hidden;
    min-height: 420px;
}

.ep-impl-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.ep-impl-panel-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ep-primary-dark);
    margin-bottom: 0.6rem;
}

.ep-impl-panel-sub {
    font-weight: 400;
    color: var(--ep-text-muted);
    letter-spacing: 0;
}

.ep-impl-subhead {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ep-text-muted);
    margin: 0.8rem 0 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--ep-border);
}

.ep-impl-field {
    display: grid;
    grid-template-columns: 8rem 1fr;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.ep-impl-field > label {
    font-size: 0.8rem;
    color: var(--ep-text-muted);
    margin: 0;
}

.ep-impl-field input[readonly] {
    background: var(--ep-primary-soft);
    color: var(--ep-text);
}

.ep-impl-list {
    list-style: none;
    margin: 0 0 0.8rem;
    padding: 0;
    border: 1px solid var(--ep-border);
    border-radius: 0.5rem;
    overflow-y: auto;
    max-height: 360px;
}

.ep-impl-list-item.ep-impl-editing { gap: 0.35rem; }
.ep-impl-list-item .ep-edit-input { flex: 1 1 auto; }
.ep-impl-list-item .btn { padding: 0.15rem 0.45rem; }

.ep-impl-list-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid var(--ep-border);
}

.ep-impl-list-item:last-child { border-bottom: none; }

.ep-impl-list-name {
    flex: 1 1 auto;
    font-size: 0.9rem;
    color: var(--ep-text);
}

.ep-impl-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--ep-primary-soft);
    color: var(--ep-primary);
    white-space: nowrap;   /* el badge nunca parte su texto en 2 líneas */
    flex-shrink: 0;        /* ni se encoge (deja que ceda el título) */
}

.ep-impl-add {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.ep-impl-add input { flex: 1 1 auto; }

/* Puestos (nodo 3) */
.ep-pos-form { margin-bottom: 0.5rem; }

/* La lista de puestos del cliente ocupa todo el alto disponible del panel;
   estira con flex cuando hay pocos y muestra barra de scroll al desbordar. */
#ep-pos-assigned {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ep-pos-assigned-list {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    margin-bottom: 0;
    overflow-y: auto;
}

/* Ídem para la lista de departamentos asignados al cliente. */
#ep-dpto-assigned {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#ep-dpto-assigned .ep-impl-list {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    margin-bottom: 0;
    overflow-y: auto;
}

/* Nodos 4-8: el contenedor de la lista de la derecha ocupa el alto restante del
   panel y su <ul> (.ep-pos-assigned-list) hace scroll interno cuando hay muchos,
   igual que en Dptos (nodo 2) y Puestos (nodo 3). En Inventario (nodo 8) aplica a
   los dos paneles (informáticos y papel). */
#ep-file-assigned,
#ep-staff-list,
#ep-seg-list,
#ep-trat-list,
#ep-inv-it-list,
#ep-inv-paper-list,
#ep-aut-list,
#ep-del-list,
#ep-inc-list,
#ep-ent-list,
#ep-sal-list,
#ep-pers-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Los paneles de Inventario (nodo 8) llevan formulario + lista, así que necesitan
   más alto para que la lista muestre varios soportes antes de scrollear. */
.ep-impl-panel--inv {
    min-height: 735px;
}

/* Señal de scroll (1): barra siempre visible en color PRIMARIO (se nota en claro y
   oscuro). Aparece solo cuando hay overflow. */
.ep-pos-assigned-list,
#ep-dpto-assigned .ep-impl-list {
    scrollbar-width: thin;
    scrollbar-color: var(--ep-primary) var(--ep-border);
}
.ep-pos-assigned-list::-webkit-scrollbar,
#ep-dpto-assigned .ep-impl-list::-webkit-scrollbar {
    width: 12px;
}
.ep-pos-assigned-list::-webkit-scrollbar-thumb,
#ep-dpto-assigned .ep-impl-list::-webkit-scrollbar-thumb {
    background: var(--ep-primary);
    border-radius: 6px;
    border: 2px solid var(--ep-surface);
}
.ep-pos-assigned-list::-webkit-scrollbar-track,
#ep-dpto-assigned .ep-impl-list::-webkit-scrollbar-track {
    background: transparent;
}
/* Modo oscuro: hay una regla global que pone el thumb gris apagado (--ep-scroll-thumb)
   con más especificidad; la sobrescribimos con el primario (azul, contrasta). */
html[data-theme="dark"] .ep-pos-assigned-list,
html[data-theme="dark"] #ep-dpto-assigned .ep-impl-list {
    scrollbar-color: var(--ep-primary) var(--ep-surface-2);
}
html[data-theme="dark"] .ep-pos-assigned-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] #ep-dpto-assigned .ep-impl-list::-webkit-scrollbar-thumb {
    background: var(--ep-primary);
    border: 2px solid var(--ep-surface);
}

/* Señal de scroll (2): degradado POR ENCIMA del contenido (antes iba de fondo y
   quedaba tras el texto). El contenedor de la lista (.ep-scroll-host, lo marca el JS)
   muestra un degradado arriba/abajo con z-index sobre el contenido y pointer-events
   none; solo aparece cuando se puede seguir scrolleando (.can-up / .can-down). Usa el
   color de superficie → el contenido se desvanece hacia el panel, en ambos temas. */
.ep-scroll-host { position: relative; }
.ep-scroll-host::before,
.ep-scroll-host::after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    height: 26px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 4;
}
.ep-scroll-host::before {
    top: 0;
    background: linear-gradient(var(--ep-surface), rgba(0, 0, 0, 0));
}
.ep-scroll-host::after {
    bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0), var(--ep-surface));
}
.ep-scroll-host.can-up::before { opacity: 1; }
.ep-scroll-host.can-down::after { opacity: 1; }

.ep-impl-pos-item {
    display: block;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--ep-border);
}
.ep-impl-pos-item:last-child { border-bottom: none; }

.ep-pos-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.ep-pos-title {
    font-weight: 700;
    color: var(--ep-primary-dark);
    flex: 1 1 auto;
    min-width: 0;   /* deja que el nombre ceda/parta antes que badges y botones */
}

.ep-pos-btns { display: inline-flex; gap: 0.25rem; flex-shrink: 0; }

/* Variante de fila en dos columnas: contenido a la izquierda y botones
   centrados verticalmente en TODA la altura de la fila (nodos 4 y 5). */
.ep-impl-pos-item.ep-pos-item--split {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ep-pos-item--split .ep-pos-main { flex: 1 1 auto; min-width: 0; }
.ep-pos-item--split .ep-pos-head { margin-bottom: 0.15rem; }

/* Los botones deshabilitados de las listas conservan el hover (title) para
   poder explicar qué falta para habilitarlos (Bootstrap los deja sin
   pointer-events, lo que ocultaría el tooltip nativo). */
.ep-impl-list .btn:disabled,
.ep-pos-btns .btn:disabled {
    pointer-events: auto;
    cursor: help;
}

/* Bocadillo propio (mismo look que el del menú superior) montado en <body>
   vía JS, para no ser recortado por el overflow de los paneles. */
.ep-js-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4000;
    max-width: 260px;
    background: var(--ep-sidebar, #0f2744);
    color: #fff;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.3;
    padding: 0.45rem 0.6rem;
    border-radius: 0.45rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    pointer-events: none;
}
.ep-js-tip.is-visible { opacity: 1; visibility: visible; }
.ep-js-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--tip-arrow, 50%);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ep-sidebar, #0f2744);
}
.ep-js-tip.ep-js-tip--below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--ep-sidebar, #0f2744);
}

/* Tooltips de Bootstrap (cabecera y tarjetas de admin, ya inicializados con
   new bootstrap.Tooltip) igualados al mismo look que .ep-js-tip. Bootstrap 5.3
   expone variables CSS: con --bs-tooltip-bg cambia fondo y flecha a la vez. */
.tooltip {
    --bs-tooltip-bg: var(--ep-sidebar, #0f2744);
    --bs-tooltip-color: #fff;
    --bs-tooltip-border-radius: 0.45rem;
    --bs-tooltip-font-size: 0.75rem;
    --bs-tooltip-opacity: 1;
}
.tooltip .tooltip-inner {
    padding: 0.45rem 0.6rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.ep-pos-field {
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--ep-text);
    margin-top: 0.1rem;
}
.ep-pos-field b { color: var(--ep-text-muted); font-weight: 600; }

.ep-pos-actions { display: flex; gap: 0.4rem; }

/* ── Nodo 4: ficha completa del fichero (RAT) ── */
.ep-file-code {
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--bs-font-monospace, monospace);
    color: var(--ep-text-muted);
    border: 1px solid var(--ep-border, #d0d0d0);
    border-radius: 4px;
    padding: 0 0.3rem;
    margin-left: 0.4rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.ep-file-edit { display: flex; flex-direction: column; gap: 0.6rem; }

.ep-file-edit-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.35rem 0;
    background: var(--ep-surface, #fff);
}
.ep-file-edit-name { font-weight: 700; letter-spacing: 0.3px; }

.ep-file-sec {
    border: 1px solid var(--ep-border, #e0e0e0);
    border-radius: 8px;
    padding: 0.35rem 0.75rem 0.6rem;
    background: var(--ep-surface-2, transparent);
}
.ep-file-sec > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ep-text-muted);
    padding: 0.3rem 0;
    list-style: revert;
}
.ep-file-sec[open] > summary { margin-bottom: 0.4rem; }

.ep-file-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.9rem;
}
.ep-ff { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ep-ff-wide { grid-column: 1 / -1; }
.ep-ff label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ep-text-muted);
    margin: 0;
}
.ep-ff input[readonly] { background: var(--ep-surface-2, #f3f3f3); opacity: 0.9; }

.ep-file-ops {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.25rem 0.9rem;
}
.ep-file-op {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    margin: 0;
    cursor: pointer;
}

.ep-file-edit-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: sticky;
    bottom: 0;
    padding: 0.5rem 0;
    background: var(--ep-surface, #fff);
    border-top: 1px solid var(--ep-border, #e0e0e0);
}
.ep-file-edit-actions { white-space: nowrap; }

@media (max-width: 900px) {
    .ep-impl-panels { grid-template-columns: 1fr; }
    .ep-impl-node-title { display: none; }
    .ep-file-grid { grid-template-columns: 1fr; }
}

/* Móvil (revisión en un Pixel 8 emulado, 05/10/2026):
   1. Tres tarjetas anidadas (página, columna LOPD, panel) gastaban 128 px de
      los 390 en márgenes: a las listas les quedaban 264 px y los nombres se
      partían palabra a palabra. Se queda en 16 px de borde y ~12 por tarjeta.
   2. Los paneles van uno debajo de otro, así que el alto mínimo (pensado para
      igualar dos columnas) solo deja huecos.
   3. Las listas del cliente eran una ventanita de 300 px con su propio scroll
      dentro del scroll de la página: el dedo se queda atrapado. Ahora miden
      lo que su contenido, con un tope de dos tercios de pantalla para las
      empresas de cientos de empleados. Los catálogos (cientos de entradas y
      un buscador encima) conservan su caja, algo más alta.
   4. Fila de lista: nombre y botones no cabían en una línea (con el dedo los
      botones miden 44 px). Si no caben, los botones bajan a la derecha. */
@media (max-width: 767.98px) {
    .ep-main--page { padding: 0.875rem; }
    .ep-lopd-col { padding: 0.75rem; }
    .ep-impl-panel { padding: 0.75rem; min-height: 0; }
    .ep-impl-panel--inv { min-height: 0; }

    .ep-pos-assigned-list,
    #ep-dpto-assigned .ep-impl-list {
        flex: none;
        max-height: 65vh;
    }

    .ep-impl-list { max-height: 55vh; }

    .ep-impl-list-item {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 0.35rem;
    }

    .ep-impl-list-item > .ep-impl-list-name {
        flex: 1 1 10rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Con dos o más botones (asignar, editar, borrar) el nombre va en su
       línea y los botones juntos debajo; si no, el salto los separaba. */
    .ep-impl-list-item:has(> .btn ~ .btn) > .ep-impl-list-name {
        flex-basis: 100%;
    }
}

/* Restablecer contraseña (ficha de usuario) */
.ep-ficha-reset-result {
    margin-top: 0.6rem;
}

.ep-ficha-reset-note {
    margin-bottom: 0.4rem;
}

/* ── Modal de asistencia ── */
.ep-support-modal .modal-body {
    text-align: justify;
}

.ep-support-modal .modal-body .alert span {
    text-align: justify;
}

/* ═══════════════════════════════════════════════════════════════════════
   Páginas de acceso (login / seleccionar empresa): fondo original + tarjeta
   ═══════════════════════════════════════════════════════════════════════ */
.ep-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(rgba(24, 95, 165, 0.05) 1.2px, transparent 1.3px) 0 0 / 24px 24px,
        radial-gradient(1100px 560px at 8% -10%, rgba(59, 134, 212, 0.35), transparent 55%),
        radial-gradient(920px 520px at 108% 12%, rgba(24, 95, 165, 0.28), transparent 60%),
        linear-gradient(160deg, #eaf2fb 0%, #d5e6f6 100%);
}

/* Blobs decorativos difuminados */
.ep-auth::before,
.ep-auth::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
}

.ep-auth::before {
    width: 420px;
    height: 420px;
    background: #3b86d4;
    top: -140px;
    left: -90px;
}

.ep-auth::after {
    width: 360px;
    height: 360px;
    background: #6aa8e0;
    bottom: -120px;
    right: -70px;
}

.ep-auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    background: var(--ep-surface);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1.1rem;
    box-shadow: 0 24px 60px rgba(15, 39, 68, 0.28);
}

/* Línea de acento degradada en la parte superior de la tarjeta */
.ep-auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 1.1rem 1.1rem 0 0;
    background: linear-gradient(90deg, #185fa5, #3b86d4, #6aa8e0);
}

/* Emblema de marca (escudo LOPD/RGPD) */
.ep-auth-emblem {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
    font-size: 1.7rem;
    color: #fff;
    background: linear-gradient(135deg, #2b6fb0, #185fa5);
    box-shadow: 0 10px 24px rgba(24, 95, 165, 0.4);
}

/* Wordmark con relleno degradado */
.ep-auth-brand {
    letter-spacing: 0.12em;
    background: linear-gradient(90deg, #185fa5, #3b86d4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

html[data-theme="dark"] .ep-auth-emblem {
    background: linear-gradient(135deg, #3b86d4, #1f5f9e);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .ep-auth-brand {
    background: linear-gradient(90deg, #5aa1e6, #93c5f2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Botón de tema flotante en las páginas de acceso */
.ep-auth-theme {
    position: fixed;
    top: 1.1rem;
    right: 1.1rem;
    z-index: 1060;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    color: var(--ep-primary);
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    box-shadow: 0 8px 22px rgba(15, 39, 68, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ep-auth-theme:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 39, 68, 0.3);
}

/* Fondo oscuro de las páginas de acceso */
html[data-theme="dark"] .ep-auth {
    background:
        radial-gradient(rgba(255, 255, 255, 0.03) 1.2px, transparent 1.3px) 0 0 / 24px 24px,
        radial-gradient(1100px 560px at 8% -10%, rgba(59, 134, 212, 0.22), transparent 55%),
        radial-gradient(920px 520px at 108% 12%, rgba(20, 60, 100, 0.5), transparent 60%),
        linear-gradient(160deg, #0a1120 0%, #0f2338 100%);
}

html[data-theme="dark"] .ep-auth::before {
    background: #2b6fb0;
    opacity: 0.38;
}

html[data-theme="dark"] .ep-auth::after {
    background: #14487d;
    opacity: 0.42;
}

html[data-theme="dark"] .ep-auth-card {
    border-color: var(--ep-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* ── Selector de empresa: las que aún no están abiertas ─────────────────── */
.ep-companies-aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--ep-text-muted);
    background: var(--ep-surface-2);
    border: 1px solid var(--ep-border);
    border-radius: 0.5rem;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.9rem;
}

.ep-company-locked {
    background: var(--ep-surface-2);
}

.ep-company-lock {
    color: #b54708;
    flex-shrink: 0;
}

.ep-company-unlock {
    display: flex;
    gap: 0.4rem;
}

.ep-company-unlock input {
    flex: 1 1 auto;
    min-width: 0;
}

.ep-company-unlock button {
    flex: 0 0 auto;
}

.ep-company-error {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #b42318;
}

html[data-theme="dark"] .ep-company-lock { color: #f0b57a; }
html[data-theme="dark"] .ep-company-error { color: #ffb4a8; }

/* ═══════════════════════════════════════════════════════════════════════
   Modo oscuro: cobertura de componentes Bootstrap para toda la aplicación
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .card {
    background-color: var(--ep-surface);
    border: 1px solid var(--ep-border);
    color: var(--ep-text);
}

html[data-theme="dark"] .bg-light {
    background-color: var(--ep-surface-2) !important;
}

html[data-theme="dark"] .bg-white {
    background-color: var(--ep-surface) !important;
}

html[data-theme="dark"] .text-muted {
    color: var(--ep-text-muted) !important;
}

html[data-theme="dark"] .text-primary {
    color: var(--ep-primary) !important;
}

html[data-theme="dark"] .text-dark {
    color: var(--ep-text) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
    border-color: var(--ep-border) !important;
}

html[data-theme="dark"] .list-group-item {
    background-color: var(--ep-surface);
    border-color: var(--ep-border);
    color: var(--ep-text);
}

html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--ep-surface-4);
    color: var(--ep-text);
}

html[data-theme="dark"] .nav-tabs {
    border-color: var(--ep-border);
}

html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--ep-text-muted);
}

html[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--ep-border);
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--ep-surface);
    border-color: var(--ep-border) var(--ep-border) var(--ep-surface);
    color: var(--ep-primary-dark);
}

html[data-theme="dark"] .alert-info {
    background-color: rgba(59, 134, 212, 0.14);
    border-color: rgba(59, 134, 212, 0.35);
    color: #cfe2f7;
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.14);
    border-color: rgba(220, 53, 69, 0.4);
    color: #f2b6bd;
}

html[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.14);
    border-color: rgba(25, 135, 84, 0.4);
    color: #a7dcc2;
}

html[data-theme="dark"] .btn-light {
    background-color: var(--ep-surface-4);
    border-color: var(--ep-border);
    color: var(--ep-text);
}

html[data-theme="dark"] .btn-light:hover {
    background-color: var(--ep-surface-2);
    color: var(--ep-text);
}

html[data-theme="dark"] .btn-outline-primary {
    color: var(--ep-primary);
    border-color: var(--ep-primary);
}

html[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--ep-primary);
    color: #0b1220;
}

html[data-theme="dark"] .modal-content {
    background-color: var(--ep-surface);
    border-color: var(--ep-border);
    color: var(--ep-text);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--ep-border);
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(1.6);
}

/* Modales propios del login */
html[data-theme="dark"] .modal-ep {
    background: var(--ep-surface);
    color: var(--ep-text);
}

html[data-theme="dark"] .modal-ep .bg-light {
    background-color: var(--ep-surface-2) !important;
}

/* Tablas Bootstrap genéricas */
html[data-theme="dark"] .table {
    --bs-table-color: var(--ep-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ep-border);
    color: var(--ep-text);
}

html[data-theme="dark"] .form-label {
    color: var(--ep-text);
}

html[data-theme="dark"] .form-text {
    color: var(--ep-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   Identidad discreta en el interior de la app (cabecera, paneles, foco)
   ═══════════════════════════════════════════════════════════════════════ */

/* Fina línea de acento degradada bajo la cabecera */
.ep-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, #185fa5, #3b86d4 45%, rgba(59, 134, 212, 0));
    pointer-events: none;
}

html[data-theme="dark"] .ep-header::after {
    background: linear-gradient(90deg, #3b86d4, #5aa1e6 45%, rgba(90, 161, 230, 0));
}

/* Acento de marca al inicio de las cabeceras de panel (columnas staff/cliente) */
.ep-split-head {
    box-shadow: inset 3px 0 0 0 var(--ep-primary);
}

/* Foco de inputs con color de marca (paridad con el modo oscuro) */
.form-control:focus,
.form-select:focus,
.ep-admin-input:focus {
    border-color: var(--ep-primary);
    box-shadow: 0 0 0 0.2rem rgba(24, 95, 165, 0.16);
}

/* Estados vacíos con carácter (listados, tablas, avisos…) */
.ep-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.9rem 1rem;
    text-align: center;
    color: var(--ep-text-muted);
}

.ep-empty .ep-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--ep-primary);
    background: var(--ep-primary-soft);
}

.ep-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* ── Checkboxes y radios personalizados (estilo EUROPRODAT) ──────────────
   Sustituyen los controles nativos "de stock" por unos coherentes con la web,
   en claro y oscuro. El check/punto se dibuja con SVG de fondo (máxima
   compatibilidad; los ::before no son fiables en inputs). Los switches
   (role="switch") se excluyen para no romperlos. */
input[type="checkbox"]:not([role="switch"]),
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    flex: 0 0 auto;
    vertical-align: -0.22em;
    border-width: 1.5px;
    border-style: solid;
    border-color: var(--ep-border, #cbd5e1);
    background-color: var(--ep-surface, #fff);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.78rem;
    cursor: pointer;
    transition: background-color .13s ease, border-color .13s ease, box-shadow .13s ease;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
input[type="checkbox"]:not([role="switch"]) { border-radius: 5px; }
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:not([role="switch"]):hover,
input[type="radio"]:hover {
    border-color: var(--ep-primary, #185fa5);
}

input[type="checkbox"]:not([role="switch"]):checked,
input[type="radio"]:checked,
input[type="checkbox"]:not([role="switch"]):indeterminate {
    background-color: var(--ep-primary, #185fa5);
    border-color: var(--ep-primary, #185fa5);
}
input[type="checkbox"]:not([role="switch"]):checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.6l3 3 6-7'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not([role="switch"]):indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-width='2.3' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E");
}
input[type="radio"]:checked {
    background-image: radial-gradient(circle, #fff 0 38%, transparent 44%);
}

input[type="checkbox"]:not([role="switch"]):focus-visible,
input[type="radio"]:focus-visible {
    outline: none;
    border-color: var(--ep-primary, #185fa5);
    box-shadow: 0 0 0 3px var(--ep-primary-soft, #e8f1fb);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ── Sello y firma del auditor (ficha de usuario) ───────────────────────── */
.ep-admin-seal-preview {
    min-height: 54px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 1px dashed var(--ep-border, #cbd5e1);
    border-radius: 0.5rem;
    background: var(--ep-surface-2, #fafbfc);
}
.ep-admin-seal-preview img { max-height: 70px; max-width: 100%; }

/* ── Avisos pendientes en Inicio (cartera del auditor) ──────────────────── */
.ep-home-avisos { margin-top: 1.75rem; }
.ep-home-avisos-title { display: flex; align-items: center; gap: 0.5rem; color: var(--ep-primary-dark, #0f2744); margin-bottom: 0.75rem; }
.ep-home-avisos-count { margin-left: auto; font-size: 0.8rem; font-weight: 500; color: var(--ep-text-muted); }
.ep-home-avisos-list { display: flex; flex-direction: column; gap: 0.7rem; }
.ep-home-aviso { border: 1px solid var(--ep-border); border-radius: 0.7rem; background: var(--ep-surface); padding: 0.7rem 0.9rem; }
.ep-home-aviso-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.ep-home-aviso-doc { font-size: 0.78rem; color: var(--ep-text-muted); }
.ep-home-aviso-badge { margin-left: auto; font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; }
.ep-home-aviso-badge.is-urgente { background: #fde8e6; color: #b42318; }
.ep-home-aviso-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ep-home-aviso-items li { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.85rem; color: var(--ep-text); }
.ep-home-aviso-items li .bi { flex: 0 0 auto; margin-top: 0.1rem; }
/* Rojo urgente y amarillo advertencia. El amarillo tira a dorado y no a
   naranja: con el #b54708 de antes los dos iconos se confundían de un vistazo,
   que es justo lo que no puede pasar en una lista de avisos. */
.ep-home-aviso-items li.is-urgente .bi { color: #b42318; }
.ep-home-aviso-items li.is-aviso .bi { color: #d5a300; }
.ep-home-aviso-items li.is-info .bi { color: var(--ep-text-muted); }
html[data-theme="dark"] .ep-home-aviso-badge.is-urgente { background: #4a1d1a; color: #ffb4a8; }
html[data-theme="dark"] .ep-home-aviso-items li.is-urgente .bi { color: #ff8a7a; }
html[data-theme="dark"] .ep-home-aviso-items li.is-aviso .bi { color: #ffd54a; }
/* Tarjeta de avisos en Inicio + página de avisos */
.ep-home-card--avisos .ep-home-card-icon { background: #fff4ed; color: #b54708; }
.ep-home-card-badge { background: #fde8e6; color: #b42318; font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; margin-left: auto; }
/* El contenedor de la página mide 1100 px; sin el margen automático, estos
   900 px se quedaban pegados a la izquierda y parecía descentrada. */
/* Un 25 % más ancha que el ancho normal de página (900 → 1125). */
.ep-avisos-page { max-width: 1125px; margin: 0 auto; }
.ep-avisos-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ep-avisos-resumen { font-size: 0.85rem; color: var(--ep-text-muted); }
.ep-avisos-urg { color: #b42318; font-weight: 600; }
/* En oscuro, el rojo de siempre daba 2,76:1 (auditoría 04/10/2026). */
html[data-theme="dark"] .ep-avisos-urg { color: #f97066; }
.ep-home-aviso-head a { text-decoration: none; color: inherit; }
.ep-home-aviso-head a:hover strong { text-decoration: underline; }
/* Buscador de la página de avisos: filtra la cartera ya pintada. */
.ep-avisos-buscador { position: relative; margin-bottom: 0.9rem; }
.ep-avisos-buscador > .bi { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--ep-text-muted); pointer-events: none; }
.ep-avisos-buscador input { padding-left: 2.2rem; }
/* Cada aviso es un enlace a la pantalla donde se resuelve. */
.ep-home-aviso-link { display: flex; align-items: flex-start; gap: 0.45rem; flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; border-radius: 0.4rem; padding: 0.1rem 0.3rem; margin: -0.1rem -0.3rem; transition: background-color 0.12s ease; }
.ep-home-aviso-link:hover, .ep-home-aviso-link:focus-visible { background: var(--ep-surface-2); color: inherit; }
.ep-home-aviso-link:hover span { text-decoration: underline; }
.ep-home-aviso-items li .ep-home-aviso-go.bi { margin-left: auto; align-self: center; font-size: 0.78rem; color: var(--ep-text-muted); }
html[data-theme="dark"] .ep-home-card--avisos .ep-home-card-icon { background: #3a2a17; color: #f0b57a; }
html[data-theme="dark"] .ep-home-card-badge { background: #4a1d1a; color: #ffb4a8; }

/* ── Firma manuscrita en pantalla ──────────────────────────────────────── */
.ep-firma-datos {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
}

.ep-firma-datos > div {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.5rem;
}

.ep-firma-datos dt { color: var(--ep-text-muted); font-weight: 500; }
.ep-firma-datos dd { margin: 0; font-weight: 600; }

.ep-firma-lienzo-wrap {
    position: relative;
    margin-bottom: 0.9rem;
}

.ep-firma-lienzo-label {
    display: block;
    font-size: 0.8rem;
    color: var(--ep-text-muted);
    margin-bottom: 0.3rem;
}

/* touch-action: none es imprescindible: sin él, firmar con el dedo en el móvil
   desplaza la página en lugar de dibujar. */
.ep-firma-lienzo {
    display: block;
    width: 100%;
    height: 190px;
    border: 2px dashed var(--ep-border);
    border-radius: 0.6rem;
    background: #ffffff;
    touch-action: none;
    cursor: crosshair;
}

html[data-theme="dark"] .ep-firma-lienzo {
    /* El lienzo se queda blanco también en oscuro: la firma se guarda tal cual
       y acaba impresa sobre papel blanco en el PDF. */
    background: #ffffff;
    border-color: #4a5568;
}

.ep-firma-limpiar {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
}

.ep-firma-acepta {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 0.9rem;
    cursor: pointer;
}

.ep-firma-aviso {
    min-height: 1.2rem;
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--ep-text-muted);
}

.ep-firma-aviso--error { color: #b42318; }
.ep-firma-aviso--ok { color: #1c7c43; }

.ep-firma-legal {
    margin: 0.9rem 0 0;
    font-size: 0.78rem;
    color: var(--ep-text-muted);
    line-height: 1.45;
}

/* ── Avisos: leyenda de niveles y "no procede" ──────────────────────────── */
.ep-avisos-leyenda {
    border: 1px solid var(--ep-border);
    border-radius: 0.6rem;
    background: var(--ep-surface);
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.9rem;
}

.ep-avisos-leyenda > summary {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
}

.ep-avisos-leyenda > summary::-webkit-details-marker { display: none; }

.ep-avisos-leyenda-resumen {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.ep-avisos-nivel {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--ep-text-muted);
}

.ep-avisos-nivel strong { color: var(--ep-text); }
.ep-avisos-nivel.is-urgente .bi { color: #b42318; }
.ep-avisos-nivel.is-aviso .bi { color: #d5a300; }
.ep-avisos-nivel.is-info .bi { color: var(--ep-text-muted); }

.ep-avisos-leyenda-mas {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--ep-primary);
    text-decoration: underline;
}

.ep-avisos-leyenda-detalle {
    margin: 0.75rem 0 0;
    display: grid;
    gap: 0.5rem;
    border-top: 1px solid var(--ep-border);
    padding-top: 0.7rem;
}

.ep-avisos-leyenda-detalle > div {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.6rem;
    align-items: baseline;
}

.ep-avisos-leyenda-detalle dt {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.ep-avisos-leyenda-detalle dt.is-urgente .bi { color: #b42318; }
.ep-avisos-leyenda-detalle dt.is-aviso .bi { color: #d5a300; }
.ep-avisos-leyenda-detalle dt.is-info .bi { color: var(--ep-text-muted); }

.ep-avisos-leyenda-detalle dd {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ep-text-muted);
}

/* Discreto hasta que se pasa por encima de la línea: es una salida de
   excepción, no algo a lo que invitar. */
.ep-aviso-silenciar {
    flex: 0 0 auto;
    align-self: center;
    border: 0;
    background: none;
    padding: 0.1rem 0.3rem;
    border-radius: 0.3rem;
    color: var(--ep-text-muted);
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.ep-home-aviso-items li:hover .ep-aviso-silenciar,
.ep-aviso-silenciar:focus-visible {
    opacity: 1;
}

.ep-aviso-silenciar:hover { color: #b42318; }

@media (hover: none) {
    /* Sin ratón no hay hover que valga: siempre visible. */
    .ep-aviso-silenciar { opacity: 0.6; }
}

.ep-modal-prompt-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.6rem 0 0.25rem;
    text-align: left;
}

@media (max-width: 768px) {
    .ep-avisos-leyenda-detalle > div { grid-template-columns: 1fr; gap: 0.15rem; }
    .ep-avisos-leyenda-mas { margin-left: 0; }
}

/* ── Cartera de figuras jurídicas (/clientes) ───────────────────────────── */
/* Un 25 % más ancha que el ancho normal de página (1100 → 1375). */
.ep-clientes-page { max-width: 1375px; margin: 0 auto; }

.ep-clientes-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ep-clientes-sub { font-size: 0.85rem; color: var(--ep-text-muted); }

.ep-clientes-buscador { position: relative; min-width: min(340px, 100%); }
.ep-clientes-buscador > .bi {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    color: var(--ep-text-muted); pointer-events: none;
}
.ep-clientes-buscador input { padding-left: 2.2rem; padding-right: 2.2rem; }
.ep-clientes-limpiar {
    position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%);
    color: var(--ep-text-muted); font-size: 0.8rem; text-decoration: none;
}
.ep-clientes-limpiar:hover { color: #b42318; }

/* overflow-x: auto y no hidden: hidden también recorta las esquinas, pero pisaba
   el desplazamiento de .ep-admin-table-wrap y en el móvil la tabla ensanchaba la
   página 62 px (verificación del 05/10/2026). auto recorta igual y deja
   desplazar la tabla dentro de su caja. */
.ep-clientes-tabla { border: 1px solid var(--ep-border); border-radius: 0.6rem; overflow-x: auto; }

/* Cabeceras ordenables: el enlace ocupa la celda entera. */
.ep-clientes-tabla thead th > a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.ep-clientes-tabla thead th > a:hover { color: var(--ep-primary); }
.ep-clientes-tabla thead th .bi-dash { opacity: 0.3; }

.ep-clientes-tipo { font-size: 0.75rem; color: var(--ep-text-muted); }
.ep-clientes-sin { color: var(--ep-text-muted); font-style: italic; }

.ep-clientes-aldia { color: #1c7c43; font-size: 0.8rem; white-space: nowrap; }

.ep-clientes-avisos {
    display: inline-flex;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.ep-clientes-nivel {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.ep-clientes-nivel.is-urgente { color: #b42318; }
.ep-clientes-nivel.is-aviso { color: #d5a300; }
.ep-clientes-nivel.is-info { color: var(--ep-text-muted); }

html[data-theme="dark"] .ep-clientes-nivel.is-urgente { color: #ff8a7a; }
html[data-theme="dark"] .ep-clientes-nivel.is-aviso { color: #ffd54a; }

/* Reparto de anchos. La tabla base parte con word-break, así que sin fijarlos
   "NIF/CIF" se partía por la barra y los dos botones de acción caían uno
   debajo del otro. Se le quita sitio a la figura jurídica, que es la única
   columna que admite de sobra que el texto pase a dos líneas. */
/* Cabeceras centradas; el contenido de las celdas sigue alineado a la
   izquierda, que es como se lee una lista. */
.ep-clientes-tabla thead th { text-align: center; }
.ep-clientes-tabla thead th > a { justify-content: center; }

.ep-clientes-tabla { table-layout: fixed; }
.ep-clientes-tabla th:nth-child(1), .ep-clientes-tabla td:nth-child(1) { width: 8.5rem; }
.ep-clientes-tabla th:nth-child(2), .ep-clientes-tabla td:nth-child(2) { width: auto; }
.ep-clientes-tabla th:nth-child(3), .ep-clientes-tabla td:nth-child(3) { width: 9rem; }
.ep-clientes-tabla th:nth-child(4), .ep-clientes-tabla td:nth-child(4) { width: 11rem; }
.ep-clientes-tabla th:nth-child(5), .ep-clientes-tabla td:nth-child(5) { width: 7.5rem; }
.ep-clientes-tabla th:nth-child(6), .ep-clientes-tabla td:nth-child(6) { width: 11.5rem; }

/* El encabezado y el NIF no se parten: caben enteros o no caben. */
.ep-clientes-tabla th:nth-child(1) a,
.ep-clientes-tabla td:nth-child(1) code { white-space: nowrap; }

.ep-clientes-acciones { white-space: nowrap; }
.ep-clientes-acciones .btn { margin-left: 0.25rem; }

/* La paginación es la de Bootstrap (ver AppServiceProvider). */
.ep-clientes-pager { margin-top: 0.9rem; display: flex; justify-content: center; }
.ep-clientes-pager .pagination { margin-bottom: 0; }
.ep-clientes-pager svg { width: 1rem; height: 1rem; vertical-align: -0.15em; }

/* ── Ficha de una figura jurídica ───────────────────────────────────────── */
.ep-cliente-cabecera {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    border: 1px solid var(--ep-border);
    border-radius: 0.7rem;
    background: var(--ep-surface);
    margin-bottom: 1rem;
}

.ep-cliente-logo {
    flex: 0 0 auto;
    width: 84px; height: 84px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ep-border);
    border-radius: 0.6rem;
    background: #ffffff;
    overflow: hidden;
}

.ep-cliente-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ep-cliente-logo-vacio { font-size: 1.8rem; color: #cbd5e1; }

/* La placa sobre la que se pinta el logotipo la decide EL LOGOTIPO, no el tema:
   blanca para los oscuros —la inmensa mayoría, dibujados para papel— y azul
   marino para los claros, que sobre blanco desaparecen (el de EUROPRODAT es
   blanco puro). Así se ven igual de día que de noche y no hay dos casos que
   mantener. Quién es claro lo decide ClientLogoService::esClaro().
   El azul va literal a propósito: --ep-primary-dark se aclara en el tema
   oscuro, y esta placa no debe seguir al tema. */
.ep-logo.ep-logo--claro,
.ep-cliente-logo.ep-logo--claro,
.ep-ficha-logo-preview.ep-logo--claro {
    background: #0f2744;
    border-color: #0f2744;
}

.ep-cliente-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.ep-cliente-bloque {
    border: 1px solid var(--ep-border);
    border-radius: 0.7rem;
    background: var(--ep-surface);
    padding: 0.9rem 1.1rem;
}

.ep-cliente-bloque-titulo {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ep-primary-dark, #0f2744);
    display: flex; align-items: center; gap: 0.4rem;
    margin: 0 0 0.7rem;
}

.ep-cliente-subtitulo {
    font-size: 0.8rem; font-weight: 600; color: var(--ep-text-muted);
    margin: 0.7rem 0 0.3rem;
}

.ep-cliente-avisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ep-cliente-avisos li a {
    display: flex; align-items: flex-start; gap: 0.45rem;
    font-size: 0.85rem; color: inherit; text-decoration: none;
    padding: 0.2rem 0.3rem; margin: 0 -0.3rem; border-radius: 0.4rem;
}
.ep-cliente-avisos li a:hover { background: var(--ep-surface-2); }
.ep-cliente-avisos li a:hover span { text-decoration: underline; }
.ep-cliente-avisos li.is-urgente > a > .bi:first-child { color: #b42318; }
.ep-cliente-avisos li.is-aviso > a > .bi:first-child { color: #d5a300; }
.ep-cliente-avisos li.is-info > a > .bi:first-child { color: var(--ep-text-muted); }
html[data-theme="dark"] .ep-cliente-avisos li.is-urgente > a > .bi:first-child { color: #ff8a7a; }
html[data-theme="dark"] .ep-cliente-avisos li.is-aviso > a > .bi:first-child { color: #ffd54a; }

.ep-cliente-silenciados { margin-top: 0.7rem; font-size: 0.82rem; }
.ep-cliente-silenciados summary { cursor: pointer; color: var(--ep-text-muted); }
.ep-cliente-silenciados ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }

.ep-cliente-datos { margin: 0; display: grid; gap: 0.35rem; font-size: 0.85rem; }
.ep-cliente-datos > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; }
.ep-cliente-datos dt { color: var(--ep-text-muted); font-weight: 500; }
.ep-cliente-datos dd { margin: 0; }

.ep-cliente-personas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.85rem; }
.ep-cliente-personas li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.ep-cliente-lista { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; display: grid; gap: 0.2rem; }

@media (max-width: 768px) {
    .ep-clientes-head { align-items: stretch; }
    .ep-cliente-datos > div { grid-template-columns: 1fr; gap: 0.1rem; }
    .ep-cliente-cabecera { flex-direction: column; align-items: flex-start; }
}

/* ── Auditoría informática ──────────────────────────────────────────────── */
.ep-info-nivel {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 0.6rem;
    color: var(--ep-text-muted);
    white-space: nowrap;
}

.ep-info-nivel.is-incumple { color: #b42318; }
.ep-info-nivel.is-mejorable { color: #ad8200; }
.ep-info-nivel.is-cumple { color: #1c7c43; }

html[data-theme="dark"] .ep-info-nivel.is-incumple { color: #ff8a7a; }
html[data-theme="dark"] .ep-info-nivel.is-mejorable { color: #ffd54a; }

.ep-info-contador {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
    align-self: flex-end;
}

.ep-info-nocontratada {
    margin-bottom: 0.7rem;
    color: var(--ep-text-muted);
}

/* Marca de que la respuesta viene de la implantación y no la ha tecleado nadie. */
.ep-info-precarga {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ep-primary);
    background: var(--ep-surface-2);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    margin-left: 0.35rem;
    white-space: nowrap;
    cursor: help;
}

.ep-info-nota {
    font-size: 0.78rem;
    color: var(--ep-text-muted);
    font-style: italic;
    margin: 0.1rem 0 0.35rem;
}

/* El hallazgo aparece bajo la respuesta en cuanto se contesta: el auditor lo ve
   en el momento y puede repreguntar, sin esperar al PDF. */
.ep-info-hallazgo {
    margin-top: 0.45rem;
    display: grid;
    gap: 0.35rem;
}

.ep-info-hallazgo-linea {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.82rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.4rem;
    border-left: 3px solid transparent;
    background: var(--ep-surface-2);
}

.ep-info-hallazgo-linea.is-incumple { border-left-color: #b42318; }
.ep-info-hallazgo-linea.is-incumple > .bi { color: #b42318; }
.ep-info-hallazgo-linea.is-mejorable { border-left-color: #d5a300; }
.ep-info-hallazgo-linea.is-mejorable > .bi { color: #d5a300; }

.ep-info-accion {
    margin-top: 0.15rem;
    color: var(--ep-text-muted);
}

.ep-info-accion::before {
    content: "→ ";
}

/* Aviso al pedir las cláusulas nominativas del personal. */
.ep-libro-aviso {
    color: #ad8200;
    margin: 0;
}

html[data-theme="dark"] .ep-libro-aviso { color: #ffd54a; }

/* ── Códigos de respaldo del segundo factor ── */
.ep-codigos { max-width: 42rem; margin: 0 auto; }

/* Los recién generados: la única vez que se ven. El aviso va en rojo y arriba
   porque cerrar esta página sin copiarlos no tiene vuelta atrás. */
.ep-codigos-nuevos {
    border: 2px solid var(--ep-primary);
    border-radius: var(--ep-radius);
    background: var(--ep-primary-soft);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.ep-codigos-titulo { font-weight: 700; color: #b42318; margin: 0 0 0.8rem; }
.ep-codigos-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.5rem 1.2rem;
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}
.ep-codigos-lista code {
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    color: var(--ep-primary-dark);
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: 0.35rem;
    padding: 0.15rem 0.5rem;
    display: inline-block;
}
.ep-codigos-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ep-codigos-consejo { font-size: 0.88rem; color: var(--ep-text-muted); margin: 0.9rem 0 0; }

.ep-codigos-estado {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    background: var(--ep-surface);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.ep-codigos-cuenta {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ep-primary);
    min-width: 2.5rem;
    text-align: center;
}
.ep-codigos-estado.is-pocos { border-color: #ad8200; background: #fff9e6; }
.ep-codigos-estado.is-pocos .ep-codigos-cuenta { color: #ad8200; }

.ep-codigos-form {
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    background: var(--ep-surface);
    padding: 1.1rem 1.25rem;
}
.ep-codigos-confirma { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ep-codigos-confirma input { max-width: 9rem; text-align: center; letter-spacing: 0.3em; }

html[data-theme="dark"] .ep-codigos-estado.is-pocos { background: #3a3117; }
html[data-theme="dark"] .ep-codigos-titulo { color: #ffb4ab; }

/* Al imprimir, solo los códigos: es lo que se guarda en el cajón. */
@media print {
    .ep-header, .ep-codigos-form, .ep-codigos-estado,
    .ep-codigos-acciones, .btn-link { display: none !important; }
    .ep-codigos-nuevos { border: 1px solid #000; background: none; }
}

/* Icono de la cabecera cuya zona está apagada. Se queda a la vista con candado
   en vez de desaparecer: un módulo que se esfuma parece una avería. */
.ep-icon-btn.is-apagada {
    opacity: 0.45;
    cursor: not-allowed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tarjeta de Inicio cuya zona está apagada: se queda a la vista, apagada y sin
   enlace, con el motivo donde iba su descripción. */
.ep-home-card--apagada {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--ep-surface-3);
}
.ep-home-card--apagada:hover { transform: none; box-shadow: none; }

/* ── DNI/NIE con la letra o el dígito de control incorrectos ──────────────
   Se señala allá donde se muestra un documento de persona (lista de personal,
   buscador de administración, ficha, implantación LOPD). El icono avisa; nunca
   se sugiere la corrección, porque el fallo puede estar en un dígito y sólo se
   comprueba con el documento delante. Global: lo usan varias zonas. */
.ep-doc-mal { color: #b02a37; font-weight: 600; }
.ep-doc-alerta { margin-left: .15rem; cursor: help; }
div.ep-doc-mal { font-weight: 500; margin-top: .35rem; }
/* En oscuro el rojo apagado no llega al contraste mínimo (2.8): se aclara. */
html[data-theme="dark"] .ep-doc-mal { color: #ff8a8a; }
html[data-theme="dark"] .ep-xi-falta { color: #ff8a8a; }

/* ── Administración → Configuración (instalación y DPD) ─────────────────────
   La tarjeta del DPD y su tabla se comparten con /lopd → Tramitar → Delegado
   protec. datos, que enseña lo mismo en sólo lectura. */
.ep-admin-config-sec {
    margin-bottom: 2.25rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--ep-border);
}
.ep-admin-config-sec:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.ep-admin-config-sec > .ep-admin-field-note {
    margin: -0.75rem 0 1.1rem;
    font-size: 0.85rem;
}
.ep-admin-config-subhead {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ep-text-muted);
    margin: 1.5rem 0 0.6rem;
}

/* Tarjeta del DPD vigente. */
.ep-config-dpd-actual { margin: 0.5rem 0 1rem; }
.ep-config-dpd-card {
    background: var(--ep-surface-2);
    border: 1px solid var(--ep-border);
    border-left: 4px solid var(--ep-primary);
    border-radius: var(--ep-radius);
    padding: 1rem 1.1rem;
}
.ep-config-dpd-card__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
    font-size: 1.05rem;
    color: var(--ep-text);
}
.ep-config-dpd-card__head .bi {
    font-size: 1.35rem;
    color: var(--ep-primary);
}
.ep-config-dpd-card__head .badge { margin-left: auto; }
.ep-config-dpd-card__data {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}
.ep-config-dpd-card__data dt {
    font-weight: 600;
    color: var(--ep-text-muted);
}
.ep-config-dpd-card__data dd {
    margin: 0;
    color: var(--ep-text);
    word-break: break-word;
}
.ep-config-dpd-card code {
    font-size: 0.82rem;
    color: var(--ep-text);
    background: var(--ep-surface-3);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

/* Cesar: fecha + botón en una línea, la nota debajo. */
.ep-config-dpd-cese {
    display: grid;
    grid-template-columns: max-content minmax(9rem, 13rem) max-content;
    gap: 0.35rem 0.75rem;
    align-items: center;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--ep-border);
}
.ep-config-dpd-cese .ep-admin-label { min-height: 0; }
.ep-config-dpd-cese .ep-admin-field-note { grid-column: 1 / -1; }

/* Alta plegada: se abre sólo cuando hace falta nombrar a otro. */
.ep-config-dpd-alta {
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: 0.6rem 1rem;
    margin-bottom: 0.5rem;
    background: var(--ep-surface);
}
.ep-config-dpd-alta > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ep-primary);
    list-style: none;
}
.ep-config-dpd-alta > summary::-webkit-details-marker { display: none; }
.ep-config-dpd-alta > summary::before {
    content: "+";
    display: inline-block;
    width: 1.2rem;
    font-weight: 700;
}
.ep-config-dpd-alta[open] > summary::before { content: "–"; }
.ep-config-dpd-alta[open] > summary {
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--ep-border);
}

/* Historial. */
.ep-config-dpd-tabla {
    font-size: 0.88rem;
    margin-bottom: 0;
    color: var(--ep-text);
}
.ep-config-dpd-tabla th {
    font-weight: 600;
    color: var(--ep-text-muted);
    border-bottom-color: var(--ep-border);
    white-space: nowrap;
}
.ep-config-dpd-tabla td { border-bottom-color: var(--ep-border); }

@media (max-width: 720px) {
    .ep-config-dpd-card__data { grid-template-columns: 1fr; gap: 0.1rem; }
    .ep-config-dpd-card__data dt { margin-top: 0.4rem; }
    .ep-config-dpd-cese { grid-template-columns: 1fr; }
}

/* ── Enlaces de texto dentro de notas, avisos y tarjetas ─────────────────────
   Hasta aquí no había ninguna regla para un <a> suelto en texto corrido: los
   enlaces de la aplicación son botones o llevan clase propia. Cada vez que
   alguien ponía un enlace dentro de una nota salía con el azul de Bootstrap,
   fuera del tema (y en oscuro, casi ilegible). Esta regla lo resuelve para
   todos los sitios donde va texto explicativo; para un enlace en cualquier
   otro sitio, la clase .ep-enlace. */
.ep-admin-field-note a,
.ep-config-dpd-card a,
.ep-lopd-col > p a,
.ep-empty a,
.alert a,
.ep-enlace {
    color: var(--ep-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    border-radius: 3px;
}
.ep-admin-field-note a:hover,
.ep-config-dpd-card a:hover,
.ep-lopd-col > p a:hover,
.ep-empty a:hover,
.alert a:hover,
.ep-enlace:hover {
    color: var(--ep-primary-dark);
    text-decoration-thickness: 2px;
}
.ep-admin-field-note a:focus-visible,
.ep-config-dpd-card a:focus-visible,
.ep-lopd-col > p a:focus-visible,
.ep-empty a:focus-visible,
.alert a:focus-visible,
.ep-enlace:focus-visible {
    outline: 2px solid var(--ep-primary);
    outline-offset: 2px;
}
/* En oscuro --ep-primary-dark es casi blanco: el hover se ve como un cambio,
   no como una desaparición. */

/* ===== Colores de Bootstrap con contraste suficiente =====
   Bootstrap trae de serie un gris de botón (#6c757d), un rosa de <code>
   (#d63384) y un verde de éxito (#198754) que se quedan por debajo de 4,5:1
   sobre el fondo de página de esta aplicación (#f4f6f9), y el verde aún más
   en el tema oscuro (3,62:1). Lo cazó la auditoría del 04/10/2026; aquí se
   ajustan los tres en los dos temas. Los botones deshabilitados no cuentan:
   WCAG exime a los controles inactivos. */
:root {
    --bs-code-color: #b02a6b;
}
html[data-theme="dark"] {
    --bs-code-color: #e685b5;
}
.btn-outline-secondary {
    --bs-btn-color: var(--ep-text-muted);
}
.text-success {
    color: #157347 !important;
}
html[data-theme="dark"] .text-success {
    color: #4cc38a !important;
}

/* Pantallas sin marco: el <main> está para el lector de pantalla, no para el
   diseño, que cuelga del body. */
.ep-main-sin-marco {
    display: contents;
}

/* ===== Reducir movimiento =====
   Quien activa «reducir movimiento» en su sistema no quiere que las cosas se
   desplacen, salten o crezcan. Lo que se MUEVE deja de moverse; los cambios de
   color, fondo y opacidad se quedan, porque son los que dicen que algo ha
   cambiado (pasar el ratón, el elemento activo, un modal que aparece).
   Bootstrap ya respeta esta preferencia en sus propios modales y desplegables.
   Antes no había ni una regla (auditoría del 04/10/2026). */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ep-icon-btn:hover,
    .ep-icon-btn:focus-visible,
    .ep-icon-btn.show,
    .ep-icon-btn:active,
    .ep-home-card:hover,
    .ep-lopd-tramitar-btn:not(.is-disabled):hover,
    .ep-lopd-tramitar-btn:not(.is-disabled):active,
    .ep-auth-theme:hover,
    .ep-impl-node.is-active .ep-impl-dot,
    .ep-modal,
    .ep-modal-overlay.is-open .ep-modal {
        transform: none;
    }

    /* El bocadillo se centra con translateX: se conserva, sin el salto vertical. */
    .ep-tip::after,
    .ep-tip:hover::after,
    .ep-tip:focus-visible::after {
        transform: translateX(-50%);
    }

    /* El indicador de carga sigue girando —dice que algo está en marcha—,
       pero despacio. */
    .ep-spin {
        animation-duration: 2.4s;
    }
}

/* ===== Zonas táctiles =====
   En pantallas táctiles los botones pequeños (35 px de alto, y 27×27 el de
   silenciar un aviso) se quedaban por debajo de los 44 px recomendados para
   acertar con el dedo (auditoría del 04/10/2026). Solo con puntero «grueso»:
   con ratón, la densidad de las tablas se queda como está. */
@media (pointer: coarse) {
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
    }

    .btn.w-100,
    .btn.d-block {
        display: flex;
    }

    /* Y al menos 44 de ancho: los de solo icono (con o sin texto oculto para
       lectores de pantalla) quedan cuadrados; los de texto ya son más anchos. */
    .btn {
        min-width: 44px;
    }

    .ep-aviso-silenciar {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ep-portal-menu-item {
        min-height: 44px;
    }
}

/* ===== Avisos con muchas empresas =====
   La pantalla de Avisos pinta todas las empresas de la cartera a la vez (697
   en la base local, con más de 4.000 controles). content-visibility hace que
   el navegador no maquete ni pinte las tarjetas que están fuera de la vista
   hasta que se acercan; el buscador y Ctrl+F siguen encontrándolas igual. */
.ep-home-avisos-list > .ep-home-aviso {
    content-visibility: auto;
    contain-intrinsic-size: auto 140px;
}

/* ===== Línea de la implantación en el móvil =====
   Diez puntos de 30 px más sus huecos no caben en 375 px: la línea desbordaba
   84 px (verificación del 05/10/2026). Por debajo de 520 px los puntos bajan a
   24 px —el mínimo de WCAG para algo que se toca— y desaparecen los huecos.
   Los títulos ya se ocultaban por debajo de 900 px. */
@media (max-width: 519.98px) {
    .ep-impl-timeline {
        gap: 0;
        padding: 0;
    }

    .ep-impl-node {
        min-width: 0;
    }

    .ep-impl-dot {
        width: 24px;
        height: 24px;
        font-size: 0.72rem;
    }
}

/* Contraste en el tema oscuro de dos colores que quedaban fuera de los tokens:
   el verde de los nodos completados (3,06:1) y el rojo de los botones de
   contorno de Bootstrap (3,62:1). */
html[data-theme="dark"] .ep-impl-node.is-completed .ep-impl-node-title {
    color: #4cc38a;
}
html[data-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #f97066;
    --bs-btn-border-color: #f97066;
}

/* ===== Tablas anchas en el móvil =====
   En un móvil la tabla de Clientes (seis columnas) se estrujaba hasta partir
   las palabras letra a letra, y la de Listados ensanchaba la página 52 px
   (verificación del 05/10/2026). Una tabla así no cabe en 375 px: se le da un
   ancho mínimo legible y se desplaza de lado dentro de su caja. */
@media (max-width: 767.98px) {
    /* Los anchos fijos de las columnas son de escritorio (suman unos 870 px):
       en el móvil el nombre se quedaba con lo que sobraba, que era nada. Aquí
       la tabla mide lo que pide su contenido y el nombre tiene un mínimo. */
    .ep-clientes-tabla > .ep-admin-table {
        width: max-content;
        min-width: 100%;
    }

    .ep-clientes-tabla th,
    .ep-clientes-tabla td {
        width: auto !important;
    }

    .ep-clientes-tabla th:nth-child(2),
    .ep-clientes-tabla td:nth-child(2) {
        min-width: 12rem;
        max-width: 16rem;
    }

    .ep-clientes-tabla th:nth-child(4),
    .ep-clientes-tabla td:nth-child(4) {
        min-width: 9rem;
    }

    .ep-admin-list {
        overflow-x: auto;
        position: relative;
    }

    /* Resultados del buscador: el script fija el ancho de cada columna
       midiendo la cabecera al pintarla, y en una caja de 326 px salían
       columnas de una letra («B30 / 0257 / 20»). En el móvil manda el
       contenido y la tabla se desplaza de lado dentro de su caja. */
    .ep-admin-workspace .ep-admin-table-wrap > .ep-admin-table {
        width: max-content !important;
        min-width: 100%;
        table-layout: auto !important;
    }

    .ep-admin-workspace .ep-admin-table-wrap th,
    .ep-admin-workspace .ep-admin-table-wrap td {
        width: auto !important;
    }

    .ep-admin-workspace .ep-admin-table-wrap th:not(:first-child),
    .ep-admin-workspace .ep-admin-table-wrap td:not(:first-child) {
        min-width: 7rem;
    }

    .ep-admin-workspace .ep-admin-table-wrap th:nth-child(2),
    .ep-admin-workspace .ep-admin-table-wrap td:nth-child(2) {
        min-width: 11rem;
        max-width: 16rem;
    }
}