html {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    height: 100%;
}
:root {
    --pico-font-size: 16px !important;
}

header{
    display: flex;
    justify-content: space-between;
    background-color: var(--pico-primary-background);
    color: #fff;
    padding: 2.5px 7.5px !important;
    align-items: center;
}
header h3{margin: 0; color: inherit !important;}
main.container {
    flex: 1;
    --pico-spacing: 0.5rem
}
footer {
    padding: 5px !important;
    margin: 0 !important;
    /* position: fixed !important;
    bottom: 0 !important; */
}
footer,
.menu {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

footer a[role='button'],
footer button,
.menu a[role='button'],
.menu button {
    padding: 0.25rem !important;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    border-radius: var(--pico-border-radius);
    border: none;
}
footer a[role='button'] svg,
footer button svg,
.menu a[role='button'] svg,
.menu button svg {
    height: 40px;
    color: inherit;
}

article b[aria-busy='true']{
    filter: brightness(0) invert(0);
}
article small {
    display: block;
    line-height: 1;
}

@media (max-width: 600px) {
    .appheader {
        display: none;
    }
}

/* Pantalla completa fija por encima de PicnicCSS */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95); /* Fondo semitransparente blanco */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999; /* Por encima de los modales de PicnicCSS */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ==========================================
   LOADER OVERLAY - SOPORTE MODO CLARO (Default)
   ========================================== */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95); /* Fondo claro semitransparente */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Clase para ocultar el loader */
.loader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Spinner circular */
.loader-spinner {
  width: 75px;
  height: 75px;
  border: 4px solid #eeeeee;     /* Fondo del anillo en modo claro */
  border-top: 4px solid #0074d9; /* Color principal (Azul PicnicCSS) */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==========================================
   SOPORTE MODO OSCURO (Ajuste automático)
   ========================================== */
@media (prefers-color-scheme: dark) {
  .loader-overlay {
    background-color: rgba(17, 17, 17, 0.95); /* Fondo oscuro (típico de PicnicCSS oscuro) */
  }

  .loader-spinner {
    border-color: #333333;         /* Fondo del anillo más oscuro para que contraste */
    border-top-color: #0074d9;     /* Mantiene el color azul eléctrico, ideal para modo oscuro */
  }
}



li {margin: 0; border-bottom: 1px solid grey;}

#connection {
    width: 24px;
    height: 24px;
    background-color: #0f0;
    color: black;
    border-radius: 50%;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    border: 1px solid #0008;
    flex-direction: column;
}

header a[role="button"] {
    padding: 1px 5px;
}
@media only screen and (prefers-color-scheme: dark) {
    :host(:not([data-theme])), :scope:not([data-theme]) {
        --pico-color: #fff;
    }
}