/* ======================================
   COMPONENTES REUTILIZABLES
====================================== */

.cargando-generico {
    color: var(--color-text-secondary);
    font-size: 14px;
    padding: 24px 0;
    text-align: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

button {
    font-family: inherit;
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

button:active {
    transform: scale(0.97);
}

input,
select {
    font-family: inherit;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 3px rgba(23, 107, 67, 0.15);
}

.producto-card button:hover {
    background: var(--color-primary-dark);
}

.categoria-activa {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.etiqueta-producto {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 10px;
    border-radius: 20px;
    background: var(--color-warning);
    color: var(--color-white);
    font-size: 12px;
    font-weight: bold;
}
/* ======================================
   MEJORAS RESPONSIVE
====================================== */

#panel {
    width: min(1100px, 95%);
}

.producto-card button {
    transition:
        transform var(--transition-fast),
        background var(--transition-fast);
}

.producto-card button:active {
    transform: scale(0.96);
}

.boton-cesta {
    position: relative;
}

#contadorCesta {
    transition: transform var(--transition-fast);
}

/* Tablet */
@media (max-width: 900px) {
    #panel {
        width: 96%;
        padding: 28px;
    }

    /* Solo gobierna 751-900px: por debajo de 750px la manda el bloque
       "@media (max-width: 750px)" más abajo en este archivo (viene después,
       gana la cascada). No borrar pensando que está duplicada. */
    .productos-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/* Móvil */
@media (max-width: 600px) {
    body {
        background: var(--color-background);
    }

    #panel {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        padding: 18px;
        border-radius: 0;
        box-shadow: none;
    }

    #tituloPanel {
        font-size: 26px;
    }

    .cliente-header {
        gap: 14px;
        margin-bottom: 22px;
    }

    .cliente-header h3 {
        font-size: 20px;
    }

    .boton-cesta {
        width: 100%;
    }

    .buscador-productos input {
        font-size: 16px;
    }

    .categorias {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .categorias button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .producto-card {
        padding: 16px;
    }

    .producto-foto {
        height: 180px;
    }

    .cerrar-sesion {
        margin-bottom: 20px;
    }
}
.producto-anadido {
    background: var(--color-success) !important;
    color: white !important;
}

.producto-card {
    animation: aparecerSuave 0.35s ease;
}

.producto-card:hover {
    transform:
        translateY(-6px)
        scale(1.01);
}

.producto-card button:disabled {
    cursor: default;
}
/* ======================================
   SUPERCLICK UI V1.0
   PANEL DEL CLIENTE
====================================== */

.app-cliente {
    width: 100%;
}

.cliente-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--color-border);
}

.marca-superclick {
    display: flex;
    align-items: center;
    gap: 14px;
}

.marca-icono {
    width: 48px;
    height: 48px;
    display: block;
    border-radius: 15px;
    object-fit: cover;
    box-shadow: var(--shadow-small);
}

.marca-superclick h2 {
    color: var(--color-primary-dark);
    font-size: 24px;
}

.marca-superclick p {
    margin-top: 3px;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.topbar-identidad {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.selector-establecimiento {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 44px;
    padding: 8px 14px;

    border: 1px solid var(--color-border);
    border-radius: 13px;

    background: white;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.selector-establecimiento:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.selector-establecimiento-icono {
    flex-shrink: 0;
    font-size: 18px;
}

.selector-establecimiento-texto {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
    line-height: 1.3;
}

.selector-establecimiento-texto small {
    color: var(--color-text-secondary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.selector-establecimiento-texto strong {
    color: var(--color-text);
    font-size: 13px;
}

.selector-establecimiento-flecha {
    flex-shrink: 0;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.estado-apertura-sucursal {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.estado-apertura-sucursal.abierto {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.estado-apertura-sucursal.cerrado {
    background: #fceaea;
    color: var(--color-error);
}

.topbar-acciones {
    display: flex;
    align-items: center;
    gap: 12px;
}


.boton-cesta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 16px;
    border: none;
    border-radius: 13px;
    background: var(--color-primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
    box-shadow: var(--shadow-small);
}

.boton-cesta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

.cesta-icono {
    font-size: 18px;
}

#contadorCesta {
    min-width: 25px;
    height: 25px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: white;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: bold;
}

.usuario-resumen {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;

    cursor: pointer;
    border-radius: 12px;
    transition: opacity var(--transition-fast);
}

.usuario-resumen:hover {
    opacity: 0.75;
}

.usuario-resumen:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.usuario-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--color-primary);
    color: white;
    font-weight: bold;
}

.usuario-resumen-texto {
    display: flex;
    flex-direction: column;
    text-align: left;
    white-space: nowrap;
}

.usuario-resumen-texto small {
    color: var(--color-text-secondary);
    font-size: 11px;
}

.usuario-resumen-texto strong {
    font-size: 14px;
}

.cliente-bienvenida {
    position: relative;
    overflow: hidden;
    padding: 32px;
    margin-bottom: 26px;
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            var(--color-primary-dark),
            var(--color-primary)
        );
    color: white;
    box-shadow: var(--shadow-medium);
}

.cliente-bienvenida::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -55px;
    bottom: -85px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
}

.bienvenida-etiqueta {
    display: inline-block;
    padding: 7px 12px;
    margin-bottom: 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 12px;
    font-weight: bold;
}

.cliente-bienvenida h3 {
    max-width: 650px;
    margin-bottom: 10px;
    font-size: clamp(25px, 4vw, 36px);
}

.cliente-bienvenida p {
    max-width: 570px;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.6;
}

.buscador-contenedor {
    position: relative;
    margin-bottom: 34px;
}

.buscador-icono {
    position: absolute;
    top: 50%;
    left: 17px;
    transform: translateY(-50%);
    pointer-events: none;
}

.buscador-contenedor input {
    width: 100%;
    min-height: 55px;
    padding: 15px 18px 15px 50px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: white;
    font-size: 16px;
    box-shadow: var(--shadow-small);
}

.seccion-categorias,
.seccion-productos {
    margin-bottom: 34px;
}

.seccion-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 18px;
}

.seccion-encabezado h3 {
    margin-top: 4px;
    color: var(--color-text);
    font-size: 22px;
}

.seccion-encabezado p {
    max-width: 430px;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.seccion-etiqueta {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.categorias {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.categorias button {
    padding: 11px 17px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: white;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-weight: 600;
}

.categorias button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.categoria-activa {
    border-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: white !important;
    box-shadow: var(--shadow-small);
}

/* Fichas de categoría del catálogo del cliente — más grandes y con
   ícono, para que se toquen fácil con el pulgar. Clase propia
   (.ficha-categoria) para no afectar las pastillas de filtro de
   estado que ya usan .categorias/.categoria-activa en historial.js. */

.categorias.categorias-grid-fichas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    flex-wrap: unset;
    overflow: visible;
}

.ficha-categoria {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    width: 100%;
    min-width: 0;
    padding: 12px 6px 10px !important;

    border: none !important;
    border-radius: 16px !important;

    background: var(--color-primary-light) !important;
    color: var(--color-primary-dark) !important;
}

.ficha-categoria:hover {
    transform: translateY(-2px);
}

.ficha-categoria-icono {
    font-size: 22px;
    line-height: 1;
}

.ficha-categoria-icono svg {
    display: block;
    width: 24px;
    height: 24px;
    color: var(--color-primary-dark);
}

.ficha-categoria.categoria-activa .ficha-categoria-icono svg {
    color: white;
}

.ficha-categoria-etiqueta {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.ficha-categoria.categoria-activa {
    background: var(--color-primary) !important;
    color: white !important;
}

.productos-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px;
}

.producto-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-medium);
}

.producto-card h4 {
    min-height: 42px;
    margin-bottom: 8px;
    color: var(--color-text);
    line-height: 1.35;
}

.producto-card > button {
    width: 100%;
    min-height: 43px;
    margin-top: auto;
    border: none;
    border-radius: 12px;
    background: var(--color-primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.producto-card > button:hover {
    background: var(--color-primary-dark);
}

.producto-anadido {
    background: var(--color-success) !important;
}

.producto-agotado {
    background: #c3c7c5 !important;
    cursor: not-allowed !important;
}

@media (max-width: 750px) {

    #panel {
        width: 100%;
        margin: 0;
        padding: 18px;
        border-radius: 0;
        box-shadow: none;
    }

    .cliente-topbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .topbar-identidad {
        width: 100%;
    }

    .marca-superclick p {
        display: none;
    }

    .selector-establecimiento-texto small {
        display: none;
    }

    .boton-cesta > span:nth-child(2) {
        display: none;
    }

    .usuario-resumen-texto {
        display: none;
    }

    .cliente-bienvenida {
        padding: 25px 22px;
    }

    .seccion-encabezado {
        align-items: flex-start;
        flex-direction: column;
    }

    .categorias {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 2px 10px;
    }

    .categorias button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .productos-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .producto-card {
        padding: 11px;
    }

    .producto-foto {
        height: 135px;
    }

}

/* ======================================
   MODO APP (celular): header y bienvenida
   simplificados — la barra de navegación
   inferior ya cubre pedidos/favoritos/cuenta,
   así que el header no necesita repetirlos.
====================================== */

@media (max-width: 900px) {

    .usuario-resumen {
        display: none;
    }

    /* Header en una sola fila: marca + selector + cesta, con
       elipsis en los textos largos para que nunca desborde. */

    .cliente-topbar {
        flex-wrap: nowrap;
        gap: 10px;
        padding-bottom: 14px;
        margin-bottom: 10px;
    }

    .topbar-identidad {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .marca-superclick {
        min-width: 0;
        gap: 8px;
    }

    .marca-icono {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .marca-texto {
        min-width: 0;
    }

    .marca-superclick h2 {
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .selector-establecimiento {
        min-width: 0;
        flex-shrink: 1;
        padding: 6px 10px;
        gap: 6px;
    }

    .selector-establecimiento-texto {
        min-width: 0;
    }

    .selector-establecimiento-texto strong {
        display: block;
        max-width: 88px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-acciones {
        flex-shrink: 0;
    }

    .boton-cesta {
        padding: 8px 10px;
        min-height: 38px;
    }

    .boton-cesta > span:nth-child(2) {
        display: none;
    }

    .seccion-productos {
        margin-bottom: 20px;
    }

    .seccion-encabezado {
        margin-bottom: 12px;
    }

    .marca-superclick p {
        display: none;
    }

    .bienvenida-etiqueta,
    .bienvenida-pregunta,
    .bienvenida-descripcion,
    .bienvenida-resumen {
        display: none;
    }

    .cliente-bienvenida {
        padding: 4px 2px 10px;
        margin-bottom: 8px;
        border-radius: 18px;
        background: none !important;
        box-shadow: none;
        color: var(--color-text);
    }

    .cliente-bienvenida::after {
        display: none;
    }

    .cliente-bienvenida h3 {
        margin-bottom: 0;
        font-size: 26px;
    }

    .buscador-premium-icono,
    .buscador-premium-campo label {
        display: none;
    }

    .buscador-premium {
        grid-template-columns: 1fr;
        padding: 15px 18px;
    }

}

@media (max-width: 480px) {

    .marca-icono {
        width: 38px;
        height: 38px;
    }

    .marca-superclick h2 {
        display: none;
    }

    .marca-superclick {
        gap: 0;
    }

}

@media (max-width: 430px) {

    .producto-foto {
        height: 190px;
    }

}
/* ======================================
   SUPERCLICK UI V1.0
   CESTA
====================================== */

.cesta-pagina {
    width: 100%;
}

.cesta-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--color-border);
}

.cesta-topbar h3 {
    margin-top: 4px;
    color: var(--color-text);
    font-size: 30px;
}

.cesta-topbar p {
    margin-top: 8px;
    color: var(--color-text-secondary);
}

.boton-volver {
    padding: 12px 18px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: white;
    color: var(--color-primary);
    font-weight: bold;
    cursor: pointer;
}

.boton-volver:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    transform: translateY(-2px);
}

.boton-volver-admin {
    display: block;
    margin: 0 0 20px;
}

.cesta-contenido {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 340px);
    gap: 26px;
    align-items: start;
}

.cesta-lista {
    display: grid;
    gap: 15px;
}

.item-cesta {
    display: grid;
    grid-template-columns:
        100px
        minmax(0, 1fr)
        auto
        auto;
    gap: 18px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 17px;
    background: white;
    box-shadow: var(--shadow-small);
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.item-cesta:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.item-cesta img {
    width: 100px;
    height: 90px;
    object-fit: cover;
    border-radius: 13px;
    background: var(--color-primary-light);
}

.item-cesta-info h4 {
    margin: 8px 0;
    color: var(--color-text);
}

.item-cesta-info p {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.item-cesta-cantidad {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 12px;
    background: var(--color-primary-light);
}

.item-cesta-cantidad button {
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 9px;
    background: white;
    color: var(--color-primary);
    font-size: 19px;
    font-weight: bold;
    cursor: pointer;
}

.item-cesta-cantidad span {
    min-width: 25px;
    text-align: center;
    font-weight: bold;
}

.item-cesta-total {
    text-align: right;
}

.item-cesta-total span {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.item-cesta-total strong {
    color: var(--color-primary-dark);
    font-size: 17px;
}

.boton-eliminar {
    grid-column: 2 / -1;
    justify-self: end;
    padding: 8px 12px;
    border: none;
    border-radius: 9px;
    background: #fceaea;
    color: var(--color-error);
    cursor: pointer;
}

.cesta-resumen-lateral {
    position: sticky;
    top: 20px;
}

.resumen-cesta {
    padding: 23px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: white;
    box-shadow: var(--shadow-medium);
}

.resumen-cesta h3 {
    margin: 5px 0 22px;
    color: var(--color-text);
}

.resumen-linea,
.resumen-total {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.resumen-linea {
    padding: 13px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.resumen-linea strong {
    color: var(--color-text);
}

.resumen-total {
    padding: 20px 0;
    color: var(--color-text);
    font-size: 19px;
}

.resumen-total strong {
    color: var(--color-primary-dark);
    font-size: 22px;
}

.boton-confirmar,
.boton-vaciar {
    width: 100%;
    min-height: 46px;
    border: none;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
}

.boton-confirmar {
    margin-bottom: 10px;
    background: var(--color-primary);
    color: white;
}

.boton-confirmar:hover {
    background: var(--color-primary-dark);
}

.boton-vaciar {
    background: #fceaea;
    color: var(--color-error);
}

.cesta-vacia {
    grid-column: 1 / -1;
    padding: 70px 25px;
    border: 1px dashed var(--color-border);
    border-radius: 20px;
    background: white;
    text-align: center;
}

.cesta-vacia-icono {
    margin-bottom: 15px;
    font-size: 65px;
}

.cesta-vacia h3 {
    margin-bottom: 10px;
    color: var(--color-text);
}

.cesta-vacia p {
    margin-bottom: 22px;
    color: var(--color-text-secondary);
}

.cesta-vacia button {
    padding: 13px 20px;
    border: none;
    border-radius: 12px;
    background: var(--color-primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

@media (max-width: 900px) {

    .cesta-contenido {
        grid-template-columns: 1fr;
    }

    .cesta-resumen-lateral {
        position: static;
    }

}

@media (max-width: 650px) {

    .cesta-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .item-cesta {
        grid-template-columns:
            75px
            minmax(0, 1fr);
    }

    .item-cesta img {
        width: 75px;
        height: 70px;
    }

    .item-cesta-cantidad,
    .item-cesta-total,
    .boton-eliminar {
        grid-column: 2;
        justify-self: start;
    }

    .item-cesta-total {
        text-align: left;
    }

}
/* ======================================
   TARJETAS DE PRODUCTO V2
====================================== */

.producto-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: var(--shadow-small);
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.producto-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-medium);
}

.producto-imagen-contenedor {
    position: relative;
    overflow: hidden;
    height: 190px;
    background: var(--color-primary-light);
}

.producto-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.producto-card:hover .producto-foto {
    transform: scale(1.05);
}

.boton-favorito {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);

    font-size: 21px;
    cursor: pointer;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.16);

    transition:
        transform var(--transition-fast),
        background var(--transition-fast);
}

.boton-favorito:hover {
    transform: scale(1.12);
    background: white;
}

.producto-etiqueta {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 9;

    padding: 7px 11px;

    border-radius: 999px;

    background: var(--color-primary);
    color: white;

    font-size: 11px;
    font-weight: bold;
}

.producto-etiqueta.agotado {
    background: var(--color-error);
}

.producto-contenido {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 17px;
}

.producto-categoria {
    align-self: flex-start;

    padding: 6px 10px;
    margin-bottom: 11px;

    border-radius: 999px;

    background: var(--color-primary-light);
    color: var(--color-primary);

    font-size: 11px;
    font-weight: bold;
}

.producto-card h4 {
    min-height: 43px;
    margin-bottom: 10px;

    color: var(--color-text);

    font-size: 17px;
    line-height: 1.35;
}

.producto-valoracion {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 18px;
}

.producto-valoracion span {
    color: var(--color-warning);
    letter-spacing: 1px;
}

.producto-valoracion small {
    color: var(--color-text-secondary);
}

.producto-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    margin-top: auto;
}

.producto-precio {
    margin: 0;
    margin-top: auto;

    color: var(--color-primary-dark);

    font-size: 20px;
    font-weight: bold;
}

.boton-anadir-flotante {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 15;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 3px solid var(--color-white);
    border-radius: 50%;

    background: var(--color-primary);
    color: white;

    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.boton-anadir-flotante:hover {
    background: var(--color-primary-dark);
    transform: scale(1.08);
}

.boton-anadir-flotante:disabled {
    background: var(--color-success);
    cursor: default;
    transform: none;
}

.boton-anadir-producto,
.producto-agotado {
    min-height: 42px;
    padding: 10px 14px;

    border: none;
    border-radius: 12px;

    font-weight: bold;
}

.boton-anadir-producto {
    background: var(--color-primary);
    color: white;
    cursor: pointer;
}

.boton-anadir-producto:hover {
    background: var(--color-primary-dark);
}

.producto-agotado {
    background: #d1d5d3;
    color: #5f6662;
    cursor: not-allowed;
}

.producto-anadido {
    background: var(--color-success) !important;
}

.boton-ver-mas-productos {
    display: block;

    width: auto;
    margin: 22px auto 0;
    padding: 8px 18px;

    border: 1px solid var(--color-primary);
    border-radius: 999px;

    background: var(--color-white);
    color: var(--color-primary);

    font-size: 13px;
    font-weight: bold;
    cursor: pointer;

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.boton-ver-mas-productos:hover {
    background: var(--color-primary);
    color: white;
}

.boton-ver-menos-productos {
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.boton-ver-menos-productos:hover {
    background: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    color: white;
}

@media (max-width: 650px) {

    .producto-imagen-contenedor {
        height: 170px;
    }

    .producto-pie {
        align-items: stretch;
        flex-direction: column;
    }

    .boton-anadir-producto,
    .producto-agotado {
        width: 100%;
    }

}
.producto-card .boton-favorito {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;

    z-index: 50;

    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);
    color: inherit;

    font-size: 21px;
    cursor: pointer;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.16);
}

.producto-card .boton-favorito:hover {
    transform: scale(1.12);
    background: white;
}
/* ======================================
   BARRA DE NAVEGACIÓN INFERIOR (CLIENTE)
====================================== */

body.con-barra-navegacion-cliente {
    padding-bottom: calc(
        70px +
        env(safe-area-inset-bottom, 0px)
    );
}

.barra-navegacion-cliente {
    display: none;
}

.barra-navegacion-cliente.activa {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;

    display: flex;

    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);

    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.item-navegacion {
    position: relative;
    flex: 1 1 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    padding: 9px 4px 8px;

    border: none;
    background: none;

    font-family: inherit;
    color: var(--color-text-secondary);
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    transition: color var(--transition-fast);
}

.item-navegacion .icono {
    position: relative;
    font-size: 20px;
    line-height: 1;
}

.item-navegacion .icono svg {
    display: block;
    width: 22px;
    height: 22px;
}

.item-navegacion .etiqueta {
    font-size: 10.5px;
    font-weight: 600;
}

.item-navegacion.activo {
    color: var(--color-primary);
}

.item-navegacion.activo .etiqueta {
    font-weight: 800;
}

.badge-navegacion {
    position: absolute;
    top: -6px;
    right: -10px;

    min-width: 15px;
    height: 15px;
    padding: 0 3px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    background: var(--color-error);
    color: white;

    font-size: 9px;
    font-weight: 800;
}

@media (min-width: 900px) {

    .barra-navegacion-cliente.activa {
        display: none;
    }

    body.con-barra-navegacion-cliente {
        padding-bottom: 0;
    }

}

/* ---------- Botón flotante "Volver al inicio" ---------- */

.boton-volver-arriba {
    position: fixed;
    right: 16px;
    bottom: calc(
        70px + 16px +
        env(safe-area-inset-bottom, 0px)
    );
    z-index: 8900;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 999px;
    background: var(--color-primary);
    color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        visibility var(--transition-fast);

    -webkit-tap-highlight-color: transparent;
}

.boton-volver-arriba svg {
    width: 22px;
    height: 22px;
}

.boton-volver-arriba.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.boton-volver-arriba:active {
    transform: scale(0.94);
}

@media (min-width: 900px) {

    .boton-volver-arriba {
        right: 24px;
        bottom: 24px;
    }

}

/* ---------- Menú "Cuenta" (hoja inferior) ---------- */

.hoja-cuenta-fondo {
    position: fixed;
    inset: 0;
    z-index: 16000;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    background: rgba(15, 23, 42, 0.5);
}

.hoja-cuenta {
    width: min(480px, 100%);

    padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));

    border-radius: 22px 22px 0 0;

    background: var(--color-white);
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.2);
}

.hoja-cuenta-manija {
    width: 40px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: var(--color-border);
}

.hoja-cuenta-usuario {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}

.hoja-cuenta-usuario .usuario-avatar {
    width: 44px;
    height: 44px;
    font-size: 17px;
}

.hoja-cuenta-usuario strong {
    display: block;
    font-size: 15px;
    color: var(--color-text);
}

.hoja-cuenta-usuario small {
    color: var(--color-text-secondary);
    font-size: 12.5px;
}

.hoja-cuenta button.opcion-cuenta {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 6px;

    border: none;
    border-top: 1px solid var(--color-border);
    background: none;

    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.hoja-cuenta button.opcion-cuenta:first-of-type {
    border-top: none;
}

.hoja-cuenta button.opcion-cuenta .icono {
    font-size: 17px;
}

.hoja-cuenta button.opcion-cuenta.salir {
    color: var(--color-error);
}

/* ======================================
   FAVORITOS
====================================== */

.favoritos-pagina {
    width: 100%;
}

.favoritos-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;

    padding-bottom: 24px;
    margin-bottom: 28px;

    border-bottom:
        1px solid var(--color-border);
}

.favoritos-topbar h3 {
    margin-top: 4px;

    color: var(--color-text);
    font-size: 30px;
}

.favoritos-topbar p {
    margin-top: 8px;

    color: var(--color-text-secondary);
}

.boton-agregar-favoritos {
    width: 100%;
    min-height: 48px;

    margin-top: 24px;

    border: none;
    border-radius: 13px;

    background: var(--color-primary);
    color: white;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;
}

.boton-agregar-favoritos:hover {
    background:
        var(--color-primary-dark);
}

.favoritos-vacios {
    grid-column: 1 / -1;

    padding: 70px 25px;

    border:
        1px dashed var(--color-border);
    border-radius: 20px;

    background: white;
    text-align: center;
}

.favoritos-vacios-icono {
    margin-bottom: 15px;

    color: var(--color-error);
    font-size: 70px;
}

.favoritos-vacios h3 {
    margin-bottom: 10px;

    color: var(--color-text);
}

.favoritos-vacios p {
    margin-bottom: 22px;

    color: var(--color-text-secondary);
}

.favoritos-vacios button {
    padding: 13px 20px;

    border: none;
    border-radius: 12px;

    background: var(--color-primary);
    color: white;

    font-weight: bold;
    cursor: pointer;
}

@media (max-width: 650px) {

    .favoritos-topbar {
        flex-direction: column;
        align-items: stretch;
    }

}
/* ======================================
   HISTORIAL DE PEDIDOS
====================================== */

.historial-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--color-border);
}

.historial-topbar h3 {
    margin-top: 4px;
    font-size: 30px;
}

.historial-topbar p {
    margin-top: 8px;
    color: var(--color-text-secondary);
}

.historial-topbar-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

#filtrosEstadoHistorial {
    margin-bottom: 22px;
}

.historial-paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin-top: 24px;
}

.historial-paginacion span {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.historial-paginacion button {
    padding: 10px 18px;

    border: 1px solid var(--color-border);
    border-radius: 11px;

    background: white;

    color: var(--color-primary);
    font-weight: 700;

    cursor: pointer;
}

.historial-paginacion button:hover:not(:disabled) {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.historial-paginacion button:disabled {
    opacity: 0.45;
    cursor: default;
}

#listaPedidos {
    display: grid;
    gap: 18px;
}

.pedido-historial {
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: white;
    box-shadow: var(--shadow-small);
}

.pedido-historial-cabecera {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.pedido-historial-cabecera h4 {
    margin-top: 8px;
}

.pedido-historial-cabecera > strong {
    color: var(--color-primary-dark);
    font-size: 21px;
}

.estado-pedido {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: bold;
}

/* Variantes para "Pagos recibidos" del gerente (js/gerente.js) —
   mismo pill de .estado-pedido, solo cambia el color según el estado
   real del payout. */
.estado-pago-enviado {
    background: rgba(34, 197, 94, 0.14);
    color: var(--color-success);
}

.estado-pago-pendiente {
    background: rgba(245, 158, 11, 0.16);
    color: var(--color-warning);
}

.estado-pago-fallido {
    background: rgba(214, 48, 49, 0.12);
    color: var(--color-error);
}

.pedido-historial-datos {
    display: grid;
    gap: 8px;
    color: var(--color-text-secondary);
}

.pedido-codigo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    padding: 15px;
    border-radius: 13px;
    background: var(--color-primary-light);
}

.boton-cancelar-pedido {
    margin-top: 14px;
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    background: #fceaea;
    color: var(--color-error);
    font-weight: bold;
    cursor: pointer;
}

.pedido-codigo strong {
    color: var(--color-primary-dark);
    font-size: 20px;
    letter-spacing: 2px;
}

.historial-vacio {
    padding: 70px 25px;
    border: 1px dashed var(--color-border);
    border-radius: 20px;
    text-align: center;
}

.historial-vacio-icono {
    margin-bottom: 15px;
    font-size: 65px;
}

.historial-vacio p {
    margin: 12px 0 22px;
    color: var(--color-text-secondary);
}

.historial-vacio button,
.boton-ver-pedidos {
    padding: 13px 20px;
    border: none;
    border-radius: 12px;
    background: var(--color-primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.boton-ver-pedidos {
    margin-left: 10px;
}

@media (max-width: 650px) {

    .historial-topbar,
    .pedido-historial-cabecera,
    .pedido-codigo {
        align-items: stretch;
        flex-direction: column;
    }

    .boton-ver-pedidos {
        display: block;
        width: 100%;
        margin: 10px 0 0;
    }

}
/* ======================================
   PANEL DEL EMPLEADO
====================================== */

.empleado-pagina {
    width: 100%;
}

.empleado-topbar {
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom:
        1px solid var(--color-border);
}

.empleado-topbar h3 {
    margin-top: 4px;
    font-size: 30px;
}

.empleado-topbar p {
    margin-top: 8px;
    color: var(--color-text-secondary);
}

.empleado-resumen {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.empleado-metrica {
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: white;
    box-shadow: var(--shadow-small);
}

.empleado-metrica span {
    color: var(--color-text-secondary);
}

.empleado-metrica strong {
    display: block;
    margin-top: 8px;
    color: var(--color-primary-dark);
    font-size: 32px;
}

#listaPedidosEmpleado {
    display: grid;
    gap: 18px;
}

.pedido-empleado {
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: white;
    box-shadow: var(--shadow-small);
}

.pedido-empleado-cabecera {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom:
        1px solid var(--color-border);
}

.pedido-empleado-cabecera h4 {
    margin: 8px 0;
}

.pedido-empleado-cabecera p {
    color: var(--color-text-secondary);
}

.pedido-empleado-codigo {
    text-align: right;
}

.pedido-empleado-codigo span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.pedido-empleado-codigo strong {
    color: var(--color-primary-dark);
    font-size: 20px;
    letter-spacing: 2px;
}

.pedido-empleado-productos {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.producto-preparacion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--color-primary-light);
}

.producto-preparacion input {
    width: 18px;
    height: 18px;
}

.pedido-empleado-acciones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Pedido EN_APP todavía sin pagar: se muestra en vez de los botones */
.pedido-empleado-aviso-pago {
    margin: 0;
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid var(--color-warning);
    background: #fffbeb;
    color: #92400e;
    font-weight: 600;
}

.pedido-empleado-acciones button {
    padding: 11px 15px;
    border: none;
    border-radius: 11px;
    background: var(--color-primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.pedido-empleado-acciones button:hover {
    background:
        var(--color-primary-dark);
}

@media (max-width: 650px) {

    .empleado-resumen {
        grid-template-columns: 1fr;
    }

    .pedido-empleado-cabecera {
        flex-direction: column;
    }

    .pedido-empleado-codigo {
        text-align: left;
    }

    .pedido-empleado-acciones {
        flex-direction: column;
    }

    .pedido-empleado-acciones button {
        width: 100%;
    }

}
/* ======================================
   PANEL DEL GERENTE
====================================== */

.gerente-pagina {
    width: 100%;
}

.gerente-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;

    padding-bottom: 24px;
    margin-bottom: 28px;

    border-bottom:
        1px solid var(--color-border);
}

.gerente-topbar h3 {
    margin-top: 4px;
    font-size: 30px;
}

.gerente-topbar p {
    margin-top: 8px;
    color: var(--color-text-secondary);
}

.boton-gerente-alertas {
    position: relative;

    padding: 12px 18px;

    border: 1px solid var(--color-border);
    border-radius: 12px;

    background: white;
    color: var(--color-text);

    font-weight: bold;
    cursor: pointer;
}

#contadorAlertasGerente {
    min-width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 7px;
    padding: 0 5px;

    border-radius: 999px;

    background: var(--color-error);
    color: white;

    font-size: 11px;
}

.gerente-bienvenida {
    padding: 30px;
    margin-bottom: 26px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--color-primary-dark),
            var(--color-primary)
        );

    color: white;
    box-shadow: var(--shadow-medium);
}

.gerente-bienvenida span {
    display: inline-block;

    margin-bottom: 10px;

    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gerente-bienvenida h2 {
    margin-bottom: 8px;
    font-size: 30px;
}

.gerente-bienvenida p {
    color: rgba(255, 255, 255, 0.85);
}

.gerente-metricas {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;
    margin-bottom: 32px;
}

.gerente-metrica {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 20px;

    border: 1px solid var(--color-border);
    border-radius: 17px;

    background: white;
    box-shadow: var(--shadow-small);
}

.gerente-metrica-icono {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: var(--color-primary-light);

    font-size: 22px;
}

.gerente-metrica small {
    color: var(--color-text-secondary);
}

.gerente-metrica strong {
    display: block;

    margin-top: 4px;

    color: var(--color-primary-dark);
    font-size: 28px;
}

.gerente-seccion {
    margin-bottom: 34px;
}

#pedidosRecientesGerente {
    display: grid;
    gap: 13px;
}

.gerente-pedido-reciente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    padding: 17px;

    border: 1px solid var(--color-border);
    border-radius: 15px;

    background: white;
    box-shadow: var(--shadow-small);
}

.gerente-pedido-reciente h4 {
    margin: 8px 0 5px;
}

.gerente-pedido-reciente p {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.gerente-pedido-datos {
    text-align: right;
}

.gerente-pedido-datos span {
    display: block;

    margin-bottom: 5px;

    color: var(--color-text-secondary);
    font-size: 12px;
}

.gerente-pedido-datos strong {
    color: var(--color-primary-dark);
    font-size: 18px;
}

.gerente-accesos {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.gerente-accesos button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;

    min-height: 150px;
    padding: 20px;

    border: 1px solid var(--color-border);
    border-radius: 17px;

    background: white;
    color: var(--color-text);

    text-align: left;
    cursor: pointer;

    box-shadow: var(--shadow-small);
}

.gerente-accesos button:hover {
    border-color: var(--color-primary);

    transform: translateY(-5px);

    box-shadow: var(--shadow-medium);
}

.gerente-accesos button > span {
    font-size: 30px;
}

.gerente-accesos strong {
    color: var(--color-primary-dark);
    font-size: 17px;
}

.gerente-accesos small {
    color: var(--color-text-secondary);
    line-height: 1.45;
}

@media (max-width: 900px) {

    .gerente-topbar {
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        padding-bottom: 16px;
        margin-bottom: 20px;
    }

    .gerente-topbar .seccion-etiqueta {
        display: none;
    }

    .gerente-topbar h3 {
        margin-top: 0;
        font-size: 22px;
    }

    .gerente-topbar p {
        display: none;
    }

    .gerente-metricas {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .gerente-accesos {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .gerente-topbar {
        align-items: flex-start;
    }

    .gerente-metricas,
    .gerente-accesos {
        grid-template-columns: 1fr;
    }

    .gerente-pedido-reciente {
        flex-direction: column;
        align-items: flex-start;
    }

    .gerente-pedido-datos {
        text-align: left;
    }

}
/* ======================================
   HORARIOS DEL GERENTE
====================================== */

.horarios-pagina {
    width: 100%;
}

.horarios-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--color-border);
}

.horarios-topbar h3 {
    margin-top: 4px;
    font-size: 30px;
}

.horarios-topbar p {
    margin-top: 8px;
    color: var(--color-text-secondary);
}

.horario-formulario {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr))
        auto;
    gap: 15px;
    align-items: end;
    padding: 22px;
    margin-bottom: 32px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: white;
    box-shadow: var(--shadow-small);
}

.horario-formulario div {
    display: grid;
    gap: 7px;
}

.horario-formulario label {
    color: var(--color-text);
    font-weight: bold;
}

.horario-formulario input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
}

.boton-guardar-horario {
    min-height: 44px;
    padding: 10px 18px;
    border: none;
    border-radius: 11px;
    background: var(--color-primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.boton-guardar-horario:hover {
    background: var(--color-primary-dark);
}

#listaHorarios {
    display: grid;
    gap: 14px;
}

.horario-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 17px;
    background: white;
    box-shadow: var(--shadow-small);
}

.horario-card h4 {
    margin: 8px 0;
    color: var(--color-text);
    font-size: 20px;
}

.horario-card p {
    color: var(--color-text-secondary);
}

.estado-horario {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
}

.estado-horario.activo {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.estado-horario.inactivo {
    background: #ececec;
    color: #666;
}

.horario-acciones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.horario-acciones button {
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: bold;
    cursor: pointer;
}

.horario-acciones button:hover {
    transform: translateY(-2px);
}

.horario-acciones .boton-eliminar-horario {
    background: #fceaea;
    color: var(--color-error);
}

@media (max-width: 850px) {

    .horario-formulario {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .horarios-topbar,
    .horario-card {
        align-items: stretch;
        flex-direction: column;
    }

    .horario-formulario {
        grid-template-columns: 1fr;
    }

    .horario-acciones {
        flex-direction: column;
    }

    .horario-acciones button {
        width: 100%;
    }

}

/* Tarjeta de un día en edición (horario de apertura) —
   reutiliza .horario-card/.horario-formulario pero en
   columna, ya que ahí solo hay 2 campos, no 3 + botón. */
.horario-apertura-form {
    flex-direction: column;
    align-items: stretch;
}

.horario-apertura-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

/* ======================================
   GESTIÓN DE PRODUCTOS
====================================== */

.gestion-productos-pagina {
    width: 100%;
}

.gestion-productos-topbar,
.formulario-producto-cabecera,
.productos-gerente-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.gestion-productos-topbar {
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--color-border);
}

.gestion-productos-topbar h3 {
    margin-top: 4px;
    font-size: 30px;
}

.gestion-productos-topbar p {
    margin-top: 8px;
    color: var(--color-text-secondary);
}

.producto-formulario-gerente {
    padding: 24px;
    margin-bottom: 34px;
    border: 1px solid var(--color-border);
    border-radius: 19px;
    background: white;
    box-shadow: var(--shadow-small);
}

.formulario-producto-cabecera {
    margin-bottom: 22px;
}

.producto-formulario-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.producto-formulario-grid > div {
    display: grid;
    gap: 7px;
}

.producto-formulario-grid label {
    font-weight: bold;
}

.producto-formulario-grid input,
.producto-formulario-grid select,
.productos-gerente-encabezado input {
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: white;
}

.admin-ayuda-coordenadas {
    margin-top: -6px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.aviso-edicion-producto {
    margin: 14px 0 20px;
    padding: 12px 15px;
    border-radius: 11px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 13px;
}

.boton-guardar-producto {
    min-height: 46px;
    padding: 11px 22px;
    border: none;
    border-radius: 12px;
    background: var(--color-primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.boton-cancelar-edicion {
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    background: #f2f2f2;
    color: var(--color-text);
    cursor: pointer;
}

.productos-gerente-encabezado {
    margin-bottom: 18px;
}

.productos-gerente-encabezado input {
    max-width: 320px;
}

.admin-pagina {
    width: 100%;
}

.admin-supermercado-tarjeta {
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
    border-radius: 17px;
    background: white;
    box-shadow: var(--shadow-small);
}

.admin-supermercado-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.admin-supermercado-cabecera strong {
    display: block;
    font-size: 17px;
}

.admin-supermercado-cabecera small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-secondary);
}

.admin-sin-sucursales {
    margin-top: 14px;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.admin-lista-sucursales {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.admin-lista-sucursales li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.admin-lista-sucursales strong {
    display: block;
}

.admin-lista-sucursales small {
    display: block;
    margin-top: 3px;
    color: var(--color-text-secondary);
}

.tabla-productos-contenedor {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 17px;
    background: white;
    box-shadow: var(--shadow-small);
}

.tabla-productos {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.tabla-productos th,
.tabla-productos td {
    padding: 15px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.tabla-productos th {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 13px;
}

.producto-tabla-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.producto-tabla-info img {
    width: 58px;
    height: 50px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--color-primary-light);
}

.producto-tabla-info small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-secondary);
}

.producto-estado-gerente {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
}

.producto-estado-gerente.disponible {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.producto-estado-gerente.no-disponible {
    background: #eeeeee;
    color: #666666;
}

.producto-tabla-acciones {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.producto-tabla-acciones button {
    padding: 8px 10px;
    border: none;
    border-radius: 9px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: bold;
    cursor: pointer;
}

.boton-eliminar-producto {
    padding: 8px 10px;
    border: none;
    border-radius: 9px;
    background: #fceaea;
    color: var(--color-error);
    font-weight: bold;
    cursor: pointer;
}

@media (max-width: 850px) {

    .producto-formulario-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .gestion-productos-topbar,
    .formulario-producto-cabecera,
    .productos-gerente-encabezado {
        flex-direction: column;
        align-items: stretch;
    }

    .gestion-productos-topbar {
        padding-bottom: 16px;
        margin-bottom: 20px;
        gap: 12px;
    }

    .gestion-productos-topbar .seccion-etiqueta {
        display: none;
    }

    .gestion-productos-topbar h3 {
        margin-top: 0;
        font-size: 22px;
    }

    .gestion-productos-topbar p {
        display: none;
    }

    .producto-formulario-grid {
        grid-template-columns: 1fr;
    }

    .productos-gerente-encabezado input {
        max-width: none;
    }

    .tabla-productos {
        min-width: 0;
    }

    .tabla-productos thead {
        display: none;
    }

    .tabla-productos tr {
        display: block;
        padding: 14px 15px;
        border-bottom: 1px solid var(--color-border);
    }

    .tabla-productos tr:last-child {
        border-bottom: none;
    }

    .tabla-productos td {
        display: block;
        padding: 6px 0;
        border-bottom: none;
    }

    .tabla-productos td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
        color: var(--color-text-secondary);
    }

}
/* ======================================
   GESTIÓN DE EMPLEADOS
====================================== */

.gestion-empleados-pagina {
    width: 100%;
}

.gestion-empleados-topbar,
.formulario-empleado-cabecera,
.empleados-gerente-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.gestion-empleados-topbar {
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom:
        1px solid var(--color-border);
}

.gestion-empleados-topbar h3 {
    margin-top: 4px;
    font-size: 30px;
}

.gestion-empleados-topbar p {
    margin-top: 8px;
    color: var(--color-text-secondary);
}

.empleado-formulario-gerente {
    padding: 24px;
    margin-bottom: 34px;
    border: 1px solid var(--color-border);
    border-radius: 19px;
    background: white;
    box-shadow: var(--shadow-small);
}

.formulario-empleado-cabecera {
    margin-bottom: 22px;
}

.empleado-formulario-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.empleado-formulario-grid > div {
    display: grid;
    gap: 7px;
}

.empleado-formulario-grid label {
    font-weight: bold;
}

.empleado-formulario-grid input,
.empleados-gerente-encabezado input {
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: white;
}

.codigo-invitacion-fila {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.codigo-invitacion-fila input {
    flex: 1;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: white;
    font-weight: bold;
    letter-spacing: 1px;
}

.codigo-invitacion-fila button {
    white-space: nowrap;
}

.boton-copiar-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--color-surface);
    color: var(--color-primary);
    font-weight: bold;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.boton-copiar-link:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.boton-copiar-link.enlace-copiado {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.boton-regenerar-codigo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.boton-regenerar-codigo:hover {
    color: var(--color-primary);
}

.boton-copiar-link:disabled,
.boton-regenerar-codigo:disabled {
    opacity: 0.65;
    cursor: default;
}

.empleado-activo-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

.empleado-activo-check input {
    width: 18px;
    height: 18px;
}

.boton-guardar-empleado {
    min-height: 46px;
    padding: 11px 22px;
    border: none;
    border-radius: 12px;
    background: var(--color-primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.empleados-gerente-encabezado {
    margin-bottom: 18px;
}

.empleados-gerente-encabezado input {
    max-width: 320px;
}

.tabla-empleados-contenedor {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 17px;
    background: white;
    box-shadow: var(--shadow-small);
}

.tabla-empleados {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

.tabla-empleados th,
.tabla-empleados td {
    padding: 15px;
    border-bottom:
        1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.tabla-empleados th {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 13px;
}

.empleado-tabla-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.empleado-avatar {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--color-primary);
    color: white;
    font-weight: bold;
}

.empleado-tabla-info small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-secondary);
}

.empleado-estado {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
}

.empleado-estado.activo {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.empleado-estado.inactivo {
    background: #eeeeee;
    color: #666666;
}

.empleado-tabla-acciones {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.empleado-tabla-acciones button {
    padding: 8px 10px;
    border: none;
    border-radius: 9px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: bold;
    cursor: pointer;
}

.empleado-tabla-acciones
.boton-eliminar-empleado {
    background: #fceaea;
    color: var(--color-error);
}

@media (max-width: 850px) {

    .empleado-formulario-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    .empleado-formulario-grid {
        grid-template-columns: 1fr;
    }

    .gestion-empleados-topbar,
    .formulario-empleado-cabecera,
    .empleados-gerente-encabezado {
        flex-direction: column;
        align-items: stretch;
    }

    .empleados-gerente-encabezado input {
        max-width: none;
    }

    .tabla-empleados {
        min-width: 0;
    }

    .tabla-empleados thead {
        display: none;
    }

    .tabla-empleados tr {
        display: block;
        padding: 14px 15px;
        border-bottom: 1px solid var(--color-border);
    }

    .tabla-empleados tr:last-child {
        border-bottom: none;
    }

    .tabla-empleados td {
        display: block;
        padding: 6px 0;
        border-bottom: none;
    }

    .tabla-empleados td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
        color: var(--color-text-secondary);
    }

}

/* Historial de "Rendimiento mensual" por supermercado, panel de Admin
   (js/admin.js) — misma tabla con colapso a tarjetas en móvil que
   .tabla-empleados, solo con sus propias clases para no acoplarlas. */
.admin-historial-comisiones {
    margin-top: 14px;
    overflow-x: auto;
}

.tabla-comisiones-mensuales {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}

.tabla-comisiones-mensuales th,
.tabla-comisiones-mensuales td {
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.tabla-comisiones-mensuales th {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 12px;
}

@media (max-width: 650px) {

    .tabla-comisiones-mensuales {
        min-width: 0;
    }

    .tabla-comisiones-mensuales thead {
        display: none;
    }

    .tabla-comisiones-mensuales tr {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid var(--color-border);
    }

    .tabla-comisiones-mensuales tr:last-child {
        border-bottom: none;
    }

    .tabla-comisiones-mensuales td {
        display: block;
        padding: 4px 0;
        border-bottom: none;
    }

    .tabla-comisiones-mensuales td[data-label=""]::before {
        content: none;
    }

    .tabla-comisiones-mensuales td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
        color: var(--color-text-secondary);
    }

}

@media (max-width: 600px) {

    .gestion-empleados-topbar,
    .formulario-empleado-cabecera,
    .empleados-gerente-encabezado {
        flex-direction: column;
        align-items: stretch;
    }

    .empleado-formulario-grid {
        grid-template-columns: 1fr;
    }

    .empleados-gerente-encabezado input {
        max-width: none;
    }

}
/* ======================================
   NOTIFICACIONES GLOBALES
====================================== */

#contenedorNotificaciones {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;

    width: min(360px, calc(100% - 40px));

    display: grid;
    gap: 12px;
}

.notificacion {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 12px;

    padding: 15px 16px;

    border-radius: 14px;
    border: 1px solid var(--color-border);

    background: white;

    box-shadow: var(--shadow-medium);

    animation:
        notificacionEntrada
        0.35s
        ease;
}

.notificacion-icono {
    font-size: 20px;
}

.notificacion p {
    color: var(--color-text);
    line-height: 1.4;
}

.notificacion button {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 8px;

    background: transparent;

    color: var(--color-text-secondary);

    font-size: 22px;
    cursor: pointer;
}

.notificacion button:hover {
    background: #f2f2f2;
}

.notificacion-exito {
    border-left:
        5px solid var(--color-success);
}

.notificacion-error {
    border-left:
        5px solid var(--color-error);
}

.notificacion-aviso {
    border-left:
        5px solid var(--color-warning);
}

.notificacion-info {
    border-left:
        5px solid var(--color-primary);
}

.notificacion-clicable {
    cursor: pointer;
}

.notificacion-clicable:hover {
    box-shadow: var(--shadow-strong, var(--shadow-medium));
}

.notificacion-saliendo {
    animation:
        notificacionSalida
        0.3s
        ease
        forwards;
}

@media (max-width: 600px) {

    #contenedorNotificaciones {
        top: 12px;
        right: 12px;
        left: 12px;

        width: auto;
    }

}
/* ======================================
   MODAL DE CONFIRMACIÓN
====================================== */

.modal-fondo {
    position: fixed;
    inset: 0;
    z-index: 16000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(15, 30, 23, 0.55);

    backdrop-filter: blur(5px);
}

.modal-confirmacion {
    width: min(440px, 100%);

    padding: 30px;

    border:
        1px solid var(--color-border);
    border-radius: 22px;

    background: white;

    text-align: center;

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.25);
}

.modal-icono {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        0 auto
        18px;

    border-radius: 18px;

    background: #fff4db;

    font-size: 30px;
}

.modal-confirmacion h3 {
    margin-bottom: 12px;

    color: var(--color-text);

    font-size: 24px;
}

.modal-confirmacion p {
    color:
        var(--color-text-secondary);

    line-height: 1.6;
}

.modal-acciones {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;

    margin-top: 26px;
}

.modal-acciones button {
    min-height: 46px;

    border: none;
    border-radius: 12px;

    font-weight: bold;
    cursor: pointer;
}

.modal-boton-cancelar {
    background: #eeeeee;
    color: var(--color-text);
}

.modal-boton-confirmar {
    background: var(--color-error);
    color: white;
}

.modal-boton-confirmar:hover {
    background: #b71c1c;
}

@media (max-width: 450px) {

    .modal-acciones {
        grid-template-columns: 1fr;
    }

}/* ======================================
   SUPERCLICK
   DETALLE DE PRODUCTO + IA
====================================== */

/* Elementos clicables del catálogo */
.producto-foto,
.producto-nombre-clic {
    cursor: pointer;
}

.producto-nombre-clic:hover {
    color: var(--color-primary);
}

/* Fondo del modal */
.detalle-producto-fondo {
    position: fixed;
    inset: 0;
    z-index: 12000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 22px;

    overflow-y: auto;

    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(7px);
}

/* Tarjeta principal */
.detalle-producto {
    position: relative;

    width: min(980px, 100%);
    max-height: calc(100vh - 44px);

    display: grid;
    grid-template-columns:
        minmax(300px, 0.9fr)
        minmax(360px, 1.1fr);

    overflow: auto;

    border: 1px solid var(--color-border);
    border-radius: 24px;

    background: var(--color-white, #ffffff);

    box-shadow:
        0 28px 80px rgba(15, 23, 42, 0.30);
}

/* Botón cerrar */
.detalle-producto-cerrar {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.95);
    color: var(--color-text);

    font-size: 27px;
    line-height: 1;

    cursor: pointer;

    box-shadow: var(--shadow-small);
}

/* Imagen principal */
.detalle-producto-imagen {
    position: sticky;
    top: 0;

    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px;

    overflow: hidden;

    background: var(--color-primary-light);

    cursor: zoom-in;
}

.detalle-producto-imagen img {
    width: 100%;
    height: 100%;
    max-height: 440px;

    display: block;

    object-fit: contain;

    padding: 14px;

    border-radius: 18px;

    background: #ffffff;

    transition: transform 0.35s ease;
}

.detalle-producto-imagen:hover img {
    transform: scale(1.08);
}

/* Contenido */
.detalle-producto-contenido {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 44px 38px 34px;
}

.detalle-producto-contenido h2 {
    margin: 14px 0 10px;

    color: var(--color-text);

    font-size: clamp(27px, 4vw, 38px);
    font-weight: 850;
    letter-spacing: -1px;
    line-height: 1.15;
}

.detalle-producto-valoracion {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 20px;
}

.detalle-producto-valoracion span {
    color: #f59e0b;
    letter-spacing: 2px;
}

.detalle-producto-valoracion small {
    color: var(--color-text-secondary);
    font-weight: 700;
}

.detalle-producto-descripcion {
    margin: 0 0 24px;

    color: var(--color-text-secondary);

    font-size: 14px;
    line-height: 1.7;
}

/* Precio y estado */
.detalle-producto-datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;

    margin-bottom: 20px;
}

.detalle-producto-datos > div {
    min-height: 90px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;

    padding: 16px;

    border: 1px solid var(--color-border);
    border-radius: 14px;

    background: #f8fafc;
}

.detalle-producto-datos small {
    color: var(--color-text-secondary);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.detalle-producto-datos strong {
    color: var(--color-primary-dark);

    font-size: 17px;
}

.detalle-disponible {
    color: #15803d !important;
}

.detalle-agotado {
    color: #b91c1c !important;
}

/* Selector de cantidad */
.detalle-producto-cantidad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 22px;
    padding: 14px 15px;

    border: 1px solid var(--color-border);
    border-radius: 14px;

    background: var(--color-primary-light);
}

.detalle-producto-cantidad > div:first-child {
    display: grid;
    gap: 3px;
}

.detalle-producto-cantidad small {
    color: var(--color-text-secondary);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.detalle-producto-cantidad strong {
    color: var(--color-text);

    font-size: 12px;
}

.detalle-cantidad-controles {
    display: flex;
    align-items: center;
    gap: 5px;

    padding: 4px;

    border: 1px solid var(--color-border);
    border-radius: 12px;

    background: var(--color-white, #ffffff);
}

.detalle-cantidad-controles button {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    border-radius: 9px;

    background: var(--color-primary-light);
    color: var(--color-primary-dark);

    font-size: 18px;
    font-weight: 800;

    cursor: pointer;
}

.detalle-cantidad-controles button:hover {
    background: var(--color-primary);
    color: white;
}

.detalle-cantidad-controles span {
    min-width: 32px;

    text-align: center;

    color: var(--color-text);

    font-size: 15px;
    font-weight: 800;
}

/* Acciones principales */
.detalle-producto-acciones {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 12px;
}

.detalle-producto-acciones button {
    min-height: 50px;

    padding: 12px 15px;

    border-radius: 13px;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.detalle-boton-favorito {
    border: 1px solid var(--color-border);

    background: var(--color-white, #ffffff);
    color: var(--color-primary-dark);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.detalle-boton-favorito:hover,
.detalle-boton-favorito.detalle-favorito-activo {
    border-color: #fb7185;

    background: #fff1f2;
    color: #be123c;
}

.detalle-boton-cesta {
    border: none;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            #14b8a6
        );

    color: white;

    box-shadow: var(--shadow-small);
}

.detalle-boton-cesta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ======================================
   SUPERCLICK IA
====================================== */

.superclick-ia-producto {
    margin-top: 26px;
    padding: 20px;

    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(204, 251, 241, 0.72),
            rgba(240, 253, 250, 0.96)
        );

    box-shadow:
        0 10px 30px rgba(15, 118, 110, 0.08);
}

.superclick-ia-cabecera {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 13px;
}

.superclick-ia-icono {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--color-primary-dark),
            #14b8a6
        );

    font-size: 21px;

    box-shadow: var(--shadow-small);
}

.superclick-ia-cabecera > div:nth-child(2) {
    min-width: 0;
}

.superclick-ia-cabecera > div:nth-child(2) > span {
    color: var(--color-primary);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.superclick-ia-cabecera h3 {
    margin: 3px 0 0;

    color: var(--color-primary-dark);

    font-size: 17px;
    font-weight: 850;
}

.superclick-ia-estado {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-left: auto;
    padding: 6px 9px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.78);
    color: var(--color-primary-dark);

    font-size: 9px;
    font-weight: 800;
}

.superclick-ia-estado > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.14);
}

.superclick-ia-mensaje {
    margin: 0 0 16px;

    color: var(--color-text-secondary);

    font-size: 12px;
    line-height: 1.65;
}

.superclick-ia-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;

    margin-bottom: 14px;
}

.superclick-ia-recomendacion {
    position: relative;
    min-width: 0;

    padding: 9px;

    border: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.88);
}

.superclick-ia-recomendacion img {
    width: 100%;
    height: 76px;

    display: block;

    object-fit: contain;

    padding: 5px;

    border-radius: 10px;

    background: #ffffff;
}

.superclick-ia-recomendacion > div {
    min-width: 0;
    padding-top: 7px;
}

.superclick-ia-recomendacion span {
    display: block;

    overflow: hidden;

    color: var(--color-primary);

    font-size: 8px;
    font-weight: 800;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.superclick-ia-recomendacion h4 {
    min-height: 30px;
    margin: 4px 0;

    overflow: hidden;

    color: var(--color-text);

    font-size: 10px;
    font-weight: 750;
    line-height: 1.35;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.superclick-ia-recomendacion strong {
    color: var(--color-primary-dark);

    font-size: 11px;
}

.superclick-ia-recomendacion > button {
    position: absolute;
    top: 7px;
    right: 7px;

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    border-radius: 9px;

    background: var(--color-primary);
    color: white;

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;

    box-shadow: var(--shadow-small);
}

.superclick-ia-anadir-todos {
    width: 100%;
    min-height: 43px;

    padding: 10px 14px;

    border: none;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--color-primary-dark),
            #14b8a6
        );

    color: white;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    box-shadow: var(--shadow-small);
}

.superclick-ia-anadir-todos:disabled,
.superclick-ia-recomendacion > button:disabled {
    opacity: 0.68;
    cursor: default;
}

/* ======================================
   RESEÑAS DEL PRODUCTO
====================================== */

.detalle-producto-resenas {
    margin-top: 28px;
    padding-top: 22px;

    border-top: 1px solid var(--color-border);
}

.detalle-resenas-encabezado {
    margin-bottom: 14px;
}

.detalle-resenas-encabezado h3 {
    margin-top: 4px;
    font-size: 18px;
}

.detalle-resena-formulario {
    margin-bottom: 20px;
    padding: 16px;

    border: 1px solid var(--color-border);
    border-radius: 14px;

    background: #fafcfb;
}

.detalle-resena-formulario p {
    margin: 0 0 10px;

    color: var(--color-text-secondary);

    font-size: 13px;
    line-height: 1.5;
}

.detalle-resena-estrellas {
    display: flex;
    gap: 4px;

    margin-bottom: 10px;
}

.detalle-resena-estrella-boton {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--color-border);
    border-radius: 8px;

    background: #ffffff;

    color: #7c8880;

    font-size: 18px;

    cursor: pointer;

    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}

.detalle-resena-estrella-activa {
    border-color: #f59e0b;
    color: #f59e0b;
}

.detalle-resena-formulario textarea {
    width: 100%;
    min-height: 70px;

    margin-bottom: 10px;
    padding: 10px 12px;

    border: 1px solid var(--color-border);
    border-radius: 11px;

    font-family: inherit;
    font-size: 13px;

    resize: vertical;

    box-sizing: border-box;
}

.detalle-resena-formulario > button {
    padding: 10px 18px;

    border: 0;
    border-radius: 11px;

    background: var(--color-primary, #176b43);

    color: #ffffff;

    font-weight: 800;
    font-size: 13px;

    cursor: pointer;
}

.detalle-lista-resenas {
    display: grid;
    gap: 12px;
}

.detalle-resenas-cargando {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.detalle-resena-tarjeta {
    padding: 14px;

    border: 1px solid var(--color-border);
    border-radius: 14px;

    background: #ffffff;
}

.detalle-resena-tarjeta header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 10px;

    margin-bottom: 6px;
}

.detalle-resena-tarjeta header > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detalle-resena-tarjeta strong {
    font-size: 13px;
}

.detalle-resena-estrellas-texto {
    color: #f59e0b;
    font-size: 13px;
    letter-spacing: 1px;
}

.detalle-resena-tarjeta header small {
    flex: 0 0 auto;
    color: var(--color-text-secondary);
    font-size: 11px;
}

.detalle-resena-tarjeta p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.detalle-resena-eliminar {
    margin-top: 10px;
    padding: 6px 12px;

    border: 0;
    border-radius: 9px;

    background: #fceaea;

    color: var(--color-error);

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}


/* ======================================
   PRODUCTOS RELACIONADOS
====================================== */

.detalle-relacionados {
    margin-top: 28px;
    padding-top: 22px;

    border-top: 1px solid var(--color-border);
}

.detalle-relacionados-encabezado {
    margin-bottom: 14px;
}

.detalle-relacionados-encabezado small {
    color: var(--color-primary);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.detalle-relacionados-encabezado h3 {
    margin: 4px 0 0;

    color: var(--color-text);

    font-size: 17px;
    font-weight: 800;
}

.detalle-relacionados-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.detalle-relacionado-card {
    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: 14px;

    background: var(--color-white, #ffffff);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.detalle-relacionado-card:hover {
    transform: translateY(-3px);

    border-color: var(--color-primary);

    box-shadow: var(--shadow-small);
}

.detalle-relacionado-card img {
    width: 100%;
    height: 90px;

    display: block;

    object-fit: contain;

    padding: 8px;

    background: #ffffff;
}

.detalle-relacionado-card > div {
    padding: 10px;
}

.detalle-relacionado-card span {
    display: block;

    overflow: hidden;

    color: var(--color-primary);

    font-size: 8px;
    font-weight: 800;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.detalle-relacionado-card h4 {
    min-height: 34px;
    margin: 5px 0;

    overflow: hidden;

    color: var(--color-text);

    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.detalle-relacionado-card strong {
    color: var(--color-primary-dark);

    font-size: 12px;
}

.detalle-relacionados-vacio {
    grid-column: 1 / -1;

    padding: 18px;

    border: 1px dashed var(--color-border);
    border-radius: 13px;

    color: var(--color-text-secondary);

    font-size: 12px;
    text-align: center;
}

/* ======================================
   RESPONSIVE
====================================== */

@media (max-width: 720px) {

    .detalle-producto-fondo {
        align-items: flex-start;
        padding: 12px;
    }

    .detalle-producto {
        max-height: none;
        grid-template-columns: 1fr;
    }

    .detalle-producto-imagen {
        position: relative;
        min-height: 280px;
    }

    .detalle-producto-contenido {
        padding: 28px 22px;
    }

    .superclick-ia-grid,
    .detalle-relacionados-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 430px) {

    .detalle-producto-datos,
    .detalle-producto-acciones,
    .superclick-ia-grid,
    .detalle-relacionados-grid {
        grid-template-columns: 1fr;
    }

    .detalle-producto-cantidad {
        align-items: stretch;
        flex-direction: column;
    }

    .detalle-cantidad-controles {
        justify-content: space-between;
    }

    .detalle-relacionado-card {
        display: grid;
        grid-template-columns:
            90px
            minmax(0, 1fr);
    }

    .detalle-relacionado-card img {
        height: 100%;
        min-height: 95px;
    }

}
/* ======================================
   SELECTOR DE SUPERMERCADO
====================================== */

.selector-establecimiento-fondo {
    position: fixed;
    inset: 0;
    z-index: 15000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 22px;

    background:
        rgba(15, 23, 42, 0.62);

    backdrop-filter:
        blur(8px);
}


.selector-establecimiento-modal {
    width:
        min(850px, 100%);

    max-height:
        calc(100vh - 44px);

    overflow-y: auto;

    padding: 30px;

    border:
        1px solid
        var(--color-border);

    border-radius: 24px;

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-large);
}


.selector-modal-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 24px;

    padding-bottom: 22px;
    margin-bottom: 24px;

    border-bottom:
        1px solid
        var(--color-border);
}


.selector-modal-cabecera h2 {
    margin:
        5px
        0
        7px;

    font-size:
        clamp(24px, 4vw, 32px);

    font-weight: 800;

    letter-spacing: -0.8px;
}


.selector-modal-cabecera p {
    margin: 0;

    color:
        var(--color-text-secondary);

    font-size: 13px;

    line-height: 1.6;
}


.selector-modal-cerrar {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    padding: 0;

    border:
        1px solid
        var(--color-border);

    border-radius: 13px;

    background:
        var(--color-surface);

    color:
        var(--color-text);

    font-size: 26px;

    cursor: pointer;
}


.selector-modal-cerrar:hover {
    border-color:
        var(--color-primary);

    background:
        var(--color-primary-light);

    color:
        var(--color-primary);
}


.selector-supermercados-lista {
    display: grid;

    gap: 26px;
}


.selector-supermercado-grupo {
    display: grid;

    gap: 14px;
}


.selector-supermercado-titulo {
    display: flex;
    align-items: center;

    gap: 12px;
}


.selector-supermercado-titulo > span {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 14px;

    background:
        var(--color-primary-light);

    font-size: 22px;
}


.selector-supermercado-titulo h3 {
    margin: 0;

    color:
        var(--color-text);

    font-size: 17px;

    font-weight: 800;
}


.selector-supermercado-titulo p {
    margin:
        3px
        0
        0;

    color:
        var(--color-text-secondary);

    font-size: 11px;
}


.selector-establecimientos-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.selector-sin-establecimientos {
    grid-column: 1 / -1;
    padding: 14px;
    color: var(--color-text-secondary);
    font-size: 13px;
}


.selector-establecimiento-opcion {
    min-width: 0;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 12px;

    padding: 15px;

    border:
        1px solid
        var(--color-border);

    border-radius: 16px;

    background:
        var(--color-surface);

    color:
        var(--color-text);

    text-align: left;

    cursor: pointer;

    box-shadow:
        var(--shadow-small);
}


.selector-establecimiento-opcion:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--color-primary);

    background:
        var(--color-primary-light);

    box-shadow:
        var(--shadow-medium);
}


.selector-establecimiento-opcion.seleccionado {
    border-color:
        var(--color-primary);

    background:
        var(--color-primary-light);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--color-primary) 12%,
            transparent
        );
}


.selector-opcion-icono {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 12px;

    background:
        var(--color-surface);

    font-size: 19px;
}


.selector-opcion-info {
    min-width: 0;

    display: grid;

    gap: 3px;
}


.selector-opcion-info strong {
    overflow: hidden;

    color:
        var(--color-primary-dark);

    font-size: 13px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.selector-opcion-info small {
    overflow: hidden;

    color:
        var(--color-text-secondary);

    font-size: 10px;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.selector-opcion-info small.selector-opcion-distancia {
    color: var(--color-primary);
    font-weight: 700;
}


.selector-opcion-estado {
    color:
        var(--color-primary);

    font-size: 10px;

    font-weight: 800;

    white-space: nowrap;
}


.selector-sin-resultados {
    padding: 40px 20px;

    text-align: center;
}


.selector-sin-resultados > span {
    display: block;

    margin-bottom: 12px;

    font-size: 38px;
}


.selector-sin-resultados p {
    color:
        var(--color-text-secondary);
}


@media (max-width: 700px) {

    .selector-establecimiento-fondo {
        align-items: flex-end;

        padding: 0;
    }


    .selector-establecimiento-modal {
        max-height: 92vh;

        padding:
            24px
            18px;

        border-radius:
            24px
            24px
            0
            0;
    }


    .selector-establecimientos-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 430px) {

    .selector-establecimiento-opcion {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }


    .selector-opcion-estado {
        grid-column:
            2;
    }

}
/* ======================================
   SUPERCLICK
   PANTALLA FINALIZAR RESERVA
====================================== */

.pedido-pagina {
    width: 100%;
    max-width: 980px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        330px;

    gap: 22px;

    margin: 0 auto;
    padding: 10px 0 40px;
}


/* ======================================
   CABECERA
====================================== */

.pedido-pagina .pedido-header {
    grid-column: 1 / -1;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 26px 28px;

    border: 1px solid
        var(--color-border, #dfe7e3);

    border-radius: 22px;

    background:
        var(--color-surface, #ffffff);

    box-shadow:
        0 12px 35px
        rgba(15, 52, 37, 0.08);
}


.pedido-pagina .pedido-header h3 {
    margin: 5px 0 7px;

    color:
        var(--color-text, #16211b);

    font-size:
        clamp(25px, 4vw, 34px);

    font-weight: 850;

    line-height: 1.1;

    letter-spacing: -0.8px;
}


.pedido-pagina .pedido-header p {
    max-width: 540px;

    margin: 0;

    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 14px;

    line-height: 1.6;
}


.pedido-pagina .seccion-etiqueta {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

    border-radius: 999px;

    background:
        var(
            --color-primary-light,
            #eaf5ee
        );

    color:
        var(
            --color-primary,
            #176b43
        );

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


/* ======================================
   BOTÓN VOLVER
====================================== */

.pedido-pagina .boton-volver {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    padding: 10px 15px;

    border:
        1px solid
        var(--color-border, #dfe7e3);

    border-radius: 12px;

    background:
        var(--color-surface, #ffffff);

    color:
        var(
            --color-primary-dark,
            #114d32
        );

    font-size: 12px;

    font-weight: 750;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.pedido-pagina .boton-volver:hover {
    transform: translateY(-2px);

    border-color:
        var(--color-primary, #176b43);

    background:
        var(
            --color-primary-light,
            #eaf5ee
        );

    box-shadow:
        0 8px 20px
        rgba(23, 107, 67, 0.12);
}


/* ======================================
   TARJETAS GENERALES
====================================== */

.pedido-pagina .pedido-formulario,
.pedido-pagina .pedido-resumen {
    min-width: 0;

    padding: 24px;

    border:
        1px solid
        var(--color-border, #dfe7e3);

    border-radius: 20px;

    background:
        var(--color-surface, #ffffff);

    box-shadow:
        0 10px 30px
        rgba(15, 52, 37, 0.07);
}


/* Primera tarjeta: lugar de recogida */

.pedido-pagina
.pedido-formulario:first-of-type {
    grid-column: 1;
    grid-row: 2;

    align-self: start;
}


/* Resumen de productos */

.pedido-pagina .pedido-resumen {
    grid-column: 1;
    grid-row: 3;

    align-self: start;
}


/* Segunda tarjeta: fecha, hora y pago */

.pedido-pagina
.pedido-formulario:nth-of-type(3) {
    grid-column: 2;
    grid-row: 2 / span 2;

    align-self: start;

    position: sticky;
    top: 18px;
}


/* ======================================
   FORMULARIO
====================================== */

.pedido-pagina .pedido-formulario {
    display: grid;
    grid-template-columns: 1fr;

    gap: 9px;
}


.pedido-pagina
.pedido-formulario::before {
    display: block;

    margin-bottom: 8px;

    color:
        var(--color-text, #16211b);

    font-size: 17px;

    font-weight: 850;
}


.pedido-pagina
.pedido-formulario:first-of-type::before {
    content: "📍 Lugar de recogida";
}


.pedido-pagina
.pedido-formulario:nth-of-type(3)::before {
    content: "📅 Datos de la reserva";
}


.pedido-pagina .pedido-formulario label {
    display: block;

    margin-top: 8px;

    color:
        var(--color-text, #16211b);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.25px;
}


.pedido-pagina
.pedido-formulario input,
.pedido-pagina
.pedido-formulario select {
    width: 100%;
    min-width: 0;
    height: 48px;

    display: block;

    padding: 0 14px;

    border:
        1px solid
        var(--color-border, #dfe7e3);

    border-radius: 12px;

    outline: none;

    background:
        var(--color-surface, #ffffff);

    color:
        var(--color-text, #16211b);

    font: inherit;
    font-size: 13px;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.pedido-pagina
.pedido-formulario input:focus,
.pedido-pagina
.pedido-formulario select:focus {
    border-color:
        var(--color-primary, #176b43);

    box-shadow:
        0 0 0 4px
        rgba(23, 107, 67, 0.1);
}


.pedido-pagina
.pedido-formulario input[readonly] {
    background: #f6faf8;

    color:
        var(
            --color-text-secondary,
            #64726b
        );

    cursor: default;
}


.pedido-pagina
.pedido-formulario select {
    cursor: pointer;
}


/* Botón cambiar establecimiento */

.pedido-pagina
.pedido-formulario:first-of-type
.boton-volver {
    width: 100%;

    margin-top: 10px;
}


/* ======================================
   RESUMEN DE PRODUCTOS
====================================== */

.pedido-pagina .pedido-resumen h4 {
    margin: 0 0 18px;

    color:
        var(--color-text, #16211b);

    font-size: 18px;

    font-weight: 850;
}


.pedido-pagina
.pedido-resumen h4::before {
    content: "🛒";

    margin-right: 8px;
}


.pedido-pagina .pedido-producto {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 18px;

    padding: 14px 0;

    border-bottom:
        1px solid
        var(--color-border, #dfe7e3);
}


.pedido-pagina
.pedido-producto:first-of-type {
    padding-top: 0;
}


.pedido-pagina
.pedido-producto:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


.pedido-pagina .pedido-producto span {
    min-width: 0;

    color:
        var(--color-text, #16211b);

    font-size: 13px;

    line-height: 1.5;
}


.pedido-pagina
.pedido-producto strong {
    color:
        var(
            --color-primary-dark,
            #114d32
        );

    font-size: 13px;

    font-weight: 850;

    white-space: nowrap;
}


/* ======================================
   TOTAL
====================================== */

.pedido-pagina .pedido-total {
    grid-column: 2;
    grid-row: 4;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 20px 22px;

    border:
        1px solid
        rgba(23, 107, 67, 0.2);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #eff9f3,
            #e5f3eb
        );

    box-shadow:
        0 10px 26px
        rgba(23, 107, 67, 0.08);
}


.pedido-pagina .pedido-total span {
    color:
        var(
            --color-primary-dark,
            #114d32
        );

    font-size: 12px;

    font-weight: 750;
}


.pedido-pagina .pedido-total strong {
    color:
        var(
            --color-primary-dark,
            #114d32
        );

    font-size: 23px;

    font-weight: 900;

    white-space: nowrap;
}


/* ======================================
   BOTÓN CONFIRMAR
====================================== */

.pedido-pagina
.boton-confirmar-pedido {
    grid-column: 2;
    grid-row: 5;

    width: 100%;
    min-height: 54px;

    padding: 13px 20px;

    border: 0;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            var(
                --color-primary,
                #176b43
            ),
            var(
                --color-primary-dark,
                #114d32
            )
        );

    color: #ffffff;

    font-size: 14px;

    font-weight: 850;

    letter-spacing: 0.2px;

    cursor: pointer;

    box-shadow:
        0 13px 26px
        rgba(23, 107, 67, 0.24);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}


.pedido-pagina
.boton-confirmar-pedido::before {
    content: "✓";

    margin-right: 8px;
}


.pedido-pagina
.boton-confirmar-pedido:hover {
    transform: translateY(-2px);

    filter: brightness(1.05);

    box-shadow:
        0 17px 32px
        rgba(23, 107, 67, 0.3);
}


.pedido-pagina
.boton-confirmar-pedido:active {
    transform: translateY(0);
}


/* ======================================
   PEDIDO CONFIRMADO
====================================== */

.pedido-confirmado {
    width: min(620px, 100%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;

    margin: 20px auto;
    padding: 38px 30px;

    border:
        1px solid
        var(--color-border, #dfe7e3);

    border-radius: 24px;

    background:
        var(--color-surface, #ffffff);

    text-align: center;

    box-shadow:
        0 18px 50px
        rgba(15, 52, 37, 0.1);
}


.pedido-confirmado .pedido-icono {
    width: 74px;
    height: 74px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 5px;

    border-radius: 50%;

    background:
        var(
            --color-primary-light,
            #eaf5ee
        );

    font-size: 35px;
}


.pedido-confirmado h3 {
    margin: 3px 0 8px;

    color:
        var(--color-text, #16211b);

    font-size:
        clamp(26px, 5vw, 34px);

    font-weight: 900;

    letter-spacing: -0.7px;
}


.pedido-confirmado p {
    margin: 3px 0;

    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 13px;

    line-height: 1.55;
}


.pedido-confirmado > strong {
    color:
        var(
            --color-primary-dark,
            #114d32
        );

    font-size: 15px;
}


/* ======================================
   DATOS DEL PEDIDO (tarjetas icono + valor)
====================================== */

.pedido-confirmado-datos {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    width: 100%;
    margin: 16px 0 8px;

    text-align: left;
}

.pedido-confirmado-datos article {
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 13px;

    border:
        1px solid
        var(--color-border, #dfe7e3);

    border-radius: 14px;

    background: #fafcfb;
}

.pedido-confirmado-datos article > span {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 10px;

    background:
        var(--color-primary-light, #eaf5ee);

    font-size: 16px;
}

.pedido-confirmado-datos article > div {
    min-width: 0;

    display: grid;
    gap: 2px;
}

.pedido-confirmado-datos small {
    color:
        var(--color-text-secondary, #64726b);

    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pedido-confirmado-datos strong {
    overflow-wrap: anywhere;

    color: var(--color-text, #16211b);

    font-size: 13px;
    line-height: 1.35;
}

.pedido-confirmado-datos p {
    margin: 2px 0 0;

    color:
        var(--color-text-secondary, #64726b);

    font-size: 11px;
    line-height: 1.4;
}

.pedido-confirmado-datos article.pedido-confirmado-destacado {
    grid-column: 1 / -1;

    align-items: center;

    border-color: rgba(23, 107, 67, 0.25);

    background:
        linear-gradient(
            135deg,
            #eff9f3,
            #e5f3eb
        );
}

.pedido-confirmado-datos
.pedido-confirmado-destacado
strong {
    color:
        var(--color-primary-dark, #114d32);

    font-size: 21px;
}


/* ======================================
   CÓDIGO QR DE RECOGIDA
====================================== */

.pedido-qr-seccion {
    width: 100%;
    margin-top: 8px;
    padding: 22px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;

    border:
        1px solid
        var(--color-border, #dfe7e3);

    border-radius: 18px;

    background: #fafcfb;
}

.pedido-qr-etiqueta,
.pedido-codigo-etiqueta {
    color:
        var(--color-text-secondary, #64726b);

    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pedido-qr-seccion h4 {
    margin: 4px 0 6px;

    color: var(--color-text, #16211b);

    font-size: 19px;
}

.pedido-qr-marco {
    margin: 12px 0 4px;
    padding: 14px;

    border-radius: 16px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border, #dfe7e3);
}

.pedido-codigo-etiqueta {
    display: block;
    margin-top: 6px;
}

.pedido-qr-ayuda {
    margin-top: 8px;
}


/* ======================================
   ACCIONES FINALES
====================================== */

.pedido-confirmado-acciones {
    display: flex;
    flex-direction: column;

    gap: 10px;

    width: 100%;
    max-width: 330px;

    margin-top: 10px;
}


.pedido-confirmado
.codigo-recogida {
    margin: 8px 0;
    padding: 15px 24px;

    border:
        2px dashed
        var(--color-primary, #176b43);

    border-radius: 14px;

    background:
        var(
            --color-primary-light,
            #eaf5ee
        );

    color:
        var(
            --color-primary-dark,
            #114d32
        );

    font-size: 26px;

    font-weight: 900;

    letter-spacing: 2px;
}


.pedido-confirmado-acciones button {
    width: 100%;
    min-height: 48px;

    padding: 11px 18px;

    border: 0;

    border-radius: 13px;

    background:
        var(--color-primary, #176b43);

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.pedido-confirmado-acciones button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 22px
        rgba(23, 107, 67, 0.22);
}


.pedido-confirmado
.boton-ver-pedidos {
    border:
        1px solid
        var(--color-primary, #176b43);

    background:
        var(--color-surface, #ffffff);

    color:
        var(--color-primary, #176b43);
}


/* ======================================
   TABLET
====================================== */

@media (max-width: 900px) {

    .pedido-pagina {
        grid-template-columns: 1fr;
    }


    .pedido-pagina .pedido-header,
    .pedido-pagina
    .pedido-formulario:first-of-type,
    .pedido-pagina .pedido-resumen,
    .pedido-pagina
    .pedido-formulario:nth-of-type(3),
    .pedido-pagina .pedido-total,
    .pedido-pagina
    .boton-confirmar-pedido {
        grid-column: 1;
        grid-row: auto;
    }


    .pedido-pagina
    .pedido-formulario:nth-of-type(3) {
        position: static;
    }

}


/* ======================================
   MÓVIL
====================================== */

@media (max-width: 600px) {

    .pedido-pagina {
        gap: 15px;

        padding:
            4px
            0
            30px;
    }


    .pedido-pagina .pedido-header {
        flex-direction: column;

        padding: 21px 18px;

        border-radius: 17px;
    }


    .pedido-pagina
    .pedido-header .boton-volver {
        width: 100%;
    }


    .pedido-pagina .pedido-formulario,
    .pedido-pagina .pedido-resumen {
        padding: 19px 16px;

        border-radius: 17px;
    }


    .pedido-pagina
    .pedido-producto {
        gap: 10px;
    }


    .pedido-pagina
    .pedido-producto span,
    .pedido-pagina
    .pedido-producto strong {
        font-size: 12px;
    }


    .pedido-pagina .pedido-total {
        padding: 18px 16px;
    }


    .pedido-pagina
    .pedido-total strong {
        font-size: 20px;
    }


    .pedido-confirmado {
        margin: 5px auto;
        padding: 28px 18px;

        border-radius: 19px;
    }


    .pedido-confirmado-datos {
        grid-template-columns: 1fr;
    }


    .pedido-qr-seccion {
        padding: 20px 14px;
    }


    .pedido-confirmado
    .codigo-recogida {
        width: 100%;

        padding: 14px 10px;

        font-size: 22px;

        box-sizing: border-box;
    }

}
/* ======================================
   MEJORAS PANEL PROFESIONAL DEL EMPLEADO
====================================== */

.empleado-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}


.empleado-topbar-indicador {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 9px 12px;

    border-radius: 999px;

    background: #edf8f1;

    color: #176b43;

    font-size: 10px;

    font-weight: 800;

    white-space: nowrap;
}


.empleado-indicador-punto {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #28a866;

    box-shadow:
        0 0 0 4px
        rgba(40, 168, 102, 0.12);
}


.empleado-metrica small {
    color: #7a8881;

    font-size: 9px;
}


.empleado-buscador {
    display: grid;
    grid-template-columns: 1fr;

    gap: 18px;
}


.empleado-buscador-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}


.empleado-buscador-cabecera h3 {
    margin: 7px 0 5px;

    color: #114d32;

    font-size: 22px;

    font-weight: 900;
}


.empleado-buscador-cabecera p {
    margin: 0;

    color: #64726b;

    font-size: 12px;
}


.boton-abrir-escaner {
    min-height: 44px;

    padding: 10px 15px;

    border: 0;

    border-radius: 12px;

    background: #176b43;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;
}


.empleado-filtros {
    display: grid;
    grid-template-columns: auto minmax(220px, 360px);

    align-items: center;

    gap: 12px;
}


.empleado-filtros label {
    color: #16211b;

    font-size: 11px;

    font-weight: 800;
}


.empleado-filtros select {
    width: 100%;
    height: 44px;

    padding: 0 13px;

    border: 1px solid #dfe7e3;

    border-radius: 11px;

    outline: none;

    background: #ffffff;

    color: #16211b;

    font: inherit;

    font-size: 12px;
}


.empleado-mensaje-busqueda {
    margin: 0;
    padding: 11px 13px;

    border-radius: 11px;

    font-size: 11px;

    font-weight: 750;
}


.empleado-mensaje-busqueda.mensaje-error {
    background: #fff0f0;
    color: #a23b3b;
}


.empleado-mensaje-busqueda.mensaje-aviso {
    background: #fff7e8;
    color: #956515;
}


.empleado-mensaje-busqueda.mensaje-exito {
    background: #e8f7ed;
    color: #176b43;
}


/* ======================================
   ESCÁNER QR
====================================== */

.empleado-escaner {
    padding: 24px;

    border: 1px solid
        rgba(23, 107, 67, 0.2);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #f4faf6,
            #e9f5ed
        );

    box-shadow:
        0 10px 30px
        rgba(15, 52, 37, 0.07);
}


.empleado-escaner[hidden] {
    display: none;
}


.empleado-escaner-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.empleado-escaner-cabecera h3 {
    margin: 7px 0 5px;

    color: #114d32;

    font-size: 22px;

    font-weight: 900;
}


.empleado-escaner-cabecera p {
    margin: 0;

    color: #64726b;

    font-size: 12px;
}


.boton-cerrar-escaner {
    padding: 9px 13px;

    border: 1px solid #dfe7e3;

    border-radius: 11px;

    background: #ffffff;

    color: #53635b;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}


.empleado-lector-qr {
    width: min(500px, 100%);

    min-height: 300px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 16px;

    background: #ffffff;
}


.empleado-lector-qr video {
    border-radius: 14px;
}


.empleado-escaner-ayuda {
    margin: 13px 0 0;

    color: #64726b;

    font-size: 10px;

    text-align: center;
}


/* ======================================
   ENCABEZADO DEL LISTADO
====================================== */

.empleado-listado-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}


.empleado-listado-cabecera h3 {
    margin: 7px 0 0;

    color: #16211b;

    font-size: 21px;

    font-weight: 900;
}


.empleado-listado-cabecera > strong {
    color: #64726b;

    font-size: 11px;
}


.empleado-lista-pedidos {
    display: grid;

    gap: 18px;
}


/* Evita cambiar otra vez al estado actual */

.boton-estado-empleado:disabled {
    cursor: default;

    opacity: 1;
}


/* ======================================
   TABLET
====================================== */

@media (max-width: 800px) {

    .empleado-buscador-cabecera {
        flex-direction: column;
    }


    .boton-abrir-escaner {
        width: 100%;
    }


    .empleado-filtros {
        grid-template-columns: 1fr;
    }

}


/* ======================================
   MÓVIL
====================================== */

@media (max-width: 600px) {

    .empleado-topbar {
        flex-direction: column;
    }


    .empleado-topbar-indicador {
        width: 100%;

        justify-content: center;

        box-sizing: border-box;
    }


    .empleado-escaner {
        padding: 18px 14px;

        border-radius: 17px;
    }


    .empleado-escaner-cabecera {
        flex-direction: column;
    }


    .boton-cerrar-escaner {
        width: 100%;
    }


    .empleado-lector-qr {
        min-height: 260px;
    }


    .empleado-listado-cabecera {
        align-items: flex-start;
        flex-direction: column;
    }


    .empleado-listado-cabecera-derecha {
        width: 100%;

        justify-content: space-between;
    }

}
/* ======================================
   SUPERCLICK
   DISEÑO COMPLETO PANEL DEL EMPLEADO
====================================== */

.empleado-pagina {
    width: 100%;
    max-width: 1180px;

    display: grid;
    gap: 20px;

    margin: 0 auto;
    padding: 8px 0 42px;
}


/* ======================================
   CABECERA PRINCIPAL
====================================== */

.empleado-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    padding: 28px 30px;

    border: 1px solid
        var(--color-border, #dfe7e3);

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f6faf8
        );

    box-shadow:
        0 14px 38px
        rgba(15, 52, 37, 0.08);
}


.empleado-topbar h3 {
    margin: 7px 0 8px;

    color:
        var(--color-text, #16211b);

    font-size:
        clamp(28px, 4vw, 38px);

    font-weight: 900;

    line-height: 1.08;

    letter-spacing: -1px;
}


.empleado-topbar p {
    max-width: 560px;

    margin: 0;

    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 14px;

    line-height: 1.6;
}


.empleado-topbar-indicador {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 40px;

    padding: 8px 14px;

    border-radius: 999px;

    background: #eaf6ef;

    color:
        var(--color-primary, #176b43);

    font-size: 10px;

    font-weight: 850;

    white-space: nowrap;
}


.empleado-indicador-punto {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #26a866;

    box-shadow:
        0 0 0 5px
        rgba(38, 168, 102, 0.12);
}


/* ======================================
   MÉTRICAS
====================================== */

.empleado-resumen {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 14px;
}


.empleado-metrica {
    position: relative;

    min-width: 0;

    display: grid;
    gap: 7px;

    padding: 20px 21px;

    overflow: hidden;

    border: 1px solid
        var(--color-border, #dfe7e3);

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 9px 26px
        rgba(15, 52, 37, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.empleado-metrica::after {
    content: "";

    position: absolute;

    right: -18px;
    bottom: -18px;

    width: 70px;
    height: 70px;

    border-radius: 50%;

    background:
        rgba(23, 107, 67, 0.06);
}


.empleado-metrica:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 32px
        rgba(15, 52, 37, 0.09);
}


.empleado-metrica span {
    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 0.55px;

    text-transform: uppercase;
}


.empleado-metrica strong {
    color:
        var(--color-primary-dark, #114d32);

    font-size: 33px;

    font-weight: 950;

    line-height: 1;
}


.empleado-metrica small {
    color: #5f6b63;

    font-size: 11px;

    line-height: 1.4;
}


/* ======================================
   BUSCADOR
====================================== */

.empleado-buscador {
    display: grid;
    gap: 18px;

    padding: 25px;

    border: 1px solid
        rgba(23, 107, 67, 0.18);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #f4faf6,
            #e9f4ed
        );

    box-shadow:
        0 10px 28px
        rgba(15, 52, 37, 0.07);
}


.empleado-buscador-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 22px;
}


.empleado-buscador-cabecera h3 {
    margin: 7px 0 5px;

    color:
        var(--color-primary-dark, #114d32);

    font-size: 23px;

    font-weight: 900;
}


.empleado-buscador-cabecera p {
    margin: 0;

    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 12px;

    line-height: 1.5;
}


.boton-abrir-escaner {
    min-height: 45px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 10px 16px;

    border: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--color-primary, #176b43),
            var(--color-primary-dark, #114d32)
        );

    color: #ffffff;

    font-size: 11px;

    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 10px 21px
        rgba(23, 107, 67, 0.2);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.boton-abrir-escaner:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 28px
        rgba(23, 107, 67, 0.26);
}


.empleado-buscador-controles {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto;

    gap: 10px;
}


.empleado-campo-busqueda {
    min-width: 0;
    height: 50px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 15px;

    border: 1px solid
        var(--color-border, #dfe7e3);

    border-radius: 13px;

    background: #ffffff;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.empleado-campo-busqueda:focus-within {
    border-color:
        var(--color-primary, #176b43);

    box-shadow:
        0 0 0 4px
        rgba(23, 107, 67, 0.1);
}


.empleado-campo-busqueda input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color:
        var(--color-text, #16211b);

    font: inherit;

    font-size: 13px;
}


.empleado-campo-busqueda input::placeholder {
    color: #9ca8a1;
}


.boton-buscar-pedido,
.boton-limpiar-busqueda {
    min-height: 50px;

    padding: 10px 17px;

    border-radius: 13px;

    font-size: 11px;

    font-weight: 850;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.boton-buscar-pedido {
    border: 0;

    background:
        var(--color-primary, #176b43);

    color: #ffffff;
}


.boton-buscar-pedido:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 20px
        rgba(23, 107, 67, 0.2);
}


.boton-limpiar-busqueda {
    border: 1px solid
        var(--color-primary, #176b43);

    background: #ffffff;

    color:
        var(--color-primary, #176b43);
}


.boton-limpiar-busqueda:hover {
    background:
        var(--color-primary-light, #eaf5ee);
}


.empleado-filtros {
    display: grid;
    grid-template-columns:
        auto
        minmax(240px, 380px);

    align-items: center;

    gap: 13px;
}


.empleado-filtros label {
    color:
        var(--color-text, #16211b);

    font-size: 11px;

    font-weight: 850;
}


.empleado-filtros select {
    width: 100%;
    height: 45px;

    padding: 0 13px;

    border: 1px solid
        var(--color-border, #dfe7e3);

    border-radius: 11px;

    outline: 0;

    background: #ffffff;

    color:
        var(--color-text, #16211b);

    font: inherit;

    font-size: 12px;

    cursor: pointer;
}


.empleado-filtros select:focus {
    border-color:
        var(--color-primary, #176b43);

    box-shadow:
        0 0 0 4px
        rgba(23, 107, 67, 0.09);
}


/* ======================================
   MENSAJES DEL BUSCADOR
====================================== */

.empleado-mensaje-busqueda {
    margin: 0;

    padding: 12px 14px;

    border-radius: 11px;

    font-size: 11px;

    font-weight: 750;
}


.empleado-mensaje-busqueda.mensaje-error {
    border: 1px solid #efcaca;

    background: #fff1f1;

    color: #a23b3b;
}


.empleado-mensaje-busqueda.mensaje-aviso {
    border: 1px solid #f0d89f;

    background: #fff8e8;

    color: #936317;
}


.empleado-mensaje-busqueda.mensaje-exito {
    border: 1px solid #bfe1ca;

    background: #eaf7ee;

    color:
        var(--color-primary, #176b43);
}


/* ======================================
   ESCÁNER QR
====================================== */

.empleado-escaner {
    padding: 25px;

    border: 1px solid
        rgba(23, 107, 67, 0.2);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #f5faf7,
            #e9f5ed
        );

    box-shadow:
        0 12px 30px
        rgba(15, 52, 37, 0.07);
}


.empleado-escaner[hidden] {
    display: none;
}


.empleado-escaner-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.empleado-escaner-cabecera h3 {
    margin: 7px 0 5px;

    color:
        var(--color-primary-dark, #114d32);

    font-size: 22px;

    font-weight: 900;
}


.empleado-escaner-cabecera p {
    margin: 0;

    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 12px;
}


.boton-cerrar-escaner {
    min-height: 40px;

    padding: 9px 13px;

    border: 1px solid
        var(--color-border, #dfe7e3);

    border-radius: 11px;

    background: #ffffff;

    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 10px;

    font-weight: 850;

    cursor: pointer;
}


.empleado-lector-qr {
    width: min(520px, 100%);
    min-height: 310px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto;

    overflow: hidden;

    border: 1px solid
        var(--color-border, #dfe7e3);

    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        inset 0 0 0 7px
        rgba(23, 107, 67, 0.04);
}


.empleado-lector-qr video,
.empleado-lector-qr canvas {
    max-width: 100%;

    border-radius: 14px;
}


.empleado-escaner-ayuda {
    margin: 13px 0 0;

    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 10px;

    text-align: center;
}


/* ======================================
   CABECERA DEL LISTADO
====================================== */

.empleado-listado-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    padding: 4px 2px;
}


.empleado-listado-cabecera h3 {
    margin: 7px 0 0;

    color:
        var(--color-text, #16211b);

    font-size: 22px;

    font-weight: 900;
}


.empleado-listado-cabecera > strong {
    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 11px;
}


.empleado-listado-cabecera-derecha {
    display: flex;
    align-items: center;

    gap: 14px;
}


.empleado-listado-cabecera-derecha > strong {
    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 11px;
}


.boton-actualizar-pedidos {
    border: 1px solid
        var(--color-primary, #176b43);

    border-radius: 13px;

    padding: 8px 14px;

    background: #ffffff;

    color:
        var(--color-primary, #176b43);

    font-size: 12px;
    font-weight: 850;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.boton-actualizar-pedidos:hover {
    background:
        var(--color-primary-light, #eaf5ee);
}


.boton-actualizar-pedidos:disabled {
    opacity: 0.6;

    cursor: default;
}


.empleado-lista-pedidos {
    display: grid;
    gap: 18px;
}


/* ======================================
   TARJETA DE PEDIDO
====================================== */

.pedido-empleado {
    overflow: hidden;

    border: 1px solid
        var(--color-border, #dfe7e3);

    border-radius: 21px;

    background: #ffffff;

    box-shadow:
        0 11px 32px
        rgba(15, 52, 37, 0.07);
}


.pedido-empleado-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 22px 24px;

    border-bottom: 1px solid
        var(--color-border, #dfe7e3);

    background:
        linear-gradient(
            135deg,
            #fbfdfc,
            #f4f8f6
        );
}


.pedido-empleado-identidad h4 {
    margin: 10px 0 5px;

    color:
        var(--color-text, #16211b);

    font-size: 20px;

    font-weight: 900;
}


.pedido-empleado-identidad p {
    margin: 0;

    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 11px;
}


.estado-pedido {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.45px;

    text-transform: uppercase;
}


.estado-recibido {
    background: #edf1ff;
    color: #4056a5;
}


.estado-preparacion {
    background: #fff3df;
    color: #956313;
}


.estado-listo {
    background: #e6f6ec;
    color: #176b43;
}


.estado-entregado {
    background: #edf1ef;
    color: #59675f;
}


.estado-cancelado {
    background: #fceaea;
    color: var(--color-error);
}


.pedido-empleado-codigo {
    min-width: 160px;

    display: grid;
    gap: 4px;

    padding: 14px 16px;

    border: 1px dashed
        var(--color-primary, #176b43);

    border-radius: 14px;

    background:
        var(--color-primary-light, #eaf5ee);

    text-align: center;
}


.pedido-empleado-codigo span {
    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 8px;

    font-weight: 850;

    text-transform: uppercase;
}


.pedido-empleado-codigo strong {
    color:
        var(--color-primary-dark, #114d32);

    font-size: 18px;

    font-weight: 950;

    letter-spacing: 1px;
}


/* ======================================
   INFORMACIÓN DEL PEDIDO
====================================== */

.pedido-empleado-informacion {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 11px;

    padding: 20px 24px;
}


.pedido-empleado-informacion article {
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 13px;

    border: 1px solid
        var(--color-border, #dfe7e3);

    border-radius: 14px;

    background: #fafcfb;
}


.pedido-empleado-informacion article > span {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 10px;

    background:
        var(--color-primary-light, #eaf5ee);

    font-size: 17px;
}


.pedido-empleado-informacion article > div {
    min-width: 0;

    display: grid;
    gap: 3px;
}


.pedido-empleado-informacion small {
    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 8px;

    font-weight: 850;

    text-transform: uppercase;
}


.pedido-empleado-informacion strong {
    overflow-wrap: anywhere;

    color:
        var(--color-text, #16211b);

    font-size: 11px;

    line-height: 1.4;
}


.pedido-empleado-informacion p {
    margin: 0;

    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 9px;

    line-height: 1.4;
}


/* ======================================
   PRODUCTOS
====================================== */

.pedido-empleado-productos {
    display: grid;
    gap: 14px;

    padding: 20px 24px;

    border-top: 1px solid
        var(--color-border, #dfe7e3);
}


.pedido-empleado-productos-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.pedido-empleado-productos-titulo h5 {
    margin: 6px 0 0;

    color:
        var(--color-text, #16211b);

    font-size: 17px;

    font-weight: 900;
}


.pedido-empleado-productos-titulo > strong {
    color:
        var(--color-primary, #176b43);

    font-size: 11px;

    font-weight: 850;
}


.pedido-empleado-lista-productos {
    display: grid;

    overflow: hidden;

    border: 1px solid
        var(--color-border, #dfe7e3);

    border-radius: 14px;
}


.producto-preparacion {
    position: relative;

    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 12px;

    padding: 14px 15px;

    border-bottom: 1px solid
        var(--color-border, #dfe7e3);

    background: #ffffff;

    cursor: pointer;

    transition:
        background 0.2s ease;
}


.producto-preparacion:last-child {
    border-bottom: 0;
}


.producto-preparacion:hover {
    background: #f7faf8;
}


.producto-preparacion input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.producto-preparacion-marca {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid
        var(--color-border, #dfe7e3);

    border-radius: 8px;

    color: transparent;

    font-size: 13px;

    font-weight: 900;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.producto-preparacion input:checked
+ .producto-preparacion-marca {
    border-color:
        var(--color-primary, #176b43);

    background:
        var(--color-primary, #176b43);

    color: #ffffff;
}


.producto-preparacion-nombre {
    min-width: 0;

    display: grid;
    gap: 3px;

    color:
        var(--color-text, #16211b);

    font-size: 12px;

    font-weight: 800;
}


.producto-preparacion-nombre small {
    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 9px;
}


.producto-preparacion > strong {
    color:
        var(--color-primary-dark, #114d32);

    font-size: 11px;

    white-space: nowrap;
}


/* ======================================
   BOTONES DE ESTADO
====================================== */

.pedido-empleado-acciones {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 9px;

    padding: 18px 24px;

    border-top: 1px solid
        var(--color-border, #dfe7e3);

    background: #fafcfb;
}


.boton-estado-empleado {
    min-height: 44px;

    padding: 9px 10px;

    border: 1px solid
        var(--color-border, #dfe7e3);

    border-radius: 11px;

    background: #ffffff;

    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 10px;

    font-weight: 850;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}


.boton-estado-empleado:hover:not(:disabled) {
    transform: translateY(-2px);

    border-color:
        var(--color-primary, #176b43);

    color:
        var(--color-primary, #176b43);
}


.boton-estado-empleado.estado-activo,
.boton-estado-empleado:disabled {
    border-color:
        var(--color-primary, #176b43);

    background:
        var(--color-primary, #176b43);

    color: #ffffff;

    cursor: default;

    opacity: 1;
}


/* ======================================
   HISTORIAL
====================================== */

.pedido-empleado-historial {
    padding: 15px 24px;

    border-top: 1px solid
        var(--color-border, #dfe7e3);
}


.pedido-empleado-historial summary {
    color:
        var(--color-primary, #176b43);

    font-size: 10px;

    font-weight: 850;

    cursor: pointer;
}


.pedido-empleado-historial > div {
    display: grid;
    gap: 8px;

    margin-top: 12px;
}


/* ======================================
   CUENTA BANCARIA (admin, pagos Wompi)
====================================== */

.admin-cuenta-bancaria {
    margin-top: 16px;
    padding-top: 15px;

    border-top: 1px solid
        var(--color-border, #dfe7e3);
}


.admin-cuenta-bancaria summary {
    color:
        var(--color-primary, #176b43);

    font-size: 13px;
    font-weight: 850;

    cursor: pointer;
}


.admin-cuenta-bancaria-ayuda {
    margin: 8px 0 12px;

    font-size: 12px;
    color:
        var(--color-texto-secundario, #6b7a74);
}


.pedido-empleado-historial article {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 10px 12px;

    border-radius: 10px;

    background: #f4f8f6;
}


.pedido-empleado-historial span {
    color:
        var(--color-text, #16211b);

    font-size: 10px;

    font-weight: 800;
}


.pedido-empleado-historial small {
    color:
        var(
            --color-text-secondary,
            #64726b
        );

    font-size: 9px;
}


/* ======================================
   ESTADO VACÍO
====================================== */

.empleado-lista-pedidos
.historial-vacio {
    padding: 42px 24px;

    border: 1px solid
        var(--color-border, #dfe7e3);

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 28px
        rgba(15, 52, 37, 0.06);
}


/* ======================================
   TABLET
====================================== */

@media (max-width: 900px) {

    .empleado-resumen {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .empleado-buscador-controles {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }


    .boton-limpiar-busqueda {
        grid-column: 1 / -1;
    }


    .pedido-empleado-informacion {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .pedido-empleado-acciones {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* ======================================
   MÓVIL
====================================== */

@media (max-width: 600px) {

    .empleado-pagina {
        gap: 15px;

        padding-top: 2px;
    }


    .empleado-topbar {
        align-items: center;
        flex-wrap: wrap;

        gap: 12px;

        padding: 16px 18px;

        border-radius: 17px;
    }

    .empleado-topbar .seccion-etiqueta {
        display: none;
    }

    .empleado-topbar h3 {
        margin: 0;

        font-size: 22px;
    }

    .empleado-topbar p {
        display: none;
    }

    .empleado-topbar-indicador {
        box-sizing: border-box;
    }

    .empleado-resumen {
        gap: 9px;
    }


    .empleado-metrica {
        padding: 16px;

        border-radius: 14px;
    }


    .empleado-metrica strong {
        font-size: 26px;
    }


    .empleado-buscador,
    .empleado-escaner {
        padding: 20px 16px;

        border-radius: 17px;
    }


    .empleado-buscador-cabecera,
    .empleado-escaner-cabecera {
        flex-direction: column;
    }


    .boton-abrir-escaner,
    .boton-cerrar-escaner {
        width: 100%;
    }


    .empleado-buscador-controles {
        grid-template-columns: 1fr;
    }


    .boton-limpiar-busqueda {
        grid-column: auto;
    }


    .empleado-filtros {
        grid-template-columns: 1fr;
    }


    .empleado-lector-qr {
        min-height: 250px;
    }


    .empleado-listado-cabecera {
        align-items: flex-start;
        flex-direction: column;
    }


    .empleado-listado-cabecera-derecha {
        width: 100%;

        justify-content: space-between;
    }


    .pedido-empleado-cabecera {
        flex-direction: column;

        padding: 18px 16px;
    }


    .pedido-empleado-codigo {
        width: 100%;

        box-sizing: border-box;
    }


    .pedido-empleado-informacion {
        grid-template-columns: 1fr;

        padding: 17px 16px;
    }


    .pedido-empleado-productos {
        padding: 17px 16px;
    }


    .pedido-empleado-productos-titulo {
        align-items: flex-start;
        flex-direction: column;
    }


    .producto-preparacion {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }


    .producto-preparacion > strong {
        grid-column: 2;
    }


    .pedido-empleado-acciones {
        grid-template-columns: 1fr;

        padding: 16px;
    }


    .pedido-empleado-historial {
        padding: 14px 16px;
    }
}

/* ======================================
   ASISTENTE DE COMPRA
====================================== */

.asistente-compra-teaser {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    margin: 32px 0;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: white;
    box-shadow: var(--shadow-small);
}

.asistente-compra-icono {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--color-primary-light);
    font-size: 28px;
}

.asistente-compra-texto {
    flex: 1;
    min-width: 0;
}

.asistente-compra-texto h3 {
    margin: 4px 0;
}

.asistente-compra-texto p {
    color: var(--color-text-secondary);
}

.asistente-compra-pagina {
    width: 100%;
}

.asistente-compra-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.asistente-compra-tab {
    padding: 11px 18px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: white;
    color: var(--color-text-secondary);
    font-weight: 600;
    cursor: pointer;
}

.asistente-compra-tab.activa {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-small);
}

.asistente-recetas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.asistente-receta-tarjeta {
    display: grid;
    gap: 6px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 17px;
    background: white;
    box-shadow: var(--shadow-small);
    cursor: pointer;
    text-align: left;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.asistente-receta-tarjeta:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.asistente-receta-icono {
    font-size: 28px;
}

.asistente-receta-tarjeta small {
    color: var(--color-text-secondary);
}

.asistente-presupuesto-formulario {
    display: flex;
    gap: 15px;
    align-items: end;
    flex-wrap: wrap;
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: white;
    box-shadow: var(--shadow-small);
}

.asistente-presupuesto-formulario > div {
    display: grid;
    gap: 7px;
}

.asistente-presupuesto-formulario label {
    color: var(--color-text);
    font-weight: bold;
}

.asistente-presupuesto-formulario input {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
}

.asistente-presupuesto-formulario button {
    min-height: 44px;
    padding: 10px 18px;
    border: none;
    border-radius: 11px;
    background: var(--color-primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.asistente-resultado {
    margin-top: 24px;
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: white;
    box-shadow: var(--shadow-small);
}

.asistente-resultado-lista {
    display: grid;
    gap: 12px;
    margin: 16px 0;
}

.asistente-resultado-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 13px;
}

.asistente-resultado-item small {
    display: block;
    margin-top: 3px;
    color: var(--color-text-secondary);
}

.asistente-item-faltante {
    border-style: dashed;
    color: var(--color-text-secondary);
}

.asistente-resultado-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-radius: 13px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: bold;
}

.asistente-anadir-todo {
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    border: none;
    border-radius: 13px;
    background: var(--color-primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.asistente-anadir-todo:hover {
    background: var(--color-primary-dark);
}

@media (max-width: 600px) {

    .asistente-compra-teaser {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .asistente-compra-icono {
        margin: 0 auto;
    }

    .asistente-presupuesto-formulario {
        flex-direction: column;
        align-items: stretch;
    }

    .asistente-resultado-item {
        flex-direction: column;
        align-items: flex-start;
    }

}