/* =============================================================================
 *  LISTADOS EN EL CELULAR (< 768 px).  Ver public/js/mobile-lists.js.
 *
 *  Cada fila de un listado pasa a ser una TARJETA; los indicadores van de a dos; la busqueda queda a la vista y el
 *  resto de los filtros detras de «Filtrar»; y abajo hay tres accesos fijos. Todo acotado a pantallas chicas: en
 *  escritorio y tablet (>= 768 px) la tabla es la de siempre y lo que arma el modulo queda escondido.
 * ============================================================================= */

/* Lo que arma el modulo no se ve fuera del celular. */
.dwm-bottomnav,
.dwm-filtrar { display: none; }

@media (max-width: 767.98px) {
  :root {
    --dwm-verde: #1b4d2e;
    --dwm-verde-2: #2e7d32;
    --dwm-borde: #e1e7e3;
    --dwm-texto: #1f2a24;
    --dwm-suave: #6b7770;
  }

  /* ---- encabezado de la seccion: titulo y «Actualizar» solo con el icono ---------------------------------- */
  .content-section button[id$="RefreshBtn"] {
    font-size: 0; width: 40px; height: 40px; padding: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .content-section button[id$="RefreshBtn"] i { font-size: 1.15rem; margin: 0 !important; }

  /* ---- «Sincronizar» del encabezado del detalle de orden / cotizacion: solo la ruedita, del mismo tamaño que la X y la hamburguesa --------- */
  #ordenDetailSync,
  #cotizNeoDetailSync {
    font-size: 0; width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    align-self: flex-start; margin-top: -0.35rem;
  }
  #ordenDetailSync i,
  #cotizNeoDetailSync i { font-size: 1.1rem; margin: 0 !important; }

  /* ---- indicadores (KPIs): de a dos, compactos ------------------------------------------------------------- */
  .content-section .row:has(> [class*="col-"] > .kpi-card) > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  .content-section .kpi-card { border-radius: 12px; }
  .content-section .kpi-card .kpi-value { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
  .content-section .kpi-card .kpi-label { font-size: .72rem; color: var(--dwm-suave); }

  /* ---- buscador y filtros: la busqueda a la vista, el resto detras de «Filtrar» ---------------------------- */
  .dwm-filtros { border-radius: 12px; }
  .dwm-filtros .card-body { padding: 10px !important; }
  .dwm-filtros .dwm-search { flex: 0 0 100%; max-width: 100%; }
  .dwm-filtros .dwm-search > .form-label { display: none; }
  .dwm-filtros .input-group { flex-wrap: nowrap; }
  .dwm-filtros .input-group .form-control { min-height: 44px; font-size: 16px; min-width: 0; }
  .dwm-filtros .input-group .input-group-text { min-height: 44px; }
  .dwm-filtrar { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; }
  .dwm-filtros:not(.dwm-open) .dwm-adv { display: none !important; }
  .dwm-filtros.dwm-open .dwm-adv .form-select,
  .dwm-filtros.dwm-open .dwm-adv .form-control,
  .dwm-filtros.dwm-open .dwm-adv .btn { min-height: 44px; font-size: 16px; }
  .dwm-filtros.dwm-open .dwm-filtrar { background: var(--dwm-verde-2); border-color: var(--dwm-verde-2); color: #fff; }

  /* ---- al hacer scroll, el encabezado y los filtros quedan fijos arriba -------------------------------------
     Apilados debajo de la barra superior (que ya es sticky): primero el titulo con «Actualizar» y debajo la tarjeta de
     filtros. Las alturas las mide mobile-lists.js (--dwm-nav-h / --dwm-head-h). Los indicadores (KPIs) que hay en
     el medio se van por debajo al scrollear. */
  .dwm-sticky-head {
    position: sticky; top: var(--dwm-nav-h, 0px); z-index: 1015;
    background: var(--dw-light, #f8f9fa);
    margin-left: -0.75rem; margin-right: -0.75rem; padding: 0.4rem 0.75rem;
  }
  .dwm-sticky-filtros {
    position: sticky; top: calc(var(--dwm-nav-h, 0px) + var(--dwm-head-h, 0px)); z-index: 1014;
    /* el halo del color de fondo tapa lo que pasa por los costados y por debajo, sin ensanchar la tarjeta */
    box-shadow: 0 0 0 0.5rem var(--dw-light, #f8f9fa), 0 2px 6px rgba(0, 0, 0, .08) !important;
    /* con «Filtrar» abierto la tarjeta crece: que se desplace por dentro y no se coma la pantalla */
    max-height: calc(100vh - var(--dwm-nav-h, 0px) - var(--dwm-head-h, 0px) - 96px - env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  /* ---- tablas -> tarjetas ----------------------------------------------------------------------------------- */
  .table-responsive:has(> table.dwm-cards) { overflow: visible; }
  .card:has(> .card-body > .table-responsive > table.dwm-cards) { background: transparent; box-shadow: none !important; }
  table.dwm-cards { display: block; border: 0; background: transparent; margin: 0; }
  table.dwm-cards > thead { display: none; }
  table.dwm-cards > tbody { display: block; }
  table.dwm-cards > tbody > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: start;
    background: #fff; border: 1px solid var(--dwm-borde); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  }
  table.dwm-cards > tbody > tr:active { background: #f6faf7; }
  table.dwm-cards > tbody > tr > td {
    display: block; padding: 0; border: 0; background: transparent; box-shadow: none; min-width: 0; max-width: none !important;
    white-space: normal; overflow: visible; text-overflow: clip; text-align: left !important; font-size: .9rem; color: var(--dwm-texto);
  }
  /* el rotulo de cada dato (sale del <th>) */
  table.dwm-cards > tbody > tr > td[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: block; font-size: .66rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--dwm-suave); margin-bottom: 1px;
  }
  /* lo que tiene su propio estilo en escritorio (aviso de «Sin conexion», badges locales, vencimientos) no se aprieta */
  table.dwm-cards > tbody > tr > td .badge { white-space: nowrap; }
  table.dwm-cards > tbody > tr > td.hide-sm { display: block !important; }
  /* filas de un solo renglon (cargando, vacio, error): una tarjeta simple */
  table.dwm-cards > tbody > tr > td[colspan] { grid-area: 1 / 1 / 2 / -1 !important; text-align: center !important; font-size: .9rem; }
  table.dwm-cards > tbody > tr > td[colspan]::before { display: none !important; }

  /* ---- ORDENES: N° y estado arriba, cliente, productos / liberacion, y fecha / total abajo ---------------- */
  table.dwm-cards[data-dwm="orden"] > tbody > tr > td:nth-child(2) { grid-area: 1 / 1; font-weight: 800; font-size: 1.02rem; }
  table.dwm-cards[data-dwm="orden"] > tbody > tr > td:nth-child(6) { grid-area: 1 / 2; justify-self: end; }
  table.dwm-cards[data-dwm="orden"] > tbody > tr > td:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }
  table.dwm-cards[data-dwm="orden"] > tbody > tr > td:nth-child(4) { grid-area: 3 / 1; }
  table.dwm-cards[data-dwm="orden"] > tbody > tr > td:nth-child(7) { grid-area: 3 / 2; justify-self: end; text-align: right !important; }
  table.dwm-cards[data-dwm="orden"] > tbody > tr > td:nth-child(1) { grid-area: 4 / 1; align-self: end; }
  table.dwm-cards[data-dwm="orden"] > tbody > tr > td:nth-child(5) { grid-area: 4 / 2; justify-self: end; text-align: right !important; }
  /* sin rotulo donde el dato se explica solo */
  table.dwm-cards[data-dwm="orden"] > tbody > tr > td:nth-child(2)::before,
  table.dwm-cards[data-dwm="orden"] > tbody > tr > td:nth-child(3)::before,
  table.dwm-cards[data-dwm="orden"] > tbody > tr > td:nth-child(6)::before { display: none; }
  table.dwm-cards[data-dwm="orden"] > tbody > tr > td:nth-child(3) .fw-medium { font-weight: 700 !important; font-size: .95rem; }
  table.dwm-cards[data-dwm="orden"] > tbody > tr > td:nth-child(7):empty { display: none; }

  /* ---- COTIZACIONES: igual, con los productos, el vencimiento y las acciones -------------------------------- */
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(2) { grid-area: 1 / 1; font-weight: 800; font-size: 1.02rem; }
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(7) { grid-area: 1 / 2; justify-self: end; text-align: right !important; }
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(4) { grid-area: 3 / 1 / 4 / 3; }
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(1) { grid-area: 4 / 1; align-self: end; }
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(5) { grid-area: 4 / 2; justify-self: end; text-align: right !important; }
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(6) { grid-area: 5 / 1; }
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(8) { grid-area: 5 / 2; justify-self: end; text-align: right !important; white-space: nowrap; }
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(2)::before,
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(3)::before,
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(7)::before,
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(8)::before { display: none; }
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(3) .fw-medium { font-weight: 700 !important; font-size: .95rem; }
  table.dwm-cards[data-dwm="cotizacion"] > tbody > tr > td:nth-child(8) .btn { min-width: 40px; min-height: 40px; }

  /* ---- CLIENTES: razon social y codigo, y los importes de a dos ---------------------------------------------- */
  table.dwm-cards[data-dwm="cliente"] > tbody > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.dwm-cards[data-dwm="cliente"] > tbody > tr > td:nth-child(1) { grid-area: 1 / 1 / 2 / 3; font-weight: 800; font-size: 1rem; }
  table.dwm-cards[data-dwm="cliente"] > tbody > tr > td:nth-child(2) { grid-area: 2 / 1 / 3 / 3; color: var(--dwm-suave); font-size: .82rem; margin-bottom: 4px; }
  table.dwm-cards[data-dwm="cliente"] > tbody > tr > td:nth-child(3) { grid-area: 3 / 1; }
  table.dwm-cards[data-dwm="cliente"] > tbody > tr > td:nth-child(5) { grid-area: 3 / 2; }
  table.dwm-cards[data-dwm="cliente"] > tbody > tr > td:nth-child(6) { grid-area: 4 / 1; }
  table.dwm-cards[data-dwm="cliente"] > tbody > tr > td:nth-child(7) { grid-area: 4 / 2; }
  table.dwm-cards[data-dwm="cliente"] > tbody > tr > td:nth-child(4) { grid-area: 5 / 1 / 6 / 3; }
  table.dwm-cards[data-dwm="cliente"] > tbody > tr > td:nth-child(1)::before,
  table.dwm-cards[data-dwm="cliente"] > tbody > tr > td:nth-child(2)::before { display: none; }
  table.dwm-cards[data-dwm="cliente"] > tbody > tr > td:nth-child(2)::after { content: ""; }
  table.dwm-cards[data-dwm="cliente"] > tbody > tr > td:nth-child(n+3) { padding-top: 4px; border-top: 1px dashed var(--dwm-borde); }
  table.dwm-cards[data-dwm="cliente"] > tbody > tr > td:nth-child(n+3) { font-weight: 700; }

  /* ---- RESUMEN DEL INICIO (ultimas ordenes): N° y estado, cliente, fecha y total ---------------------------- */
  table.dwm-cards[data-dwm="mini"] > tbody > tr > td:nth-child(1) { grid-area: 1 / 1; font-weight: 800; }
  table.dwm-cards[data-dwm="mini"] > tbody > tr > td:nth-child(4) { grid-area: 1 / 2; justify-self: end; }
  table.dwm-cards[data-dwm="mini"] > tbody > tr > td:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
  table.dwm-cards[data-dwm="mini"] > tbody > tr > td:nth-child(5) { grid-area: 3 / 1; align-self: end; }
  table.dwm-cards[data-dwm="mini"] > tbody > tr > td:nth-child(3) { grid-area: 3 / 2; justify-self: end; text-align: right !important; font-weight: 800; color: var(--dwm-verde); }
  table.dwm-cards[data-dwm="mini"] > tbody > tr > td:nth-child(1)::before,
  table.dwm-cards[data-dwm="mini"] > tbody > tr > td:nth-child(2)::before,
  table.dwm-cards[data-dwm="mini"] > tbody > tr > td:nth-child(4)::before { display: none; }

  /* ---- RESTO DE LOS LISTADOS: el primer dato de titulo y el resto, rotulado, de a dos ------------------------ */
  table.dwm-cards[data-dwm="generico"] > tbody > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.dwm-cards[data-dwm="generico"] > tbody > tr > td:first-child { grid-column: 1 / -1; font-weight: 800; font-size: 1rem; }
  table.dwm-cards[data-dwm="generico"] > tbody > tr > td:first-child::before { display: none; }
  /* sin rotulo (columna de acciones): ancho completo y a la derecha */
  table.dwm-cards[data-dwm="generico"] > tbody > tr > td:not([data-label]),
  table.dwm-cards[data-dwm="generico"] > tbody > tr > td[data-label=""] {
    grid-column: 1 / -1; text-align: right !important; white-space: nowrap; border-top: 1px solid var(--dwm-borde); padding-top: 6px;
  }
  table.dwm-cards[data-dwm="generico"] > tbody > tr > td[data-label="Acciones"] {
    grid-column: 1 / -1; text-align: right !important; white-space: nowrap; border-top: 1px solid var(--dwm-borde); padding-top: 6px;
  }
  table.dwm-cards[data-dwm="generico"] > tbody > tr > td[data-label="Acciones"]::before { display: none; }
  table.dwm-cards .btn-link, table.dwm-cards .btn-sm { min-height: 36px; }

  /* ---- el menu se abre desde la barra de abajo: la hamburguesa de arriba sobra en el celular ----------------- */
  .top-navbar #sidebarToggle { display: none; }

  /* ---- barra inferior: tres accesos fijos y el menu ---------------------------------------------------------- */
  .dwm-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1028; display: flex; align-items: stretch;
    background: #fff; border-top: 1px solid var(--dwm-borde); box-shadow: 0 -4px 14px rgba(0, 0, 0, .06);
    padding: 4px calc(6px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
  }
  .dwm-bn {
    flex: 1 1 0; min-width: 0; min-height: 52px; border: 0; background: transparent; color: var(--dwm-suave);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: .72rem; font-weight: 600; border-radius: 10px;
  }
  .dwm-bn i { font-size: 1.35rem; line-height: 1; }
  /* el texto pasa a dos renglones si hace falta («Nueva cotización»): con cuatro botones no entra en uno */
  .dwm-bn span { max-width: 100%; white-space: normal; text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
  .dwm-bn:active { background: #f1f6f2; }
  .dwm-bn.dwm-bn-activo { color: var(--dwm-verde); }
  .dwm-bn-principal { color: var(--dwm-verde-2); }
  .dwm-bn-principal i { font-size: 1.7rem; }
  /* tapada por un formulario (modal) o por el menu lateral: la barra no compite */
  body.modal-open .dwm-bottomnav { display: none; }
  /* el contenido no queda detras de la barra; el indicador de sincronizacion sube para no pisarla */
  .main-content { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .dw-sync-indicator { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  /* el boton flotante (+) sube sobre la barra inferior en vez de taparle los accesos, y respeta el borde derecho */
  .fab-btn { bottom: calc(76px + env(safe-area-inset-bottom)); right: calc(1rem + env(safe-area-inset-right)); }
}

/* En telefonos chicos la seccion tiene menos relleno (0.5 rem): el encabezado fijo lo acompana. */
@media (max-width: 575.98px) {
  .dwm-sticky-head { margin-left: -0.5rem; margin-right: -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; }
}