/*=============================================
=        Global Color Variables (:root)       =
=============================================*/
:root {
  --ct-pagination-padding-x: 0.35rem;
  /* Primary palette */
  --color-primary: #223976; /* Azul oscuro principal */
  --color-primary-dark: #0c204c; /* Azul muy oscuro */

  /* Secondary palette */
  --color-secondary: #254a7e; /* Azul púrpura secundario */

  /* Accent palette */
  --color-accent: #2fbde0; /* Cian brillante */
  --color-accent-dark: #2852af; /* Azul acento */
  --color-accent-alt: #06add9; /* Cian alternativo */

  --color-kpi-1-bg: #c7eff9;
  --color-kpi-2-bg: #e1eef4;

  /* Informational / Link */
  --color-info: #00adbf; /* Azul turquesa */

  /* Success / Highlights */
  --color-success-2: #046c89;
  --color-success: #2ec1d3; /* Verde azulado */
  --color-success-dark: #0072b8; /* Azul intenso */
  --color-success-light: #71c5dd; /* Verde claro */

  /* Specific concepts */
  --color-glucose: #184d87;
  --color-body: #40cce4;
  --color-lipid: #1a7bc2;

  /* Neutral grays */
  --color-background: #eeeff2; /* Fondo general */
  --color-neutral-lightest: #f0ffff; /* Blanco con tinte aqua */
  --color-neutral-light: #e5e5e5; /* Gris muy claro */
  --color-neutral-mid: #c6c6c5; /* Gris claro */
  --color-neutral-base: #b1b1b1; /* Gris medio */

  /* Deficiency state */
  --color-deficiency-bg: #ebbcbe; /* Rosa pálido */
  --color-deficiency-text: #6b030f; /* Rojo oscuro */

  /* Excess state */
  --color-excess-bg: #a5dfb4; /* Verde pálido */
  --color-excess-text: #034c11; /* Verde oscuro */

  /* Yellow state */
  --color-yellow-bg: #ede7c8; /* Amarillo pálido */
  --color-yellow-text: #84732c; /* Amarillo oscuro */

  /* Grays (Legacy?) */
  --color-gray-light: #c6c6c5;
  --color-gray: #b1b1b1;
  --color-gray-dark: #868686;

  /* Very light backgrounds */
  --color-white-light: #f0ffff;
  --color-white-blue: #e9f1ff;
  --color-blue-light: #82dded;

  --color-blue-gray: #6e8192;

  --color-icons: #6bc6dd;

  /* New palette */
  --color-bright-turquoise: #0dadd9;
  --color-sapphire-blue: #274b7f;
  --color-midnight-blue: #1e2648;
  --color-royal-blue: #2f54a2;
  --color-sky-blue: #8bd0e3;
  --color-electric-blue: #0673b9;
}

/*=============================================
=        Existing Color Utility Classes       =
=============================================*/

.btn:focus,
.btn:focus-visible {
  /* Desactivamos el brillo de Bootstrap */
  box-shadow: none;

  /* Establecemos el color de borde que deseamos */
  border-color: #0d6efd; /* Ejemplo: color azul (primary) */

  /* Opcional: hacer el borde un poco más grueso en foco */
  /* border-width: 2px; */
}

.btn:disabled {
  border: none !important;
}

/*----------  Text Color  ----------*/
.text-icons {
  color: var(--color-icons);
  stroke: var(--color-icons);
  fill: var(--color-icons);
}

.text-primary {
  color: var(--color-primary) !important;
}

.btn-primary-color {
  background-color: var(--color-primary) !important;
}
.btn-primary-color:hover {
  background-color: var(--color-primary-dark) !important;
}
.btn-primary-color:focus {
  border: 1px solid var(--color-primary) !important;
  background-color: var(--color-white-light) !important;
  color: var(--color-primary) !important;
}

.text-primary-dark {
  color: var(--color-primary-dark) !important;
}

/* para evitar conflictos con bootstrap */
.text-secondary-color {
  color: var(--color-secondary) !important;
}

.text-accent {
  color: var(--color-accent);
}
.text-accent-dark {
  color: var(--color-accent-dark);
}
.text-accent-alt {
  color: var(--color-accent-alt);
}

.text-info {
  color: var(--color-info);
}

.text-kpi-view {
  color: var(--color-success);
}
.text-kpi-person {
  color: #0673b9;
}
.text-kpi-calendar {
  color: #2f54a2;
}

.text-success-dark {
  color: var(--color-success-dark);
}
.text-success-light {
  color: var(--color-success-light);
}

.text-neutral-base {
  color: var(--color-neutral-base);
}
.text-neutral-mid {
  color: var(--color-neutral-mid);
}
.text-neutral-light {
  color: var(--color-neutral-light);
}
.text-neutral-lightest {
  color: var(--color-neutral-lightest);
}

.text-deficiency {
  color: var(--color-deficiency-text);
}
.text-excess {
  color: var(--color-excess-text);
}

/*----------  Background Color  ----------*/
.bg-primary-app {
  background-color: var(--color-primary) !important;
}
.bg-primary-dark {
  background-color: var(--color-primary-dark);
}

.bg-secondary-color {
  background-color: var(--color-secondary);
}

.bg-accent {
  background-color: var(--color-accent);
}
.bg-accent-dark {
  background-color: var(--color-accent-dark);
}
.bg-accent-alt {
  background-color: var(--color-accent-alt);
}

.bg-kpi-1 {
  background-color: var(--color-kpi-1-bg);
}
.bg-kpi-2 {
  background-color: var(--color-kpi-2-bg);
}

.bg-info {
  background-color: var(--color-info);
}

.bg-success-app {
  background-color: var(--color-success);
}
.bg-success-dark {
  background-color: var(--color-success-dark);
}
.bg-success-light {
  background-color: var(--color-success-light) !important;
}

.bg-background {
  background-color: var(--color-background);
}

.bg-neutral-base {
  background-color: var(--color-neutral-base);
}
.bg-neutral-mid {
  background-color: var(--color-neutral-mid);
}
.bg-neutral-light {
  background-color: var(--color-neutral-light);
}
.bg-neutral-lightest {
  background-color: var(--color-neutral-lightest);
}

.bg-deficiency {
  background-color: #fce0e2;
}
.bg-excess {
  background-color: #d3f4d9;
}

.bg-white-light {
  background-color: var(--color-white-light);
}
.bg-white-blue {
  background-color: var(--color-white-blue);
}

/*----------  Border Color  ----------*/
/* NOTA: Se consolidaron las dos secciones de bordes que estaban duplicadas */
.border-primary {
  border: 1px solid var(--color-primary);
}
.border-primary-dark {
  border: 1px solid var(--color-primary-dark);
}

.border-secondary {
  border: 1px solid var(--color-secondary);
}

.border-accent {
  border: 1px solid var(--color-accent);
}
.border-accent-dark {
  border: 1px solid var(--color-accent-dark);
}
.border-accent-alt {
  border: 1px solid var(--color-accent-alt);
}

.border-info {
  border: 1px solid var(--color-info);
}

.border-success {
  border: 1px solid var(--color-success) !important;
}
.border-kpi-view {
  border: 1px solid #2ec1d3 !important;
}
.border-kpi-person {
  border: 1px solid #0673b9 !important;
}
.border-kpi-calendar {
  border: 1px solid #2f54a2 !important;
}
.border-success-dark {
  border: 1px solid var(--color-success-dark);
}
.border-success-light {
  border: 1px solid var(--color-success-light);
}

.border-neutral-base {
  border: 1px solid var(--color-neutral-base);
}
.border-neutral-mid {
  border: 1px solid var(--color-neutral-mid);
}
.border-neutral-light {
  border: 1px solid var(--color-neutral-light);
}
.border-neutral-lightest {
  border: 1px solid var(--color-neutral-lightest);
}

.border-deficiency {
  border: 1px solid var(--color-deficiency-text);
}
.border-excess {
  border: 1px solid var(--color-excess-text);
}

.border-gray {
  border: 1px solid var(--color-gray);
}
.border-gray-light {
  border: 1px solid var(--color-gray-light);
}

.border-white-light {
  border: 1px solid var(--color-white-light);
}

/*=============================================
=     Generated Missing Utility Classes       =
=============================================*/
/* NOTA: Estas clases se generaron automáticamente para completar 
  las variables de :root que no tenían utilidades de texto, fondo o borde.
*/

/* --color-kpi-1-bg */
.text-kpi-1-bg {
  color: var(--color-kpi-1-bg);
}
.bg-kpi-1-bg {
  background-color: var(--color-kpi-1-bg);
}
.border-kpi-1-bg {
  border: 1px solid var(--color-kpi-1-bg);
}

/* --color-kpi-2-bg */
.text-kpi-2-bg {
  color: var(--color-kpi-2-bg);
}
.bg-kpi-2-bg {
  background-color: var(--color-kpi-2-bg);
}
.border-kpi-2-bg {
  border: 1px solid var(--color-kpi-2-bg);
}

/* --color-success-2 */
.text-success-2 {
  color: var(--color-success-2);
}
.bg-success-2 {
  background-color: var(--color-success-2);
}
.border-success-2 {
  border: 1px solid var(--color-success-2);
}

/* --color-glucose */
.text-glucose {
  color: var(--color-glucose);
}
.bg-glucose {
  background-color: var(--color-glucose);
}
.border-glucose {
  border: 1px solid var(--color-glucose);
}

/* --color-body */
.text-body-color {
  /* Se usa text-body-color para evitar conflicto con la clase 'body' de Bootstrap */
  color: var(--color-body);
}
.bg-body-color {
  background-color: var(--color-body);
}
.border-body-color {
  border: 1px solid var(--color-body);
}

/* --color-lipid */
.text-lipid {
  color: var(--color-lipid);
}
.bg-lipid {
  background-color: var(--color-lipid);
}
.border-lipid {
  border: 1px solid var(--color-lipid);
}

/* --color-background (ya tiene bg) */
.text-background {
  color: var(--color-background);
}
.border-background {
  border: 1px solid var(--color-background);
}

/* --color-deficiency-bg */
.text-deficiency-bg {
  color: var(--color-deficiency-bg);
}
.bg-deficiency-bg {
  background-color: var(--color-deficiency-bg);
}
.border-deficiency-bg {
  border: 1px solid var(--color-deficiency-bg);
}

/* --color-deficiency-text (ya tiene text, border) */
.bg-deficiency-text {
  background-color: var(--color-deficiency-text);
}

/* --color-excess-bg */
.text-excess-bg {
  color: var(--color-excess-bg);
}
.bg-excess-bg {
  background-color: var(--color-excess-bg);
}
.border-excess-bg {
  border: 1px solid var(--color-excess-bg);
}

/* --color-excess-text (ya tiene text, border) */
.bg-excess-text {
  background-color: var(--color-excess-text);
}

/* --color-yellow-bg */
.text-yellow-bg {
  color: var(--color-yellow-bg);
}
.bg-yellow-bg {
  background-color: var(--color-yellow-bg);
}
.border-yellow-bg {
  border: 1px solid var(--color-yellow-bg);
}

/* --color-yellow-text */
.text-yellow-text {
  color: var(--color-yellow-text);
}
.bg-yellow-text {
  background-color: var(--color-yellow-text);
}
.border-yellow-text {
  border: 1px solid var(--color-yellow-text);
}

/* --color-gray-light (ya tiene border) */
.text-gray-light {
  color: var(--color-gray-light);
}
.bg-gray-light {
  background-color: var(--color-gray-light);
}

/* --color-gray (ya tiene border) */
.text-gray {
  color: var(--color-gray);
}
.bg-gray {
  background-color: var(--color-gray);
}

/* --color-gray-dark */
.text-gray-dark {
  color: var(--color-gray-dark);
}
.bg-gray-dark {
  background-color: var(--color-gray-dark);
}
.border-gray-dark {
  border: 1px solid var(--color-gray-dark);
}

/* --color-white-light (ya tiene bg, border) */
.text-white-light {
  color: var(--color-white-light);
}

/* --color-white-blue (ya tiene bg) */
.text-white-blue {
  color: var(--color-white-blue);
}
.border-white-blue {
  border: 1px solid var(--color-white-blue);
}

/* --color-blue-gray */
.text-blue-gray {
  color: var(--color-blue-gray);
}
.bg-blue-gray {
  background-color: var(--color-blue-gray);
}
.border-blue-gray {
  border: 1px solid var(--color-blue-gray);
}

/* --color-icons (ya tiene text) */
.bg-icons {
  background-color: var(--color-icons);
}
.border-icons {
  border: 1px solid var(--color-icons);
}

/* --color-bright-turquoise */
.text-bright-turquoise {
  color: var(--color-bright-turquoise) !important;
}
.bg-bright-turquoise {
  background-color: var(--color-bright-turquoise) !important;
}
.border-bright-turquoise {
  border: 1px solid var(--color-bright-turquoise) !important;
}
.btn-bright-turquoise-outline {
  border: 1px solid var(--color-bright-turquoise);
  color: var(--color-bright-turquoise) !important;
}
.btn-bright-turquoise-outline:hover {
  background-color: var(--color-bright-turquoise);
  border: 1px solid var(--color-bright-turquoise);
  color: var(--color-white-light) !important;
}
.btn-bright-turquoise-outline:focus {
  color: var(--color-white-light) !important;
  background-color: var(--color-bright-turquoise) !important;
}

/* --color-sapphire-blue */
.text-sapphire-blue {
  color: var(--color-sapphire-blue) !important;
}
.bg-sapphire-blue {
  background-color: var(--color-sapphire-blue) !important;
}
.border-sapphire-blue {
  border: 1px solid var(--color-sapphire-blue) !important;
}

.btn-sapphire-blue {
  background-color: var(--color-sapphire-blue) !important;
  color: var(--color-white-light) !important;
}
.btn-sapphire-blue:hover {
  background-color: var(--color-sapphire-blue) !important;
  color: var(--color-white-light) !important;
  border: 1px solid var(--color-sapphire-blue);
}
.btn-sapphire-blue:focus {
  background-color: var(--color-white-light) !important;
  color: var(--color-sapphire-blue) !important;
  border: 1px solid var(--color-sapphire-blue);
}

/* --color-midnight-blue */
.text-midnight-blue {
  color: var(--color-midnight-blue) !important;
}
.bg-midnight-blue {
  background-color: var(--color-midnight-blue) !important;
}
.border-midnight-blue {
  border: 1px solid var(--color-midnight-blue);
}

.btn-midnight-blue {
  background-color: var(--color-midnight-blue) !important;
  color: var(--color-white-light) !important;
}
.btn-midnight-blue:hover {
  background-color: var(--color-midnight-blue) !important;
  color: var(--color-white-light) !important;
  border: 1px solid var(--color-midnight-blue);
}
.btn-midnight-blue:focus {
  background-color: var(--color-white-light) !important;
  color: var(--color-midnight-blue) !important;
  border: 1px solid var(--color-midnight-blue);
}

/* --color-royal-blue */
.text-royal-blue {
  color: var(--color-royal-blue) !important;
}
.bg-royal-blue {
  background-color: var(--color-royal-blue) !important;
}
.border-royal-blue {
  border: 1px solid var(--color-royal-blue) !important;
}
.btn-royal-blue {
  background-color: var(--color-royal-blue) !important;
  color: var(--color-white-light) !important;
}
.btn-royal-blue:hover {
  background-color: var(--color-royal-blue) !important;
  color: var(--color-white-light) !important;
  border: 1px solid var(--color-royal-blue);
}
.btn-royal-blue:focus {
  background-color: var(--color-white-light) !important;
  color: var(--color-royal-blue) !important;
  border: 1px solid var(--color-royal-blue);
}

/* --color-sky-blue */
.text-sky-blue {
  color: var(--color-sky-blue) !important;
}
.bg-sky-blue {
  background-color: var(--color-sky-blue) !important;
}
.border-sky-blue {
  border: 1px solid var(--color-sky-blue) !important;
}

.btn-sky-blue {
  background-color: var(--color-sky-blue) !important;
  color: var(--color-white-light) !important;
}
.btn-sky-blue:hover {
  background-color: var(--color-sky-blue) !important;
  color: var(--color-white-light) !important;
  border: 1px solid var(--color-sky-blue);
}
.btn-sky-blue:focus {
  background-color: var(--color-white-light) !important;
  color: var(--color-sky-blue) !important;
  border: 1px solid var(--color-sky-blue);
}

/* --color-electric-blue */
.text-electric-blue {
  color: var(--color-electric-blue) !important;
}
.bg-electric-blue {
  background-color: var(--color-electric-blue);
}
.border-electric-blue,
.border-electric-blue:focus,
.border-electric-blue:hover {
  border: 1px solid var(--color-electric-blue);
}

.btn-electrue-blue-outline {
  border: 1px solid var(--color-electric-blue);
  color: var(--color-electric-blue) !important;
}
.btn-electrue-blue-outline:hover {
  background-color: var(--color-electric-blue);
  border: 1px solid var(--color-electric-blue);
  color: var(--color-white-light) !important;
}
.btn-electrue-blue-outline:focus {
  color: var(--color-white-light) !important;
  background-color: var(--color-electric-blue) !important;
}

/*=============================================
=        Global & Reset Styles                =
=============================================*/
body,
a {
  font-weight: normal;
}

* {
  scrollbar-width: thin;
}

#user-image {
  object-fit: cover;
}

a:hover {
  color: var(--color-info) !important;
}
a:focus {
  color: var(--color-info) !important;
}

a.text-white,
a.text-white:hover {
  color: var(--color-white-light) !important;
}

a.header-link:hover {
  color: var(--color-blue-light) !important;
}

a.text-gray {
  color: var(--color-gray-dark) !important;
}
*.text-excess {
  color: var(--color-excess-text) !important;
}

/*=============================================
=        Typography                         =
=============================================*/
/* .page-title {
  line-height: 2.3 !important;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-gray-dark) !important;
  font-weight: bold;
}

h1 > *,
h2 > *,
h3 > *,
h4 > *,
h5 > *,
h6 > * {
  /* Estilos para hijos de h (si es necesario) */
}

label {
  color: var(--color-gray-dark) !important;
  font-weight: bold;
}

/*=============================================
=        Forms & Inputs                     =
=============================================*/
.form-select option:checked {
  background: #2f54a2;
  color: var(--color-white-light);
}

.form-check-input:checked {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

input.is-invalid {
  border-color: #dc3545 !important; /* rojo */
}
input.is-valid {
  border-color: #28a745 !important; /* verde */
}

/* 3.2 Validación de Formularios */
.form-control.error,
.form-select.error,
.form-control.error:hover,
.form-select.error:hover {
  border-color: #e74c3c; /* Rojo */
}

.error-message {
  color: #e74c3c; /* Rojo */
  font-size: 0.9em;
  margin-top: 5px;
  min-height: 1em;
}

input[type='checkbox']:checked {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  accent-color: var(--color-primary-dark);
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #dc3545 !important;
}
.validation-message {
  color: red;
  font-size: 0.95em;
  margin-top: 4px;
}

/* Estilo para el pulgar en navegadores Webkit/Blink */
input[type='range']::-webkit-slider-thumb {
  background: var(--color-primary); /* Color del pulgar */
  /* Otros estilos como height, width, border-radius */
  -webkit-appearance: none; /* Necesario para personalizar el pulgar */
}

/* Estilo para el pulgar en Firefox */
input[type='range']::-moz-range-thumb {
  background: var(--color-primary); /* Color del pulgar */
}

/*=============================================
=        Plugin Styles: Select2             =
=============================================*/
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background-color: var(--color-secondary) !important;
  border: none;
  color: var(--color-white-light);
  padding: 2px 5px;
  margin-top: 4px;
}

.select2-selection__choice__remove {
  color: var(--color-white-light) !important;
  margin-right: 5px;
}
.select2-selection__choice__remove:hover {
  color: var(--color-white-light) !important;
  background-color: #0072b8 !important;
  text-decoration: none;
  cursor: pointer;
}

/* select2 */
.select2-results__options {
  max-height: 250px; /* Puedes ajustar esta altura a tu gusto */
  overflow-y: auto;
}

/* Contenedor principal de cada opción/selección */
.country-option-container {
  display: flex; /* Para alinear el sufijo y los detalles uno al lado del otro */
  align-items: center; /* Centrar verticalmente */
  padding: 4px 0; /* Espaciado interno */
  box-sizing: border-box; /* Incluir padding en el ancho/alto */
}

/* Estilo para el sufijo (ej. VE) */
.country-sufijo {
  font-weight: normal;
  font-size: 1.2em; /* Hazlo un poco más grande */
  margin-right: 10px; /* Espacio entre el sufijo y el prefijo/nombre */
  padding: 3px 6px; /* Espaciado dentro del borde */
  min-width: 40px; /* Ancho mínimo para mantener uniformidad */
  text-align: center;
  line-height: 1; /* Ajustar línea para que se centre mejor verticalmente */
}

/* Contenedor para el prefijo y el nombre del país */
.country-details {
  display: flex;
  flex-direction: column; /* Para apilar el prefijo y el nombre */
  line-height: 1.2; /* Espaciado entre líneas */
}

/* Estilo para el prefijo (+58) */
.country-prefijo {
  font-size: 0.7rem; /* Tamaño normal del texto */
  font-weight: normal;
  color: var(--color-gray-dark); /* Color oscuro */
}

/* Estilo para el nombre del país (VENEZUELA) */
.country-name {
  font-size: 0.7rem; /* Tamaño normal del texto */
  color: var(--color-gray-dark); /* Un color ligeramente más claro */
}

/* Estilos específicos para la selección de Select2 (el que se ve en el input) */
.select2-container .select2-selection--single {
  height: auto !important;
}

.select2-container .select2-selection__rendered {
  line-height: normal; /* Asegurar que el texto se alinee correctamente */
  padding-left: 8px; /* Ajustar padding si es necesario */
  padding-right: 20px !important; /* Asegurar espacio para la flecha de select2 */
}

.select2-results__option--highlighted {
  background-color: #2f54a2 !important; /* Cambia el color de fondo al resaltar */
  color: var(
    --color-white-light
  ) !important; /* Cambia el color del texto al resaltar */
}

.select2-results__option--highlighted span {
  color: var(
    --color-white-light
  ) !important; /* Cambia el color del texto al resaltar */
}

/* Estilos específicos para las opciones en el menú desplegable */
.select2-container .select2-results__option {
  padding: 0 6px; /* Ajustar padding si es necesario */
}

/*=============================================
=        Tables & Pagination                =
=============================================*/
table th {
  font-weight: bold;
  color: var(--color-gray-dark);
}

.table tbody tr:nth-child(odd) {
  background-color: #f3f7f9 !important;
}
/* .table tbody tr:hover {
  background-color: var(--color-neutral-lightest) !important;
} */

/* Sobrescribe el color de fondo de las filas en hover */
.table-hover > tbody > tr:hover > * {
  --ct-table-accent-bg: none;
}

th.text-center {
  padding-left: 1rem !important;
}

table tbody {
  border-color: #cecece !important;
}

.fixed-table-pagination .pagination .page-link {
  border-radius: 5px !important;
}
.page-item > .page-link {
  line-height: 1 !important;
}
.float-right .pagination {
  flex-wrap: wrap;
}
.page-list button {
  background-color: var(--color-secondary) !important;
}

.page-item.active a {
  background-color: var(--color-secondary);
}

/*=============================================
=     Plugin Styles: Bootstrap Table        =
=============================================*/
/* PAGINADO DE BOOTSTRAPTABLE */
div.bootstrap-table.bootstrap5
  > div.fixed-table-container
  > div.fixed-table-body
  > div
  > span
  > span.loading-text {
  font-size: 1rem !important;
}

.fixed-table-toolbar .btn-secondary {
  color: var(--color-white-light) !important;
  background-color: #254a7e !important;
  border: 1px solid transparent;
}
.fixed-table-toolbar .btn-secondary:hover {
  background-color: #12335e !important;
}

.fixed-table-toolbar .btn-secondary:focus {
  border: 1px solid #254a7e !important;
  background-color: var(--color-white-light) !important;
  color: #254a7e !important;
}

.bootstrap-table .fixed-table-container .table thead th .desc,
.bootstrap-table .fixed-table-container .table thead th .asc {
  filter: grayscale(100%) sepia(20%) saturate(0%) brightness(100%) !important;
}

/*=============================================
=        Navigation & Links                 =
=============================================*/
#v-pills-credentials a,
#v-pills-social a {
  color: var(--color-info) !important;
}

.action-icon {
  color: rgba(var(--ct-body-color-rgb), 0.8) !important;
  font-size: 1.2rem !important;
  display: inline-block;
  padding: 0 3px;
}

.nav-bordered .nav-link.active,
.nav-bordered .nav-link {
  color: var(--color-info) !important;
  font-weight: bold;
  border-color: var(--color-info) !important;
}

.nav-tabs .nav-link {
  color: var(--color-gray-dark) !important;
}

.nav-tabs .nav-link.active {
  color: var(--color-info) !important;
  font-weight: bold;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--color-secondary);
  color: var(--color-white-light) !important;
}

.nav-pills .nav-link,
.nav-pills > .nav-link {
  color: var(--color-gray-dark) !important;
  font-weight: bold;
}

a.text-body {
  color: var(--color-info) !important;
  text-decoration: underline;
}

a.active {
  color: var(--color-info) !important;
  font-weight: bold;
}
a.active .icon-sidebar,
a.active :hover .icon-sidebar {
  fill: var(--color-primary) !important;
}

/*=============================================
=        Buttons (General)                  =
=============================================*/
button {
  border-radius: 3px !important;
  color: var(--color-white-light) !important;
}

.btn-secondary {
  background-color: var(--color-gray) !important;
  border: none;
  margin-right: 5px;
  box-shadow: none;
}

/* color accent */

.btn-accent {
  background-color: var(--color-accent) !important;
  color: var(--color-white-light) !important;
}
.btn-accent:hover {
  background-color: var(--color-accent-dark) !important;
  color: var(--color-white-light) !important;
}
.btn-accent:focus {
  border: 1px solid var(--color-accent) !important;
  background-color: var(--color-white-light) !important;
  color: var(--color-accent) !important;
}

/* color accent-dark */

.btn-accent-dark {
  background-color: var(--color-accent-dark) !important;
  color: var(--color-white-light);
}
.btn-accent-dark:hover {
  background-color: var(--color-accent-dark) !important;
  color: var(--color-white-light);
}
.btn-accent-dark:focus {
  border: 1px solid var(--color-accent-dark) !important;
  background-color: var(--color-white-light) !important;
  color: var(--color-accent-dark) !important;
}

.btn-secondary-color {
  background-color: var(--color-secondary) !important;
}
.btn-secondary-color:hover {
  background-color: var(--color-primary) !important;
}
.btn-secondary-color:focus {
  border: 1px solid var(--color-secondary) !important;
  background-color: var(--color-white-light) !important;
  color: var(--color-secondary) !important;
}

.btn-success-dark {
  background-color: var(--color-success-dark) !important;
}
.btn-success-dark:hover {
  background-color: var(--color-success-dark) !important;
}
.btn-success-dark:focus {
  border: 1px solid var(--color-success-dark) !important;
  background-color: var(--color-white-light) !important;
  color: var(--color-success-dark) !important;
}

/*=============================================
=        Buttons (Specific Actions)         =
=============================================*/
.btn-add {
  color: var(--color-white-light);
  background-color: #132449;
}
.btn-add:hover {
  background-color: #070b11;
}
.btn-add:focus {
  border: 1px solid #132449;
  background-color: var(--color-white-light);
  color: #132449 !important;
}

.btn-time {
  color: var(--color-gray-dark) !important;
  background-color: #f3f7f9;
  border: none;
}
.btn-time:hover {
  background-color: #cfd2d4;
  border: none;
}
.btn-time:focus {
}
.btn-time.active {
  background-color: var(--color-gray-dark);
  color: var(--color-white-light) !important;
}
.btn-time.active:hover {
  background-color: var(--color-gray-dark);
  color: var(--color-white-light) !important;
}

/* action buttons */
.btn-action-1 {
  background-color: var(--color-primary-dark);
}
.btn-action-1:hover {
  background-color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-dark);
  /* color: var(--color-primary-dark) !important; */
}
/* .btn-action-1:focus {
  background-color: var(--color-primary-dark);
  color: var(--color-white-light);
} */

/* 2 */
.btn-action-2 {
  background-color: var(--color-accent-dark);
}
.btn-action-2:hover {
  border: 1px solid var(--color-accent-dark);
  background-color: var(--color-accent-dark);
}
/* .btn-action-2:focus {
  color: var(--color-accent-dark) !important;
  color: var(--color-white-light);
} */

.btn-eye {
  background-color: var(--color-accent-dark);
}
.btn-eye:hover {
  border: 1px solid var(--color-accent-dark);
  color: var(--color-accent-dark) !important;
}
.btn-eye:focus {
  background-color: var(--color-accent-dark);
  color: var(--color-white-light);
}

.btn-action-2-outline {
  border: 1px solid var(--color-accent-dark);
  color: var(--color-accent-dark) !important;
  /* background-color: var(--color-accent-dark); */
}
.btn-action-2-outline:hover {
  background-color: var(--color-accent-dark);
  border: 1px solid var(--color-accent-dark);
  color: var(--color-white-light) !important;
}
.btn-action-2-outline:focus {
  color: var(--color-white-light) !important;
  background-color: var(--color-accent-dark) !important;
}

.btn-accent-alt-outline {
  border: 1px solid var(--color-accent-alt);
  color: var(--color-accent-alt) !important;
  /* background-color: var(--color-accent-alt); */
}
.btn-accent-alt-outline:hover {
  background-color: var(--color-accent-alt);
  border: 1px solid var(--color-accent-alt);
  color: var(--color-white-light) !important;
}
.btn-accent-alt-outline:focus {
  color: var(--color-white-light) !important;
  background-color: var(--color-accent-alt) !important;
}

/* 3 */
.btn-action-3 {
  background-color: var(--color-accent);
}
.btn-action-3:hover {
  border: 1px solid var(--color-accent);
  color: var(--color-accent) !important;
}
.btn-action-3:focus {
  color: var(--color-white-light);
  background-color: var(--color-accent);
}

/* 4 */
.btn-action-4 {
  background-color: var(--color-success);
}
.btn-action-4:hover {
  border: 1px solid var(--color-success);
  color: var(--color-success) !important;
}
.btn-action-4:focus {
  color: var(--color-white-light);
  background-color: var(--color-success);
}

/* 5 */
.btn-action-5 {
  background-color: var(--color-success-dark);
}
.btn-action-5:hover {
  border: 1px solid var(--color-success-dark);
  color: var(--color-success-dark) !important;
}
.btn-action-5:focus {
  color: var(--color-white-light);
  background-color: var(--color-success-dark);
}

/* 6 */
.btn-action-6 {
  background-color: var(--color-success-light);
}
.btn-action-6:hover {
  background-color: var(--color-success-light);
  /* color: var(--color-success-light) !important; */
  border: 1px solid var(--color-success-light);
}
/* .btn-action-6:focus {
  color: var(--color-white-light);
  background-color: var(--color-success-light);
} */

/* 7 */
.btn-action-7 {
  background-color: var(--color-success-2);
}
.btn-action-7:hover {
  border: 1px solid var(--color-success-2);
  color: var(--color-success-2) !important;
}
.btn-action-7:focus {
  color: var(--color-white-light);
  background-color: var(--color-success-2);
}

/* 8 */
.btn-action-8 {
  background-color: var(--color-secondary);
}
.btn-action-8:hover {
  border: 1px solid var(--color-secondary);
  color: var(--color-secondary) !important;
}
.btn-action-8:focus {
  color: var(--color-white-light);
  background-color: var(--color-secondary);
}

.btn-action-glucose {
  color: var(--color-white-light);
  background-color: var(--color-glucose);
}
.btn-action-glucose:hover {
  background-color: #112546;
}
.btn-action-glucose:focus {
  border: 1px solid var(--color-glucose);
  background-color: var(--color-white-light);
  color: var(--color-glucose) !important;
}

.btn-action-body {
  color: var(--color-white-light);
  background-color: var(--color-body);
}
.btn-action-body:hover {
  background-color: #3299aa;
}
.btn-action-body:focus {
  border: 1px solid var(--color-body);
  background-color: var(--color-white-light);
  color: var(--color-body) !important;
}

.btn-action-lipid {
  color: var(--color-white-light);
  background-color: var(--color-lipid);
}
.btn-action-lipid:hover {
  background-color: #11537c;
}
.btn-action-lipid:focus {
  border: 1px solid var(--color-lipid);
  background-color: var(--color-white-light);
  color: var(--color-lipid) !important;
}

.btn-add-user {
  color: var(--color-white-light);
  background-color: #132449;
}
.btn-add-user:hover {
  background-color: #070b11;
}
.btn-add-user:focus {
  border: 1px solid #132449;
  background-color: var(--color-white-light);
  color: #132449 !important;
}

.btn-add-biomarker {
  color: var(--color-white-light);
  background-color: #43cad4;
}
.btn-add-biomarker:hover {
  background-color: #2d8e93;
}
.btn-add-biomarker:focus {
  border: 1px solid #43cad4;
  background-color: var(--color-white-light);
  color: #43cad4 !important;
}

.btn-add-file {
  color: var(--color-white-light);
  background-color: #43cad4;
}
.btn-add-file:hover {
  background-color: #2d8e93;
}
.btn-add-file:focus {
  border: 1px solid #43cad4;
  background-color: var(--color-white-light);
  color: #43cad4 !important;
}

.btn-back {
  color: var(--color-white-light);
  background-color: #1b5ab0;
}
.btn-back:hover {
  background-color: #12335e;
}
.btn-back:focus {
  border: 1px solid #1b5ab0;
  background-color: var(--color-white-light);
  color: #1b5ab0 !important;
}

.btn-sign-up {
  color: var(--color-white-light);
  background-color: #0f3c7f;
}
.btn-sign-up:hover {
  background-color: #112546;
}
.btn-sign-up:focus {
  border: 1px solid #0f3c7f;
  background-color: var(--color-white-light);
  color: #0f3c7f !important;
}

.btn-save {
  color: var(--color-white-light);
  background-color: #40cce4;
}
.btn-save:hover {
  background-color: #3299aa;
}
.btn-save:focus {
  border: 1px solid #40cce4;
  background-color: var(--color-white-light);
  color: #40cce4 !important;
}

.btn-cancel {
  color: var(--color-white-light);
  background-color: #132449;
}
.btn-cancel:hover {
  background-color: #070b11;
}
.btn-cancel:focus {
  border: 1px solid #132449;
  background-color: var(--color-white-light);
  color: #132449 !important;
}

.btn-view-deprecated {
  color: var(--color-white-light);
  background-color: #254a7e;
}
.btn-view-deprecated:hover {
  background-color: #12335e;
}
.btn-view-deprecated:focus {
  border: 1px solid #254a7e;
  background-color: var(--color-white-light);
  color: #254a7e !important;
}

.btn-pencil-deprecated {
  color: var(--color-white-light);
  background-color: #62d0e0;
}
.btn-pencil-deprecated:hover {
  background-color: #51a6b0;
}
.btn-pencil-deprecated:focus {
  border: 1px solid #62d0e0;
  background-color: var(--color-white-light);
  color: #62d0e0 !important;
}

.btn-image-test-deprecated {
  color: var(--color-white-light);
  background-color: #2f54a2;
}
.btn-image-test-deprecated:hover {
  background-color: var(--color-glucose);
}
.btn-image-test-deprecated:focus {
  border: 1px solid #2f54a2;
  background-color: var(--color-white-light);
  color: #2f54a2 !important;
}

.btn-delete-deprecated {
  color: var(--color-white-light);
  background-color: #132449;
}
.btn-delete-deprecated:hover {
  background-color: #070b11;
}
.btn-delete-deprecated:focus {
  border: 1px solid #132449;
  background-color: var(--color-white-light);
  color: #132449 !important;
}

.btn-pencil {
  border: none;
  color: var(--color-blue-gray) !important;
}
.btn-image-test {
  border: none;
  color: var(--color-blue-gray) !important;
}
.btn-delete {
  border: none;
  color: var(--color-blue-gray) !important;
}
.btn-view {
  border: none;
  color: var(--color-blue-gray) !important;
}

.btn-toogle-password {
  color: var(--color-white-light);
  background-color: #254a7e;
}
.btn-toogle-password:hover {
  background-color: #12335e;
}
.btn-toogle-password:focus {
  border: 1px solid #254a7e;
  background-color: var(--color-white-light);
  color: #254a7e !important;
}

.btn-restore {
  color: var(--color-white-light);
  background-color: #a3afae;
}
.btn-restore:hover {
  background-color: #728080;
}
.btn-restore:focus {
  border: 1px solid #a3afae;
  background-color: var(--color-white-light);
  color: #a3afae !important;
}

.btn-imate {
  color: var(--color-white-light);
  background-color: #a3afae;
}
.btn-imate:hover {
  background-color: #728080;
}
.btn-imate:focus {
  border: 1px solid #a3afae;
  background-color: var(--color-white-light);
  color: #a3afae !important;
}

/*=============================================
=        Buttons (Notifications)            =
=============================================*/
.notification-button.active {
  background-color: #00acbf20;
  color: var(--color-secondary) !important;
  border: none !important;
}

.notification-button {
  color: var(--color-secondary) !important;
  border-radius: 3rem !important;
  font-weight: bold;
  border: none !important;
}

.notification-button:hover,
.notification-button:focus,
.notification-button:active {
  border: none !important;
}

/*=============================================
=        Components: Modals                 =
=============================================*/
.modal .modal-content {
  border-radius: 1rem !important;
}

/*=============================================
=        Components: SweetAlert             =
=============================================*/
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: var(--color-primary) !important; /* Verde */
}

.swal2-icon.swal2-warning {
  border-color: var(--color-primary) !important; /* Verde */
  color: var(--color-primary) !important;
}

.swal2-icon.swal2-success .swal2-success-line-long,
.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-long {
  background-color: var(--color-primary) !important;
}

.swal2-icon.swal2-question {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.swal2-x-mark > span {
  background-color: var(--color-primary) !important;
}

.swal2-icon.swal2-error {
  border-color: var(--color-primary) !important;
}

.swal2-actions > .swal2-confirm {
  color: var(--color-white-light) !important;
  background-color: #40cce4 !important;
}
.swal2-confirm:hover {
  background-color: #3299aa !important;
}
.swal2-confirm:focus {
  border: 1px solid #40cce4 !important;
  background-color: var(--color-white-light) !important;
  color: #40cce4 !important;
}

.swal2-actions > .swal2-cancel,
.swal2-actions > .swal2-deny {
  color: var(--color-white-light) !important;
  background-color: #0f3c7f !important;
}
.swal2-cancel:hover,
.swal2-cancel:hover {
  background-color: #112546 !important;
}
.swal2-cancel:focus,
.swal2-cancel:focus {
  border: 1px solid #0f3c7f !important;
  background-color: var(--color-white-light) !important;
  color: #0f3c7f !important;
}

.swal2-deny {
}

/*=============================================
=        Components: Accordion              =
=============================================*/
.accordion .accordion-button {
  color: var(--color-primary-dark) !important;
  background-color: #e8fcfd;
}

.accordion .accordion-button:focus {
  box-shadow: none;

  /* Establecemos el color de borde que deseamos */
  border-color: #0d6efd !important; /* Ejemplo: color azul (primary) */
}

/*=============================================
=        Components: Loader                 =
=============================================*/
#custom-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Bootstrap modal z-index */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* Mostrar overlay con animación */
#custom-loader-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/*=============================================
=        Components: Notifications          =
=============================================*/
/* Estilos para las notificaciones no leídas */
.notification-unread {
  /* Un color de fondo sutil para diferenciar */
  background-color: #eff8ff !important;
}

.badge-unread {
  padding: 4px !important;
}
.badge-unread:empty {
  display: inline-block !important;
}

.notification-unread .noti-item-title {
  /* Hacemos el título más grueso para que resalte */
  font-weight: 600 !important;
}

/*=============================================
=        Plugin Styles: Charts (Apex/C3)    =
=============================================*/
/* APEXCHART JS AJUSTE*/
.apexcharts-toolbar {
  margin-right: 1rem;
}
.apexcharts-xaxis-label {
}
.apexcharts-yaxis-annotations text {
  fill: #f0ffff !important;
}
/* Ejemplo para cambiar el color de fondo de las barras */
.apexcharts-bar-series rect {
}

/* C3 CHARTJS AJUSTE */
/* Estilo para las etiquetas del eje X */
.c3-axis-x text {
  font-size: 12px;
  /* O cualquier otro color */
}
/* Estilo para las etiquetas del eje Y */
.c3-axis-y text {
  font-size: 10px;
}
/* Estilo para el texto de la leyenda */
.c3-legend-item-text {
  font-size: 12px;
}
/* Estilo para el título del gráfico */
.c3-title text {
  font-size: 18px;
}
/* Estilo para el tooltip (necesitarás ser más específico) */
.c3-tooltip * {
  /* Aplica la fuente a todos los elementos dentro del tooltip */
  font-size: 12px !important;
  font-weight: bold;
}
/* Estilo para las etiquetas en gráficos de arco (pastel/dona) */
.c3-chart-arcs text {
  font-size: 14px;
}

/*=============================================
=        Plugin Styles: FullCalendar        =
=============================================*/
/* -- Contenedor y Bordes Generales -- */
.fc {
  /* Usamos un borde más sutil para un look minimalista */
  border-color: var(--color-neutral-light) !important;
}

/* -- Barra de Herramientas (Header) -- */
.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 1.5em;
  padding: 0.5rem;
  background-color: #fbfdff; /* Un fondo casi blanco para el header */
  border-radius: 8px;
  border: 1px solid var(--color-neutral-light);
}

.fc .fc-toolbar-title {
  color: var(
    --color-primary-dark
  ) !important; /* Título del mes en azul oscuro */
  font-weight: bold;
  font-size: 1.5em;
}

/* -- Botones de la barra de herramientas (Hoy, Semana, Día) -- */
.fc .fc-button-primary {
  background-color: transparent !important;
  border-color: var(--color-secondary) !important;
  color: var(--color-secondary) !important;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}

/* Estilo para el botón activo (la vista actual) */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: var(--color-white-light) !important;
}

/* Efecto hover sobre los botones */
.fc .fc-button-primary:hover {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white-light) !important;
}

/* -- Cabecera de los días (Lun, Mar, etc.) -- */
.fc .fc-col-header-cell-cushion {
  color: var(--color-primary-dark);
  font-weight: bold;
  padding: 10px 4px;
}

/* -- Fondo para el día actual ("Hoy") -- */
.fc .fc-day-today {
  background-color: var(
    --color-white-blue
  ) !important; /* Azul muy claro para destacar sutilmente */
}

/* -- Horas no disponibles (fuera de businessHours) -- */
.fc .fc-non-business {
  background-color: #f5f7fa !important; /* Un gris azulado muy claro */
}

/* -- Eventos en el calendario -- */
.fc .fc-event {
  border-radius: 4px !important;
  font-weight: bold;
  padding: 0;
  margin: 0;
  font-size: 0.7rem;
}

.fc-event-time,
.fc-event-title {
  color: unset;
}

.fc-daygrid-event {
  color: var(--color-blue-gray);
}

/* Color por defecto para los eventos, usando tu color de acento */

/* Cuando arrastras para crear una cita (selección) */
.fc-highlight {
  background: var(--color-accent) !important; /* Cian brillante */
  opacity: 0.3;
}

/* -- Bordes de la grilla -- */
.fc-theme-bootstrap5 td,
.fc-theme-bootstrap5 th {
  border: 1px solid var(--color-neutral-light) !important; /* Borde más claro */
}

.fc-button-group {
  gap: 0.5rem;
}
.fc-button-group button {
  text-transform: capitalize !important;
  line-height: 1 !important;
}

.fc-timegrid-slot {
  height: 2.5em !important; /* Aumenta este valor según lo necesites */
}

/*=============================================
=        Layout & Icons                     =
=============================================*/
.st0 {
  fill: #0673b9;
}
.st1 {
  fill: #2f54a2;
}
.st2 {
  fill: #3ebbd0;
}
.st3 {
  fill: #1e2648;
}

.kpi-svg {
  object-fit: contain;
  max-height: 100%;
  width: 28px;
  margin: auto;
}

.sidebar-icon {
  height: 100%;
  max-width: 100%;
  width: 15px;
  vertical-align: inherit;
  margin-right: 0.6rem;
}

/*=============================================
=        App-Specific Components            =
=============================================*/
#health-overview-dropdown {
  margin-top: 5px !important;
}

/* ITEMS */
.red-item {
  color: var(--color-deficiency-text) !important;
  background-color: var(--color-deficiency-bg);
  font-size: 12px;
}

.blue-item {
  color: var(--color-info) !important;
  background-color: var(--color-white-blue);
  font-size: 12px;
}

.accent-item {
  color: var(--color-accent) !important;
  background-color: var(--color-white-blue);
  font-size: 12px;
}

.green-item {
  color: var(--color-excess-text) !important;
  background-color: var(--color-excess-bg);
  font-size: 12px;
}

.yellow-item {
  color: var(--color-yellow-text) !important;
  background-color: var(--color-yellow-bg);
  font-size: 12px;
}

.red-label {
  color: var(--color-deficiency-text) !important;
  color: darkred !important;
  font-size: 12px;
}

.green-label {
  color: var(--color-excess-text) !important;
  color: darkgreen !important;
  font-size: 12px;
}

.gray-item {
  color: var(--color-gray-dark);
  background-color: var(--color-gray-light);
  font-size: 12px;
}

.gray-item-2 {
  color: var(--color-white-light);
  background-color: var(--color-gray);
  font-size: 12px;
}

/* KPI */
#data-range,
#data-range2 {
  font-weight: bold;
}

/* Biomarker Range Styles */
.barra-container {
  position: relative;
  width: 100%;
  height: 12px;
  background: linear-gradient(
    to right,
    #ebbcbe 0%,
    #ebbcbe calc(var(--minPorcentaje) * 1%),
    #a5dfb4 calc(var(--minPorcentaje) * 1%),
    #a5dfb4 calc(var(--maxPorcentaje) * 1%),
    #ebbcbe calc(var(--maxPorcentaje) * 1%),
    #ebbcbe 100%
  );
  border-radius: 6px;
  margin: 20px 0;
}

.burbuja {
  z-index: 1200;
  position: absolute;
  top: -30px;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  white-space: nowrap;
  cursor: pointer;
}

.barra-valor {
  margin-top: 5px;
  font-size: 14px;
}

.rectangulo-valor {
  display: inline-block;
  min-width: 100px;
  padding: 5px 10px;
  margin-left: 15px;
  border-radius: 6px;
  font-weight: bold;
  color: #fff;
  font-size: 14px;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}

.seccion-biomarcador {
  margin-bottom: 40px;
}

.descripcion-biomarcador {
  margin-top: 15px;
  font-size: 14px;
}

.descripcion-biomarcador h6 {
  margin-bottom: 5px;
  font-weight: bold;
}

.descripcion-biomarcador p {
  margin-left: 10px;
}

.valor-reference p {
  font-size: 14px;
  font-weight: bold;
  margin: 5px 0;
  display: inline-block;
}

.history-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
}

/* Estilos para el semáforo de biomarcadores categóricos */
.semaforo-grid {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  gap: 8px;
  align-items: center;
  margin: 10px 0 6px;
}

.semaforo-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 8px;
  align-items: center;
  margin: 10px 0 6px;
}

/* Colores de nivel para Albúmina y Creatinina */
.alb-n {
  background: #adbaa4;
}
.alb-1 {
  background: #9fb8a9;
}
.alb-2 {
  background: #92b7b1;
}
.alb-3 {
  background: #79abaf;
}

/* Colores Creatinina */
.cr-1 {
  background: #a8aa80;
}
.cr-2 {
  background: #92a07e;
}
.cr-3 {
  background: #74846a;
}

.semaforo-active {
  outline: 3px solid var(--color-gray-dark);
  outline-offset: 2px;
}

.semaforo-label {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
}

/* Cuadrícula base para el semáforo (no cambia) */
.semaforo-grid,
.semaforo-grid-3 {
  display: grid;
  gap: 8px;
  align-items: center;
  margin: 10px 0 6px;
}
.semaforo-grid {
  grid-template-columns: repeat(4, 80px);
}
.semaforo-grid-3 {
  grid-template-columns: repeat(3, 80px);
}

/* --- NUEVO: Clases para las etiquetas de texto de arriba --- */
.semaforo-labels,
.semaforo-labels-3 {
  display: grid;
  gap: 8px;
  align-items: center;
  margin: 0 0 6px; /* Espacio debajo de las etiquetas */
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: #000; /* Letras en negro */
}

/* 4 columnas para etiquetas de Albúmina */
.semaforo-labels {
  grid-template-columns: repeat(4, 80px);
}

/* 3 columnas para etiquetas de Creatinina */
.semaforo-labels-3 {
  grid-template-columns: repeat(3, 80px);
}
/* -------------------------------------------------------- */

/* Celdas individuales del semáforo */
.semaforo-cell {
  height: 38px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  /* MODIFICADO: Oculta el texto dentro de los cuadros */
  color: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}