/* =============================================================================
   Ajustes para celular
   -----------------------------------------------------------------------------
   Todo lo de este archivo vive adentro de media queries de ancho chico, asi que
   en notebook y escritorio la pantalla queda exactamente igual que antes.
   Se carga despues de app.css y del tema de marca para poder pisarlos.
   ========================================================================== */

/* =============================================================================
   1. Base: respiracion, tipografia y controles comodos para el dedo
   ========================================================================== */
@media (max-width: 767.98px) {

  body { -webkit-text-size-adjust: 100%; }

  .main-panel .main-content,
  .wrapper.nav-collapsed .main-panel .main-content { padding-left: 0 !important; }

  /* El template le fija el alto a la mitad de la pantalla; en celular estorba */
  .main-panel { height: auto !important; max-height: none !important; min-height: 100% !important; }

  .content-wrapper { padding: .75rem !important; }

  .card {
    border-radius: 14px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(28, 28, 30, .06);
  }
  .card-header { padding: 1rem .9rem .35rem; }
  .card-body { padding: .9rem; }
  .card-title { font-size: 1.05rem; line-height: 1.35; margin-bottom: 0; }

  /* 16px es el minimo que evita que iOS haga zoom al enfocar un campo */
  .form-control,
  select.form-control,
  textarea.form-control,
  .custom-select { font-size: 16px; }

  /* La etiqueta del input-group no dispara el zoom, asi que va chica y no le
     roba ancho al campo */
  .input-group-text { font-size: .82rem; padding: .4rem .6rem; }

  .form-control { height: auto; min-height: 44px; padding: .5rem .75rem; }
  label { font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }

  /* El atributo hidden tiene que seguir ganandole al display de mas abajo */
  [hidden] { display: none !important; }

  /* Botones tocables: 44px es la altura minima recomendada */
  .btn {
    min-height: 44px;
    padding: .55rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
  }
  .btn-sm { min-height: 38px; padding: .4rem .7rem; }
  /* La separacion del icono la pone el tema en el layout, para escritorio y
     celular por igual. No va aca un ":only-child": el texto del boton es un nodo
     de texto, asi que el <i> igual cuenta como hijo unico y anulaba el margen. */

  /* Nada debe empujar la pagina a lo ancho.
     Va "clip" y no "hidden" a proposito: hidden convierte al body en un
     contenedor de scroll y rompe los position:sticky de adentro (la botonera
     del pedido, los encabezados de los modales). */
  body { overflow-x: clip; }
  .row { margin-left: -.5rem; margin-right: -.5rem; }
  .row > [class*="col-"] { padding-left: .5rem; padding-right: .5rem; }
}

/* =============================================================================
   2. Barra superior y menu lateral
   ========================================================================== */
@media (max-width: 991.98px) {

  .header-navbar { min-height: 58px; padding: 0 .85rem !important; }

  /* Una sola fila: menu + nombre de la empresa a la izquierda, usuario a la derecha */
  .header-navbar .container-fluid {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0;
  }
  /* OJO: el template le pone "width: 100% !important" al header Y al container
     porque los apila uno debajo del otro. Al ponerlos en fila, ese 100% hacia
     que el container se comiera todo el ancho y aplastara al header a 0px (se
     perdian la hamburguesa y el nombre). Por eso van los "width: auto". */
  .header-navbar .navbar-header {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    padding-left: 0 !important;
  }
  .header-navbar .navbar-header .navbar-toggle {
    float: none !important;
    margin: 0 !important;
    width: 40px;
    height: 40px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 0 0 40px;
  }
  .header-navbar .navbar-header .navbar-toggle .icon-bar {
    background-color: var(--color-texto) !important;
    border: 0 !important;
    margin: 0 auto !important;
    width: 22px;
    height: 2px;
    border-radius: 2px;
  }

  /* El menu de usuario ya se ve siempre, asi que el "..." no hace falta */
  .header-navbar .navbar-header .navbar-collapse-toggle { display: none !important; }

  .header-navbar .navbar-container {
    display: flex;              /* el template lo deja en display: table */
    align-items: center;
    flex: 0 0 auto;
    width: auto !important;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* navbar-collapse viene con "flex: 1 1 100%": ese 100% dentro de un contenedor
     de ancho indefinido se resuelve en un ancho disparatado que empuja al header
     fuera de la barra. Tiene que ocupar solo lo que ocupa el avatar. */
  .header-navbar #navbarSupportedContent {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0;
  }
  .header-navbar #navbarSupportedContent .navbar-nav {
    display: flex !important;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    width: auto !important;
    margin-right: 0 !important;
  }
  .header-navbar #navbarSupportedContent .navbar-nav > li { flex: 0 0 auto; }
  /* El menu del usuario cuelga del avatar hacia adentro y nunca se sale de la
     pantalla, por angosta que sea */
  .header-navbar .perfil-menu {
    position: absolute;
    right: 0;
    left: auto !important;
    min-width: 250px;
    max-width: calc(100vw - 1.5rem);
  }

  /* Nombre de la empresa al lado del boton de menu (solo se ve en celular) */
  .navbar-marca {
    display: block;   /* hace falta para que el text-overflow recorte */
    font-family: Montserrat, Rubik, sans-serif;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
    color: var(--color-texto);
    margin-left: .6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55vw;
  }

  /* El logo del menu lateral venia con medidas pensadas para escritorio */
  .app-sidebar .sidebar-header .logo .text img {
    width: 150px !important;
    margin-top: 18px !important;
  }
  .app-sidebar .sidebar-header { min-height: 90px; }

  .app-sidebar .navigation > li > a {
    padding: .95rem 1rem;
    font-size: .95rem;
  }

  /* Fondo oscuro detras del menu abierto, para separarlo de la pantalla.
     Se dibuja adentro del propio sidebar (por eso 100vw y z-index negativo) y
     no recibe clicks: de cerrar el menu al tocar afuera ya se encarga el js
     del template. */
  .app-sidebar:not(.hide-sidebar)::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-color: rgba(28, 28, 30, .45);
    pointer-events: none;
  }
}

/* =============================================================================
   3. Tablas como tarjetas
   -----------------------------------------------------------------------------
   En celular una tabla de 6 columnas no entra: o se corta o hay que abrir el "+"
   de datatables. En vez de eso cada fila se dibuja como una tarjeta y cada celda
   como un renglon "etiqueta -> valor". La etiqueta sale del encabezado de la
   columna, que el js copia a cada celda en data-label.
   ========================================================================== */
@media (max-width: 767.98px) {

  .table-responsive { overflow: visible !important; }

  /* OJO con el ancho de las celdas: si se les pone width:100% el padding lateral
     se suma por afuera y la celda termina siendo mas ancha que la tarjeta, asi
     que el contenido se corta contra el borde. Van en auto (que ya es "lo que
     sobra del padre") y con border-box para que nada quede afuera. */
  table.tabla-cards,
  table.tabla-cards tbody,
  table.tabla-cards tr,
  table.tabla-cards td {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
  }
  table.tabla-cards { width: 100% !important; }
  table.tabla-cards tbody,
  table.tabla-cards tr,
  table.tabla-cards td { width: auto !important; }

  table.tabla-cards {
    border: 0 !important;
    margin-bottom: 0 !important;
    /* anula table-responsive-md, que le pone scroll horizontal a la tabla */
    overflow: visible !important;
  }
  table.tabla-cards thead { display: none; }

  table.tabla-cards tbody tr,
  table.tabla-cards.table-striped tbody tr:nth-of-type(odd),
  table.tabla-cards.table-striped tbody tr:nth-of-type(even) {
    background-color: #fff !important;
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    margin: 0 .25rem .8rem;   /* el lateral tiene que ser igual al del buscador */
    padding: .2rem .1rem .35rem;
    box-shadow: 0 1px 3px rgba(28, 28, 30, .07);
    overflow: hidden;
  }

  table.tabla-cards tbody td,
  table.tabla-cards tbody tr td {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    min-width: 0;
    border: 0 !important;
    padding: .45rem .85rem !important;
    text-align: right !important;
    white-space: normal !important;
    /* anywhere (y no break-word) es el que deja que un mail largo sin espacios
       se corte: sin esto la celda no puede achicarse y se sale de la tarjeta */
    overflow-wrap: anywhere;
    background-color: transparent !important;
    font-size: .9rem;
    line-height: 1.4;
  }

  table.tabla-cards tbody td::before {
    content: attr(data-label);
    flex: 0 1 auto;
    max-width: 45%;
    margin-right: auto;
    text-align: left;
    font-size: .67rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    color: #8A8A90;
    /* etiquetas largas como "PEDIDOS GENERADOS" van en dos renglones en vez de
       empujar el valor fuera de la tarjeta */
    white-space: normal;
    line-height: 1.25;
  }

  /* Renglones sin dato (mail vacio, sin pedidos, sin acciones): no se dibujan.
     Los marca el js, porque en css no hay forma de detectar una celda vacia que
     tenga espacios. */
  table.tabla-cards tbody td.celda-vacia { display: none !important; }

  /* Si la tabla quedo con el modo responsive de datatables (pasa al achicar la
     ventana en la compu, no en un celular), la columna del "+" y la fila que
     despliega sobran: la tarjeta ya muestra todo. */
  table.tabla-cards > tbody > tr.child { display: none !important; }
  table.tabla-cards.dtr-inline.collapsed > tbody > tr > td:first-child::before,
  table.tabla-cards > tbody > tr > td.dtr-control::before,
  table.tabla-cards > tbody > tr > td.control::before {
    content: attr(data-label) !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    color: #8A8A90 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: inherit !important;
  }

  /* Celdas sin encabezado (acciones, imagenes): el valor ocupa todo el ancho */
  table.tabla-cards tbody td[data-label=""] { justify-content: center; }
  table.tabla-cards tbody td[data-label=""]::before { content: none; }

  /* Primer renglon de la tarjeta: hace de titulo */
  table.tabla-cards tbody tr td:first-child {
    padding-top: .7rem !important;
    padding-bottom: .6rem !important;
    margin-bottom: .3rem;
    border-bottom: 1px solid var(--color-borde) !important;
    font-weight: 700;
    font-size: .98rem;
    color: var(--color-texto);
  }
  table.tabla-cards tbody tr td:first-child::before { color: #8A8A90; font-weight: 700; }

  /* Fila de "no hay datos": ocupa la tarjeta entera y va centrada */
  table.tabla-cards tbody td.dataTables_empty {
    justify-content: center;
    text-align: center !important;
    padding: 1.4rem .9rem !important;
    border-bottom: 0 !important;
    color: #8A8A90;
  }
  table.tabla-cards tbody td.dataTables_empty::before { content: none; }

  /* Botones dentro de una tarjeta */
  table.tabla-cards tbody td .btn { min-height: 38px; }
  table.tabla-cards tbody td > .btn:only-child { width: 100%; }

  /* Renglon de acciones: los iconos sueltos pasan a ser botones grandes que se
     reparten el ancho. Sale igual en las cuatro tablas porque la celda la marca
     el js por su contenido (celda-acciones) y no por el texto del encabezado. */
  table.tabla-cards tbody td.celda-acciones {
    align-items: center;
    gap: .6rem;
    margin-top: .25rem;
    padding-top: .55rem !important;
    padding-bottom: .55rem !important;
    border-top: 1px solid var(--color-borde) !important;
  }
  table.tabla-cards tbody td.celda-acciones::before { flex: 0 0 auto; align-self: center; }

  /* En algunas tablas los botones cuelgan directo de la celda y en otras de un
     div intermedio: los dos casos tienen que repartirse el ancho igual. */
  table.tabla-cards tbody td.celda-acciones > div {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: .6rem;
  }
  table.tabla-cards tbody td.celda-acciones > a,
  table.tabla-cards tbody td.celda-acciones > button,
  table.tabla-cards tbody td.celda-acciones > div > a,
  table.tabla-cards tbody td.celda-acciones > div > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 42px;
    max-width: 96px;
    height: 42px;
    margin: 0 !important;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    background-color: var(--color-fondo);
    font-size: 1.05rem;
  }
  table.tabla-cards tbody td.celda-acciones i { margin: 0 !important; }

  /* Imagenes de producto: van centradas y un poco mas grandes */
  table.tabla-cards tbody td img { max-width: 100%; height: auto; }
  table.tabla-cards tbody td.celda-imagen { justify-content: center; padding: .6rem !important; }
  table.tabla-cards tbody td.celda-imagen img { width: 84px !important; }

  /* =========== Controles de datatables (paginado, largo, info) =========== */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    width: 100%;
    box-sizing: border-box;
    text-align: center !important;
    margin: .4rem 0 !important;
    padding: 0 .25rem !important;   /* mismo aire lateral que las tarjetas */
  }
  .dataTables_wrapper .dataTables_filter { margin: .25rem 0 .9rem !important; }
  /* El rotulo "Search:" se tapa (el texto pasa al placeholder desde mobile.js)
     para que el campo ocupe el ancho entero y no quede colgado al costado */
  .dataTables_wrapper .dataTables_filter label {
    display: block;      /* si queda inline, el input al 100% mide la mitad */
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0;
    white-space: normal;
    font-size: 0 !important;
  }
  /* El .form-control se lo agrega la integracion de bootstrap de DataTables */
  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_filter input.form-control {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-height: 44px;
    border-radius: 10px;   /* mismo radio que las tarjetas */
    font-size: 16px !important;
  }
  .dataTables_wrapper .dataTables_length select { min-height: 38px; font-size: 16px; }
  .dataTables_wrapper .dataTables_info { font-size: .8rem; color: #8A8A90; }

  .dataTables_wrapper .pagination { justify-content: center; flex-wrap: wrap; margin-bottom: 0; }
  .dataTables_wrapper .pagination .page-link { min-width: 42px; min-height: 42px; line-height: 1.6; }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 42px;
    padding: .45rem .7rem !important;
  }
  div.dataTables_processing { z-index: 30; }
}

/* =============================================================================
   4. Ventanas modales
   -----------------------------------------------------------------------------
   En celular las de contenido van a pantalla completa, con el encabezado y los
   botones fijos y el medio con scroll. Las de confirmacion (modal-sm,
   modal-dialog-centered o modal-confirmacion) se quedan como tarjeta centrada.
   modal-confirmacion es una marca nuestra que solo existe aca, asi que en
   escritorio no cambia absolutamente nada.
   ========================================================================== */
@media (max-width: 767.98px) {

  .modal { padding: 0 !important; }
  .modal-open { overflow: hidden; }

  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100%;
    min-height: 100%;
  }

  .modal-content {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #fff;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--color-borde);
  }
  .modal-title { font-size: 1.02rem; }
  .modal-header .close { padding: .9rem 1rem; margin: -.9rem -1rem -.9rem auto; font-size: 1.6rem; }

  .modal-body { padding: 1rem .9rem; }

  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background-color: #fff;
    border-top: 1px solid var(--color-borde);
    padding: .75rem .9rem !important;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .modal-footer > .btn,
  .modal-footer > .btn-group,
  .modal-footer > input[type="button"] {
    width: 100%;
    margin: .25rem 0 !important;
  }

  /* Botoneras que viven dentro del cuerpo del modal, sin modal-footer */
  .modal-body .form-group.d-flex.justify-content-end,
  .modal-body .d-flex.justify-content-end {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: .5rem;
  }
  .modal-body .form-group.d-flex.justify-content-end > .btn,
  .modal-body .form-group.d-flex.justify-content-end > input[type="button"],
  .modal-body .d-flex.justify-content-end > .btn,
  .modal-body .d-flex.justify-content-end > input[type="button"] {
    width: 100%;
    margin: 0 !important;
  }

  /* Las de confirmacion quedan chicas y centradas */
  .modal-dialog.modal-sm,
  .modal-dialog.modal-confirmacion,
  .modal-dialog.modal-dialog-centered {
    margin: auto !important;
    padding: 1rem;
    min-height: 100%;
    display: flex;
    align-items: center;
  }
  .modal-dialog.modal-sm .modal-content,
  .modal-dialog.modal-confirmacion .modal-content,
  .modal-dialog.modal-dialog-centered .modal-content {
    min-height: 0;
    width: 100%;
    border-radius: 14px;
  }
  .modal-dialog.modal-sm .modal-header,
  .modal-dialog.modal-confirmacion .modal-header,
  .modal-dialog.modal-dialog-centered .modal-header { position: static; }
  .modal-dialog.modal-sm .modal-footer,
  .modal-dialog.modal-confirmacion .modal-footer,
  .modal-dialog.modal-dialog-centered .modal-footer { position: static; }
}

/* =============================================================================
   5. Formularios y botoneras de accion
   ========================================================================== */
@media (max-width: 767.98px) {

  .form-group { margin-bottom: .9rem; }
  .input-group > .form-control { min-width: 0; }

  /* Barra de acciones de una pantalla: los botones se apilan y ocupan el ancho */
  .acciones-mobile {
    display: flex;
    flex-direction: column-reverse;
    gap: .5rem;
    align-items: stretch;
    margin-bottom: .5rem;
  }
  .acciones-mobile .btn,
  .acciones-mobile > .btn {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }

  /* Toastr a lo ancho, sin tapar el pulgar */
  #toast-container.toast-top-full-width > div { width: 96%; margin: .5rem 2%; }

  /* El +/- del acordeon lo posiciona el template contra el .card-header, que es
     el que tiene position:relative, con top:40%. En celular el encabezado pasa a
     dos renglones y ese 40% cae justo encima de lo que haya abajo (el total del
     pedido). Lo amarro al propio link para que quede siempre en su renglon. */
  .collapse-icon .card-header a[data-toggle="collapse"] {
    position: relative;
    display: inline-block;
  }
  .collapse-icon.left .card-header a[data-toggle="collapse"]::before,
  .collapse-icon.left .card-header a[data-toggle="collapse"]::after {
    top: 50%;
    left: 0;
    margin-top: -8px;
    line-height: 1;
  }

  /* Encabezado de acordeon con un boton al lado: el boton baja a su renglon */
  .collapse-icon .card-header { flex-wrap: wrap; }
}

/* =============================================================================
   6. Pantallas de acceso (login, recuperar y cambiar contrasena)
   ========================================================================== */

/* La plantilla dibuja la foto de fondo con "background-size: 100% 100%", que la
   ESTIRA hasta la forma del contenedor. En escritorio casi no se nota porque la
   pantalla es apaisada como la imagen, pero en un celular vertical la foto queda
   deformada e irreconocible. Con "cover" se recorta en lugar de estirarse: se ve
   una franja mas chica, pero con las proporciones reales y sin perder nitidez. */
@media (max-width: 991.98px) {
  #login,
  #forgot-password,
  #forgot-password .forgot-password-bg,
  #regestration,
  #error,
  #maintenance,
  #coming-soon {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Sin alto propio la seccion se achica al alto de la tarjeta y no se ve foto */
  #login,
  #forgot-password .forgot-password-bg { min-height: 100vh; }

  /* En las pantallas de acceso la foto tiene que llegar al borde: si el
     contenedor conserva su padding queda un marco blanco alrededor y ademas
     el alto pasa de 100vh, lo que agrega un scroll vertical de la nada. */
  .blank-page .content-wrapper { padding: 0 !important; }
}

/* La columna con la ilustracion recien aparece en lg, asi que hasta ahi el logo
   de la empresa se muestra arriba del formulario. */
@media (max-width: 991.98px) {
  .login-marca {
    display: block;
    text-align: center;
    padding: .25rem 0 1.1rem;
  }
  .login-marca img { max-width: 200px; max-height: 110px; height: auto; }
}

@media (min-width: 992px) {
  .login-marca { display: none; }
}

@media (max-width: 767.98px) {

  #login .container-fluid,
  #forgot-password .container-fluid { padding: 0 .75rem; }

  #login .full-height-vh,
  #forgot-password .full-height-vh {
    min-height: 100vh;
    height: auto;
    padding: 1.25rem 0;
  }

  /* La tarjeta se redondea 20px, pero el bloque blanco de adentro tiene las
     esquinas rectas y le tapa el borde gris justo en las curvas: por eso se ve
     "rota" en las puntas. Con overflow hidden el contenido se recorta contra el
     redondeo, y sacandole el padding propio a la tarjeta y al card-body el
     bloque llena la caja entera (el aire lo pone la columna de adentro). */
  #login .login-card,
  #forgot-password .login-card {
    width: 100%;
    padding: 0 !important;
    overflow: hidden;
  }
  #login .login-card .card-body,
  #forgot-password .login-card .card-body { padding: 0 !important; }

  #login .login-card .row,
  #forgot-password .login-card .row { background-color: #fff; }

  #login .card-title,
  #forgot-password .card-title { font-size: 1.2rem; }

  /* Reemplaza al px-4 pt-3 de la columna, que no deja aire abajo */
  #login .bg-white,
  #forgot-password .bg-white {
    padding: 1.35rem 1.15rem !important;
  }

  /* Los pies de estas pantallas alinean a la derecha; en celular van a lo ancho */
  #login .fg-actions,
  #forgot-password .fg-actions {
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
  }
  #login .fg-actions > div,
  #forgot-password .fg-actions > div { width: 100%; }

  /* Olvide mi contrasena: que no quede pegado al costado ni cortado */
  #login .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: .35rem;
  }
}