/*
 * Tienda (/gestion/tienda): si está abierta, los pedidos, los productos en
 * rejilla con su ficha en ventana (y cómo los ve el socio), las categorías y
 * los ajustes.
 *
 * Solo la carga plantillas/gestion/tienda.php, después de panel.css,
 * gestion.css (pestañas, tarjetas, la franja de cifras .franja-cifras, los
 * filtros en píldora .tienda-filtro, el interruptor .ajuste, las opciones
 * grandes .eleccion y las ventanas .dialogo--formulario) y socio-tienda.css
 * (la tarjeta .tienda-tarjeta y las pastillas de la vista del socio). Las
 * piezas van en el orden en que salen:
 *
 *   1. Abierta o cerrada
 *   2. Lo de encima de cada lista: buscador, descargas, categorías y botones
 *   3. Cada pedido: cabecera, artículos, envío y lo que toca hacer
 *   4. Cobrar: el total y cómo ha pagado
 *   5. Los productos en rejilla
 *   6. Las ventanas y la ficha del producto por apartados
 *   7. Así lo ve el socio
 *   8. Las fotos del producto
 *   9. Las opciones del producto, con su foto
 *  10. Las categorías
 *  11. Ajustes
 */

/* #region 1. Abierta o cerrada */

/* Una franja con el estado en una frase y su interruptor: decide si los socios pueden comprar. */
.tienda-estado {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-5);
    padding: var(--espacio-4) var(--espacio-5);
    border-left: 4px solid var(--rs-exito);
}

.tienda-estado[hidden] {
    display: none;
}

.tienda-estado__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rs-exito) 14%, transparent);
    color: var(--rs-exito-texto);
}

.tienda-estado__textos {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.tienda-estado__textos span {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.tienda-estado .campo-checkbox {
    flex: none;
    margin: 0;
}

/* Cerrada, en ámbar: que se vea desde lejos. */
.tienda-estado--cerrada {
    border-left-color: var(--rs-aviso);
}

.tienda-estado--cerrada .tienda-estado__icono {
    background: color-mix(in srgb, var(--rs-aviso) 18%, transparent);
    color: var(--rs-aviso-texto);
}
/* #endregion */

/* #region 2. Lo de encima de cada lista: buscador, descargas, categorías y botones */

/* Columnas que pueden encoger: si no, una fila que no cabe (las categorías en el móvil) ensancha la página. */
.tienda-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-5);
}

.tienda-panel > .pestanas__panel:not([hidden], .ajustes-rejilla) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-4);
}

.tienda-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
}

.tienda-barra__buscar {
    flex: 1 1 18rem;
    max-width: 28rem;
    margin: 0;
}

.tienda-barra__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin-left: auto;
}

/* Las categorías como filtro, cada una con cuántos productos lleva. */
.tienda-categorias-filtro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.tienda-categorias-filtro[hidden] {
    display: none;
}

/* Con número, menos relleno a la derecha: el número ya hace de borde. */
.tienda-filtro:has(.tienda-filtro__numero) {
    padding-right: var(--espacio-2);
}

.tienda-filtro__numero {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: var(--radio-pildora);
    background: var(--rs-cian-suave);
    color: var(--rs-cian-texto);
    font-size: var(--texto-pequeno);
    font-weight: 700;
}

.tienda-filtro[aria-pressed="true"] .tienda-filtro__numero {
    background: color-mix(in srgb, var(--marca-acento) 16%, transparent);
    color: var(--marca-acento);
}

@media (max-width: 767px) {
    .tienda-barra__buscar {
        max-width: none;
    }

    /* Las categorías, en una sola fila que se desliza: no se comen la pantalla. */
    .tienda-categorias-filtro {
        flex-wrap: nowrap;
        width: calc(100% + 2 * var(--espacio-4));
        margin: 0 calc(-1 * var(--espacio-4));
        padding: 0 var(--espacio-4) var(--espacio-1);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tienda-categorias-filtro .tienda-filtro {
        flex: none;
    }

    .tienda-barra__acciones {
        width: 100%;
    }

    .tienda-barra__acciones .boton {
        flex: 1 1 auto;
        justify-content: center;
    }
}
/* #endregion */

/* #region 3. Cada pedido: cabecera, artículos, envío y lo que toca hacer */

.tienda-pedidos {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tienda-pedido {
    display: grid;
    gap: var(--espacio-3);
}

.tienda-pedido__cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--espacio-3);
}

.tienda-pedido__cabecera h3 {
    margin: 0;
    font-size: var(--texto-grande);
}

.tienda-pedido__cabecera .ayuda-campo {
    margin: var(--espacio-1) 0 0;
}

.tienda-pedido__estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.tienda-pedido__total {
    font-family: var(--fuente-display);
    font-size: var(--texto-h3);
}

.tienda-pedido__articulos {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rs-borde-sutil);
    list-style: none;
}

.tienda-pedido__articulos li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

/* Lo devuelto sigue a la vista, tachado. */
.tienda-pedido__articulo--devuelto > span:first-child,
.tienda-pedido__articulo--devuelto .tienda-pedido__precio {
    color: var(--rs-texto-tenue);
    text-decoration: line-through;
}

/* La talla, el color... elegidos, junto al artículo. */
.tienda-opcion {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

/* Envío a casa: la dirección, debajo de los artículos. */
.tienda-pedido__envio {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-md);
    background: var(--rs-azul-suave);
    font-size: var(--texto-etiqueta);
}

.tienda-pedido__envio .icono {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* Lo siguiente que toca, a la derecha; deshacer, discreto a su lado. */
.tienda-pedido__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espacio-2);
}

@media (max-width: 767px) {
    .tienda-pedido__articulos li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .tienda-pedido__articulos li > :last-child:not(:nth-child(2)) {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .tienda-pedido__acciones .boton:not(.boton--fantasma) {
        flex: 1;
        justify-content: center;
    }
}
/* #endregion */

/* #region 4. Cobrar: el total y cómo ha pagado */

.tienda-cobro__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding: var(--espacio-3) var(--espacio-4);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-3);
    color: var(--rs-texto-secundario);
}

.tienda-cobro__total strong {
    color: var(--rs-texto);
    font-family: var(--fuente-display);
    font-size: var(--texto-h2);
}

.tienda-cobro__formas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* #endregion */

/* #region 5. Los productos en rejilla */

/* Como el escaparate del socio: la foto grande, el nombre, el precio y cómo va. */
.tienda-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--espacio-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tienda-producto {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
    transition: border-color var(--duracion-hover) var(--curva), box-shadow var(--duracion-hover) var(--curva);
}

.tienda-producto:hover {
    border-color: var(--rs-borde-fuerte);
    box-shadow: var(--sombra-md);
}

.tienda-producto:has(.tienda-producto__abrir:focus-visible) {
    box-shadow: var(--anillo-foco);
}

.tienda-producto:has(.casilla-fila:checked) {
    border-color: var(--marca-acento);
}

/* Todas las fotos, del mismo alto: no encoge aunque la tarjeta lleve más texto. */
.tienda-producto__foto {
    position: relative;
    flex: none;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--rs-superficie-3);
}

.tienda-producto__foto img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tienda-producto__foto .tienda-tarjeta__sin-foto {
    position: absolute;
    inset: 0;
}

/* Oculto o fuera de fechas: más apagado, para que se vea de un vistazo. */
.tienda-producto--apagado .tienda-producto__foto > :is(img, .tienda-tarjeta__sin-foto) {
    filter: grayscale(1);
    opacity: 0.55;
}

/* La casilla para marcar varios, arriba a la izquierda sobre la foto. */
.tienda-producto__casilla {
    position: absolute;
    top: var(--espacio-2);
    left: var(--espacio-2);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    box-shadow: var(--sombra-sm);
}

.tienda-producto__estado {
    position: absolute;
    bottom: var(--espacio-2);
    left: var(--espacio-2);
    box-shadow: var(--sombra-sm);
}

.tienda-producto__cuerpo {
    display: grid;
    flex: 1;
    align-content: start;
    gap: var(--espacio-1);
    padding: var(--espacio-3) var(--espacio-4) 0;
}

.tienda-producto__cuerpo h3 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    font-size: var(--texto-base);
}

/* El nombre abre la ficha, y toda la tarjeta con él. */
.tienda-producto__abrir {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.tienda-producto__abrir::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tienda-producto__abrir:focus-visible {
    outline: none;
}

.tienda-producto__precio {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
    font-weight: 700;
}

.tienda-producto__socio {
    display: block;
    color: var(--rs-texto-secundario);
    font-family: var(--fuente-ui);
    font-size: var(--texto-pequeno);
    font-weight: 500;
}

.tienda-producto__cifras {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1) var(--espacio-3);
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

/*
 * El pie, por encima del clic de la tarjeta: si los socios lo ven. Se cambia al
 * momento, sin abrir la ficha ni borrarlo. El orden, en su ventana.
 */
.tienda-producto__pie {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    margin-top: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border-top: 1px solid var(--rs-borde-tarjeta);
}

.tienda-producto__visible {
    font-size: var(--texto-pequeno);
}

/* La estrella de los destacados, en oro. */
.tienda-destacado {
    display: inline-flex;
}

.tienda-destacado .icono {
    width: 16px;
    height: 16px;
    color: var(--rs-oro);
}

@media (max-width: 767px) {
    .tienda-rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--espacio-3);
    }

    .tienda-producto__cuerpo {
        padding: var(--espacio-2) var(--espacio-3) 0;
    }

    .tienda-producto__pie {
        padding: var(--espacio-2) var(--espacio-3);
    }
}

/*
 * La ventana del orden: cada producto en una fila con su asa (los puntitos),
 * su foto pequeña y su nombre; se arrastra por el asa (ordenar-lista.js) o se
 * mueve con ↑ ↓. La que se arrastra se levanta un poco.
 */
.tienda-orden {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tienda-orden__fila {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-2) var(--espacio-2) var(--espacio-1);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    transition: box-shadow var(--duracion-hover) var(--curva), transform var(--duracion-hover) var(--curva);
}

.tienda-orden__fila.ordenable--arrastrando {
    position: relative;
    z-index: 1;
    border-color: var(--rs-borde-fuerte);
    box-shadow: var(--sombra-md);
    transform: scale(1.01);
}

.tienda-orden__asa {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radio-sm);
    background: none;
    color: var(--rs-texto-secundario);
    cursor: grab;
    touch-action: none;
}

.tienda-orden__fila.ordenable--arrastrando .tienda-orden__asa {
    cursor: grabbing;
}

.tienda-orden__asa:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.tienda-orden__foto {
    display: block;
    flex: none;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--radio-sm);
}

.tienda-orden__foto > img,
.tienda-orden__foto > .tienda-tarjeta__sin-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tienda-orden__foto > .tienda-tarjeta__sin-foto {
    font-size: var(--texto-base);
}

.tienda-orden__nombre {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--espacio-2);
    min-width: 0;
    font-weight: 600;
}

.tienda-orden__flechas {
    display: flex;
    flex: none;
    gap: var(--espacio-1);
}
/* #endregion */

/* #region 6. Las ventanas y la ficha del producto por apartados */

/* En el móvil, todas como hoja de abajo a lo ancho (gestion.css); en pantallas grandes, cada una a su medida. */
@media (min-width: 768px) {
    .tienda-ventana--pequena {
        width: min(32rem, calc(100vw - 2 * var(--espacio-4)));
    }

    /* La ficha: los apartados a la izquierda y, a la derecha, cómo lo ve el socio. */
    .tienda-ventana--producto {
        width: min(68rem, calc(100vw - 2 * var(--espacio-4)));
    }
}

.tienda-ficha-gestion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    align-items: start;
    gap: var(--espacio-6);
}

.tienda-ficha-gestion__apartados {
    display: grid;
    gap: 0;
    min-width: 0;
}

/* Cada apartado, separado del anterior por una línea; su título con su icono. */
.tienda-apartado {
    padding: var(--espacio-5) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

.tienda-apartado:first-child {
    padding-top: 0;
    border-top: 0;
}

.tienda-apartado > legend {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    font-size: var(--texto-grande);
}

.tienda-apartado > legend .icono {
    width: 18px;
    height: 18px;
    color: var(--marca-acento);
}

.tienda-apartado__anadir {
    justify-self: start;
}

.tienda-desplegable summary {
    padding: var(--espacio-2) 0;
    font-weight: 600;
    cursor: pointer;
}

/* Abajo y siempre a mano (la ficha es larga): guardar a la izquierda y retirar apartado a la derecha. */
.tienda-ventana__acciones {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0 calc(-1 * var(--espacio-6)) calc(-1 * var(--espacio-6));
    padding: var(--espacio-4) var(--espacio-6) var(--espacio-5);
    border-top: 1px solid var(--rs-borde-sutil);
    background: var(--rs-superficie-2);
}

.tienda-ventana__retirar {
    margin-left: auto;
}

/* En el móvil, las tres en una fila: guardar ocupa lo que sobra. */
@media (max-width: 767px) {
    .tienda-ventana__acciones {
        flex-wrap: nowrap;
        gap: var(--espacio-2);
    }

    .tienda-ventana__acciones > .boton:first-child {
        flex: 1;
        justify-content: center;
    }

    .tienda-ventana__acciones .boton {
        padding-inline: var(--espacio-3);
    }
}

@media (max-width: 1023px) {
    .tienda-ficha-gestion {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* #endregion */

/* #region 7. Así lo ve el socio */

.tienda-vista-socio {
    position: sticky;
    /* Al bajar, se queda justo debajo de la cabecera de la ventana, que también se queda fija: si no, pasaba por debajo y se cortaba. */
    top: calc(5rem + var(--espacio-4));
    display: grid;
    gap: var(--espacio-3);
    padding: var(--espacio-4);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-3);
}

.tienda-vista-socio__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tienda-vista-socio__titulo .icono {
    width: 16px;
    height: 16px;
}

/* Las tallas o colores, en pequeño: aquí solo se enseñan. */
.tienda-vista-socio .tienda-ficha__pastillas {
    gap: var(--espacio-1);
}

.tienda-vista-socio .tienda-pastilla > span {
    min-height: 0;
    padding: 4px 10px;
    font-size: var(--texto-pequeno);
}

/* La tarjeta de verdad del escaparate, pero quieta: no se toca. */
.tienda-vista-socio .tienda-tarjeta {
    cursor: default;
}

.tienda-vista-socio .tienda-tarjeta:hover {
    transform: none;
    border-color: var(--rs-borde-tarjeta);
    box-shadow: none;
}

.tienda-vista-socio__ficha:empty {
    display: none;
}

.tienda-vista-socio__ficha {
    display: grid;
    gap: var(--espacio-2);
}

.tienda-vista-socio__descripcion {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.tienda-vista-socio .ayuda-campo {
    margin: 0;
}

/* En pantallas estrechas, al final de la ficha y a lo ancho: la tarjeta pequeña y lo demás a su lado. */
@media (max-width: 1023px) {
    .tienda-vista-socio {
        position: static;
        grid-template-columns: 8rem minmax(0, 1fr);
        align-items: start;
    }

    .tienda-vista-socio__titulo {
        grid-column: 1 / -1;
    }

    .tienda-vista-socio__tarjeta {
        grid-row: span 2;
    }
}
/* #endregion */

/* #region 8. Las fotos del producto */

/* En fila, del mismo tamaño; la primera lleva «Portada». La última casilla, para añadir más. */
.tienda-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tienda-fotos__foto {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-3);
}

.tienda-fotos__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tienda-fotos__portada {
    position: absolute;
    top: var(--espacio-1);
    left: var(--espacio-1);
    padding: 2px var(--espacio-2);
    border-radius: var(--radio-pildora);
    background: var(--marca-acento);
    color: var(--marca-sobre-boton);
    font-size: var(--texto-pequeno);
    font-weight: 700;
}

/* Las flechas y la papelera, abajo sobre la foto. */
.tienda-fotos__acciones {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: var(--espacio-1);
    background: color-mix(in srgb, var(--rs-superficie-1) 86%, transparent);
}

.tienda-fotos__anadir {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--espacio-1);
    aspect-ratio: 1;
    padding: var(--espacio-2);
    border: 1px dashed var(--rs-borde-fuerte);
    border-radius: var(--radio-md);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--duracion-hover) var(--curva), color var(--duracion-hover) var(--curva);
}

.tienda-fotos__anadir:hover {
    border-color: var(--marca-acento);
    color: var(--rs-texto);
}

/* El campo de verdad está oculto: el foco se ve en su casilla. */
.tienda-fotos:has(+ #producto-fotos-campo:focus-visible) .tienda-fotos__anadir {
    box-shadow: var(--anillo-foco);
}

.tienda-fotos__anadir .icono {
    width: 22px;
    height: 22px;
}
/* #endregion */

/* #region 9. Las opciones del producto, con su foto */

/* Dentro de la ventana, la tabla sin el margen que lleva en una tarjeta. */
.tienda-ficha-gestion .tabla-desplazable {
    margin: 0;
    padding: 0;
}

.tienda-opciones input {
    width: 100%;
    min-width: 6rem;
}

/* Una celda de verdad, no una caja flexible: así su raya de abajo va a la altura de las demás. */
.tienda-opciones__acciones {
    text-align: right;
    white-space: nowrap;
}

.tienda-opciones__acciones > * + * {
    margin-left: var(--espacio-2);
}

/* La foto de cada opción: una miniatura que se toca para cambiarla. */
.tienda-opciones__foto {
    white-space: nowrap;
}

.tienda-opciones__miniatura {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    overflow: hidden;
    border: 1px dashed var(--rs-borde);
    border-radius: var(--radio-sm);
    color: var(--rs-texto-tenue);
    vertical-align: middle;
    cursor: pointer;
}

.tienda-opciones__miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* #endregion */

/* #region 10. Las categorías */

.tienda-categoria-nueva {
    display: flex;
    gap: var(--espacio-2);
}

.tienda-categoria-nueva .campo {
    flex: 1;
}

.tienda-categorias {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

#ventana-categorias {
    width: min(58rem, calc(100vw - 2rem));
}

.tienda-categoria {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: start;
    gap: var(--espacio-3);
    padding: var(--espacio-3) 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.tienda-categoria .campo {
    gap: 2px;
}

/* Los interruptores y las flechas, a la altura del nombre (su cuenta de productos va debajo). */
.tienda-categoria > .campo-checkbox,
.tienda-categoria__acciones {
    min-height: 2.75rem;
    margin: 0;
}

.tienda-categoria__acciones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espacio-1);
}

@media (max-width: 767px) {
    .tienda-categoria {
        grid-template-columns: minmax(0, 1fr);
    }

    .tienda-categoria__acciones {
        flex-wrap: wrap;
    }
}
/* #endregion */

/* #region 11. Ajustes */

.tienda-ajustes {
    display: grid;
    gap: var(--espacio-3);
    align-content: start;
}

.tienda-ajustes h2,
.tienda-ajustes .ayuda-campo,
.tienda-ajustes .campo {
    margin: 0;
}

.tienda-ajustes > .boton {
    justify-self: start;
}

.app-panel .contenido-gestion .tienda-ajustes__enlaces {
    display: grid;
    gap: var(--espacio-3);
    align-content: center;
    padding: var(--espacio-5);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    list-style: none;
}

.tienda-ajustes__enlaces li {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
}

.tienda-ajustes__enlaces .icono {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}
/* #endregion */

/* #region La barra de los pedidos */
/* Buscar a la izquierda; descargar y «Ver todos», juntos a la derecha. */
.tienda-barra .informe-exportar {
    margin-left: auto;
}
/* #endregion */