/* =============================================================================
   SITECOL - Estilos Responsive Globales
   Soporta: móvil, tablet, laptop, desktop, TV
   Breakpoints: 576px, 768px, 992px, 1200px, 1400px
   ============================================================================= */

/* Tipografía de cuerpo unificada (login, etc.; el shell usa app_shell.css body.app-shell-body) */
body:not(.app-shell-body) {
  font-size: 0.875rem;
  line-height: 1.45;
}

/* ===== Navbar: nombre empresa + icono pegados a la izquierda (todo el sistema) ===== */
nav.navbar,
.main-navbar { padding-left: 5px !important; }
nav.navbar .container-fluid {
  padding-left: 5px !important;
  padding-right: 12px !important;
  max-width: none !important;
  margin-left: 0 !important;
}
nav.navbar .navbar-brand,
.navbar .navbar-brand { margin-left: 0 !important; margin-right: 0 !important; }
.navbar-brand.mx-auto,
.navbar-brand.text-center { margin-left: 0 !important; margin-right: 0 !important; }
.navbar-brand.ml-4,
.navbar-brand.ml-2 { margin-left: 0 !important; }
.main-navbar .navbar-brand { padding-left: 5px !important; margin-left: 0 !important; }

/* Base: imágenes y elementos fluidos */
img, video, iframe { max-width: 100%; height: auto; }
table { width: 100%; }

/* Tablas: scroll horizontal en pantallas pequeñas */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
  .table-responsive { font-size: 0.9rem; }
  .table th, .table td { padding: 0.5rem; white-space: nowrap; }
}
@media (max-width: 575px) {
  .table th, .table td { padding: 0.4rem; font-size: 0.85rem; }
}

/* Contenedores fluidos */
.container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }
@media (min-width: 768px) {
  .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}
@media (min-width: 1200px) {
  .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1400px) {
  .container-fluid { max-width: 1600px; margin-left: auto; margin-right: auto; }
}

/* Botones y acciones: apilar en móvil */
.btn-group-responsive { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.btn-group-responsive .btn { margin: 0.25rem 0.25rem 0 0; }
@media (max-width: 767px) {
  .btn-group-responsive .btn { width: 100%; margin: 0.25rem 0; }
}
@media (min-width: 768px) {
  .btn-group-responsive .btn { width: auto; }
}

/* Header con título + botones */
.header-responsive {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.header-responsive .header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 767px) {
  .header-responsive { flex-direction: column; align-items: stretch; }
  .header-responsive .header-actions { flex-direction: column; }
  .header-responsive .header-actions .btn { width: 100%; margin: 0; }
}

/* Nav tabs: scroll horizontal en móvil */
.nav-tabs-responsive {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.nav-tabs-responsive::-webkit-scrollbar { display: none; }
.nav-tabs-responsive .nav-link { white-space: nowrap; }
@media (min-width: 768px) {
  .nav-tabs-responsive { flex-wrap: wrap; overflow-x: visible; }
}

/* Formularios: columnas responsivas */
.form-row-responsive .form-group { margin-bottom: 0.75rem; }
@media (min-width: 768px) {
  .form-row-responsive { display: flex; flex-wrap: wrap; margin: 0 -0.5rem; }
  .form-row-responsive .form-group { flex: 1 1 auto; min-width: 150px; padding: 0 0.5rem; }
}

/* Modales: ancho completo en móvil */
@media (max-width: 767px) {
  .modal-dialog { max-width: calc(100vw - 20px) !important; margin: 10px auto !important; }
  .modal-body { padding: 1rem; }
  .modal-header, .modal-footer { padding: 0.75rem 1rem; }
}

/* Cards: apilar en móvil */
@media (max-width: 767px) {
  .card { margin-bottom: 1rem; }
  .card-body { padding: 1rem; }
}

/* Utilidades */
.d-none-mobile { display: block !important; }
.d-block-mobile { display: none !important; }
@media (max-width: 767px) {
  .d-none-mobile { display: none !important; }
  .d-block-mobile { display: block !important; }
}

/* Espaciado responsive */
@media (max-width: 575px) {
  .py-responsive { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
  .px-responsive { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
}

/* Texto: evitar overflow */
h1, h2, h3, h4, h5, h6 { word-wrap: break-word; overflow-wrap: break-word; }
@media (max-width: 575px) {
  .h4, h4 { font-size: 1.15rem; }
  .h5, h5 { font-size: 1.05rem; }
}

/* Login: responsive en móvil (page flex-centrada en login.html) */
@media (max-width: 575px) {
  .login-page__main { padding-top: 1.25rem; padding-bottom: 0.5rem; }
  .login-box { padding: 1.5rem 1rem 1.25rem !important; margin-top: 0 !important; }
  .logo { font-size: 1.75rem !important; }
}

/* TV / pantallas grandes: limitar ancho máximo */
@media (min-width: 1920px) {
  .container-fluid { max-width: 1800px; }
}