/* ===========================
   DIALOGMANAGER - ESTILOS BASE
   =========================== */

/* Variables CSS para personalización */
:root {
    --dialog-bg: #ffffff;
    --dialog-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    --dialog-border-radius: 1rem;
    --dialog-padding: 2rem;
    --dialog-header-bg: #f8f9fa;
    --dialog-backdrop: rgba(0, 0, 0, 0.5);
    --dialog-max-width: 800px;
    --dialog-animation-duration: 0.3s;
    --color-principal: #28a745;
}

/* ===========================
   BACKDROP (fondo oscuro)
   =========================== */
dialog::backdrop {
    background: var(--dialog-backdrop);
    backdrop-filter: blur(2px);
    animation: fadeIn var(--dialog-animation-duration) ease;
}

/* ===========================
   DIALOG BASE
   =========================== */
dialog {
    background: var(--dialog-bg);
    border: none;
    border-radius: var(--dialog-border-radius);
    box-shadow: var(--dialog-shadow);
    padding: 0;
    max-width: var(--dialog-max-width);
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideUp var(--dialog-animation-duration) ease;
}

/* Cerrar animación de backdrop en navegadores que lo soporten */
dialog[closing]::backdrop {
    animation: fadeOut var(--dialog-animation-duration) ease;
}

dialog[closing] {
    animation: slideDown var(--dialog-animation-duration) ease;
}

/* ===========================
   ESTRUCTURA INTERNA
   =========================== */

/* Header del dialog */
dialog .header {
    background: var(--dialog-header-bg);
    padding: var(--dialog-padding);
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

dialog .header h1,
dialog .header h2,
dialog .header h3,
dialog .header h4 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: #212529;
    text-align: center;
}

dialog .header h1 { font-size: 2rem; }
dialog .header h2 { font-size: 1.875rem; }
dialog .header h3 { font-size: 1.75rem; }
dialog .header h4 { font-size: 1.5rem; }

/* Body del dialog */
dialog .body {
    padding: var(--dialog-padding);
    overflow-y: auto;
    max-height: calc(90vh - 180px);
}

/* Footer del dialog */
dialog .footer {
    background: var(--dialog-header-bg);
    padding: var(--dialog-padding);
    border-top: 1px solid #dee2e6;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* ===========================
   BOTONES DENTRO DEL DIALOG
   =========================== */
dialog .btn-close,
dialog .btn-cerrar {
    margin-top: 1.5rem;
}

dialog .footer .btn {
    margin: 0;
}

/* ===========================
   LOADER (armonizado con el sistema)
   =========================== */
.dialog-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.dialog-loader .spinner {
    width: 80px;
    height: 80px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--color-principal);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.dialog-loader p {
    margin-top: 1rem;
    font-size: 1rem;
    color: #6c757d;
    font-weight: 500;
}

/* ===========================
   MENSAJES DE ERROR
   =========================== */
.dialog-error {
    animation: slideInDown 0.3s ease;
    margin-bottom: 1rem;
}

/* ===========================
   TAMAÑOS PERSONALIZADOS
   =========================== */

/* Dialog pequeño */
dialog.dialog-sm {
    max-width: 400px;
}

/* Dialog mediano (por defecto) */
dialog.dialog-md {
    max-width: 600px;
}

/* Dialog grande */
dialog.dialog-lg {
    max-width: 900px;
}

/* Dialog extra grande */
dialog.dialog-xl {
    max-width: 1200px;
}

/* Dialog fullscreen */
dialog.dialog-fullscreen {
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    margin: 0;
}

/* ===========================
   TEMAS DE COLOR
   =========================== */

/* Tema Success (verde) */
dialog.theme-success {
    --color-principal: #28a745;
}

dialog.theme-success .header {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-bottom: none;
}

dialog.theme-success .header h1,
dialog.theme-success .header h2,
dialog.theme-success .header h3,
dialog.theme-success .header h4 {
    color: white;
}

/* Tema Danger (rojo) */
dialog.theme-danger {
    --color-principal: #dc3545;
}

dialog.theme-danger .header {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border-bottom: none;
}

dialog.theme-danger .header h1,
dialog.theme-danger .header h2,
dialog.theme-danger .header h3,
dialog.theme-danger .header h4 {
    color: white;
}

/* Tema Primary (azul) */
dialog.theme-primary {
    --color-principal: #007bff;
}

dialog.theme-primary .header {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-bottom: none;
}

dialog.theme-primary .header h1,
dialog.theme-primary .header h2,
dialog.theme-primary .header h3,
dialog.theme-primary .header h4 {
    color: white;
}

/* Tema Warning (amarillo) */
dialog.theme-warning {
    --color-principal: #ffc107;
}

dialog.theme-warning .header {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #212529;
    border-bottom: none;
}

/* Tema Info (celeste) */
dialog.theme-info {
    --color-principal: #17a2b8;
}

dialog.theme-info .header {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    border-bottom: none;
}

dialog.theme-info .header h1,
dialog.theme-info .header h2,
dialog.theme-info .header h3,
dialog.theme-info .header h4 {
    color: white;
}

/* Tema Dark (oscuro) */
dialog.theme-dark {
    --color-principal: #343a40;
    --dialog-bg: #212529;
    --dialog-header-bg: #343a40;
}

dialog.theme-dark .header {
    background: #343a40;
    color: white;
}

dialog.theme-dark .body {
    background: #212529;
    color: white;
}

dialog.theme-dark .header h1,
dialog.theme-dark .header h2,
dialog.theme-dark .header h3,
dialog.theme-dark .header h4 {
    color: white;
}

/* ===========================
   ANIMACIONES
   =========================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

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

@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===========================
   RESPONSIVE - BOOTSTRAP 3
   =========================== */

/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
    dialog {
        width: 95%;
        max-width: 95%;
        padding: 0;
        border-radius: 0.5rem;
    }

    dialog .header,
    dialog .body,
    dialog .footer {
        padding: 1rem;
    }

    dialog .header h1,
    dialog .header h2,
    dialog .header h3,
    dialog .header h4 {
        font-size: 1.25rem;
    }

    dialog .body {
        max-height: calc(90vh - 150px);
    }

    /* Stacking de botones en móvil */
    dialog .footer {
        flex-direction: column;
    }

    dialog .footer .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    dialog .footer .btn:last-child {
        margin-bottom: 0;
    }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
    dialog {
        width: 85%;
    }

    dialog.dialog-sm {
        max-width: 350px;
    }

    dialog.dialog-md {
        max-width: 550px;
    }

    dialog.dialog-lg {
        max-width: 750px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    dialog {
        width: 80%;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    dialog {
        width: 70%;
    }

    dialog.dialog-xl {
        max-width: 1400px;
    }
}

/* ===========================
   TABLAS DENTRO DEL DIALOG
   =========================== */
dialog .body .table-responsive {
    margin-bottom: 0;
}

dialog .body table {
    margin-bottom: 1rem;
}

/* Ajuste para DataTables dentro del dialog */
dialog .dataTables_wrapper {
    padding: 0;
}

dialog .dataTables_filter {
    margin-bottom: 1rem;
}

/* ===========================
   FORMULARIOS DENTRO DEL DIALOG
   =========================== */
dialog .form-group:last-child {
    margin-bottom: 0;
}

dialog .form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}

/* ===========================
   UTILIDADES
   =========================== */

/* Sin padding en body */
dialog.no-padding .body {
    padding: 0;
}

/* Sin padding en header */
dialog.no-header-padding .header {
    padding: 0;
}

/* Header sin background */
dialog.transparent-header .header {
    background: transparent;
    border-bottom: none;
}

/* Dialog sin bordes redondeados */
dialog.no-radius {
    border-radius: 0;
}

/* Scroll suave */
dialog .body {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

dialog .body::-webkit-scrollbar {
    width: 8px;
}

dialog .body::-webkit-scrollbar-track {
    background: transparent;
}

dialog .body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

dialog .body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* ===========================
   ACCESIBILIDAD
   =========================== */

/* Focus visible para navegación por teclado */
dialog:focus {
    outline: 2px solid var(--color-principal);
    outline-offset: 2px;
}

/* Reducir animaciones para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    dialog,
    dialog::backdrop,
    .dialog-loader,
    .dialog-error {
        animation: none;
        transition: none;
    }
}

/* ===========================
   SOPORTE PARA NAVEGADORES ANTIGUOS
   =========================== */

/* Fallback para navegadores sin soporte de backdrop-filter */
@supports not (backdrop-filter: blur(2px)) {
    dialog::backdrop {
        background: rgba(0, 0, 0, 0.7);
    }

    .dialog-loader {
        background: rgba(255, 255, 255, 0.98);
    }
}