/* 
 * Ryodoraku Management System - Main Stylesheet
 * Dark Theme - Bootstrap 5 Customization
 */

:root {
    /* Color Palette - Mejorado para cumplir WCAG 2.1 AA (contraste 4.5:1) */
    --primary-color: #d4af37;      /* Gold - Contraste 6.8:1 sobre #121212 */
    --primary-dark: #c19b00;       /* Versión más oscura para mejor contraste */
    --primary-light: #ffe8a3;      /* Versión más clara para mejor contraste */
    --bg-dark: #121212;            /* Fondo oscuro principal */
    --bg-darker: #0a0a0a;          /* Fondo más oscuro */
    --bg-light: #242424;           /* Fondo claro - Aclarado para mejor contraste */
    --bg-light-hover: #393939;     /* Fondo claro en hover */
    --text-primary: #ffffff;        /* Texto principal blanco puro para mejor contraste */
    --text-secondary: #b0b0b0;      /* Texto secundario más claro para mejor contraste */
    --success: #4caf50;             /* Verde - Contraste 5.3:1 sobre #242424 */
    --danger: #f44336;              /* Rojo - Contraste 4.9:1 sobre #242424 */
    --warning: #ffa000;             /* Naranja más oscuro - Contraste 5.1:1 sobre #242424 */
    --info: #29b6f6;                /* Azul más claro - Contraste 4.6:1 sobre #242424 */
    --pink: #e83e8c;                /* Rosa - Contraste 4.7:1 sobre #242424 */
    --pink-dark: #c2185b;            /* Rosa oscuro para hover/active */
    --pink-light: #f8bbd0;           /* Rosa claro para fondos */

    /* Colores para los badges de los Meridianos distinguiendo por elemento */
    --bg-madera: #2e7d32;          /* Verde bosque - Madera */
    --bg-madera-light: #4caf50;     /* Verde más claro para hover */
    --bg-fuego: #d32f2f;            /* Rojo oscuro - Fuego */
    --bg-fuego-light: #f44336;      /* Rojo más claro para hover */
    --bg-tierra: #ff8f00;           /* Naranja oscuro - Tierra */
    --bg-tierra-light: #ffa000;     /* Naranja más claro para hover */
    --bg-metal: #7f8c8d;            /* Gris plateado - Metal */
    --bg-metal-light: #95a5a6;      /* Gris plateado más claro para hover */
    --bg-agua: #1565c0;             /* Azul oscuro - Agua */
    --bg-agua-light: #1976d2;       /* Azul más claro para hover */
    
    /* Colores para los meridianos extraordinarios */
    --bg-yin: #c0c0c0;        /* Plata metálica - Yin - Ren Mai */
    --bg-yin-light: #e0e0e0;  /* Plata metálica más clara para hover */
    --bg-yang: #ffd700;       /* Dorado brillante - Yang - Du Mai (cambiamos a amarillo dorado) */
    --bg-yang-light: #ffea3d; /* Dorado más brillante para hover */

    /* Colores para los badges de los Puntos Especiales */
    --punto-tonificacion: #2e7d32;  /* Verde - Madera - Tonificación */
    --punto-sedacion: #d32f2f;      /* Rojo - Fuego - Sedación */
    --punto-yuan: #1565c0;          /* Azul - Metal - Yuan (Origen) */
    --punto-luo: #7b1fa2;           /* Púrpura - Luo (Conectivo) */
    --punto-xi: #ff8f00;            /* Naranja - Xi (Hueco) */
    --punto-mu: #c2185b;            /* Rosa oscuro - Mu (Alarma) */
    --punto-shu: #00695c;           /* Verde azulado - Shu (Asentimiento) */
    --punto-he: #5d4037;            /* Marrón - He (Mar) */
    --punto-jing: #455a64;          /* Azul grisáceo - Jing (Pozo) */
    --punto-ting: #1b5e20;          /* Verde oscuro - Ting (Riachuelo) */
    --punto-influencia: #4a148c;    /* Púrpura oscuro - Puntos de influencia */
    --punto-reunion: #e65100;       /* Naranja oscuro - Puntos de reunión */

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Border Radius */
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
    
    /* Bootstrap Overrides */
    --bs-body-bg: var(--bg-dark);
    --bs-body-color: var(--text-primary);
    --bs-body-font-family: 'Roboto', sans-serif;
    --bs-border-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   CLASES DE FONDO PARA ELEMENTOS Y PUNTOS ESPECIALES
   ========================================================================== */

/* Clases de fondo para elementos */
.bg-madera {
    background-color: var(--bg-madera) !important;
    color: white !important;
}

.bg-fuego {
    background-color: var(--bg-fuego) !important;
    color: white !important;
}

.bg-tierra {
    background-color: var(--bg-tierra) !important;
    color: #212529 !important; /* Color oscuro para mejor contraste */
}

.bg-metal {
    background-color: var(--bg-metal) !important;
    color: white !important;
}

.bg-agua {
    background-color: var(--bg-agua) !important;
    color: white !important;
}

.bg-yin {
    background-color: var(--bg-yin) !important;
    color: #212529 !important;
}

.bg-yang {
    background-color: var(--bg-yang) !important;
    color: #212529 !important; /* Color oscuro para mejor contraste */
}

.bg-especial {
    background-color: #9c27b0 !important; /* Púrpura para meridianos especiales */
    color: white !important;
}

/* Clases de fondo para puntos especiales */
.bg-punto-tonificacion {
    background-color: var(--punto-tonificacion) !important;
    color: white !important;
}

.bg-punto-sedacion {
    background-color: var(--punto-sedacion) !important;
    color: white !important;
}

.bg-punto-yuan {
    background-color: var(--punto-yuan) !important;
    color: white !important;
}

.bg-punto-luo {
    background-color: var(--punto-luo) !important;
    color: white !important;
}

.bg-punto-xi {
    background-color: var(--punto-xi) !important;
    color: #212529 !important; /* Color oscuro para mejor contraste */
}

.bg-punto-mu {
    background-color: var(--punto-mu) !important;
    color: white !important;
}

.bg-punto-shu {
    background-color: var(--punto-shu) !important;
    color: white !important;
}

.bg-punto-he {
    background-color: var(--punto-he) !important;
    color: white !important;
}

.bg-punto-jing {
    background-color: var(--punto-jing) !important;
    color: white !important;
}

.bg-punto-ting {
    background-color: var(--punto-ting) !important;
    color: white !important;
}

.bg-punto-influencia {
    background-color: var(--punto-influencia) !important;
    color: white !important;
}

.bg-punto-reunion {
    background-color: var(--punto-reunion) !important;
    color: white !important;
}

/* Clases para opacidad en hover */
.bg-madera-hover:hover {
    background-color: var(--bg-madera-light) !important;
}

.bg-fuego-hover:hover {
    background-color: var(--bg-fuego-light) !important;
}

.bg-tierra-hover:hover {
    background-color: var(--bg-tierra-light) !important;
}

.bg-metal-hover:hover {
    background-color: var(--bg-metal-light) !important;
}

.bg-agua-hover:hover {
    background-color: var(--bg-agua-light) !important;
}

/* Base Styles */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Estilos para placeholders en formularios */
::placeholder {
    color: #6c757d !important; /* Gris más claro para mejor legibilidad */
    opacity: 1 !important; /* Asegura que el color se aplique correctamente */
}

/* Estilos específicos para inputs y textareas */
input::placeholder,
textarea::placeholder,
select::placeholder,
.form-control::placeholder,
.form-select::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

.form-select-lg {
    font-size:1rem;
}

/* Asegurar que los placeholders sean consistentes en todos los navegadores */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #6c757d !important;
    opacity: 1 !important;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #6c757d !important;
    opacity: 1 !important;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #6c757d !important;
    opacity: 1 !important;
}
:-moz-placeholder { /* Firefox 18- */
    color: #6c757d !important;
    opacity: 1 !important;
}

a {
    color: var(--primary-light);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
    font-weight: 500;
}

a:hover, a:focus {
    color: var(--primary-color);
    text-decoration: underline;
    outline: none;
}

a:active {
    opacity: 0.8;
}

li {
    list-style-type: none;
    margin-left:0px;
    padding-left:0px;
}

ul {
    margin-left:0px;
    padding-left:0px;
}

/* Layout */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar - Capa superpuesta siempre visible */
.sidebar {
    width: 280px;
    background-color: var(--bg-darker);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border-right: 1px solid var(--bs-border-color);
    height: 100vh;
    position: fixed !important; /* Forzar posición fija */
    left: 0 !important; /* Forzar posición */
    top: 0 !important; /* Forzar posición */
    z-index: 1050 !important; /* Asegurar que esté por encima */
    padding: 0;
    margin: 0;
    overflow-y: auto;
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.3);
    transform: none !important; /* Prevenir transformaciones que puedan afectar */
}

/* Contenido principal - Ajuste para la sidebar fija */
.main-content {
    margin-left: 280px !important; /* Forzar margen */
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

/* Sidebar en móviles - Ocultar por defecto */
@media (max-width: 991.98px) {
    .sidebar {
        left: -280px;
        box-shadow: 3px 0 20px rgba(0, 0, 0, 0.5);
    }
    
    .sidebar.show {
        left: 0;
    }
    
    .main-content {
        margin-left: 0 !important;
    }
    
    .sidebar-toggle {
        display: flex;
    }
}

/* Botón de alternar sidebar - Solo visible en móviles */
.sidebar-toggle {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1060;
    padding: 0.5rem 0.75rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: none; /* Oculto por defecto, visible solo en móviles */
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: #000;
    border: none;
    cursor: pointer;
}

.sidebar-toggle:hover {
    background-color: var(--primary-dark);
    color: #fff;
}

/* Botón de cierre en móviles */
.sidebar-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    z-index: 1060;
    padding: 0.25rem;
    line-height: 1;
}

.sidebar-close:hover {
    color: var(--primary-color);
}

/* Overlay para móviles */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Ajustar el contenido principal cuando la barra lateral está abierta */
.sidebar-open .main-content {
    transform: translateX(280px);
}

/* Asegurar que el contenido principal no se desplace en móviles */
@media (max-width: 991.98px) {
    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }
    
    /* Ajustar el espaciado en móviles */
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Mejorar la legibilidad en móviles */
    body {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    /* Ajustar el tamaño de los botones para pantallas táctiles */
    .btn {
        padding: 0.6rem 1.25rem;
        font-size: 0.95rem;
        font-weight: 500;
        min-width: 44px; /* Tamaño mínimo para toques precisos */
        min-height: 44px; /* Tamaño mínimo para toques precisos */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation; /* Mejorar la respuesta táctil */
        border: none;
        border-radius: var(--border-radius);
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .btn:hover, .btn:focus {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .btn:active {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* Estilos específicos para botones primarios */
    .btn-primary {
        background-color: var(--primary-color);
        color: #000000;
    }

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--primary-dark);
        color: #000000;
    }

    /* Estilos para botones secundarios */
    .btn-outline-primary {
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
        background-color: transparent;
    }

    .btn-outline-primary:hover, .btn-outline-primary:focus {
        background-color: rgba(212, 175, 55, 0.1);
        color: var(--primary-light);
        border-color: var(--primary-light);
    }

    /* Estilos para botón rosa */
    .btn-outline-pink {
        border: 2px solid var(--pink);
        color: var(--pink);
        background-color: transparent;
    }

    .btn-outline-pink:hover, .btn-outline-pink:focus {
        background-color: rgba(232, 62, 140, 0.1) !important;
        color: var(--pink-light);
        border-color: var(--pink-light);
    }
    
    /* Estilo para botón rosa activo/seleccionado */
    .btn-check:checked + .btn-outline-pink,
    .btn-check:active + .btn-outline-pink,
    .btn-outline-pink.active,
    .btn-outline-pink:active {
        background-color: var(--pink);
        color: #fff;
        border-color: var(--pink);
    }
    
    /* Estilos para radios personalizados */
    .form-check-input.custom-radio {
        width: 1.25em;
        height: 1.25em;
        margin-top: 0.15em;
        vertical-align: top;
        background-color: var(--bg-light);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: 2px solid var(--text-secondary);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 50%;
        transition: background-color 0.2s, border-color 0.2s;
    }
    
    .form-check-input.custom-radio:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    }
    
    .form-check-input.custom-radio:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
    }
    
    .form-check-input.custom-radio:checked[value="Mujer"] {
        background-color: var(--pink);
        border-color: var(--pink);
    }
    
    .form-check-input.custom-radio:checked[value="Mujer"]:focus {
        box-shadow: 0 0 0 0.25rem rgba(232, 62, 140, 0.25);
    }
    
    .form-check-label {
        color: var(--text-primary);
        cursor: pointer;
        transition: color 0.2s;
    }
    
    .form-check-label:hover {
        color: var(--primary-light);
    }
    
    /* Asegurar que los enlaces sean fáciles de tocar */
    a, button, .btn, [role="button"], [tabindex] {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* Ajustar el espaciado entre filas */
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .row > [class*='col-'] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Ajustar el tamaño de las tarjetas */
    .card {
        margin-bottom: 1rem;
    }
    
    /* Mejorar el espaciado en los formularios */
    .form-control, .form-select {
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-size: 0.9rem;
    }
    
    /* Ajustar el tamaño de los títulos */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    h5, h6 { font-size: 1rem; }
}

/* Estilos para sugerencias de puntos de acupuntura */
.sugerencias-acupuntura {
    position: absolute;
    z-index: 1090;
    min-width: 300px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    margin-top: 0.25rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.opcion-sugerencia {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.opcion-sugerencia:last-child {
    border-bottom: none;
}

.opcion-sugerencia:hover,
.opcion-sugerencia.hover {
    background: rgba(255, 255, 255, 0.1);
}

.sugerencia-titulo {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sugerencia-puntos {
    font-size: 0.8em;
    color: var(--primary-color);
    font-family: 'Courier New', monospace;
    background: rgba(212, 175, 55, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scrollbar personalizada para el dropdown */
.sugerencias-acupuntura::-webkit-scrollbar {
    width: 6px;
}

.sugerencias-acupuntura::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.sugerencias-acupuntura::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

.sugerencias-acupuntura::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Estilos para pestañas de administración */
.nav-tabs {
    border-bottom: 1px solid var(--bg-light);
    margin-bottom: 1.5rem;
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0.375rem 0.375rem 0 0;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    background-color: var(--bg-light);
    margin-right: 0.25rem;
    position: relative;
    overflow: hidden;
}

.nav-tabs .nav-link:hover {
    color: var(--primary-color);
    background-color: var(--bg-light-hover);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--primary-color);
    background-color: var(--bg-dark);
    border-color: var(--bg-light) var(--bg-light) var(--bg-dark);
    border-bottom: 2px solid var(--primary-color);
    font-weight: 600;
}

.nav-tabs .nav-link i {
    margin-right: 0.5rem;
    transition: transform 0.2s ease-in-out;
}

.nav-tabs .nav-link:hover i {
    transform: scale(1.1);
}

/* Efecto de subrayado en hover */
.nav-tabs .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-in-out;
}

.nav-tabs .nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-tabs .nav-link.active::after {
    transform: scaleX(1);
    background-color: var(--primary-color);
}

/* Contenido de las pestañas */
.tab-content {
    background-color: var(--bg-dark);
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: 1px solid var(--bg-light);
}

/* Estilos para el título del panel */
.panel-title {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bg-light);
    display: flex;
    align-items: center;
}

.panel-title i {
    margin-right: 0.75rem;
    font-size: 1.5rem;
}

/* Sidebar User Info */
.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
    background-color: rgba(0, 0, 0, 0.2);
}

.user-info {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    padding: 0.5rem 0;
    gap:0 !important;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.user-avatar i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-weight: 500;
    font-size:1.3rem !important;
    margin-left:3px !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 0.7rem !important;
    color: var(--text-secondary);
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.1rem 0.5rem !important;
    border-radius: 10px;
    margin-top: 0.1rem;
}

.user-last-login {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logout-link {
    color: var(--text-secondary);
    opacity: 0.7;
    transition: opacity 0.2s;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.logout-link:hover {
    color: #fff;
    opacity: 1;
    text-decoration: none;
}

#user-settings {
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
    display: inline-block;
}

#user-settings:hover {
    opacity: 1;
    transform: rotate(45deg);
    color: var(--primary-color) !important;
}

/* Remove list bullets from sidebar */
.sidebar .nav {
    list-style: none;
    padding-left: 0;
    list-style-type: none;
}

.sidebar .nav-item {
    margin-bottom: 0.25rem;
}

.sidebar .nav-link {
    color: var(--text-secondary);
    padding: 0.75rem 1.5rem;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    transition: all 0.2s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
    color: var(--primary-light);
    background-color: rgba(255, 255, 255, 0.05);
}

.sidebar .nav-link.active {
    color: var(--primary-color);
    background-color: rgba(212, 175, 55, 0.1);
    font-weight: 500;
}

.sidebar .nav-link i {
    width: 1.5rem;
    text-align: center;
    margin-right: 0.5rem;
}

/* Logo Section */
.logo-section {
    padding: 1.5rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
}

.logo-container {
    margin: 0 auto;
    width: 90%;
    max-width: 200px;
    padding: 0.5rem;
}

.main-logo {
    width: 100%;
    height: auto;
    max-height: 140px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.main-logo:hover {
    transform: scale(1.05);
}

.brand-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-top: 0.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.sidebar-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.logo img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.logo h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--primary-color);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
    -webkit-overflow-scrolling: touch;
}

.sidebar > *:not(.sidebar-footer) {
    padding-left: 1rem;
    padding-right: 1rem;
}

.nav-item {
    margin: 4px 0;
}

.nav-item a {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-item a i {
    margin-right: var(--spacing-sm);
    width: 24px;
    text-align: center;
}

.nav-item a:hover,
.nav-item.active a {
    background-color: rgba(212, 175, 55, 0.1);
    color: var(--primary-color);
    border-left: 3px solid var(--primary-color);
}

.nav-item.active a {
    font-weight: 500;
}

.sidebar-footer {
    margin-top: auto;
    padding: 1.5rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--bg-darker);
    position: sticky !important;
    bottom: 0;
    z-index: 1;
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.user-role {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Table Responsive */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Loading Indicator */
.loading-indicator {
    display: none;
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Mobile Styles */
@media (max-width: 768px) {
    .table thead {
        display: none;
    }
    
    .table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.5rem;
        overflow: hidden;
    }
    
    .table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem;
        border: none;
        border-bottom: 1px solid var(--bs-border-color);
    }
    
    .table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 1rem;
        color: var(--bs-gray-600);
    }
    
    .table tbody td:last-child {
        border-bottom: none;
    }
    
    .table tbody td .btn-group {
        justify-content: flex-end;
        width: 100%;
    }
    
    .table tbody td .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: 280px;
    padding: 2rem;
    transition: all 0.3s ease;
    min-height: 100vh;
    background-color: var(--bg-dark);
}

/* Cards */
.card {
    background-color: var(--bg-light);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    height: 100%;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.1);
}

.card-header {
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

.card-title {
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.card-subtitle {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

/* Stats Cards */
.stats-card {
    border-left: 4px solid var(--primary-color);
    transition: all 0.3s ease;
}

.stats-card:hover {
    border-left-color: var(--primary-light);
}

.stats-card .icon {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.stats-card .stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0.5rem 0;
}

.stats-card .stat-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.main-content .container-fluid {
    max-width: 100%;
    padding: 2rem;
}

.main-content > .container-fluid,
.main-content > .container {
    max-width: 100%;
    padding: 2rem;
    margin: 0;
    width: 100%;
}

/* Gradientes y Efectos Hover */
.bg-gradient-primary-hover {
    transition: all 0.3s ease;
    background: linear-gradient(to right, var(--bg-light), var(--bg-light));
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bg-gradient-primary-hover:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0.5rem 1.5rem rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
}

.bg-gradient-success-hover {
    transition: all 0.3s ease;
    background: linear-gradient(to right, var(--bg-light), var(--bg-light));
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bg-gradient-success-hover:hover {
    border-color: var(--success);
    box-shadow: 0 0.5rem 1.5rem rgba(76, 175, 80, 0.1);
    transform: translateY(-2px);
}

.bg-gradient-warning-hover {
    transition: all 0.3s ease;
    background: linear-gradient(to right, var(--bg-light), var(--bg-light));
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bg-gradient-warning-hover:hover {
    border-color: var(--warning);
    box-shadow: 0 0.5rem 1.5rem rgba(255, 152, 0, 0.1);
    transform: translateY(-2px);
}

.bg-gradient-info-hover {
    transition: all 0.3s ease;
    background: linear-gradient(to right, var(--bg-light), var(--bg-light));
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bg-gradient-info-hover:hover {
    border-color: var(--info);
    box-shadow: 0 0.5rem 1.5rem rgba(33, 150, 243, 0.1);
    transform: translateY(-2px);
}

.bg-gradient-danger-hover {
    transition: all 0.3s ease;
    background: linear-gradient(to right, var(--bg-light), var(--bg-light));
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bg-gradient-danger-hover:hover {
    border-color: var(--danger);
    box-shadow: 0 0.5rem 1.5rem rgba(244, 67, 54, 0.1);
    transform: translateY(-2px);
}

.bg-gradient-secondary-hover {
    transition: all 0.3s ease;
    background: linear-gradient(to right, var(--bg-light), var(--bg-light));
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bg-gradient-secondary-hover:hover {
    border-color: var(--text-secondary);
    box-shadow: 0 0.5rem 1.5rem rgba(158, 158, 158, 0.1);
    transform: translateY(-2px);
}

/* Efecto de elevación al pasar el ratón */
.hover-lift {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3) !important;
}

/* Estilos para tarjetas */
.card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    background-color: var(--bg-light);
    transition: all 0.3s ease;
}

.card-header {
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Íconos personalizados */
.fa-circle-small {
    font-size: 0.5em;
    vertical-align: middle;
    margin-bottom: 0.2em;
}

/* Clases de colores para elementos */
.bg-madera {
    background-color: var(--bg-madera) !important;
    color: white !important;
}

.bg-fuego {
    background-color: var(--bg-fuego) !important;
    color: white !important;
}

.bg-tierra {
    background-color: var(--bg-tierra) !important;
    color: #212529 !important; /* Texto oscuro para mejor contraste */
}

.bg-metal {
    background-color: var(--bg-metal) !important;
    color: #212529 !important; /* Texto oscuro para mejor contraste */
}

.bg-agua {
    background-color: var(--bg-agua) !important;
    color: white !important;
}

.bg-yin {
    background-color: var(--bg-yin) !important;
    color: #212529 !important; /* Texto oscuro para mejor contraste */
}

.bg-yang {
    background-color: var(--bg-yang) !important;
    color: #212529 !important; /* Texto oscuro para mejor contraste */
}

.bg-especial {
    background-color: var(--bg-especial) !important;
    color: white !important;
}

/* Clases para texto de elementos */
.text-madera {
    color: white !important;
}

.text-fuego {
    color: white !important;
}

.text-tierra {
    color: #212529 !important; /* Texto oscuro para mejor contraste */
}

.text-metal {
    color: #212529 !important; /* Texto oscuro para mejor contraste */
}

.text-agua {
    color: white !important;
}

.text-yin {
    color: #212529 !important; /* Texto oscuro para mejor contraste */
}

.text-yang {
    color: #212529 !important; /* Texto oscuro para mejor contraste */
}

.text-especial {
    color: white !important;
}

/* Badges personalizados */
.badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
}

/* Avatar */
.avatar-sm {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.avatar-lg {
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.avatar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 0.9rem;
}

.btn i {
    margin-right: 0.5rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #000;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    color: #fff;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background-color: rgba(212, 175, 55, 0.1);
}

/* Cards */
.card {
    background-color: var(--bg-light);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}

.card-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--primary-color);
}

.card-body {
    padding: var(--spacing-md);
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--bg-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

/* Improve form controls */
.form-control, .form-select {
    background-color: #2b3035;
    border-color: #495057;
    color: #e9ecef;
}

.form-control:focus, .form-select:focus {
    background-color: #2b3035;
    border-color: #86b7fe;
    color: #e9ecef;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Table Styles */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;

    /* Modifica las variables de bootstrap */
    --bs-table-bg: var(--bg-light) !important;
}

.table thead th {
    background-color: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    padding: 0.9rem 1.5rem;
    border: none;
    white-space: nowrap;
}

.table td {
    padding: 1.2rem 1.5rem;
    vertical-align: middle;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.table tbody tr {
    background-color: var(--bg-light);
    transition: all 0.2s ease;
}

.table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.table tbody tr:first-child td {
    border-top: none;
}

/* Estilos para la tabla de pacientes */
.table-patients .badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.35em 0.65em;
}

/* Estilos para la vista de detalle del punto */
.punto-imagen-container {
    min-height: 250px;
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.punto-imagen-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.punto-imagen-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estilos para los botones de acción */
.btn-action {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-action i {
    font-size: 0.9rem;
}

/* Estilos para el estado del paciente */
.patient-status {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.patient-status.active {
    background-color: var(--success);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.patient-status.inactive {
    background-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2);
}

/* Estilos para la paginación */
.pagination .page-link {
    color: var(--text-primary);
    background-color: var(--bg-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 3px;
    border-radius: 6px !important;
    min-width: 38px;
    text-align: center;
    transition: all 0.2s ease;
}

.pagination .page-link:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #000;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #000;
    font-weight: 600;
}

.pagination .page-item.disabled .page-link {
    background-color: var(--bg-light);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

/* Responsive Table Styles */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1rem;
    padding: 0 1rem;
    width: calc(100% + 2rem);
}

/* Patient Status Badge */
.patient-status {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.patient-status.active { background-color: var(--success); }
.patient-status.inactive { background-color: var(--danger); }
.patient-status.pending { background-color: var(--warning); }
.patient-status.blocked { background-color: var(--secondary); }

/* Action Buttons */
.btn-action {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-action i {
    font-size: 0.9rem;
}

/* Avatar Styles */
.avatar-sm {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Dropdown Menu */
.dropdown-menu {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--bg-light);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

.dropdown-item {
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    margin: 0.1rem 0.5rem;
    width: auto;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
}

.dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0.25rem 0.5rem;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        z-index: 1000;
    }
    
    .main-content {
        margin-left: 0;
        padding: var(--spacing-md);
        margin-top: 70px; /* Espacio para la barra lateral cuando está en móvil */
    }
    
    .sidebar-footer {
        position: static;
        width: 100%;
        box-shadow: none;
    }
    
    .sidebar-nav {
        margin-bottom: 0;
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-secondary) !important; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }


.rounded-circle {
    border-radius:15px !important;
    padding:17px !important;
}

.list-group {
    --bs-list-group-bg: var(--bg-light);
    --bs-list-group-action-hover-bg: var(--bg-light-hover);
    --bs-list-group-action-hover-color:var(--bs-body-color);
}

.bg-dark {
    background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity));
}

.form-control:focus {
    /*box-shadow: var(--primary-color) 0 0 0 0.2rem;*/
    box-shadow: 0 0 0 0.1rem rgba(212, 175, 55, 0.25);
    border-color: var(--primary-color);
}

.modal-backdrop {
    --bs-backdrop-zindex:0;
}

/* Estilos para el recuadro de Acciones Rápidas */
.quick-actions-card {
    height: auto !important;
    min-height: auto !important;
    display: flex;
    flex-direction: column;
}

.quick-actions-card .card-body {
    padding: 1rem !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.quick-actions-card .btn {
    margin-bottom: 0.5rem;
    width: 100%;
    transition: all 0.2s ease-in-out;
}

.quick-actions-card .btn:last-child {
    margin-bottom: 0;
}

.quick-actions-card .btn i {
    width: 20px;
    text-align: center;
    margin-right: 0.5rem;
}

/* Asegurar que el contenedor de acciones rápidas no tenga altura fija */
.col-lg-3 .card {
    height: auto !important;
}

/* Estilos específicos para la sección de detalles del paciente */
#patient-detail-container .col-lg-3 {
    display: flex;
    flex-direction: column;
}

#patient-detail-container .col-lg-3 > .card {
    flex: 0 0 auto;
    margin-bottom: 1rem;
}