/* VISTA MODERNA (Configuración → Apariencia → Vista moderna): menú lateral y superficies cálidas.
   Se carga encima de estilos.css solo cuando el usuario la elige. */
/* ---- Nueva interfaz: navegación lateral y superficies cálidas, inspirada en Escuela Viva ---- */
:root {
  --fondo: #faf9f6;
  --panel: #ffffff;
  --texto: #24231f;
  --suave: #6f6c64;
  --borde: #e5e1d8;
  --primario: #2f5d62;
  --primario-claro: #e7efed;
  --alto-fondo: #fce9e6;
  --bajo-fondo: #e8effa;
  --anormal-fondo: #fff3d8;
  --ok-fondo: #e8f3eb;
}
html { background: var(--fondo); }
body { background: var(--fondo); color: var(--texto); }

/* La barra existente se convierte en el menú lateral del aplicativo. */
.barra:not([hidden]) {
  position: fixed; inset: 0 auto 0 0; z-index: 15;
  width: 264px; height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
  padding: 15px 12px 12px; color: var(--texto); background: color-mix(in srgb, var(--primario) 22%, #f2f0ea);
  border-right: 1px solid var(--borde); box-shadow: 5px 0 22px rgba(36,35,31,.035);
}
.marca { display: flex; align-items: center; min-height: 54px; padding: 0 5px 13px; border-bottom: 1px solid var(--borde); }
.marca img { max-width: 100%; height: 38px; object-fit: contain; object-position: left center; padding: 0; background: transparent; border-radius: 0; }
nav#menu {
  display: flex; flex: 1 1 auto; min-height: 0; width: 100%; flex-direction: column; align-items: stretch;
  gap: 3px; overflow-y: auto; overflow-x: hidden; padding: 13px 0 10px; scrollbar-width: thin;
}
.barra:not([hidden]) > nav#menu { order: 2; }
nav#menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 39px; flex: none;
  padding: 8px 11px; border: 0; border-radius: 9px; text-align: left; color: #45443e;
  background: transparent; font: inherit; font-size: 14px; line-height: 1.3; cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
nav#menu button:hover { color: var(--primario); background: var(--primario-claro); transform: translateX(2px); }
nav#menu button.activo { color: var(--primario); background: var(--primario-claro); font-weight: 700; box-shadow: inset 3px 0 var(--primario); }
.globo-menu { margin-left: auto; }
.sello-auditor:not([hidden]) { order: 2; display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin: 0; padding: 10px 3px; border-top: 1px solid var(--borde); }
.sello-auditor span { color: #6b3aa3; font-size: 12px; text-shadow: none; letter-spacing: .04em; }
.salir-auditor { color: #5b2d8e; background: #fff; border: 1px solid #ddd2ea; border-radius: 8px; }
.controles {
  order: 3; display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: auto 0 0; padding: 12px 3px 2px; border-top: 1px solid var(--borde);
}
.estado-local { order: 0; display: flex; flex: 1 0 100%; align-items: center; gap: 8px; padding: 2px 4px 7px; color: var(--suave); font-size: 11.5px; }
.estado-local i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #16835d; }
.estado-local.sin-conexion i { background: #c17a18; }
.barra:not([hidden]) > #ctl-fecha { order: 1; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; padding: 13px 4px 2px; color: var(--suave); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.barra:not([hidden]) > #ctl-fecha input { width: 100%; min-height: 38px; padding: 6px 9px; border: 1px solid #d6d1c6; border-radius: 8px; background: #fff; color: var(--texto); font-size: 14px; }
.usuario-actual { order: 1; display: flex; flex: 1 0 100%; align-items: center; gap: 9px; min-width: 90px; padding: 8px 4px; color: var(--texto); font-size: 12px; overflow-wrap: anywhere; }
.avatar-sidebar { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: 50%; background: var(--primario); color: #fff; font-size: 11px; font-weight: 750; }
.datos-sidebar { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; }
.datos-sidebar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datos-sidebar span { color: var(--suave); font-size: 11.5px; }
.barra .boton-config { order: 3; display: flex; flex: 1 0 100%; align-items: center; justify-content: flex-start; gap: 8px; min-height: 38px; padding: 8px 10px; }
.barra .boton-config.activo { border-color: transparent; background: var(--primario-claro); color: var(--primario); font-weight: 700; }
.barra #salir { order: 5; flex: 1 0 100%; display: flex; justify-content: flex-start; min-height: 36px; }
.barra #btn-vista { order: 4; flex: 1 0 100%; justify-content: flex-start; }
.barra .campana { border-color: var(--borde); color: var(--primario); background: var(--panel); }
.barra .campana:hover, .barra .campana.activa { background: var(--primario-claro); }
.barra .campana .globo { border-color: #f2f0ea; }
.barra .btn { border-color: var(--borde); border-radius: 8px; background: #fff; color: var(--texto); }
.barra .btn:hover { border-color: var(--primario); color: var(--primario); }
.barra .btn.salir { color: #8e3328; }
.btn-menu { display: none; }
#menu button[data-vista="config"] { display: none; }
#campana, #btn-ayuda { position: fixed; z-index: 18; top: 13px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--borde); border-radius: 10px; background: #fff; color: var(--primario); box-shadow: 0 3px 12px rgba(36,35,31,.07); }
#campana { right: 62px; }
#btn-ayuda { right: 15px; font-weight: 750; font-size: 16px; }
#campana .globo { top: -5px; right: -5px; }

.config-crumb { max-width: 1320px; margin: 0 auto 20px; color: var(--suave); font-size: 13px; }
.config-crumb span { padding: 0 7px; color: #aaa59b; }
.config-crumb b { color: var(--texto); }
.config-layout { display: grid; grid-template-columns: minmax(190px, 220px) minmax(0, 1fr); gap: clamp(18px, 2.5vw, 34px); max-width: 1320px; margin: 0 auto; align-items: start; }
.config-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 7px; padding: 0 0 12px; }
.config-grupo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 5px; }
.config-grupo h3 { margin: 8px 10px 2px; color: var(--suave); font-size: 11px; font-weight: 650; letter-spacing: .07em; }
.config-grupo button { width: 100%; border: 0; border-radius: 9px; padding: 8px 10px; text-align: left; background: transparent; color: var(--texto); font: inherit; font-size: 13.5px; line-height: 1.3; cursor: pointer; transition: background .15s ease, color .15s ease; }
.config-grupo button:hover { background: #e9e6dd; color: var(--primario); }
.config-grupo button.activo { background: #e2ded3; color: var(--primario); font-weight: 650; }
.config-cuerpo { min-width: 0; }
.config-cuerpo > #config > .panel:first-child { margin-top: 0; }

main {
  width: auto; max-width: none; min-height: 100vh; margin: 0 0 0 264px;
  padding: 28px clamp(18px, 3vw, 42px) 54px;
}
body #barra[hidden] ~ main { margin-left: 0; }
#aviso-fecha, #aviso-conexion { margin-left: 264px; }
#barra[hidden] ~ #aviso-fecha, #barra[hidden] ~ #aviso-conexion { margin-left: 0; }
#aviso-fecha { box-shadow: 0 4px 16px rgba(36,35,31,.08); }
#vista > * { animation: aparecer-vista .2s ease-out both; }
@keyframes aparecer-vista { from { opacity: .55; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.panel { border-color: var(--borde); border-radius: 14px; padding: 1.25rem 1.35rem; box-shadow: 0 3px 15px rgba(36,35,31,.035); }
.panel + .panel { margin-top: 1rem; }
.btn, .tarjeta-empresa, .tarjeta-aud, .lista button, .pestanas button, .chip-filtro {
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn { border-radius: 8px; }
.btn:hover:not(:disabled) { box-shadow: 0 3px 10px rgba(36,35,31,.09); transform: translateY(-1px); }
.tarjeta-empresa, .tarjeta-aud { border-radius: 12px; }
.tarjeta-empresa:hover, .tarjeta-aud:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(36,35,31,.09); }
.lista button:hover { transform: translateX(2px); }
input, select, textarea { border-color: #d6d1c6; border-radius: 8px; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--primario) 23%, transparent); outline-offset: 0; border-color: var(--primario); }
table th { background: #f5f3ee; }
.tabla-dia th { background: #f0eee7; }
.tabla-res th, .tabla-res td { border-bottom-color: #eeeae2; }
.toast { border: 1px solid rgba(255,255,255,.18); border-radius: 12px; box-shadow: 0 12px 35px rgba(22,28,32,.2); }
body.modo-auditor { --primario: #68428f; --primario-claro: #f1e9f8; }
body.modo-auditor .barra:not([hidden]) { background: #f3eff7; }
body.modo-auditor nav#menu button.activo { box-shadow: inset 3px 0 #68428f; }

@media (max-width: 760px) {
  .barra:not([hidden]) {
    position: sticky; inset: auto; width: 100%; height: auto; max-height: 100dvh;
    overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px 8px;
    padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--borde); box-shadow: 0 4px 16px rgba(36,35,31,.08);
  }
  .marca { order: 0; flex: 1 1 45%; min-width: 120px; min-height: 40px; padding: 0; border: 0; }
  .marca img { height: 34px; max-width: min(100%, 190px); }
  .barra:not([hidden]) > #ctl-fecha { order: 3; flex: 1 0 100%; padding: 7px 0 2px; }
  .barra:not([hidden]) > #ctl-fecha input { min-height: 36px; }
  .barra:not([hidden]) > nav#menu { order: 4; }
  .btn-menu { order: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 38px; border: 1px solid var(--borde); border-radius: 9px; color: var(--texto); background: #fff; font-size: 20px; cursor: pointer; }
  #campana, #btn-ayuda { position: static; z-index: auto; width: 38px; height: 38px; box-shadow: none; }
  #campana { order: 1; margin-left: auto; position: relative; }  /* el globo con el número queda sobre la campana */
  #btn-ayuda { order: 1; }
  .btn-menu .icono-cerrar, body.menu-abierto .btn-menu .icono-abrir { display: none; }
  body.menu-abierto .btn-menu .icono-cerrar { display: inline; }
  nav#menu { display: none; order: 4; flex: 1 0 100%; max-height: min(62vh, 520px); padding: 8px 0 2px; border-top: 1px solid var(--borde); }
  body.menu-abierto nav#menu { display: flex; }
  nav#menu button { min-height: 42px; }
  .controles { order: 2; flex: 1 0 100%; margin: 0; padding: 7px 0 0; border-top: 1px solid var(--borde); }
  .controles .estado-local { flex: 1 0 100%; }
  .barra .boton-config, .barra #salir { flex: 1 1 46%; }
  .barra #btn-vista { flex: 1 0 100%; }
  .usuario-actual { flex: 1 1 100%; }
  .sello-auditor:not([hidden]) { order: 3; flex: 1 0 100%; padding: 7px 0 0; }
  main { margin: 0; min-height: calc(100vh - 60px); padding: 18px 13px 38px; }
  #aviso-fecha, #aviso-conexion { margin-left: 0; }
  .panel { padding: .95rem .9rem; border-radius: 12px; }
  .config-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .config-nav { position: static; flex-direction: row; align-items: flex-start; gap: 12px; overflow-x: auto; padding: 0 0 7px; }
  .config-grupo { min-width: max-content; flex: none; }
  .config-grupo h3 { margin: 3px 8px 4px; }
  .config-grupo button { width: auto; min-height: 34px; white-space: nowrap; }
  .config-crumb { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  .barra, #aviso-fecha, #aviso-conexion, .no-imprimir { display: none !important; }
  main { width: 100%; margin: 0; padding: 0; }
}

/* Preferencias personales tomadas de la interfaz de referencia */
.config-preferencia { margin: .8rem 0; }
.config-preferencia h3 { margin-bottom: .25rem; }
.config-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .7rem; }
.config-color { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .65rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); cursor: pointer; }
.config-color.activo { border-color: var(--primario); box-shadow: 0 0 0 2px var(--primario-claro); }
.muestra-color { width: 1rem; height: 1rem; border-radius: 50%; background: #0f5e9c; }
.color-verde { background: #24735f; } .color-morado { background: #68428f; } .color-vino { background: #9b3e54; } .color-naranja { background: #a65b12; }
.config-clave { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; gap: .7rem; margin-top: .7rem; }
.config-clave label { display: grid; gap: .25rem; font-size: .9rem; }
.config-actividad { margin-top: .7rem; }
html[data-texto=compacto] body { font-size: 14px; }
html[data-texto=grande] body { font-size: 17px; }
html[data-lectura=serif] body { font-family: Georgia, "Times New Roman", serif; }
html[data-tema=oscuro] { color-scheme: dark; --fondo: #191b1e; --panel: #24272b; --texto: #eceff1; --suave: #b0b8c1; --borde: #444a52; --primario-claro: #293b49; --alto: #ff8a80; --alto-fondo: #492d2c; --bajo: #8bbcff; --anormal: #ffd36b; --ok: #84d6a0; --bajo-fondo: #29384b; --anormal-fondo: #463c2c; --ok-fondo: #293f32; }
html[data-tema=oscuro] body { color: var(--texto); background: var(--fondo); }
html[data-tema=oscuro] .panel, html[data-tema=oscuro] .notif-lista > li, html[data-tema=oscuro] .btn,
html[data-tema=oscuro] input:not([type=checkbox]):not([type=radio]), html[data-tema=oscuro] select, html[data-tema=oscuro] textarea,
html[data-tema=oscuro] .pestanas button, html[data-tema=oscuro] .tarjeta-empresa, html[data-tema=oscuro] .config-color,
html[data-tema=oscuro] .lista button, html[data-tema=oscuro] .tabla-dia td, html[data-tema=oscuro] .tabla-examenes td { background-color: var(--panel); color: var(--texto); border-color: var(--borde); }
html[data-tema=oscuro] td, html[data-tema=oscuro] th { border-color: var(--borde); }
html[data-tema=oscuro] .informe, html[data-tema=oscuro] .caja, html[data-tema=oscuro] .login-form { background: var(--panel); color: var(--texto); }
html[data-tema=oscuro] .config-color.activo { border-color: var(--primario); }

/* Configuración: adaptación de los paneles de Apariencia y Seguridad */
html[data-dispositivo=tablet] .config-opciones > :is(.btn, .config-color),
html[data-dispositivo=movil] .config-opciones > :is(.btn, .config-color) { min-height: 44px; }
html[data-dispositivo=tablet][data-orientacion=vertical] .config-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
html[data-dispositivo=tablet][data-orientacion=vertical] .config-nav,
html[data-dispositivo=movil] .config-nav { position: static; flex-direction: row; align-items: flex-start; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 0 0 9px; }
html[data-dispositivo=tablet][data-orientacion=vertical] .config-grupo,
html[data-dispositivo=movil] .config-grupo { min-width: max-content; flex: none; }
html[data-dispositivo=tablet][data-orientacion=vertical] .config-grupo button,
html[data-dispositivo=movil] .config-grupo button { min-height: 42px; white-space: nowrap; }
html[data-dispositivo=tablet] .config-clave { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-dispositivo=tablet] .config-actividad { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
html[data-dispositivo=tablet] .config-actividad table { min-width: 620px; }
@media (max-width: 700px) {
  .config-layout { gap: 8px; }
  .config-nav { scroll-snap-type: x proximity; }
  .config-grupo { scroll-snap-align: start; }
  .config-grupo button { padding: 8px 11px; }
  .config-preferencia { padding: .9rem; margin: .6rem 0; }
  .config-opciones { gap: .4rem; }
  .config-opciones > .btn { flex: 1 1 calc(33.333% - .4rem); padding: .5rem .55rem; }
  .config-opciones > .config-color { flex: 1 1 calc(50% - .4rem); justify-content: flex-start; padding: .45rem .55rem; font-size: .88rem; }
  .config-clave { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .config-clave label, .config-clave input, .config-clave .btn { width: 100%; }
  .config-actividad { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .config-actividad table { min-width: 590px; }
  .config-crumb { overflow-wrap: anywhere; }
}

/* Salir conserva el mismo acabado visible que Configuración, también con tema oscuro */
.barra #salir { background: var(--primario-claro); color: var(--primario); border-color: transparent; font-weight: 700; }
.barra #salir:hover { background: var(--primario-claro); color: var(--primario); border-color: var(--primario); }
html[data-tema=oscuro] .barra:not([hidden]) { background: color-mix(in srgb, var(--primario) 24%, #f2f0ea); color: #24231f; }
html[data-tema=oscuro] .barra .btn { background: #fff; color: #24231f; border-color: #d5dbe3; }
html[data-tema=oscuro] .barra .boton-config.activo { background: var(--primario-claro); color: var(--primario); border-color: transparent; }
html[data-tema=oscuro] .barra #salir { background: var(--primario-claro); color: var(--primario); border-color: transparent; }
.config-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
.config-toggle span { display: grid; gap: .25rem; }
.config-toggle small { color: var(--suave); font-size: .88rem; }
.config-toggle input { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--primario); }
.config-sesiones { list-style: none; padding: 0; margin: .7rem 0 0; }
.config-sesiones li { display: flex; flex-direction: column; gap: .15rem; padding: .7rem 0; border-top: 1px solid var(--borde); }
.config-sesiones li span { color: var(--suave); font-size: .9rem; }

/* Contraste del modo oscuro: la barra lateral conserva texto oscuro sobre su fondo claro */
html[data-tema=oscuro] .barra:not([hidden]) { color: #24231f; }
html[data-tema=oscuro] .barra .estado-local,
html[data-tema=oscuro] .barra .datos-sidebar b,
html[data-tema=oscuro] .barra .datos-sidebar span,
html[data-tema=oscuro] .barra > #ctl-fecha { color: #45443e; }
html[data-tema=oscuro] .barra:not([hidden]) > #ctl-fecha input { background: #fff; color: #24231f; border-color: #c9c4b9; color-scheme: light; }
html[data-tema=oscuro] .barra nav#menu button { color: #45443e; }
html[data-tema=oscuro] .barra nav#menu button:hover,
html[data-tema=oscuro] .barra nav#menu button.activo { color: var(--primario); }

/* Filtros y acciones: evita texto pálido sobre botones blancos, y mantiene el color de las acciones */
html[data-tema=oscuro] :is(.chip-alcance, .chip-filtro, .pestanas button) { background: var(--panel); color: var(--texto); border-color: var(--borde); }
html[data-tema=oscuro] :is(.chip-alcance.activo, .chip-filtro.activo, .pestanas button.activo, .btn.primario) { background: var(--primario); color: #fff; border-color: var(--primario); }
html[data-tema=oscuro] .btn.agregar { background: #244532; color: #c6efd2; border-color: #4c8962; }
html[data-tema=oscuro] .btn.peligro { background: #4a2927; color: #ffd5d1; border-color: #995650; }
html[data-tema=oscuro] .btn.editar { background: #223a4e; color: #c9e5fb; border-color: #4c789a; }
html[data-tema=oscuro] :is(input, textarea)::placeholder { color: #aeb7c2; opacity: 1; }

/* Vista «Pacientes del día»: contraste de resultados y estados en tema oscuro */
html[data-tema=oscuro] .tabla-dia th { background: #30363d; color: #e3e7eb; }
html[data-tema=oscuro] .tabla-dia tr.contacto-entrega td { background: #2b3036; color: #d1d6dc; }
html[data-tema=oscuro] .valores-rapidos { color: #d8dee6; }
html[data-tema=oscuro] .valores-rapidos .res-alto { color: #ff9b91; }
html[data-tema=oscuro] .valores-rapidos .res-bajo { color: #8bbcff; }
html[data-tema=oscuro] .valores-rapidos .res-anormal { color: #ffd36b; }
html[data-tema=oscuro] .chip.pendiente { background: #343a40; color: #e3e7eb; }
html[data-tema=oscuro] .chip.completo { background: #244532; color: #c6efd2; }
html[data-tema=oscuro] .chip.validado { background: #183e57; color: #c9eaff; }
html[data-tema=oscuro] .chip.alerta { background: #4a2927; color: #ffd5d1; }
html[data-tema=oscuro] .tabla-dia .btn:disabled { opacity: .85; color: #c1c7ce; border-color: #555c64; }

/* Tema oscuro coherente en tablas, formularios de catálogo y tarjetas */
@media screen {
  html[data-tema=oscuro] table thead th { background: #30363d !important; color: #e3e7eb !important; border-color: #444a52 !important; }
  html[data-tema=oscuro] table tbody > tr > td,
  html[data-tema=oscuro] table tbody > tr > th { background: #24272b !important; color: #eceff1; border-color: #444a52 !important; }
  html[data-tema=oscuro] table tbody > tr:nth-child(even) > td,
  html[data-tema=oscuro] table tbody > tr:nth-child(even) > th { background: #2b3036 !important; }
  html[data-tema=oscuro] table tbody > tr:hover > td,
  html[data-tema=oscuro] table tbody > tr:hover > th { background: #343a40 !important; }
  html[data-tema=oscuro] table .sub,
  html[data-tema=oscuro] table .ayuda { color: #bfc7d0; }
  html[data-tema=oscuro] .tarjeta-empresa,
  html[data-tema=oscuro] .tarjeta-aud,
  html[data-tema=oscuro] .metricas > div { background: #24272b; color: #eceff1; border-color: #444a52; }
  html[data-tema=oscuro] .tarjeta-empresa b,
  html[data-tema=oscuro] .tarjeta-aud b { color: var(--primario); }
  html[data-tema=oscuro] .resumen-empresa { color: #d8dee6; }
  html[data-tema=oscuro] .tarjeta-aud.alerta { background: #3b2d23; border-color: #8b6138; }
  html[data-tema=oscuro] .editando,
  html[data-tema=oscuro] tr.editando td { background: #3a3527 !important; color: #f3ead1; }
  html[data-tema=oscuro] a:not(.btn) { color: #8cc5ff; }
}

/* Restaurar los selectores del menú y las acciones inferiores al acabado azul/beige */
.config-grupo button.activo { background: #e2ded3; color: #0f5e9c; }
.barra .boton-config.activo, .barra #salir { background: #e2ded3; color: #0f5e9c; border-color: transparent; font-weight: 700; }
.barra .boton-config.activo:hover, .barra #salir:hover { background: #e2ded3; color: #0f5e9c; border-color: #d6d1c6; }
html[data-tema=oscuro] .config-grupo button.activo { background: #e2ded3 !important; color: #0f5e9c !important; }
html[data-tema=oscuro] .barra .boton-config.activo,
html[data-tema=oscuro] .barra #salir { background: #e2ded3 !important; color: #0f5e9c !important; border-color: transparent !important; }
html[data-tema=oscuro] .barra .boton-config.activo:hover,
html[data-tema=oscuro] .barra #salir:hover { background: #e2ded3 !important; color: #0f5e9c !important; border-color: #d6d1c6 !important; }