/* Variables y reset */
:root {
    --primary-color: #398e6a;
    --primary-hover: #28634b;
    --background-color: #f3f4f6;
    --card-background: #ffffff;
    --text-color: #1f2937;
    --border-color: #cdcdd1;
    --success-color: #10b981;
    --container-width: 800px;
}
/*--primary-color: #3b82f6;*/
/*--primary-hover: #2563eb;*/
/*--background-color: #f3f4f6;*/
/*--border-color: #e5e7eb;*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Layout */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    box-sizing: border-box;
    position: relative;
}

header {
    margin-bottom: 1rem;
    padding: 0 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
}

/* h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    align-self: center;
}*/

h1 {
    font-size: 3rem;  /* Tamaño más grande */
    margin-bottom: 1rem;
    text-align: center;  /* Centrado */
    width: 100%;        /* Asegura que ocupe todo el ancho */
}


.tab-btn {
    padding: 0.5rem 1.2rem;
    /* border: none; */
    border-radius: 1rem;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
    font-weight: 500;
    margin: 0 5px;
    box-shadow: none;
    /* flex: 0 0 auto;  */
    flex: 0.2;
}

.tab-btn.active {
    background-color: var(--primary-color);
    background-color: #ffdb00;
    /* color: white; */
    border-color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.tab-btn:first-child {
    margin-left: 0;
}

.tab-btn:last-child {
    margin-right: 0;
}

.tab-btn.active {
    /* background-color: var(--primary-color); */
    /* color: white; */
    box-shadow: 0 2px 8px rgba(57, 142, 106, 0.25);
}

.tab-btn:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.05);
}


/* Card y contenido */
.card {
    /* background-color: var(--card-background); */
    /* border-radius: 0.5rem; */
    /* padding: 1.5rem; */
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */

    overflow: visible !important;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    padding: 1rem;
    margin-top:1rem;
}

/* Formulario */
.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

select, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.85rem;
}

textarea {
    min-height: 100px;
    resize: vertical;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    transition: background-color 0.2s;
}

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

/* Registros */
.registro-item {
    position: relative;
    transition: background-color 0.3s ease;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 35px; 
    /* overflow: hidden; */
}

/* .registro-item {
    position: relative;
    transition: background-color 0.3s ease;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 35px; 
    overflow: hidden; 
} */

.registro-actions-container {
    display: none;
}

.registro-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    align-items: center; 
    flex-wrap: nowrap;   
    align-items: flex-start;
    /* overflow: hidden; */
    width: 100%;
}

/* .registro-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    align-items: center;
    flex-wrap: nowrap;
    align-items: flex-start;
    overflow: hidden; 
    width: 100%;
} */

.registro-conducta {
    font-weight: 600;
    white-space: nowrap; 
    
    max-width: 40%;    

    display: inline-block; 
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}



/* .registro-conducta {
    font-weight: 600;
    white-space: nowrap;
    max-width: 80%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis; 
    box-sizing: border-box; 
} */



.registro-fecha {
    color: #666;
    font-size: 0.875rem;
    word-wrap: break-word;
    width: 100%;
    text-align: right;
}

/* .registro-fecha {
    color: #666;
    font-size: 0.875rem;
    word-wrap: break-word;
    width: 100%;
    text-align: right;
    flex-shrink: 0; 
    min-width: auto;
} */

/* .registro-menu-dots[data-conducta] {
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
} */


/* Estadísticas */
.estadistica-item {
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    background-color: white;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

/* .estadistica-item:hover {
    background-color: var(--background-color);
} */

.estadistica-contador {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--text-color);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 500;
}

.estadistica-header {
    position: relative;
    z-index: 2; /* Aumentar para asegurar que está por encima */
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.estadistica-porcentaje {
    color: var(--text-color);
    opacity: 0.8;
}
.estadistica-main {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}


.progress-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Asegurarnos que el width también está especificado */
    height: 100%;
    opacity: 0.9; /* Añadir transparencia para que se vea mejor el texto */
    transition: all 0.3s ease;
    z-index: 0;
}

.estadistica-header span {
    color: var(--text-color);
    font-weight: 500;
    z-index: 2;
    position: relative;
}

.stat-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
    position: relative;
    flex-shrink: 0; /* Evitar que se comprima */
}

.estadistica-header > span {
    margin-right: 0.5rem; /* Espacio entre el texto y las estadísticas */
    overflow-wrap: break-word; /* Permitir romper palabras largas */
    word-break: break-word;
    flex: 1; /* Permitir que tome el espacio disponible */
}

.estadistica-registros {
    display: none;
    padding: 1rem;
    background-color: var(--background-color);
    border-top: 1px solid var(--border-color);
}

.estadistica-registros.show {
    display: block;
}

.estadistica-promedios {
    position: relative;
    z-index: 2; /* Aumentar para asegurar que está por encima */
    font-size: 0.9rem;
    color: #666;
    text-align: right;
    padding: 0 0.5rem 0.5rem 0.5rem;
    margin-top: -0.25rem;
}

.estadistica-duracion {
    position: relative;
    z-index: 2; /* Aumentar para asegurar que está por encima */
    font-size: 0.8rem;
    color: #666;
    text-align: right;
    padding: 0 0.5rem 0.5rem 0.5rem;
    margin-top: -0.25rem;
}

.registro-detalle {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background-color: white;
    margin-bottom: 0.5rem;
    border-radius: 0.375rem;
}

.registro-detalle:last-child {
    margin-bottom: 0;
}

.registro-detalle-fecha {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.registro-detalle-obs {
    font-size: 0.85rem;
}


/* Toast */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    min-width: 250px;
    max-width: 80%;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    opacity: 0;
    transition: all 0.3s;
    z-index: 10000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast.success {
    background-color: #38a169;
    color: white;
    border-left: 5px solid #2f855a;
}

.toast.error {
    background-color: #e53e3e;
    color: white;
    border-left: 5px solid #c53030;
}

.toast.warning {
    background-color: #ed8936;
    color: white;
    border-left: 5px solid #dd6b20;
}
/* Mejorar los controles de la sección de acuerdo */
.acuerdo-intro-content {
    background-color: var(--card-background);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.acuerdo-intro-content h3 {
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 1rem;
}

.acuerdo-intro-content p {
    line-height: 1.6;
    color: var(--text-color);
}

.fallback-chart-legend {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: #666;
}


/* Historial Controls */
.historial-controls {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-box input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.85rem;
}

.filter-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.filter-controls > * {
    flex: 1;
    min-width: 200px; /* Asegurar un ancho mínimo para cada elemento */
}

.filter-controls select {
    flex: 1;
}

.filter-controls .btn-secondary {
    white-space: nowrap;
    background-color: none;
}

/* Configuración */
.config-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.config-section h3 {
    margin-bottom: 1rem;
}

.config-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.conductas-list {
    margin-bottom: 1rem;
}

.conducta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    overflow: hidden; 
    box-sizing: border-box; 
}

.conducta-item span:first-child {
    flex: 1; /* Permite que ocupe el espacio disponible */
    margin-right: 1rem; /* Espacio entre el nombre y los botones */
    white-space: nowrap; /* Evita salto de línea */
    overflow: hidden; /* Oculta el desbordamiento */
    text-overflow: ellipsis; /* Añade puntos suspensivos */
    min-width: 0; /* Permite que el flex item se reduzca */
}

.conducta-item .delete-btn {
    color: #ef4444;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border: none;
    
    background: none;
}

.add-conducta-form {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.add-conducta-form input {
    flex:1;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
}

.btn-secondary {
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Import/Export */
.import-export-controls {
    display: flex;
    gap: 1rem;
}

.import-export-controls .btn-secondary {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 44px; /* Asegura altura mínima para todos los botones */
}

.file-input {
    display: none;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    overflow-y: auto; /* Añadido para permitir scroll */
    padding: 2rem 0; 
    z-index: 9999;
}

.modal.show {
    display: flex;
}

.modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    max-width: 700px;
    width: 90%;
    margin: auto;
    max-height: min(800px, 90vh); 
    overflow-y: auto;
    position: relative; 
    z-index: 10000; 
}


.modal-conducta {
    font-size: 1.1rem;
    color: var(--text-color);
    margin: 1rem 0;
    padding-bottom: 0.5rem;
   /* border-bottom: 1px solid var(--border-color);*/
    margin-bottom: -30px;
}

.modal-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Registro actions */
.registro-actions {
    display: flex;
    justify-content: space-between; /* Para separar los botones */
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background-color: white;
    border-color: rgb(247, 247, 247);
    
    cursor: pointer;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    width: 48%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.action-icon {
    font-size: 1.1em;
}

.action-text {
    font-weight: 500;
}

.action-btn:hover {
    opacity: 1;
}


.edit-btn {
    /* color: var(--primary-color); */
    background: none;
    border: none;
}

.edit-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

.delete-btn {
    /* color: #ef4444; */
    background: none;
    border: none;
}

.delete-btn:hover {
    /* background-color: #ef4444; */
    color: rgb(0, 0, 0);
}

#editModal .form-group {
    margin-bottom: 1.5rem;
}

#editModal textarea {
    width: 100%;
    min-height: 100px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 1rem;
    resize: vertical;
}

#editModal select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 1rem;
    margin-bottom: 1rem;
}

#editModal .form-group {
    margin-bottom: 1rem;
}

.edit-conducta {
    color: var(--text-color);
    margin-bottom: 1rem;
    font-weight: 500;
    opacity: 0.8;
}

.stats-total {
    margin-bottom: 1rem;
}

.time-inputs {
    display: flex;
    gap: 1rem;
}

.time-inputs .form-group {
    flex: 1;
}

.stats-filters {
    display: flex;
    gap: 0.5rem;
    /* margin-bottom: 1.5rem; */
    /* flex-wrap: wrap; */
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--card-background);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* .logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    margin-top: 2rem;
    width: 100%;
    transition: transform 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
} */

.logo-container {
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
    transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease;
    overflow: hidden;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    width: 100%; /* Asegura que ocupa todo el ancho disponible */
}

.logo-hidden {
    opacity: 0;
    height: 0;
    margin: 0;
}

.header-logo {
    max-width: 80%;  /* Ajusta este valor según el tamaño que desees */
    height: auto;
    display: block;
    margin: 0 auto; /* Centrar la imagen */

    
}

.filter-dropdown {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: white;
    cursor: pointer;
}

.filter-dropdown-header {
    padding: 0.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    margin-top: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.filter-dropdown-content.show {
    display: block;
}

.filter-checkbox-item {
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-checkbox-item:hover {
    background-color: var(--background-color);
}

.filter-checkbox-item input[type="checkbox"] {
    margin: 0;
}

.footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.4;
}

.copyright {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.usage-terms {
    max-width: 600px;
    margin: 0 auto;
}

.custom-date-filter {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--card-background);
}

.date-inputs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.date-inputs .form-group {
    flex: 1;
}

* Añadir estos estilos específicos para las etiquetas */
.date-inputs .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 1rem;  /* Mismo tamaño que los otros textos */
    color: var(--text-color);  /* Mismo color que los otros textos */
}

.date-inputs input[type="date"],
.date-inputs input[type="time"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 1rem;
}


/* Añadir al final del archivo */
.parametros-controls {
    margin-bottom: 1.5rem;
}

.parametros-list {
    margin: 1rem 0;
}

.parametro-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    background-color: white;
}

.parametro-actions {
    display: flex;
    gap: 1rem;
}

.parametro-actions .delete-btn {
    background-color: none;
    background: none;
    border: none;
    cursor: pointer;
}

.parametro-texto {
    flex: 1;
}

.parametro-item .action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.parametro-item .action-btn:hover {
    opacity: 1;
}

.add-parametro-form {
    /* display: flex; */
    gap: 0.5rem;
    margin-top: 1rem;
}

.add-parametro-form input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
}



.parametros-registro {
    transition: background-color 0.3s ease;
    border-radius: 0.375rem;
   
}

.parametro-registro-item {
    margin-bottom: 1rem;
}

.parametro-registro-item label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.parametro-registro-item input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
}

#conductaParams {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}


/* .registro-parametros {
    color: var(--text-color);
    background-color: rgba(59, 131, 246, 0.149);
    padding: 0.5rem;
    border-radius: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
} */

.registro-parametros {
    color: var(--text-color);
    /*background-color: rgba(59, 131, 246, 0.149);*/
    /*padding: 0.5rem;*/
    border-radius: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    
    /* Propiedades para controlar el desbordamiento */
    overflow: hidden;           /* Oculta cualquier contenido que sobrepase */
    text-overflow: ellipsis;    /* Muestra puntos suspensivos si el texto se trunca */
    /* white-space: nowrap;         */
    /* Opcional: si prefieres que el texto ocupe múltiples líneas en lugar de una sola */
    white-space: normal;     
    word-wrap: break-word;  
    max-width: 100%;         
}

.registro-observaciones {
    color: var(--text-color);
    opacity: 0.9;
}

.registro-observaciones-fin {
    color: var(--text-color);
    font-size: 0.9rem;
}

.registro-detalle-params {
    color: var(--text-color);
    font-size: small;
    background-color: rgba(59, 130, 246, 0.05);
    padding: 0.5rem;
    border-radius: 0.375rem;
    margin-top: 0.5rem;

    /* Propiedades para controlar el desbordamiento */
    overflow: hidden;           /* Oculta cualquier contenido que sobrepase */
    text-overflow: ellipsis;    /* Muestra puntos suspensivos si el texto se trunca */
    /* white-space: nowrap;         */
    /* Opcional: si prefieres que el texto ocupe múltiples líneas en lugar de una sola */
    white-space: normal;     
    word-wrap: break-word;  
    max-width: 100%; 
}


    
    

.registro-detalle-obs {
    color: var(--text-color);
    opacity: 0.9;
    margin-top: 0.5rem;
}

/* Añadir estos estilos al final del archivo styles.css, antes de la sección de media queries */

.edit-section {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.edit-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.edit-section h4 {
    color: var(--text-color);
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.date-time-inputs {
    display: flex;
    gap: 1rem;
}

.date-time-inputs .form-group {
    flex: 1;
}

.date-time-inputs input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
}

#editParametrosContainer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.parametro-edit-item {
    background-color: rgba(59, 130, 246, 0.05);
    padding: 1rem;
    border-radius: 0.375rem;
}

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

.parametro-edit-item input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: white;
}

.modal-subtitle {
    color: var(--text-color);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.edit-parametro-form {
    margin-top: 1rem;
}

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

.edit-parametro-form input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.edit-parametro-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Ajustar el espacio entre el input y los botones */
.edit-parametro-form + .modal-buttons {
    margin-top: 1.5rem;
}

.stats-controls {
    display: flex;
    gap: 1rem;
    /* margin-bottom: -2rem; */
    /* padding: 1.5rem; */
    /* background-color: rgba(79, 158, 73, 0.205); */
    justify-content: space-between;
    
}

.stats-controls-wrapper {
    /* background-color: #e6f5e6;  */
    /* padding: 15px; */
    /* border-radius: 8px; */
    /* margin-bottom: 20px; */
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
    margin-bottom: -1.5rem;
}

/* Ajustar estilo del párrafo dentro del contenedor */
.stats-controls-wrapper .subtitle {
    margin-top: 8px;
    margin-bottom: 30px;
    font-size: 0.8rem;
    /* color: #2e7d32;  */
    /* text-align: center; */
}

.stats-filters, .stats-sort {
    flex: 1;
}

.stats-filters select, .stats-sort select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.85rem;
    background-color: white;
}


/* Estilos para el interruptor del modo compacto */
.compact-mode-toggle {
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    border-radius: 0.375rem;
}

.toggle-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: -1instrucinrem;
}


.compact-mode-description {
    /* margin-top: 0.5rem; */
    margin-bottom: 2rem;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.25;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.compact-mode-description.show {
    display: block !important;
    opacity: 1;
}

.compact-mode-description:not(.show) {
    opacity: 0;
    height: 0;
}

.subtitle {
    margin-top: 1.5rem;
    margin-bottom: -2rem;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.25;
    /* transition: opacity 0.3s ease; */
}


.toggle-label {
    color: var(--text-color);
    font-weight: 485;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    /* top: 0; */
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(28px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Estilos para la lista del modo compacto */
.compact-mode-list {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    
}

.compact-mode-button {
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    color: var(--text-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* overflow: hidden; */
}

.compact-mode-button:hover {
    background-color: var(--background-color);
    border-color: var(--primary-color);
}

.compact-mode-controls {
    margin-bottom: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.compact-mode-search {
    flex: 2;
}

.compact-mode-sort {
    flex: 1;
}

.compact-mode-search input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.85rem;
}

.compact-mode-sort select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.85rem;
    background-color: white;
}

/* .compact-mode-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
} */

.compact-mode-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* padding: 10px; */
    width: 100%;
}

/* .compact-mode-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-size: 1rem;
    color: var(--text-color);
} */

.compact-mode-button {
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.conduct-button-container {
    position: relative;
    overflow: hidden; /* Añadir si no existe */
    box-sizing: border-box; /* Añadir si no existe */
}

.conducta-name {
    font-weight: 400;
    font-size: 0.9rem;
    margin-bottom: 5px;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-mode-button:hover {
    background-color: var(--background-color);
    border-color: var(--primary-color);
}

.conducta-count {
    color: var(--primary-color);
    font-size: 0.9em;
    opacity: 0.8;
}

.reset-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2rem;
}

.reset-container .btn-secondary {
    background-color: #f05b5b;
    color: white;
    border: none;
}

.reset-container .btn-secondary:hover {
    background-color: #d43434;
}

.conducta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    transition: background-color 0.3s ease;
}

/* Añadir nuevos estilos para los controles de color */
.add-conducta-form {
    display: flex;
    gap: 0.5rem;
    /* align-items: center; */
}

.add-conducta-form input[type="color"] {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    cursor: pointer;
}

.conducta-item .conducta-actions {
    display: flex;
    gap: 0.5rem;
}

.conducta-item .edit-btn {
    color: var(--primary-color);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
}

/* Estilos para el modal de edición */
#editConductaModal .form-group {
    margin-bottom: 1.5rem;
    
}

#editConductaModal input[type="color"] {
    width: 100%;
    height: 50px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    cursor: pointer;
}

.edit-conducta-content {
    padding: 1rem 0;
}

.edit-conducta-content .form-group {
    margin-bottom: 1.5rem;
}

.edit-conducta-content label {
    /* display: block; */
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color);
}

.edit-conducta-content input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.edit-conducta-content input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Estilos para el selector de color */
.color-selector-group {
    position: relative;
}

.color-selector {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}

.color-dropdown-button {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: white;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.color-dropdown-button::after {
    content: '▼';
    margin-left: 0.5rem;
}

.color-dropdown-button:hover {
    border-color: var(--primary-color);
}

.color-grid {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.75rem;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    grid-template-columns: repeat(4, 1fr); /* Mantenemos 4 columnas */
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.color-grid.show {
    display: grid;
}

.color-option {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Esto hace que sea un cuadrado perfecto */
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}

.color-option::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: inherit;
    border-radius: 0.25rem;
}

.color-option:hover {
    border-color: var(--primary-color);
    transform: scale(1.1);
    z-index: 1;
}

.color-option.selected {
    border: 2px solid var(--primary-color);
}

/* Separadores tonales */
.color-option[data-tone-group="1"] {
    margin-top: 0.5rem;
}

.color-preview-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.color-input {
    width: 100%;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    cursor: pointer;
}

.color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-input::-webkit-color-swatch {
    border: 2px solid var(--border-color);
    border-radius: 0.375rem;
}






/* Vista previa de la conducta */
.conducta-preview {
    margin-top: 2rem;
}

.preview-card {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    transition: background-color 0.3s ease;
}

.preview-text {
    font-size: 1rem;
    color: var(--text-color);
}

#registroForm {
    transition: background-color 0.3s ease;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
    margin-top: -1rem;
}

/* Asegurar que el select mantenga su fondo blanco */
#registroForm select {
    background-color: white;
    border: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

#registroForm select:focus {
    border-color: var(--primary-color);
}

/* Mantener el fondo blanco para las áreas de texto */
#registroForm textarea {
    background-color: white;
    border: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

#registroForm textarea:focus {
    border-color: var(--primary-color);
}

/* Estilo para los inputs de parámetros */
.parametro-input {
    background-color: white !important;
    border: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.parametro-input:focus {
    border-color: var(--primary-color);
}

/* Asegurar que los labels sean legibles */
#registroForm label {
    color: var(--text-color);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Mantener el estilo de los botones */
.btn-primary, .btn-secondary {
    background-color: var(--primary-color);
    color: white;
    border: none;
}

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

#clearHistoryBtn{
    background-color: white;
    color: rgba(255, 6, 6, 0.818);
    border: 1px solid rgba(255, 6, 6, 0.818);
}

/* Ajustar el contenedor de fecha/hora personalizada */
.time-selector {
    margin-top: 1rem;
}

#customTimeFields {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1rem;
    border-radius: 0.375rem;
    margin-top: 1rem;
}

#customTimeFields input[type="date"],
#customTimeFields input[type="time"] {
    background-color: white;
    border: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

/* Ajustar el espaciado general del formulario */
.form-group {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.registro-actions-container {
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.registro-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#registro .card {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Modificar el estilo del formulario */
#registroForm {
    transition: background-color 0.3s ease;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-top: 0.5rem;
}

.color-picker-custom {
    margin-bottom: 1.5rem;
}

.color-picker-custom h4 {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 0.75rem;
}

.color-presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.color-preset {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.color-preset:hover {
    border-color: var(--primary-color);
}

.color-preset.selected {
    border: 2px solid var(--primary-color);
}

.color-name {
    font-size: 0.875rem;
    color: var(--text-color);
}

.color-custom {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.color-custom p {
    color: var(--text-color);
    font-size: 0.875rem;
}

.custom-color-link {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

.custom-color-link:hover {
    text-decoration: underline;
}

.custom-color-input {
    margin-top: 0.5rem;
}

.color-custom label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-color);
}

.color-custom input[type="color"] {
    width: 100%;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
}

#observaciones::placeholder {
    font-size: 0.875rem; /* Esto es equivalente a 14px */
}

.stats-legend {
    padding: 1rem;
    /* background-color: rgba(0, 0, 0, 0.02); */
    background-color: white;
    border-radius: 0.375rem;
    line-height: 1.5;
}

.estadistica-porcentaje {
    white-space: nowrap;
}

/* Análisis secuencial */
.stats-view-controls {
    margin: 1rem 0;
    display: flex;
    justify-content: center;
}

.view-toggle {
    display: flex;
    background-color: var(--background-color);
    border-radius: 0.5rem;
    overflow: hidden;
    /* border: 1px solid var(--border-color); */
    flex-wrap: wrap; /* Permitir que los botones se ajusten */
    width: 100%; /* Asegurar que ocupe todo el ancho disponible */
    max-width: 500px; /* Limitar el ancho máximo en pantallas grandes */
}


.view-btn {
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    flex: 1 1 auto; /* Permitir crecimiento pero también ajuste */
    text-align: center;
    white-space: normal; /* Permitir que el texto se ajuste en múltiples líneas */
    min-width: 150px; /* Aumentar ancho mínimo al tener menos botones */
    font-size: 1rem; /* Aumentar el tamaño del texto */
}


.view-btn.active {
    background-color: var(--primary-color);
    color: white;
}

/* Controles de probabilidades */
.prob-controls {
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.time-window-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.time-window-control label {
    margin-bottom: 0;
    white-space: nowrap;
}

.time-window-control input {
    width: 80px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
}

.view-selector {
    flex: 1;
}

/* .probabilidades-header {
    margin: 2.5rem 0 1rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
} */

.probabilidades-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.probabilidades-header p {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Matriz de probabilidad */
.matrix-container {
    overflow: auto;
    max-height: 80vh;
    position: relative;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    /* Garantizar que la matriz tenga su propio contexto de apilamiento */
    isolation: isolate;
}

.matrix-legend {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

.legend-title {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.legend-scale {
    display: flex;
    width: 200px;
    height: 20px;
    margin-bottom: 0.25rem;
}

.legend-color {
    flex: 1;
}

.legend-labels {
    display: flex;
    width: 200px;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #666;
}

.prob-matrix-table {
    position: relative;
    border-collapse: separate; /* Necesario para sticky */
    border-spacing: 0;
    width: 100%;
    min-width: 600px;
}

.prob-matrix-table th {
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    text-align: center;
    background-color: var(--background-color);
    font-weight: 500;
    font-size: 0.9rem;
    position: relative; /* Asegurar contexto de z-index */
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;

}

.prob-matrix-table th.header-row {
    position: sticky;
    left: 0;
    z-index: 5;
    background-color: var(--background-color) !important; /* Forzar color de fondo */
    width: 160px;
    text-align: right;
    padding-right: 1rem;
    /* Sombra más pronunciada */
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

/* Hacer que la fila superior sea sticky */
.prob-matrix-table tr:first-child th {
    position: sticky;
    top: 0;
    z-index: 4;
    background-color: var(--background-color) !important; /* Forzar color de fondo */
    /* Sombra más pronunciada */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Celda de esquina superior izquierda necesita mayor z-index porque es sticky en ambas direcciones */
.prob-matrix-table tr:first-child th.header-row {
    /* z-index: 6; */
    /* Sombra en ambas direcciones */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}
.prob-matrix-table .matrix-cell {
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.prob-matrix-table .matrix-cell:hover {
    opacity: 0.8;
}

.matrix-cell-percent {
    font-size: 0.9rem;
    font-weight: 500;
}

.matrix-cell-count {
    font-size: 0.75rem;
    opacity: 0.6;
}

/* Diagrama de flujo */
.conducta-selector {
    margin-bottom: 1.5rem;
}

.flow-diagram-container {
    margin-bottom: 2rem;
}

.flow-diagram-container h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.flow-diagram {
    margin-bottom: 2rem;
}

.flow-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background-color: white;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flow-item:last-child {
    border-bottom: none;
}

.flow-bar-container {
    flex: 1;
    height: 30px;
    background-color: var(--background-color);
    border-radius: 0.25rem;
    overflow: hidden;
    margin: 0 1rem;
    position: relative;
}

.flow-bar {
    height: 100%;
    background-color: var(--primary-color);
    opacity: 0.7;
    min-height: 24px; /* Asegurar altura mínima */
    min-width: 5px;   /* Asegurar ancho mínimo */
    border-radius: 2px; /* Redondear bordes para barras muy pequeñas */
}

.flow-label {
    min-width: 120px;
    font-weight: 500;
}

.flow-value {
    min-width: 80px;
    text-align: right;
    font-size: 0.9rem;
}

/* Insights */
.insights-container {
    background-color: var(--background-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem; /* Añadir espacio adicional al fondo */
    overflow: visible !important; /* Asegurar que el contenido no se corte */

    position: relative !important;
    z-index: 1 !important;

}

.insights-container h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

#estadisticas.tab-content {
    padding-bottom: 50px !important;
}

/* .insights-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
} */

.insights-list {
    max-height: none; /* Eliminar cualquier altura máxima que pueda estar cortando el contenido */
    overflow: visible; /* Permitir que el contenido se expanda completamente */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.insight-item {
    background-color: white;
    border-radius: 0.375rem;
    padding: 1rem;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    margin-bottom: 16px !important;
    overflow: visible !important;
}

.insight-title {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.insight-description {
    font-size: 0.9rem;
    color: #666;
}

#probInsights {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    padding-bottom: 30px !important;
    margin-bottom: 30px !important;
}

.insights-wrapper {
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Modal específico para detalles de celda */
#cellDetailContent {
    margin: 1rem 0;
}

.cell-detail-title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.cell-detail-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.stat-box {
    flex: 1;
    text-align: center;
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 0.375rem;
    margin: 0 0.5rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.85rem;
    color: #666;
}

.cell-detail-examples {
    margin-top: 1.5rem;
}

.cell-detail-examples h4 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.example-list {
    max-height: 300px; /* Altura máxima mayor para mostrar más ejemplos */
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--background-color);
}

.example-item {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--card-background);
    transition: background-color 0.2s ease;
}

.example-item:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

.example-item:last-child {
    border-bottom: none;
}

.example-timestamp {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.example-conductas {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.arrow-icon {
    color: #999;
}

.example-time {
    margin-left: auto;
    font-size: 0.8rem;
    color: #666;
    background-color: rgba(59, 130, 246, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
}

/* Personalizar la barra de desplazamiento para mejor estética */
.example-list::-webkit-scrollbar {
    width: 8px;
}

.example-list::-webkit-scrollbar-track {
    background: var(--background-color);
    border-radius: 0.375rem;
}

.example-list::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
    border: 2px solid var(--background-color);
}

/* Estilos para el selector de perfil en la cabecera */
.profile-selector {
    display: flex;
    justify-content: right;
    align-items: center;
    background-color: var(--background-color);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: -2rem;
    /* margin-right: -2rem; */
    width: 100%;
    /* margin-left: -2rem; */
    position: relative;
}

/* Rediseño del selector de perfil fijo */
/* .profile-selector-fixed {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: transparent;
    z-index: 1001;
    padding: 8px;
    border-radius: 50px;
    width: auto;
    height: 2rem;
    max-width: 250px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgb(255 255 255 / 25%);
} */
.profile-selector-fixed {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: transparent;
    z-index: 1001;
    padding: 8px;
    border-radius: 50px;
    width: auto;
    height: 2rem;
    max-width: 250px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgb(255 255 255 / 25%);
}

.profile-selector-fixed .current-profile {
    margin: 0;
    background-color: transparent;
}

.profile-selector-fixed .profile-label {
    display: none;
}




.current-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.15rem 0.85rem;
    border-radius: 2rem;
    transition: background-color 0.2s;
    margin-right: -0.75rem;
    margin-bottom: 0.5rem;
    background-color: antiquewhite;
}

.current-profile:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.profile-label {
    font-size: 0.875rem;
    color: #666;
}

.profile-name {
    font-weight: 600;
    color: var(--primary-color);
}

.profile-dropdown-button {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 0.25rem;
    transition: all 0.2s;
}

.profile-dropdown-button:hover {
    color: var(--primary-color);
}

.profile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    /* left: 0;
    right: 0; */
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000; 
    max-height: 300px;
    overflow-y: auto;
    margin-top: 5px;
    background-color: white;
    /* min-width: 200px; */
    
}

.profile-dropdown.show {
    display: block;
}

.profile-list {
    padding: 0.5rem;
}

.profile-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.profile-item:hover {
    background-color: var(--background-color);
}

.profile-item.active {
    background-color: rgba(59, 130, 246, 0.1);
}

.profile-item-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 0.75rem;
}

.profile-item-name {
    flex: 1;
    font-weight: 500;
    margin-right: 0.5rem;
}

.profile-dropdown-actions {
    padding: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.profile-action-btn {
    width: 100%;
    padding: 0.5rem;
    background-color: white;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.profile-action-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Estilos para la sección de gestión de perfiles en Configuración */
.profiles-section {
    margin-bottom: 2rem;
}

.profiles-list {
    margin-bottom: 1.5rem;
}

.profile-list-item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
    background-color: white;
}

.profile-content-wrapper {
    /* background-color: white; */
    display: flex;
    padding: 1rem;
}

.profile-list-item:hover {
    border-color: var(--primary-color);
}

.profile-list-item.active {
    /* background-color: rgba(59, 130, 246, 0.05); */
    background-color: rgba(79, 158, 73, 0.205);
    border-color: var(--primary-color);
}

.profile-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 1rem;
}

.profile-info {
    flex: 1;
}

.profile-name-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.profile-title {
    font-weight: 600;
    font-size: 1.1rem;
}

.active-badge {
    background-color: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
}

.profile-stats {
    font-size: 0.875rem;
    color: #666;
    display: flex;
    gap: 1rem;
}

.profile-stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.profile-stat-value {
    font-weight: 500;
    color: var(--text-color);
}

.profile-actions {
    display: flex;
    gap: 0.5rem;
}

.profile-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 2rem;
    transition: all 0.2s;
    font-size: 0.775rem;
    display: flex;
    width: 4rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.profile-btn.activate-btn {
    /* background-color: var(--primary-color); */
    
    color: white;
}

.profile-btn.edit-btn {
    background-color: #f3f4f6;
    color: var(--text-color);
}

.profile-btn.export-btn {
    background-color: #f3f4f6;
    color: var(--text-color);
}

.profile-btn.delete-btn {
    background-color: #fee2e2;
    color: #ef4444;
}

.profile-btn:hover {
    opacity: 0.9;
}

/* Modal de perfil */
.profile-form {
    margin: 1.5rem 0;
}

#profileBaseSection {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* Mejoras para el botón activar perfil */
.profile-activate-container {
    width: 100%;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px dashed var(--border-color);
    text-align: center;
}

/* .profile-btn.full-width {
    width: 100%;
    padding: 0.75rem 1.5rem;
} */

.profile-btn.activate-btn {
    /* background-color: var(--primary-color); */
    color: white;
    font-weight: 500;
    border: none;
    transition: all 0.2s ease;
}

.profile-btn.activate-btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Correcciones para los selectores de color */
#profileColorGrid .color-option {
    position: relative;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: transform 0.2s;
    display: inline-block;
    margin: 3px;
}

#profileColorGrid.show {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0.5rem;
}

/* Asegurar que los colores se muestren correctamente */
.color-option {
    background-color: attr(data-color);
}

.color-option.selected {
    border: 2px solid var(--primary-color);
    transform: scale(1.05);
}

/* Estilos para la fila del botón activar */
.profile-activate-row {
    padding: 0.75rem;
    background-color: rgba(57, 142, 106, 0.05);
    border-top: 1px dashed var(--border-color);
    text-align: center;
    width: 100%;
    display: flex;
    /* justify-content: right;  */
}

.profile-btn.full-width {
    /* width: 100%; */
    padding: 0.5rem 1rem;
}

.profile-btn.activate-btn {
    /* background-color: var(--primary-color); */
    background-color:#398e6b99;
    color: white;
    font-weight: 500;
    border: none;
    border-radius: 2rem;
    width: 8rem;
    transition: all 0.2s ease;
}

.profile-btn.activate-btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.form-control.enhanced {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.form-control.enhanced:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(57, 142, 106, 0.2);
    outline: none;
}

.form-control.enhanced::placeholder {
    color: #9ca3af;
}

.footer .credits {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: #6b7280;
}

.footer .credits a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer .credits a:hover {
    text-decoration: underline;
    color: var(--primary-hover);
}

.conducta-search-container {
    margin-bottom: 0.5rem;
    position: relative;
}

#conductaSearch {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.85rem;
    background-color: white;
}

#conductaSearch:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(57, 142, 106, 0.1);
}

/* Añadir un ícono de búsqueda (opcional) */
/* .conducta-search-container::after {
    content: "🔍";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    pointer-events: none;
} */

/* Ajustar el espaciado cuando se está escribiendo */
#conductaSearch:not(:placeholder-shown) + .conducta-search-container::after {
    opacity: 0;
}

/* Estilos para la fusión de perfiles */
.merge-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.merge-section:last-child {
    border-bottom: none;
}

.merge-section h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.profiles-select-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.profile-select-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.profile-select-item:last-child {
    border-bottom: none;
}

.profile-select-item label {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    cursor: pointer;
}

.profile-select-item input[type="checkbox"] {
    margin-right: 0.75rem;
}

.modal-description {
    margin-bottom: 1.5rem;
    color: #666;
    line-height: 1.5;
}

.merge-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.merge-option {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    transition: background-color 0.2s;
}

.merge-option:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.merge-option input[type="radio"] {
    margin-top: 0.25rem;
    margin-right: 0.75rem;
}

.merge-option label {
    width: 100%;
    cursor: pointer;
}

.option-description {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0;
}

#createNewProfileForImport {
    margin-right: 0.5rem;
}

.modal-buttons.import-buttons {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.modal-buttons.import-buttons button {
    flex: 1;
    min-width: 80px;
}

#clearHistoryCustomDate {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--card-background);
}

#clearHistoryCustomDate .date-inputs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

#clearHistoryCustomDate .form-group {
    flex: 1;
}

#clearHistoryCustomDate label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-color);
}

#clearHistoryCustomDate input[type="date"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 1rem;
}

#clearHistoryModal .form-group {
    margin-bottom: 1.5rem;
}

#clearHistoryModal label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

#clearHistoryModal select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: white;
}

#clearHistoryModal .custom-date-filter {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: rgba(0, 0, 0, 0.02);
    margin-bottom: 1.5rem;
}

/* Estilos para la sección de acuerdo entre observadores */
#acuerdoContainer {
    padding: 1rem 0;
}

.acuerdo-intro {
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.acuerdo-controls {
    margin-bottom: 2rem;
}

.setup-section {
    background-color: var(--background-color);
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.setup-section h4 {
    margin-bottom: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
}

.perfiles-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    background-color: white;
}

.perfil-checkbox-item {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.perfil-checkbox-item:last-child {
    border-bottom: none;
}

.perfil-checkbox-item label {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.perfil-checkbox-item input[type="checkbox"] {
    margin-right: 0.75rem;
}

#calcularAcuerdoBtn {
    width: 100%;
    margin-top: 1rem;
}

/* Estilos para la sección de resultados */
.results-section {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.acuerdo-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    overflow-x: auto;
}

.acuerdo-tab-btn {
    padding: 0.5rem 1rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.7;
    transition: all 0.2s;
    white-space: nowrap;
}

.acuerdo-tab-btn:hover {
    opacity: 1;
    background-color: var(--background-color);
}

.acuerdo-tab-btn.active {
    opacity: 1;
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: rgba(57, 142, 106, 0.1);
}

.acuerdo-view {
    display: none;
}

.acuerdo-view.active {
    display: block;
}

/* Estilos para el resumen general */
.acuerdo-summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.summary-card {
    flex: 1;
    min-width: 200px;
    background-color: var(--background-color);
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.summary-card:hover {
    background-color: rgba(57, 142, 106, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.summary-card:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}


.summary-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.summary-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    cursor: pointer;
}

.summary-label {
    font-size: 0.875rem;
    color: #666;
}

/* Añadir indicación visual de clickable */
.summary-card::after {
    content: "🔍";
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.summary-card:hover::after {
    opacity: 0.7;
}

.acuerdo-interpretation {
    background-color: var(--background-color);
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.acuerdo-interpretation h4 {
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Estilos para la tabla de acuerdo por conducta */
.chart-container {
    height: 300px;
    margin-bottom: 1.5rem;
    background-color: white;
    border-radius: 0.5rem;
    padding: 1rem;
}

.table-container {
    /* border: 1px solid var(--border-color); */
    border-radius: 0.375rem;
    overflow-x: auto;
    margin:-5px;
    padding: 1.5rem;
}

.acuerdo-tabla {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.acuerdo-tabla th, 
.acuerdo-tabla td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.acuerdo-tabla th {
    background-color: var(--background-color);
    font-weight: 600;
    color: var(--text-color);
}

.acuerdo-tabla th {
    background-color: var(--background-color);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.acuerdo-tabla td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.acuerdo-tabla tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.acuerdo-tabla tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
    cursor: pointer;
}

.acuerdo-tabla .conducta-row {
    position: relative; 
    transition: background-color 0.2s;
}

.acuerdo-tabla .conducta-row:hover::after {
    content: '🔍 Ver detalles';
    position: absolute;
    top: 50%;         /* Centra verticalmente */
    right: 20px;      /* Distancia desde el borde derecho */
    transform: translateY(-50%); /* Ajusta la posición vertical */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 10;      /* Asegura que esté por encima de otros elementos */
    pointer-events: none; /* Evita que interfiera con clics */
}


/* Destacar filas impares para mejor legibilidad */
.acuerdo-tabla tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.01);
}

.acuerdo-nivel {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 500;
    text-align: center;
    min-width: 80px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.acuerdo-excelente {
    background-color: rgba(57, 142, 106, 0.15);
    color: #2a7251;
    border: 1px solid rgba(57, 142, 106, 0.3);
}

.acuerdo-bueno {
    background-color: rgba(16, 185, 129, 0.15);
    color: #066649;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.acuerdo-moderado {
    background-color: rgba(245, 158, 11, 0.15);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.acuerdo-justo {
    background-color: rgba(249, 115, 22, 0.15);
    color: #9a3412;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.acuerdo-pobre {
    background-color: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Estilos para la matriz de acuerdo */
.acuerdo-matriz {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin-bottom: 1rem;
}

.acuerdo-matriz th {
    padding: 0.75rem;
    background-color: var(--background-color);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.acuerdo-matriz td {
    position: relative;
    padding: 1rem;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}

.acuerdo-matriz .matriz-valor {
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}

.acuerdo-matriz .matriz-etiqueta {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
    text-transform: capitalize;
}

.acuerdo-matriz td:hover {
    opacity: 0.9;
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* .acuerdo-matriz .matriz-valor {
    font-size: 1.25rem;
} */

/* .matriz-valor {
    font-size: 1.25rem;
    color: var(--text-color);
}

.matriz-etiqueta {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
    text-transform: capitalize;
} */


/* Animación para las celdas de matriz cuando se pasa el mouse */
.acuerdo-matriz td:not(.diagonal-cell):hover::after {
    content: '🔍 Ver detalles';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 100;
}

.matriz-leyenda {
    background-color: #e8e9ea;
    padding: 1rem;
    border-radius: 0.5rem;
}

.matriz-leyenda h4 {
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Estilos para los gráficos fallback */
.chart-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: rgba(0,0,0,0.02);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
}

.chart-placeholder p {
    margin-bottom: 0.5rem;
    color: #666;
}

.no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #666;
    text-align: center;
    padding: 2rem;
    background-color: rgba(0,0,0,0.02);
    border-radius: 0.5rem;
}


/* Estilos para el modal de detalles de conducta */
#acuerdoConductaModalContent {
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem 0;
}

.acuerdo-observador-item {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.acuerdo-observador-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.acuerdo-observador-nombre {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.acuerdo-observador-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.acuerdo-stat {
    padding: 0.5rem 0.75rem;
    background-color: var(--background-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.acuerdo-stat-label {
    font-weight: 500;
    margin-right: 0.25rem;
}

.acuerdo-stat-value {
    font-weight: 600;
}

/* Estilos para el spinner de carga */
.loading-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spinner 0.6s linear infinite;
}

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

/* Estilos para la nota metodológica */
.acuerdo-metodologia {
    background-color: rgba(57, 142, 106, 0.1);
    border-left: 3px solid var(--primary-color);
    padding: 1rem;
    margin-top: 1.5rem;
    border-radius: 0 0.375rem 0.375rem 0;
}

.acuerdo-metodologia h4 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

/* Estilos para el mensaje de no hay perfiles */
.no-profiles-message {
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 0.375rem;
    color: #666;
    text-align: center;
    font-style: italic;
}

/* Estilo para concordancias en tablas */
.concordancia-ejemplos .acuerdo-tabla {
    width: 100%;
    border-collapse: collapse;
}

.concordancia-ejemplos .acuerdo-tabla th,
.concordancia-ejemplos .acuerdo-tabla td {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    text-align: center;
}

.concordancia-ejemplos .acuerdo-tabla th {
    background-color: rgba(57, 142, 106, 0.1);
    font-weight: 600;
}

.concordancia-ejemplos .acuerdo-tabla tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.concordancia-ejemplos .acuerdo-tabla tbody tr:hover {
    background-color: rgba(57, 142, 106, 0.05);
}

/* Estilo mejorado para niveles de acuerdo */
.acuerdo-nivel {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 500;
    text-align: center;
    min-width: 80px;
}

.acuerdo-excelente {
    background-color: rgba(57, 142, 106, 0.2);
    color: #2a7251;
}

.acuerdo-bueno {
    background-color: rgba(16, 185, 129, 0.2);
    color: #066649;
}

.acuerdo-moderado {
    background-color: rgba(245, 158, 11, 0.2);
    color: #92400e;
}

.acuerdo-justo {
    background-color: rgba(249, 115, 22, 0.2);
    color: #9a3412;
}

.acuerdo-pobre {
    background-color: rgba(239, 68, 68, 0.2);
    color: #b91c1c;
}

/* Mejoras en la nota metodológica */
.acuerdo-metodologia {
    background-color: rgba(57, 142, 106, 0.1);
    border-left: 3px solid var(--primary-color);
    padding: 1rem;
    margin-top: 1.5rem;
    border-radius: 0 0.375rem 0.375rem 0;
}

.acuerdo-metodologia h4 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    font-weight: 600;
}

.acuerdo-metodologia p {
    color: var(--text-color);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Ejemplos en tabla */
.ejemplos-tabla-container {
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
}

/* Personalización de scrollbar */
.ejemplos-tabla-container::-webkit-scrollbar {
    width: 8px;
}

.ejemplos-tabla-container::-webkit-scrollbar-track {
    background: var(--background-color);
    border-radius: 0.375rem;
}

.ejemplos-tabla-container::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
    border: 2px solid var(--background-color);
}

/* Mensaje de error para perfiles incompatibles */
.perfiles-incompatibles {
    background-color: #fee2e2;
    border-left: 4px solid #ef4444;
    padding: 1.25rem;
    border-radius: 0 0.375rem 0.375rem 0;
    margin: 1.5rem 0;
    color: #991b1b;
}

.perfiles-incompatibles h4 {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #b91c1c;
}

.perfiles-incompatibles p {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.perfiles-incompatibles ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.perfiles-incompatibles .recomendacion {
    font-weight: 500;
    margin-top: 1rem;
    font-style: italic;
}

/* Estilos para tiempos relativos */
.tiempo-relativo {
    font-family: monospace;
    padding: 0.1rem 0.3rem;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    font-size: 0.9em;
}

.tiempo-cero {
    background-color: rgba(57, 142, 106, 0.2);
    font-weight: bold;
}

/* Mensaje de no hay ejemplos */
.no-examples {
    padding: 1rem;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 0.375rem;
    color: #666;
    font-style: italic;
}

/* Estilos para advertencias y alertas de datos */
.data-warning {
    background-color: rgba(255, 152, 0, 0.1);
    border-left: 4px solid #ff9800;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0 0.375rem 0.375rem 0;
}

.data-warning p {
    margin: 0.5rem 0;
    color: #333;
}

.data-warning strong {
    color: #e65100;
}

.warning-icon {
    font-size: 0.875rem;
    color: #ff9800;
    margin-left: 0.25rem;
    cursor: help;
}

.valor-extremo {
    position: relative;
}

.valor-extremo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.05) 10px,
        rgba(0, 0, 0, 0.05) 20px
    );
    pointer-events: none;
}

.nota-metodologica {
    background-color: rgba(57, 142, 106, 0.1);
    border-left: 4px solid var(--primary-color);
    padding: 1rem;
    margin-top: 1.5rem;
    border-radius: 0 0.375rem 0.375rem 0;
}

.nota-metodologica h4 {
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.nota-metodologica p {
    margin: 0.5rem 0;
    line-height: 1.5;
}

/* Mejoras para la matriz de acuerdo */
.acuerdo-matriz {
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
}

.acuerdo-matriz th, 
.acuerdo-matriz td {
    transition: all 0.2s ease;
}

.acuerdo-matriz td:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 10;
}

.diagonal-cell {
    background-color: rgba(211, 211, 211, 0.5) !important;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.diagonal-cell:hover {
    transform: none !important;
    box-shadow: none !important;
}

.acuerdo-perfil-details h4 {
    color: var(--primary-color);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.perfiles-list {
    max-height: 250px; /* Mayor altura para ver más perfiles */
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    background-color: white;
}

.perfil-checkbox-item {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.perfil-checkbox-item:last-child {
    border-bottom: none;
}

.perfil-checkbox-item:hover {
    background-color: rgba(57, 142, 106, 0.05);
}

.perfil-checkbox-item label {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.perfil-checkbox-item input[type="checkbox"] {
    margin-right: 0.75rem;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* Destacar perfil actual */
.perfil-checkbox-item label:has(input:checked) {
    font-weight: 500;
    color: var(--primary-color);
}

/* Ocultar el botón de Acuerdo entre observadores */
#agreementViewBtn {
    display: none !important;
}


/* Estilos para conductas continuas */
.tipo-selector-group {
    margin-bottom: 1.5rem;
}

.tipo-selector {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.tipo-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

.tipo-option:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.tipo-option input[type="radio"] {
    margin: 0; /* Elimina el margin predeterminado */
    width: 18px; /* Dimensiones específicas para mejor control */
    height: 18px;
    vertical-align: middle; /* Ayuda con la alineación vertical */
    position: relative; /* Necesario para ajuste fino */
    top: -1px; /* Asegura que esté alineado sin desplazamiento */
}

.tipo-label {
    font-weight: 500;
}



/* Selector mini para el formulario de nueva conducta */
.new-conducta-inputs {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
}

.tipo-selector-mini {
    display: flex;
    gap: 1rem;
}

.tipo-option-mini {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Indicador de conducta continua en la lista */
.conducta-tipo-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.4rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.05);
    /* margin-left: 0.5rem; */
}

.badge-continua {
    background-color: rgba(57, 142, 106, 0.15);
    color: var(--primary-color);
}

.badge-en-curso {
    background-color: rgba(245, 158, 11, 0.15);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.3);
    animation: pulsate 2s infinite;
    font-weight: bold;
}

@keyframes pulsate {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

/* Estilos para cronómetros */
.cronometro {
    font-family: monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
    background-color: rgba(0, 0, 0, 0.03);
    padding: 0.3rem 0.6rem;
    border-radius: 0.25rem;
    display: inline-block;
    margin: 0.5rem 0;
}

/* Botones de iniciar/finalizar */
.btn-continua {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.btn-iniciar {
    background-color: var(--primary-color);
    color: white;
}

.btn-finalizar {
    background-color: #f97316;
    color: white;
    border-radius: 2rem;
    border-color: coral;
}

/* Modal de finalización */
.finish-conducta-content {
    padding: 1rem 0;
}

.conducta-info {
    background-color: rgba(0, 0, 0, 0.02);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.timer-display {
    font-size: 2rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--primary-color);
    margin: 1rem 0;
}

.duration-info {
    font-size: 0.9rem;
    color: #666;
}

/* Ajustes para el modo compacto */
.compact-mode-button.continuous-behavior {
    border-left: 4px solid var(--primary-color);
}

.compact-mode-button.in-progress {
    border-left: 4px solid #f97316;
    background-color: rgba(249, 115, 22, 0.05);
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0% { border-left-color: #f97316; }
    50% { border-left-color: #ea580c; }
    100% { border-left-color: #f97316; }
}

.compact-mode-status {
    margin-left: auto;
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-ready {
    background-color: rgba(57, 142, 106, 0.15);
    color: var(--primary-color);
}

.status-in-progress {
    background-color: rgba(249, 115, 22, 0.15);
    color: #92400e;
    animation: pulsate 2s infinite;
    font-weight: bold;
}

/* .active-behaviors-indicator {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background-color: #f97316;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
} */

/* .active-behaviors-indicator .count {
    background-color: white;
    color: #f97316;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
} */

.helper-text {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.25rem;
    font-style: italic;
}

.duration-display {
    margin: 0.5rem 0;
    font-size: 1.1rem;
}

/* Estilos para el modal de conductas activas */
.active-conductas-modal {
    max-width: 600px;
}

.active-conductas-list {
    margin: 1rem 0;
    max-height: 400px;
    overflow-y: auto;
}

.active-conducta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.active-conducta-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.active-conducta-info {
    flex: 1;
}

.active-conducta-name {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.active-time-label {
    color: #666;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.active-time-duration {
    margin-top: 0.5rem;
}

.active-conducta-actions {
    margin-left: 1rem;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Mejorar el indicador de conductas activas */
.active-behaviors-indicator {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background-color: #f97316;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.active-behaviors-indicator:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.active-behaviors-indicator .count {
    background-color: white;
    color: #f97316;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Estilos para conductas continuas en análisis de probabilidades */
.header-col.continua, .header-row.continua {
    position: relative;
}

.header-col.inicio, .header-row.inicio {
    background-color: rgba(33, 150, 243, 0.2) !important;
    border-left: 3px solid #2196F3;
}

.header-col.fin, .header-row.fin {
    background-color: rgba(244, 67, 54, 0.2) !important;
    border-left: 3px solid #F44336;
}

/* Estilos para la matriz de probabilidades */
.matriz-leyenda {
    /* padding: 1rem; */
    background-color: #e8e9ea;
    border-radius: 0.5rem;
    /* margin-bottom: 1rem; */
}

.matriz-leyenda h4 {
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.leyenda-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.leyenda-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.leyenda-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.leyenda-item.inicio .leyenda-color {
    background-color: rgba(33, 150, 243, 0.2);
    border-left: 3px solid #2196F3;
}

.leyenda-item.fin .leyenda-color {
    background-color: rgba(244, 67, 54, 0.2);
    border-left: 3px solid #F44336;
}

.leyenda-item.misma-conducta .leyenda-color {
    background-color: rgba(76, 175, 80, 0.5);
}

.leyenda-texto {
    font-size: 0.85rem;
    color: var(--text-color);
}

/* Estilos para celdas especiales en la matriz */
.matrix-cell.inicio-inicio {
    position: relative;
}

.matrix-cell.fin-fin {
    position: relative;
}

.matrix-cell.inicio-fin {
    position: relative;
}

.matrix-cell.misma-conducta {
    background-color: rgba(76, 175, 80, 0.5) !important;
    position: relative;
}

/* Estilos para opciones en el selector de conductas */
#selectedConducta option.option-inicio {
    background-color: rgba(33, 150, 243, 0.2);
}

#selectedConducta option.option-fin {
    background-color: rgba(244, 67, 54, 0.2);
}

/* Estilos para insights de conductas continuas */
.insight-item.duracion-tipica {
    border-left: 4px solid #4CAF50;
    background-color: rgba(76, 175, 80, 0.05);
}

.insight-item.secuencia {
    border-left: 4px solid #2196F3;
    background-color: rgba(33, 150, 243, 0.05);
}

/* Estilos para diagrama de flujo con conductas continuas */
.flow-item.flujo-continua .flow-label {
    position: relative;
}

.flow-item.flujo-inicio .flow-label {
    border-left: 3px solid #2196F3;
    padding-left: 0.5rem;
}

.flow-item.flujo-fin .flow-label {
    border-left: 3px solid #F44336;
    padding-left: 0.5rem;
}

/* Estilos para nota explicativa en vista de conducta seleccionada */
.conducta-continua-nota {
    background-color: rgba(236, 243, 253, 0.7);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.conducta-continua-nota.inicio {
    border-left: 4px solid #2196F3;
}

.conducta-continua-nota.fin {
    border-left: 4px solid #F44336;
}

.conducta-continua-nota p {
    margin: 0.5rem 0;
}

.conducta-continua-nota strong {
    color: var(--primary-color);
}

/* Estilos para relaciones especiales en detalles de celda */
.cell-detail-title .relacion-especial {
    background-color: rgba(76, 175, 80, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: #2E7D32;
}

.cell-detail-title .relacion-inicio-inicio {
    background-color: rgba(33, 150, 243, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: #1565C0;
}

.cell-detail-title .relacion-fin-fin {
    background-color: rgba(244, 67, 54, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: #C62828;
}

.cell-detail-title .relacion-inicio-fin,
.cell-detail-title .relacion-fin-inicio {
    background-color: rgba(156, 39, 176, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: #6A1B9A;
}

.special-description {
    background-color: rgba(76, 175, 80, 0.1);
    padding: 1rem;
    border-radius: 0.375rem;
    border-left: 3px solid #4CAF50;
    color: #2E7D32;
    font-weight: 500;
}

/* Estilos para ejemplos en detalles de celda */
.example-item.ejemplo-inicio-fin {
    border-left: 3px solid #9C27B0;
}

.example-item.ejemplo-inicio-inicio {
    border-left: 3px solid #2196F3;
}

.example-item.ejemplo-fin-fin {
    border-left: 3px solid #F44336;
}

.conducta-display {
    padding: 0.75rem 1rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 0.375rem;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

/* Estilo para separar visualmente las secciones continuas */
.edit-section.continua-info {
    background-color: rgba(57, 142, 106, 0.05);
    padding: 1rem;
    border-radius: 0.375rem;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Mejorar el contenedor de la matriz */
.legend-container {
    /* background-color: var(--background-color); */
    /* padding: 1rem; */
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.matrix-container {
    background-color: var(--card-background);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    overflow: auto;
    max-height: 80vh; /* Alto máximo para permitir scroll */
    position: relative;
    isolation: isolate; /* Crear un nuevo contexto de apilamiento */
}

/* Estilo específico para la celda de esquina */
.header-corner {
    z-index: 10 !important; /* Asegurar que está por encima de todo */
    background-color: var(--background-color) !important;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1) !important;
}

/* Agregar un pequeño degradado en los bordes del scroll */
.matrix-container::after {
    content: "";
    pointer-events: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15px;
    /* background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.8)); */
}

.matrix-container::before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    bottom: 0;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
    z-index: 2;
}

.registro-detalle-duracion {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.9rem;
    /* background-color: rgba(57, 142, 106, 0.07); */
    /* padding: 0.35rem 0.75rem; */
    border-radius: 0.375rem;
    display: inline-block;
}

.duracion-label {
    margin-right: 0.5rem;
    font-weight: 600;
}

.registro-detalle-duracion .cronometro {
    font-family: monospace;
    font-size: 0.85rem;
}

.registro-detalle-fecha {
    margin-bottom: 0.25rem; /* Reducido para acercar la duración */
    color: #666;
    font-size: 0.875rem;
}

.export-section {
    margin-bottom: 1.5rem;
}

.export-section label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.export-description {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #666;
}

#currentExportProfileName {
    font-weight: 500;
    color: var(--primary-color);
}

.export-section select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: white;
}

#multiProfileSelector .profiles-select-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: white;
    margin-bottom: 0.5rem;
}

#multiProfileSelector .profile-select-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

#multiProfileSelector .profile-select-item:last-child {
    border-bottom: none;
}

#multiProfileSelector .profile-select-item label {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    cursor: pointer;
}

#multiProfileSelector .profile-select-item input[type="checkbox"] {
    margin-right: 0.75rem;
}

#multiProfileSelector .profile-current-badge {
    background-color: var(--primary-color);
    color: white;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.5rem;
}
/* Estilos para la evolución temporal - Agregar al final del archivo CSS */
.evolucion-temporal-container {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    /* background-color: var(--card-background);
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
  }
  
  .evolucion-header {
    margin-bottom: 1.5rem;
  }
  
  .evolucion-header h3 {
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--text-color);
  }
  
  .evolucion-controls {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  
  .agrupacion-control {
    min-width: 150px;
    flex: 1;
  }
  
  .conductas-filter {
    flex: 2;
    min-width: 200px;
  }
  
  .multi-select-container {
    position: relative;
    width: 100%;
  }
  
  .selected-items {
    min-height: 38px;
    padding: 0.5rem;
    padding-right: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    cursor: pointer;
    align-items: center;
    font-size: 0.875rem;
  }
  
  .selected-item {
    background-color: var(--primary-color);
    color: white;
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
  }
  
  .remove-selected {
    cursor: pointer;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
  }
  
  .multi-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
  }
  
  .multi-select-dropdown.show {
    display: block;
  }
  
  .dropdown-search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
  }
  
  .dropdown-search input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.85rem;
  }
  
  .select-all-option {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
  }
  
  .dropdown-options {
    max-height: 200px;
    overflow-y: auto;
  }
  
  .dropdown-option {
    padding: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .dropdown-option:hover {
    background-color: var(--background-color);
  }
  
  .dropdown-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
  }
  
  .placeholder {
    color: #666;
  }
  
  .chart-container {
    position: relative;
    height: 300px;
    margin-bottom: 1.5rem;
    /* border: 1px solid var(--border-color); */
    border-radius: 0.375rem;
    padding: 1rem;
  }
  
  .loading-chart {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 5;
    color: #666;
  }
  
  .spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s linear infinite;
    margin-bottom: 0.5rem;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  .no-data-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    text-align: center;
    padding: 1rem;
  }
  
  .tabla-container {
    /* background-color: var(--card-background); */
    border-radius: 0.375rem;
    margin-bottom: 1rem;
  }
  
  .tabla-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
  }
  
  .tabla-header h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
  }
  
  .tabla-toggle {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
  }
  
  .tabla-evolucion-scroll {
    overflow-x: auto;
    max-height: 300px;
    border: 1px solid var(--border-color);
    background-color: white;
    border-radius: 0.375rem;
  }
  
  .tabla-evolucion {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }
  
  .tabla-evolucion th,
  .tabla-evolucion td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
  }
  
  .tabla-evolucion th {
    background-color: #e8e9ea;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  
  .tabla-evolucion th:first-child,
  .tabla-evolucion td:first-child {
    position: sticky;
    left: 0;
    background-color: #e8e9ea;
    z-index: 5;
    text-align: left;
    font-weight: 500;
  }
  
  .tabla-evolucion tr:hover {
    background-color: rgba(0, 0, 0, 0.025);
  }
  
  /* Modal para gráfico ampliado */
  .modal-grafico {
    /* max-width: 90%; */
    /* width: 900px; */
    height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
  }
  
  .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
  }
  
  .close-modal {
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
  }
  
  .modal-chart-container {
    flex: 1;
    overflow: hidden;
    padding: 1rem;
    margin-top: -1rem;
    position: relative;
    min-height: 60%;
  }
  
  .modal-controls {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    /* align-items: center;
    flex-wrap: wrap; */
    gap: 1rem;
    flex-direction: column; 
    max-height: 40%; 
    overflow-y: auto; 
  }
  
  .modal-agrupacion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  /* .modal-conductas-container {
    flex: 1;
    overflow-x: auto;
  } */

  .modal-conductas-container {
    width: 100%;
    overflow-y: auto; /* Permitir scroll vertical */
    max-height: 100%; /* Usar todo el espacio disponible */
  }
  
  /* .modal-conductas-selected {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  } */

  .modal-conductas-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-right: 0.5rem; /* Espacio para el scrollbar */
  }

  .donut-conducta-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    margin: 0.25rem 0;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s;
    width: calc(50% - 0.5rem); /* Dos elementos por fila en pantallas normales */
    box-sizing: border-box;
  }
  
  .donut-conducta-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  
  .conducta-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    white-space: nowrap;
    /* color: white; */
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  
  .badge-remove {
    cursor: pointer;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    font-size: 0.75rem;
  }
  .tabla-footer {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
  }
  
  .export-icon {
    margin-right: 0.5rem;
  }
  
  /* canvas#evolucionChart + .chartjs-legend ul li span,
    canvas#modalChart + .chartjs-legend ul li span {
    width: 8px !important;
    height: 8px !important;
    margin-right: 1px !important;
    margin-bottom: 5px !important;
    display: inline-block !important;
    border-radius: 50% !important;
    padding: 2rem !important; 
    } */
 
  /* Estilos para el selector de tipo de parámetro */
  .parametro-tipo-select {
    /* margin-left: 0.5rem; */
    min-width: 120px;
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}
.new-parametro-container {
    display: flex;
    align-items: center;
    flex: 1;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.new-parametro-container input[type="text"] {
    flex: 1;
    min-width: 200px;
}


.opciones-container {
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    background-color: var(--background-color);
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.opciones-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.add-opcion-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    min-width: 24px; /* Asegurar tamaño fijo */
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
    flex-shrink: 0; /* Evitar que se encoja */
    margin-left: auto; /* Alinear a la derecha */
    padding: 0; /* Evitar padding adicional */
    line-height: 1; /* Centrar el + */
    font-size: 16px; /* Tamaño fijo del + */
}

.add-opcion-btn:hover {
    background-color: var(--primary-hover);
}

.opciones-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 5px;
}

.opcion-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background-color: white;
    padding: 0.25rem;
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.opcion-input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    min-width: 0; /* Permite que el input se encoja apropiadamente */
}

.remove-opcion-btn {
    background-color: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    min-width: 20px; /* Asegurar tamaño fijo */
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
    flex-shrink: 0; /* Evitar que se encoja */
    padding: 0; /* Evitar padding adicional */
    line-height: 1; /* Centrar el × */
    font-size: 14px; /* Tamaño fijo del × */
}

.remove-opcion-btn:hover {
    background-color: #dc2626;
}

/* Estilos mejorados para opciones múltiples en el registro */
.radio-options-group,
.checkbox-options-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    background-color: rgba(0, 0, 0, 0.02);
    padding: 0.75rem;
    border-radius: 0.375rem;
}

.radio-option,
.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.radio-option input,
.checkbox-option input {
    margin: 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.radio-option label,
.checkbox-option label {
    margin: 0;
    font-weight: normal;
    flex: 1;
    cursor: pointer;
}

/* Estilos para el modal de edición de parámetros */
.edit-parametro-content {
    padding: 1rem 0;
}

.parametro-tipo {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    margin-left: 0.5rem;
    background-color: var(--background-color);
}

/* Modificar la visualización de los parámetros en la lista */
.parametro-info {
    display: flex;
    align-items: center;
}

.parametro-texto {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Estilos para el toggle de "Ver todas" */
.view-all-toggle {
    display: flex;
    justify-content: flex-end;
    /* margin-top: -1.5rem; */
    /* margin-bottom: 0.5rem; */
    /* margin-right: 0.5rem; */
}

.view-all-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.view-all-label input[type="checkbox"] {
    margin-right: 0.5rem;
}

.view-all-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary-color);
}

/* Estilos para el contenedor de tarjetas en modo "Ver todas" */
.view-all-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Estilos para cada tarjeta de conducta */
.conducta-card {
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    position: relative;
}

.conducta-card:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.conducta-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.conducta-card-title {
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.conducta-card-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.05);
}

.conducta-card-body {
    margin-bottom: 0.5rem;
}

.conducta-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conducta-timer {
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* Botón común para registrar todas las conductas */
.register-all-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.register-all-btn {
    background-color: var(--primary-color);
    color: white;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.register-all-btn:hover {
    background-color: var(--primary-hover);
}

/* Estilos para los botones de conductas continuas en tarjetas */
.conducta-card-btn {
    background-color: var(--primary-color);
    color: white;
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background-color 0.2s;
}

.conducta-card-btn:hover {
    background-color: var(--primary-hover);
}

.conducta-card-btn.finalizar {
    background-color: #f97316;
}

.conducta-card-btn.finalizar:hover {
    background-color: #ea580c;
}

/* Separador visual entre tarjetas */
.conducta-card-separator {
    height: 1px;
    background-color: var(--border-color);
    margin: 0.5rem 0;
}

/* Estilo para la fecha común */
.common-date-section {
    background-color: rgba(0, 0, 0, 0.02);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.common-date-title {
    font-weight: 500;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.common-date-inputs {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.common-date-inputs .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 150px;
}

/* Estilo para centrar el cronómetro en las tarjetas */
.conducta-timer-container {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.conducta-card.has-data {
    border-left: 3px solid var(--primary-color);
}

.card-has-data-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    font-size: 10px;
    margin-left: 0.5rem;
}

/* Estilo para el botón de registro cuando hay datos */
.register-all-btn.has-data {
    background-color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.register-all-btn.has-data:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
/* Estilos para el selector de ordenación en modo "ver todas" */
.sort-controls-container {
    margin-bottom: 1rem;
    background-color: var(--background-color);
    /* padding: 0.75rem; */
    /* padding-top: 0.25rem; */
    border-radius: 0.375rem;
}

.sort-controls {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-controls label {
    font-weight: 500;
    margin-bottom: 0;
    white-space: nowrap;
}

.sort-controls select {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.85rem;
    background-color: white;
}
  
.date-time-controls-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 0.375rem;
    background-color: var(--background-color);
}

.register-all-btn-container {
    margin-top: 1rem;
    padding-top: 1rem;
    text-align: center;
}

/* Estilo para las etiquetas de conducta continua en el selector */
#conducta option[value]:not([value=""]) {
    padding: 8px 4px;
}

/* Añadir un pequeño estilo para diferenciar las conductas continuas en el selector */
#conducta option:contains("(Continua)") {
    background-color: rgba(57, 142, 106, 0.1); /* Color verde suave */
    font-style: italic;
}

#modalDonutConductas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.donut-conducta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 2rem;
    background-color: rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.donut-conducta-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.donut-conducta-item.disabled {
    opacity: 0.5;
    text-decoration: line-through;
}

.donut-conducta-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.donut-conducta-count {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    margin-left: 0.25rem;
    font-size: 0.75rem;
}

/* Estilos para la leyenda interactiva en donut chart */
#donutChartLegend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: -2.5rem;
}

.donut-legend-item {
    /* display: flex; */
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    border-radius: 2rem;
    background-color: rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.donut-legend-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.donut-legend-item.hidden {
    opacity: 0.5;
    text-decoration: line-through;
}

.donut-legend-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.donut-legend-count {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.1rem 0.4rem;
    border-radius: 1rem;
    margin-left: 0.25rem;
    font-size: 0.7rem;
}

/* Estilos para la sección contraíble de estadísticas */
.stats-collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    cursor: pointer;
    /* background-color: var(--background-color); */
    background-color: #d1e6c7;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    transition: background-color 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stats-collapsible-header:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.stats-collapsible-title {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

.collapse-icon {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    transition: transform 0.3s;
}

.collapse-icon.collapsed {
    transform: rotate(-90deg);
}

.stats-collapsible-content {
    overflow-y: auto;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

.stats-collapsible-content.expanded {
    max-height: 2000px; /* Valor alto para permitir todo el contenido */
    /* transition: max-height 0.5s ease-in; */
    /* background-color: white; */
    overflow-y: auto;
    /* padding: 1rem; */
}

#freqViewBtn {
    display: none !important;
}
/* Estilos compartidos para secciones contraíbles en estadísticas */
.stats-collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    /* background-color: var(--background-color); */
    /* background-color: #d1e6c7; */
    background-color: rgba(79, 158, 73, 0.205);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    transition: background-color 0.2s;
}

.stats-collapsible-header:hover {
    /* background-color: rgba(49, 109, 39, 0.739); */
    background-color: #b6dba6;
    background-color: var(--primary-color);
}

.stats-collapsible-title {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}


.collapse-icon {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    transition: transform 0.3s;
}

.collapse-icon.collapsed {
    transform: rotate(-90deg);
}

.stats-collapsible-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

.stats-collapsible-content.expanded {
    max-height: 2000px; /* Valor alto para permitir todo el contenido */
    /* padding: 1rem; */
    /* transition: max-height 0.5s ease-in; */
}

.registro-menu-dots {
    cursor: pointer;
    font-size: 1.2rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    bottom: 10px;
    transition: background-color 0.2s;
    z-index: 5;
    /* background-color: rgba(0, 0, 0, 0.05); */
}

.registro-menu-dots:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.registro-dropdown-menu {
    position: absolute;
    bottom: 38px;
    right: 10px;
    background-color: white;
    border-radius: 0.375rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 100;
    display: none;
    min-width: 100px;
    font-size: 0.85rem;
}

.registro-dropdown-menu.show {
    display: block;
}

.dropdown-item {
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dropdown-item:first-child {
    border-radius: 0.375rem 0.375rem 0 0;
}

.dropdown-item:last-child {
    border-radius: 0 0 0.375rem 0.375rem;
}

.edit-item {
    color: var(--primary-color);
}

.delete-item {
    color: #ef4444;
}

.finalizar-item {
    color: #f97316;
}

.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--background-color);
    background-color: var(--primary-color);
    transition: transform 0.3s ease, height 0.3s ease;
    padding: 0;
    /* display: flex; */
    flex-direction: column;
    align-items: center; /* Centrar el contenido horizontalmente */
    max-width: 100%; /* Asegurar que no exceda el ancho de la ventana */
}

.header-hidden {
    transform: translateY(-100%);
    box-shadow: none;
}

.header-compact {
    height: auto;
    padding: 0;
}

/* Estilo para las pestañas scrollables */
.scrollable-tabs {
    display: flex;
    overflow-x: auto;
    -ms-overflow-style: none;  /* IE y Edge */
    scrollbar-width: none;  /* Firefox */
    /* padding: 10px 15px; */
    /* padding: 5px; */
    padding: 10px;
    background-color: #e6e7ea;
    background-color: #cfe0d0;
    z-index: 999;
    transition: all 0.3s ease;
    white-space: nowrap;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    /* max-width: var(--container-width);  */
    box-sizing: border-box; /* Incluir padding en el ancho total */
    /* border-radius: 2rem; */
    justify-content: center;
}

/* Ocultar scrollbar */
.scrollable-tabs::-webkit-scrollbar {
    display: none;
}

/* .tabs.tabs-only {
    display: flex;
    align-items: center;
    padding-left: 10px; 
    margin-top:3.5rem;
} */

.tabs-only {
    display: flex;
    align-items: center;
    padding-left: 10px; /* Ajusta el espacio a la izquierda */
    margin-top:3.5rem;
}

.tabs-only::before {
    content: "";
    display: block;
    width: 60px; /* Ajusta según el tamaño de tu imagen */
    height: 60px; /* Ajusta según el tamaño de tu imagen */
    background-image: url('../images/ojos.png'); /* Asegúrate de que la ruta sea correcta */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px; /* Espacio entre la imagen y los tabs */
    margin-left: 7px;
    flex-shrink: 0; /* Evita que la imagen se encoja */
    margin-top:-20px;
    margin-bottom: -20px;
}

.tabs-overflow {
    cursor: grab;
}

.tabs-grabbing {
    cursor: grabbing;
}

/* Mantener visible las pestañas incluso cuando el encabezado está oculto */
/* .tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    width: 100%; 
    margin-top: 2.5rem;
    overflow-x: auto; 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
    white-space: nowrap; 
    padding-bottom: 5px; 
    justify-content: space-evenly;
} */

.tabs {
    display: flex;
    /* gap: 0.5rem; */
    /* margin-bottom: 1rem; */
    width: 100%;
    /* margin-top: 3rem; */
    overflow-x: auto; /* Permitir desplazamiento horizontal */
    -ms-overflow-style: none; /* Ocultar scrollbar en IE y Edge */
    scrollbar-width: none; /* Ocultar scrollbar en Firefox */
    /* padding-bottom: 5px;  */
    align-items: center;
    justify-content: space-evenly;

}

.tabs::-webkit-scrollbar {
    display: none;
}

.tabs-compact {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.5rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
}

/* Ajustes para el logo y perfil en modo contraído */
.header-hidden .logo-container {
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.header-hidden .profile-selector {
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.container {
    transition: padding-top 0.3s ease;
    position: relative;
}

/* Mejorar los botones de pestañas para el modo compacto */
.tabs-compact .tab-btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

/* Estilos para el selector de perfil flotante */
.profile-selector-floating {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999; /* Valor alto para asegurar que esté por encima de todo */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.current-profile-floating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.3rem 0.75rem;
    border-radius: 2rem;
    cursor: pointer;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.current-profile-floating:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.current-profile-floating .profile-name {
    font-weight: 600;
    color: var(--primary-color);
}

/* Asegurar que el selector original no aparezca */
.profile-selector {
    display: none !important;
}

/* Conservar los estilos del dropdown, pero ajustar su posición */
/* .profile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
} */

.time-window-info {
    background-color: rgba(236, 243, 253, 0.7);
    border-left: 4px solid #4285f4;
    padding: 10px 15px;
    margin: 15px 0;
    border-radius: 0 4px 4px 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.time-window-info p {
    margin: 0;
    color: #333;
}

.time-window-info strong {
    color: #1565c0;
}

/* Estilo para la barra de desplazamiento en navegadores WebKit */
#probInsights::-webkit-scrollbar {
    width: 6px;
}

#probInsights::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#probInsights::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#probInsights::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.toggle-buttons-container {
    display: flex;
    /* justify-content: space-between; */
    justify-content: end;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
    margin-top: -0.5rem;
}


body.js-initializing header,
body.js-initializing .profile-selector-floating,
body.js-initializing #currentProfileName {
  visibility: hidden;
}

header, .profile-selector-floating, #currentProfileName {
  transition: visibility 0.1s ease, opacity 0.1s ease;
}

.custom-date-filter-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eee;
    width: 100%;
}

.custom-date-filter-row .date-inputs {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.custom-date-filter-row .form-group {
    display: flex;
    align-items: center;
    margin: 0;
}

.custom-date-filter-row .form-group label {
    margin-right: 0.5rem;
    white-space: nowrap;
}

.custom-date-filter-row input[type="date"] {
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.custom-date-filter-row .btn-sm {
    padding: 0.375rem 0.75rem;
    height: auto;
}

.clear-button-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0.75rem;
}

.clear-button-row button {
    width: 100%;
    max-width: 100%;
}

/* Ajustes adicionales para el filtro de fechas */
.custom-date-filter-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eee;
    width: 100%;
    margin-bottom: 0; /* Eliminar margen inferior */
}

/* Si hay un borde inferior en el filtro personalizado, lo eliminamos */
.custom-date-filter-row {
    border-bottom: none;
    padding-bottom: 0;
}

.multi-select-checkboxes {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.select-all-option {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
    font-weight: bold;
}

.checkbox-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 0.5rem;
}

/* Estilos para checkboxes deshabilitados pero seleccionados */
.checkbox-item input[type="checkbox"]:disabled:checked {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Estilo para contenedor de select con icono */
.select-with-icon {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el icono y el select */
    width: 100%;
}

/* Estilo para el icono del calendario */
.icon-calendar {
    font-size: 16px;
    display: flex;
    align-items: center;
}

/* Si necesitas ajustar el ancho del select para que quede alineado con otros elementos */
.stats-filters .filter-controls,
.stats-sort .filter-controls {
    width: 100%; /* O un ancho específico que se ajuste a tu diseño */
}

/* Estilos para la ordenación por tipo de conducta */
.compact-mode-group-header {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: #f5f5f5;
    font-weight: 600;
    color: #666;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    /* margin-top: -1.5rem; */
    font-size: 0.9rem;
    text-align: left;
}

.compact-mode-separator {
    width: 100%;
    height: 1px;
    background-color: #e0e0e0;
    margin: 1rem 0;
}

#compactModeButtons {
    /* display: grid; */
    /* grid-template-columns: repeat(2, 1fr); */
    gap: 0.5rem;
    width: 100%;
}

/* Ajuste para que los encabezados ocupen ambas columnas */
#compactModeButtons .compact-mode-group-header,
#compactModeButtons .compact-mode-separator {
    grid-column: 1 / -1;
    width: 100%;
}

/* Clases para diferentes vistas del modo compacto */
.compact-mode-buttons.two-columns-with-categories {
    display: block; /* Cambiar de grid a block para control personalizado */
    width: 100%;
}

/* Contenedor de categorías en modo 2 columnas - forzar 1 columna */
.two-columns-with-categories .categorias-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Separador entre categorías y conductas sin categoría */
.categoria-separator {
    height: 2px;
    background: linear-gradient(to right, #e0e0e0, #bdbdbd, #e0e0e0);
    margin: 1rem 0;
    border-radius: 1px;
}

/* Contenedor de conductas sin categoría en modo 2 columnas - volver a grid */
.two-columns-with-categories .conductas-sin-categoria-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    width: 100%;
}

/* Mantener el comportamiento original para modo 1 columna */
.compact-mode-buttons.single-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

/* Mantener el comportamiento original para modo 2 columnas sin categorías */
.compact-mode-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    width: 100%;
}

/* Conductas dentro de categorías desplegadas en modo 2 columnas - organizar en 2 columnas */
.two-columns-with-categories .categoria-conductas[style*="display: block"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0.5rem; /* Reducir padding para que no afecte el tamaño de las tarjetas */
}

/* Asegurar que las categorías ocultas se mantengan ocultas */
.two-columns-with-categories .categoria-conductas[style*="display: none"] {
    display: none !important;
}

/* Normalizar el tamaño de las conductas dentro de categorías */
.two-columns-with-categories .categoria-conductas .conduct-button-container {
    margin-bottom: 0; /* Eliminar margen inferior extra */
}

/* Asegurar que todos los botones de conducta tengan el mismo tamaño base */
.two-columns-with-categories .categoria-conductas .compact-mode-button {
    margin-bottom: 0; /* Eliminar cualquier margen que se haya añadido */
    box-sizing: border-box; /* Asegurar que padding y border se incluyan en el tamaño total */
}

/* Estilos para el selector de vista */
.view-selector-container {
    display: flex;
    align-items: center;
    justify-content: end;
}

.view-selector-icon-img {
    /* width: 16px;
    height: 16px; */
    /* margin-right: 8px; */
    justify-content: center;
    vertical-align: middle;
    /* opacity: 0.7; */
    flex-shrink: 0;
    width: 60px;
}

.view-selector-dropdown {
    position: relative;
    display: inline-block;
}

.view-selector-header {
    display: flex;
    align-items: center;
    /* width: 10rem; */
    height: 2rem;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    /* margin-top: 1rem; */
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 1.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    user-select: none;
}

.view-selector-header:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.view-selector-icon,
.view-option-icon {
    font-size: 1rem;
    color: #6c757d;
}

.view-selector-arrow {
    font-size: 0.75rem;
    color: #6c757d;
    transition: transform 0.2s ease;
}

.view-selector-dropdown.show .view-selector-arrow {
    transform: rotate(180deg);
}

.view-selector-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    margin-top: 0.25rem;
}

.view-selector-dropdown.show .view-selector-options {
    display: block;
}

.view-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.2s ease;
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.full-width {
    width: 100%;
}

.view-option:hover {
    background-color: #f8f9fa;
}

.view-option:first-child {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.view-option:last-child {
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.view-option.active {
    background-color: #e3f2fd;
    color: #1976d2;
}

.view-option.active .view-option-icon {
    color: #1976d2;
}

/* Estilos para la vista de 1 columna */
.compact-mode-buttons.single-column {
    grid-template-columns: 1fr;
    /* max-width: 600px; */
    margin: 0 auto;
}

/* Estilos para campos expandidos en 1 columna */
.conduct-expanded-fields {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    animation: slideDown 0.3s ease;
}

.conduct-expanded-fields .parametro-registro-item {
    margin-bottom: 1rem;
}

.conduct-expanded-fields .parametro-registro-item:last-child {
    margin-bottom: 0;
}

.conduct-expanded-fields .form-group {
    margin-bottom: 1rem;
}

.conduct-expanded-fields .expanded-register-btn {
    width: 100%;
    background-color: #198754;
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.conduct-expanded-fields .expanded-register-btn:hover {
    background-color: #157347;
}

.conduct-expanded-fields .expanded-register-btn.continua {
    background-color: #fd7e14;
}

.conduct-expanded-fields .expanded-register-btn.continua:hover {
    background-color: #e8690b;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Estilo para el texto "Vista" */
.view-label {
    font-size: 1.5rem;
    color: #059669;
    font-weight: 500;
    /* margin-bottom: 5px; */
    /* margin-right: 0.5rem; */
    align-self: center;
}

/* Asegurar que el contenedor del selector de vista sea flex para alinear correctamente */
.view-selector-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* margin-top: -1.5rem; */
    margin-bottom: 1rem;
}


/* Estilos para textareas expandibles */
.textarea-expandible {
  min-height: 34px;
  max-height: 200px;
  width: 100%;
  resize: vertical;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  overflow: auto;
}

.textarea-expandible:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

/* Ajusta el estilo para textareas en formularios de modo compacto */
.conduct-expanded-fields .parametro-edit-item textarea.textarea-expandible {
  min-height: 34px;
  margin-top: 5px;
}

/* Ajusta el estilo para textareas en modales */
.parametro-registro-item textarea.textarea-expandible {
  margin-top: 5px;
}

/* Ajusta el estilo para el modo "Ver todas" */
.conducta-card .parametro-registro-item textarea.textarea-expandible {
  margin-top: 5px;
}


.change-start-item{
    color: var(--primary-color);
}

/* Estilos para la vista de botones compacta (tanto 1 como 2 columnas) */
.last-record-time {
    position: absolute;
    bottom: 4px;
    left: 6px;
    font-size: 0.7rem;
    color: rgba(0, 0, 0, 0.6);
    font-weight: normal;
    opacity: 0.8;
}

/* Cuando la conducta está en curso, el tiempo no se muestra */
.continuous-behavior.in-progress .last-record-time {
    display: none;
}

/* Asegurar que el botón tiene posicionamiento relativo para los elementos absolutos */
.compact-mode-button {
    position: relative;
}

/* Estilos para la vista de tarjetas */
.last-record-time-card {
    font-size: 0.65rem;
    color: rgba(0, 0, 0, 0.6);
    font-weight: normal;
    opacity: 0.8;
    line-height: 1;
}

.last-record-container {
    margin-left: auto;
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
}

/* Asegurar que no solapa con otros elementos en la tarjeta */
.conducta-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Para fondos muy claros, oscurecer un poco el texto para que sea legible */
[style*="background-color: #ffffff"] .last-record-time,
[style*="background-color: #ffffff"] .last-record-time-card,
[style*="background-color: #f3f4f6"] .last-record-time,
[style*="background-color: #f3f4f6"] .last-record-time-card,
[style*="background-color: #e5e7eb"] .last-record-time,
[style*="background-color: #e5e7eb"] .last-record-time-card,
[style*="background-color: #fdfcf8"] .last-record-time,
[style*="background-color: #fdfcf8"] .last-record-time-card,
[style*="background-color: #faf7f0"] .last-record-time,
[style*="background-color: #faf7f0"] .last-record-time-card,
[style*="background-color: #f5efe5"] .last-record-time,
[style*="background-color: #f5efe5"] .last-record-time-card {
    color: rgba(0, 0, 0, 0.8);
}

/* Estilos para optimización de gráfico con muchas conductas */
.many-conducts .chart-container {
    min-height: 450px !important;
}

.many-conducts #evolucionChart {
    min-height: 400px !important;
}

.few-conducts .chart-container {
    min-height: 350px !important;
}

.few-conducts #evolucionChart {
    min-height: 300px !important;
}

/* Advertencia para muchas conductas */
.conducts-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.warning-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.warning-icon {
    font-size: 1.1rem;
}

.warning-text {
    color: #856404;
    line-height: 1.4;
}

/* Mejorar espaciado para leyendas en bottom */
.chartjs-legend-bottom {
    max-height: 120px;
    overflow-y: auto;
    margin-top: 10px;
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
    .many-conducts #evolucionChart {
        min-height: 350px !important;
    }
    
    .few-conducts #evolucionChart {
        min-height: 250px !important;
    }
}

/* Estilos para la sección Acerca de */
.project-description {
    line-height: 1.6;
    color: #374151;
}

.project-description p {
    margin-bottom: 1rem;
}

.project-description ul {
    margin: 0.5rem 0 1rem 1.5rem;
    padding: 0;
}

.project-description li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.project-description li strong {
    color: #1f2937;
    font-weight: 600;
}

/* Información de versión */
.version-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: #f9fafb;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.info-label {
    font-weight: 600;
    color: #374151;
}

.info-value {
    color: #6b7280;
    font-family: 'Courier New', monospace;
}

/* Sección de apoyo */
.support-section {
    text-align: left;
}

.support-section p {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: #374151;
}

.support-section ul {
    margin: 0.5rem 0 1.5rem 1.5rem;
    padding: 0;
}

.support-section li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    color: #374151;
}

.support-button-container {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.support-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}

.support-btn:hover {
    background: linear-gradient(135deg, #45a049, #3d8b40);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.support-icon {
    font-size: 1.2rem;
}

/* Modal de apoyo al proyecto */
#supportModal .modal-content {
    max-width: 400px;
    width: 90%;
}

.support-modal-content {
    text-align: left;
}

.support-description {
    margin-bottom: 2rem;
}

.support-description p {
    /* margin-bottom: -1rem; */
    line-height: 1.6;
    color: #374151;
    margin-top: 1rem;
    font-size:0.9rem;
}

.support-benefits {
    background-color: #f0f9ff;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    margin-top: 1rem;
}

.support-benefits h4 {
    margin: 0 0 0.75rem 0;
    color: #1e40af;
    font-size: 1rem;
}



.support-benefits ul {
    margin: 0;
    padding-left: 1.2rem;
}

.support-benefits li {
    margin-bottom: 0.5rem;
    line-height: 1.4;
    color: #374151;
}

.support-options {
    margin-bottom: 2rem;
}

.support-options h4 {
    margin: 0 0 1rem 0;
    color: #1f2937;
    font-size: 1.1rem;
}

.support-option {
    background-color: #f9fafb;
    padding: 1.25rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    /* border: 1px solid #e5e7eb; */
    transition: all 0.2s ease;
}

.support-option:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.option-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.option-icon {
    font-size: 1.5rem;
}

.option-title {
    font-weight: 600;
    color: #1f2937;
    font-size: 1.1rem;
}

.option-description {
    margin: 0.5rem 0 1rem 0;
    color: #6b7280;
    line-height: 1.5;
}

.option-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    border-radius: 2rem;
    transition: all 0.2s ease;
}

.btn-primary.btn-sm {
    /* background-color: #adc7c4;
    color: rgb(0, 0, 0);
    border: none; */
    background-color: #ffd240;
    color: #003087;
    border: none;
    border-radius: 2rem;
}



.btn-primary.btn-sm:hover {
    background-color: #6fb2aa;
    transform: translateY(-1px);
}

.btn-secondary.btn-sm {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-secondary.btn-sm:hover {
    background-color: #e5e7eb;
}

.support-footer {
    background-color: #fef3c7;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #f59e0b;
}

.support-footer p {
    margin: 0;
    font-size: 0.9rem;
    color: #92400e;
    line-height: 1.5;
}

.support-footer strong {
    color: #78350f;
}

/* Estilos para información de desarrollo */
.development-info {
    /* margin-top: 2rem; */
    padding-top: 1.5rem;
    /* border-top: 1px solid #e5e7eb; */
}

.development-info h4 {
    margin: 0 0 1rem 0;
    color: #1f2937;
    font-size: 1.1rem;
    font-weight: 600;
}

.development-info p {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: #374151;
}

.development-info ul {
    margin: 0.5rem 0 1rem 1.5rem;
    padding: 0;
}

.development-info li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    color: #374151;
}

.development-info li strong {
    color: #1f2937;
    font-weight: 600;
}


/* Botón de apoyo flotante */
.support-floating-btn {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fae1d5, #e1ab90);
    border: 2px solid #ffffff;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.3);
    transition: all 0.3s ease;
    z-index: 1001;
}

.support-floating-btn:hover {
    background: linear-gradient(135deg, #a0522d, #8b4513);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.4);
}

.support-floating-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.support-floating-icon {
    display: block;
    line-height: 1;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .support-floating-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
        margin-right: 6px;
    }
}

/* Animación sutil para llamar la atención ocasionalmente */
@keyframes coffeeGlow {
    0%, 100% { box-shadow: 0 2px 8px rgba(139, 69, 19, 0.3); }
    50% { box-shadow: 0 2px 12px rgba(139, 69, 19, 0.5), 0 0 0 2px rgba(139, 69, 19, 0.1); }
}

.support-floating-btn.animate-glow {
    animation: coffeeGlow 2s ease-in-out;
}

/* Enlace "Acerca de" en el footer */
.about-link {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: center;
}

.footer-about-link {
    color: #6b7280;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.footer-about-link:hover {
    color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
}

.footer-about-link:focus {
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
}

/* Pestaña oculta pero funcional */
.hidden-tab {
    display: none !important;
}

/* Botón para añadir nueva conducta en registro */
.add-conducta-button-container {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.view-all-add-btn {
    border-top: none;
    padding-top: 0.5rem;
}

.add-conducta-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: #f3f4f6;
    color: #374151;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 160px;
    justify-content: center;
}

.add-conducta-btn:hover {
    background-color: #4CAF50;
    background-color: var(--primary-color);

    color: white;
    border-color: #4CAF50;
    border-style: solid;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}

.add-conducta-btn:active {
    transform: translateY(0);
}

.add-icon {
    font-size: 1.2rem;
    font-weight: bold;
}

/* Modal de creación rápida de conducta */
.quick-add-conducta-content {
    text-align: left;
}

.quick-add-conducta-content .form-group {
    margin-bottom: 1.5rem;
}

.quick-add-conducta-content .form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
}

.quick-add-conducta-content .form-control:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.tipo-selector {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.tipo-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tipo-option:hover {
    border-color: #4CAF50;
    background-color: #f0f9ff;
}

.tipo-option input[type="radio"] {
    margin-top: 0.25rem;
    accent-color: #4CAF50;
}

.tipo-option input[type="radio"]:checked + .tipo-label {
    color: #1f2937;
}

.tipo-option:has(input[type="radio"]:checked) {
    border-color: #4CAF50;
    background-color: #f0f9ff;
}

.tipo-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tipo-label strong {
    font-weight: 600;
    color: #374151;
}

.tipo-label small {
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 768px) {
    .add-conducta-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
        min-width: 140px;
    }
    
    .tipo-selector {
        gap: 0.5rem;
    }
    
    .tipo-option {
        padding: 0.75rem;
    }
}

/* Estilos para cronómetro de registro diferido */
.deferred-timer-container {
    /* background: linear-gradient(135deg, #f7ddaa 0%, #e3a200 100%); */
    /* background-color: #e8bc11; */
    /* background-color: #90b9b0; */
    /* background-color: #3d606c; */
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem 0 2rem 0;
    /* color: white; */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.timer-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.timer-display {
    font-family: 'Courier New', monospace;
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.5rem;
}

.timer-time {
    letter-spacing: 2px;
    font-size: 3rem;
    color: white;
    color:var(--primary-color);
}

.timer-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.timer-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* border: 2px solid rgba(255, 255, 255, 0.3); */
    background: rgba(255, 255, 255, 0.1);
    color: white;
    color: var(--primary-color);
    /* cursor: pointer; */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.timer-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

.timer-btn.active {
    background: rgba(255, 255, 255, 0.3);
    border-color: white;
}

.timer-icon {
    font-size: 1.2rem;
    font-weight: bold;
}

.timer-info {
    margin-top: 0.5rem;
}

.timer-status {
    font-size: 0.9rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 768px) {
    .timer-display {
        font-size: 2rem;
    }
    
    .timer-btn {
        width: 42px;
        height: 42px;
    }
    
    .timer-icon {
        font-size: 1rem;
    }
}

.profile-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 8px;
}

.deferred-badge {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
}

/* Estilos para la etiqueta en el selector flotante */
.profile-item-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.profile-item-name .profile-type-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

.profile-item-name .deferred-badge {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
}

/* Asegurar que el layout del profile-item sea flexible */
.profile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Estilos para la etiqueta en el nombre del perfil actual */
#currentProfileName {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

#currentProfileName .profile-type-badge {
    font-size: 0.65rem;
    padding: 1px 5px;
    /* border-radius: 6px; */
    font-weight: 400;
    flex-shrink: 0;
}

#currentProfileName .deferred-badge {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
}

/* Asegurar que el contenedor del perfil actual tenga espacio suficiente */
.current-profile-floating {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* Permite que el contenido se contraiga si es necesario */
}

.profile-name {
    min-width: 0; /* Permite que el nombre se contraiga si es necesario */
    overflow: hidden;
}

/* Estilos para el indicador de retraso */
.timer-delay-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #fbbf24;
    color: #92400e;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 10;
    border: 1px solid #f59e0b;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.timer-delay-indicator.countdown {
    background-color: #ef4444;
    color: white;
    border-color: #dc2626;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Asegurar que el contenedor del cronómetro sea relativo */
.deferred-timer-container {
    position: relative;
}

/* Estilo para el botón de retraso */
.timer-btn.delay {
    background-color: #f59e0b;
    border-color: #d97706;
}

.timer-btn.delay:hover {
    background-color: #d97706;
    border-color: #b45309;
}

.timer-btn.delay.active {
    background-color: #92400e;
    border-color: #78350f;
}


/* Estilos para categorías */
.categoria-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.categoria-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.categoria-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.categoria-name {
    flex: 1;
    /* color: white; */
    font-size: 14px;
}

.categoria-count {
    background: rgba(255,255,255,0.2);
    /* color: white; */
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.categoria-toggle {
    /* color: white; */
    font-size: 12px;
    transition: transform 0.3s ease;
}

.categoria-conductas {
    margin-left: 16px;
    margin-bottom: 8px;
}

.categorias-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.categoria-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 8px;
    border: 2px solid transparent;
}

.categoria-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.categoria-nombre {
    font-weight: 600;
    /* color: white; */
}

.categoria-conductas {
    font-size: 12px;
    /* color: rgba(255,255,255,0.8); */
}

.categoria-actions {
    display: flex;
    gap: 8px;
}

.categoria-form .multi-select-checkboxes {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
}

.categoria-form .checkbox-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.categoria-form .checkbox-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    width: 100%;
}

.categoria-form .checkbox-item input[type="checkbox"] {
    margin: 0;
}

/* Estilos para mostrar categorías en el historial y estadísticas */
.categoria-prefix {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 700;
    margin-right: 6px;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: inline-block;
    vertical-align: middle;
}

.registro-detalle-conducta {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
    line-height: 1.5;
}

.registro-detalle-conducta .categoria-prefix {
    margin-bottom: 2px;
}

/* Mejorar contraste en diferentes fondos */
.registro-item .categoria-prefix {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.registro-detalle .categoria-prefix {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.filter-section-separator {
    height: 1px;
    background-color: #e0e0e0;
    margin: 8px 0;
}

.filter-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    margin: 8px 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.categoria-filter .form-check-label {
    font-weight: 500;
}

.filter-checkbox-item.categoria-filter {
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
    margin: 2px 0;
}

/* Mejorar espaciado dentro de categorías */
.categoria-conductas {
    padding: 12px !important;
}

.categoria-conductas .conduct-button-container {
    margin-bottom: 8px;
}

.categoria-conductas .conduct-button-container:last-child {
    margin-bottom: 0;
}

/* Asegurar que los botones dentro de categorías tengan el espaciado correcto */
.categoria-conductas .compact-mode-button {
    margin-bottom: 0;
}


.donut-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    /* padding-right: 10px; */
}

#toggleCategoriesBtn {
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    background-color: white;
    /* color: white; */
    border: none;
    border-color: var(--primary-color);
    padding: 6px 12px;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    min-width: auto;
    max-width: 200px;
}

/* #toggleCategoriesBtn:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

#toggleCategoriesBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#toggleCategoriesBtn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
} */


/* Estilos para las secciones informativas del modal de editar conducta */
.info-section {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.info-section label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
    display: block;
}

.info-content {
    margin-top: 8px;
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 14px;
}

.info-item-icon {
    margin-right: 8px;
    font-size: 16px;
}

.info-item-text {
    flex: 1;
}

.info-item-type {
    font-size: 12px;
    color: #6c757d;
    background-color: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

/* Para cuando no hay información disponible */
.info-empty {
    color: #6c757d;
    font-style: italic;
    padding: 8px 12px;
    background-color: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    text-align: center;
}

/* Estilos específicos para campos opcionales */
.campos-opcionales-info {
    border-left-color: #28a745;
}

.campos-opcionales-info .info-item-icon {
    color: #28a745;
}

/* Estilos específicos para categorías */
.categorias-info {
    border-left-color: #ffc107;
}

.categorias-info .info-item-icon {
    color: #ffc107;
}

/* Estilos para el selector de modo de tiempo */
.timing-mode-selector {
    margin-bottom: 1rem;
}

.timing-mode-selector select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
}

.timing-mode {
    width: 100%;
}

/* Estilos para carga de medios */
/* .media-upload {
    text-align: center;
    padding: 2rem;
    border: 2px dashed #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin-bottom: 1rem;
} */

/* .upload-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto;
} */

.upload-btn:hover {
    background-color: #45a049;
}

.upload-icon {
    font-size: 1.2rem;
}

/* Estilos para reproductores */
.media-player {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
}

/* .player-info {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
} */

.media-time {
    font-family: monospace;
    font-size: 0.9rem;
    color: #666;
}

.media-controls {
    display: flex;
    gap: 0.5rem;
}

.player-btn {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.player-btn:hover {
    background-color: #e0e0e0;
}

.player-btn:active {
    background-color: #d0d0d0;
}

/* Ajustes para video */
#videoPlayer {
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .player-info {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    
    .media-controls {
        justify-content: center;
    }
}

/* Selector de modo fuera del marco */
.timing-mode-selector-container {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.timing-mode-selector-container label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
    color: #495057;
}

.timing-mode-selector-container select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-size: 0.9rem;
}

.timing-mode {
    width: 100%;
}

/* Estilos para carga de medios */
.media-upload {
    text-align: center;
    padding: 2rem;
    border: 2px dashed #ddd;
    border-radius: 8px;
    /* background-color: #f9f9f9; */
    background-color: white;
    margin-bottom: 1rem;
}

.upload-btn {
    /* background-color: #4CAF50;
    color: white; */
    background-color: #dbdbdb;
    color: #4b4b4b;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto;
    transition: background-color 0.2s;
}

.upload-btn:hover {
    background-color: #45a049;
    background-color: var(--primary-color);
    color:white;
}

.upload-icon {
    font-size: 1.2rem;
}

.file-info {
    margin-top: 0.5rem;
    color: #666;
}

.file-info small {
    display: block;
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Estilos para reproductores */
.media-player {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
}

.media-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.media-file-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.media-file-info span:first-child {
    font-weight: 600;
    color: #333;
}

.media-file-info span:last-child {
    font-size: 0.8rem;
    color: #666;
}

.change-file-btn {
    /* background-color: #6c757d; */
    /* color: white; */
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.2s;
}

.change-file-btn:hover {
    background-color: #5a6268;
}

.player-info {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.media-time {
    font-family: monospace;
    font-size: 0.9rem;
    color: #666;
}

.media-controls {
    display: flex;
    gap: 0.5rem;
}

.player-btn {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.player-btn:hover {
    background-color: #e0e0e0;
}

.player-btn:active {
    background-color: #d0d0d0;
}

/* Indicador de carga */
.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: #666;
    font-size: 0.9rem;
}

.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #4CAF50;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ajustes para video */
#videoPlayer {
    border-radius: 4px;
    background-color: #000;
}

/* Responsive */
@media (max-width: 768px) {
    .media-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    
    .player-info {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    
    .media-controls {
        justify-content: center;
    }
    
    #videoPlayer {
        max-height: 250px;
    }
}

.media-actions {
    display: flex;
    gap: 0.5rem;
}

.delete-file-btn {
    /* background-color: #dc3545; */
    /* color: white; */
    background-color: #fee2e2;
    color: #ef4444;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.2s;
}

.delete-file-btn:hover {
    background-color: #c82333;
}

/* Etiquetas de fuente en historial */
.source-badge {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
    margin-left: 0.5rem;
    color: white;
}

.source-badge.timer {
    background-color: #6c757d;
}

.source-badge.audio {
    background-color: #17a2b8;
}

.source-badge.video {
    background-color: #e83e8c;
}

.source-badge.realtime {
    background-color: #28a745;
}

@media (max-width: 768px) {
    .media-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .change-file-btn,
    .delete-file-btn {
        width: 100%;
    }
}















































/* Responsive adjustments */
@media (max-width: 640px) {
    .logo-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .filter-controls {
        gap: 0.5rem;
    }

    .filter-controls > * {
        width: 100%;
        min-width: 100%; /* En móvil, ocupar todo el ancho */
    }
    
    /* Opcionalmente, si prefieres que los dos filtros compartan fila */
    /* Descomenta estas reglas si prefieres esta disposición */
    /*
    .filter-controls > * {
        width: calc(50% - 0.25rem);
        min-width: calc(50% - 0.25rem);
        flex: 0 0 calc(50% - 0.25rem);
    }
    */


    .filter-controls select,
    .filter-controls .btn-secondary {
        width: 100%;
    }
    
    .import-export-controls {
        flex-direction: column;
    }
    .import-export-controls .btn-secondary {
        width: 100%;
    }
    
    .modal-content {
        width: 95%;
        /* padding: 1rem; */
    }

    /* .tabs {
        flex-wrap: nowrap; NO permitir wrap en móvil
        justify-content: center; 
        overflow-x: auto; 
        padding-bottom: 5px; 
    } */

    .tabs {
        flex-wrap: nowrap; /* NO permitir wrap en móvil */
        justify-content: flex-start; /* Alinear al inicio para facilitar scroll */
        overflow-x: auto; /* Habilitar scroll horizontal */
        padding-bottom: 5px; /* Espacio para scrollbar */
    }

    .tab-btn {
        /* flex: 0 0 auto;  */
        flex:0.2;
        min-width: auto; 
    }

    
    

    /* .container {
        padding: 1rem; 
        transition: padding-top 0.3s ease;
    } */

    .container, header {
        max-width: 100%;
        padding: 1rem; /* Reducir el padding en móviles */
        box-sizing: border-box;
    }

    .stats-filters {
        flex-direction: column;
    }
    
    .filter-btn {
        width: 100%;
        text-align: center;
    }

    .header-logo {
        margin: 0 auto;
        margin-top:1rem;
    }
    

    .footer {
        margin-top: 2rem;
        padding: 1rem 0.5rem;
    }
    
    .footer-content {
        font-size: 0.75rem;
    }

    .date-inputs {
        flex-direction: column;
        gap: 0.5rem;
    }

    .stats-controls {
        
        gap: 0.5rem;
    }
    
    .stats-filters, .stats-sort {
        width: 100%;
    }

    .compact-mode-controls {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .compact-mode-search,
    .compact-mode-sort {
        width: 100%;
    }

    .reset-container {
        margin-bottom: 1.5rem;
    }
    
    .reset-container .btn-secondary {
        width: 100%;
    }
    .add-conducta-form {
        flex-wrap: wrap;
    }

    .add-parametro-form {
        flex-wrap: wrap;
    }
    /* .add-parametro-form button {
        flex: 1;
    } */
    
    .add-conducta-form input[type="text"] {
        flex: 1 1 100%;
    }
    
    .add-conducta-form input[type="color"] {
        flex: 0 0 40px;
    }
    
    .add-conducta-form button {
        flex: 1;
        /* margin-top: -2rem; */
    }   

    .color-preview-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .color-preview {
        margin-top: 0.5rem;
    }

    .color-presets {
        grid-template-columns: 1fr;
    }
    .color-grid {
        gap: 0.375rem;
        padding: 0.5rem;
    }
    .color-option {
        height: 1.5rem; /* Aún más pequeños en móvil */
    }

    .estadistica-header {
        padding: 0.75rem; /* Dar más espacio */
    }
    
    .estadistica-header span {
        
        white-space: nowrap;
    }
    
    .estadistica-contador {
        font-size: 0.9rem;
        padding: 0.2rem 0.4rem;
    }
    
    .estadistica-porcentaje {
        font-size: 0.75rem; /* Hacer el texto de estadísticas aún más pequeño */
    }

    /* Asegurar que no haya wrap forzado */
    .estadistica-header {
        flex-wrap: nowrap;
    }

    .stat-info {
        flex-wrap: nowrap;
        width: auto; /* Revertir el width:100% si existía */
    }
    .estadistica-promedios {
        font-size: 0.75rem;
        padding: 0 0.5rem 0.4rem 0.5rem;
    }
    
    /* Análisis secuencial */

    /* .prob-controls {
        flex-direction: column;
    } */
    
    .time-window-control {
        width: 100%;
    }
    
    .time-window-control input {
        flex: 1;
    }
    
    .flow-item {
        flex-direction: column;
        align-items: flex-start;
        /* padding: 0.5rem 0; */
    }
    
    .flow-label {
        margin-bottom: 0.25rem;
        width: 100%;
    }
    
    .flow-bar-container {
        width: 100%;
        margin: 0.5rem 0;
        height: 24px; 
    }
    
    .flow-value {
        align-self: flex-end;
        width: 100%;
        text-align: right;
        margin-top: 0.25rem;
    }
    
    .cell-detail-stats {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .stat-box {
        margin: 0;
    }

    .profile-selector {
        padding: 0.5rem;
        /* margin-bottom: 1rem; */
    }
    
    .profile-list-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .profile-color {
        margin-bottom: 0.5rem;
    }
    
    .profile-info {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .profile-stats {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .profile-actions {
        width: 100%;
        justify-content: space-between;
    }
    .profile-content-wrapper {
        flex-direction: column;
    }
    
    .profile-color {
        margin-bottom: 0.5rem;
    }
    
    .profile-actions {
        margin-top: 1rem;
        width: 100%;
        justify-content: space-between;
    }
    .flow-diagram {
        margin: 1rem 0;
        width: 100%;
    }
    
    .flow-diagram-container h4 {
        margin-top: 1.5rem;
        text-align: center;
        font-size: 1rem;
    }
    
    /* Animar cambio de color al seleccionar una barra en móvil para mejor feedback */
    .flow-bar:active {
        opacity: 0.9;
        background-color: var(--primary-hover);
    }

    .matrix-container {
        overflow: auto;
        max-height: 80vh;
        position: relative;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        /* Garantizar que la matriz tenga su propio contexto de apilamiento */
        isolation: isolate;
    }
    
    .matrix-container:after {
        /* content: ""; */
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 20px;
        /* background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--background-color) 100%); */
        pointer-events: none;
    }
    
    .prob-matrix-table th.header-row {
        width: 120px; /* Ancho menor en móvil */
        padding-right: 0.5rem;
    }
    
    .example-list {
        max-height: 200px;  /* Altura menor en móvil */
    }
    
    .cell-detail-examples h4 {
        font-size: 0.95rem;
    }
    
    .example-item {
        padding: 0.6rem;
    }

    .conducta-search-container {
        margin-bottom: 0.5rem;
    }

    .merge-option {
        padding: 0.6rem;
    }
    
    .option-description {
        font-size: 0.8rem;
    }
    
    .profiles-select-list {
        max-height: 150px;
    }

    #clearHistoryCustomDate .date-inputs {
        flex-direction: column;
        gap: 0.5rem;
    }

    #clearHistoryModal .custom-date-filter .date-inputs {
        flex-direction: column;
        gap: 0.5rem;
    }

    .acuerdo-summary {
        flex-direction: column;
    }
    
    .acuerdo-tabs {
        flex-wrap: wrap;
    }
    
    .acuerdo-tab-btn {
        flex: 1;
        min-width: calc(50% - 0.25rem);
        text-align: center;
    }

    .acuerdo-matriz th,
    .acuerdo-matriz td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    .matriz-valor {
        font-size: 0.9rem;
    }
    
    .matriz-etiqueta {
        font-size: 0.7rem;
    }
    
    .summary-card {
        min-width: 100%;
    }
    
    .summary-value {
        font-size: 2rem;
    }
    
    .setup-section {
        padding: 1rem;
    }
    
    .acuerdo-tab-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.9rem;
    }
    
    .acuerdo-tabs {
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    
    .acuerdo-matrix-container {
        overflow-x: auto;
    }
    
    .fallback-chart-label {
        min-width: 80px;
    }

    .acuerdo-matriz th, 
    .acuerdo-matriz td {
        padding: 0.6rem;
    }
    
    .acuerdo-matriz .matriz-valor {
        font-size: 1rem;
    }
    
    .acuerdo-matriz .matriz-etiqueta {
        font-size: 0.7rem;
    }
    
    .acuerdo-tabla th,
    .acuerdo-tabla td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    .acuerdo-nivel {
        min-width: 60px;
        font-size: 0.8rem;
    }
    
    .acuerdo-summary {
        flex-direction: column;
    }
    
    .summary-card {
        margin-bottom: 1rem;
    }

    .view-toggle {
        flex-direction: column; /* Apilar los botones verticalmente en móvil */
        width: 100%;
    }
    
    .view-btn {
        width: 100%;
        padding: 0.7rem 0.5rem; /* Aumentar el padding vertical para mejor área táctil */
        border-bottom: 1px solid var(--border-color);
    }
    
    .view-btn:last-child {
        border-bottom: none;
    }
    
    .acuerdo-tabla .conducta-row:hover::after {
        top: auto;            /* Anula el centrado vertical */
        bottom: -5px;         /* Lo posiciona justo debajo de la fila */
        right: 5px;           /* Más cerca del borde en móviles */
        transform: none;      /* Elimina la transformación */
        font-size: 0.65rem;   /* Texto más pequeño en móviles */
        padding: 2px 5px;     /* Reduce el padding para hacerlo más compacto */
    }
    
    /* Asegura que las filas tengan suficiente espacio para el tooltip */
    .acuerdo-tabla tr {
        position: relative;
        padding-bottom: 8px;
    }
    
    /* Para gráficos de kappa en móviles */
    .fallback-chart-container {
        margin-bottom: 0.5rem;
        padding: 0 5px; /* Añadir padding lateral en móviles */
    }
    
    .fallback-chart-row {
        margin-bottom: 15px; /* Más espacio entre filas en móvil */
    }
    
    .fallback-chart-label {
        font-size: 0.85rem; /* Texto más pequeño en móviles */
        width: 100%;        /* Asegurar que ocupa todo el ancho */
        text-align: left;   /* Alinear a la izquierda */
        overflow: hidden;   /* Gestionar textos muy largos */
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .perfil-checkbox-item {
        padding: 0.5rem 0.75rem;
    }
    
    .perfil-checkbox-item input[type="checkbox"] {
        width: 18px; /* Ligeramente más grande en móvil para facilitar el toque */
        height: 18px;
    }

    .tipo-selector-mini {
        /* flex-direction: column; */
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .timer-display {
        font-size: 1.5rem;
    }
    
    .btn-continua {
        flex-direction: column;
    }

    .leyenda-items {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .conducta-continua-nota {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    .cell-detail-title .relacion-especial,
    .cell-detail-title .relacion-inicio-inicio,
    .cell-detail-title .relacion-fin-fin,
    .cell-detail-title .relacion-inicio-fin,
    .cell-detail-title .relacion-fin-inicio {
        display: block;
        margin: 0.5rem 0 0 0;
        text-align: center;
    }

    .registro-fecha {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
    }
    
    /* Estilos específicos para conductas continuas */
    .registro-fecha .fecha-separador {
        display: none; /* Ocultar el separador en móviles */
    }
    
    .registro-fecha .fecha-inicio,
    .registro-fecha .fecha-fin {
        display: block;
        width: 100%;
        text-align: right;
    }

      
    .registro-conducta {
        margin-bottom: 0.25rem; /* Espacio si hay salto en pantallas pequeñas */
        width: 100%;           /* Ocupar todo el ancho en pantallas pequeñas */
        max-width: 100%;       /* Anular el max-width anterior */
    }
    
    /* Ajuste especial para etiquetas de conducta continua */
    .conducta-tipo-badge {
        margin-left: 0.25rem;
        font-size: 0.65rem;    /* Letra más pequeña en móviles */
        padding: 0.1rem 0.3rem; /* Padding más compacto */
    }

    #multiProfileSelector .profiles-select-list {
        max-height: 150px;
    }
    
    #multiProfileSelector .profile-select-item {
        padding: 0.5rem 0.75rem;
    }
    
    #multiProfileSelector .profile-select-item label {
        font-size: 0.9rem;
    }

    .evolucion-controls {
        flex-direction: column;
        gap: 0.75rem;
      }
      
      .conductas-filter, 
      .agrupacion-control {
        width: 100%;
      }
      
      .chart-container {
        height: 250px;
      }
      
      .modal-grafico {
        width: 95%;
        height: 90vh;
      }
      
      .tabla-evolucion th,
      .tabla-evolucion td {
        padding: 0.5rem;
        font-size: 0.8rem;
      }
      
      .tabla-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
      }
      
      .tabla-toggle {
        width: 100%;
      }
      
      .modal-controls {
        flex-direction: column;
        align-items: flex-start;
      }
      
      .modal-agrupacion {
        width: 100%;
      }
      
      .modal-conductas-container {
        width: 100%;
      }

      .tabla-footer {
        justify-content: center;
      }
      
      #exportTableCSV {
        width: 100%;
      }

    .new-parametro-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .parametro-tipo-select {
        margin-left: 0;
        width: 100%;
        margin-top: 0.5rem;
    }
    
    .opciones-container {
        padding: 0.5rem;
    }
    
    .opciones-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap; /* Prevenir saltos de línea */
    }
    
    .opciones-header label {
        font-size: 0.9rem; /* Texto más pequeño en móvil */
        flex: 1; /* Tomar el espacio disponible */
        margin-bottom: 0; /* Eliminar margen que pudiera causar problemas */
    }
    
    .add-opcion-btn {
        margin-left: auto;
    }
    
    .radio-options-group,
    .checkbox-options-group {
        padding: 0.5rem;
    }

    .add-parametro-form button[type="submit"] {
        width: 100%;
        margin-top: 0.5rem;
    }

    .sort-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .sort-controls select {
        width: 100%;
    }

    .donut-legend-item {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    
    .donut-conducta-item {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
    
    #donutChartLegend {
        gap: 0.5rem;
    }

    .registro-dropdown-menu {
        min-width: 90px;
        font-size: 0.8rem;
    }
    
    .dropdown-item {
        padding: 0.4rem 0.75rem;
    }
    
    .registro-menu-dots {
        width: 24px;
        height: 24px;
        font-size: 1.1rem;
    }

    .tabs-compact {
        padding: 0.35rem 0.5rem;
    }
    
    .tabs-compact .tab-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .sticky-header {
        padding: 0;
    }
    
    /* Reducir tamaño del logo en pantallas pequeñas */
    /* .sticky-header .header-logo {
        max-width: 70%;
        transition: max-width 0.3s ease;
    } */

    .scrollable-tabs {
        padding: 8px 12px;
        max-width: 100%; /* En móviles, ocupar todo el ancho disponible */
        justify-content: space-evenly;
    }
    
    /* .tab-btn {
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
    } */

    
    
    .profile-selector-fixed {
        max-width: 180px;
        top: 5px;
        right: 5px;
    }
    
    .profile-selector-fixed .profile-name {
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tab-content.active {
        display: block;
        padding: 1rem;
        margin-top: -1.5rem;
    }

    .modal.show {
        display: flex;
    }

    .donut-conducta-item {
        width: 100%; /* Un elemento por fila en pantallas pequeñas */
    }

    .custom-date-filter-row .date-inputs {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .custom-date-filter-row .form-group {
        width: 100%;
    }
    
    .custom-date-filter-row .btn-sm {
        margin-top: 0.5rem;
    }

    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}


/* Fix FORZADO para reproductor de audio en móviles */
#audioPlayer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 40px !important; /* Altura fija para evitar desbordamiento */
}

#videoPlayer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Contenedor del reproductor */
.media-player {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Específico para móviles */
@media (max-width: 768px) {
    .media-player {
        padding: 0.5rem;
        max-width: 100%;
        overflow: hidden;
    }
    
    #audioPlayer {
        width: 100% !important;
        max-width: 100% !important;
        height: 35px !important;
        /* transform: scale(0.9);  */
        transform-origin: left center;
    }
    
    /* Ajustar header para móvil */
    .media-header {
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .media-file-info {
        order: 1;
    }
    
    .media-actions {
        order: 2;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .media-file-info span:first-child {
        font-size: 0.8rem;
        word-break: break-all;
        overflow-wrap: anywhere;
        hyphens: auto;
    }
    
    .change-file-btn,
    .delete-file-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
        flex: 1;
        margin: 0 0.1rem;
    }
}

@media (max-width: 480px) {
    #audioPlayer {
        /* transform: scale(0.85) !important; */
        height: 32px !important;
    }
    
    .media-player {
        padding: 0.4rem;
    }
    
    .media-file-info span:first-child {
        font-size: 0.75rem;
        line-height: 1.1;
    }
    
    .change-file-btn,
    .delete-file-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
}

/* Para pantallas muy pequeñas, ocultar algunos controles del audio nativo */
@media (max-width: 360px) {
    #audioPlayer {
        /* transform: scale(0.8) !important; */
        height: 30px !important;
    }
}



/* Estilos para botones de avance/retroceso */
#audioRewind10,
#audioForward10,
#videoRewind10,
#videoForward10 {
    font-size: 0.8rem;
    min-width: 35px;
}

.media-controls {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .media-controls {
        gap: 0.3rem;
    }
    
    #audioRewind10,
    #audioForward10,
    #videoRewind10,
    #videoForward10 {
        font-size: 0.7rem;
        min-width: 30px;
        padding: 0.2rem 0.3rem;
    }
}

/* Estilos para secciones del historial en perfiles diferidos */
.historial-section {
    margin-bottom: 2rem;
    /* border: 1px solid #e2e8f0; */
    border-radius: 8px;
    overflow: hidden;
    /* background: #ffffff; */
}

.historial-section-header {
    /* background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); */
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.historial-section-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: -1.5rem;
}

.section-icon {
    font-size: 1.2rem;
}

.historial-section-content {
    padding: 0;
}

.historial-section-content .registro-item {
    border-bottom: 1px solid #f1f5f9;
}

.historial-section-content .registro-item:last-child {
    border-bottom: none;
}

/* Estilos para el modal de limpiar historial - sección de fuentes */
#clearHistorySourceFilter {
    margin-top: 0.5rem;
}

#clearHistorySourceFilter .checkbox-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
}

#clearHistorySourceFilter .checkbox-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
}

#clearHistorySourceFilter .checkbox-item input[type="checkbox"] {
    margin-right: 0.5rem;
}

#clearHistorySourceFilter .select-all-option {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0.5rem;
}

#clearHistorySourceFilter .select-all-option label {
    font-weight: 600;
    color: #334155;
}


/* Estilos para el filtro por fuente en estadísticas */
.source-filter-container {
    margin-left: 1rem;
}

.source-filter-container .multi-select-container {
    min-width: 200px;
    position: relative;
}

.source-filter-container .selected-items {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.5rem;
    min-height: 38px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    cursor: pointer;
    font-size: 0.875rem;
}

.source-filter-container .selected-items:hover {
    border-color: #9ca3af;
}

.source-filter-container .selected-item {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
}

.source-filter-container .remove-selected {
    cursor: pointer;
    color: #6b7280;
    font-weight: bold;
    margin-left: 0.25rem;
}

.source-filter-container .remove-selected:hover {
    color: #dc2626;
}

.source-filter-container .placeholder {
    color: #6b7280;
    font-style: italic;
}

.source-filter-container .multi-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

.source-filter-container .multi-select-dropdown.show {
    display: block;
}

.source-filter-container .select-all-option {
    padding: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.source-filter-container .select-all-option label {
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.source-filter-container .dropdown-option {
    padding: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.source-filter-container .dropdown-option:last-child {
    border-bottom: none;
}

.source-filter-container .dropdown-option label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.source-filter-container .dropdown-option:hover {
    background: #f9fafb;
}

.source-filter-container input[type="checkbox"] {
    margin: 0;
}

/* Responsive para dispositivos móviles */
@media (max-width: 768px) {
    .stats-filters {
        flex-direction: column;
        gap: 1rem;
    }
    
    .source-filter-container {
        margin-left: 0;
        margin-top: 0.5rem;
    }
    
    .source-filter-container .multi-select-container {
        min-width: 100%;
    }
}

/* Mejoras para los controles de estadísticas en perfiles diferidos */
.stats-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: flex-start;
}

.stats-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.stats-sort {
    flex-shrink: 0;
    min-width: 100%;
}

/* Ajustes específicos para el filtro por fuente */
.source-filter-container {
    margin-left: 0;
    flex: 1;
    min-width: 250px;
}

.source-filter-container .multi-select-container {
    min-width: 100%;
    width: 100%;
}

/* Ajustes para el selector temporal cuando está visible */
.stats-filters .select-with-icon {
    flex: 1;
    min-width: 150px;
}

.stats-filters .select-with-icon select {
    width: 100%;
}

/* Responsive para tablets */
@media (max-width: 1024px) {
    .stats-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .stats-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .stats-sort {
        min-width: 100%;
    }
    
    .source-filter-container {
        min-width: 100%;
    }
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .stats-controls-wrapper {
        padding: 1rem;
        background: #f8fafc;
        border-radius: 8px;
        margin-bottom: 1.5rem;
    }
    
    .stats-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        align-items: start;
    }
    
    .stats-filters {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 0;
    }
    
    .stats-sort {
        grid-column: 1 / -1;
        min-width: 100%;
    }
    
    /* Cuando solo hay filtro por fuente (perfiles diferidos) */
    .stats-filters:has(.source-filter-container):not(:has(.select-with-icon)) {
        grid-template-columns: 1fr;
    }
    
    .source-filter-container {
        min-width: 100%;
        margin-left: 0;
    }
    
    .source-filter-container .multi-select-container {
        min-width: 100%;
    }
    
    .source-filter-container .selected-items {
        /* min-height: 44px; */
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .source-filter-container .selected-item {
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }
    
    /* Ajustar dropdown en móviles */
    .source-filter-container .multi-select-dropdown {
        max-height: 180px;
        font-size: 0.875rem;
    }
    
    .source-filter-container .dropdown-option {
        padding: 0.75rem;
    }
    
    .source-filter-container .select-all-option {
        padding: 0.75rem;
    }
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 480px) {
    .stats-controls {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .stats-filters {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .source-filter-container .selected-items {
        /* min-height: 48px; */
        padding: 0.5rem;
    }
    
    .source-filter-container .dropdown-option {
        padding: 1rem;
    }
    
    .source-filter-container .select-all-option {
        padding: 1rem;
    }
}

/* Mejorar la apariencia del subtítulo */
.subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
    margin-bottom: 0;
    text-align: center;
}

@media (max-width: 768px) {
    .subtitle {
        font-size: 0.8rem;
        text-align: left;
        margin-top: 0.75rem;
    }
}

/* Estilos para las etiquetas de los filtros */
.filter-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
    .filter-label {
        font-size: 0.8rem;
        margin-bottom: 0.375rem;
    }
}

/* Mejorar el espaciado en los controles */
.select-with-icon,
.stats-sort,
.source-filter-container {
    display: flex;
    flex-direction: column;
}

/* .select-with-icon select,
.stats-sort select {
    margin-top: 0.25rem;
} */


/* Estilos mejorados para historial en perfiles diferidos */
.historial-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* Cuando se oculta el filtro temporal, mejorar el layout */
.filter-controls:has(.time-period-filter[style*="display: none"]) {
    justify-content: space-between;
}

/* Responsive para historial */
@media (max-width: 768px) {
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .search-box,
    .filter-dropdown,
    .time-period-filter,
    select {
        width: 100%;
    }
    
    .clear-button-row {
        margin-top: 1rem;
    }
}

/* Mejorar spacing cuando no hay filtro temporal */
@media (max-width: 768px) {
    .historial-controls:has(.time-period-filter[style*="display: none"]) .filter-controls {
        gap: 1rem;
    }
}

.session-name-container {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.session-name-container label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.session-name-container .help-text {
    color: #6c757d;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.session-filter-container {
    margin-bottom: 1rem;
}

.session-filter-container .filter-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.sessions-section {
    border-top: 1px solid #e9ecef;
    padding-top: 2rem;
}

.sessions-list {
    max-height: 400px;
    overflow-y: auto;
}

.session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.session-item:hover {
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.session-item.active {
    border-color: #007bff;
    background-color: #e7f3ff;
}

.session-info {
    flex: 1;
}

.session-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.session-name {
    font-weight: 600;
    color: #212529;
}

.session-source {
    font-size: 1.1rem;
}

.session-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.session-actions {
    display: flex;
    gap: 0.5rem;
}

.session-actions .edit-btn,
.session-actions .delete-btn {
    padding: 0.375rem 0.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.session-actions .edit-btn {
    /* background-color: #17a2b8; */
    color: white;
}

.session-actions .edit-btn:hover {
    background-color: #138496;
}

.session-actions .delete-btn {
    /* background-color: #dc3545; */
    color: white;
}

.session-actions .delete-btn:hover {
    background-color: #c82333;
}

.session-active {
    color: #28a745;
    font-weight: 600;
}

/* Estilos para secciones de sesiones en historial */
.session-subsection {
    /* margin-left: 1.5rem; */
    margin-bottom: 1rem;
    /* border-left: 3px solid #007bff; */
    padding-left: 1rem;
}

.session-subsection-header {
    margin-bottom: 0.5rem;
}

.session-subsection-header h4 {
    font-size: 0.95rem;
    color: #495057;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.session-icon {
    font-size: 0.875rem;
}

.session-subsection-content {
    /* background-color: #f8f9fa; */
    border-radius: 6px;
    padding: 0.5rem;
}

/* Responsivo */
@media (max-width: 768px) {
    .session-details {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .session-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .session-actions {
        align-self: flex-end;
    }
}

.session-name-input {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    /* font-size: 16px !important; */
    border: 2px solid #e1e5e9 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.session-name-input:focus {
    outline: none !important;
    border-color: #4CAF50 !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1) !important;
    background: #fafafa !important;
}

.session-name-input::placeholder {
    color: #9ca3af !important;
    font-style: italic !important;
}

.session-name-preview {
    margin-top: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #0ea5e9;
    border-radius: 10px;
    animation: slideIn 0.3s ease-out;
}

.session-name-preview .preview-label {
    font-weight: 600;
    color: #0369a1;
    font-size: 14px;
}

.session-name-preview .preview-text {
    display: block;
    margin-top: 4px;
    color: #0c4a6e;
    font-size: 15px;
    font-weight: 500;
    word-break: break-word;
}

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

/* Responsivo para móviles */
@media (max-width: 768px) {
    .session-name-container {
        width: 100%;
        margin: 0;
    }
    
    .session-name-input {
        /* font-size: 16px !important; Evita zoom en iOS */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .session-name-preview {
        margin-left: 0;
        margin-right: 0;
    }
}

.session-name-preview.auto-generated {
    background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
    border-color: #3b82f6;
}

.session-name-preview.auto-generated .preview-label::after {
    content: " (generado automáticamente)";
    font-weight: 400;
    font-size: 12px;
    color: #6b7280;
}

.sessions-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}

.sessions-title {
    margin: 0 !important;
    font-size: 1.25rem;
    /* font-weight: 600; */
    color: #333;
}

.reset-counter-btn {
    padding: 8px 16px !important;
    font-size: 14px !important;
    border-radius: 2rem !important;
    /* background: #6c757d !important; */
    background: #ead35f;
    /* border: 1px solid #6c757d !important; */
    border:none;
    /* color: white !important; */
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap;
    font-weight: 500;
}

.reset-counter-btn:hover {
    background: #5a6268 !important;
    border-color: #545b62 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.reset-counter-btn:active {
    transform: translateY(0) !important;
    background: #545b62 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Para móviles */
@media (max-width: 768px) {
    .sessions-header-container {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .sessions-title {
        text-align: center;
    }
    
    .reset-counter-btn {
        width: 100%;
        text-align: center;
        justify-self: stretch;
    }
}

/* Para tablets */
@media (max-width: 992px) and (min-width: 769px) {
    .sessions-header-container {
        gap: 15px;
    }
    
    .reset-counter-btn {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }
}

.stats-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
}

.stats-filters > * {
    width: 100%;
    min-width: 0;
}

/* Fila 1: Período */
.select-with-icon {
    order: 1;
}

/* Fila 2: Fuentes */
.source-filter-container {
    order: 2;
}

/* Fila 3: Sesiones */
.session-filter-container {
    order: 3;
}

/* Asegurar que las etiquetas y controles estén alineados */
.stats-filters .filter-label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.stats-filters .filter-controls,
.stats-filters .multi-select-container {
    width: 100%;
}

.stats-filters .multi-select-container {
    min-height: 38px;
}

/* Ajustes responsivos opcionales para pantallas muy grandes */
@media (min-width: 1200px) {
    .stats-filters {
        /* grid-template-columns: repeat(3, 1fr); */
        gap: 1rem;
        align-items: start;
    }
    
    .select-with-icon {
        order: unset;
    }
    
    .source-filter-container {
        order: unset;
    }
    
    .session-filter-container {
        order: unset;
    }
}

.stats-controls-wrapper {
    width: 100%;
    margin-bottom: 1.5rem;
}

.stats-controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Separar los filtros del ordenar */
.stats-sort {
    display: flex;
    /* align-items: center; */
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

.stats-sort .filter-label {
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
}

.stats-sort .filter-controls {
    flex: 1;
    min-width: 120px;
}

.stats-controls-wrapper .subtitle {
    margin: 0.75rem 0 0 0;
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
    text-align: center;
}

/* Estilos para el modal de perfiles de muestra */
.sample-profiles-content {
    max-height: 70vh;
    overflow-y: auto;
}

/* .profile-preview-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.profile-info {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1.5rem;
} */

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-label {
    font-weight: 600;
    color: #333;
}

.info-value {
    color: #666;
    text-align: right;
    flex: 1;
    margin-left: 1rem;
}

.conductas-selection {
    margin-top: 1rem;
}

.selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.selection-header h4 {
    margin: 0;
    font-size: 1rem;
}

.selection-controls {
    display: flex;
    gap: 0.5rem;
}

.sample-conductas-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0.75rem;
    background: #ffffff;
}

.sample-conducta-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.sample-conducta-item:last-child {
    margin-bottom: 0;
}

.sample-conducta-item:hover {
    background: #f0f0f0;
}

.sample-conducta-item input[type="checkbox"] {
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.conducta-item-info {
    flex: 1;
}

.conducta-item-name {
    font-weight: 500;
    margin-bottom: 0.125rem;
    color: #333;
}

.conducta-item-type {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    background: #f0f0f0;
    display: inline-block;
}

.conducta-item-type.continua {
    background: #fff5f2;
    color: #ff6b35;
}

.conducta-item-type.discreta {
    background: #f0fff4;
    color: #4CAF50;
}

.loading-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}

.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #4CAF50;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .selection-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .selection-controls {
        align-self: flex-end;
    }
    
    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .info-value {
        text-align: left;
        margin-left: 0;
    }
}

.backup-reminder-modal .modal-content {
    max-width: 450px;
    text-align: center;
}

.backup-reminder-modal h3 {
    color: #4CAF50;
    margin-bottom: 1rem;
}

.backup-reminder-modal p {
    margin-bottom: 1rem;
    line-height: 1.5;
}

.backup-reminder-modal .modal-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.backup-reminder-modal .btn-secondary {
    background-color: #6c757d;
    color: white;
}

.backup-reminder-modal .btn-secondary:hover {
    background-color: #5a6268;
}

.session-warning {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: none;
    font-weight: 500;
    line-height: 1.4;
}

/* Estilos para estadísticas numéricas */
.estadisticas-numericas-container {
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 1rem;
}

.estadistica-numerica-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.estadistica-numerica-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.estadistica-numerica-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.estadistica-numerica-count {
    background: #0850c6;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.stat-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.stat-value {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.valores-individuales {
    border-top: 1px solid #e2e8f0;
    padding-top: 0.75rem;
}

.valores-header {
    margin-bottom: 0.5rem;
}

.valores-toggle {
    color: #3b82f6;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    user-select: none;
    transition: color 0.2s ease;
}

.valores-toggle:hover {
    color: #2563eb;
}

.valores-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.valor-individual {
    background: #f1f5f9;
    color: #475569;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
}

/* Responsive para dispositivos móviles */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .estadistica-numerica-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .estadistica-numerica-title {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .estadistica-numerica-card {
        padding: 0.75rem;
    }
}

/* Barra de footer permanente para patrocinadores */
.sponsor-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    /* background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); */
    background-color:#ffe676;
    border-top: 1px solid #cbd5e1;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sponsor-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* max-width: 1200px; */
    padding: 0 1rem;
    margin-top: 0.5rem;
    gap:0.5rem;
}

.sponsor-text {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 650;
    text-align: center;
    letter-spacing: 0.025em;
    cursor: pointer;
    transition: color 0.2s ease;
}

.sponsor-text:hover {
    color: #475569;
}

/* Ajustar el padding del contenedor principal para compensar la barra */
.container {
    padding-bottom: 35px;
}

/* Ajustar el footer existente */
.footer {
    margin-bottom: 35px;
}

/* Responsive para dispositivos móviles */
@media (max-width: 768px) {
    .sponsor-footer {
        height: 40px;
    }
    
    .sponsor-text {
        font-size: 0.75rem;
    }
    
    .container {
        padding-bottom: 32px;
    }
    
    .footer {
        margin-bottom: 32px;
    }
}

@media (max-width: 480px) {
    .sponsor-footer {
        height: 40px;
    }
    
    .sponsor-text {
        font-size: 0.7rem;
    }
    
    .container {
        padding-bottom: 30px;
    }
    
    .footer {
        margin-bottom: 30px;
    }
}

/* Asegurar que no interfiera con modales */
.modal {
    z-index: 1000;
}

/* Ajustar el botón de apoyo flotante para que no se superponga */
.support-floating-btn {
    bottom: 45px !important;
}

@media (max-width: 768px) {
    .support-floating-btn {
        bottom: 42px !important;
    }
}

@media (max-width: 480px) {
    .support-floating-btn {
        bottom: 40px !important;
    }
}

/* Estilos para campos de opciones y checkbox */
.estadistica-opciones-card,
.estadistica-checkbox-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.opciones-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.opcion-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

.opcion-item.opcion-vacia {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.opcion-item.opcion-normal:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.opcion-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 0.5rem; */
}

.opcion-nombre {
    font-weight: 500;
    color: #1e293b;
    flex: 1;
}

.opcion-stats {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    margin-left: 0.5rem;
    margin-top: 0.15rem;
}

.opcion-barra {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.opcion-progreso {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1e40af);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.checkbox-progreso {
    background: linear-gradient(90deg, #10b981, #059669);
}

.opciones-detalle {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.opcion-detalle-item {
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 0.875rem;
    margin:0.5rem;
}

.opcion-detalle-item.sin-respuesta {
    background: #fef2f2;
    color: #991b1b;
}

/* Responsive para opciones */
@media (max-width: 768px) {
    .opcion-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .opcion-stats {
        font-size: 0.8rem;
    }
}

/* Estilos específicos para análisis de checkbox */
.patrones-seleccion,
.checkbox-especiales,
.opciones-individuales {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.patrones-titulo,
.especiales-titulo,
.opciones-titulo {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.patrones-grid,
.especiales-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.patron-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem;
    transition: all 0.2s ease;
}

.patron-item.patron-vacio {
    background: #fef2f2;
    border-color: #fecaca;
}

.patron-item.patron-unico {
    background: #f0f9ff;
    border-color: #bae6fd;
}

.patron-item.patron-multiple {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.patron-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.patron-icono {
    font-size: 1rem;
}

.patron-nombre {
    font-weight: 500;
    color: #1e293b;
    flex: 1;
}

.patron-stats {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
}

.patron-barra {
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
}

.patron-progreso {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.patron-vacio .patron-progreso {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.patron-unico .patron-progreso {
    background: linear-gradient(90deg, #3b82f6, #1e40af);
}

.patron-multiple .patron-progreso {
    background: linear-gradient(90deg, #10b981, #059669);
}

.especial-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.especial-item.destacado {
    background: #f0fdf4;
    border-color: #bbf7d0;
    font-weight: 600;
}

.especial-label {
    font-size: 0.875rem;
    color: #374151;
}

.especial-valor {
    font-size: 0.875rem;
    font-weight: 600;
    color: #059669;
}

.opcion-individual {
    background: #fafafa;
    border-color: #e5e7eb;
}

.checkbox-individual-progreso {
    background: linear-gradient(90deg, #6366f1, #4f46e5);
}

.detalle-seccion {
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 6px;
}

.detalle-seccion:last-child {
    margin-bottom: 0;
}

/* Responsive para checkbox */
@media (max-width: 768px) {
    .patron-info {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .especial-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* Estilos para mostrar/ocultar valores con clase en lugar de display inline */
.valores-lista {
    display: none;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
    animation: fadeIn 0.2s ease-in-out;
}

.valores-lista.show {
    display: flex !important;
}

.opciones-detalle {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    animation: fadeIn 0.2s ease-in-out;
}

.opciones-detalle.show {
    display: flex !important;
}

/* Animación suave para mostrar/ocultar */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Asegurar que el display flex funcione correctamente */
.valores-lista.show {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.opciones-detalle.show {
    display: flex !important;
    flex-direction: column;
    gap: 0.25rem;
}

.donation-amounts {
    /* display: grid; */
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.donation-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 12px 8px; */
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    /* min-height: 60px; */
    justify-content: center;
}

.donation-btn .amount {
    font-weight: 600;
    font-size: 16px;
}

.donation-btn .label {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 2px;
}

.donation-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

@media (max-width: 480px) {
    .donation-amounts {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .donation-btn {
        /* flex-direction: row; */
        justify-content: space-between;
        /* min-height: 48px; */
        /* padding: 12px 16px; */
    }
    
    .donation-btn .label {
        margin-top: 0;
        margin-left: 8px;
    }
}

.header-logo {
    cursor: pointer;
    transition: opacity 0.1s ease;
}

.header-logo.blinking {
    pointer-events: none; /* Evita múltiples clics durante la animación */
}

/* Animación de parpadeo */
@keyframes blink-eyes {
    0% { opacity: 1; }
    25% { opacity: 0; }
    26% { opacity: 1; }
    50% { opacity: 1; }
    75% { opacity: 0; }
    76% { opacity: 1; }
    100% { opacity: 1; }
}

.blink-animation {
    animation: blink-eyes 0.6s ease-in-out;
}.load-more-container {
    margin: 20px auto;
    max-width: 600px;
    text-align: center;
}

.load-more-trigger {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 15px;
}

.load-more-trigger:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.load-more-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.load-more-text {
    font-weight: 500;
    color: #495057;
    font-size: 1rem;
}

.load-more-count {
    color: #6c757d;
    font-size: 0.85rem;
}

.load-more-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    color: #6c757d;
    margin: 0 15px;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .load-more-trigger {
        margin: 0 10px;
        padding: 15px;
    }
    
    .load-more-text {
        font-size: 0.9rem;
    }
    
    .load-more-count {
        font-size: 0.8rem;
    }
}

.modal-content h3 {
    margin: 0 0 25px 0;
    color: #333;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
}