/* =============================================================================
   ROADEX — polish transversal (todos los módulos)
   Solo CSS: overlays, modales, formularios, tablas, placeholders
   ============================================================================= */

/* —— Login —— */
.login-page {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 100% 80% at 50% -10%, rgba(37, 99, 235, 0.08), transparent 55%),
        var(--roadex-bg, #f4f6f9);
}

[data-theme="dark"] .login-page {
    background:
        radial-gradient(ellipse 100% 80% at 50% -10%, rgba(96, 165, 250, 0.1), transparent 55%),
        var(--roadex-bg, #0f172a);
}

.login-toolbar .login-theme-btn,
.login-toolbar .login-lang-btn {
    border-radius: 8px;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.login-toolbar .login-lang-btn:hover,
.login-toolbar .login-theme-btn:hover {
    transform: translateY(-1px);
}

[data-theme="dark"] .login-box {
    background: var(--roadex-surface, #1e293b);
    border-color: var(--roadex-border, #334155);
}

[data-theme="dark"] .login-box input {
    background: var(--roadex-surface-alt, #0f172a);
    border-color: var(--roadex-border, #334155);
    color: var(--roadex-text, #f1f5f9);
}

/* —— Overlays / modales (fade unificado) —— */
.asignacion-overlay:not([hidden]),
.comentario-overlay:not([hidden]),
.export-format-overlay:not([hidden]),
#liberacionGestionOverlay:not([hidden]),
.modal-overlay:not([hidden]),
.admin-modal-overlay:not([hidden]),
.admin-lock-overlay:not([hidden]),
.confirm-save-overlay:not([hidden]),
.doc-categoria-overlay:not([hidden]),
#conciliaOverlay:not([hidden]) {
    animation: roadexOverlayFadeIn 0.22s ease;
}

.sidebar-backdrop:not([hidden]) {
    animation: roadexOverlayFadeIn 0.2s ease;
}

/* —— Drawers / paneles laterales —— */
.asignacion-drawer,
.comentario-drawer,
.filter-drawer.open {
    box-shadow: var(--roadex-shadow-lg, -8px 0 32px rgba(15, 23, 42, 0.12));
}

.asignacion-overlay .asignacion-drawer,
.comentario-overlay .comentario-drawer {
    border-left: 1px solid color-mix(in srgb, var(--roadex-border) 80%, transparent);
}

/* —— Formularios (asignación, admin, modales) —— */
.asignacion-drawer input:not([type="checkbox"]):not([type="radio"]),
.asignacion-drawer select,
.asignacion-drawer textarea,
.admin-modal input:not([type="checkbox"]),
.admin-modal select,
.admin-modal textarea,
.comentario-drawer textarea,
.comentario-drawer select,
.admin-lock-box input {
    border-radius: var(--roadex-radius-sm, 8px);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.asignacion-drawer input:focus,
.asignacion-drawer select:focus,
.asignacion-drawer textarea:focus,
.admin-modal input:focus,
.admin-modal select:focus,
.comentario-drawer textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--roadex-link, #2563eb) 60%, var(--roadex-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--roadex-link, #2563eb) 18%, transparent);
}

.asignacion-step-panel {
    animation: roadexStepFade 0.28s ease;
}

@keyframes roadexStepFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* —— Modales centrados —— */
.export-format-dialog,
.admin-modal,
.admin-lock-box,
.confirm-save-box,
.formato-firma-dialog {
    border-radius: var(--roadex-radius-md, 12px);
    box-shadow: var(--roadex-shadow-lg);
    border: 1px solid color-mix(in srgb, var(--roadex-border) 85%, transparent);
}

.export-format-btn,
.confirm-save-btn-primary,
.formato-firma-generate-btn {
    border-radius: var(--roadex-radius-sm, 8px);
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.export-format-btn:hover,
.confirm-save-btn-primary:hover {
    transform: translateY(-1px);
}

/* —— Comentarios —— */
.detail-comment {
    border-radius: var(--roadex-radius-sm, 8px);
    transition: background 0.15s ease;
}

.detail-comment:hover {
    background: color-mix(in srgb, var(--roadex-surface-alt, #f8fafc) 80%, transparent);
}

/* —— Lesiones RC —— */
.lesiones-rc-box {
    border-radius: var(--roadex-radius-md, 12px);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.lesiones-rc-box.is-expanded {
    box-shadow: var(--roadex-shadow-sm);
}

.lesiones-rc-gestion-item {
    border-radius: var(--roadex-radius-sm, 8px);
}

/* —— Admin usuarios —— */
.admin-panel {
    border-radius: var(--roadex-radius-md, 12px);
    border: 1px solid color-mix(in srgb, var(--roadex-border) 85%, transparent);
    box-shadow: var(--roadex-shadow-sm);
    background: var(--roadex-surface, #fff);
    overflow: hidden;
}

.admin-table-wrap {
    border-radius: 0 0 var(--roadex-radius-md, 12px) var(--roadex-radius-md, 12px);
}

.admin-table tbody tr {
    transition: background 0.12s ease;
}

.admin-table tbody tr:hover {
    background: color-mix(in srgb, var(--roadex-link, #2563eb) 4%, transparent);
}

.admin-filters select,
.admin-search-wrap input {
    border-radius: var(--roadex-radius-sm, 8px);
}

/* —— Notificaciones —— */
.notif-group-card,
.topbar-notif-panel {
    border-radius: var(--roadex-radius-md, 12px);
    box-shadow: var(--roadex-shadow-md);
}

.notif-item {
    border-radius: var(--roadex-radius-sm, 8px);
    transition: background 0.15s ease;
}

.notif-item:hover {
    background: color-mix(in srgb, var(--roadex-link, #2563eb) 5%, transparent);
}

/* —— Páginas placeholder (cobros, liberaciones) —— */
.page-placeholder {
    margin-top: 8px;
    padding: 48px 32px;
    text-align: center;
    border-radius: var(--roadex-radius-md, 12px);
    border: 1px dashed color-mix(in srgb, var(--roadex-border) 90%, var(--roadex-muted));
    background: var(--roadex-surface, #fff);
    box-shadow: var(--roadex-shadow-sm);
}

.page-placeholder h2 {
    margin: 0 0 8px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--roadex-heading, #111827);
}

.page-placeholder p {
    margin: 0;
    color: var(--roadex-muted);
    font-size: 14px;
    max-width: 420px;
    margin-inline: auto;
}

.page-header-sub,
.page-subtitle {
    color: var(--roadex-muted);
    font-size: 14px;
    margin: 4px 0 0;
}

.service-card-badge-asignado {
    background: color-mix(in srgb, #0ea5e9 18%, transparent);
    color: #0369a1;
}

.service-card-badge-pendiente {
    background: color-mix(in srgb, #f59e0b 20%, transparent);
    color: #b45309;
}

.service-card-badge-cobro {
    background: color-mix(in srgb, #059669 18%, transparent);
    color: #047857;
}

.service-card-badge-rc {
    background: color-mix(in srgb, #d97706 18%, transparent);
    color: #b45309;
}

/* Modal gestión liberación / cobros — por encima del detalle (z-index 100) */
#liberacionGestionOverlay,
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 6500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 51, 0.58);
}

#liberacionGestionOverlay[hidden],
.modal-overlay[hidden] {
    display: none;
}

.liberacion-gestion-modal,
.modal-overlay .modal-dialog {
    width: min(520px, 100%);
    max-height: min(90vh, 720px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    background: var(--roadex-surface);
    color: var(--roadex-text);
    border-radius: var(--roadex-radius-md, 12px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .modal-overlay .modal-dialog,
[data-theme="dark"] .liberacion-gestion-modal {
    background: var(--roadex-surface);
    color: var(--roadex-text);
    border: 1px solid var(--roadex-border);
}

.liberacion-gestion-modal .modal-header,
.modal-overlay .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--roadex-border, #e5e7eb);
}

.liberacion-gestion-modal .modal-header h2,
.modal-overlay .modal-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.liberacion-gestion-modal .modal-body,
.modal-overlay .modal-body {
    padding: 16px 20px;
    flex: 1;
}

.liberacion-gestion-modal .modal-footer,
.modal-overlay .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--roadex-border, #e5e7eb);
}

.liberacion-gestion-modal .modal-help {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--roadex-muted, #6b7280);
}

.liberacion-gestion-modal .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.liberacion-gestion-modal .form-field input[type="file"] {
    font-size: 14px;
}

.liberacion-gestion-modal .form-hint {
    margin: 0;
    font-size: 12px;
    color: var(--roadex-muted, #6b7280);
}

.liberacion-gestion-modal .form-error-inline {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: #dc2626;
    font-weight: 500;
}

.liberacion-gestion-modal .liberacion-spoa-field input.is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 1px color-mix(in srgb, #dc2626 35%, transparent);
}

[data-theme="dark"] .liberacion-gestion-modal .form-error-inline {
    color: #f87171;
}

.liberacion-gestion-modal .liberacion-spoa-field[hidden] {
    display: none !important;
}

body.liberacion-modal-open .servicio-detail-overlay {
    pointer-events: none;
}

.service-card-badge-liberacion {
    background: color-mix(in srgb, #7c3aed 18%, transparent);
    color: #5b21b6;
}

.modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--roadex-muted, #6b7280);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.modal-close-btn:hover,
.modal-close-btn:focus-visible {
    background: color-mix(in srgb, var(--roadex-muted) 14%, transparent);
    color: var(--roadex-text, #111827);
    outline: none;
}

[data-theme="dark"] .modal-close-btn:hover,
[data-theme="dark"] .modal-close-btn:focus-visible {
    background: color-mix(in srgb, #fff 10%, transparent);
    color: #f3f4f6;
}

.liberacion-upload-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.liberacion-upload-field label {
    font-size: 13px;
    font-weight: 700;
    color: var(--roadex-heading, var(--roadex-text));
}

.liberacion-upload-zone {
    border: 2px dashed color-mix(in srgb, var(--roadex-border) 90%, var(--roadex-muted));
    border-radius: var(--roadex-radius-md, 12px);
    padding: 28px 20px;
    text-align: center;
    color: var(--roadex-muted);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    background: var(--roadex-surface-alt, #f8f9fc);
}

.liberacion-upload-zone:hover,
.liberacion-upload-zone.is-dragover {
    border-color: var(--roadex-link);
    background: color-mix(in srgb, var(--roadex-link) 8%, var(--roadex-surface-alt, #f8f9fc));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--roadex-link) 12%, transparent);
}

.liberacion-upload-zone i {
    font-size: 34px;
    color: var(--roadex-muted);
    display: block;
    margin-bottom: 8px;
}

.liberacion-upload-zone p {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--roadex-text);
}

.liberacion-upload-zone small {
    display: block;
    font-size: 12px;
    color: var(--roadex-muted);
}

.liberacion-upload-link {
    background: none;
    border: none;
    color: var(--roadex-link);
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
    padding: 0;
    font-size: inherit;
}

.liberacion-pending-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.liberacion-pending-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--roadex-border);
    border-radius: var(--roadex-radius-sm, 8px);
    background: var(--roadex-surface);
    font-size: 13px;
}

.liberacion-pending-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--roadex-text);
}

.liberacion-pending-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #dc2626;
    cursor: pointer;
}

.liberacion-pending-remove:hover {
    background: color-mix(in srgb, #dc2626 12%, transparent);
}

.liberacion-existing-block {
    margin-top: 4px;
}

.liberacion-existing-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--roadex-muted);
}

.liberacion-archivos-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.liberacion-archivos-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--roadex-radius-sm, 8px);
    background: color-mix(in srgb, var(--roadex-link) 8%, transparent);
}

.liberacion-archivos-list a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--roadex-link);
    text-decoration: none;
    font-weight: 600;
}

.liberacion-archivos-list a:hover {
    text-decoration: underline;
}

[data-theme="dark"] .liberacion-upload-zone {
    background: var(--roadex-surface-alt);
    border-color: var(--roadex-border);
}

[data-theme="dark"] .liberacion-pending-list li {
    background: var(--roadex-surface);
    border-color: var(--roadex-border);
}

.liberacion-historial-block {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--roadex-border, #e5e7eb);
}

.liberacion-historial-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.liberacion-historial-list li {
    padding: 10px 12px;
    border: 1px solid var(--roadex-border);
    border-radius: var(--roadex-radius-sm, 8px);
    background: var(--roadex-surface-alt, #f8f9fc);
    font-size: 13px;
}

.liberacion-historial-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 6px;
    color: var(--roadex-muted, #6b7280);
    font-size: 12px;
}

.liberacion-historial-meta strong {
    color: var(--roadex-text);
    font-weight: 700;
}

.liberacion-historial-comentario {
    margin: 0;
    color: var(--roadex-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.liberacion-historial-empty {
    margin: 0;
    font-size: 13px;
    color: var(--roadex-muted, #6b7280);
}

[data-theme="dark"] .liberacion-historial-list li {
    background: var(--roadex-surface);
    border-color: var(--roadex-border);
}

#aprobarServicioConfirmOverlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(15, 23, 51, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#aprobarServicioConfirmOverlay[hidden] {
    display: none !important;
}

#aprobarServicioConfirmOverlay .confirm-save-box {
    width: min(440px, 100%);
    padding: 22px 24px;
    background: var(--roadex-surface);
    color: var(--roadex-text);
}

#aprobarServicioConfirmOverlay .confirm-save-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

#roadexAlertOverlay[hidden] {
    display: none !important;
}

#roadexAlertOverlay .roadex-alert-box {
    width: min(460px, 100%);
    padding: 24px 26px 22px;
    text-align: center;
    background: var(--roadex-surface);
    color: var(--roadex-text);
}

#roadexAlertOverlay .confirm-save-icon {
    margin: 0 auto 14px;
}

#roadexAlertOverlay h3 {
    margin: 0 0 10px;
    font-size: 1.15rem;
}

#roadexAlertOverlay p {
    margin: 0;
    line-height: 1.5;
    color: color-mix(in srgb, var(--roadex-text) 82%, transparent);
}

#roadexAlertOverlay .roadex-alert-actions {
    justify-content: center;
    margin-top: 20px;
}

.roadex-confirm-box .confirm-save-icon {
    margin: 0 auto 12px;
}

.roadex-confirm-box {
    text-align: center;
}

.roadex-confirm-box h3 {
    margin-bottom: 10px;
}

.roadex-confirm-box p {
    margin: 0;
    line-height: 1.5;
    color: color-mix(in srgb, var(--roadex-text) 82%, transparent);
}


/* —— Topbar / menús —— */
.topbar-notif-panel,
.topbar-lang-menu,
.topbar-profile-menu {
    border-radius: var(--roadex-radius-md, 12px);
    border: 1px solid color-mix(in srgb, var(--roadex-border) 80%, transparent);
    animation: roadexMenuPop 0.18s ease;
}

@keyframes roadexMenuPop {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.topbar-icon-btn,
.topbar-theme-btn,
.topbar-lang-btn,
.topbar-user {
    transition: background 0.15s ease, transform 0.15s ease;
}

.topbar-icon-btn:active,
.topbar-theme-btn:active {
    transform: scale(0.96);
}

/* —— Feedback banner —— */
.module-readonly-banner {
    transition: border-color 0.18s ease, background 0.18s ease;
}

/* —— Modo oscuro: modales —— */
[data-theme="dark"] .export-format-dialog,
[data-theme="dark"] .admin-modal,
[data-theme="dark"] .admin-lock-box,
[data-theme="dark"] .confirm-save-box,
[data-theme="dark"] .formato-firma-dialog {
    background: var(--roadex-surface);
    border-color: var(--roadex-border);
}

[data-theme="dark"] .page-placeholder {
    background: var(--roadex-surface);
    border-color: var(--roadex-border);
}

[data-theme="dark"] .admin-panel {
    background: var(--roadex-surface);
    border-color: var(--roadex-border);
}

[data-theme="dark"] .detail-comment:hover {
    background: color-mix(in srgb, var(--roadex-surface-alt) 60%, transparent);
}