/* Definición de variables en :root */
:root {
  /* Colores básicos */
  --color-bg-primary: #0F1C2F;
  --color-bg-secondary: #1C2E4D;
  --color-text: #D2DBE7;
  --color-accent: #40669E;
  --color-icon: #88A2CF;
  --color-min: #D9534F;
  --color-max: #4BC0C0;
  --color-odd: #172B40;
  
  /* Gradiente para fondos */
  --color-gradient-first: #0F1C2F;
  --color-gradient-second: #1C2E4D;
  --color-gradient-third: #40669E;
  --color-gradient-fourth: #5C7EBB;
  
  /* Fondo secundario translúcido (usado en segmentos) */
  --color-bg-secondary-translucent: #1C2E4D05;

  /* Mensajes de error y éxito */
  --color-error-bg: #402F2F;
  --color-error-text: #FDD;
  --color-error-border: #A94442;
  --color-positive-bg: #1F3629;
  --color-positive-border: #548C45;

  /* Colores adicionales */
  --color-white: #ffffff;
  --color-green: #548C45;
  --color-green-disabled: #3A5E34;
  --color-filter-bg: #1f2a36;

  /* Sidebar */
  --color-sidebar-active: #337ab7;
  --color-sidebar-hover: #4f93ce;

  /* Gradiente para cabecera */
  --color-header-gradient-start: #bc6ba9;
  --color-header-gradient-end: #5671bc;

  /* Footer */
  --color-footer-bg: #1b1c1e;

  /* Otros colores adicionales */
  --color-trash: #f44336;
  --color-hover: #efefef;
  --color-odd-bg: #f9f9f9;
  --color-even: #fbfbfb;
  --color-row-hover: #f1f0f0;
  --color-batch-error: #db2828;
}

/* Global */
body {
  background: linear-gradient(135deg, var(--color-gradient-first), var(--color-gradient-second), var(--color-gradient-third), var(--color-gradient-fourth));
  color: var(--color-text);
  background-attachment: fixed;
}

/* Contenedor principal */
#resumen-tiempos-grupo {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  padding: 2rem;
  border-radius: 10px;
  margin-top: 2rem;
}

/* Título */
#resumen-tiempos-grupo h3.ui.header {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
}

/* Bloques */
#resumen-tiempos-grupo .resumen-bloque {
  background-color: var(--color-bg-secondary);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Íconos */
#resumen-tiempos-grupo .ui.list .icon {
  color: var(--color-icon);
}

/* Colores especiales */
#resumen-tiempos-grupo .minimo {
  color: var(--color-min);
}

#resumen-tiempos-grupo .maximo {
  color: var(--color-max);
}

#resumen-tiempos-grupo .promedio {
  color: var(--color-text);
}

/* Ajustes generales */
#resumen-tiempos-grupo .ui.list .item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
  #resumen-tiempos-grupo .resumen-bloque {
    flex-direction: column;
  }

  #resumen-tiempos-grupo .five.wide.column {
    width: 100% !important;
  }
}

/* Contenedor general */
.ui.segment .resumen-simple {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  padding: 2rem;
  border-radius: 10px;
  margin-top: 2rem;
}

/* Título */
.resumen-simple h3.ui.header {
  color: var(--color-text);
  font-size: 1.3rem;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Lista de ítems */
.resumen-simple .ui.list .item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

/* Íconos */
.resumen-simple .ui.list .item .icon {
  color: var(--color-icon);
}

/* Contenido */
.resumen-simple .ui.list .item .content strong {
  color: var(--color-text);
  font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
  .resumen-simple .ui.grid > .column {
    width: 100% !important;
  }
}

/* Contenedor general */
#resumen-logins-grupo {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  padding: 2rem;
  border-radius: 10px;
  margin-top: 2rem;
}

/* Título */
#resumen-logins-grupo h3.ui.header {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
}

/* Fila general */
#resumen-logins-grupo .resumen-bloque {
  background-color: var(--color-bg-secondary);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Íconos */
#resumen-logins-grupo .ui.list .icon {
  color: var(--color-icon);
}

/* Colores especiales */
#resumen-logins-grupo .minimo {
  color: var(--color-min);
}

#resumen-logins-grupo .maximo {
  color: var(--color-max);
}

#resumen-logins-grupo .promedio {
  color: var(--color-text);
}

/* Ítems de lista */
#resumen-logins-grupo .ui.list .item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
  #resumen-logins-grupo .resumen-bloque {
    flex-direction: column;
  }

  #resumen-logins-grupo .five.wide.column,
  #resumen-logins-grupo .eight.wide.column {
    width: 100% !important;
  }
}

/* Resumen tiempos */
#resumen-tiempos {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  padding: 2rem;
  border-radius: 10px;
}

#resumen-tiempos h3.ui.header {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
}

#resumen-tiempos .resumen-bloque {
  background-color: var(--color-bg-secondary);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

#resumen-tiempos .ui.list .item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

#resumen-tiempos .ui.list .item .icon {
  color: var(--color-icon);
}

#resumen-tiempos .promedio {
  color: var(--color-text);
}

/* Responsive */
@media (max-width: 768px) {
  #resumen-tiempos .five.wide.column {
    width: 100% !important;
  }
}

/* Ajustes generales para segmentos */
.ui.aligned.grid .column > .segment:not(.compact):not(.attached),
.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached) {
  width: 100%;
  background-color: var(--color-bg-secondary-translucent);
  color: var(--color-text);
}

/* Apexcharts */
.apexcharts-legend-text {
  color: var(--color-text) !important;
}
.apexcharts-xaxis-title-text,
.apexcharts-yaxis-texts-g text,
.apexcharts-xaxis-texts-g text {
  fill: var(--color-text) !important;
}

/* Panel general */
.ui.teal.segment {
  background-color: var(--color-bg-primary) !important;
  border-radius: 10px;
  border: none;
  color: var(--color-text);
  padding: 2em;
}

.ui.teal.segment label {
  color: var(--color-text) !important;
  font-weight: bold;
}

.ui.teal.segment .ui.input input {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
}

.ui.teal.segment .calendar.icon {
  color: var(--color-icon) !important;
}

.ui.teal.segment .ui.selection.dropdown {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
}

.ui.teal.segment .ui.selection.dropdown .menu {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
}

.ui.teal.segment .ui.selection.dropdown .item {
  color: var(--color-text) !important;
}

.ui.teal.segment .ui.labeled.icon.button {
  background-color: var(--color-accent) !important;
  color: var(--color-text) !important;
  border-radius: 8px;
  margin-top: 1em;
}

.ui.teal.segment .ui.labeled.icon.button .icon {
  color: var(--color-text) !important;
}

#filter-text,
#filter-apply-text {
  color: var(--color-text) !important;
}

#report-result-message {
  color: var(--color-icon);
  margin-top: 1em;
  font-style: italic;
}

/* Tabla principal */
#homeDashboardUserRanking.ui.table {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  border: none;
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  border-radius: 8px;
  overflow: hidden;
}

#homeDashboardUserRanking thead {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
}

#homeDashboardUserRanking thead th {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border-bottom: 2px solid var(--color-accent) !important;
  font-weight: bold;
  font-size: 0.95rem;
  text-align: left;
  padding: 12px 10px;
}

#homeDashboardUserRanking tbody tr {
  background-color: var(--color-bg-secondary);
  transition: background-color 0.3s ease;
}

#homeDashboardUserRanking tbody tr.odd {
  background-color: var(--color-odd);
}

#homeDashboardUserRanking tbody tr.even {
  background-color: var(--color-bg-secondary);
}

#homeDashboardUserRanking tbody tr:hover {
  background-color: var(--color-accent);
  cursor: pointer;
}

#homeDashboardUserRanking tbody td {
  padding: 10px;
  border-top: 1px solid var(--color-accent) !important;
  color: var(--color-text);
  font-size: 0.95rem;
  vertical-align: middle;
}

#homeDashboardUserRanking .check.icon {
  color: var(--color-icon) !important;
}

.moneda-icon-container {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}

#homeDashboardUserRanking .linkEnabled {
  color: var(--color-text);
  font-weight: 500;
}

#homeDashboardUserRanking th.sorting,
#homeDashboardUserRanking th.sorting_asc,
#homeDashboardUserRanking th.sorting_desc {
  cursor: pointer;
}

#homeDashboardUserRanking td:focus,
#homeDashboardUserRanking td:active {
  outline: none;
  background-color: var(--color-gradient-fourth) !important;
}

/* Tabla formularios */
#myDataTable.ui.table {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  border: none;
  border-radius: 8px;
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  overflow: hidden;
}

#myDataTable thead {
  background-color: var(--color-bg-secondary);
}

#myDataTable thead th {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  font-weight: bold;
  font-size: 0.95rem;
  padding: 12px 10px;
  border-bottom: 2px solid var(--color-accent) !important;
  text-align: left;
}

#myDataTable tbody tr {
  transition: background-color 0.3s ease;
}

#myDataTable tbody tr.odd {
  background-color: var(--color-odd);
}

#myDataTable tbody tr.even {
  background-color: var(--color-bg-secondary);
}

#myDataTable tbody tr:hover {
  background-color: var(--color-accent);
  cursor: pointer;
}

#myDataTable tbody td {
  padding: 10px;
  border-top: 1px solid var(--color-accent) !important;
  color: var(--color-text);
  font-size: 0.95rem;
  vertical-align: middle;
  word-break: break-word;
}

#myDataTable th.sorting,
#myDataTable th.sorting_asc,
#myDataTable th.sorting_desc {
  cursor: pointer;
}

@media (max-width: 768px) {
  #myDataTable thead {
    display: none;
  }

  #myDataTable tbody td {
    display: block;
    width: 100%;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }

  #myDataTable tbody td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 10px;
    font-weight: bold;
    color: var(--color-icon);
  }

  #myDataTable tbody tr {
    margin-bottom: 1rem;
    display: block;
    border-bottom: 2px solid var(--color-accent);
  }
}

/* Bulk usuarios - Acordeón */
.ui.styled.accordion {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  border-radius: 8px;
  box-shadow: none;
}

.ui.styled.accordion .title {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text) !important;
  padding: 1rem;
  font-weight: bold;
  font-size: 1rem;
  border-bottom: 1px solid var(--color-accent);
}

.ui.styled.accordion .title:hover {
  background-color: var(--color-accent) !important;
  cursor: pointer;
}

.ui.styled.accordion .content {
  background-color: var(--color-odd);
  padding: 2rem;
}

/* Divisores de pasos */
.ui.horizontal.divider.header {
  color: var(--color-icon);
  border-top: 1px solid var(--color-accent);
  margin: 2rem 0 1rem;
  font-size: 1rem;
}

/* Texto de instrucciones */
.ui.styled.accordion p {
  color: var(--color-text);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Formulario */
.ui.form textarea {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  padding: 0.75rem;
  resize: vertical;
  min-height: 120px;
  font-size: 0.95rem;
}

/* Tabla de preview */
#batchPreviewDT.ui.table {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  border: none;
  font-size: 0.9rem;
}

#batchPreviewDT thead {
  background-color: var(--color-bg-secondary);
}

#batchPreviewDT thead th {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
  padding: 0.8rem;
  font-weight: bold;
}

#batchPreviewDT tbody td {
  background-color: var(--color-odd);
  border-top: 1px solid var(--color-accent);
  padding: 0.75rem;
}

#batchPreviewDT tbody tr:hover {
  background-color: var(--color-accent);
}

/* DataTables elementos */
.dataTables_wrapper .ui.dropdown,
.dataTables_wrapper select {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  border-radius: 5px;
  padding: 0.5rem;
}

/* Mensajes de error y éxito */
.ui.error.message,
.ui.positive.message {
  border-radius: 5px;
  padding: 1rem;
  font-size: 0.95rem;
}

.ui.error.message {
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
  border: 1px solid var(--color-error-border);
}

.ui.positive.message {
  background-color: var(--color-positive-bg);
  color: var(--color-text);
  border: 1px solid var(--color-positive-border);
}

/* Dropdown de empresa */
#empresaDropdown.ui.dropdown {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  border-radius: 5px;
  padding: 0.5rem;
}

#empresaDropdown .menu {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
}

#empresaDropdown .item {
  color: var(--color-text) !important;
}

/* Botón agregar */
#botonAgregarBatch {
  background-color: var(--color-green) !important;
  color: var(--color-white) !important;
  border-radius: 6px;
  padding: 0.75rem 1.25rem;
  font-weight: bold;
}

#botonAgregarBatch.disabled {
  background-color: var(--color-green-disabled) !important;
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tabla usuarios ranking */
.ui.segment {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  border-radius: 10px;
  padding: 2rem;
  border: none;
}

.ui.segment h3 {
  color: var(--color-text);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

#grupoUserRanking.ui.table {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  border: none;
  font-size: 0.95rem;
}

#grupoUserRanking thead {
  background-color: var(--color-bg-secondary);
}

#grupoUserRanking thead th {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  font-weight: bold;
  border-bottom: 1px solid var(--color-accent);
  padding: 0.9rem 0.75rem;
}

#grupoUserRanking tbody tr:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-text) !important;
}

#grupoUserRanking tbody tr.odd {
  background-color: var(--color-odd);
}

#grupoUserRanking tbody tr.even {
  background-color: var(--color-bg-secondary);
}

#grupoUserRanking tbody tr:hover {
  background-color: var(--color-accent);
  cursor: pointer;
}

#grupoUserRanking tbody td {
  border-top: 1px solid var(--color-accent);
  padding: 0.8rem;
  color: var(--color-text);
  vertical-align: middle;
}

.ui.tabular.menu .item {
  color: var(--color-text);
}

/* Buscador */
.dataTables_filter label {
  color: var(--color-text);
  font-weight: normal;
}

.dataTables_filter input {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  padding: 0.5rem;
}

/* Checkbox */
input[type="checkbox"].batchInactivar {
  accent-color: var(--color-gradient-fourth);
}

/* Barra de progreso */
.ui.progress {
  background-color: var(--color-bg-secondary) !important;
  border-radius: 5px;
  margin: 0;
}

.ui.progress .bar {
  border-radius: 5px;
  color: var(--color-white);
  font-size: 0.8rem;
  text-align: center;
}

.ui.progress .progress {
  color: var(--color-text);
}

/* Filter button */
#filter-button {
  background-color: var(--color-filter-bg);
  color: var(--color-text);
  border: none;
}

#filter-button .icon {
  color: var(--color-text);
}

/* Sidebar */
#sidebar {
  position: fixed;
  top: 40px;
  left: 0;
  bottom: 0;
  width: 18%;
  background-color: var(--color-bg-primary);
  padding: 0;
  color: var(--color-text);
}

#sidebar .item {
  color: var(--color-white);
}

#sidebar .ui.vertical.menu .item > .header:not(.ui) {
  font-weight: 400;
}

#sidebar .ui.menu {
  margin: 2em 0 0;
  font-size: 16px;
}

#sidebar .ui.menu > a.item {
  color: var(--color-white);
  border-radius: 0 !important;
}

#sidebar .ui.menu > a.item.active {
  background-color: var(--color-sidebar-active);
  color: var(--color-white);
  border: none !important;
}

#sidebar .ui.menu > a.item:hover {
  background-color: var(--color-sidebar-hover);
  color: var(--color-white);
}

#sidebar .ui.secondary.vertical.menu > .item {
  margin: 0;
  font-size: 13px;
}

/* Content */
#content {
  margin-left: 19%;
  width: 81%;
  margin-top: 3em;
  padding-left: 3em;
  float: left;
}

#content > .ui.grid {
  padding-right: 4em;
}

#mainContainer {
  margin-top: 50px;
}

#content h1 {
  font-size: 36px;
}

#content .ui.divider:not(.hidden) {
  margin: 0;
}

#sidebar .ui.divider {
  margin: 0;
}

#content table.ui.table {
  border: none;
}

#content table.ui.table thead th {
  border-bottom: 2px solid #eee !important;
}

.userProfile {
  padding-right: 10px;
}

.imageSidebar {
  text-align: center;
  margin-bottom: 2em;
}

#frediModal.frediModalOpen {
  height: 80%;
  top: 10%;
  left: 10%;
  width: 80%;
}

#PageEditTabs {
  display: none !important;
}

.trashLink {
  color: var(--color-trash);
}

.ui.huge.header {
  text-transform: capitalize;
  color: var(--color-text);
}

.mainBotonAgregar {
  width: 100%;
  text-align: center;
}

#myDataTable tr:hover {
  background-color: var(--color-hover);
}

#grupoUserRanking .hoverPointer:hover {
  background-color: var(--color-hover);
}

.linkEnabled {
  cursor: pointer;
}

#myDataTable .sorting:last-of-type {
  text-align: center !important;
  width: 160px;
}

.ui.celled.table tr td,
.ui.celled.table tr th {
  border-left: none;
}

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

table .ui.progress:last-child {
  margin: 0 !important;
}

.headerColor {
  position: fixed;
  top: 42px;
  height: 2px;
  width: 100vw;
  background: linear-gradient(to right, var(--color-header-gradient-start), var(--color-header-gradient-end));
  z-index: 999;
}

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

.img-table-container img {
  height: 100px !important;
  width: 80px !important;
  object-fit: cover;
}

.paginate_button {
  font-size: 12px;
}

#homeDashboardUserRanking_wrapper {
  font-size: 12px;
}

#homeDashboardUserRanking_length {
  text-align: left;
}

#homeDashboardUserRanking tr.even {
  background-color: var(--color-even);
}

#homeDashboardUserRanking tr:hover {
  background-color: var(--color-row-hover);
}

#chart-legends {
  color: #5f5e5e;
  font-size: 12px;
}

#chart-legends span {
  position: relative;
  bottom: 2px;
}

#chart-legends ul li {
  display: inline;
  margin-right: 10px;
}

.pieChartLegendColor {
  height: 14px;
  width: 40px;
  border: 1px solid #d6e2e2;
  margin-right: 5px;
  background-color: var(--color-max);
  display: inline-block;
}

.moneda-icon-container {
  display: inline-block;
  height: 25px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px;
  margin: 0 2px;
}

table .moneda-icon-container {
  height: 15px;
  margin: 0;
}

.nro-capacitados {
  font-size: 24px;
  margin-top: 10px;
}

#_ProcessPageEditDelete {
  display: none;
}

#mainRow {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.ui.footer {
  flex: 1;
}

.ui.footer p {
  color: #848484;
}

#filter-button-container {
  text-align: right;
}

#filter-content-container {
  position: relative;
}

#filter-content {
  position: absolute;
  z-index: 999;
  width: 500px;
  right: 0;
  top: 5px;
}

#filter-content.hidden {
  display: none;
}

#filter-content label {
  display: block;
  margin: 0 0 0.28571429rem 0;
  color: rgba(0, 0, 0, 0.87);
  font-size: 0.92857143em;
  font-weight: 700;
  text-transform: none;
}

#homeDashboardUserRanking_filter {
  display: none;
}

.hoverPointer:hover {
  cursor: pointer;
}

.mostrandoBoletin > td {
  border-top: 1px solid black !important;
}

.mostrandoBoletin > td:last-child {
  border-right: 1px solid black !important;
}

.mostrandoBoletin > td:first-child {
  border-left: 1px solid black !important;
}

.mostrandoBoletin {
  border: 1px solid black !important;
  border-bottom: none !important;
}

.ajaxBoletin {
  border: 1px solid black !important;
  border-top: none !important;
}

#chartUsuariosCapacitados .capacitadosLabel {
  font-size: 14px;
}

#chartUsuariosCapacitados .capacitadosNumber {
  font-weight: bold;
}

.batchError {
  border: 1px solid var(--color-batch-error) !important;
}

.displayNone {
  display: none !important;
}

#poweredbylog {
  position: absolute;
  bottom: 34px;
  width: 100%;
}

#poweredbylog p {
  position: relative;
  top: 15px;
  font-size: 10px;
  left: 10px;
  z-index: 999;
}

.ui.inverted.vertical.footer.segment {
  padding: 4px;
}

.elegida {
  font-weight: bold;
}

/* Round switch toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin: 0 10px;
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: var(--color-white);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

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

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

.homeDashGraphIcon {
  height: 20px;
  top: 7px;
  position: relative;
}

.dasboard-cards {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.summary-card {
  width: 300px;
  height: 200px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.summary-header {
  font-size: 16px;
  font-weight: bold;
  text-align: start;
}

.summary-number-one {
  font-size: 70px;
  font-weight: bold;
  color: var(--color-max);
}

.summary-number-two {
  font-size: 70px;
  font-weight: bold;
  color: rgb(255, 131, 9);
}

.summary-number-three {
  font-size: 70px;
  font-weight: bold;
  color: rgb(255, 99, 132);
}

.summary-number-four {
  font-size: 70px;
  font-weight: bold;
  color: rgb(61, 150, 174);
}

.summary-footer {
  font-size: 14px;
}

/* Contenedor general - Resumen detalle usuario */
.ui.grid.resumen-detalle-usuario {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  padding: 2rem;
  border-radius: 10px;
  margin-top: 2rem;
}

/* Nombre (header) */
.ui.grid.resumen-detalle-usuario .item a.header {
  color: var(--color-text) !important;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  display: block;
}

/* Datos del usuario */
.ui.grid.resumen-detalle-usuario .meta p {
  margin: 0.3rem 0;
  font-size: 1rem;
  color: var(--color-text);
}

/* Estadísticas */
.ui.grid.resumen-detalle-usuario .statistics .statistic {
  background-color: var(--color-bg-secondary);
  border-radius: 10px;
  padding: 1rem;
  margin: 1rem;
  text-align: center;
  color: var(--color-text);
}

/* Valor */
.ui.grid.resumen-detalle-usuario .statistics .value {
  font-size: 1.5rem;
  color: var(--color-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Etiqueta */
.ui.grid.resumen-detalle-usuario .statistics .label {
  color: var(--color-text);
  font-size: 1.2rem;
  margin-top: 0.5rem;
}

/* Íconos */
.ui.grid.resumen-detalle-usuario .statistics .icon {
  font-size: 1.5rem;
}

/* Ícono de moneda */
.ui.grid.resumen-detalle-usuario .moneda-icon-container {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* Número con ícono de moneda */
.ui.grid.resumen-detalle-usuario .statNum {
  font-weight: bold;
}

/* Contenedor usuarios training - Tablas */
.ui.table {
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-accent) !important;
}

.ui.table thead th {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  border-bottom: 2px solid var(--color-accent) !important;
}

.ui.table tbody tr {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border-top: 1px solid var(--color-accent) !important;
}

.ui.table tbody tr:hover {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text) !important;
}

.ui.table td {
  border-top: 1px solid var(--color-accent) !important;
  padding: 10px !important;
  color: var(--color-text) !important;
}

/* Barras de progreso */
.ui.progress {
  background-color: var(--color-bg-secondary) !important;
}

/* Tabs */
.ui.tabular.menu .item {
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text) !important;
  border-color: var(--color-accent) !important;
  border-start-start-radius: 15px !important;
  border-start-end-radius: 15px !important;
}

.ui.tabular.menu .item:hover {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text) !important;
}

/* DataTables paginación */
.dataTables_paginate .pagination.menu {
  background-color: var(--color-bg-primary);
}

.ui.pagination.menu a.paginate_button.item {
  color: var(--color-text);
}

.ui.pagination.menu div.paginate_button.item {
  color: var(--color-text);
}

.paginate_button.item:hover:not(.disabled):not(.active) {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
}

.paginate_button.item.active {
  background-color: var(--color-accent);
  color: var(--color-text);
  font-weight: bold;
  border-color: var(--color-accent);
}

.paginate_button.item.disabled {
  color: var(--color-text);
  opacity: 0.5;
  cursor: not-allowed;
}

.paginate_button.item.previous,
.paginate_button.item.next {
  color: var(--color-icon);
  min-width: 70px;
  text-align: center;
}

.ui.ordered.list .item::before {
  color: var(--color-text) !important;
}