/* ============================================================================
   SISCREDI MOBILE — MASTER RESPONSIVE STYLESHEET v3
   ============================================================================
   Punto de entrada único. Importa todos los módulos CSS móviles.
   
   En base.html:
   <link rel="stylesheet" href="{% static 'mobile/css/mobile_responsive.css' %}">
   ============================================================================ */

@import url('./mobile_bottom_nav.css');
@import url('./mobile_tables.css');
@import url('./mobile_forms.css');
@import url('./mobile_split_view.css');
@import url('./mobile_touch.css');
@import url('./mobile_performance.css');
@import url('./mobile_v4.css');


/* ============================================================================
   TAWK.TO — OCULTAR COMPLETAMENTE
   ============================================================================ */

#tawk-bubble-container,
.tawk-min-container,
iframe[title*="chat"],
iframe[title*="chat"] + div,
div[class*="tawk"],
#tawkchat-container,
#tawkchat-minified-wrapper,
[id*="tawk"],
.widget-visible {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important; height: 0 !important;
  position: fixed !important;
  bottom: -9999px !important; right: -9999px !important;
}


/* ============================================================================
   OVERRIDES GLOBALES
   ============================================================================ */

@media (max-width: 991.98px) {

  /* Headings */
  h1, .h1 { font-size: 1.4rem; }
  h2, .h2 { font-size: 1.2rem; }
  h3, .h3 { font-size: 1.05rem; }
  .display-6, .display-5, .display-4 { font-size: 1.2rem !important; }

  /* Page title + action → column */
  .d-flex:has(h1):has(.btn),
  .d-flex:has(h2):has(.btn),
  .d-flex:has(.h1):has(.btn) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  /* Container tighter */
  .container-fluid { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }

  /* Cards wider borders */
  .card-body { padding: 0.875rem !important; }
  .card-header, .card-footer { padding: 0.625rem 0.875rem !important; }
  .card { border-width: 2px !important; border-radius: 16px !important; }

  /* Metric cards single column ≤480px */
  @media (max-width: 479.98px) {
    .row > [class*="col-"]:has(.metric-card-clickable),
    .row > [class*="col-"]:has(.sc-metric-dashboard),
    .row > .col-6:has(.card) {
      flex: 0 0 100% !important; max-width: 100% !important;
    }
  }

  /* Tabs horizontal scroll */
  .nav-tabs, .nav-underline {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .nav-tabs::-webkit-scrollbar, .nav-underline::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-item, .nav-underline .nav-item { flex-shrink: 0; }

  /* Modals full screen */
  .modal-dialog { margin: 0 !important; max-width: 100% !important; min-height: 100vh; }
  .modal-content { border-radius: 0 !important; min-height: 100vh; border: none !important; }

  /* Alerts */
  .alert { font-size: 0.85rem; padding: 0.625rem 0.875rem; border-radius: 12px; border-width: 2px; }

  /* Toast above bottom nav */
  .toast-container { bottom: 80px !important; left: 0.5rem !important; right: 0.5rem !important; }

  /* Breadcrumb scroll */
  .breadcrumb { font-size: 0.8rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .breadcrumb::-webkit-scrollbar { display: none; }

  /* FAB above bottom nav */
  .sc-cotizacion-fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Client detail → stack actions */
  .d-flex:has(.btn-outline-primary):has(.btn-outline-secondary):has(.dropdown) {
    flex-direction: column !important; gap: 0.5rem !important;
  }
  .d-flex:has(.btn-outline-primary):has(.btn-outline-secondary):has(.dropdown) .btn { width: 100%; }

  /* Search bar layout wrap */
  .card-body > .d-flex:has(input[placeholder*="Buscar"]),
  .card-body > .d-flex:has(input[placeholder*="cédula"]),
  .card-body > .d-flex:has(input[placeholder*="número"]),
  .card-body > .d-flex:has(.input-group) {
    flex-wrap: wrap !important; gap: 0.5rem !important;
  }
  .card-body > .d-flex > .input-group,
  .card-body > .d-flex > input[type="text"],
  .card-body > .d-flex > input[type="search"] {
    flex: 1 1 100% !important; min-width: 100% !important;
  }

  /* Header top spacing */
  .glass-main-container > .card-body:first-child,
  .glass-main-container > .container-fluid { padding-top: 0.75rem !important; }

  /* Button text visible */
  .d-flex:has(h1) .btn-warning, .d-flex:has(h2) .btn-warning,
  .d-flex:has(h1) .btn-primary, .d-flex:has(h2) .btn-primary {
    font-size: 0.85rem !important; padding: 0.5rem 1rem !important; white-space: nowrap;
  }

  /* Stats link button */
  .sc-stats-link-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.75rem 1rem; margin-bottom: 0.75rem;
    background: var(--bs-primary-bg-subtle, #fef8f0);
    border: 2px solid var(--bs-primary-border-subtle, #fbd4ad);
    border-radius: 12px; color: var(--bs-primary, #f5a941);
    font-weight: 600; font-size: 0.9rem; text-decoration: none;
  }
  .sc-stats-link-btn:hover { background: rgba(245,169,65,0.15); color: var(--bs-primary); text-decoration: none; }

  /* Autocomplete z-index */
  .dropdown-menu.show, .autocomplete-results,
  [class*="autocomplete"], .list-group.position-absolute {
    z-index: 1060 !important; background: var(--bs-body-bg, #fff) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; border-radius: 12px !important;
  }

  /* Footer compact */
  footer, .footer { font-size: 0.7rem !important; padding: 0.5rem !important; }
  footer .badge, .footer .badge { font-size: 0.55rem !important; }

  /* Metas compact chips */
  .sc-metas-compact-container {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 0.5rem; margin: 0 -0.5rem;
  }
  .sc-metas-compact-container::-webkit-scrollbar { display: none; }
  .sc-metas-compact-scroll { display: flex; gap: 0.5rem; min-width: max-content; }
  .sc-meta-chip {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
    padding: 0.5rem 0.75rem; background: var(--bs-secondary-bg, #f8f9fa);
    border: 2px solid var(--bs-border-color); border-radius: 12px;
    min-width: 120px; max-width: 140px; text-align: center; position: relative;
  }
  .sc-meta-chip.sc-meta-active { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle, #fef8f0); }
  .sc-meta-chip-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: 0.25rem; }
  .sc-meta-chip-progress { width: 100%; height: 6px; background: var(--bs-border-color); border-radius: 3px; overflow: hidden; margin-bottom: 0.25rem; }
  .sc-meta-chip-progress-bar { height: 100%; background: var(--bs-primary); border-radius: 3px; }
  .sc-meta-chip-value { font-size: 0.7rem; font-weight: 700; color: var(--bs-primary); }
  .sc-meta-chip-dates { font-size: 0.55rem; color: var(--bs-secondary-color); }
  .sc-meta-badge-actual {
    position: absolute; top: -6px; right: -4px;
    font-size: 0.5rem; padding: 0.1em 0.4em;
    background: var(--bs-primary); color: white; border-radius: 6px; font-weight: 700;
  }
  [data-bs-theme="dark"] .sc-meta-chip { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
  [data-bs-theme="dark"] .sc-meta-chip.sc-meta-active { border-color: var(--bs-primary); background: rgba(245,169,65,0.1); }
}

@media print {
  .sc-mobile-bottom-nav, .sc-mobile-back-btn, .sc-stats-link-btn { display: none !important; }
  .table-responsive thead { display: table-header-group !important; }
}