/* Cotizador Mayorista — capa movil.
   Esta hoja solo agrega reglas dentro de @media, asi que en escritorio no
   cambia nada de lo que ya existia. Va despues del <style> de cada plantilla
   para poder pisar lo que haga falta.

   Dos cortes:
     <= 900px  la barra de arriba pasa a menu hamburguesa
     <= 760px  las tablas dejan de ser tablas y pasan a fichas desplegables */

/* ------------------------------------------------------------------ */
/* El boton hamburguesa lo inyecta movil.js, no hay que tocar el HTML. */
/* ------------------------------------------------------------------ */
.navbtn{
  display:none; margin-left:auto; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22); color:#fff; border-radius:8px;
  width:44px; height:44px; font-size:19px; line-height:1; cursor:pointer;
  padding:0; flex:0 0 auto;
}
.navbtn:hover{background:rgba(255,255,255,.2);}
.navbtn:focus-visible{outline:2px solid #fff; outline-offset:2px;}

@media (max-width:900px){
  /* La barra se vuelve el ancla del panel desplegable. */
  .appbar{position:relative; gap:12px; padding:8px 14px; min-height:62px;}
  .appbar img{height:40px;}
  .appbar h1{font-size:14px;}
  .navbtn{display:block;}

  /* El nav deja de ser una fila al costado y cae como panel de ancho completo. */
  .appnav{
    position:absolute; top:100%; left:0; right:0; z-index:60;
    margin:0; flex-direction:column; gap:0; background:#17284a;
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 10px 24px rgba(0,0,0,.28);
    max-height:calc(100vh - 62px); overflow-y:auto;
    display:none;
  }
  .appnav.abierto{display:flex;}
  .appnav a{
    padding:14px 18px; border-radius:0; font-size:15px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .appnav a:last-child{border-bottom:0;}
  .appnav a.active{background:rgba(255,255,255,.14);}
  /* El engranaje y la campanita traen estilos en linea con font-size chico;
     en el panel necesitan el mismo alto de toque que el resto. */
  .appnav a[style]{font-size:15px !important; padding:14px 18px !important;}
  .appnav a.campana .campana-n{position:static; display:none; margin-left:8px;}
  .appnav a.campana.hay .campana-n{display:inline-block;}
}

/* ------------------------------------------------------------------ */
/* Pantallas chicas: menos margen, nada que se salga de ancho.         */
/* ------------------------------------------------------------------ */
@media (max-width:760px){
  .wrap{padding:12px 12px 28px;}
  img, table, pre{max-width:100%;}

  /* iOS hace zoom solo si el campo mide menos de 16px. */
  input, select, textarea, button{font-size:16px;}
  .barra{gap:8px;}
  .barra input, .barra select, .barra button{font-size:16px; padding:9px 12px;}
  .barra input[type=search]{min-width:0; width:100%; flex:1 1 100%;}
  .chips{margin-left:0; width:100%;}

  .card{padding:12px; border-radius:9px;}
  .grp{font-size:12px;}

  /* Paginador: que los botones se toquen bien y bajen si no caben. */
  .pager{flex-wrap:wrap; gap:8px;}
  .pager .der{margin-left:0; width:100%; justify-content:flex-end;}
  .pager button{min-height:40px; padding:0 14px;}

  /* ---------------------------------------------------------------- */
  /* Tablas como fichas desplegables.                                  */
  /* movil.js marca la tabla y copia el titulo de cada columna al      */
  /* atributo data-lbl de la celda; aca solo se dibuja.                */
  /* ---------------------------------------------------------------- */
  table.tabla-movil{display:block; border-collapse:separate; font-size:13.5px;}
  table.tabla-movil thead{display:none;}
  table.tabla-movil tbody{display:block;}

  /* Algunas tablas traen su buscador dentro del propio thead (el historial
     del index). Si se esconde el thead entero se pierde el filtro, asi que
     esa fila se rescata y se dibuja como una barra sobre las fichas. */
  table.tabla-movil thead tr.filtros{
    display:flex; flex-wrap:wrap; gap:8px; padding:0 0 10px;
  }
  table.tabla-movil thead tr.filtros th{
    display:block; flex:1 1 46%; padding:0; border:0; background:none;
  }
  table.tabla-movil thead tr.filtros th:empty{display:none;}
  table.tabla-movil thead tr.filtros input,
  table.tabla-movil thead tr.filtros select{width:100%;}

  table.tabla-movil tbody tr{
    display:block; background:var(--card,#fff);
    border:1px solid var(--line,#e4e8ef); border-radius:10px;
    margin:0 0 10px; padding:2px 0; overflow:hidden;
    box-shadow:0 1px 3px rgba(20,30,60,.05);
  }
  table.tabla-movil tbody tr td{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:14px; width:auto; border:0; padding:8px 12px; text-align:left;
  }
  /* El nombre de la columna, a la izquierda de cada dato. */
  table.tabla-movil tbody tr td::before{
    content:attr(data-lbl); flex:0 0 42%; min-width:0;
    color:var(--muted,#6b7280); font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:.4px; line-height:1.5;
    overflow-wrap:anywhere;
  }
  table.tabla-movil tbody tr td:not(:last-child){
    border-bottom:1px solid #f1f4f8;
  }

  /* La primera celda es el titulo de la ficha y el boton para abrirla. */
  table.tabla-movil tbody tr.mv-ficha td.mv-cab{
    background:#f7f9fc; cursor:pointer; padding:11px 12px;
    font-weight:600; user-select:none;
  }
  table.tabla-movil tbody tr.mv-ficha td.mv-cab::after{
    content:'\25BE'; color:var(--navy,#1F3864); font-size:13px;
    transition:transform .15s; flex:0 0 auto; margin-left:2px;
  }
  table.tabla-movil tbody tr.mv-ficha.abierta td.mv-cab::after{
    transform:rotate(180deg);
  }
  /* Lo que no es cabecera se esconde hasta que se toca la ficha. */
  table.tabla-movil tbody tr.mv-ficha td.mv-det{display:none;}
  table.tabla-movil tbody tr.mv-ficha.abierta td.mv-det{display:flex;}

  /* Filas de estado («Cargando…», «Sin resultados») no son fichas. */
  table.tabla-movil tbody tr.mv-plano{
    background:transparent; border:0; box-shadow:none; text-align:center;
  }
  table.tabla-movil tbody tr.mv-plano td{
    display:block; border:0; text-align:center; color:var(--muted,#6b7280);
  }
  table.tabla-movil tbody tr.mv-plano td::before{content:none;}

  /* Una celda puede traer un boton (PDF, acciones): que no se apriete. */
  table.tabla-movil tbody tr td a,
  table.tabla-movil tbody tr td button{min-height:32px;}

  /* Tablas que siguen siendo tablas (las de detalle dentro de una ficha)
     al menos se pueden arrastrar en vez de romper el ancho. */
  .tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
}