/*
 * Archivo: estilo.css
 * Paleta de Colores y Estilos Base + Sidebar Logic
 */

/* 1. Variables de Color (Custom Properties) */
:root {
    /* Colores Solicitados */
    --color-texto: #000;
    --color-enfasis: #e98118;   /* Énfasis o negritas, Títulos */
    --color-ornamento: #e80090; /* Color ornamento (usado para el menú) */
    --color-blanco: #ffffff; /* Color blanco */
    
    /* Colores para Botones - Coherencia (Bootstrap Defaults) */
    --color-guardar: #28a745; /* Verde para Guardar (Success) */
    --color-cancelar: #dc3545; /* Rojo para Cancelar (Danger) */
    
    /* Colores del Sidebar (Adaptados a tu paleta) */
    --sidebar-color-base: #FFF; /* Gris oscuro para el fondo base */
    --sidebar-color-gradient: #FFF; /* Usamos el color de adorno para el gradiente */
    --sidebar-color-link: #343a40;
    --sidebar-width: 14rem;
    --topbar-height: 4.375rem;
}

/* 2. Estilos Globales y de Layout */

body {
    background-color: #f8f9fa; /* Fondo general claro */
    color: var(--color-texto);
    font-size: 16px;
    /* Necesario para el sidebar toggle */
    overflow-x: hidden;
}
/* Backgrounds */
.bg-enfasis{
    background: var(--color-enfasis) !important;
    color:#fff;
}
.bg-ornamento {
    background: var(--color-ornamento) !important;
    color:#fff;
}
/* Tipografía */
.icono-grande{
    font-size:50px;
}

h1, h2, h3, h4, h5, h6, strong, .text-primary {
    color: var(--color-enfasis) !important;
}

/* Contenedores Principales */
#wrapper {
    display: flex;
}

#content-wrapper {
    background-color: #f8f9fc;
    width: 100%;
    overflow-x: hidden;
}

#content {
    flex: 1 0 auto;
}

.sidebar {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.sidebar-dark {
  border-top: 1px solid #000;
}
 hr.sidebar-divider {
  border-bottom: 2px solid var(--color-enfasis);
  margin: 0 5px !important;
}
/* Aplicación de tus colores al menú */
.bg-gradient-primary {
    /* Fondo con gradiente usando tu color de ornamento */
    background-color: var(--sidebar-color-base); 
    background-image: linear-gradient(180deg, var(--sidebar-color-base) 10%, var(--sidebar-color-gradient) 100%);
    background-size: cover;
}

.sidebar .nav-item .nav-link {
    display: block;
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--sidebar-color-link);
    font-weight: bold;
}
.sidebar .nav-item .nav-link:hover {
    color: var(--color-ornamento);
}
.sidebar-dark .nav-item .nav-link:focus{
  color: var(--color-ornamento);
}
.sidebar-dark .nav-item .nav-link i {
  color: var(--color-enfasis);
}
.sidebar-dark .nav-item .nav-link:focus i {
  color: var(--color-ornamento);
}
.sidebar-dark .nav-item .nav-link:hover i {
  color: var(--color-ornamento);
}
.sidebar-dark .nav-item.active .nav-link {
  background-color: #000;
}
.sidebar-dark .nav-item.active .nav-link i {
  color:  var(--color-blanco);
}
.sidebar .sidebar-brand {
    height: var(--topbar-height);
    color: var(--color-blanco);
    padding: 1.5rem 1rem;
}

/* Headings del Sidebar */
.sidebar-heading {
    padding: 0 1rem;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

/* Estado Toggled (Minimizado) */
.sidebar.toggled {
    width: 6.5rem;
    text-align: center;
}

.sidebar.toggled .sidebar-heading,
.sidebar.toggled .sidebar-divider.d-md-block,
.sidebar.toggled .sidebar-brand .sidebar-brand-text {
    display: none !important;
}

/* Topbar (Menú Superior) */
.topbar {
    height: var(--topbar-height);
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
}

.texto-oculto{
    font-size: 1px !important;
    color: transparent !important;
}

/* 3. Personalización de Bootstrap (Tus Estilos Originales) */

/* Campos Redondeados para Formularios */
.form-control, .btn, .input-group-text, .custom-select {
    border-radius: 0.5rem; /* Bordes redondeados */
}

/* Sobreescribimos los colores para guardar y cancelar */
.btn-success {
    background-color: var(--color-guardar);
    border-color: var(--color-guardar);
}
.btn-danger {
    background-color: var(--color-cancelar);
    border-color: var(--color-cancelar);
}
/* Animación pulsar*/
@keyframes pulsar {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.975);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

.btn-pulsar:hover {
    animation: pulsar 1.5s infinite;
}

/* Enfoque en el diseño minimalista y aprovechamiento de espacios */
.container-fluid {
    padding: 15px;
}

/* Barra de Navegación Fija Superior */
.fixed-top {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Estilo para el icono de adorno */
.ornament-icon {
    color: var(--color-ornamento);
}


/* Estilos card-body*/

.card-body h5.text-primary{
    font-weight: bold;
    color: var(--color-ornamento) !important;
}
.card-body strong{
    color: var(--color-texto) !important;
}
.card-body ul span a, .card-body ul.nav-tabs a{
    color: var(--color-enfasis) !important;
}
.card-body .tab-content H6{
    color: var(--color-ornamento) !important;

}

/* BLOOQUE DISPONIBILIDAD EMPLEADOS*/
span.bloque-disponibilidad, span.bloque-disponibilidad i{
    font-size:16px !important;
    margin: 0 10px;
}
span.bloque-disponibilidad{
    color:#000;
}

/* CARD GROUP*/
.card-group .card{
    border: none !important;
}


/* BOTON FLOTANTE*/
.boton-flotante {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: white;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.15);
    z-index: 100;
}

/* MODAL CAMPOS OBLIGATORIOS*/
.modal-campos-obligatorios {
        max-width: 90%;
    }

    .modal-campos-obligatorios .modal-content {
        max-height: 90vh;
    }