:root {
    --app-blue-main: #0669BF;
    --app-blue-secondary: #0788D9;
    --app-blue-deep: #04588C;
    --app-blue-sky: #0B9ED9;
    --app-blue-ice: #14B5D9;
    --app-ink: #04385c;
    --app-muted: #5d7388;
    --app-border: rgba(6, 105, 191, 0.16);
    --app-soft: rgba(20, 181, 217, 0.08);
    --app-soft-strong: rgba(7, 136, 217, 0.14);
    --app-gradient: linear-gradient(135deg, #04588C 0%, #0669BF 42%, #0788D9 72%, #14B5D9 100%);
    --app-gradient-deep: linear-gradient(135deg, #04588C 0%, #0669BF 58%, #0B9ED9 100%);

    --rz-primary: #0669BF;
    --rz-primary-rgb: 6, 105, 191;
    --rz-secondary: #0788D9;
    --rz-secondary-rgb: 7, 136, 217;
    --rz-info: #0B9ED9;
    --rz-info-rgb: 11, 158, 217;
    --rz-link-color: #0669BF;
    --rz-link-hover-color: #04588C;
    --rz-base-background-color: #ffffff;
    --rz-border-color: rgba(4, 88, 140, 0.16);
    --rz-border-color-light: rgba(4, 88, 140, 0.10);
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #f5fbff !important;
}

.rz-layout,
.rz-body {
    background: transparent !important;
}

/* Header */
.rz-header {
    background: var(--app-gradient-deep) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 10px 28px rgba(4, 88, 140, 0.24) !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 8px 18px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
}

.rz-header .app-header-row {
    min-height: 44px;
}

.rz-header .app-header-actions {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 10px;
}

.rz-header .rz-label,
.rz-header .rz-button .rz-button-text,
.rz-header .rz-button .rzi,
.rz-header .rz-button .rz-button-icon,
.rz-header > * span {
    color: rgba(255, 255, 255, 0.94) !important;
}

.rz-header .rz-button {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

.rz-header .rz-button:hover {
    background: rgba(255, 255, 255, 0.16) !important;
}

.app-brand {
    min-width: 0;
}

.app-brand-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.app-brand-wordmark {
    height: 24px;
    width: auto;
    max-width: min(52vw, 260px);
    object-fit: contain;
    display: block;
}

@media (max-width: 640px) {
    .app-brand-wordmark {
        height: 20px;
        max-width: 140px;
    }
}

/* Sidebar */
.rz-sidebar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-right: 1px solid var(--app-border) !important;
    box-shadow: 8px 0 28px rgba(4, 88, 140, 0.10) !important;
    backdrop-filter: blur(10px);
}

.rz-panel-menu,
.rz-panel-menu .rz-navigation-menu {
    background: transparent !important;
}

.rz-panel-menu .rz-navigation-item,
.rz-panel-menu .rz-navigation-item-wrapper,
.rz-panel-menu .rz-navigation-item-wrapper-active {
    background: transparent !important;
}

.rz-panel-menu-item-link,
.rz-navigation-item-link {
    border-radius: 12px !important;
    margin: 3px 8px !important;
    color: #173f5f !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.rz-panel-menu-item-link:hover,
.rz-navigation-item-link:hover {
    background: var(--app-soft) !important;
    color: var(--app-blue-deep) !important;
    transform: translateX(2px);
}

.rz-panel-menu-item-link.rz-navigation-item-active-link,
.rz-navigation-item-link.rz-navigation-item-active-link,
.rz-panel-menu .rz-state-active > .rz-panel-menu-item-link,
.rz-panel-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link,
.rz-panel-menu .rz-navigation-item-wrapper-active > .rz-panel-menu-item-link {
    background: linear-gradient(90deg, rgba(6, 105, 191, 0.16), rgba(20, 181, 217, 0.12)) !important;
    color: var(--app-blue-main) !important;
    font-weight: 800 !important;
    box-shadow: inset 3px 0 0 var(--app-blue-main);
}

.rz-panel-menu .rz-navigation-item-wrapper::before {
    background: transparent !important;
}

.rz-panel-menu .rz-navigation-item-wrapper-active::before {
    background: var(--app-blue-main) !important;
}

.rz-panel-menu-item-link .rzi,
.rz-navigation-item-link .rzi {
    color: inherit !important;
}

/* Content */
.rz-content-container[name="main"],
.rz-body .rz-content-container {
    padding: 1.5rem !important;
}

.rz-content-container {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

/* Cards */
.rz-card {
    border: 1px solid var(--app-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 34px rgba(4, 88, 140, 0.08), 0 1px 0 rgba(255, 255, 255, 0.65) inset !important;
}

.rz-card:has(> .rz-data-grid) {
    padding: 0 !important;
    overflow: hidden;
}

/* Buttons */
.rz-button {
    border-radius: 10px !important;
    font-weight: 700 !important;
}

.rz-button.rz-primary,
.rz-button.rz-button-primary,
.rz-button-primary {
    background: #ffffff !important;
    border: 1px solid rgba(6, 105, 191, 0.30) !important;
    color: var(--app-blue-main) !important;
    box-shadow: 0 8px 18px rgba(6, 105, 191, 0.12) !important;
}

.rz-button.rz-primary:hover,
.rz-button.rz-button-primary:hover,
.rz-button-primary:hover {
    background: rgba(20, 181, 217, 0.10) !important;
    border-color: var(--app-blue-deep) !important;
}

.rz-button.rz-secondary,
.rz-button.rz-button-secondary,
.rz-button-secondary {
    background: #ffffff !important;
    border: 1px solid rgba(7, 136, 217, 0.32) !important;
    color: var(--app-blue-secondary) !important;
}

.rz-button.rz-light,
.rz-button.rz-button-light,
.rz-button-light {
    background: #ffffff !important;
    color: var(--app-blue-deep) !important;
    border-color: rgba(6, 105, 191, 0.18) !important;
}

.rz-button.rz-info,
.rz-button.rz-button-info,
.rz-button-info,
.rz-button.rz-success,
.rz-button.rz-button-success,
.rz-button-success,
.rz-button.rz-warning,
.rz-button.rz-button-warning,
.rz-button-warning {
    background: #ffffff !important;
    border: 1px solid rgba(6, 105, 191, 0.24) !important;
    color: var(--app-blue-main) !important;
}

.rz-button.rz-danger,
.rz-button.rz-button-danger,
.rz-button-danger {
    background: #ffffff !important;
    border: 1px solid rgba(220, 38, 38, 0.30) !important;
    color: #dc2626 !important;
}

.rz-button .rz-button-text,
.rz-button .rzi,
.rz-button .rz-button-icon {
    color: inherit !important;
}

/* Header buttons keep contrast over the blue gradient */
.rz-header .rz-button,
.rz-header .rz-button.rz-light,
.rz-header .rz-button.rz-button-light,
.rz-header .rz-button.rz-warning,
.rz-header .rz-button.rz-button-warning,
.rz-header .rz-button.rz-info,
.rz-header .rz-button.rz-button-info,
.rz-header .rz-button.rz-secondary,
.rz-header .rz-button.rz-button-secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: rgba(255, 255, 255, 0.96) !important;
    box-shadow: none !important;
}

.rz-header .rz-button:hover,
.rz-header .rz-button.rz-light:hover,
.rz-header .rz-button.rz-button-light:hover,
.rz-header .rz-button.rz-warning:hover,
.rz-header .rz-button.rz-button-warning:hover,
.rz-header .rz-button.rz-info:hover,
.rz-header .rz-button.rz-button-info:hover,
.rz-header .rz-button.rz-secondary:hover,
.rz-header .rz-button.rz-button-secondary:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
}

/* Badges */
.rz-badge {
    border-radius: 999px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
}

.rz-badge.rz-info,
.rz-badge-info,
.rz-badge.rz-primary,
.rz-badge-primary {
    background: linear-gradient(135deg, #0788D9, #14B5D9) !important;
    color: #ffffff !important;
}

/* Data grid */
.rz-data-grid {
    border: none !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: none !important;
    overflow: hidden;
}

.rz-data-grid .rz-data-grid-data {
    border: none !important;
}

.rz-data-grid .rz-column-title,
.rz-data-grid th .rz-column-title-content {
    color: var(--app-blue-deep) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
}

.rz-data-grid th {
    background: linear-gradient(90deg, rgba(20, 181, 217, 0.12), rgba(7, 136, 217, 0.08)) !important;
}

.rz-data-grid-data tr:hover > td {
    background: rgba(20, 181, 217, 0.07) !important;
}

.rz-paginator .rz-state-active,
.rz-paginator-element.rz-state-active {
    background: var(--app-blue-main) !important;
    color: #ffffff !important;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6,
h4.rz-text,
.rz-text-h4 {
    color: var(--app-ink);
}

h4.rz-text,
.rz-text-h4 {
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
}

.rz-text-h4,
.rz-text-h5,
.rz-text-h6,
h4.rz-text,
h5.rz-text,
h6.rz-text {
    line-height: 1.18 !important;
}

a,
.rz-link {
    color: var(--app-blue-main) !important;
}

/* Forms */
.rz-form-field > label {
    color: var(--app-muted) !important;
    font-size: 0.77rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
}

.rz-inputtext:focus,
.rz-dropdown:focus-within,
.rz-spinner:focus-within,
.rz-datepicker:focus-within,
.rz-textarea:focus {
    border-color: var(--app-blue-secondary) !important;
    box-shadow: 0 0 0 3px rgba(20, 181, 217, 0.15) !important;
}

/* Radzen popups over custom full-screen modals */
.rz-html-editor-dropdown-items,
.rz-splitbutton-menu,
.rz-autocomplete-panel,
.rz-multiselect-panel,
.rz-dropdown-panel,
.rz-overlaypanel,
.rz-datepicker-popup,
.rz-datepicker-popup-container,
.rz-timespanpicker-popup-container,
.rz-colorpicker,
.rz-tooltip {
    z-index: 12050 !important;
}

/* Tabs */
.rz-tabview-nav .rz-tabview-nav-link {
    border-radius: 10px 10px 0 0 !important;
    font-weight: 700 !important;
}

.rz-tabview-selected .rz-tabview-nav-link,
.rz-tabview-nav li.rz-state-active .rz-tabview-nav-link {
    color: var(--app-blue-main) !important;
    border-color: var(--app-blue-secondary) !important;
}

/* Context menus */
.card-menu {
    overflow: visible !important;
}

/* Responsive tables */
@media (max-width: 767px) {
    .page-body {
        padding: 0.75rem !important;
    }

    .rz-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .rz-card .rz-data-grid {
        min-width: 550px;
    }

    .rz-card .rz-data-grid-data {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
}

/* Responsive actions */
@media (max-width: 767px) {
    .wrap-mobile {
        flex-wrap: wrap !important;
    }

    .wrap-mobile > * {
        min-width: 0;
    }

    .action-buttons {
        flex-wrap: wrap !important;
        width: 100%;
    }

    .action-buttons > * {
        flex: 1 1 auto;
    }
}

/* Drag and drop */
.drag-handle {
    cursor: grab;
    user-select: none;
    color: var(--rz-text-disabled-color);
    font-size: 1.1rem;
    padding: 2px 4px;
    display: inline-block;
}

.drag-handle:hover {
    color: var(--app-blue-main);
}

.drop-target-active {
    outline: 2px dashed var(--app-blue-secondary) !important;
    border-radius: 4px !important;
    background: rgba(20, 181, 217, 0.08) !important;
}

/* Blazor error boundary */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 4px;
}

.blazor-error-boundary::after {
    content: "Se ha producido un error.";
}

/* Shared layout utilities */
.app-title-row {
    width: 100%;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
}

.app-filter-row {
    width: 100%;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    row-gap: 0.75rem !important;
    column-gap: 0.75rem !important;
}

.app-title-row > *,
.app-filter-row > * {
    min-width: 0;
}

.app-filter-input-lg {
    flex: 1 1 360px;
    min-width: 240px;
    max-width: 760px;
    width: min(100%, 760px);
    box-sizing: border-box;
}

.app-search-input-normal {
    display: block;
    width: min(100%, 420px);
    min-width: 240px;
    max-width: 420px;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 1.35 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    resize: none !important;
    margin-bottom: 0.6rem;
}

.app-search-input-normal.rz-inputtext,
input.app-search-input-normal,
textarea.app-search-input-normal {
    width: min(100%, 420px) !important;
}

.app-search-input-normal .rz-inputtext,
.app-search-input-normal textarea,
.app-search-input-normal input {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 1.35 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    resize: none !important;
}

.app-filter-field-sm {
    flex: 0 1 170px;
    min-width: 140px;
    width: min(170px, 100%);
    max-width: 100%;
    box-sizing: border-box;
}

.app-filter-field-md {
    flex: 0 1 220px;
    min-width: 160px;
    width: min(220px, 100%);
    max-width: 100%;
    box-sizing: border-box;
}

.app-filter-field-date {
    flex: 0 1 220px;
    min-width: 160px;
    width: min(220px, 100%);
    max-width: 100%;
    box-sizing: border-box;
}

.app-filter-row > .rz-form-field,
.app-filter-row > .rz-textbox,
.app-filter-row > .rz-button,
.app-filter-row > .rz-stack {
    margin-bottom: 0 !important;
}

.app-filter-row .rz-form-field {
    margin-top: 0 !important;
    min-width: 0;
}

.app-filter-row .rz-form-field-content,
.app-filter-row .rz-dropdown,
.app-filter-row .rz-datepicker {
    width: 100% !important;
    max-width: 100% !important;
}

.app-filter-row .rz-textbox,
.app-filter-row .rz-inputtext,
.app-filter-row .rz-dropdown,
.app-filter-row .rz-datepicker input,
.app-filter-row .rz-button {
    min-height: 40px;
}

.app-filter-row .rz-button {
    white-space: nowrap;
    align-self: flex-end;
}

.app-section-card {
    padding: 1rem !important;
}

.app-grid-card.rz-card:has(> .rz-data-grid) {
    padding: 0 !important;
}

.app-section-header {
    margin-bottom: 0.95rem;
}

.app-section-title {
    margin: 0;
    font-weight: 700 !important;
}

.app-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.app-modal-card {
    width: min(760px, 96vw);
    max-height: 92vh;
    overflow-y: auto;
    padding: 1.5rem;
}

.app-modal-card-lg {
    width: min(980px, 97vw);
}

.app-modal-card-md {
    width: min(620px, 96vw);
}

.app-modal-card-types {
    width: min(860px, 97vw);
    padding-top: 1.35rem;
}

.app-modal-overlay-top {
    align-items: flex-start;
    padding-top: 3rem;
}

.app-modal-header-row {
    margin-bottom: 1.1rem;
    padding-top: 0.2rem;
}

.app-form-row {
    flex-wrap: wrap;
}

.app-form-col {
    flex: 1 1 280px;
    min-width: 0;
}

.app-form-col-sm {
    flex: 1 1 180px;
    max-width: 280px;
    min-width: 0;
}

.app-form-col-fixed {
    min-width: 240px;
}

/* Login */
.app-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: var(--app-gradient);
}

.app-login-card {
    width: min(520px, 95vw);
    padding: 2rem 2rem 1.85rem;
    border-radius: 16px !important;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.app-login-brand-icon {
    width: auto;
    height: auto;
    border-radius: 0;
    display: grid;
    place-items: center;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.app-login-brand-icon-image {
    width: 58px;
    height: 58px;
    object-fit: contain;
    display: block;
}

.app-login-brand-icon-symbol {
    color: #fff;
    font-size: 1.8rem;
}

.app-login-brand-label {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: "Times New Roman", Georgia, serif;
    color: var(--app-blue-deep);
}

.app-login-title {
    margin: 0;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
}

.app-login-subtitle {
    margin: 0;
    color: var(--rz-text-secondary-color);
}

.app-login-submit {
    width: 100%;
    margin-top: 0.1rem;
}

.app-login-submit .rz-button-text {
    letter-spacing: 0.1em;
}

.app-login-card .rz-inputtext,
.app-login-card .rz-password {
    min-height: 2.6rem;
}

.app-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.55rem 0.85rem;
    width: 100%;
}

.app-types-grid-item {
    min-height: 32px;
}

.app-types-grid-item .rz-label {
    white-space: normal;
    line-height: 1.25;
}

.app-types-new-row {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.app-types-new-input {
    flex: 1 1 230px;
    min-width: 180px;
}

.app-types-config-list {
    margin-top: 0.2rem;
}

.app-type-config-item {
    padding: 0.75rem 0.9rem !important;
}

.app-type-config-main {
    flex: 1 1 260px;
    min-width: 220px;
}

.app-type-config-actions {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .app-modal-card {
        padding: 1rem;
    }

    .app-modal-card-lg {
        width: min(100%, 97vw);
    }

    .app-login-card {
        padding: 1.25rem;
    }

    .app-filter-input-lg,
    .app-filter-field-sm,
    .app-filter-field-md {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    .app-filter-field-date {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    .app-modal-overlay-top {
        padding-top: 1rem;
    }

    .app-modal-card-types {
        padding-top: 1rem;
    }

    .app-type-config-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Archivos subidos */
.archivos-subidos-grid .archivos-col-acciones {
    text-align: center;
}

.archivos-subidos-grid .archivo-accion-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

.archivos-subidos-grid .archivo-btn-descargar {
    min-width: 124px;
    justify-content: center;
}

.archivos-subidos-grid .rz-cell-data {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1000px) {
    .archivos-subidos-grid .archivo-btn-descargar {
        min-width: 104px;
    }
}