/* ============================================
   RESPONSIVE — Breakpoints del sistema
   Cargado después de styles.css y panel.css.
   Solo contiene overrides — no define estilos base.
   ============================================ */

/* ============================================
   SIEMPRE — Sin media query
   width: 100% en .sidebar-page conflictúa con
   left + right en position:fixed — el browser
   ignora right:0 y el panel se extiende left_offset
   píxeles más allá del borde derecho del viewport.
   width: auto corrige esto: el browser calcula
   el ancho desde left hasta right correctamente.
   ============================================ */
.sidebar-page {
  width: auto;
}

/* ============================================
   BREAKPOINT 900px — Sidebar colapsa a íconos
   Libera espacio horizontal para el contenido.
   La sidebar pasa de 260px a 64px mostrando
   solo los íconos, sin labels ni logo.
   ============================================ */
@media (max-width: 900px) {

  /* Sidebar: ancho reducido a solo íconos */
  .sidebar {
    width: 64px;
  }

  /* Ocultar etiquetas de texto */
  .sidebar-label {
    display: none;
  }

  /* Ocultar logo del fondo — no cabe en 64px */
  .sidebar-logo {
    display: none;
  }

  /* Centrar íconos horizontalmente dentro del ítem */
  .sidebar-item {
    justify-content: center;
    padding: 8px;
  }

  /* Body: reducir offset izquierdo de 260px a 64px */
  body.sidebar-active {
    padding-left: 64px;
  }

  /* Header de home: arranca después de la sidebar colapsada */
  .home-header {
    left: 64px;
  }

  /* Paneles de herramientas: arrancan después de la sidebar colapsada */
  .sidebar-page {
    left: 64px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ============================================
     Contenido interno de paneles —
     El margin-left: 15% fue diseñado para pantallas
     anchas. Al achicar, se elimina para usar el
     espacio completo del panel (el padding de
     sidebar-page de 32px ya da margen suficiente).
     ============================================ */

  /* Notepad */
  .notepad-editor,
  .todo-section {
    margin-left: 0;
  }

  /* CIE-11 */
  .cie-panel-content {
    margin-left: 0;
  }

  /* Research / Metadata */
  .meta-panel-content {
    margin-left: 0;
  }

  /* Calendario */
  .cal-page .page-title,
  .cal-nav,
  .cal-grid,
  .cal-day-panel {
    margin-left: 0;
  }

  /* Sistema CI — usa calc(15% - 32px), vuelve a 0 */
  .sistema-page {
    margin-left: 0;
  }

  /* ============================================
     Calendario — fix grilla 7 columnas
     repeat(7, 1fr) tiene un mínimo implícito
     igual al contenido de cada celda, lo que
     causa overflow en ventanas angostas.
     minmax(0, 1fr) permite que las columnas
     lleguen a 0 — se adaptan al espacio real.
     ============================================ */
  .cal-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    max-width: 100%;
  }

}