/* ==========================================================================
   COMPONENTE: TIENDA
   Archivo: /css/tienda.css
   Usado por: Panel de Tienda [scout_panel_tienda] (Campañas/Artículos/
   Pedidos), Catálogo [scout_tienda] y Carrito [scout_tienda_carrito].

   Antes vivía repartido en 5 bloques <style> distintos dentro de otros
   tantos archivos PHP — Tienda era el único módulo de la web sin ningún
   CSS propio en /css/ (encontrado en la auditoría de estilos del
   14/08/2026). Al unificarlo aquí, sigue el mismo patrón que ya usan
   Agenda, Calendario, Muro, Eventos Recurrentes, Guía de Uso...
   ========================================================================== */

/* ==========================================================================
   0. TARJETA DE CABECERA DEL PANEL (título + pestañas)
   14/08/2026, a petición expresa. La receta completa (clases
   .panel-admin-lavanda/.panel-admin-chrome/.panel-admin-titulo/
   .panel-admin-contenido) se unificó el 14/08/2026 en
   css/paneles-scout-tabla.css — Tienda fue donde se probó primero, pero
   ahora también la usan Kraal y Secretaría, así que vive en un solo
   sitio para los 3. inc/tienda/shortcode-panel-tienda.php ya usa esas
   clases genéricas en vez de las panel-tienda-* originales.
   El filtro de campaña de la pestaña Pedidos YA NO vive aquí (22/08/2026,
   a petición expresa: "no debería ir en la cabecera... la ponemos en la
   misma fila que el buscador") — se movió junto al buscador, dentro de
   ".panel-admin-contenido" (ver sección 4, más abajo, y
   sw_tienda_gestion_pedidos() en el PHP). Esta sección ya no tiene nada
   exclusivo que añadir sobre la caja de cabecera genérica.
   ========================================================================== */

/* Página de Tienda de cara a las familias (catálogo/carrito/pedidos):
   mismo lenguaje visual que los paneles de gestión (bordes, botones,
   tipografía — de ahí que reutilice .panel-admin-lavanda/.panel-admin-chrome
   de arriba), pero con el ancho CONTENIDO en vez de aprovechar todo el
   disponible (16/08/2026, a petición expresa) — la Zona Admin donde vive
   Kraal usa un ancho propio más generoso (1600px, ver CLAUDE.md, trampa
   #11), pensado para tablas anchas de gestión; esta página la usan sobre
   todo familias desde el móvil/tablet, así que se contiene al mismo ancho
   que ya usa la CABECERA del sitio en general (1100px, "contentSize" de
   theme.json) — ni tan ancha como Kraal, ni más estrecha que el resto de
   la web (680px, el primer valor probado, se veía desproporcionadamente
   pequeño al lado de la cabecera). Marcador propio (.panel-tienda-familia)
   para no afectar a Kraal/Secretaría, que sí quieren su ancho completo. */
.panel-tienda-familia {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    /* Menos aire respecto a la cabecera del sitio (17/08/2026, a petición
       expresa) — anula el margen superior que WordPress mete por defecto
       en el primer bloque de contenido de la página. */
    margin-top: 0 !important;
}
/* Los <input>/<select>/<button> no heredan la tipografía del tema por
   defecto (tienen su propia fuente de sistema del navegador) aunque su
   contenedor sí tenga la fuente correcta — mismo hallazgo ya documentado
   varias veces en el resto de la web (buscador de Kraal, formulario del
   Carrito...). Puesto aquí en el contenedor común a las 3 pestañas
   (16/08/2026, a petición expresa: "revisa el estilo en general") en vez
   de repetirlo suelto en cada campo de Tienda/Carrito/Mi Pedido — cubre
   los tres de una sola vez, y cualquier campo nuevo que se añada en el
   futuro lo hereda gratis sin tener que acordarse de repetirlo. */
.panel-tienda-familia input,
.panel-tienda-familia select,
.panel-tienda-familia button {
    font-family: inherit;
}

/* La cabecera (título + pestañas) del catálogo ya NO tiene estilo propio
   aquí (23/08/2026, a petición expresa: "adapta la cabecera de Tienda al
   formato de las demás cabeceras... fuentes, los botones") — pasó a usar
   ".scout-cabecera-editor"/".scout-fila-acciones-cabecera"/
   ".scout-btn-accion" tal cual (backend-form-edicion-post.css +
   paneles-scout-tabla.css), la misma caja blanca con título en
   mayúsculas 1.5rem y botones outline que ya usan Kraal/Secretaría/Panel
   de Tienda de gestión — antes tenía su propio fondo gris y pestañas de
   solo texto, pensado para diferenciarse por ser de cara a familias, pero
   eso rompía la homogeneidad que se pidió ahora entre todos los paneles.
   ".panel-tabs-nav"/".panel-tab-activa" ya no se usan en esta página. */
/* Condensado general de la página de Tienda (17/08/2026, a petición
   expresa: "lo veo todo muy grande... reducir los tamaños de las fuentes
   y de todo en general"). Todo lo de aquí abajo son las mismas cajas de
   arriba con menos aire/letra más pequeña, no un diseño nuevo. */
/* El título de la cabecera ya no tiene un tamaño propio aquí
   (23/08/2026): usa el 1.5rem estándar de ".panel-admin-titulo", igual
   que Kraal/Secretaría/Panel de Tienda de gestión. */
/* La caja de CONTENIDO (catálogo/carrito/pedidos) — distinta de la
   cabecera de pestañas, que ya tiene su propio padding más arriba, de ahí
   el ":not(:has(...))" para no coger también esa. */
.panel-tienda-familia .panel-admin-chrome:not(:has(.panel-admin-titulo)) {
    padding: var(--espacio-md);
}
.panel-tienda-familia .panel-admin-contenido {
    margin-top: var(--espacio-md);
}

/* ==========================================================================
   1. TARJETAS MÓVILES COMPARTIDAS (Campañas / Artículos / Pedidos)
   Antes generadas por la función PHP sw_tienda_estilos_tarjetas_movil()
   (una plantilla con TBL/COLS sustituidos 3 veces) — con esto viviendo en
   un archivo estático, la parte común se escribe una sola vez de verdad,
   en vez de repetirse (aunque fuera por una función) 3 veces.
   ========================================================================== */
@media (max-width: 768px) {
    .tabla-campanas-moderna.scout-tabla tbody tr,
    .tabla-articulos-moderna.scout-tabla tbody tr,
    .tabla-pedidos-moderna.scout-tabla tbody tr {
        display: grid;
        gap: 0;
        border: none;
        border-bottom: none;
        border-radius: var(--radio-aviso);
        box-shadow: 0 0 0 1px #AAAAAA;
        /* Blanco explícito, no transparente (14/08/2026): "transparente"
           dejaba ver lo que hubiera debajo, que hasta hoy siempre era
           blanco (el fondo de .scout-formulario-wrapper) — ahora que el
           fondo real de la página es lavanda, cada tarjeta necesita su
           propio blanco para no dejarlo traslucir. */
        background: #ffffff;
        margin-bottom: 20px;
        overflow: hidden;
    }
    .tabla-campanas-moderna.scout-tabla tbody tr { grid-template-columns: 1fr auto; }
    .tabla-articulos-moderna.scout-tabla tbody tr { grid-template-columns: repeat(3, 1fr); }
    /* Pedidos: 20 columnas base (en vez de 4) para poder repartir con
       precisión tanto la fila de 3 (Referencia/Fecha/Coste, 50%+25%+25%)
       como la de 5 (P1-P4+Pagado, 20% cada una) sin cambiar la definición
       de columnas entre filas — mínimo común múltiplo de ambos repartos. */
    .tabla-pedidos-moderna.scout-tabla tbody tr { grid-template-columns: repeat(20, 1fr); }

    .tabla-campanas-moderna.scout-tabla td,
    .tabla-articulos-moderna.scout-tabla td,
    .tabla-pedidos-moderna.scout-tabla td {
        box-sizing: border-box;
        min-width: 0;
        min-height: 0 !important;
        padding: 9px 5px 9px 40% !important;
    }
    .tabla-campanas-moderna.scout-tabla td:before,
    .tabla-articulos-moderna.scout-tabla td:before,
    .tabla-pedidos-moderna.scout-tabla td:before {
        top: 9px;
        left: 5px;
        font-size: 0.74rem;
    }
    .tabla-campanas-moderna.scout-tabla input,
    .tabla-campanas-moderna.scout-tabla select,
    .tabla-campanas-moderna.scout-tabla button,
    .tabla-articulos-moderna.scout-tabla input,
    .tabla-articulos-moderna.scout-tabla select,
    .tabla-articulos-moderna.scout-tabla button,
    .tabla-pedidos-moderna.scout-tabla input,
    .tabla-pedidos-moderna.scout-tabla select,
    .tabla-pedidos-moderna.scout-tabla button {
        font-family: inherit;
    }
    /* Forma (ancho fijo, no ocupa todo el ancho de la fila — solo hay 2
       botones aquí, a diferencia de Kraal que tiene 3 y sí necesita
       repartirse el ancho completo). El COLOR (azul/gris) es compartido,
       ver .btn-editar-generico/.btn-ver-generico en
       css/paneles-scout-tabla.css — unificado el 14/08/2026, antes
       estaba duplicado aquí y en Kraal con el mismo valor exacto.
       Selector con el prefijo de cada tabla a propósito (no ".scout-tabla"
       a secas): Kraal también usa estas clases de color pero con OTRA
       forma (ancho:flex, no fijo) — generalizar aquí se colaría en Kraal
       por compartir la clase .scout-tabla. */
    .tabla-campanas-moderna.scout-tabla .btn-editar-generico,
    .tabla-campanas-moderna.scout-tabla .btn-ver-generico,
    .tabla-articulos-moderna.scout-tabla .btn-editar-generico,
    .tabla-articulos-moderna.scout-tabla .btn-ver-generico,
    .tabla-pedidos-moderna.scout-tabla .btn-editar-generico,
    .tabla-pedidos-moderna.scout-tabla .btn-ver-generico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 90px;
        padding: 8px 14px;
        border: 1px solid transparent;
        border-radius: var(--radio-boton);
        font-weight: 600 !important;
    }
}

/* ==========================================================================
   2. PANEL — CAMPAÑAS
   ========================================================================== */
@media (max-width: 768px) {
    /* Nombre + Estado: cabecera de la tarjeta. Clave conserva su etiqueta
       (es un código corto, ambiguo sin contexto — se usa en los conceptos
       de transferencia bancaria). Fecha inicio + Fecha fin forman un
       rango autoexplicativo sin etiquetas. */
    .tabla-campanas-moderna.scout-tabla td.celda-nombre-camp {
        grid-row: 1; grid-column: 1; min-width: 0;
        padding: 9px 5px !important; text-align: left !important;
        font-size: 1.05rem; font-weight: 700;
        /* Gris oscurecido (no el #555555 de .sw-titulo-pagina/clave/número
           — sobre el fondo gris #eaeaea de la cabecera de tarjeta ese tono
           quedaba con poco contraste; aquí hace falta un punto más oscuro
           — a petición expresa 14/08/2026). */
        color: #333333;
        background: #eaeaea; border-bottom: none !important;
    }
    .tabla-campanas-moderna.scout-tabla td.celda-nombre-camp:before { content: none; }
    .tabla-campanas-moderna.scout-tabla td.celda-estado-camp {
        grid-row: 1; grid-column: 2;
        padding: 9px 10px 9px 5px !important; text-align: right !important;
        background: #eaeaea; border-bottom: none !important;
    }
    .tabla-campanas-moderna.scout-tabla td.celda-estado-camp .badge-estado-camp {
        white-space: nowrap;
    }
    .tabla-campanas-moderna.scout-tabla td.celda-estado-camp:before { content: none; }

    .tabla-campanas-moderna.scout-tabla td.celda-clave-camp {
        grid-row: 2; grid-column: 1 / -1;
        color: #555555;
        border-bottom: none !important;
    }

    .tabla-campanas-moderna.scout-tabla td.celda-fi-camp {
        grid-row: 3; grid-column: 1;
        padding: 9px 5px !important; text-align: left !important;
        border-bottom: none !important;
    }
    .tabla-campanas-moderna.scout-tabla td.celda-fi-camp:before { content: none; }
    .tabla-campanas-moderna.scout-tabla td.celda-ff-camp {
        grid-row: 3; grid-column: 2;
        padding: 9px 5px !important; text-align: right !important;
        border-bottom: none !important;
    }
    .tabla-campanas-moderna.scout-tabla td.celda-ff-camp:before { content: none; }

    .tabla-campanas-moderna.scout-tabla td.celda-acciones-camp {
        grid-row: 4; grid-column: 1 / -1;
        padding: 10px 5px !important; text-align: left !important;
        border-bottom: none !important;
    }
    .tabla-campanas-moderna.scout-tabla td.celda-acciones-camp:before { content: none; }
}

/* ==========================================================================
   3. PANEL — ARTÍCULOS
   ========================================================================== */
@media (max-width: 768px) {
    /* Artículo + Precio: cabecera de la tarjeta. display:flex con
       align-items:center en vez de depender del flujo normal: Artículo
       lleva una miniatura + texto (más alto que el precio, texto solo) y
       sin esto quedaban desalineados en vertical. */
    .tabla-articulos-moderna.scout-tabla td.celda-articulo-art {
        grid-row: 1; grid-column: 1 / 3; min-width: 0;
        display: flex; align-items: center;
        padding: 9px 5px !important; text-align: left !important;
        font-size: 1.05rem; font-weight: 700;
        color: #333333;
        background: #eaeaea; border-bottom: none !important;
    }
    .tabla-articulos-moderna.scout-tabla td.celda-articulo-art:before { content: none; }
    .tabla-articulos-moderna.scout-tabla td.celda-precio-art {
        grid-row: 1; grid-column: 3;
        display: flex; align-items: center; justify-content: flex-end;
        padding: 9px 5px !important; text-align: right !important;
        font-weight: 700;
        background: #eaeaea; border-bottom: none !important;
    }
    .tabla-articulos-moderna.scout-tabla td.celda-precio-art:before { content: none; }

    /* Campaña, justo debajo de la cabecera, a ancho completo. */
    .tabla-articulos-moderna.scout-tabla td.celda-campanas-art {
        grid-row: 2; grid-column: 1 / -1;
        text-align: left !important;
        border-bottom: none !important;
    }

    /* Variante + Público + Activo, las tres en la misma fila — hay sitio
       de sobra. display:flex en vez de depender del flujo normal de
       texto: distintos elementos (icono SVG, texto "—") tienen métricas
       de línea distintas y quedaban a alturas distintas con el mecanismo
       genérico de :before + texto en flujo. Con flex ambos quedan
       centrados de forma robusta. */
    .tabla-articulos-moderna.scout-tabla td.celda-variante-art,
    .tabla-articulos-moderna.scout-tabla td.celda-publico-art,
    .tabla-articulos-moderna.scout-tabla td.celda-activo-art {
        grid-row: 3;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        padding: 9px 5px !important; text-align: center !important;
        border-bottom: none !important;
    }
    .tabla-articulos-moderna.scout-tabla td.celda-variante-art { grid-column: 1; }
    .tabla-articulos-moderna.scout-tabla td.celda-publico-art  { grid-column: 2; }
    .tabla-articulos-moderna.scout-tabla td.celda-activo-art   { grid-column: 3; }
    .tabla-articulos-moderna.scout-tabla td.celda-variante-art:before,
    .tabla-articulos-moderna.scout-tabla td.celda-publico-art:before,
    .tabla-articulos-moderna.scout-tabla td.celda-activo-art:before {
        content: attr(data-label);
        position: static; display: block;
        width: auto; text-align: center;
        margin-bottom: 3px; font-size: 0.65em;
    }

    .tabla-articulos-moderna.scout-tabla td.celda-acciones-art {
        grid-row: 4; grid-column: 1 / -1;
        padding: 10px 5px !important; text-align: left !important;
        border-bottom: none !important;
    }
    .tabla-articulos-moderna.scout-tabla td.celda-acciones-art:before { content: none; }
}

/* ==========================================================================
   4. PANEL — PEDIDOS
   ========================================================================== */
/* Filtro de campaña: vive en la misma fila que el buscador, dentro de
   ".panel-admin-contenido" (22/08/2026, ver sección 0 más arriba) — sin
   marco/fondo propio, para no quedar "caja dentro de caja". No es un
   <form> (23/08/2026, tras pasar Pedidos a búsqueda/filtro AJAX sin
   recargar página, ver sw_tienda_gestion_pedidos() en el PHP): es un
   <select> suelto con su propio "change" en JS, flotando junto al
   buscador. */
.tienda-filtro-pedidos {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tienda-filtro-pedidos label {
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.tienda-filtro-pedidos select {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: var(--radio-boton);
    min-width: 0;
    max-width: 100%;
    font-family: inherit;
}
/* ⚠️ 23/08/2026, bug real encontrado (ver comentario de más abajo, sección
   de anchos mínimos): TODAS las reglas de este bloque usaban el selector
   "#tabla-pedidos-tienda", un id que NO EXISTE en el marcado — la
   ".php" pone el id en el <div> contenedor, no en la <table>
   (sw_tienda_gestion_pedidos() en inc/tienda/shortcode-panel-tienda.php,
   "pedidos-tabla-contenedor"). Ninguna regla de este bloque se había
   aplicado nunca en el navegador, desde que se escribieron — el
   selector iba a cazar el fantasma de un id que no está en ningún
   sitio. Corregido a "#pedidos-tabla-contenedor", el id real. */
#pedidos-tabla-contenedor table { width:100%; min-width:950px; border-collapse:collapse; text-align:left; font-size:0.9rem; }
#pedidos-tabla-contenedor thead th { padding:10px 8px; border-bottom:2px solid #e5e7eb; color:#4b5563; white-space:nowrap; }
#pedidos-tabla-contenedor .th-ordenable { cursor:pointer; user-select:none; }
#pedidos-tabla-contenedor .th-ordenable:hover { color:var(--scout-global-base); }
#pedidos-tabla-contenedor tbody tr { border-bottom:1px solid #e5e7eb; }
#pedidos-tabla-contenedor td { padding:8px; vertical-align:middle; }
#pedidos-tabla-contenedor .input-pago-tienda { width:60px; padding:5px 6px; border:1px solid #e5e7eb; border-radius:var(--radio-boton); font-size:0.85em; }
#pedidos-tabla-contenedor select.select-estado-tienda { padding:4px 6px; border-radius:var(--radio-badge); font-weight:700; font-size:0.82em; border:1px solid transparent; cursor:pointer; }
#pedidos-tabla-contenedor select.select-estado-tienda.estado-hecho     { background:#eff6ff; color:#1d4ed8; }
#pedidos-tabla-contenedor select.select-estado-tienda.estado-pagado    { background:#ecfdf5; color:#047857; }
#pedidos-tabla-contenedor select.select-estado-tienda.estado-revisar   { background:#fef3c7; color:#92400e; }
#pedidos-tabla-contenedor select.select-estado-tienda.estado-entregado { background:#ede9fe; color:#5b21b6; }
#pedidos-tabla-contenedor select.select-estado-tienda.estado-cancelado { background:#f1f5f9; color:#64748b; }
.celda-pagado-tienda.completo { color:#16a34a; font-weight:700; }
.celda-pagado-tienda.incompleto { color:#b45309; font-weight:600; }
.celda-pagado-tienda.sobrepagado { display:inline-block; color:#a35656; font-weight:700; background:#fdf6f6; padding:3px 8px; border-radius:var(--radio-badge); border:1px solid #f0d4d4; cursor:help; }
.aviso-cambios-pedidos { display:none; align-items:center; gap:10px; margin:0 0 16px; padding:10px 16px; background:#fef2f2; border:1px solid #fecaca; border-left:4px solid #dc2626; border-radius:var(--radio-aviso); color:#991b1b; font-weight:600; font-size:0.88rem; }
.aviso-cambios-pedidos.visible { display:flex; }

/* Anchos mínimos por columna en escritorio (23/08/2026, bug real: "se ha
   desmadrado" — la tabla no fijaba ningún ancho propio en ninguna de estas
   columnas, así que con "table-layout:auto" (el de por defecto) el
   navegador repartía el espacio a su criterio: como la cabecera ya lleva
   "white-space:nowrap" (línea de arriba) pero el <td> no, en cuanto el
   nombre de una Campaña era algo largo ("Camisetas Tropa, Campaña 2026")
   el navegador prefería partirlo en 3-4 líneas antes que ensanchar esa
   columna, disparando la altura de la fila entera. Con un mínimo propio
   por columna deja de encogerse por debajo de un tamaño razonable — si
   aun así no cabe todo, aparece scroll lateral (mismo criterio ya
   aceptado en el resto de tablas de gestión de la web, no un fallo). */
#pedidos-tabla-contenedor td.celda-numero-ped    { min-width: 110px; }
#pedidos-tabla-contenedor td.celda-campana-ped   { min-width: 180px; }
#pedidos-tabla-contenedor td.celda-comprador-ped { min-width: 170px; }
#pedidos-tabla-contenedor td.celda-fecha-ped     { min-width: 85px;  white-space: nowrap; }
#pedidos-tabla-contenedor td.celda-total-ped     { min-width: 75px;  white-space: nowrap; }
#pedidos-tabla-contenedor td.celda-detalle-ped   { min-width: 55px; }

/* Importes alineados a la derecha, no a la izquierda (23/08/2026, a
   petición expresa) — mismo criterio que ya se aplicó en Listado de
   Inscritos ("las cantidades siempre habría que alinearlas a la derecha o
   en cuanto saltamos de 99 se descuadran"). Cabecera y celda a la vez:
   ".th-num-ped" en el <th> (inc/tienda/shortcode-panel-tienda.php),
   ".celda-total-ped"/".celda-pagado-tienda"/inputs en el <td>. */
#pedidos-tabla-contenedor thead th.th-num-ped { text-align: right; }
#pedidos-tabla-contenedor td.celda-total-ped,
#pedidos-tabla-contenedor td.celda-p1-ped,
#pedidos-tabla-contenedor td.celda-p2-ped,
#pedidos-tabla-contenedor td.celda-p3-ped,
#pedidos-tabla-contenedor td.celda-p4-ped,
#pedidos-tabla-contenedor td.celda-pagado-tienda {
    text-align: right;
}
#pedidos-tabla-contenedor .input-pago-tienda {
    text-align: right;
}
/* La cifra dentro del <input> queda 7px más adentro que el texto de la
   cabecera (border 1px + padding-right 6px propios del input, que la
   cabecera no tiene) — sin este ajuste, "P1" en la cabecera y el "0,00"
   de la celda de abajo no quedan alineados aunque las dos tengan
   text-align:right (23/08/2026, a petición expresa: "se ha quedado
   desalineados los titulos de las cantidades"). Solo afecta a las 4
   columnas con <input> (P1-P4) — Total/Pagado son texto plano sin ese
   padding/borde extra, así que ya alineaban bien sin tocarlas. */
#pedidos-tabla-contenedor thead th.th-num-ped-input {
    padding-right: 15px;
}
/* "Ver" centrado en su columna (23/08/2026, a petición expresa), cabecera
   incluida para que quede centrada sobre el enlace, no solo el enlace. */
#pedidos-tabla-contenedor thead th.th-detalle-ped {
    text-align: center;
}

@media (max-width: 768px) {
    /* LA causa real de que P3/P4 no cupieran: el propio <table> tiene
       min-width:950px fijo (regla de arriba, pensada para que la vista
       de escritorio con scroll horizontal no se aplaste) — nunca se
       anuló para móvil. Aunque la fila reparte su ancho en 4 columnas
       perfectamente iguales, lo hacía sobre una tabla de 950px, así que
       cada columna medía ~237px y en un móvil solo se veía la parte
       izquierda. (23/08/2026: esta regla usaba el mismo id fantasma
       "#tabla-pedidos-tienda" que el resto del bloque de escritorio — ver
       el comentario grande de más arriba — así que en la práctica nunca
       hizo falta, porque el min-width:950px que debía anular tampoco se
       aplicaba nunca. Corregida al id real por si acaso, ahora que ese
       min-width:950px sí es real.) */
    #pedidos-tabla-contenedor table {
        min-width: 100% !important;
    }

    /* Fila 1 (cabecera de la tarjeta): Comprador (nombre + correo) + Estado. */
    .tabla-pedidos-moderna.scout-tabla td.celda-comprador-ped {
        grid-row: 1; grid-column: 1 / 14;
        padding: 9px 5px !important; text-align: left !important;
        font-size: 1.05rem; font-weight: 700;
        color: #333333;
        background: #eaeaea; border-bottom: none !important;
        overflow-wrap: anywhere;
    }
    .tabla-pedidos-moderna.scout-tabla td.celda-comprador-ped:before { content: none; }
    .tabla-pedidos-moderna.scout-tabla td.celda-estado-ped {
        grid-row: 1; grid-column: 14 / 21;
        padding: 9px 10px 9px 5px !important; text-align: right !important;
        background: #eaeaea; border-bottom: none !important;
    }
    .tabla-pedidos-moderna.scout-tabla td.celda-estado-ped:before { content: none; }
    /* El <select> ya trae su propio color de fondo según el estado — que
       se vea entero, sin forzarle más ancho del que necesita su texto. */
    .tabla-pedidos-moderna.scout-tabla td.celda-estado-ped select {
        width: auto;
        /* Sin max-width, un <select> con width:auto se ajusta a SU PROPIO
           contenido (texto + flecha nativa del sistema operativo) sin
           respetar el ancho real de la celda — si ese contenido es más
           ancho que el 25% disponible, se sale sin más. max-width lo
           obliga a encogerse (el texto se recorta si hace falta,
           aceptable en una etiqueta compacta). */
        max-width: 100%;
        box-sizing: border-box;
        /* El padding propio del <select> (4px 6px, ver la regla de
           escritorio #pedidos-tabla-contenedor select.select-estado-tienda)
           lo ensancha más de lo que parece y se come el hueco que
           reserva el padding de la celda — reducido solo aquí, sin
           tocar el desktop. */
        padding: 4px 2px !important;
        font-size: 0.78em !important;
    }

    /* Fila 2: Campaña, sola, a ancho completo. */
    .tabla-pedidos-moderna.scout-tabla td.celda-campana-ped {
        grid-row: 2; grid-column: 1 / 21;
        border-bottom: none !important;
    }

    /* Fila 3: Referencia del pedido + Fecha + Coste, las tres juntas, con
       mini-etiqueta encima (igual patrón que los pagos parciales) para
       que no se confundan entre sí. */
    .tabla-pedidos-moderna.scout-tabla td.celda-numero-ped,
    .tabla-pedidos-moderna.scout-tabla td.celda-fecha-ped,
    .tabla-pedidos-moderna.scout-tabla td.celda-total-ped {
        grid-row: 3;
        padding: 9px 4px !important; text-align: center !important;
        border-bottom: none !important;
    }
    .tabla-pedidos-moderna.scout-tabla td.celda-numero-ped { grid-column: 1 / 11; color: #555555; }
    .tabla-pedidos-moderna.scout-tabla td.celda-fecha-ped  { grid-column: 11 / 16; }
    .tabla-pedidos-moderna.scout-tabla td.celda-total-ped  { grid-column: 16 / 21; }
    .tabla-pedidos-moderna.scout-tabla td.celda-numero-ped:before,
    .tabla-pedidos-moderna.scout-tabla td.celda-fecha-ped:before,
    .tabla-pedidos-moderna.scout-tabla td.celda-total-ped:before {
        content: attr(data-label);
        position: static; display: block;
        width: auto; text-align: center;
        margin-bottom: 3px; font-size: 0.65em;
    }
    .tabla-pedidos-moderna.scout-tabla td.celda-numero-ped strong { font-size: 0.95em; }

    /* Fila 4: P1-P4 + Pagado, las 5 juntas — mismo patrón que Pago1-4 +
       Total en el listado de inscritos. */
    .tabla-pedidos-moderna.scout-tabla td.celda-p1-ped,
    .tabla-pedidos-moderna.scout-tabla td.celda-p2-ped,
    .tabla-pedidos-moderna.scout-tabla td.celda-p3-ped,
    .tabla-pedidos-moderna.scout-tabla td.celda-p4-ped,
    .tabla-pedidos-moderna.scout-tabla td.celda-pagado-ped {
        grid-row: 4;
        padding: 9px 4px !important; text-align: center !important;
        border-bottom: none !important;
    }
    .tabla-pedidos-moderna.scout-tabla td.celda-p1-ped     { grid-column: 1 / 5; }
    .tabla-pedidos-moderna.scout-tabla td.celda-p2-ped     { grid-column: 5 / 9; }
    .tabla-pedidos-moderna.scout-tabla td.celda-p3-ped     { grid-column: 9 / 13; }
    .tabla-pedidos-moderna.scout-tabla td.celda-p4-ped     { grid-column: 13 / 17; }
    /* Última columna de la fila, pegada al borde derecho real de la
       tarjeta — más margen de seguridad que las demás (4px no era
       suficiente en algún móvil real, aunque en el simulador de
       escritorio no se reproducía). */
    .tabla-pedidos-moderna.scout-tabla td.celda-pagado-ped {
        grid-column: 17 / 21;
        padding: 9px 6px 9px 4px !important;
    }
    /* En vez de robarle más espacio útil con padding (eso partía
       "180,00 €" en dos líneas), se reduce un poco la letra para que
       quepa de sobra en una sola línea con margen de verdad. */
    .tabla-pedidos-moderna.scout-tabla td.celda-pagado-ped .valor-pagado-ped {
        font-size: 0.85em;
        white-space: nowrap;
    }
    .tabla-pedidos-moderna.scout-tabla td.celda-p1-ped:before,
    .tabla-pedidos-moderna.scout-tabla td.celda-p2-ped:before,
    .tabla-pedidos-moderna.scout-tabla td.celda-p3-ped:before,
    .tabla-pedidos-moderna.scout-tabla td.celda-p4-ped:before,
    .tabla-pedidos-moderna.scout-tabla td.celda-pagado-ped:before {
        content: attr(data-label);
        position: static; display: block;
        width: auto; text-align: center;
        margin-bottom: 3px; font-size: 0.65em;
    }
    .tabla-pedidos-moderna.scout-tabla td.celda-p1-ped .input-pago-tienda,
    .tabla-pedidos-moderna.scout-tabla td.celda-p2-ped .input-pago-tienda,
    .tabla-pedidos-moderna.scout-tabla td.celda-p3-ped .input-pago-tienda,
    .tabla-pedidos-moderna.scout-tabla td.celda-p4-ped .input-pago-tienda {
        width: 100%; height: 24px; min-width: 0; box-sizing: border-box;
        text-align: center; padding: 4px 2px;
    }
    /* "Pagado" es texto plano (no un <input>), y un <span> y un <input>
       calculan su alto por defecto de forma distinta aunque el resto
       (padding/tamaño de letra) coincida — misma causa que ya vimos en
       el listado de inscritos. Con una altura igual (24px) y centrado
       por flex quedan a la misma altura exacta que P1-P4. */
    .tabla-pedidos-moderna.scout-tabla td.celda-pagado-ped .valor-pagado-ped {
        display: flex; align-items: center; justify-content: center;
        height: 24px;
    }

    /* Fila 5: Detalle, a ancho completo. */
    .tabla-pedidos-moderna.scout-tabla td.celda-detalle-ped {
        grid-row: 5; grid-column: 1 / 21;
        padding: 10px 5px !important; text-align: left !important;
        border-bottom: none !important;
    }
    .tabla-pedidos-moderna.scout-tabla td.celda-detalle-ped:before { content: none; }
}

/* ==========================================================================
   5. CARRITO [scout_tienda_carrito]
   ========================================================================== */
.tienda-carrito-grupo { margin-bottom: 25px; }
.tienda-carrito-grupo h4 { margin-bottom: 10px; color: #111827; }
.tienda-carrito-clave { background: var(--scout-global-fondo); color: var(--scout-global-base); padding: 2px 10px; border-radius: var(--radio-badge); font-size: 0.75rem; font-weight: 600; }
/* "table-layout:fixed" + anchos fijos en píxeles para cantidad/precio/
   quitar (23/08/2026, bug real: "algún desajuste en la posición
   horizontal de unidades y precio") — cada línea del carrito agrupada por
   campaña es una <table> INDEPENDIENTE (una por campaña), así que con el
   reparto automático de ancho de columna (el de por defecto) cada tabla
   calculaba el ancho de su columna "Nombre" según SU PROPIO contenido más
   largo — un artículo con nombre corto en una campaña y uno largo en
   otra dejaban "Unidades"/"Precio" en una posición horizontal distinta
   según la tabla, aunque visualmente están una debajo de otra. Con anchos
   fijos en px (no relativos) en las 3 últimas columnas, esa posición es
   siempre la misma en cualquier tabla de la página — solo la columna
   "Nombre" (sin ancho propio) se ajusta, absorbiendo el resto. */
.tienda-carrito-tabla { width: 100%; table-layout: fixed; border-collapse: collapse; }
.tienda-carrito-tabla td { padding: 8px 6px; border-bottom: 1px solid #e5e7eb; font-size: 0.95rem; vertical-align: middle; }
.tienda-carrito-col-cantidad { width: 70px; }
.tienda-carrito-col-precio { width: 90px; text-align: right; white-space: nowrap; }
.tienda-carrito-col-quitar { width: 60px; text-align: right; }
.tienda-carrito-talla { color: #6b7280; font-size: 0.85em; }
.tienda-carrito-cantidad { width: 55px; box-sizing: border-box; padding: 5px; border: 1px solid var(--scout-global-borde); border-radius: var(--radio-boton); }
.tienda-carrito-quitar { color: #dc2626; text-decoration: none; font-size: 0.85rem; }
/* Más pequeño que el Total de verdad (23/08/2026, bug real: "ahora es más
   grande que el propio total") — antes no tenía font-size propio, así que
   heredaba el tamaño base de la página en vez de uno pensado para quedar
   por debajo del Total (1.2rem) en la jerarquía visual. */
.tienda-carrito-subtotal { text-align: right; font-size: 0.9rem; font-weight: 600; margin-top: 6px; color: #374151; }
.tienda-carrito-total { text-align: right; font-size: 1.2rem; font-weight: 700; color: var(--scout-global-base); margin: 20px 0; padding-top: 12px; border-top: 2px solid #e5e7eb; }
#scout-tienda-carrito-formulario label { display: block; margin-bottom: 4px; font-weight: 500; color: #374151; font-size: 0.9rem; }
#scout-tienda-carrito-formulario input[type="text"],
#scout-tienda-carrito-formulario input[type="email"],
#scout-tienda-carrito-formulario input[type="tel"] { width: 100%; box-sizing: border-box; padding: 9px 12px; margin-bottom: 14px; border: 1px solid #d1d5db; border-radius: var(--radio-boton); font-family: inherit; }
/* El botón de envío ya no lleva su propio color sólido morado — usa las
   clases compartidas .scout-btn-accion.scout-btn-outline-green (mismo
   verde "positivo/confirmar" que el resto de la web, ver el botón
   "Confirmar Pedido" en shortcode-carrito.php), a petición expresa
   (16/08/2026) para igualar el lenguaje visual con los paneles de
   gestión — no necesita ninguna regla propia aquí. */

/* ==========================================================================
   6. CATÁLOGO [scout_tienda]
   ========================================================================== */
/* Tamaños condensados en general (17/08/2026, a petición expresa: "lo
   veo todo muy grande... reducir los tamaños de las fuentes y de todo en
   general") — mismos elementos, menos aire y letra más pequeña. */
.scout-tienda-catalogo .tienda-seccion { margin-bottom: 26px; }
/* Mismo patrón que .sw-subtitulo-seccion (style.css) — cabecera de sección
   dentro de un panel: línea inferior en el morado corporativo. Reutilizado
   aquí en vez de declarado aparte, a petición expresa (16/08/2026), para
   que la división entre campañas se vea con el mismo lenguaje visual que
   el resto de la web, no con un estilo propio de Tienda. */
.scout-tienda-catalogo .tienda-seccion-titulo {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--scout-global-oscuro);
    margin-bottom: var(--espacio-xs);
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--scout-global-base);
}
/* Ya no es un badge aparte debajo del título (16/08/2026, a petición
   expresa) — va dentro del propio <h3>, entre paréntesis, así que solo
   necesita distinguirse por tamaño/color, sin fondo ni caja propia. */
.scout-tienda-catalogo .tienda-seccion-titulo .tienda-seccion-clave {
    display: inline-block;
    /* vertical-align:baseline (por defecto) deja el paréntesis "caído"
       respecto al título al ser mucho más pequeño — middle lo centra
       respecto a la altura de la línea, no respecto a su línea base. */
    vertical-align: middle;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--scout-global-base);
}
/* 230px (subido desde 210px, 23/08/2026, a petición expresa: "mejorar la
   disposición" — nombre+precio en una fila, talla+cantidad+botón en
   otra): con 3 controles compartiendo la fila de compra en vez de 2,
   hacía falta un poco más de ancho mínimo por tarjeta para que ninguno
   se aplaste. */
.scout-tienda-catalogo .tienda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.scout-tienda-catalogo .tienda-tarjeta { background: #fff; border: 1px solid var(--scout-global-borde); border-radius: 12px; box-shadow: var(--sombra-tarjeta); overflow: hidden; display: flex; flex-direction: column; }
.scout-tienda-catalogo .tienda-tarjeta-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--scout-global-fondo); }
.scout-tienda-catalogo .tienda-tarjeta-img-vacia { width: 100%; aspect-ratio: 1 / 1; background: var(--scout-global-fondo); display: flex; align-items: center; justify-content: center; color: var(--scout-global-borde); font-size: 1.6rem; }
.scout-tienda-catalogo .tienda-tarjeta-cuerpo { padding: 10px; flex: 1; display: flex; flex-direction: column; }
/* Fila 1: nombre + precio (23/08/2026, a petición expresa) — antes cada
   uno era una línea propia de la tarjeta. El nombre encoge si hace falta
   (min-width:0 + flex:1) para dejarle sitio fijo al precio, que no debe
   partirse nunca (white-space:nowrap). */
.scout-tienda-catalogo .tienda-tarjeta-fila-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.scout-tienda-catalogo .tienda-tarjeta-nombre { flex: 1 1 auto; min-width: 0; font-size: 0.92rem; font-weight: 600; color: #111827; }
.scout-tienda-catalogo .tienda-tarjeta-precio { flex: 0 0 auto; white-space: nowrap; font-size: 0.95rem; font-weight: 700; color: var(--scout-global-base); }
.scout-tienda-catalogo .tienda-tarjeta-variante { flex: 0 0 auto; font-size: 0.75rem; color: #6b7280; }
.scout-tienda-catalogo .tienda-vacio { text-align: center; color: #6b7280; padding: 24px; background: var(--scout-global-fondo); border-radius: 12px; font-size: 0.9rem; }
/* Fila 2: talla/variante + cantidad + botón, los tres juntos (23/08/2026,
   a petición expresa) — antes la talla iba en su propia línea, separada
   de cantidad+botón. La talla encoge (flex:1 1 0, min-width:0) porque es
   la que más varía de ancho según el texto de cada opción; cantidad y
   botón se quedan con un ancho fijo/mínimo para no aplastarse. */
.scout-tienda-catalogo .tienda-tarjeta-fila-compra { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.scout-tienda-catalogo .tienda-select-talla {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 5px 2px;
    border: 1px solid var(--scout-global-borde);
    border-radius: var(--radio-boton);
    font-size: 0.75rem;
}
.scout-tienda-catalogo .tienda-input-cantidad { flex: 0 0 34px; width: 34px; box-sizing: border-box; padding: 5px 2px; border: 1px solid var(--scout-global-borde); border-radius: var(--radio-boton); font-size: 0.8rem; text-align: center; }
/* Verde, no morado de marca (16/08/2026, a petición expresa) — mismo
   lenguaje que .scout-btn-outline-green (paneles-scout-tabla.css): verde =
   acción positiva/añadir en toda la web, y es además el color que la
   gente ya asocia a "añadir al carrito" en el comercio online en general,
   así se reconoce más fácil y no sumamos un uso más del morado.
   Texto acortado a "Añadir" (23/08/2026, mismo motivo que el resto de
   ajustes de esta fila): con talla+cantidad+botón compartiendo una sola
   fila en una tarjeta de ~230px, "Añadir al carrito" completo no cabía
   sin partirse en varias líneas. */
.scout-tienda-catalogo .tienda-boton-anadir { flex: 1 1 auto; min-width: 0; background-color: #fff; color: var(--color-accion-verde); border: 1px solid var(--color-accion-verde); padding: 6px 4px; border-radius: var(--radio-boton); font-weight: 600; cursor: pointer; font-size: 0.8rem; white-space: nowrap; }

/* Imagen y nombre de cada tarjeta enlazan al detalle del artículo
   (23/08/2026, a petición expresa: "una página de detalle") — sin esto,
   un <a> se ve subrayado y en azul por defecto del navegador; se
   neutraliza para que la tarjeta se vea exactamente igual que antes,
   solo que ahora es clicable. El subrayado vuelve al pasar el ratón, como
   único indicio visual de que es un enlace. */
.scout-tienda-catalogo .tienda-tarjeta-enlace-imagen { display: block; }
.scout-tienda-catalogo .tienda-tarjeta-nombre { text-decoration: none; }
.scout-tienda-catalogo .tienda-tarjeta-enlace-imagen:hover .tienda-tarjeta-img,
.scout-tienda-catalogo .tienda-tarjeta-enlace-imagen:hover .tienda-tarjeta-img-vacia { opacity: 0.85; }
.scout-tienda-catalogo a.tienda-tarjeta-nombre:hover { text-decoration: underline; }

/* ==========================================================================
   6b. DETALLE DE ARTÍCULO [scout_tienda] con "?articulo=" (23/08/2026)
   ========================================================================== */
/* "Volver a la tienda" con el mismo estilo de botón que el resto de la
   web (23/08/2026, a petición expresa: "habría que usar el estilo
   habitual") — ".scout-btn-accion.scout-btn-outline-blue" tal cual, el
   mismo que "← Volver a Panel de Kraal"/"← Ir al Listado" en
   shortcodes-panel-scouter.php, en vez de un enlace subrayado propio.
   Solo el margen inferior es específico de aquí (scope al hijo directo de
   ".scout-tienda-catalogo" para no afectar a ese botón en el resto de
   páginas que lo usan). */
.scout-tienda-catalogo > .scout-btn-accion { margin-bottom: 16px; }
/* Fondo blanco propio (23/08/2026, a petición expresa) — antes el
   contenido flotaba directo sobre el lavanda de la página, sin caja,
   a diferencia de las tarjetas del catálogo o del carrito que sí tienen
   la suya. Mismo lenguaje visual que ".tienda-tarjeta" (borde/sombra/
   radio de esta misma hoja). */
.tienda-detalle {
    display: flex;
    flex-wrap: wrap;
    /* "center", no "flex-start" (23/08/2026, a petición expresa: "la foto
       de la izquierda ponla centrada verticalmente") — centra el marco
       cuadrado de la imagen respecto a la altura real de la columna de
       información, que suele ser más alta que los 320px de la foto. */
    align-items: center;
    gap: 24px;
    background: #fff;
    border: 1px solid var(--scout-global-borde);
    border-radius: 12px;
    box-shadow: var(--sombra-tarjeta);
    padding: 20px;
    box-sizing: border-box;
}
/* Sin recortar, con su proporción original (23/08/2026, a petición
   expresa: "la foto está recortada, mejor si aparece entera") — nada de
   "aspect-ratio"/"object-fit:cover" forzando un cuadrado: solo un ancho
   máximo (para que no domine la página) y alto automático, que respeta
   la proporción real de cada imagen. Borde muy suave para separarla del
   fondo blanco de la caja sin llamar la atención (mismo gris suave que
   ya se usa como borde/separador en el resto de la web). */
.tienda-detalle-imagen { display: block; width: 100%; max-width: 320px; height: auto; border: 1px solid #e5e7eb; border-radius: 12px; }
/* El estado "sin imagen" sí se queda cuadrado a propósito — no hay
   ninguna proporción real que respetar cuando no hay foto. */
.tienda-detalle-imagen-vacia { width: 320px; max-width: 100%; aspect-ratio: 1 / 1; border: 1px solid #e5e7eb; border-radius: 12px; background: var(--scout-global-fondo); display: flex; align-items: center; justify-content: center; color: var(--scout-global-borde); font-size: 3rem; }
.tienda-detalle-info { flex: 1 1 280px; min-width: 0; }
/* Nombre + precio en la misma fila (23/08/2026, a petición expresa) —
   mismo patrón que ".tienda-tarjeta-fila-titulo" en la tarjeta del
   catálogo. */
/* Centrado como grupo (23/08/2026, a petición expresa: "se ve rara la
   línea del título... no sé si debería estar centrada") — a juego con la
   descripción de abajo, que suele verse centrada por el propio contenido
   del editor (imágenes/texto centrados a mano por quien redacta el
   artículo). */
.tienda-detalle-fila-titulo { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.tienda-detalle-nombre { margin: 0; font-size: 1.3rem; font-weight: 700; color: #111827; }
.tienda-detalle-separador { color: #9ca3af; font-weight: 400; }
.tienda-detalle-precio { font-size: 1.15rem; font-weight: 700; color: var(--scout-global-base); white-space: nowrap; }
.tienda-detalle-descripcion { margin-bottom: 20px; color: #374151; line-height: 1.6; }
.tienda-detalle-descripcion :last-child { margin-bottom: 0; }
/* ".tienda-tarjeta" se anula visualmente (sigue en el HTML por el JS, ver
   comentario en shortcode-catalogo.php) — aquí no debe verse como una
   tarjeta con su propio marco, solo como la zona de compra de la página. */
/* Sin "max-width:320px" (quitado 23/08/2026, a petición expresa: "siguen
   a la izquierda, no centrados") — con ese límite el bloque ya iba casi
   siempre lleno de borde a borde (talla+cantidad+botón suman ~319px de
   sus ~320px disponibles), así que "justify-content:center" de la fila
   de dentro no tenía margen real para centrar nada. Sin el límite, el
   bloque ocupa todo el ancho de la columna de información y el grupo de
   controles sí queda centrado de verdad dentro de ese espacio. */
.tienda-detalle-compra.tienda-tarjeta { background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; display: block; }
/* Talla + cantidad + botón centrados (23/08/2026, a petición expresa), y
   con el tamaño normal de un formulario de la web — no el compacto de la
   tarjeta del catálogo (pensado para caber los tres en ~230px de ancho de
   tarjeta), aquí hay sitio de sobra. Cada control vuelve a su ancho
   natural ("flex: 0 ...", no "1 1 0"/"1 1 auto" de la tarjeta, que los
   estira/encoge para pelear por el espacio de una fila muy estrecha). */
.tienda-detalle-compra .tienda-tarjeta-fila-compra { justify-content: center; margin-top: 0; }
.tienda-detalle-compra .tienda-select-talla { flex: 0 1 auto; width: auto; min-width: 100px; font-size: 0.95rem; padding: 9px 10px; }
.tienda-detalle-compra .tienda-input-cantidad { flex: 0 0 60px; width: 60px; font-size: 0.95rem; padding: 9px 6px; }
.tienda-detalle-compra .tienda-boton-anadir { flex: 0 0 auto; font-size: 0.95rem; font-weight: 700; padding: 10px 20px; }

/* Contador del carrito — ahora vive dentro de la propia pestaña "Carrito"
   del panel de pestañas (16/08/2026, ver shortcode-catalogo.php), antes
   en un enlace propio "Ver carrito" ya retirado junto con las 3 páginas
   sueltas (Tienda/Carrito/Pedidos se unificaron en una sola con pestañas). */
.tienda-carrito-badge { background: var(--scout-global-base); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; padding: 0 6px; }

/* ==========================================================================
   7. PEDIDOS — VISTA FAMILIA [scout_tienda_mis_pedidos]
   16/08/2026: mismo sistema de tarjetas móviles y colores de badge que el
   resto de la web — antes esta tabla era HTML con estilos en línea propios,
   sin relación con el resto (ver CLAUDE.md, "Sistema de tarjetas móviles
   para tablas de administración", antes de tocar esto).
   ========================================================================== */
/* min-width:0 anula el min-width:900px de .scout-tabla (paneles-scout-
   tabla.css, pensado para tablas anchas de gestión) — esta solo tiene 6
   columnas cortas y vive en una página de ancho contenido (680px, ver
   sección 0), no necesita scroll horizontal propio. */
.tabla-mis-pedidos-familia { min-width: 0; }

/* Badge de estado — mismos 5 colores que ya usa el <select> de estado del
   panel de gestión de Tienda (sección 4 de este archivo), aquí en versión
   de solo lectura (un <span>, no un <select> — la familia no cambia el
   estado, solo lo consulta). */
.badge-estado-pedido { display: inline-block; padding: 4px 10px; border-radius: var(--radio-badge); font-size: 0.78em; font-weight: 700; white-space: nowrap; }
.badge-estado-pedido.estado-hecho     { background: #eff6ff; color: #1d4ed8; }
.badge-estado-pedido.estado-pagado    { background: #ecfdf5; color: #047857; }
.badge-estado-pedido.estado-revisar   { background: #fef3c7; color: #92400e; }
.badge-estado-pedido.estado-entregado { background: #ede9fe; color: #5b21b6; }
.badge-estado-pedido.estado-cancelado { background: #f1f5f9; color: #64748b; }

@media (max-width: 768px) {
    .tabla-mis-pedidos-familia.scout-tabla tbody tr {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        border: none;
        border-bottom: none;
        border-radius: var(--radio-aviso);
        box-shadow: 0 0 0 1px #AAAAAA;
        background: #ffffff;
        margin-bottom: 20px;
        overflow: hidden;
    }
    .tabla-mis-pedidos-familia.scout-tabla td {
        box-sizing: border-box;
        min-width: 0;
        min-height: 0 !important;
        padding: 9px 5px 9px 40% !important;
    }
    .tabla-mis-pedidos-familia.scout-tabla td:before {
        top: 9px;
        left: 5px;
        font-size: 0.74rem;
    }

    /* Fila 1 (cabecera de la tarjeta): número de pedido + Estado. */
    .tabla-mis-pedidos-familia.scout-tabla td.celda-numero-mp {
        grid-row: 1; grid-column: 1 / 3; min-width: 0;
        padding: 9px 5px !important; text-align: left !important;
        font-size: 1.05rem; font-weight: 700;
        color: #333333;
        background: #eaeaea; border-bottom: none !important;
    }
    .tabla-mis-pedidos-familia.scout-tabla td.celda-numero-mp:before { content: none; }
    .tabla-mis-pedidos-familia.scout-tabla td.celda-estado-mp {
        grid-row: 1; grid-column: 3 / 5;
        padding: 9px 10px 9px 5px !important; text-align: right !important;
        background: #eaeaea; border-bottom: none !important;
    }
    .tabla-mis-pedidos-familia.scout-tabla td.celda-estado-mp:before { content: none; }

    /* Fila 2: Campaña, sola, a ancho completo. */
    .tabla-mis-pedidos-familia.scout-tabla td.celda-campana-mp {
        grid-row: 2; grid-column: 1 / 5;
        border-bottom: none !important;
    }

    /* Fila 3: Fecha + Total, mitad y mitad. */
    .tabla-mis-pedidos-familia.scout-tabla td.celda-fecha-mp {
        grid-row: 3; grid-column: 1 / 3;
        border-bottom: none !important;
    }
    .tabla-mis-pedidos-familia.scout-tabla td.celda-total-mp {
        grid-row: 3; grid-column: 3 / 5;
        border-bottom: none !important;
    }

    /* Fila 4: Acciones (Ver), a ancho completo. */
    .tabla-mis-pedidos-familia.scout-tabla td.celda-acciones-mp {
        grid-row: 4; grid-column: 1 / 5;
        padding: 10px 5px !important; text-align: left !important;
        border-bottom: none !important;
    }
    .tabla-mis-pedidos-familia.scout-tabla td.celda-acciones-mp:before { content: none; }
}

/* ==========================================================================
   5. PANEL — INFORMES (23/08/2026)
   ========================================================================== */
/* Anchos mínimos en las columnas de texto (mismo motivo que en Pedidos, ver
   la sección 4 de más arriba: "table-layout:auto" sin ningún ancho propio
   deja que el navegador reparta el espacio a su criterio y acaba
   partiendo un nombre de artículo largo en varias líneas). Se pone esto
   desde el principio para no repetir la misma ronda de depuración. */
.tabla-informe-ventas td.celda-articulo-inf { min-width: 160px; }
.tabla-informe-ventas td.celda-campana-inf  { min-width: 150px; }

/* Fila filtro + resumen — mismo criterio de layout que la fila
   buscador+filtro de Pedidos (sección 4), reutilizando ".tienda-filtro-
   pedidos" tal cual para el <select> de Campaña en vez de maquetarlo de
   nuevo con estilos sueltos. */
.informe-ventas-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.informe-ventas-resumen {
    color: #6b7280;
    font-size: 0.9rem;
}
.informe-ventas-resumen strong {
    color: #111827;
}

/* Unidades/Importe alineados a la derecha, no a la izquierda — mismo
   criterio ya aplicado a Pedidos/Inscritos ("las cantidades siempre
   habría que alinearlas a la derecha"), con cabecera y celda usando la
   misma clase para que el ancho de columna sea idéntico en las dos. */
.tabla-informe-ventas th.th-num-inf,
.tabla-informe-ventas td.celda-unidades-inf,
.tabla-informe-ventas td.celda-importe-inf {
    text-align: right;
}
.tabla-informe-ventas td.celda-unidades-inf,
.tabla-informe-ventas td.celda-importe-inf {
    white-space: nowrap;
}

/* Nombre completo de la campaña en escritorio, solo la clave ("CAMITROP2026")
   en móvil (23/08/2026, a petición expresa) — los dos <span> se pintan
   siempre desde PHP, aquí solo se decide cuál se ve. Mismo breakpoint
   (850px) que el resto de ajustes de esta tabla, por debajo del cual deja
   de caber cómodamente un nombre largo de campaña. */
.tabla-informe-ventas .campana-codigo-corto { display: none; white-space: nowrap; }
@media screen and (max-width: 850px) {
    .tabla-informe-ventas .campana-titulo-completo { display: none; }
    .tabla-informe-ventas .campana-codigo-corto { display: inline-block; }
    /* Sin esto, el código ("CAMTRO26") podía partirse en dos líneas
       dentro de la celda "Campaña" en móvil (23/08/2026, bug real: "hay
       que impedir que el código salte de línea") — un <span> inline no
       respeta "white-space:nowrap" para efectos de ancho de columna de
       la misma forma que un bloque; "inline-block" sí. */
    .tabla-informe-ventas td.celda-campana-inf { white-space: nowrap; }
    /* La columna "Código" propia (23/08/2026) es solo de escritorio — en
       móvil se deja tal cual estaba, sin columna aparte: el código ya se
       ve dentro de la celda "Campaña" gracias al toggle de arriba.
       ".scout-tabla" añadido a la clase (no solo ".tabla-informe-ventas")
       a propósito: el bloque de más abajo ("SIGUE SIENDO TABLA EN
       MÓVIL") pone "display:table-cell" a todo <td> con esa misma
       especificidad, y al venir después en el archivo ganaría él,
       dejando la columna visible otra vez. */
    .tabla-informe-ventas.scout-tabla th.th-codigo-inf,
    .tabla-informe-ventas.scout-tabla td.celda-codigo-inf {
        display: none;
    }
}

/* --- SIGUE SIENDO TABLA EN MÓVIL, NO TARJETAS --- (23/08/2026, a petición
   expresa: "al ser pocos campos podríamos hacer una tabla, no tarjetas")
   — con solo 5 columnas cortas (Artículo/Talla/Campaña/Unidades/Importe)
   no compensa el despiece en tarjetas apiladas que sí tiene sentido en
   tablas con muchas columnas (Inscritos, Pedidos). Se anula el
   fallback de tarjetas de ".scout-tabla" (paneles-scout-tabla.css,
   @media max-width:850px) SOLO para esta tabla, devolviendo cabecera y
   filas a su comportamiento normal de <table> — si no cupiera entera,
   aparece scroll lateral gracias a ".scout-tabla-contenedor"
   (overflow-x:auto), igual que en escritorio. */
@media screen and (max-width: 850px) {
    .tabla-informe-ventas.scout-tabla {
        min-width: 640px;
    }
    .tabla-informe-ventas.scout-tabla thead {
        display: table-header-group;
    }
    .tabla-informe-ventas.scout-tabla tbody tr {
        display: table-row;
        border: none;
        border-bottom: 1px solid #e5e7eb;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        margin-bottom: 0;
        overflow: visible;
    }
    .tabla-informe-ventas.scout-tabla td {
        display: table-cell;
        min-width: 0;
        border: none !important;
        padding: 9px 8px !important;
        text-align: left;
        position: static;
    }
    /* El reset de arriba ("td { text-align: left }") tiene la MISMA
       especificidad que ".celda-unidades-inf"/".celda-importe-inf" de más
       arriba en este archivo (2 clases + elemento en los dos casos) — al
       venir después en el propio CSS, ganaría él y las cantidades se
       verían a la izquierda. Se repite aquí con una clase de más para
       que gane de verdad, en vez de fiarse del orden de cascada. */
    .tabla-informe-ventas.scout-tabla td.celda-unidades-inf,
    .tabla-informe-ventas.scout-tabla td.celda-importe-inf {
        text-align: right;
    }
    .tabla-informe-ventas.scout-tabla td:before {
        content: none;
    }
}