/* Europrodat NuevaApp — UI principal */

:root {
    --ep-primary: #185fa5;
    --ep-primary-dark: #0f2744;
    --ep-primary-soft: #e8f1fb;
    --ep-border: #e2e8f0;
    --ep-text: #334155;
    --ep-text-muted: #64748b;
    --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);
    border-color: var(--ep-primary);
    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;
    }

    .ep-admin-label {
        text-align: left;
        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;
}

@media (max-width: 768px) {
    .ep-split {
        flex-direction: column;
    }

    .ep-split-resizer {
        flex: 0 0 8px;
        width: 100%;
        cursor: row-resize;
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--ep-border);
        border-bottom: 1px solid var(--ep-border);
    }
}

/* ── 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;
    }
}

/* ===== 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;
}

/* ===== 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"] {
    --ep-primary: #3b86d4;
    --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(--bs-primary, #0d6efd);
    border-bottom: 2px solid rgba(13, 110, 253, 0.2);
    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);
}

.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);
    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);
    border-color: var(--ep-primary);
    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);
    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; }
}

/* 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; }
.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; }

.ep-clientes-tabla { border: 1px solid var(--ep-border); border-radius: 0.6rem; overflow: hidden; }

/* 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. */