@media (max-width: 1100px){
  .layout{grid-template-columns:360px 1fr}
  .document{padding:24px}
  .cat-layout{grid-template-columns:190px 1fr}
}
@media (max-width: 860px){
  /* En celular, el panel y el documento se apilan verticalmente */
  .layout{display:flex; flex-direction:column; height:auto; min-height:100vh}
  
  /* El panel de control ocupa toda la pantalla pero con scroll interno */
  .panel{
    width: 100%;
    height: 50vh; /* Ocupa la mitad de la pantalla */
    border-right: none;
    border-bottom: 2px solid var(--primary);
    padding: 10px;
  }
  
  /* El documento ocupa la otra mitad */
  .preview-wrap{
    width: 100%;
    min-height: 50vh;
    overflow: auto;
  }

  /* Ajustar el header para que los botones quepan en móvil */
  .app-header { flex-direction: column; padding: 10px; gap: 10px; }
  .header-actions { justify-content: center; width: 100%; flex-wrap: wrap; }
  .header-actions .btn { font-size: 11px; padding: 6px 8px; }
  
  .brand { width: 100%; justify-content: center; text-align: center; }
  .brand h1 { font-size: 14px; white-space: normal; }

  /* Ocultar el panel de vista previa si estamos editando en móvil (opcional) */
  .document{ width:100%; padding:15px; }
  .add-row{ grid-template-columns:1fr; }
  .add-row button { width: 100%; }
  
  .stats-row-2, .charts-row, .kpi-grid { grid-template-columns: 1fr; }
  .cat-layout { grid-template-columns: 1fr; }
}