/* Responsive overrides: mobile-first adjustments only. Keep this file small. */

/* 1) MOBILE HEADER OVERRIDES - FORCE HIDE TITLE AND SHOW TEXT BUTTONS */
@media screen and (max-width: 576px) {
  /* FORCE HIDE ALL POSSIBLE TITLE ELEMENTS */
  h4,
  h4.dashboard-title,
  .dashboard-title,
  h4.dashboard-title.mb-0.me-4,
  .bg-primary h4,
  .bg-primary .dashboard-title { 
    display: none !important; 
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* HIDE AVATAR + GREETING + USER/ADMIN MENU ON MOBILE HEADER */
  .bg-primary .user-avatar,
  .bg-primary .user-info-menu,
  .bg-primary .auth-buttons-menu,
  .bg-primary .d-flex.align-items-center.me-4 { 
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Nav buttons as compact tabs: show icon + text */
  .nav-buttons .btn i,
  .nav-buttons .btn .fas,
  .nav-buttons .btn .fa {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-right: 0.25rem !important;
  }

  .nav-buttons .btn .nav-text,
  .nav-buttons .btn span:not(.badge) {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.8rem !important;
  }
  
  .bg-primary .container { padding-left: 8px; padding-right: 8px; }
  .user-info-menu, .auth-buttons-menu { display: none; }

  /* Compact header bar */
  .bg-primary { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }

  /* Nav menu as a single-row tab bar on very small screens */
  .nav-buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
  }

  /* Only keep the first two buttons (Pendientes, Completados) on mobile */
  .nav-buttons a:nth-child(n+3) {
    display: none !important;
  }

  .nav-buttons .btn {
    padding: 0.35rem 0.8rem !important;
    font-size: 0.85rem !important;
    flex: 0 0 50%;
    max-width: 50%;
    text-align: center;
    border-radius: 999px !important; /* pill style like tabs */
  }

  /* Make profile single line */
  .dropdown-toggle { white-space: nowrap !important; }
}

/* ===== Completados (completados.html) specific adjustments ===== */
/* Table headers: 1=ID Único, 2=Clave, 3=Producto, 4=Unidad, 5=Cant, 6=Surt, 7=Liq, 8=Saldo, 9=Entrega, 10=Acciones */
@media (max-width: 576px) {
  /* Hide non-critical columns on phones: 1, 4, 5, 6, 7 */
  .orden-card table thead th:nth-child(1),
  .orden-card table tbody td:nth-child(1),
  .orden-card table thead th:nth-child(4),
  .orden-card table tbody td:nth-child(4),
  .orden-card table thead th:nth-child(5),
  .orden-card table tbody td:nth-child(5),
  .orden-card table thead th:nth-child(6),
  .orden-card table tbody td:nth-child(6),
  .orden-card table thead th:nth-child(7),
  .orden-card table tbody td:nth-child(7) {
    display: none !important;
  }
  /* Product column clamp */
  .orden-card table tbody td:nth-child(3) {
    max-width: 220px;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }
  /* Actions icon-only */
  .orden-card td.text-end .btn.btn-sm { font-size: 0 !important; padding: 4px 6px !important; }
  .orden-card td.text-end .btn.btn-sm i { font-size: 0.95rem !important; margin: 0 !important; }
  /* Header compression */
  .orden-card .card-header strong { max-width: 160px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* 2) Dashboard cards spacing */
@media (max-width: 576px) {
  .orden-card { margin-bottom: 10px !important; }
  .orden-card .card-header { padding: 6px 8px !important; }
  .orden-card .card-body { padding: 6px 8px !important; }
  /* Compact table cells */
  .orden-card table.table th, 
  .orden-card table.table td { padding: 6px 8px !important; font-size: 0.85rem !important; line-height: 1.15 !important; }
}

/* 3) Large tables become horizontally scrollable */
@media (max-width: 768px) {
  .table-responsive { overflow-x: auto !important; }
  table.table { display: block; white-space: nowrap; }
  table.table thead th { position: sticky; top: 0; background: #212529; color: #fff; }
}

/* 4) Modals: reduce padding and allow internal scroll */
@media (max-width: 576px) {
  .modal-dialog { margin: 0.5rem !important; }
  .modal-body { max-height: calc(100vh - 180px); overflow-y: auto; }
}

/* 5) Badges/buttons tighter gaps */
@media (max-width: 576px) {
  .badge { font-size: 0.65rem !important; padding: 0.2rem 0.35rem !important; }
  .btn { padding: 0.4rem 0.55rem !important; font-size: 0.9rem !important; min-height: 38px; }
  /* Truncate badges in cards to a single line */
  .orden-card .badge { max-width: 140px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
  /* Hide original action buttons when kebab is present */
  .orden-card td.text-end .btn.btn-sm:not(.btn-kebab-xs) { display: none !important; }
  /* XS Accordion behavior */
  .orden-card .card-header { cursor: pointer; }
  .orden-card.xs-collapsed .card-body { display: none !important; }
}

/* ===== Pendientes (index.html) specific adjustments ===== */
/* Hide non-critical columns on phones: 1=ID Único, 4=Unidad, 5=Cant, 6=Surt, 7=Liq */
@media (max-width: 576px) {
  .orden-card table thead th:nth-child(1),
  .orden-card table tbody td:nth-child(1),
  .orden-card table thead th:nth-child(4),
  .orden-card table tbody td:nth-child(4),
  .orden-card table thead th:nth-child(5),
  .orden-card table tbody td:nth-child(5),
  .orden-card table thead th:nth-child(6),
  .orden-card table tbody td:nth-child(6),
  .orden-card table thead th:nth-child(7),
  .orden-card table tbody td:nth-child(7) {
    display: none !important;
  }
  /* Product column truncation */
  .orden-card table tbody td:nth-child(3) {
    max-width: 220px;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }
  /* Actions: icon-only buttons (only in card view, not detail page) */
  .orden-card:not(.orden-detalle) .btn-group .btn { font-size: 0 !important; padding: 4px 6px !important; }
  .orden-card:not(.orden-detalle) .btn-group .btn i { font-size: 0.95rem !important; margin: 0 !important; }
  /* Header: compress client name and header action button */
  .orden-card .card-header strong { max-width: 160px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .orden-card .card-header .btn.btn-success { font-size: 0 !important; padding: 4px 8px !important; }
  .orden-card .card-header .btn.btn-success i { font-size: 0.95rem !important; margin: 0 !important; }
  /* Delivery badge line wrap prevention */
  .orden-card .badge { white-space: nowrap; }
}

/* ===== Mobile variant for modals (pendientes) ===== */
@media (max-width: 576px) {
  .modal.mobile-variant .modal-dialog { margin: 0.5rem !important; }
  .modal.mobile-variant .modal-content { border-radius: 8px; }
  .modal.mobile-variant .modal-header { padding: 0.5rem 0.75rem !important; }
  .modal.mobile-variant .modal-title { font-size: 1rem !important; }
  .modal.mobile-variant .modal-body { padding: 0.75rem !important; max-height: calc(100vh - 180px); overflow-y: auto; }
  .modal.mobile-variant .modal-footer { padding: 0.5rem 0.75rem !important; }
  /* Reduce spacing inside forms */
  .modal.mobile-variant .form-label { margin-bottom: 0.25rem !important; font-size: 0.9rem !important; }
  .modal.mobile-variant .form-control, 
  .modal.mobile-variant .form-select, 
  .modal.mobile-variant .btn { padding: 0.4rem 0.5rem !important; font-size: 0.9rem !important; }
  /* Help texts shorter/hidden in XS */
  .modal.mobile-variant .form-text { display: none !important; }
  /* Quantity cards compact */
  .modal.mobile-variant .card .card-body { padding: 0.5rem !important; }
  .modal.mobile-variant h3 { font-size: 1.2rem !important; }
  .modal.mobile-variant h6 { font-size: 0.85rem !important; }
  /* Stack quantity cards vertically only in Evidencia modal */
  #evidenciaParcialModal.mobile-variant .row > [class*="col-md-4"],
  #evidenciaParcialModal.mobile-variant .row > [class*="col-md-6"],
  #evidenciaParcialModal.mobile-variant .row > [class*="col-md-12"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Emphasize file inputs in mobile */
  .modal.mobile-variant input[type="file"] { border: 2px dashed rgba(255,255,255,0.25); background: rgba(255,255,255,0.03); }
  .modal.mobile-variant input[type="file"]:focus { outline: 2px solid #0d6efd; }
}

/* Layering: ensure modals overlay tooltips/popovers */
.modal { z-index: 1080; }
.modal-backdrop { z-index: 1070; }
.tooltip { z-index: 1060; }

/* ===== Card View for Mobile/Tablet (<992px) ===== */
@media (max-width: 991px) {
  /* Card styling */
  .orden-card-mobile {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .orden-card-mobile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  }
  .orden-card-mobile:active {
    transform: translateY(0);
  }
  
  /* Client name should be white for better contrast */
  .orden-card-mobile h6.fw-bold {
    color: #ffffff !important;
  }
  /* Client name in completed-orders mobile cards should also be white */
  .orden-card-mobile-completados h6.fw-bold {
    color: #ffffff !important;
  }
  
  /* Compact badges in cards */
  .orden-card-mobile .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem;
  }
  
  /* Ensure proper spacing */
  .orden-card-mobile .card-body {
    padding: 0.75rem !important;
  }
  
  /* Hide table view on mobile/tablet */
  .orden-table-view {
    display: none !important;
  }
  
  /* Hide KPIs Manual button on mobile */
  .nav-buttons .btn[href*="kpis-gestion-manual"] {
    display: none !important;
  }
  
  /* Smaller navigation menu and icons */
  .nav-buttons .btn {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.8rem !important;
    min-height: 36px;
  }
  
  .nav-buttons .btn i {
    font-size: 0.9rem !important;
  }
  
  /* Mobile header optimizations - reduce size on tablet */
  .dashboard-title {
    font-size: 1.1rem !important;
  }
  
  .dashboard-title i {
    display: none !important;
  }
}

/* Desktop: hide card view, show table */
@media (min-width: 992px) {
  .orden-card-feed {
    display: none !important;
  }
  .orden-table-view {
    display: block !important;
  }
}

/* ===== Detail Page Responsive ===== */
@media (max-width: 991px) {
  /* Back button styling */
  .btn-back {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Compact product list on mobile */
  .producto-item-mobile {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 0.75rem;
  }
  
  /* Compact product list on mobile - better alignment */
  .producto-item-mobile {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }
  
  .producto-item-mobile .flex-grow-1 {
    min-width: 0; /* Allow text to wrap */
  }

  /* Make product key/title readable on dark background in order detail mobile view */
  .orden-detalle .producto-item-mobile h6 {
    color: #ffffff !important;
    font-weight: 600;
  }

  .orden-detalle .producto-item-mobile p.text-muted {
    color: rgba(255,255,255,0.75) !important;
  }
  
  /* Action buttons in mobile product list - show full buttons with text */
  .producto-item-mobile .btn-group-vertical {
    flex-shrink: 0;
    min-width: 140px;
  }
  
  .producto-item-mobile .btn-group-vertical .btn {
    min-width: 140px;
    min-height: 36px;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    white-space: nowrap;
    font-weight: 500;
    margin-bottom: 0.25rem;
  }
  
  .producto-item-mobile .btn-group-vertical .btn:last-child {
    margin-bottom: 0;
  }
  
  /* Override compact styles for detail page buttons */
  .orden-detalle .btn-group .btn,
  .orden-detalle .btn-group-vertical .btn {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.6rem !important;
    min-width: 140px;
    font-weight: 500 !important;
  }
  
  /* Show button text in detail page */
  .orden-detalle .btn i {
    margin-right: 0.4rem !important;
  }
}

/* Evidencias modal specific tweaks */
.evidencia-card-header {
  white-space: nowrap;
}

.evidencia-ver-archivo-btn {
  border-radius: 999px;
  font-size: 0.8rem;
}

/* ===== Reporte Cumplimiento (desktop only) ===== */
@media (min-width: 992px) {
  /* Usar casi todo el ancho disponible del contenedor principal */
  .container .card.shadow-sm {
    margin-left: -2.5rem;
    margin-right: -2.5rem;
    background-color: transparent !important; /* Quitar fondo blanco de la card */
    border-color: rgba(255,255,255,0.15) !important;
  }

  /* Asegurar que el body de la card tampoco tenga fondo blanco */
  .container .card.shadow-sm .card-body {
    background-color: transparent !important;
  }

  /* Reducir tamaño de fuente y padding de la tabla del reporte */
  .container .card.shadow-sm .table.table-sm {
    font-size: 0.55rem !important;
    color: #f5f5f5 !important;
    background-color: transparent !important;
  }

  .container .card.shadow-sm .table.table-sm th,
  .container .card.shadow-sm .table.table-sm td {
    padding: 0.25rem 0.35rem !important;
    white-space: nowrap;
    color: #f5f5f5 !important;
  }

  /* Encabezado del reporte: fondo oscuro, texto claro */
  .container .card.shadow-sm .table.table-sm thead th {
    background-color: #121212 !important;
    color: #f5f5f5 !important;
    border-color: rgba(255,255,255,0.15) !important;
  }

  /* Filas del cuerpo: eliminar franjas blancas de Bootstrap y usar tonos oscuros */
  .container .card.shadow-sm .table.table-sm tbody tr {
    background-color: #181818 !important;
  }

  .container .card.shadow-sm .table.table-sm tbody tr:nth-of-type(odd),
  .container .card.shadow-sm .table.table-sm tbody tr:nth-of-type(even) {
    background-color: #181818 !important;
  }

  /* Fila de totales: fondo ligeramente más oscuro y texto claro */
  .container .card.shadow-sm .table.table-sm tfoot th,
  .container .card.shadow-sm .table.table-sm tfoot td {
    background-color: #262626 !important;
    color: #f5f5f5 !important;
    font-weight: 600;
  }

  /* Forzar que cualquier elemento dentro de la fila de totales también sea claro */
  .container .card.shadow-sm .table.table-sm tfoot th *,
  .container .card.shadow-sm .table.table-sm tfoot td * {
    color: #f5f5f5 !important;
  }

  /* Botones de rango del reporte: evitar hover blanco sobre fondo oscuro */
  .container .card.shadow-sm .btn-group.btn-group-sm .btn-outline-light {
    color: #f5f5f5;
    border-color: rgba(245,245,245,0.7);
  }

  .container .card.shadow-sm .btn-group.btn-group-sm .btn-outline-light:hover,
  .container .card.shadow-sm .btn-group.btn-group-sm .btn-outline-light:focus {
    background-color: rgba(255,255,255,0.12);
    color: #f5f5f5;
    border-color: rgba(245,245,245,0.9);
  }

  /* Mantener color sólido de los botones activos en hover */
  .container .card.shadow-sm .btn-group.btn-group-sm .btn-primary:hover,
  .container .card.shadow-sm .btn-group.btn-group-sm .btn-success:hover,
  .container .card.shadow-sm .btn-group.btn-group-sm .btn-info:hover,
  .container .card.shadow-sm .btn-group.btn-group-sm .btn-warning:hover,
  .container .card.shadow-sm .btn-group.btn-group-sm .btn-danger:hover {
    filter: brightness(1.05);
    color: #ffffff;
  }

  /* Textos de cabecera del reporte (Fecha, Hora, rango de entrega, estatus, etc.) en color claro */
  .container .card.shadow-sm .card-body,
  .container .card.shadow-sm .card-body * {
    color: rgba(245,245,245,0.9) !important;
  }
}

/* ===== Global desktop container width tweak ===== */
@media (min-width: 1200px) {
  /* Hacer el contenedor un poco más ancho en pantallas grandes */
  .container {
    max-width: 1600px;
  }
}

/* CACHE BUSTER: 2025-10-30-00:13 - AGGRESSIVE MOBILE HEADER HIDE + TEXT BUTTONS FORCE */