/* ============================================================
   TERRA CONSULTORES — Estación Meteorológica El Bajío
   Estilo: Revista Editorial Corporativa Premium
   Paleta: Blanco Puro (#ffffff) · Azul Marino (#0a192f) · Verde Lima (#7cd100)
   Fuente: Montserrat (Google Fonts)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── 1. TOKENS Y VARIABLES ── */
:root {
  /* Color Principal */
  --c-white:         #ffffff;
  --c-bg-page:       #ffffff;
  --c-bg-subtle:     #f9fafb;
  
  /* Azul Marino Corporativo (Terra Consultores) */
  --c-navy-deep:     #0a192f;
  --c-navy-mid:      #0f2c59;
  --c-navy-light:    #1a365d;

  /* Verde Lima Vibrante (Interacciones) */
  --c-lime:          #7cd100;
  --c-lime-hover:    #68b300;
  --c-lime-faded:    rgba(124, 209, 0, 0.1);

  /* Escala de Grises (Editorial) */
  --c-text-main:     #1f2937;
  --c-text-muted:    #4b5563;
  --c-text-light:    #9ca3af;
  --c-border:        #e5e7eb;
  --c-divider:       #f3f4f6;

  /* Tipografía */
  --font-primary:    'Montserrat', system-ui, -apple-system, sans-serif;
  --base-size:       16px; /* Base 16px o 15px según dispositivo */
  --line-height:     1.6;

  /* Estructura y Espaciado (Amplitud Editorial) */
  --sp-xs:   0.5rem;
  --sp-sm:   1rem;
  --sp-md:   2rem;
  --sp-lg:   4rem;
  --sp-xl:   6rem;
  --radius:  4px; /* Bordes sutiles, no redondeados genéricos */
}

/* ── 2. RESET MODERNO ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--base-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  background-color: var(--c-bg-page);
  color: var(--c-text-main);
  line-height: var(--line-height);
}

/* ── 3. TIPOGRAFÍA Y JERARQUÍA EDITORIAL ── */
h1, h2, h3, h4, h5, h6 {
  color: var(--c-navy-deep);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--sp-sm);
  letter-spacing: -0.02em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
  color: var(--c-text-muted);
  margin-bottom: var(--sp-sm);
}

a {
  color: var(--c-lime);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--c-navy-deep);
}

/* ── 4. LÍNEAS DIVISORIAS SUTILES ── */
hr, .divider {
  border: none;
  height: 1px;
  background-color: var(--c-divider);
  margin: var(--sp-lg) 0;
}

.divider-short {
  width: 60px;
  height: 3px;
  background-color: var(--c-lime);
  margin: var(--sp-md) 0;
}

/* ── 5. ESTRUCTURA Y CONTENEDORES ── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-md);
}

.header-main {
  background-color: var(--c-navy-deep);
  color: var(--c-white);
  padding: var(--sp-sm) var(--sp-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── 6. PESTAÑAS SUPERIORES (TABS) ── */
.nav-tabs {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  background-color: var(--c-bg-page);
  padding: 0 var(--sp-md);
  gap: var(--sp-md);
}

.nav-tab {
  padding: var(--sp-sm) 0;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--c-text-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent; /* Reserva el espacio del borde */
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.nav-tab:hover {
  color: var(--c-navy-deep);
}

.nav-tab.active {
  color: var(--c-navy-deep);
  font-weight: 700;
  border-bottom-color: var(--c-lime);
}

/* Ocultar / Mostrar contenido de pestañas */
.tab-content {
  display: none;
  padding: var(--sp-lg) 0;
  animation: fadeIn 0.4s ease forwards;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 7. BOTONES PREMIUM ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background-color: var(--c-lime);
  color: var(--c-navy-deep);
}

.btn-primary:hover {
  background-color: var(--c-lime-hover);
  color: var(--c-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 209, 0, 0.2);
}

.btn-secondary {
  background-color: transparent;
  color: var(--c-navy-deep);
  border: 1px solid var(--c-navy-deep);
}

.btn-secondary:hover {
  background-color: var(--c-navy-deep);
  color: var(--c-white);
}

/* ── 8. TABLAS EDITORIALES (ZEBRA) ── */
.table-container {
  width: 100%;
  overflow-x: auto;
  margin-bottom: var(--sp-md);
}

.table-editorial {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  text-align: left;
}

.table-editorial th {
  background-color: var(--c-navy-deep);
  color: var(--c-white);
  font-weight: 600;
  padding: var(--sp-sm) var(--sp-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

.table-editorial td {
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-muted);
}

.table-editorial tr:nth-child(even) {
  background-color: var(--c-bg-subtle);
}

.table-editorial tr:hover {
  background-color: var(--c-lime-faded);
  transition: background-color 0.2s ease;
}

/* ── 9. FORMULARIOS (Elegantes y Limpios) ── */
.form-group {
  margin-bottom: var(--sp-md);
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-navy-deep);
  margin-bottom: var(--sp-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--c-text-main);
  background-color: var(--c-bg-page);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--c-lime);
  box-shadow: 0 0 0 3px var(--c-lime-faded);
}

/* ══════════════════════════════════════════════════════════════
   10. SISTEMA ADMIN — CENTRO DE MANDO (Fuente única de verdad)
       Consumido por: index.php · usuarios.php · registro_actividad.php
   ══════════════════════════════════════════════════════════════ */

/* ── VARIABLES DEL ADMIN (complementan las globales) ── */
:root {
  --admin-nav-bg:   #0a2e4d;   /* Azul Marino Profundo oficial */
  --admin-hub-bg:   #0d3a63;   /* Variante ligeramente más clara para el hub */
  --admin-lime:     #7cd100;   /* Verde Lima corporativo */
  --admin-font:     'Montserrat', system-ui, sans-serif;
  --admin-btn-h:    36px;      /* Altura fija de todos los botones de la barra */
  --admin-tab-size: 15px;      /* Tamaño de fuente unificado de las pestañas */
  --admin-btn-size: 15px;      /* Tamaño de fuente unificado de los botones */
}

/* ── TOPBAR ── */
.cmd-topbar {
  background-color: var(--admin-nav-bg);
  color: #ffffff;
  padding: 0 2rem;
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* BRANDING — Solucion definitiva al bug de color negro */
.cmd-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cmd-brand h1,
.cmd-topbar h1,
.cmd-topbar .brand-name {
  font-family: var(--admin-font) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;   /* Override de la regla global h1 { color: navy } */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 !important;
  line-height: 1 !important;
}

.cmd-brand .sep {
  color: var(--admin-lime);
  opacity: 0.6;
  font-weight: 300;
}

.cmd-brand .sub {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Nombre del usuario autenticado */
.cmd-user-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--admin-font);
  font-size: var(--admin-btn-size);
  font-weight: 500;
  padding-right: 0.75rem;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  height: var(--admin-btn-h);
}

.cmd-user-name svg {
  width: 14px;
  height: 14px;
  stroke: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}

/* Acciones de la derecha */
.cmd-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── BOTONES DEL HEADER (tamaño y padding idénticos en las 3 vistas) ── */
.btn-portal-link,
.btn-exit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: var(--admin-btn-h);
  padding: 0 16px;
  font-family: var(--admin-font);
  font-size: var(--admin-btn-size);   /* 15px fijo */
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.btn-portal-link svg,
.btn-exit svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.btn-portal-link:hover {
  border-color: var(--admin-lime);
  color: var(--admin-lime);
  background: rgba(124, 209, 0, 0.08);
}

.btn-exit:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

/* ── DASHBOARD HUB — pestañas de navegación ── */
.cmd-hub {
  background-color: var(--admin-hub-bg);
  display: flex;
  gap: 0;
  padding: 0 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 0;
}

/* ── PESTAÑAS DEL HUB (clase canónica: .hub-link) ── */
.hub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 1.2rem;
  height: 48px;                        /* Altura fija → sin brincos entre páginas */
  font-family: var(--admin-font);
  font-size: var(--admin-tab-size);    /* 15px fijo */
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 3px solid transparent;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
  white-space: nowrap;
  box-sizing: border-box;
}

.hub-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
}

.hub-link:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.04);
}

/* Pestaña activa: solo cambia color y borde, NO el tamaño de caja */
/* Hub links as buttons (portal usuario) — reset nativo del browser */
button.hub-link {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}

.hub-link.active {
  color: var(--admin-lime);
  border-bottom-color: var(--admin-lime);
  background: rgba(124, 209, 0, 0.05);
  font-weight: 700;
}

.hub-link.active svg {
  stroke: var(--admin-lime);
}

/* ── HAMBURGER — solo visible en móvil ── */
.hub-hamburger {
  display: none;          /* oculto en escritorio */
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  padding: 0 1rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: rgba(255,255,255,0.75);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color 0.18s;
}

.hub-hamburger:hover,
.hub-hamburger.open {
  color: #7cd100;
}

.hub-hamburger .ham-icon,
.hub-hamburger .ham-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hub-hamburger svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  transition: transform 0.2s;
}

.hub-hamburger.open .icon-menu  { display: none; }
.hub-hamburger .icon-close      { display: none; }
.hub-hamburger.open .icon-close { display: inline-flex; }

/* ── WRAPPER de enlaces del hub ── */
.hub-links-wrapper {
  display: flex;   /* escritorio: fila horizontal */
  flex: 1;
}

/* ── Formulario de Carga de Reportes (Premium Flex Layout) ── */
.upload-report-form {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  width: 100%;
}

.upload-report-form .form-group {
  margin-bottom: 0;
}

.upload-report-form .fg-periodo {
  flex: 1;
  min-width: 250px;
}

.upload-report-form .fg-clasificacion {
  flex: 1;
  min-width: 180px;
}

.upload-report-form .fg-archivo {
  flex: 2;
  min-width: 250px;
}

.upload-report-form .select-pointer {
  cursor: pointer;
}

.upload-report-form .file-input-style {
  padding: 0.5rem;
  background: #fcfcfc;
}

.upload-report-form .btn-upload-submit {
  padding: 0.75rem 2rem;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   11. RESPONSIVE MÓVIL — Parche definitivo
   Cubre: portal usuario · login · admin hub · tablas · grids
   ══════════════════════════════════════════════════════════════ */

/* ── Ancla global: nada puede desbordar el viewport ── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Todas las imágenes son fluidas por defecto ── */
img { max-width: 100%; height: auto; display: block; }

/* ══════════════ BREAKPOINT PRINCIPAL 768px ══════════════ */
@media (max-width: 768px) {

  /* ─────────────────────────────────────────────────────────
     11.1  PORTAL DE USUARIO — Topbar (.portal-topbar)
  ───────────────────────────────────────────────────────── */

  .portal-topbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    gap: 0.6rem;
  }

  /* Branding: en una sola fila, sin el divisor */
  .topbar-brand {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }

  .brand-divider { display: none; }

  .portal-title {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Fila de usuario: ocupa todo el ancho, elementos a la derecha */
  .topbar-user {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: nowrap;
  }

  /* Nombre del usuario: truncar si es largo */
  .user-name {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }

  /* Botones "Administración" y "Salir": altura y padding consistentes */
  .btn-logout,
  .topbar-user a {
    padding: 0.45rem 0.75rem;
    font-size: 0.72rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ─────────────────────────────────────────────────────────
     11.2  PESTAÑAS USUARIO (.nav-tabs / .nav-tab)
     Scroll horizontal tipo app nativa, sin ruptura de layout
  ───────────────────────────────────────────────────────── */

  .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 0;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--c-border);
    scrollbar-width: none;        /* Firefox */
  }

  .nav-tabs::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

  .nav-tab {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 0.7rem 0.85rem;
    letter-spacing: 0.03em;
  }

  /* ─────────────────────────────────────────────────────────
     11.3  LOGIN (.login-layout / .login-hero / .login-aside)
  ───────────────────────────────────────────────────────── */

  .login-layout {
    flex-direction: column;
    min-height: 100vh;
  }

  /* La imagen hero reaparece como banner superior */
  .login-hero {
    display: block !important;
    flex: none;
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
  }

  .login-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    position: absolute;
    top: 0; left: 0;
    opacity: 0.88;
  }

  .login-aside {
    flex: 1;
    max-width: 100%;
    padding: 2rem 1.25rem 3rem;
    justify-content: flex-start;
  }

  /* ─────────────────────────────────────────────────────────
     11.4  ADMIN TOPBAR (.cmd-topbar)
  ───────────────────────────────────────────────────────── */

  .cmd-topbar {
    height: auto !important;
    padding: 0.65rem 1rem;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  /* Branding ocupa la fila completa */
  .cmd-brand {
    width: 100%;
    flex-shrink: 0;
  }

  /* Acciones en segunda fila, alineadas a la derecha */
  .cmd-nav-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-wrap: nowrap;
  }

  /* Ocultar nombre de usuario para no apretar botones */
  .cmd-user-name { display: none !important; }

  /* Botones del admin: dimensiones táctiles cómodas */
  .btn-portal-link,
  .btn-exit {
    height: auto !important;
    padding: 0.5rem 0.8rem;
    font-size: 0.73rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ─────────────────────────────────────────────────────────
     11.5  MENÚ HAMBURGUESA (.cmd-hub / .hub-hamburger)
  ───────────────────────────────────────────────────────── */

  /* El nav se convierte en contenedor relativo para el dropdown */
  .cmd-hub {
    position: relative;
    flex-wrap: wrap;
    padding: 0;
    overflow: visible;        /* dropdown necesita salir del flujo */
  }

  /* Botón hamburguesa visible */
  .hub-hamburger {
    display: flex;
  }

  /* El wrapper se convierte en dropdown absoluto, oculto por defecto */
  .hub-links-wrapper {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 300;
    background-color: #0d3a63;
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  }

  /* Menú abierto */
  .hub-links-wrapper.open {
    display: flex;
  }

  /* Cada link ocupa todo el ancho, con borde izquierdo activo */
  .hub-link {
    width: 100%;
    height: 48px;
    padding: 0 1.25rem;
    justify-content: flex-start;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    border-bottom: none;
    border-left: 3px solid transparent;
    border-top: 1px solid rgba(255,255,255,0.05);
  }

  .hub-link:first-child { border-top: none; }

  .hub-link.active {
    border-left-color: #7cd100;
    border-bottom-color: transparent;
    background: rgba(124,209,0,0.08);
  }

  button.hub-link {
    border-bottom: none;
    border-left: 3px solid transparent;
  }

  /* ─────────────────────────────────────────────────────────
     11.6  TABLAS (Históricos y Bitácoras)
  ───────────────────────────────────────────────────────── */

  .table-container,
  .audit-wrap,
  .historicos-table-wrap,
  .history-grid .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    border-radius: 4px;
  }

  .table-editorial,
  .audit-table {
    min-width: 560px;
  }

  /* ─────────────────────────────────────────────────────────
     11.7  CONTENEDORES Y GRIDS
  ───────────────────────────────────────────────────────── */

  .container {
    padding: 0 1rem;
  }

  /* Grid históricos: 2 columnas → 1 */
  .history-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  /* Grid admin usuarios */
  .cmd-container,
  .admin-layout {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  /* Grid de variables */
  .variables-list {
    grid-template-columns: 1fr !important;
  }

  /* Coords grid */
  .coords-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem;
  }

  /* Secciones con padding lateral grande: reducir */
  .mission-block {
    padding: 1.5rem 1rem;
    font-size: 0.95rem;
  }

  .tab-content {
    padding: 1.5rem 0;
  }

  /* Formularios del admin: campo a 100% */
  .form-control {
    font-size: 16px; /* Evita el zoom automático en iOS */
  }

  /* Escala tipográfica responsiva para evitar desbordes */
  h1 { font-size: 1.8rem !important; }
  h2 { font-size: 1.4rem !important; }
  h3 { font-size: 1.2rem !important; }

  /* Parche responsivo para tarjetas admin y contención de grids */
  .admin-block,
  .cmd-card {
    padding: 1.25rem !important;
    min-width: 0 !important;
  }
  .admin-layout,
  .cmd-container {
    min-width: 0 !important;
  }
  .admin-layout > div,
  .cmd-container > aside,
  .cmd-container > main {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Formulario de Carga en Móvil stacked verticalmente */
  .upload-report-form {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.25rem !important;
  }
  .upload-report-form .form-group {
    width: 100% !important;
    min-width: 0 !important;
  }
  .upload-report-form .btn-upload-submit {
    width: 100% !important;
    height: 46px !important; /* Altura táctil ergonómica */
  }

  /* Contención de tablas de auditoría en móvil */
  .audit-table-wrap,
  .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

}

/* ══════════════ BREAKPOINT PEQUEÑO 480px ══════════════ */
@media (max-width: 480px) {

  /* Login hero más compacto */
  .login-hero { height: 160px; }
  .login-aside { padding: 1.5rem 1rem 2.5rem; }

  /* Una sola columna en coords */
  .coords-grid {
    grid-template-columns: 1fr !important;
  }

  /* Pestañas admin aún más compactas */
  .hub-link {
    font-size: 0.65rem;
    padding: 0 0.65rem;
    height: 40px;
  }

  /* Pestañas usuario */
  .nav-tab {
    font-size: 0.7rem;
    padding: 0.65rem 0.7rem;
  }

  /* Botones admin: tamaño mínimo táctil */
  .btn-portal-link,
  .btn-exit {
    padding: 0.45rem 0.65rem;
    font-size: 0.68rem;
  }

  /* Branding del portal: ocultar subtítulo si no cabe */
  .portal-title { display: none; }

  /* Tabla mínima para teléfonos muy pequeños */
  .table-editorial,
  .audit-table {
    min-width: 480px;
    font-size: 0.8rem;
  }

}

/* ══════════════════════════════════════════════════════════════
   11.7  ADMIN BODY — Prevención global de desborde horizontal
   ══════════════════════════════════════════════════════════════ */

/* Ancla global para todas las páginas */
body { max-width: 100vw; overflow-x: hidden; }

/* Contenedores administrativos: no desbordan */
.container,
.cmd-container,
.page-wrap,
.admin-layout {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {

  /* ── Admin layout en columna ── */
  .admin-layout,
  .cmd-container {
    grid-template-columns: 1fr !important;
    padding: 0 1rem !important;
    margin: 1rem auto !important;
  }

  /* ── Filtros en columna ── */
  .filter-form {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .filter-select { min-width: 100%; }

  /* ── Page header en columna ── */
  .page-header {
    flex-direction: column;
    gap: 1rem;
  }

  /* ── Cards sin padding excesivo ── */
  .page-card,
  .admin-block,
  .cmd-card {
    padding: 1.25rem;
    border-radius: 6px;
  }

  /* ── Contenedor responsive de tabla ── */
  .table-responsive,
  .audit-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    border-radius: 4px;
  }

}