/* ==========================================================================
   carrito-mobile.css
   La tabla del carrito, como tarjetas en pantallas chicas.
   Se enlaza solo en carritoView.php, con el flag $cssCarritoMobile.

   El problema medido en un viewport de 412px: la tabla mide 705px dentro de un
   contenedor de 397, o sea se desborda 308px. El .table-responsive lo tapa con
   scroll horizontal, pero deslizar dentro de una tabla en un celular es
   incomodo y, sobre todo, el boton de borrar y el subtotal quedan fuera de la
   vista sin ningun indicio de que estan ahi.

   Son seis columnas: Producto (344px), Precio (68), Cantidad (77), Total (64),
   borrar (31) e imagen (121).

   La solucion es el patron habitual para tablas en mobile: cada <tr> pasa a ser
   una tarjeta. Se hace enteramente por CSS con grid-template-areas, asi que el
   HTML sigue siendo una tabla de verdad y en desktop no cambia absolutamente
   nada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Esto aplica en TODOS los anchos, no solo en mobile.
   Al reemplazar el input de cantidad por el stepper, la columna Cantidad paso
   de 77 a 134px en desktop y le saco lugar a Precio. Como el importe se
   escribe "$ 12000", con un espacio, la columna angosta lo partia en dos
   renglones: el simbolo arriba y el numero abajo.
   -------------------------------------------------------------------------- */
.cart-table .td-precio,
.cart-table .td-subtotal {
    white-space: nowrap;
}

/* El stepper del carrito no necesita ser tan ancho como el de las cards:
   con botones de 32px la columna Cantidad se achica y Precio recupera aire. */
@media (min-width: 768px) {
    .cart-table .qty-btn {
        width: 32px;
        min-height: 32px;
        font-size: 18px;
    }

    .cart-table .qty-stepper .qty-input {
        width: 40px;
    }
}

@media (max-width: 767px) {

    /* Ya no hace falta el scroll horizontal: la tabla entra entera.
       Se apunta a la columna que envuelve la tabla, que es la que lleva
       .table-responsive en carritoView.php. */
    .col-md-8.table-responsive {
        /* overflow y no overflow-x: Bootstrap le pone overflow-y:hidden en este
           mismo breakpoint, y cuando un eje es visible y el otro no, el spec
           obliga a que el visible compute como auto. O sea que poner solo
           overflow-x:visible dejaba la barra de scroll igual. */
        overflow: visible;
        border: none;
        margin-bottom: 0;
    }

    .cart-table,
    .cart-table tbody,
    .cart-table tfoot,
    .cart-table tfoot tr,
    .cart-table tfoot td {
        display: block;
        width: auto;
    }

    /* Sin encabezado de columna: cada dato se explica solo o lleva su
       .etiqueta-mobile. */
    .cart-table thead {
        display: none;
    }

    /* ----------------------------------------------------------------------
       Cada fila, una tarjeta

         ┌──────┬────────────────┬─────────┐
         │      │ nombre         │  borrar │
         │ img  ├────────────────┴─────────┤
         │      │ precio unitario          │
         ├──────┴──────────────┬───────────┤
         │ [-] cantidad [+]    │  subtotal │
         ├─────────────────────┴───────────┤
         │ aviso de stock (si lo hay)      │
         └─────────────────────────────────┘
       ---------------------------------------------------------------------- */
    .cart-table tbody tr {
        display: -ms-grid;
        display: grid;
        /* minmax(0, 1fr) y no 1fr: un item de grilla arranca con min-width auto,
           asi que la columna del medio no podia achicarse por debajo del ancho
           de su contenido y empujaba toda la tarjeta fuera del contenedor. */
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-areas:
            "img    nombre    borrar"
            "img    precio    precio"
            "cant   cant      total"
            "stock  stock     stock";
        gap: 4px 10px;
        -webkit-align-items: center;
        align-items: center;
        border: 1px solid #ececec;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 10px;
    }

    /* El selector va con > hasta el td porque Bootstrap declara el borde como
       `.table > tbody > tr > td`, que tiene mas especificidad que
       `.cart-table tbody td`: sin esto quedaban las lineas de la tabla
       cruzando cada tarjeta. */
    .cart-table > tbody > tr > td,
    .cart-table > tfoot > tr > td {
        display: block;
        border: none;
        padding: 0;
        min-width: 0;
        vertical-align: middle;
    }

    .cart-table > tbody > tr:hover {
        background: transparent;
    }

    .cart-table .td-cart-image {
        grid-area: img;
        -ms-grid-row-span: 2;
    }

    .cart-table .td-cart-image img {
        width: 72px;
        height: 72px;
        object-fit: contain;
        display: block;
    }

    .cart-table .td-nombre {
        grid-area: nombre;
        -webkit-align-self: end;
        align-self: end;
    }

    /* El nombre hereda un white-space:nowrap del .table-responsive de Bootstrap,
       pensado para que la tabla scrollee horizontalmente. Como ya no scrollea,
       el nombre se cortaba en seco al llegar al borde de la tarjeta en vez de
       pasar a la linea siguiente. */
    .cart-table .td-nombre,
    .cart-table .td-nombre a {
        white-space: normal;
        word-break: break-word;
    }

    .cart-table .td-nombre a {
        font-size: 14px;
        line-height: 1.35;
        /* Dos lineas y puntos suspensivos, para que las tarjetas midan parejo. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* La variante de producto de regalo trae position:absolute inline desde el
       PHP, que dentro de la grilla la saca de lugar. */
    .cart-table .td-nombre-promo {
        position: static !important;
    }

    .cart-table .td-precio {
        grid-area: precio;
        font-size: 13px;
        color: #778899;
        -webkit-align-self: start;
        align-self: start;
    }

    /* Sin encabezado de columna, "$ 12000" suelto no dice si es unitario o
       total. La etiqueta aparece solo en este breakpoint. */
    .cart-table .td-precio .etiqueta-mobile,
    .cart-table .td-subtotal .etiqueta-mobile,
    .cart-table .td-stock .etiqueta-mobile {
        display: inline;
        margin-right: 6px;
    }

    .cart-table .td-cantidad {
        grid-area: cant;
    }

    .cart-table .td-subtotal {
        grid-area: total;
        text-align: right;
        font-size: 17px;
        font-weight: 600;
        color: #339933;
        white-space: nowrap;
    }

    /* La etiqueta va arriba del importe y no al lado: con nowrap, "Subtotal
       $ 12000" en una sola linea hacia que la tercera columna, que es auto,
       midiera su max-content y desbordara la tarjeta. */
    .cart-table .td-subtotal .etiqueta-mobile {
        display: block;
        font-size: 11px;
        font-weight: 400;
        color: #778899;
        margin-right: 0;
    }

    .cart-table .td-remove {
        grid-area: borrar;
        text-align: right;
    }

    .cart-table .td-remove .icon-wrapper {
        min-width: 44px;
        min-height: 44px;
        line-height: 44px;
        text-align: center;
    }

    .cart-table .td-stock {
        grid-area: stock;
        font-size: 12px;
    }

    /* La fila de "carrito vacio" no es una tarjeta de producto. */
    .cart-table tbody tr:only-child td[colspan] {
        display: block;
        text-align: center;
    }

    /* Vaciar carrito: discreto y al pie de la lista. */
    .cart-table .td-acciones-carrito {
        text-align: center;
        padding: 4px 0 12px;
    }

    /* ----------------------------------------------------------------------
       Detalle de compra y botones del final
       ---------------------------------------------------------------------- */

    /* Los botones traen margenes negativos y .m-5 inline pensados para desktop
       (margin-left:-1.5rem, entre otros), que en mobile los descuadran. */
    #frmCupon + .col,
    #frmCupon + .col.m-5 {
        margin-left: 0 !important;
        padding-left: 0;
        padding-right: 0;
    }

    .col-detalle-compra .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Los tres botones del final a lo ancho y con area tactil, en orden de
       importancia: finalizar compra es el que cierra la venta. */
    .col-detalle-compra .btn {
        width: 100%;
        min-height: 46px;
        margin: 0 0 8px 0;
        white-space: normal;
    }

    #frmCupon {
        margin-bottom: 8px;
    }

    #frmCupon .form-control {
        height: 46px;
        font-size: 16px;
    }

    #frmCupon .btn {
        width: auto;
        min-width: 56px;
        margin-bottom: 0;
    }
}