/* ════════════════════════════════════════════════════════════════════════════
   🏗️  OFFICE VEHITOTAL — RESPONSIVE MASTER OVERRIDES
   Cubre TODOS los patrones de página: hero, tablas, KPIs, formularios,
   sidebar, header, grids de métricas y layouts de módulo.
   Breakpoints:
     Tablet  : ≤ 1024px
     Tablet P: ≤ 768px
     Mobile  : ≤ 640px
     Mobile S: ≤ 480px
     Mobile XS:≤ 360px
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   §1  CONTENEDOR GLOBAL — vt-container
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .vt-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (max-width: 480px) {
  .vt-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §2  PO-HERO — Command Hero Banner (page-hero.css + purchase-orders.css)
       Usado en: Claims, PurchaseOrders, PurchaseForm, Portfolio, CashReceipts,
                 Dashboard, Foresight, Parameters y más.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {
  .po-hero {
    padding: 1.75rem 1.5rem 1.625rem;
    border-radius: 16px;
  }

  .po-hero__h1 {
    font-size: 1.625rem;
  }

  .po-hero__stats {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
  }
}

/* ── Tablet Portrait (≤768px) ────────────────────────── */
@media (max-width: 768px) {
  .po-hero {
    padding: 1.5rem 1.25rem 1.375rem;
    border-radius: 14px;
    margin-bottom: 1.25rem;
  }

  .po-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .po-hero__brand {
    min-width: 0;
    gap: .875rem;
  }

  .po-hero__icon-shell {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 1.375rem;
    flex-shrink: 0;
  }

  .po-hero__h1 {
    font-size: 1.5rem;
    letter-spacing: -.025em;
  }

  .po-hero__byline {
    font-size: .8rem;
  }

  .po-hero__stats {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: .875rem;
    padding: .875rem 1rem;
    border-radius: 12px;
    scrollbar-width: none;
  }
  .po-hero__stats::-webkit-scrollbar { display: none; }

  .po-hero__stat-n {
    font-size: 1.375rem;
  }

  .po-hero__actions {
    flex-wrap: wrap;
    gap: .5rem;
    width: 100%;
  }

  .po-hbtn {
    flex: 1;
    min-width: 120px;
    justify-content: center;
    padding: .625rem 1rem;
    font-size: .8125rem;
  }
}

/* ── Mobile (≤640px) ─────────────────────────────────── */
@media (max-width: 640px) {
  .po-hero {
    padding: 1.25rem 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 12px;
  }

  .po-hero__brand {
    gap: .75rem;
  }

  .po-hero__icon-shell {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.2rem;
  }

  .po-hero__h1 {
    font-size: 1.375rem;
  }

  .po-hero__byline {
    display: none; /* Ocultar byline en mobile pequeño para ahorrar espacio */
  }

  .po-hero__stats {
    padding: .75rem .875rem;
    gap: .75rem;
    border-radius: 10px;
  }

  .po-hero__stat-n {
    font-size: 1.25rem;
  }

  .po-hero__stat-lbl {
    font-size: .5875rem;
  }

  .po-hero__stat-sep {
    height: 32px;
  }

  .po-hbtn--ghost {
    display: none; /* En mobile muy pequeño, solo mostrar el botón primario */
  }
}

/* ── Mobile XS (≤360px) ──────────────────────────────── */
@media (max-width: 360px) {
  .po-hero {
    padding: 1rem .875rem;
    border-radius: 10px;
  }

  .po-hero__icon-shell {
    display: none; /* Ocultar ícono en pantallas muy pequeñas */
  }

  .po-hero__h1 {
    font-size: 1.25rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §3  VT-HERO-SECTION — Hero compacto de Admin/Dashboard
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .vt-hero-section {
    padding: 1.5rem 1.25rem !important;
    border-radius: 14px !important;
  }

  .vt-hero-section--compact {
    padding: 1.25rem 1rem !important;
    border-radius: 12px !important;
  }

  .vt-hero-title {
    font-size: 1.375rem !important;
  }

  .vt-hero-subtitle {
    font-size: .8125rem !important;
  }

  .vt-hero-actions {
    flex-wrap: wrap;
    gap: .5rem;
  }
}

@media (max-width: 480px) {
  .vt-hero-section,
  .vt-hero-section--compact {
    padding: 1rem .875rem !important;
    border-radius: 10px !important;
  }

  .vt-hero-title {
    font-size: 1.25rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §4  TABLAS — overflow scroll en mobile para TODOS los módulos
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Contenedores de tabla comunes */
  .po-table-container,
  .vt-table-container,
  .table-responsive-auto,
  .cl-table-wrapper,
  .fh-table-wrapper,
  .po-dp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Bootstrap tables sin wrapper */
  .table-responsive:not([class*="table-responsive-"]) {
    overflow-x: auto;
  }

  /* Mínimo de columna para que la tabla sea usable */
  .po-table { min-width: 600px; }
  .cl-table  { min-width: 640px; }
  .fh-table  { min-width: 700px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   §5  KPI GRIDS — reflow en tablet/mobile
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Generic vt-grid KPI utilities */
  .vt-kpi-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .vt-kpi-grid-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .vt-kpi-grid-6 { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 640px) {
  .vt-kpi-grid-2,
  .vt-kpi-grid-3,
  .vt-kpi-grid-4,
  .vt-kpi-grid-5,
  .vt-kpi-grid-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .vt-kpi-card__value,
  .po-kpi-card__value {
    font-size: 1.375rem !important;
  }
}

@media (max-width: 360px) {
  .vt-kpi-grid-2,
  .vt-kpi-grid-3,
  .vt-kpi-grid-4,
  .vt-kpi-grid-5,
  .vt-kpi-grid-6 {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §6  MAIN CONTENT — padding ajustado en mobile
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .vt-main-content {
    padding: 1.25rem 1rem;
  }
}

@media (max-width: 640px) {
  .vt-main-content {
    padding: 1rem 0.75rem;
  }
}

@media (max-width: 480px) {
  .vt-main-content {
    padding: 0.75rem 0.625rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §7  HEADER / NAVBAR — ajustes móviles extras
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Acortar búsqueda en header o incluir ícono solo */
  .vt-header-search {
    display: none;
  }
  .vt-header-search-icon {
    display: flex !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §8  SIDEBAR — mobile touch target size
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .vt-sidebar-item {
    min-height: 2.75rem !important; /* touch target ≥ 44px */
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §9  PURCHASE ORDERS INDEX PAGE
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* KPI Grid extra breakpoint (ya tiene 768px nativo, añadir 640px) */
  .po-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .75rem !important;
  }

  /* Status tabs horizontally scrollable */
  .po-status-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .po-status-tabs::-webkit-scrollbar { display: none; }

  .po-status-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Table container overflow */
  .po-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .po-table {
    min-width: 620px;
  }

  /* Pagination */
  .po-pagination {
    flex-wrap: wrap;
    gap: .375rem;
    justify-content: center;
  }
}

@media (max-width: 500px) {
  .po-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .po-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .po-toolbar__left,
  .po-toolbar__right {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §10  CLAIMS — LIST PAGE
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cl-table-wrapper,
  .claim-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cl-filter-bar {
    flex-wrap: wrap;
    gap: .5rem;
  }

  .cl-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §11  PORTFOLIO MODULE
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .portfolio-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }

  .portfolio-health-chart {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .portfolio-kpi-strip {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §12  FINANCE HEALTH / CARTERA page
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .fh-kpi-grid,
  .finance-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .75rem !important;
  }

  .fh-chart-card {
    min-height: 260px;
  }

  .fh-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .fh-kpi-grid,
  .finance-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §13  PROFILE PAGE
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .aurora-profile-hero {
    padding: 1.5rem .875rem;
  }

  .aurora-profile-avatar {
    width: 96px;
    height: 96px;
  }

  .aurora-avatar-image {
    border-width: 3px;
  }

  .aurora-profile-name {
    font-size: 1.5rem;
  }

  .aurora-profile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }

  .aurora-stat-item {
    padding: .625rem;
  }

  .aurora-setting-item {
    flex-direction: column;
    gap: .5rem;
    text-align: left;
  }

  .aurora-quick-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §14  DASHBOARD
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .vt-dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  .vt-widget-chart {
    min-height: 220px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §15  ADMIN PAGES  (Roles, Audit, Settings, Users)
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .vt-admin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  .vt-admin-header__actions {
    width: 100%;
    flex-wrap: wrap;
    gap: .5rem;
  }

  .vt-admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .vt-roles-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §16  IMPORTS PAGES
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .vt-import-steps {
    flex-direction: column;
    align-items: stretch;
  }

  .vt-import-step {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding: .75rem !important;
  }

  .vt-import-drop-area {
    padding: 2rem 1rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §17  FORMS — new-order / new-claim / cash-receipts / purchase-form
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .vt-form-grid-2,
  .vt-form-row-2 {
    grid-template-columns: 1fr !important;
  }

  .vt-form-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .vt-form-actions {
    flex-direction: column;
    gap: .625rem;
  }

  .vt-form-actions .vt-btn,
  .vt-form-actions .po-hbtn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .vt-form-grid-2,
  .vt-form-grid-3,
  .vt-form-row-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §18  MODALS — ajustes para pantallas pequeñas
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .modal-dialog:not(.modal-fullscreen) {
    margin: .5rem;
    max-width: calc(100vw - 1rem);
  }

  .modal-body {
    padding: 1rem;
  }

  .modal-footer {
    flex-direction: column;
    gap: .5rem;
  }

  .modal-footer .btn {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   §19  UTILITIES GLOBALES RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Texto overflow */
  .vt-text-truncate-mobile {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
    display: inline-block;
    vertical-align: middle;
  }

  /* Ocultar columnas de tabla secundarias en mobile */
  .hide-mobile { display: none !important; }

  /* Hacer que los dropdowns sean full-width en mobile */
  .vt-dropdown-menu-mobile-full {
    min-width: calc(100vw - 2rem) !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  .hide-sm { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   §20  PRINT — limpiar sidebar y header
   ════════════════════════════════════════════════════════════════════════════ */
@media print {
  .vt-layout-sidebar,
  .vt-sidebar-backdrop,
  .nebula-navbar,
  .vt-header,
  .vt-footer,
  .po-hbtn,
  .vt-btn-print-hide {
    display: none !important;
  }

  .vt-main-content {
    padding: 0 !important;
    margin: 0 !important;
  }

  .po-hero {
    break-inside: avoid;
    border-radius: 0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
  }

  .po-hero::before { display: none !important; }
  .po-hero__h1 { color: #0f172a !important; text-shadow: none !important; }
  .po-hero__stats { background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; }
  .po-stat-warn   { color: #d97706 !important; }
  .po-stat-orange { color: #ea580c !important; }
  .po-stat-blue   { color: #2563eb !important; }
  .po-stat-green  { color: #059669 !important; }
  .po-stat-red    { color: #dc2626 !important; }

  .po-table-container { overflow: visible !important; }
  .po-table { min-width: auto !important; }
}