.acciones {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 10px 0 20px 0;
}

.acciones-panel-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.acciones-panel-superior {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.admin-salir {
    position: absolute;
    top: 1px;
    right: 1px;

    padding: 10px 18px;
    background: red;
    color: white;
    text-decoration: none;
    border-radius: 8px;
}

.boton-cantidad {
    width: 36px;
    height: 36px;

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

    font-size: 24px;
    font-weight: bold;
    line-height: 1;

    border: none;
    border-radius: 8px;

    background: #0d6efd;
    color: white;

    cursor: pointer;
    padding: 0;
    margin: 0;
}

.boton-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 8px 10px;
    border: none;
    border-radius: 6px;

    background: #28a745;   /* verde claro visible */
    color: white;          /* icono blanco */
    font-size: 14px;

    cursor: pointer;
    text-decoration: none;
}

.boton-icono i {
    color: white;  /* fuerza el icono blanco */
    background: #17a2b8;
    font-weight: bold;
}

.boton-icono:hover {
    background: #218838;
}

.admin-salir:hover {
    background: darkred;
}

.boton-admin {
    position: absolute;
    top: 1px;
    right: 1px;

    padding: 10px 18px;
    background: #333;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
}

.boton-admin:hover {
    background: #111;
}

.boton-vaciar {
    display: inline-block;
    margin-left: 15px;
    padding: 10px 15px;
    background: #d9534f;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
}

.boton-vaciar:hover {
    background: #c9302c;
}

.boton-volver {
    display: inline-block;
    margin-top: 0px;
    padding: 10px 15px;
    background-color: #0078d7;
    color: white;
    text-decoration: none;
    border-radius: 6px;
}

.boton-volver:hover {
    background-color: #005fa3;
}

.boton-volver-listado {
    display: inline-block;
    padding: 10px 15px;
    background: #28a745;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
}

.boton-volver-listado:hover {
    background: #218838;
}

.botones {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.botones button {
    flex: 1;
    max-width: 220px;
    min-width: 160px;

    padding: 15px 20px;

    background-color: #0078d7;
    color: white;
    border: none;
    border-radius: 8px;

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

    box-sizing: border-box;
    transition: 0.2s;
}

.botones button:hover {
    background-color: #005fa3;
    transform: translateY(-2px);
}

.cabecera {
    position: relative;
    text-align: center;
    padding: 10px 20px;
    
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
}

.cabecera h1 {
    margin: 10px 0;
    font-size: 28px;
}

/* texto pequeño inferior */
.cabecera p {
    margin-top: 10px;
    font-size: 16px;
    color: #555;
}

.cart-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.centrada {
    text-align: center;
}

.codigo-barras {
    font-size: 18px;
    color: #666;
    margin-top: 15px;
    margin-bottom: 25px;
}

.codigo-texto {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
}

.contenedor {
    width: 100%;
    max-width: none;
    margin: auto;
    background: white;

    padding: 5px 30px 30px 30px; /* 👈 clave: casi sin aire arriba */

    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.datos-extra {
    font-size: 18px;
    color: #555;
}

.derecha {
    text-align: right;
}

.error-admin {
    margin-top: 20px;
    padding: 10px;
    background: #ffdede;
    color: red;
    border-radius: 8px;
    animation: desaparecer 5s forwards;
}

.fa,
.fa-solid,
.fa-magnifying-glass,
.fa-cart-shopping {
    color: white;
    font-size: 16px;
}

.ficha-articulo {
    max-width: 700px;
    margin: 15px auto;
    padding: 40px;
    text-align: center;

    background: #fff8e7;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.form-acciones-carrito {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.form-cart {
    display: flex;
    align-items: center;
}

.cart-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* estado normal */
.icono-carrito {
    position: absolute;
    top: 10px;
    left: 10px;

    background: #4da3ff; /* azul claro */
    color: white;

    padding: 10px 14px;
    border-radius: 10px;

    text-decoration: none;
    font-weight: bold;

    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
    z-index: 999;
}

/* rebote + color */
.icono-carrito.bounce {
    animation: reboteCarrito 0.5s ease;
    background: #1e90ff !important; /* azul más vivo */
    color: white !important;
    border-radius: 10px;
}

.icono-carrito i,
.icono-carrito svg {
    color: white ;
}

.input-cantidad {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 36px;

    font-size: 18px;
    font-weight: bold;
    color: black;
    background: white;

    border: 1px solid #ccc;
    border-radius: 8px;

    text-align: center;
    box-sizing: border-box;
}

.input-cantidad-busqueda {
    width: 70px;
    height: 40px;
    text-align: center;
    font-size: 18px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

/*.logo {
    width: 120px;
    max-width: 100%;
    margin-bottom: 10px;
}*/

.logo {
    width: 100px;
    height: auto;
}

.modo-admin {
    color: red;
    font-weight: bold;
    font-size: 18px;
}

.nombre-articulo {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.panel-espera {
    max-width: 500px;
    margin: 60px auto;
    padding: 40px;
    text-align: center;

    background: #fff8e7;;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.panel-espera h2 {
    margin-bottom: 20px;
}

.precio {
    text-align: right;
    white-space: nowrap;
    min-width: 100px;
}

.precios {
    margin-bottom: 25px;
}

.pvd-grande {
    font-size: 42px;
    font-weight: bold;
    color: red;
}

.pvp-grande {
    font-size: 42px;
    font-weight: bold;
    color: green;
    margin-right: 25px;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0px 0px 12px rgba(0,0,0,0.1);  
    min-width: 1100;
}

.tabla td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.tabla td:nth-child(1),
.tabla td:nth-child(4),
.tabla td:nth-child(5),
.tabla td:nth-child(6) {
    text-align: right;
}

.tabla th {
    background-color: #0078d7;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 12px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 10;
}

.tabla th:nth-child(1),
.tabla th:nth-child(4),
.tabla th:nth-child(5),
.tabla th:nth-child(6) {
    text-align: right;
}

.tabla tr:hover {
    background-color: #f2f6ff;
}

.tabla-wrapper {
    width: 100%;
    max-height: 70vh;   /* 👈 altura del área visible */
    overflow-y: auto;   /* 👈 SOLO scroll vertical aquí */
    overflow-x: auto;   /* por si hay muchas columnas */
    margin-top: 10px;
    border-radius: 8px;
}

.tabla th {
    background-color: #0078d7;
}

/* BOTÓN EN CABECERA */
.th-btn {
    display: block;
    width: 100%;
    padding: 10px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: 0.2s;
}

/* HOVER */
.th-btn:hover {
    background: rgba(255,255,255,0.15);
}

/* COLUMNA ACTIVA */
.th-btn.active {
    background: rgba(255,255,255,0.25);
    border: 1px solid white;
}

/* logo + titulo en la misma línea */
.titulo-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 5px;
}

/* texto grande con degradado azul */
.titulo-logo h1 {
    margin: 0;
    font-size: 42px;
    font-weight: bold;

    background: linear-gradient(
        90deg,
        #0057b8,
        #8ec5ff,
        #0057b8
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}

.total-general-box {
    width: 100%;
    margin-top: 0;
    border: 1px solid #ddd;
    border-top: none;
}

.total-general-titulo {
    background: #dbeafe; /* azul claro */
    padding: 14px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    color: #000; /* letra negra */
}

.total-general-importe {
    padding: 18px;
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    background: #2563eb; /* mismo azul cabecera */
    color: #fff; /* letra blanca */
}

.zona-admin {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
}

.zona-qr {
    margin-top: 30px;
    text-align: center;
    padding: 20px;
    background: #fff8e7;
    border-radius: 12px;
    border: 1px solid #eee;
}

#contador {
    font-size: 60px;
    font-weight: bold;
    color: #0078d7;
    margin-top: 20px;
}

#estado {
    margin-top: 20px;
    font-size: 18px;
    color: #555;
}

#qrcode {
    margin-top: 15px;
    display: inline-block;
}

#video {
    width: 95%;
    max-width: 600px;
    height: 150px;

    display: block;
    margin: 20px auto;

    border: 2px solid #0078d7;
    border-radius: 12px;

    object-fit: cover;
}

#zona-camara {
    display: none;
    width: 100%;
    text-align: center;
    margin-top: 15px;
}

#zona-camara button {
    background: #d9534f;
    width: auto;
    padding: 12px 20px;
    border-radius: 8px;
}

#zona-camara button:hover {
    background: #c9302c;
}

@keyframes desaparecer {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes reboteCarrito {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.25);
    }
    50% {
        transform: scale(0.95);
    }
    70% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
    }
}


body {
    font-family: Arial, sans-serif;
    background-color: #f4f6f9;
    margin: 0;
    padding: 0;
    padding-top: 80px;
    width:95%;
    margin: auto;
}

button:not(.boton-icono) {
    margin-top: 10px;
    display: inline-block;
    width: auto;
    padding: 15px;
    background-color: #0078d7;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    box-sizing: border-box;
}

button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    transform: none;
}

button:hover {
    background-color: #005fa3;
}

button.boton-icono,
button.boton-icono:hover,
button.boton-icono:active,
button.boton-icono:focus {
    background: #28a745 !important;
    color: white !important;
    border: none !important;
    outline: none !important;
}

button.boton-icono {
    position: relative;
    /*top: 10px;*/
    height: 48px;          /* 👈 MISMA ALTURA */
    display: inline-flex;
    align-items: center;
    justify-content: start;
    padding: 0 12px;       /* solo horizontal */
    box-sizing: border-box;
    gap: 6px;
    background: #28a745 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer; 
}

button.boton-icono i {
    color: white !important;
}

h1 {
    text-align: center;
    color: #333;
}

h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    color: #555;
}

hr {
    margin-top: 40px;
    margin-bottom: 40px;
}

input[type="number"],
input[type="text"] {

    width: 100%;
    padding: 15px;
    margin-top: 18px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
}

table {
    width: 100%;
    box-sizing: border-box;
}

table img {

    border-radius: 8px;

    max-width: 80px;
}