/* Global responsive helpers (mobile-first).
   Se aplican SOLO al panel (body.panel) para no romper el login u otras
   páginas que también usan clases comunes como .wrap.
*/

html{ -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:border-box; }
img,video{ max-width:100%; height:auto; }

/* Evitar roturas raras de palabras (no aplicar al body). */
body.panel td,
body.panel th,
body.panel .hint,
body.panel .pill,
body.panel .msg,
body.panel code,
body.panel .card{ overflow-wrap:break-word; word-break:normal; }
.break-all, body.panel code{ word-break:break-all; }

/* Headers: permitir wrap. */
body.panel header .top,
body.panel header .brand{ flex-wrap:wrap; }
body.panel header .user{ flex-wrap:wrap; gap:10px; }

/* <= 840px: apilar marca y acciones para evitar que el titulo quede en una columna minima. */
@media (max-width: 840px){
  body.panel header .brand{ flex-direction:column !important; align-items:flex-start !important; }
  body.panel header .user{ width:100% !important; justify-content:flex-start !important; align-items:center !important; }
}

/* <= 780px: stack de formularios y tablas con scroll si no entran. */
@media (max-width: 780px){
  body.panel .wrap{ padding:14px 12px !important; }

  /* Grids de 12 col -> 1 col */
  body.panel .row{ gap:12px !important; }
  body.panel .row > *{ grid-column:span 12 !important; }
  body.panel .grid{ gap:12px !important; }
  body.panel .grid > *{ grid-column:span 12 !important; }

  body.panel input,
  body.panel select,
  body.panel textarea{ max-width:100%; }

  /* Tabs: mejor scroll horizontal que aplastar */
  body.panel .tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap !important; }
  body.panel .tab{ white-space:nowrap; }

  /* Tablas: mantener accesible via scroll horizontal */
  body.panel table{ width:100%; }
  body.panel table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body.panel th, body.panel td{ vertical-align:top; }

  /* Texto largo dentro de celdas: permitir wrap */
  body.panel td .detalle-full,
  body.panel td details{ white-space:normal; }
}

/* <= 560px: botones del header a ancho completo (evita overflow). */
@media (max-width: 560px){
  body.panel header .user .btn,
  body.panel header .user .btn2{ width:100%; justify-content:center; }
}



/* Audiovisual / Forms: acciones (Guardar/Cancelar) */
/* Evitar que el contenido del card sobresalga */
body.panel .card{ overflow:hidden; }

/* El form row debe wrapear sí o sí */
body.panel form.row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
}

/* Acciones: siempre en su propia fila (NO puede sobresalir) */
body.panel form.row .form-actions{
  flex: 1 1 100% !important;
  width: 100%;
  min-width: 0;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top: 8px;
  padding-right: 0; /* por si alguna regla mete padding raro */
}

/* Botones: que no generen overflow por contenido */
body.panel form.row .form-actions .btn,
body.panel form.row .form-actions .btn2{
  max-width: 100%;
}

/* Móvil: full width */
@media (max-width: 560px){
  body.panel form.row .form-actions{
    flex-direction:column;
    align-items:stretch;
  }
  body.panel form.row .form-actions .btn,
  body.panel form.row .form-actions .btn2{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}