/* =====================================================================
   Buenaguacate – capa responsive (celular / tablet)
   Cargar DESPUÉS de style.css:
   <link rel="stylesheet" href="<?= BASE_URL ?>/public/css/responsive.css?v=1">
   Solo estilos: no cambia HTML, PHP ni JS.
   ===================================================================== */

/* ---------- Global ---------- */
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
.main-area { min-width: 0; }
.main-area main.container { min-height: calc(100vh - 140px); min-height: calc(100dvh - 140px); }

/* Grillas que nunca desbordan (arregla la tarjeta cortada de Utilidades). */
.grid-cards:not(.metric-cards) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.grid-cards > * { min-width: 0; }
.stat-value { overflow-wrap: anywhere; }

/* Tabs: scroll horizontal limpio, sin barra visible. */
.tabs { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; flex-shrink: 0; scroll-snap-align: start; }

/* ---------- Tablet y anchos medios (sidebar visible, poco espacio) ---------- */
/* Columnas importantes al final (Estado, Acciones) siempre visibles. */
@media (min-width: 701px) and (max-width: 1200px) {
    .table-wrap { overflow-x: auto; }
    .table-wrap > .table { overflow: visible; }
    /* El borde pasa del contenedor a la tabla, para que en modo tarjeta no quede un marco alrededor de todas. */
    .table-wrap:has(> .table-cards) { border: 0; background: transparent; border-radius: 0; }
    .table-wrap > .table-cards { border: 1px solid var(--borde); border-radius: var(--card-radius); background: white; border-collapse: separate; border-spacing: 0; }
    .table-cards td:last-child,
    .table-cards th:last-child {
        position: sticky;
        right: 0;
        background: white;
        box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .15);
    }
    .util-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; }
}

/* ---------- Celular ---------- */
@media (max-width: 700px) {

    /* Inputs a 16px: evita el zoom automático de iOS al tocar un campo. */
    input, select, textarea { font-size: 16px !important; }

    /* Barra superior: marca visible y sticky compacta. */
    .topbar {
        padding: .55rem 1rem;
        padding-top: max(.55rem, env(safe-area-inset-top));
        gap: .6rem;
    }
    .topbar-brand { display: flex; color: var(--verde-oscuro); font-size: 1rem; }
    .topbar-user { display: none; }
    .hamburger { min-width: 44px; min-height: 44px; }

    main.container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-top: 1.1rem;
    }

    /* Cabecera de página */
    .page-header h1 { font-size: 1.6rem; line-height: 1.15; }
    .page-header .muted { font-size: .9rem; }
    .page-header .btn, .page-header > .row-actions .btn { min-height: 46px; justify-content: center; }

    /* KPIs: 2 columnas compactas en vez de 1 tarjeta por pantalla. */
    .metric-cards,
    .grid-cards.metric-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .6rem;
        margin-bottom: 1rem;
    }
    .metric-card {
        padding: .8rem .85rem;
        gap: .15rem;
        border-radius: 12px;
    }
    .metric-card .stat-icon { width: 28px; height: 28px; margin-bottom: .2rem; }
    .metric-card .stat-icon .icon { width: 15px; height: 15px; }
    .metric-card .stat-label { font-size: .78rem; line-height: 1.25; }
    .metric-card .stat-value { font-size: clamp(1.05rem, 5.2vw, 1.3rem); line-height: 1.2; }
    .metric-card .metric-sub { font-size: .7rem; line-height: 1.3; }
    /* Número impar de KPIs: el último ocupa todo el ancho (sin huecos). */
    .metric-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    /* Utilidades: el resultado final destacado a todo el ancho. */
    .util-kpis > :nth-child(3) { grid-column: 1 / -1; }

    /* Filtros: fechas lado a lado, búsqueda a todo el ancho. */
    .filter-bar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
        align-items: end;
    }
    .filter-bar > .search-input,
    .filter-bar > select:only-of-type,
    .filter-bar > .btn-filtrar,
    .filter-bar > .btn-secondary { grid-column: 1 / -1; }
    .filter-bar .filter-field:nth-last-of-type(1):nth-of-type(odd) { grid-column: 1 / -1; }
    .filter-bar .select-input, .filter-bar input { width: 100%; min-height: 44px; }
    .card > .filter-bar:last-child { margin-bottom: 0; }

    /* Encabezados dentro de tarjetas ("Entradas recientes… · Ver todas"). */
    .card .page-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between;
        flex-wrap: nowrap;
        margin-bottom: .75rem;
    }
    .card .page-header h2 { font-size: 1.1rem; margin: 0; line-height: 1.25; }
    .card .page-header > a:not(.btn) { white-space: nowrap; font-size: .9rem; font-weight: 600; }

    /* Tablas matriz que no se vuelven tarjetas: primera columna fija al deslizar. */
    .table-wrap { -webkit-overflow-scrolling: touch; }
    .table-wrap > .table { overflow: visible; } /* overflow:hidden en la tabla anula sticky */
    .table:not(.table-cards) th:first-child,
    .table:not(.table-cards) td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: white;
        box-shadow: 8px 0 8px -8px rgba(0, 0, 0, .15);
    }
    .table:not(.table-cards) tr.fila-total td:first-child { background: #f0fdf4; }

    /* Filas de totales en tablas de inventario. */
    .table-cards tr.fila-total { background: #f0fdf4; border-color: #bbf7d0; }

    /* Tablas compactas (detalle de jornada): sin scroll, texto ajustado. */
    .table-compact { font-size: .78rem; width: 100%; }
    .table-compact th { padding: .5rem .3rem; white-space: normal; font-size: .7rem; line-height: 1.2; }
    .table-compact td { padding: .55rem .3rem; white-space: nowrap; }
    .table.table-compact td:first-child, .table.table-compact th:first-child { position: static; box-shadow: none; padding-left: .5rem; white-space: normal; }
    /* Tarjeta dentro de tarjeta (cargas de una jornada): menos margen interno. */
    .card .card { padding: .75rem; margin-inline: -.25rem; }

    /* Selector de período (7/30/90 días): control segmentado que cabe completo. */
    .tabs.chart-periodo { overflow: visible; gap: 0; }
    .tabs.chart-periodo .tab {
        flex: 1 1 0;
        justify-content: center;
        text-align: center;
        padding-inline: .25rem;
        font-size: .85rem;
    }
    .merma-filtros { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; }
    .merma-filtros .select-input { width: 100%; }
    .merma-filtros .tabs { min-width: 0; width: 100%; }
    .tabs.chart-periodo .tab { min-width: 0; }

    /* Gráficas */
    .chart-card { padding: 1rem; }
    .chart-wrap { margin-inline: -.25rem; }
    .chart-svg text, .chart-eje { font-size: 10px; }
    .donut-chart { max-width: 190px; margin-inline: auto; }
    .dash-grid { gap: .75rem; }

    /* Utilidades: filas etiqueta/valor sin apretarse. */
    .util-fila { gap: .75rem; }
    .util-valor { white-space: nowrap; font-size: .95rem; }

    /* Usuarios: tarjetas de roles como carrusel horizontal. */
    .roles-grid {
        display: flex !important;
        overflow-x: auto;
        gap: .75rem;
        scroll-snap-type: x mandatory;
        padding-bottom: .5rem;
        scrollbar-width: none;
    }
    .roles-grid::-webkit-scrollbar { display: none; }
    .role-info-card { flex: 0 0 82%; scroll-snap-align: start; }

    .card { padding: 1rem; }
    .footer { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}


/* ---------- Tablas → tarjetas según el ESPACIO disponible ----------
   Container query: funciona en celular y también en laptops/tablets
   donde el menú lateral deja poco ancho para la tabla. */
.table-wrap:has(> .table-cards) { container: tabla / inline-size; }

@container tabla (max-width: 680px) {
    /* Base: cada fila es una tarjeta (equivale a la regla de style.css ≤700px). */
    .table-cards, .table-cards tbody, .table-cards tr { display: block; width: 100%; }
    .table-cards { background: transparent !important; border: 0 !important; }
    .table-cards thead { display: none; }
    .table-cards tbody tr {
        background: white;
        border: 1px solid var(--borde);
        border-radius: var(--card-radius);
    }
    .table-cards tbody tr:nth-child(even) td,
    .table-cards tbody tr:hover td { background: transparent; }
    .table-cards td { white-space: normal; position: static !important; box-shadow: none !important; }
    .table-cards td::before {
        content: attr(data-label);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #6b7280;
    }
    .table-cards td:not([data-label])::before { content: none; }
    .table-cards td[colspan] { grid-column: 1 / -1; text-align: center; color: #6b7280; }

    /* Tablas como tarjetas compactas: 2 columnas etiqueta/valor. */
    .table-cards tbody tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0;
        padding: .85rem 1rem;
        margin-bottom: .65rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }
    .table-cards td {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: .1rem;
        padding: .4rem 0 !important;
        border-bottom: 0 !important;
        text-align: left !important;
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: .92rem;
        padding-right: .75rem !important;
    }
    .table-cards td::before { font-size: .66rem !important; }

    /* Primera celda = título de la tarjeta. */
    .table-cards td:first-child {
        grid-column: 1 / -1;
        font-size: 1.02rem;
        font-weight: 700;
        padding-bottom: .55rem !important;
        margin-bottom: .2rem;
        border-bottom: 1px solid var(--borde) !important;
    }
    .table-cards td:first-child::before { content: none; }
    /* Si la tarjeta tiene estado, va arriba a la derecha junto al título. */
    .table-cards tr:has(td .status-pill) td:first-child { grid-column: 1; border-bottom: 0 !important; }
    .table-cards td:has(> .status-pill) {
        grid-column: 2;
        grid-row: 1;
        align-items: flex-end;
        justify-content: center;
        padding-right: 0 !important;
    }
    .table-cards td:has(> .status-pill)::before { content: none; }
    /* Fila 1 subrayada cuando título y estado comparten fila. */
    .table-cards tr:has(td .status-pill) td:first-child,
    .table-cards tr:has(td .status-pill) td:has(> .status-pill) {
        border-bottom: 1px solid var(--borde) !important;
        padding-bottom: .55rem !important;
        margin-bottom: .2rem;
    }

    /* Acciones: fila inferior completa con botones grandes. */
    .table-cards td:last-child:has(.btn-icon),
    .table-cards td:last-child:has(.row-actions) {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .5rem;
        padding-top: .7rem !important;
        margin-top: .3rem;
        border-top: 1px solid var(--borde);
    }
    .table-cards td:last-child:has(.btn-icon)::before { content: none; }
    .table-cards td:last-child .row-actions { display: flex; gap: .5rem; width: 100%; }
    .table-cards .row-actions > *, .table-cards .row-actions > form { flex: 1; margin: 0; display: flex; }
    .table-cards .btn-icon { height: 44px; min-width: 44px; flex: 1; justify-content: center; }
    /* En celular cada acción muestra su texto (sale del atributo title). */
    .table-cards .btn-icon {
        width: auto !important;
        display: inline-flex !important;
        align-items: center;
        gap: .4rem;
        padding: 0 .9rem !important;
        font-size: .85rem;
        font-weight: 600;
        text-decoration: none !important;
        color: #374151;
    }
    .table-cards .btn-icon .icon { width: 18px; height: 18px; flex-shrink: 0; }
    .table-cards .btn-icon[title]::after { content: attr(title); white-space: nowrap; }
    .table-cards .row-actions:has(> :nth-child(3)) .btn-icon[title]::after { font-size: .78rem; }
    /* Botones deshabilitados: el title es una explicación larga (tooltip); en la
       tarjeta se muestra solo la etiqueta corta para que no se monten entre sí. */
    .table-cards .btn-icon-disabled[aria-label]::after { content: attr(aria-label); }
    /* Cuadrícula pareja: todos los botones del mismo ancho; si no caben, bajan en vez de superponerse. */
    .table-cards td:last-child .row-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr));
        gap: .5rem;
    }
    .table-cards td:last-child .row-actions > *,
    .table-cards td:last-child .row-actions > form { min-width: 0; width: 100%; }
    .table-cards .row-actions .btn-icon { width: 100% !important; min-width: 0; padding: 0 .4rem !important; white-space: nowrap; }

    /* Correos y textos largos: a todo el ancho para no partirse feo. */
    .table-cards td[data-label*="mail" i],
    .table-cards td[data-label*="Concepto" i],
    .table-cards td[data-label*="Nota" i] { grid-column: 1 / -1; }

    /* Usuarios: avatar + nombre a todo el ancho. */
    .table-cards td:has(.avatar-cell),
    .table-cards td:has(.user-info) { grid-column: 1 / -1; }
    .table-cards td.id-cell, .table-cards td:has(> .id-cell) { font-size: .8rem; color: #6b7280; }

}


/* Celulares muy pequeños (≤ 360px) */
@media (max-width: 360px) {
    .metric-card .stat-value { font-size: 1rem; }
    .table-cards tbody tr { grid-template-columns: 1fr; }
    .table-cards td:has(> .status-pill) { grid-column: 1; grid-row: auto; align-items: flex-start; }
    .table-cards tr:has(td .status-pill) td:first-child { grid-column: 1 / -1; }
}

/* Dispositivos táctiles: objetivos de toque de al menos 44px. */
@media (pointer: coarse) {
    .sidebar a { min-height: 44px; }
    .tab { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- Cabecera de página: el botón principal siempre arriba a la derecha ---------- */
/* Aunque la descripción sea larga, el texto se ajusta y el botón no baja de línea. */
@media (min-width: 701px) {
    .page-header { flex-wrap: nowrap; align-items: flex-start; }
    .page-header > div:first-child { flex: 1 1 auto; min-width: 0; }
    .page-header > .btn,
    .page-header > .row-actions { flex-shrink: 0; margin-top: .35rem; }
}

/* ---------- Tarjeta ancha con desglose (Ventas del mes por bodega) ---------- */
.metric-card-ancha { grid-column: span 2; }
.metric-desglose {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--borde);
    display: grid;
    gap: .6rem;
}
.metric-desglose-fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.metric-desglose-fila > div { display: flex; flex-direction: column; min-width: 0; }
.metric-desglose-nombre { font-weight: 600; color: var(--texto); }
.metric-desglose-valor { font-weight: 700; font-size: 1.05rem; white-space: nowrap; color: var(--texto); }
/* Con la tarjeta ancha la última tarjeta ya no queda sola: no se estira. */
.metric-cards:has(> .metric-card-ancha) > :last-child:nth-child(odd):not(.metric-card-ancha) { grid-column: auto; }
@media (max-width: 700px) {
    .metric-card-ancha { grid-column: 1 / -1; }
    .metric-desglose-valor { font-size: .95rem; }
}

/* Ventas: con la tarjeta ancha, 3 columnas en escritorio (ancha + 1, luego 3). */
@media (min-width: 901px) {
    .metric-cards:has(> .metric-card-ancha) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ---------- Estados de jornada ---------- */
.status-pill.status-en-curso { background: #dbeafe; color: #1d4ed8; }

/* ---------- Nueva venta: filas de calibre ---------- */
.venta-calibre-row {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, 1fr);
    gap: .6rem;
    align-items: end;
    margin-bottom: .85rem;
}
.venta-calibre-row .venta-pill {
    min-width: 0;
    padding: .62rem .3rem;
    font-size: .9rem;
}
.venta-campo { display: flex; flex-direction: column; gap: .2rem; margin: 0; font-weight: 400; min-width: 0; }
.venta-campo .venta-calibre-label { font-size: .75rem; white-space: nowrap; }
.venta-campo input { width: 100%; min-width: 0; margin: 0; }
.venta-calibre-off { opacity: .45; }
.venta-calibre-off input { background: #f3f4f6; }
.venta-calibre-nota { grid-column: 2 / -1; font-size: .75rem; color: #6b7280; margin-top: -.35rem; }
.venta-total-box.venta-deuda.venta-deuda-cero .venta-total-valor { color: var(--texto); }

/* ---------- Inicio del conductor: "Efectivo a entregar" destacado ---------- */
.conductor-kpis > :nth-child(3) { background: #fffbeb; border-color: #fde68a; }
.conductor-kpis > :nth-child(3) .stat-value { color: #92400e; }
@media (max-width: 700px) {
    /* En celular va primero y a todo el ancho; debajo, carro y vendido lado a lado. */
    .conductor-kpis > :nth-child(3) { order: -1; grid-column: 1 / -1; }
    .conductor-kpis > :nth-child(3) .stat-value { font-size: 1.6rem; }
}

/* =====================================================================
   Perfil socio / inversionista (vista de solo lectura)
   ===================================================================== */

/* Rótulo "Solo lectura" junto al título de cada pantalla. */
body.rol-socio main > .page-header h1::after {
    content: "Solo lectura";
    display: inline-block;
    vertical-align: middle;
    margin-left: .6rem;
    padding: .2rem .6rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
}

/* Gráficas del dashboard: tarjetas de la misma altura por fila, sin huecos en blanco. */
body.rol-socio .dash-grid { align-items: stretch; }
body.rol-socio .dash-grid > .card { height: 100%; }

@media (min-width: 1100px) {
    body.rol-socio .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Dashboard del socio: títulos de sección y bloques. */
.dash-seccion {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0 .85rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
}
.dash-seccion::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

@media (min-width: 701px) {
    body.rol-socio .dash-estado-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.rol-socio .dash-resultados { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.rol-socio .dash-resultados > :first-child { grid-column: span 2; }
}

@media (max-width: 700px) {
    body.rol-socio main > .page-header h1::after { display: block; width: fit-content; margin: .35rem 0 0; }
    /* Utilidad a todo el ancho; Ventas y Gastos lado a lado. */
    body.rol-socio .dash-resultados > :first-child { grid-column: 1 / -1; }
    body.rol-socio .dash-resultados > :last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------- Mejoras de experiencia (oct 2026) ---------- */

/* Botón que todavía no se puede usar (ej. Nueva venta sin carga). */
.btn.btn-inactivo,
.btn.btn-inactivo:hover {
    background: #e5e7eb;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: not-allowed;
    box-shadow: none;
}

/* Las etiquetas de estado no se parten en dos líneas. */
.status-pill { white-space: nowrap; }

/* Título que separa "hoy" del resumen por días (conductor). */
.dash-seccion { font-size: 1.05rem; margin: 1.75rem 0 .5rem; color: var(--texto, #1f2937); }

/* Por atender: lo que el bodeguero tiene que hacer ya. */
.atender {
    background: #fffbeb;
    border: 2px solid #f59e0b;
    border-radius: var(--card-radius);
    padding: 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.atender-titulo { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; margin: 0; color: #92400e; }
.atender-punto { width: .6rem; height: .6rem; border-radius: 50%; background: #f59e0b; animation: atender-pulso 1.6s ease-in-out infinite; }
.atender-n { background: #f59e0b; color: white; border-radius: 999px; font-size: .8rem; padding: .05rem .55rem; }
@keyframes atender-pulso { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .atender-punto { animation: none; } }
.atender-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: white;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: .75rem .9rem;
    color: inherit;
    text-decoration: none;
}
.atender-item:hover { border-color: #f59e0b; }
.atender-texto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.atender-texto > span { font-size: .85rem; color: #6b7280; }
.atender-btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 700px) {
    .atender-item { flex-direction: column; align-items: stretch; }
    .atender-btn { text-align: center; min-height: 46px; display: flex; align-items: center; justify-content: center; }
}

/* Fila de jornada esperando conteo en la lista. */
.table-cards tr.fila-atender { background: #fffbeb; }
.table-cards tbody tr.fila-atender { border-color: #f59e0b; }

/* En celular las listas son tarjetas: sin la tarjeta de afuera (no doble borde). */
@media (max-width: 700px) {
    .card:has(> .table-wrap > .table-cards) {
        background: transparent;
        border: 0;
        padding: 0;
        box-shadow: none;
    }
}

/* Si la página ya muestra "Por atender", no repetir el aviso de arriba. */
body:has(.atender) .aviso-banner[href*="jornadas"] { display: none; }

/* ---------- Catalogo de productos de tienda (superadmin) ---------- */
/* Una tarjeta por producto: nombre y precios para editar, unidades por tienda y acciones. */
.prod-lista { display: flex; flex-direction: column; gap: .75rem; }
.prod-card {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) auto;
    grid-template-areas:
        "nombre  precios acciones"
        "stock   stock   stock"
        "agregar agregar agregar";
    gap: .75rem 1.25rem;
    align-items: end;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--card-radius);
}
.prod-card.prod-off { background: #fafafa; }
.prod-card.prod-off .prod-nombre input { color: #6b7280; }
.prod-card label { margin-top: 0; font-size: .78rem; font-weight: 600; color: #6b7280; }
.prod-card input, .prod-card select { margin-top: .2rem; }
.prod-nombre { grid-area: nombre; min-width: 0; }
.prod-nombre-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .2rem; }
.prod-nombre input { font-weight: 600; }
.prod-precios { grid-area: precios; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; min-width: 0; }
.prod-precios > label { min-width: 0; }
.prod-acciones { grid-area: acciones; display: flex; gap: .5rem; flex-wrap: wrap; }
.prod-acciones button { margin: 0; white-space: nowrap; }
.prod-acciones form { margin: 0; }

.prod-stock { grid-area: stock; display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .75rem; border-top: 1px solid #f3f4f6; }
.prod-chip { display: flex; align-items: baseline; gap: .4rem; padding: .3rem .7rem; background: #f3f4f6; border-radius: 999px; font-size: .88rem; white-space: nowrap; }
.prod-chip small { font-size: .78rem; color: #6b7280; }
.prod-chip strong { font-size: 1rem; }
.prod-chip.prod-chip-total { background: #dcfce7; color: var(--verde-oscuro); }
.prod-chip.prod-chip-total small { color: var(--verde-oscuro); }
.prod-chip.prod-chip-cero strong { color: #9ca3af; }

.prod-agregar { grid-area: agregar; }
.prod-agregar > summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--verde-oscuro); padding: .6rem 0; }
.prod-agregar-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: .75rem; align-items: end; margin-top: .6rem; padding: .85rem; background: #f9fafb; border-radius: 10px; }
.prod-agregar-form button { margin: 0; }

@media (max-width: 900px) {
    .prod-card {
        grid-template-columns: 1fr;
        grid-template-areas: "nombre" "precios" "stock" "acciones" "agregar";
        align-items: stretch;
    }
    .prod-acciones button { flex: 1; min-height: 44px; }
    .prod-acciones form { flex: 1; display: flex; }
    .prod-agregar-form { grid-template-columns: 1fr 1fr; }
    .prod-agregar-form button { grid-column: 1 / -1; min-height: 44px; }
}
@media (max-width: 480px) {
    .prod-agregar-form { grid-template-columns: 1fr; }
}

.prod-titulo { margin: 1.5rem 0 .25rem; }
.prod-titulo + .muted { margin-bottom: .75rem; }
.prod-nombre-top .status-pill { padding: .05rem .6rem; font-size: .74rem; }

/* Venta de tienda: el precio de los otros productos viene del catalogo y no se edita. */
.venta-linea-campos input[readonly] { background: #f3f4f6; color: #374151; font-weight: 700; border-style: dashed; cursor: default; }
.venta-linea-campos input[readonly]:focus { box-shadow: none; border-color: var(--borde); }
/* En pantallas angostas la cantidad y el precio van uno debajo del otro: si no, el numero del contador queda ilegible. */
@media (max-width: 480px) {
    .venta-linea-campos { grid-template-columns: 1fr; }
    .stepper-control { grid-template-columns: 52px 1fr 52px; }
}

/* Recepcion de jornada: el calibre que no vuelve se ve bloqueado pero se lee (solo se apaga el campo). */
tr.venta-calibre-off { opacity: 1; }
tr.venta-calibre-off td:first-child { color: #6b7280; }
tr.venta-calibre-off input { background: #f3f4f6; color: #6b7280; border-style: dashed; cursor: not-allowed; }
tr.venta-calibre-off .venta-calibre-nota { display: block; grid-column: auto; margin: .1rem 0 0; font-size: .75rem; color: #9ca3af; }

/* Select con buscador (select[data-buscable], ver main.js). */
.combo { position: relative; }
.combo-campo { margin-top: .25rem; }
.combo-lista {
    position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
    margin: .25rem 0 0; padding: .25rem; list-style: none;
    max-height: min(18rem, 50vh); overflow-y: auto;
    background: #fff; border: 1px solid var(--borde); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.combo-lista[hidden] { display: none; }
.combo-opcion, .combo-vacio { padding: .7rem .8rem; border-radius: 8px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.combo-opcion { cursor: pointer; }
.combo-opcion small { color: #b91c1c; font-weight: 600; white-space: nowrap; }
.combo-opcion:hover, .combo-opcion.activo { background: #f0fdf4; }
.combo-opcion.elegido span { font-weight: 700; color: var(--verde-oscuro); }
.combo-vacio { color: #6b7280; font-size: .9rem; }