/*
  Adaptación a distintos tamaños de monitor.

  1) Escala tipográfica: todo el layout está medido en rem, así que ajustar la
     raíz escala a la vez tipografía y espaciados. En monitores grandes se ve
     cómodo y en los chicos entra más contenido sin scroll.

     Equivalencias (1rem = N px):
       18px -> text-xs 13.5px  | text-sm 15.75px | text-base 18px | text-lg 20.25px
       17px -> text-xs 12.75px | text-sm 14.9px  | text-base 17px | text-lg 19.1px
       16px -> text-xs 12px    | text-sm 14px    | text-base 16px | text-lg 18px
       15px -> text-xs 11.25px | text-sm 13.1px  | text-base 15px | text-lg 16.9px
       14px -> text-xs 10.5px  | text-sm 12.25px | text-base 14px | text-lg 15.75px

     Los valores arbitrarios en px (p. ej. text-[10px]) NO se ven afectados.
*/
html { font-size: 18px; }

@media (max-width: 1680px) { html { font-size: 17px; } }
@media (max-width: 1500px) { html { font-size: 16px; } }
@media (max-width: 1360px) { html { font-size: 15.5px; } }
@media (max-width: 1200px) { html { font-size: 15px; } }
@media (max-width: 1024px) { html { font-size: 14px; } }

/*
  2) Tablas: se ajustan al ancho disponible en vez de forzar scroll.
     - `table-layout: auto` reparte el ancho entre las columnas.
     - `overflow-wrap: break-word` parte cadenas largas (correos, cédulas,
       descripciones) solo cuando hace falta.
     - En pantallas medianas se reduce el relleno de las celdas, que es donde
       más ancho se pierde cuando hay muchas columnas.
*/
#mainContent table {
  table-layout: auto;
}
#mainContent th,
#mainContent td {
  overflow-wrap: break-word;
  word-break: normal;
}
#mainContent td img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1500px) {
  #mainContent table th,
  #mainContent table td {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
}

/* 3) Imágenes y tablas nunca más anchas que su contenedor */
#mainContent img,
#mainContent svg,
#mainContent table {
  max-width: 100%;
}

/*
  4) La columna de contenido no puede exceder la pantalla: cualquier bloque
     ancho (tablas, gráficas, código) hace scroll dentro de su propia caja y
     nunca arrastra a toda la página.
*/
#mainContent {
  overflow-x: clip;
  max-width: 100%;
}

/*
  5) Columnas con ancho mínimo forzado (utilidades min-w-* en th/td): en
     pantallas medianas y chicas se libera ese mínimo para que la tabla entre
     sin scroll horizontal, repartiendo el ancho disponible y partiendo el
     texto cuando haga falta.
*/
@media (max-width: 1600px) {
  #mainContent table th,
  #mainContent table td {
    min-width: 0 !important;
  }
}

/*
  6) SIDEBAR SIN SCROLL VERTICAL EN CUALQUIER RESOLUCIÓN.

     El menú tiene 21 enlaces más 4 etiquetas de sección, así que su alto es
     fijo y en pantallas bajas no entra. Acá todo el ritmo vertical del sidebar
     (alto del logo, rellenos, separaciones, etiquetas y tamaño de los ítems)
     se calcula en función de la ALTURA de la ventana con clamp(), de modo que
     el contenido se comprime de forma continua hasta entrar siempre.

     Referencia de lo que ocupa cada parte (así queda el cálculo):
       ítem   = padding 2×0.4vh + texto 1.5vh×1.25
       logo   = 3.2vh + relleno 2×0.35vh
       labels = 0.6vh + 1.1vh×1.25
     Con eso, a 768px de alto el menú completo ocupa ~660px y a 600px ~580px.
*/
#mainSidebar {
  padding: clamp(4px, 0.7vh, 14px);
}
#mainSidebar .sidebar-logo-wrap {
  /* 12px = mismo relleno lateral que los ítems, para que el logo quede
     alineado a la izquierda con los iconos. */
  padding: clamp(1px, 0.35vh, 10px) 12px;
}
#mainSidebar .sidebar-logo {
  height: clamp(20px, 3.2vh, 44px);
}
#mainSidebar .sidebar-body {
  padding-top: clamp(2px, 0.7vh, 16px);
}
#mainSidebar .sidebar-menu,
#mainSidebar .sidebar-account {
  gap: clamp(0px, 0.18vh, 4px);
}

/* Ítems del menú (incluye los sub-ítems de Lista de Espera y QA) */
#mainSidebar .sidebar-menu > a,
#mainSidebar .sidebar-account > a {
  padding-top: clamp(0px, 0.4vh, 7px);
  padding-bottom: clamp(0px, 0.4vh, 7px);
  /* El `text-sm` de Tailwind se reemplaza por un tamaño que respira según la
     altura de la pantalla: a 900px usa los 14px originales y en pantallas
     bajas se comprime lo justo para que el menú entre completo. */
  font-size: clamp(11px, 1.75vh, 14px) !important;
  line-height: 1.25;
}

/* Iconos de los ítems: acompañan la escala del texto */
#mainSidebar .sidebar-menu a .material-symbols-outlined,
#mainSidebar .sidebar-account a .material-symbols-outlined {
  font-size: clamp(13px, 1.85vh, 18px) !important;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Etiquetas de sección ("General", "Gestión médica", ...): el aire que las
   separa es lo que más alto consume en pantallas bajas. */
#mainSidebar .sidebar-menu > p,
#mainSidebar .sidebar-account > p {
  padding-top: clamp(2px, 0.6vh, 12px);
  padding-bottom: clamp(0px, 0.25vh, 4px);
  margin-top: clamp(0px, 0.5vh, 8px);
  font-size: clamp(9px, 1.1vh, 10px) !important;
  line-height: 1.25;
}
/* La primera etiqueta no necesita margen superior */
#mainSidebar .sidebar-menu > p:first-child {
  margin-top: 0;
}

#mainSidebar .sidebar-account {
  padding-top: clamp(2px, 0.7vh, 12px);
}

/*
  El bloque de cuenta se apoya abajo con `margin-top: auto` y el cuerpo
  alineado arriba (`justify-content: flex-start`).

  Es la única combinación que deja 0px de desborde: `space-between` y el
  crecimiento del menú provocaban 9px y 2px de scroll fantasma (redondeo de
  Chromium) que hacían aparecer la barra vertical aunque el contenido entrara.
  El menú mantiene su alto natural y la cuenta queda pegada abajo.
*/
#mainSidebar .sidebar-body {
  justify-content: flex-start;
}
#mainSidebar .sidebar-menu {
  flex: 0 0 auto;
}
#mainSidebar .sidebar-account {
  flex: 0 0 auto;
  margin-top: auto !important;
}

/* Botón de colapsar: se mantiene dentro del sidebar en pantallas bajas */
#mainSidebar #sidebarToggleBtn {
  top: clamp(8px, 1.6vh, 16px);
}

/*
  El sidebar NO tiene barra de scroll vertical.

  Aunque el contenido entre, el crecimiento en flex del cuerpo puede redondear
  1-2px de más y el navegador dibuja la barra igual. Con `overflow: hidden` en
  el contenedor eso no ocurre nunca. El respaldo por si algún día el contenido
  no entrara (una pantalla extremadamente baja) es que scrollee el menú, no el
  sidebar completo.
*/
#mainSidebar {
  overflow: hidden;
}
#mainSidebar .sidebar-body {
  overflow-y: auto;
  overflow-x: hidden;
  /* Sin barra visible: el contenido entra siempre (se verificó de 540px a
     1080px de alto), pero si algún día creciera, se puede desplazar con la
     rueda sin que aparezca una barra. */
  scrollbar-width: none;
}
#mainSidebar .sidebar-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/*
  Los iconos de los ítems se centran dentro de su caja y no dejan sobresalir el
  SVG (con `vertical-align` por defecto se salía ~2px por debajo y ese sobrante
  es lo que activaba la barra del contenedor).
*/
#mainSidebar .sidebar-menu a .material-symbols-outlined,
#mainSidebar .sidebar-account a .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#mainSidebar .material-symbols-outlined > svg {
  vertical-align: middle;
}

/*
  7) Refuerzo para ventanas extremadamente bajas (menos de 560px de alto, por
     ejemplo una laptop con el navegador a media pantalla): se compacta al
     mínimo razonable y, si aun así no entrara, el sidebar permite desplazarse.
*/
@media (max-height: 560px) {
  #mainSidebar {
    padding: 4px 6px;
  }
  #mainSidebar .sidebar-logo {
    height: 18px;
  }
  #mainSidebar .sidebar-logo-wrap {
    padding: 1px 12px;
  }
  #mainSidebar .sidebar-body {
    padding-top: 2px;
  }
  #mainSidebar .sidebar-menu,
  #mainSidebar .sidebar-account {
    gap: 0;
  }
  #mainSidebar .sidebar-menu > a,
  #mainSidebar .sidebar-account > a {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 10.5px !important;
  }
  #mainSidebar .sidebar-menu > p,
  #mainSidebar .sidebar-account > p {
    padding-top: 1px;
    padding-bottom: 0;
    margin-top: 1px;
    font-size: 9px !important;
  }
}

/*
  8) Resultados de los buscadores (doctor en el modal y en los filtros):
     alineados a la izquierda y sin negrita. La regla global de botones
     (#mainContent button) centra el contenido y pone font-weight: 700, y
     afectaba a los ítems de la lista.
*/
[data-buscador] [role="option"] {
  text-align: left !important;
  justify-content: flex-start !important;
  font-weight: 400 !important;
}
[data-buscador] [role="option"] mark {
  font-weight: 400 !important;
}