/* =========================================
   SISTEMA GESTOR DE DOCUMENTOS LOGIALES
   ESTILOS UNIFICADOS - VERSIÓN DEFINITIVA
   ========================================= */

:root {
    /* El color primario se inyecta desde el HTML si es dinámico, 
       aquí definimos los valores base y constantes */
    --primary-dark: #1a237e;
    --gold: #c5a059;
    --gold-light: #e0c58e;
    --gold-soft: rgba(197, 160, 89, 0.15);
    --bg-light: #f8f9fa;
    --text-dark: #1a2a40;
}

/* =========================================
   GENERALES Y TIPOGRAFÍA
   ========================================= */
/* estilos.css - Cambia el body para que no sea azul por defecto en todo el sitio */
body, html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    font-family: 'Montserrat', sans-serif; 
    background-color: #f8f9fa; /* Fondo claro para el sistema interno */
    color: #333;
}

/* Solo cuando estemos en el dashboard usamos el azul si es necesario */
.dashboard-body {
    background-color: var(--primary-dark);
}
h1, h2, h3, h4, h5, .cinzel {
    font-family: 'Cinzel', serif;
}

.text-primary-dark { color: var(--primary-dark) !important; }
.text-gold { color: var(--gold) !important; }
.bg-primary-dark { background-color: var(--primary-dark) !important; }
.bg-gold-soft { background-color: var(--gold-soft) !important; }

.divider-gold {
    height: 3px;
    background: var(--gold);
    margin-bottom: 20px;
    border-radius: 2px;
}

/* =========================================
   SIDEBAR JERÁRQUICO
   ========================================= */
#sidebarMenu, .sidebar {
    min-height: 100vh !important;
    background-color: var(--primary-dark) !important;
    border-right: 3px solid var(--gold);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 10px rgba(0,0,0,0.2);
    z-index: 1000;
}

.user-section, .user-panel { 
    padding: 30px 15px 20px; 
    text-align: center; 
    background: rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.05); 
}



/* Contenedor del logo */
.logo-circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
}

/* El logo específicamente */
.sidebar-logo {
    width: 75px !important;
    height: 75px !important;
    /* 'contain' es clave: mantiene la forma original sin estirarla */
    object-fit: contain; 
    /* Fondo transparente si tu logo es PNG */
    background-color: transparent !important;
    /* Esto lo hace circular */
    border-radius: 50% !important;
    /* Asegura que no se desborde */
    display: block;
}

.user-photo, .img-perfil-sidebar {
    width: 85px !important;
    height: 85px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid var(--gold);
    margin: 0 auto 10px;
    display: block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.sidebar-heading, .section-header {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--gold);
    padding: 20px 25px 5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.9;
}

.nav-link {
    color: rgba(255,255,255,0.7) !important;
    padding: 12px 25px !important;
    transition: 0.3s;
    font-size: 0.9rem;
    text-decoration: none !important;
    border-left: 4px solid transparent;
}

.nav-link:hover {
    color: white !important;
    background: rgba(255,255,255,0.05);
    border-left: 4px solid rgba(197, 160, 89, 0.5);
}

.nav-link.active {
    color: white !important;
    background: rgba(255,255,255,0.1);
    border-left: 4px solid var(--gold);
    font-weight: bold;
}

.nav-link i {
    color: var(--gold);
    margin-right: 10px;
}

/* Sidebar Fijo y Visible */
#sidebarMenu {
    min-height: 100vh !important;
    background-color: var(--primary-dark) !important;
    border-right: 3px solid var(--gold);
    z-index: 1000;
}

.sidebar-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
    background: white;
    border-radius: 10px;
    padding: 5px;
}

.user-photo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--gold) !important;
}

.nav-link {
    color: rgba(255,255,255,0.7) !important;
    font-weight: 500;
    transition: 0.3s;
}

.nav-link:hover, .nav-link.active {
    color: white !important;
    background: rgba(255,255,255,0.1);
    border-left: 4px solid var(--gold);
}

.sidebar-heading {
    letter-spacing: 1px;
    color: var(--gold) !important;
    opacity: 0.8;
}
/* =========================================
   DASHBOARD Y TARJETAS
   ========================================= */
.dashboard-card {
    background: white;
    border: none;
    border-bottom: 4px solid var(--gold);
    border-radius: 15px;
    transition: 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.dashboard-card i {
    color: var(--primary-dark);
    font-size: 2.5rem;
}

.card-taller-hover {
    transition: 0.3s;
    border-left: 5px solid transparent;
}

.card-taller-hover:hover {
    border-left: 5px solid var(--gold);
    transform: translateX(5px);
}

/* =========================================
   TABLAS PROFESIONALES
   ========================================= */
.table-taller {
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.table-taller thead {
    background-color: var(--primary-dark);
    color: white;
}

.table-taller th {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 15px;
    border: none;
}

.table-taller td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

/* =========================================
   VISOR DE DOCUMENTOS
   ========================================= */
.header-viewer-taller {
    background-color: var(--primary-dark);
    border-bottom: 3px solid var(--gold);
}

.subtitulo-visor {
    color: var(--gold-light);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-gold-taller {
    background-color: var(--gold);
    color: var(--primary-dark);
    font-weight: bold;
    border: none;
}

.btn-gold-taller:hover {
    background-color: var(--gold-light);
    color: var(--primary-dark);
}

/* =========================================
   ELEMENTOS DE INTERFAZ EXTRAS
   ========================================= */
.btn-primary-dark {
    background-color: var(--primary-dark);
    color: white;
    border: none;
    transition: 0.3s;
}

.btn-primary-dark:hover {
    background-color: #0d125a;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.alert-hospitalaria {
    background-color: #fff3cd;
    border-left: 5px solid var(--gold) !important;
    color: var(--primary-dark);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Editor Rich Text */
.editor-container {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.ql-toolbar.ql-snow {
    border: none !important;
    background-color: #f8f9fa;
    border-bottom: 2px solid var(--gold) !important;
}

.ql-container.ql-snow {
    border: none !important;
    min-height: 400px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
}

/* =========================================
   MEDIA QUERIES (RESPONSIVIDAD)
   ========================================= */
@media (max-width: 991.98px) {
    #sidebarMenu {
        position: fixed;
        left: -100%;
        top: 0;
        width: 280px;
        z-index: 1050;
        transition: 0.4s ease-in-out;
    }

    #sidebarMenu.active {
        left: 0;
    }

    .main-wrapper {
        margin-left: 0 !important;
    }
}
/* Responsividad */
@media (max-width: 768px) {
    #sidebarMenu {
        position: absolute;
        width: 100%;
        height: auto;
        min-height: auto !important;
    }
}
/* Estilos para el Menú Móvil (Responsive) */
@media (max-width: 767.98px) {
    #sidebarMenu {
        position: fixed;
        top: 0;
        left: -100%; /* Escondido a la izquierda */
        width: 280px;
        height: 100vh;
        z-index: 1100;
        transition: all 0.4s ease;
        display: block !important;
    }

    #sidebarMenu.active {
        left: 0; /* Aparece al activarse */
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;
    }

    .sidebar-overlay.active {
        display: block;
    }
}
/* Forzamos que el fondo de la landing NO tenga colores sólidos que tapen la imagen */
.hero-landing, .main-bg {
    background-color: transparent !important;
}

/* --- AJUSTES DE IDENTIDAD --- */

/* 1. Contenedor circular para el LOGO (Más pequeño) */
.logo-circle-container {
    width: 60px;               /* Antes era 70px, ahora es más pequeño */
    height: 60px;
    border-radius: 50%;
    overflow: hidden;          /* Recorta el fondo calipso de las esquinas */
    margin: 0 auto 1rem;
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;   /* Fondo de seguridad */
}

.logo-img-custom {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* Elimina el fondo calipso estirando la imagen al círculo */
}

/* 2. Foto de PERFIL (Más grande) */
.user-photo-large {
    width: 90px;               /* Tamaño aumentado para destacar */
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gold);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.user-photo-large:hover {
    transform: scale(1.05);    /* Pequeño efecto al pasar el mouse */
}

/* --- LIMPIEZA DE EDITORES --- */

/* Contenedor principal del editor (sin borde propio para evitar la doble línea) */
.editor-wrapper {
    margin-bottom: 2rem; /* Espacio entre secciones */
    background: #fff;
}

/* Ajuste del Toolbar de Quill */
.ql-toolbar.ql-snow {
    border: 1px solid #ced4da !important;
    border-radius: 8px 8px 0 0 !important;
    background: #f8f9fa;
    border-bottom: none !important; /* Quitamos la línea que choca con el editor */
}

/* Ajuste del Cuerpo del editor */
.ql-container.ql-snow {
    border: 1px solid #ced4da !important;
    border-radius: 0 0 8px 8px !important;
    height: 200px; /* Altura fija para que no crezca infinito */
    font-size: 16px;
}

/* Espaciado para el botón de abajo */
.btn-save-container {
    margin-top: 3rem;
    padding-bottom: 5rem;
    border-top: 1px solid #dee2e6; /* Una línea elegante de separación antes del botón */
    padding-top: 2rem;
}
/* --- FOOTER AZUL INSTITUCIONAL --- */

.footer-taller {
    background-color: var(--primary-dark); /* El mismo azul del sidebar */
    border-top: 3px solid var(--gold);    /* Línea divisoria en oro */
}

/* Color de los textos dentro del footer azul */
.footer-taller .footer-text {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
}

/* El separador "|" y el lema masónico en Oro */
.footer-taller .footer-gold {
    color: var(--gold) !important;
}

.footer-taller .lema-footer {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 2px;
    font-size: 1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Texto secundario un poco más tenue para no saturar */
.footer-taller .footer-subtext {
    color: rgba(255, 255, 255, 0.7);
}

/* --- ESTILOS PARA LAS PESTAÑAS DE "MIS ESCRITOS" --- */

/* --- ESTILOS PARA LAS PESTAÑAS DE "MIS ESCRITOS" (Versión Oro) --- */

.nav-pills-taller .nav-link {
    /* Estado NO SELECCIONADO: Ahora en Dorado */
    color: var(--gold) !important; 
    border: 1.5px solid var(--gold) !important;
    background-color: rgba(197, 160, 89, 0.05); /* Un fondo dorado casi invisible */
    margin-right: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* Estado SELECCIONADO: Se mantiene en Azul Institucional */
.nav-pills-taller .nav-link.active {
    background-color: var(--primary-dark) !important;
    color: #ffffff !important;
    border-color: var(--primary-dark) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Efecto al pasar el mouse por el botón dorado */
.nav-pills-taller .nav-link:hover:not(.active) {
    background-color: var(--gold) !important;
    color: #ffffff !important;
    transform: translateY(-2px); /* Pequeño levante para indicar interacción */
}

/* --- ACCIONES EN MIS ESCRITOS --- */
.action-icon {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 5px;
    border-radius: 5px;
}
.action-icon:hover {
    background-color: rgba(0,0,0,0.05);
    transform: translateY(-2px);
}
.card-trazado {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px !important;
}
.card-trazado:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* --- MODALES INSTITUCIONALES --- */
.modal-taller .modal-header {
    background-color: var(--primary-dark);
    border-bottom: 3px solid var(--gold);
    color: white;
}
.modal-taller .modal-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
}
.modal-taller .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Hace la X blanca */
}