/* Site.css - Estilos base de la aplicación */

/* ===== BOOTSTRAP OVERRIDES ===== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--theme-success, #26b050);
}

.invalid {
    outline: 1px solid var(--theme-danger, #dc3545);
}

.validation-message {
    color: var(--theme-danger, #dc3545);
}

/* ===== BLAZOR ERROR BOUNDARY ===== */
#blazor-error-ui {
    background: var(--theme-warning, lightyellow);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--theme-danger, #b32121);
    padding: 1rem 1rem 1rem 1rem;
    color: var(--theme-text-inverse, white);
    border-left: 4px solid var(--theme-danger, #dc3545);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ===== VARIABLES DE COLOR EQUITAS ===== */
:root {
    --equitas-primary: #0d6efd;
    --equitas-secondary: #6c757d;
    --equitas-dark: #495057;
    --equitas-light: #f8f9fa;
    --equitas-text: #ffffff;
}

/* ===== CLASES UTILITY ===== */
.text-equitas-primary {
    color: var(--equitas-primary) !important;
}

.bg-equitas-primary {
    background-color: var(--equitas-primary) !important;
}

.border-equitas-primary {
    border-color: var(--equitas-primary) !important;
}

/* ===== GENERAL LAYOUT FIXES ===== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Ensure proper spacing and layout */
.content-wrapper {
    min-height: calc(100vh - 56px);
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ===== RESPONSIVE HELPERS ===== */
@media (max-width: 767px) {
    .content-wrapper {
        margin-left: 0 !important;
    }
}

/* ===== DROPDOWN FIXES ===== */
/* Asegurar que los dropdowns se muestren correctamente */
.dropdown {
    /* Mantener los dropdowns por encima del contenido, pero por debajo de diálogos */
    z-index: 1020 !important;
}

.dropdown-panel {
    z-index: 1020 !important;
    position: fixed !important;
    box-shadow: 0 6px 12px rgba(0,0,0,.175) !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* Evitar que los contenedores padres corten los dropdowns */
.card-body {
    overflow: visible !important;
}

.container-fluid {
    overflow: visible !important;
}

/* Mejorar la apariencia de los items del dropdown */
.dropdown-item {
    padding: 0.5rem 1rem !important;
    border-bottom: none !important;
}

.dropdown-item:hover {
    background-color: var(--theme-primary, #0d6efd) !important;
    color: white !important;
}

/* ===== BOOTSTRAP SELECT IMPROVEMENTS ===== */
/* Mejorar la apariencia de los select nativos */
.form-select {
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    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='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.form-select:focus {
    border-color: var(--theme-primary, #0d6efd) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.form-select:hover {
    border-color: #b0b0b0 !important;
}

/* Fix para texto cortado en select */
.form-select option {
    padding: 0.5rem !important;
    line-height: 1.8 !important;
    min-height: 2rem !important;
}

/* Asegurar altura mínima para el select */
.form-select {
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    height: auto !important;
}

/* Mejorar inputs también */
.form-control:focus {
    border-color: var(--theme-primary, #0d6efd) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* ===== MODAL RESPONSIVE FIXES ===== */
/* Hacer los modales responsive en dispositivos móviles */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    .modal-dialog.modal-lg {
        max-width: calc(100% - 1rem) !important;
    }

    .modal-content {
        max-height: calc(100vh - 1rem) !important;
        overflow-y: auto !important;
    }

    .modal-body {
        max-height: calc(100vh - 200px) !important;
        overflow-y: auto !important;
        padding: 1rem !important;
    }

    /* Ajustar RadzenHtmlEditor en móviles */
    .rz-html-editor {
        height: 200px !important;
        min-height: 200px !important;
    }

    /* Ajustar inputs y controles en modales */
    .modal-body .form-group {
        margin-bottom: 1rem !important;
    }

    .modal-body input,
    .modal-body select,
    .modal-body textarea {
        font-size: 16px !important; /* Evita el zoom en iOS */
    }

    /* Ajustar botones del modal footer */
    .modal-footer {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .modal-footer .btn {
        width: 100% !important;
    }
}

/* ===== SIDEBAR MOBILE FIXES ===== */
/* Hacer el sidebar colapsable en móviles */
@media (max-width: 767px) {
    .main-sidebar {
        position: fixed !important;
        left: -250px !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 1050 !important;
        transition: left 0.3s ease-in-out !important;
        width: 250px !important;
    }

    .main-sidebar.sidebar-open {
        left: 0 !important;
    }

    /* Overlay cuando el sidebar está abierto */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* Ajustar el contenido cuando el sidebar está cerrado */
    .content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Botón para abrir/cerrar sidebar en móviles */
    .mobile-menu-toggle {
        display: block !important;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1060;
        background: var(--theme-primary, #0d6efd);
        color: white;
        border: none;
        border-radius: 4px;
        padding: 10px 15px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
}

@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-sidebar {
        position: fixed !important;
        left: 0 !important;
    }
}

/* ===== RADZEN DIALOG Z-INDEX FIX ===== */
/* Asegurar que los diálogos/overlays de Radzen estén por encima de dropdowns y overlays propios */
.rz-dialog,
.rz-dialog-wrapper,
.rz-dialog-mask,
.rz-overlay,
.rz-overlaypanel,
.rz-notification-container,
.rz-tooltip,
.rz-contextmenu {
    z-index: 2000 !important;
}

/* ===== RADZEN HTML EDITOR MOBILE FIXES ===== */
/* Ajustes específicos para el editor de texto enriquecido en móviles */
@media (max-width: 767px) {
    /* Reducir altura del editor en móviles */
    .bug-html-editor,
    .bug-html-editor .rz-html-editor {
        height: 200px !important;
        min-height: 200px !important;
    }

    /* Ajustar toolbar del editor */
    .rz-html-editor-toolbar {
        flex-wrap: wrap !important;
        overflow-x: auto !important;
        padding: 0.5rem !important;
    }

    /* Reducir tamaño de botones del toolbar */
    .rz-html-editor-toolbar button {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.875rem !important;
    }

    /* Ajustar área de edición */
    .rz-html-editor-content {
        font-size: 14px !important;
        padding: 0.5rem !important;
    }

    /* Hacer el editor scrollable en móviles */
    .rz-html-editor {
        overflow-y: auto !important;
    }
}

/* ===== ALERT DE VALIDACIÓN PERSONALIZADO ===== */
/* Clase especial para alerts de validación con colores forzados */
.alert-validation-error {
    background-color: #f8d7da !important;
    border: 2px solid #dc3545 !important;
    border-radius: 0.375rem !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}

.alert-validation-error strong,
.alert-validation-error .alert-title {
    color: #dc3545 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

.alert-validation-error ul,
.alert-validation-error li,
.alert-validation-error .error-text {
    color: #dc3545 !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
}

.alert-validation-error hr {
    border-color: #dc3545 !important;
    opacity: 0.25 !important;
    margin: 0.5rem 0 !important;
}

.alert-validation-error .btn-close {
    filter: brightness(0) saturate(100%) invert(20%) sepia(70%) saturate(4000%) hue-rotate(345deg) !important;
}