/* Admin/public content pages (Nosotros / Como comprar) */
.admin-back-top {
    position: sticky;
    top: 0;
    z-index: 120;
    background: #fff;
    border-bottom: 1px solid #c0c0c0;
    padding: 10px;
    display: flex;
    justify-content: center;
}

.admin-back-top .volver-tienda-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 12px 24px;
    text-align: center;
    line-height: 1.2;
    white-space: normal;
}

.public-hero-card {
    margin: 0 auto 14px;
    max-width: 760px;
    background: linear-gradient(120deg, #f6fbff 0%, #eaf3ff 100%);
    border: 1px solid #c7ddff;
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}

.public-hero-card h2 {
    margin: 0 0 6px;
    color: #004a99;
    font-size: 1.2rem;
}

.public-hero-card p {
    margin: 0;
    color: #2d3a4d;
    font-size: 0.98rem;
}

.content-admin-page,
.content-public-page {
    max-width: 980px;
    margin: 14px auto 24px;
    background: #fff;
    border: 2px solid #c0c0c0;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 16px;
}

.content-admin-page h1,
.content-public-page h1 {
    color: #004a99;
    text-align: center;
    margin-top: 0;
}

.admin-card-panel {
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 14px;
    background: #fafafa;
}

.admin-card-panel h2 {
    margin: 0 0 10px;
    color: #004a99;
    font-size: 1.1em;
}

.admin-form-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-field-row {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 8px;
    align-items: center;
}

.admin-field-row input[type="text"],
.admin-form-stack textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 6px;
    font-size: 16px;
    background: #fff;
}

.admin-alert {
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-weight: bold;
}

.admin-alert-error {
    background: #ffeceb;
    color: #8a1f1b;
    border: 1px solid #efb7b4;
}

.admin-alert-ok {
    background: #eaf7ed;
    color: #1e6a2b;
    border: 1px solid #b9e0c1;
}

.public-fixed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 760px;
    margin: 0 auto;
    align-items: center;
}

.public-line-row {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 46px;
    border-bottom: 1px dashed #d9d9d9;
    padding: 8px 0;
    text-align: center;
}

.public-line-label {
    color: #004a99;
    font-weight: bold;
    text-align: center;
    padding-right: 0;
}

.public-line-value {
    min-height: 24px;
    color: #333;
    font-size: 1.08rem;
    font-weight: 700;
}

.public-extra-box {
    margin-top: 16px;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    padding: 12px;
    background: #fafafa;
    line-height: 1.5;
}

.content-public-text h2 {
    color: #004a99;
    margin-top: 14px;
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .content-admin-page,
    .content-public-page {
        border-radius: 0;
        margin: 0;
        border-left: 0;
        border-right: 0;
    }

    .admin-field-row {
        grid-template-columns: 1fr;
    }

    .public-line-row {
        max-width: 100%;
        min-height: 44px;
    }

    .public-line-label {
        text-align: center;
        padding-right: 0;
    }

    .admin-back-top .volver-tienda-btn {
        width: min(96vw, 460px);
        min-height: 56px;
        margin: 0 auto;
        justify-content: center;
        text-align: center;
        padding-left: 14px;
        padding-right: 14px;
    }
}
body {
    font-family: Arial, sans-serif;
    background:#e2e2e2; /* antes #f7f7f7, un poco más oscuro */
    margin:0;
    padding:0 10px 40px;
}

a { color:#007bff; text-decoration:none; }
a:hover { text-decoration:underline; }

.top-bar {
    max-width:1200px;
    margin:10px auto 0;
    display:flex;
    justify-content:center; /* Cambiado de space-between a center */
    align-items:center;
    /* height: 60px; opcional si quieres altura fija */
}

/* Oculta el h2 si queda en el HTML por error */
.top-bar h2 {
    display: none !important;
}

/* Centrado y estilo para el wrapper del carrito */
.cart-link-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Mejor apariencia para el enlace del carrito */
.cart-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size:16px;           /* antes 22px */
    font-weight:bold;
    background: #fff;
    color: #004a99;
    border-radius: 22px;      /* antes 30px */
    padding: 6px 16px;        /* antes 12px 28px */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* menos sombra */
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    border: 2px solid #007bff;
    margin: 0 auto;
    min-height: 0;            /* asegura que no crezca de más */
}

.cart-link:hover {
    background: #e2e2e2;
    color: #007bff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    text-decoration: none;
}

.cart-icon {
    font-size: 18px;          /* antes 28px */
    margin-right: 4px;
    color: #28a745;
}

.cart-count {
    font-size:18px;           /* antes 26px */
    color: #fff;
    background: #28a745;
    border-radius: 50%;
    padding: 1px 8px;         /* antes 2px 12px */
    margin-left: 2px;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(40,167,69,0.12);
    display: inline-block;
    min-width: 22px;          /* antes 32px */
    text-align: center;
}

.product-grid {
    max-width:1200px;
    margin:15px auto 0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr)); /* 2 productos por fila en móvil y tablets */
    gap:16px;
}

@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

/* Tarjeta más marcada para diferenciar productos */
.product-card {
    background:#fff;
    border:2px solid #c0c0c0;           /* antes 1px #ddd */
    border-radius:8px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 2px 6px rgba(0,0,0,0.15); /* un poco más notoria */
}

/* Opcional: resaltar aún más al pasar el mouse en PC */
@media (hover: hover) {
    .product-card:hover {
        border-color:#007bff;
        box-shadow:0 4px 10px rgba(0,0,0,0.2);
    }
}

.product-image {
    width:100%;
    padding-top:110%; /* antes 85%, bastante más alta en PC */
    background:#f2f2f2;
    position:relative;
    overflow:hidden;
}

.product-image img {
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    object-fit:contain; /* muestra más parte de la foto (menos recorte) */
}

/* Imagen clicable ocupa todo el contenedor */
.product-image .product-thumb-link {
    position:absolute;
    inset:0;
    display:block;
}

/* Enlace del título sin subrayado */
.product-name .product-title-link {
    color:inherit;
    text-decoration:none;
    display:block;
}
.product-name .product-title-link:hover {
    color:#004a99;
    text-decoration:underline;
}

.product-info {
    padding:12px 12px 14px;
    flex:1;
    display:flex;
    flex-direction:column;
}

.product-name {
    font-size:18px;   /* antes 22px, ~20% más chico en PC */
    font-weight:bold;
    margin:0 0 10px;
    min-height:40px;
    text-align:center;
    color:#000;
}

.product-meta {
    font-size:13px;
    color:#555;
    margin-bottom:4px;
}

.product-price {
    font-size:30px;
    font-weight:bold;
    color:#28a745;
    margin:10px 0;
    text-align:center;
}

.product-stock {
    font-size:13px;
    color:#777;
    margin-bottom:8px;
    text-align:center;
}

.product-actions {
    margin-top:auto;
}

.product-actions form {
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
}

/* Controles de cantidad (usados en index.php) */
 qty-control {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    padding: 2px 4px;
    max-width: 150px;
    margin: 4px auto 0;
}

/* Tamaño base en PC */
 qty-btn,
 qty-value,
 qty-input {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 0;
    background: transparent;
}

/* Botones +/- en PC */
.product-card .qty-btn {
    font-size: 18px;
    cursor: pointer;
    padding: 0;
}

/* Campo numérico en PC: más angosto */
.product-card .qty-input {
    width: 52px;
    height: 30px;
    font-size: 18px;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

/* MÓVIL: todo un poco más chico para que no toque los costados */
@media (max-width: 767px) {
    .product-card .qty-control {
        max-width: 130px;
        padding: 2px 3px;
    }
    .product-card .qty-btn,
    .product-card .qty-value,
    .product-card .qty-input {
        width: 26px;
        height: 26px;
    }
    .product-card .qty-btn {
        font-size: 16px;
    }
    .product-card .qty-input {
        width: 46px;
        height: 28px;
        font-size: 16px;
    }
}

/* Botón "Agregar al carrito" más grande y azul */
.product-actions form button[type="submit"] {
    width: 100%;
    margin-top: 10px;
    padding: 12px 16px;
    font-size: 18px;
    font-weight: bold;
    background: #004a99;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.product-actions form button[type="submit"]:hover {
    background: #003874;
    text-decoration: none;
}

/* móvil */
@media (max-width: 767px) {
    .qty-btn,
    .qty-value {
        width:52px;   /* antes 44px */
        height:52px;  /* antes 44px */
        font-size:24px; /* antes 22px */
    }

    .qty-btn {
        font-size:30px; /* antes 26px */
    }
}

/* Botón "Volver a la tienda" reutilizable */
.volver-tienda-top {
    text-align: center;
    margin-top: 18px;
    margin-bottom: 10px;
}
.volver-tienda-btn {
    display: inline-block;
    background: #004a99;
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.08em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: background 0.2s;
}
.volver-tienda-btn:hover {
    background: #003874;
    text-decoration: none;
}

/* Mensaje de éxito al enviar pedido */
.pedido-success {
    text-align: center;
    margin: 30px auto;
    font-weight: bold;
    font-size: 1.3em;
    color: #004a99;
    background: #eaf3ff;
    border: 2px solid #c0d7ff;
    border-radius: 10px;
    padding: 16px 18px;
    max-width: 680px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Responsive: móvil */
@media (max-width: 600px) {
    .volver-tienda-btn {
        width: 94%;
        font-size: 1.02em;
        padding: 12px 0;
    }
    .pedido-success {
        margin: 18px auto;
        font-size: 1.15em;
        padding: 14px 12px;
        max-width: 96%;
    }
}

/* Responsive: tablet/desktop pequeños */
@media (max-width: 900px) and (min-width: 601px) {
    .volver-tienda-btn {
        padding: 12px 22px;
        font-size: 1.05em;
    }
    .pedido-success {
        max-width: 92%;
    }
}

/* Barra superior de acciones en páginas internas */
.order-actions-top {
    width: 100%;
    background: #fff;
    border-bottom: 2px solid #c0c0c0;
    margin: 0 0 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
    padding: 10px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.order-actions-top a {
    display: inline-block;
    padding: 10px 14px;
    background: #004a99;
    color: #fff;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
}
.order-actions-top a:hover {
    background: #003874;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .order-actions-top {
        padding: 12px 20px;
    }
    .order-actions-top a {
        font-size: 16px;
        padding: 10px 16px;
        border-radius: 8px;
    }
}

/* NUEVO: ajustes específicos para móvil (menor altura del bloque superior) */
@media (max-width: 767px) {
    /* Barra superior más compacta */
    .top-bar {
        max-width: 100%;
        margin: 4px auto 0;
    }
    .cart-link {
        font-size: 14px;
        padding: 4px 10px;
        border-radius: 16px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }

    /* Bloque de botones más bajo y en filas compactas */
    .order-actions-top {
        position: static;          /* evita “pegarse” arriba y sumar altura */
        padding: 6px 6px 8px;
        margin-top: 6px !important;/* sobreescribe style="margin-top:20px" */
        margin-bottom: 6px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
    .order-actions-top a {
        min-width: 44%;            /* 2 botones por fila aprox. */
        padding: 8px 8px;
        font-size: 14px;
        margin: 0;
    }

    /* Botón volver tienda (si se usa) algo más chico también */
    .volver-tienda-btn {
        padding: 10px 0;
        font-size: 0.95em;
    }
}

/* Formulario: nuevo producto */
.new-prod-form {
    max-width: 900px;
    margin: 16px auto 24px;
    background: #fff;
    border: 2px solid #c0c0c0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
    padding: 14px;
}
.new-prod-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.new-prod-form .form-group {
    display: flex;
    flex-direction: column;
}
.new-prod-form label {
    font-weight: bold;
    color: #004a99;
    margin-bottom: 6px;
}
.new-prod-form input[type="text"],
.new-prod-form input[type="number"],
.new-prod-form textarea,
.new-prod-form select {
    padding: 10px 12px;
    border: 1px solid #c0c0c0;
    border-radius: 6px;
    font-size: 16px;
    background: #fafafa;
}
.new-prod-form textarea { resize: vertical; }

.new-prod-form .form-actions {
    margin-top: 12px;
}
.new-prod-form .form-actions button {
    padding: 10px 14px;
    font-size: 16px;
    width: 100%;
    background: #004a99;
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.new-prod-form .form-actions button:hover {
    background: #003874;
}

/* Panel avanzado */
.adv-section { margin-top: 8px; }
.adv-toggle {
    display: inline-block;
    background: #004a99;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    border: 0;
}
.adv-toggle:hover {
    background: #003874;
    text-decoration: none;
}
.adv-panel {
    margin-top: 10px;
    display: none;
    border-top: 1px solid #e2e2e2;
    padding-top: 10px;
}
.adv-panel.open {
    display: block;
}

/* Nombre del producto con más espacio */
.name-group { grid-column: 1 / -1; }
.name-input {
    font-size: 20px;
    padding: 12px 14px;
}

/* Toggle switch */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
 /*    user-select: none;  */ 
}
.toggle-switch input {
    display: none;
}
.toggle-switch .switch {
    position: relative;
    width: 46px;
    height: 26px;
    background: #bbb;
    border-radius: 26px;
    transition: background 0.2s;
}
.toggle-switch .switch::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
.toggle-switch input:checked + .switch {
    background: #28a745;
}
.toggle-switch input:checked + .switch::after {
    transform: translateX(20px);
}
.toggle-switch .toggle-text {
    color: #555;
    font-size: 14px;
}

/* Responsive: apilar en móvil */
@media (max-width: 767px) {
    .new-prod-form {
        padding: 12px;
    }
    .new-prod-form .form-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .new-prod-form input[type="text"],
    .new-prod-form input[type="number"],
    .new-prod-form textarea,
    .new-prod-form select {
        font-size: 18px;
        padding: 12px 12px;
    }
    .new-prod-form .form-actions button {
        font-size: 18px;
        padding: 12px 16px;
    }
}

/* Subida y vista previa de imagen */
.image-upload-group .image-error {
    color: #a30000;
    font-weight: bold;
    margin-top: 4px;
}

.image-preview {
    /* Cambiar a caja pequeña fija */
    width: 140px;
    height: 140px;
    padding: 6px;
    border: 1px dashed #c0c0c0;
    border-radius: 6px;
    background: #fafafa;
    display: none; /* se muestra desde JS con 'flex' */
    align-items: center;
    justify-content: center;
}
.image-preview img {
    /* Ajuste a thumb cuadrado */
    width: 100%;
    height: 100%;
    object-fit: cover; /* recorta suavemente si no es cuadrada */
    border-radius: 4px;
}

/* Overlay "Guardando..." para evitar doble clic */
.saving-indicator {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    display: none; /* se activa por JS */
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.saving-indicator .box {
    background: #fff;
    color: #004a99;
    font-weight: bold;
    padding: 12px 18px;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    display: inline-flex;           /* nuevo: alinear spinner + texto */
    align-items: center;
    gap: 10px;
}
.saving-indicator .spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #cfe0ff;
    border-top-color: #004a99;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
/* Botón deshabilitado en envío */
.new-prod-form .form-actions button[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Menú principal horizontal */
.main-menu {
    width: 100%;
    background: #fff;
    border-bottom: 2px solid #c0c0c0;
    margin-bottom: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}
.main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
}
.main-menu li {
    margin: 0;
}
.main-menu a {
    display: block;
    padding: 14px 20px;
    color: #004a99;
    font-weight: bold;
    font-size: 17px;
    border-radius: 4px 4px 0 0;
    transition: background 0.2s, color 0.2s;
}
.main-menu a:hover,
.main-menu a.active {
    background: #e2e2e2;
    color: #007bff;
    text-decoration: none;
}

/* Responsive: menú apilado en móvil */
@media (max-width: 767px) {
    .main-menu ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .main-menu a {
        padding: 14px 10px;
        font-size: 18px;
        border-radius: 0;
        border-bottom: 1px solid #eee;
    }
}

/* Mensaje flotante de carrito / acciones */
.msg-carrito {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 10px 24px;
    border-radius: 20px;
    background: #28a745 !important;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    display: none;
    z-index: 1000;
    text-align: center;
    min-width: 160px;
    max-width: 90vw;
    /* duración más corta y sin forwards para que vuelva abajo al terminar */
    animation: fly-to-cart 0.35s ease-out;
}

.category-filter-wrap {
    max-width: 1200px;
    margin: 10px auto 0;
    background: #fff;
    border: 2px solid #c0c0c0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
    padding: 10px;
}

.category-filter-desktop {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cat-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid #004a99;
    border-radius: 999px;
    background: #fff;
    color: #004a99;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
}

.cat-chip:hover {
    background: #eaf3ff;
    text-decoration: none;
}

.cat-chip.active {
    background: #004a99;
    color: #fff;
}

.category-filter-mobile {
    display: none;
}

.category-filter-label {
    display: block;
    font-weight: bold;
    color: #004a99;
    margin-bottom: 6px;
}

.category-filter-mobile select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #c0c0c0;
    border-radius: 6px;
    font-size: 16px;
    background: #fafafa;
}

/* NUEVO: keyframes del efecto de subir hacia el carrito */
@keyframes fly-to-cart {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -160px); /* hacia arriba, hacia la barra superior */
        opacity: 0.95;
    }
}

/* OVERRIDE FINAL: tamaños del control de cantidad (index.php) */
.product-card .qty-control {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    padding: 2px 4px;
    max-width: 150px;
    margin: 4px auto 0;
}

.product-card .qty-btn,
.product-card .qty-value,
.product-card .qty-input {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 0;
    background: transparent;
}

/* Botones +/- en PC */
.product-card .qty-btn {
    font-size: 18px;
    cursor: pointer;
    padding: 0;
}

/* Campo numérico en PC: más angosto */
.product-card .qty-input {
    width: 52px;
    height: 30px;
    font-size: 18px;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

/* MÓVIL: todo un poco más chico para que no toque los costados */
@media (max-width: 767px) {
    .product-card .qty-control {
        max-width: 130px;
        padding: 2px 3px;
    }
    .product-card .qty-btn,
    .product-card .qty-value,
    .product-card .qty-input {
        width: 26px;
        height: 26px;
    }
    .product-card .qty-btn {
        font-size: 16px;
    }
    .product-card .qty-input {
        width: 46px;
        height: 28px;
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .category-filter-desktop {
        display: none;
    }
    .category-filter-mobile {
        display: block;
    }
}

/* NUEVO: en la página de catálogo (index.php) dejar "Ver carrito" siempre visible arriba */
.page-index .top-bar {
    position: sticky;
    top: 0;
    z-index: 120;              /* por encima de productos, debajo de overlays */
    padding-top: 6px;
    padding-bottom: 6px;
    background: #e2e2e2;       /* mismo fondo que body para evitar parpadeos */
}

/* Opcional: en móvil, hacerla un poco más compacta aún */
@media (max-width: 767px) {
    .page-index .top-bar {
        margin-top: 0;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* Barra superior de acciones en páginas internas */
.order-actions-top a{
	/* antes era inline-block; en móvil con min-width quedaba el texto descentrado */
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-align:center;
}

/* Toggles: ocultar textos "visible/invisible", "activo/inactivo", etc. */
.toggle-switch .toggle-text{
	display:none !important;
}

.limit-note{
	display:block;
	margin-top:6px;
	color:#555;
	font-size:13px;
	line-height:1.25;
}
.limit-note code{
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size:12px;
}

.product-view-link {
    margin-bottom: 8px;
    text-align: center;
}
.btn-view-product {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 2px solid #004a99;
    border-radius: 6px;
    font-weight: bold;
    color: #004a99;
    background: #fff;
    transition: background 0.2s, color 0.2s;
}
.btn-view-product:hover {
    background: #004a99;
    color: #fff;
    text-decoration: none;
}

.pagination {
    margin: 18px auto 10px;
    padding: 12px 14px;
    max-width: 520px;
    background: #fff;
    border: 2px solid #c0c0c0;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 18px;
    font-weight: bold;
}
.pagination .pagination-info {
    color: #004a99;
}
.pagination .pag-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 2px solid #004a99;
    color: #004a99;
    background: #eaf3ff;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.pagination .pag-btn:hover {
    background: #004a99;
    color: #fff;
    text-decoration: none;
}
.pagination .pag-btn.disabled {
    opacity: 0.45;
    border-color: #c0c0c0;
    color: #777;
    background: #f2f2f2;
    pointer-events: none;
}

/* Opcional: en las tarjetas de `editpro.php` */
.card-top-actions {
    text-align: center;
    padding: 8px 0 4px;
}
.opt-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 2px solid #004a99;
    background: #fff;
    color: #004a99;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    margin-bottom: 6px; /* separación del contenido */
}
.opt-link-btn:hover {
    background: #004a99;
    color: #fff;
}