/* =====================================================================
   NovaCore CMS — Hoja de estilos principal del sitio público
   ---------------------------------------------------------------------
   Toda la apariencia (colores, tipografías, radios, sombras) se controla
   con variables CSS. Los 20 temas de includes/temas.php solo cambian
   estas variables (y un par de atributos data-btn/data-card en <body>);
   la estructura HTML es siempre la misma. Ver includes/header.php.
   ===================================================================== */

:root {
    --primary-color: #205f34;
    --primary-dark: #16472a;
    --primary-light: #3ad29f;
    --surface-color: #ffffff;
    --dark-color: #2b2b2b;
    --text-muted: #5a5a5a;
    --gray-light: #f5f7f6;
    --gray-medium: #e0e7e4;
    --shadow-sm: 0 2px 8px rgba(32, 95, 52, 0.08);
    --shadow-md: 0 4px 24px rgba(32, 95, 52, 0.10);
    --shadow-lg: 0 8px 32px rgba(32, 95, 52, 0.16);
    --radius: 14px;
    --radius-sm: 8px;
    --font-heading: 'Poppins', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Color de marca/línea de producto activa (ver marca.php). Por
       defecto usa el color primario del tema; una página de marca lo
       sobre-escribe en línea desde header.php. */
    --marca-color: var(--primary-color);
    --marca-color-light: var(--primary-light);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--gray-light);
    color: var(--dark-color);
    line-height: 1.6;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Logotipo de texto (respaldo cuando todavía no se ha subido una imagen) */
.logo-text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--primary-color);
    letter-spacing: -0.01em;
}

/* =========================================================================
   TRANSICIÓN DE PÁGINA (modo "páginas con menú")
   En modo landing (una sola página) no se aplica: no tiene sentido con
   navegación por anclas dentro de la misma página.
   ========================================================================= */
body.modo-paginas.page-transition {
    animation: pageFadeIn 0.45s ease both;
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    body.modo-paginas.page-transition { animation: none; }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--primary-color);
    color: #fff;
    padding: 0.6em 1em;
    z-index: 1000;
}
.skip-link:focus { left: 0; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--primary-color);
    text-align: center;
    margin: 2.5rem 0 1rem;
    font-weight: 800;
}
.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    max-width: 680px;
    margin: 0 auto 2rem;
}

.section-divider {
    border: none;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    opacity: 0.5;
}

.btn {
    display: inline-block;
    background: var(--marca-color, var(--primary-color));
    color: #fff;
    padding: 0.65em 1.4em;
    border-radius: var(--radius-sm);
    font-weight: 600;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: var(--shadow-md); }
.btn-outline {
    background: var(--surface-color, #fff);
    color: var(--marca-color, var(--primary-color));
    border: 2px solid var(--marca-color, var(--primary-color));
    box-shadow: none;
}
.btn-secondary {
    background: var(--surface-color, #fff);
    color: var(--marca-color, var(--primary-color));
    border: 2px solid var(--marca-color, var(--primary-color));
    box-shadow: none;
}
.btn-sm { padding: 0.4em 0.9em; font-size: 0.85rem; }
.btn-danger { background: #dc2626; color: #fff; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; filter: none !important; }

/* =========================================================================
   ESTILOS DE BOTÓN POR TEMA (data-btn en <body>, ver includes/temas.php)
   ========================================================================= */
body[data-btn="contorno"] .btn:not(.btn-outline) {
    background: transparent;
    color: var(--marca-color, var(--primary-color));
    border: 2px solid var(--marca-color, var(--primary-color));
    box-shadow: none;
}
body[data-btn="contorno"] .btn:not(.btn-outline):hover { background: var(--marca-color, var(--primary-color)); color: #fff; }

body[data-btn="degradado"] .btn:not(.btn-outline) {
    background: linear-gradient(135deg, var(--marca-color, var(--primary-color)), var(--primary-light));
    border: none;
}

body[data-btn="pill"] .btn { border-radius: 999px; padding-left: 1.6em; padding-right: 1.6em; }
body[data-btn="pill"] .btn-outline { border-radius: 999px; }

/* =========================================================================
   ESTILOS DE TARJETA POR TEMA (data-card en <body>)
   Se aplican a las tarjetas de catálogo: categorías, productos y marcas.
   ========================================================================= */
body[data-card="plana"] .category-card,
body[data-card="plana"] .product-card,
body[data-card="plana"] .marca-card {
    box-shadow: none;
    border: 1px solid var(--gray-medium);
}
body[data-card="plana"] .category-card:hover,
body[data-card="plana"] .product-card:hover,
body[data-card="plana"] .marca-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--marca-color, var(--primary-color));
}

body[data-card="contorno"] .category-card,
body[data-card="contorno"] .product-card,
body[data-card="contorno"] .marca-card {
    background: transparent;
    box-shadow: none;
    border: 2px solid var(--dark-color);
}
body[data-oscuro="1"][data-card="contorno"] .category-card,
body[data-oscuro="1"][data-card="contorno"] .product-card,
body[data-oscuro="1"][data-card="contorno"] .marca-card {
    border-color: var(--gray-medium);
}

body[data-card="oscura"] .category-card,
body[data-card="oscura"] .product-card,
body[data-card="oscura"] .marca-card {
    background: var(--surface-color);
    border: 1px solid var(--gray-medium);
    box-shadow: var(--shadow-md);
}
body[data-card="oscura"] .category-card:hover,
body[data-card="oscura"] .product-card:hover,
body[data-card="oscura"] .marca-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--marca-color, var(--primary-color));
}

.flash-message {
    max-width: 700px;
    margin: 1.2rem auto;
    padding: 1em 1.4em;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-align: center;
}
.flash-exito { background: #e3f8ec; color: #1a4f2a; border: 1px solid #b7e9c8; }
.flash-error { background: #fdeaea; color: #8a1f1f; border: 1px solid #f3bcbc; }
.flash-aviso { background: #fdf3d9; color: #7a5a00; border: 1px solid #f0dfa0; }

.admin-mm-banner {
    background: #7a1f1f;
    color: #fff;
    text-align: center;
    font-size: 0.86rem;
    padding: 0.6em 1em;
}
.admin-mm-banner a { color: #fff; text-decoration: underline; margin-left: 0.6em; font-weight: 700; }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header { background: var(--surface-color, #fff); box-shadow: var(--shadow-sm); }

.site-top-bar {
    background: var(--marca-color, var(--primary-color));
    padding: 0.4em 0;
}
.top-bar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.contact-info a {
    color: #fff;
    font-size: 0.92rem;
    margin-right: 1.4em;
    opacity: 0.95;
}
.contact-info a:hover { opacity: 1; text-decoration: underline; }
.top-bar-social a {
    color: #fff;
    margin-left: 0.8em;
    font-size: 0.95rem;
    opacity: 0.95;
}
.top-bar-social a:hover { opacity: 1; }

.site-main-header { padding: 1rem 0; }
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}
.cart-icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    font-size: 1.15rem;
    flex-shrink: 0;
}
.cart-icon-link:hover { background: color-mix(in srgb, var(--primary-color) 18%, transparent); }
.cart-icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e11d48;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.3em 0.45em;
    border-radius: 999px;
    min-width: 1.4em;
    text-align: center;
}
.logo-eslogan-flex { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.logo-img { height: 72px; width: auto; }
.eslogan-header {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--marca-color, var(--primary-color));
}
.eslogan-header u { text-decoration-color: var(--marca-color-light); }

.site-nav {
    background: var(--marca-color, var(--primary-color));
}
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.main-nav {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.main-nav > li > a {
    display: block;
    color: #fff;
    padding: 0.9em 1.1em;
    font-weight: 600;
    font-size: 0.98rem;
    transition: background 0.2s;
}
.main-nav > li > a:hover { background: rgba(255,255,255,0.15); }
.main-nav > li.has-dropdown { position: relative; }

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--surface-color, #fff);
    min-width: 240px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 0.6em 0;
    z-index: 50;
    max-height: 70vh;
    overflow-y: auto;
}
.dropdown-menu--grid {
    display: none;
    columns: 2;
    column-gap: 0;
    min-width: 480px;
    padding: 0.8em 1em;
}
.main-nav li.has-dropdown.open > .dropdown-menu,
.main-nav li.has-dropdown:hover > .dropdown-menu { display: block; }
.dropdown-menu li a {
    display: block;
    padding: 0.55em 1.2em;
    color: var(--dark-color);
    font-size: 0.94rem;
    border-radius: var(--radius-sm);
}
.dropdown-menu--grid li a { padding: 0.5em 0.6em; break-inside: avoid; }
.dropdown-menu li a:hover { background: var(--gray-light); color: var(--marca-color, var(--primary-color)); }
.dropdown-menu li a i { width: 1.4em; color: var(--marca-color, var(--primary-color)); }

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    padding: 0.8em;
}

/* =========================================================================
   VIDEO DE INTRODUCCIÓN DEL INICIO (opcional, ver Admin -> Datos del sitio)
   ========================================================================= */
.video-hero { padding: 2.6rem 0 1.4rem; background: var(--surface-color); }
.video-hero-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.video-hero-titulo {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 1.2rem;
}
.video-hero-wrap {
    position: relative;
    line-height: 0;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.video-hero-media { width: 100%; max-height: 560px; display: block; object-fit: cover; border: 0; }
/* Modo YouTube: un iframe no soporta object-fit como el <video> propio, así
   que se usa la técnica clásica de "caja de proporción" (16:9) — el padding
   en porcentaje sobre el ancho fija la altura, y el iframe se posiciona
   absoluto para llenarla por completo. */
.video-hero-wrap-youtube { padding-top: 56.25%; }
.video-hero-wrap-youtube .video-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
.video-hero-mute-btn {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.15s ease;
}
.video-hero-mute-btn:hover { background: rgba(0, 0, 0, 0.75); transform: scale(1.06); }
.video-hero-descripcion {
    color: var(--text-muted);
    margin-top: 1.3rem;
    font-size: 1.05rem;
    line-height: 1.6;
}
.video-hero-btn { margin-top: 1.2rem; }

/* =========================================================================
   HERO (portada)
   ========================================================================= */
.hero {
    position: relative;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    color: #fff;
    overflow: hidden;
}
.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.28;
}
.hero-content {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 5rem 1.5rem;
    text-align: center;
}
.hero-content h1 { font-size: 2.4rem; font-weight: 800; margin-bottom: 0.6em; }
.hero-content p { font-size: 1.15rem; opacity: 0.95; margin-bottom: 1.6em; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* Botón de contorno sobre el fondo oscuro del hero: fondo transparente
   explícito. Antes heredaba de .btn-outline el fondo blanco
   (var(--surface-color)) con el texto también en blanco, así que se veía
   como un rectángulo blanco vacío hasta pasarle el puntero por encima. */
.hero-actions .btn-outline,
body[data-btn] .hero-actions .btn-outline { background: transparent; color: #fff; border-color: #fff; }
.hero-actions .btn-outline:hover,
body[data-btn] .hero-actions .btn-outline:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* =========================================================================
   CATEGORÍAS
   ========================================================================= */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0 3rem;
}
.category-card {
    background: var(--surface-color, #fff);
    border-radius: var(--radius);
    padding: 1.8rem 1.2rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
}
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--gray-medium);
}
.category-card .cat-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    font-size: 1.6rem;
}
.category-card h3 { font-size: 1.05rem; margin-bottom: 0.4em; color: var(--dark-color); }
.category-card p { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1rem; min-height: 2.6em; }

/* =========================================================================
   PRODUCTOS
   ========================================================================= */
.products-container, .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.8rem;
    margin: 2rem 0 3rem;
}
.product-card {
    background: var(--surface-color, #fff);
    border-radius: var(--radius);
    padding: 0 0 1.4rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    text-align: center;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: fadeInUp 0.5s ease both;
}
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.product-card:nth-child(2) { animation-delay: 0.05s; }
.product-card:nth-child(3) { animation-delay: 0.1s; }
.product-card:nth-child(4) { animation-delay: 0.15s; }
.product-card:nth-child(5) { animation-delay: 0.2s; }
.product-card:nth-child(6) { animation-delay: 0.25s; }

.product-media {
    position: relative;
    background: linear-gradient(160deg, var(--gray-light), var(--surface-color, #fff));
    padding: 1.4rem 1.2rem 0.6rem;
    overflow: hidden;
}
.product-card img.product-img {
    height: 170px;
    width: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.product-card:hover img.product-img { transform: scale(1.08) rotate(-1deg); }
/* Tarjetas con varias imágenes: un clic en la foto pasa a la siguiente
   (ver "Rotación de imágenes en las tarjetas" en assets/js/script.js). */
.product-media--rota img.product-img { cursor: pointer; transition: transform 0.4s ease, opacity 0.15s ease; }
.product-media--rota img.product-img.product-img--cambiando { opacity: 0; }
.product-media--rota img.product-img:focus-visible { outline: 2px solid var(--marca-color, var(--primary-color)); outline-offset: 4px; }
.product-img-contador {
    position: absolute;
    right: 0.7rem;
    bottom: 0.6rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    pointer-events: none;
}

.product-badges {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    z-index: 2;
}
.product-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.32em 0.65em;
    border-radius: 999px;
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.product-badge--nuevo { background: #2563eb; }
.product-badge--oferta { background: #e11d48; }
.product-badge--destacado { background: linear-gradient(135deg, var(--marca-color, var(--primary-color)), var(--primary-light)); }
.product-badge--pedido { background: #7c3aed; }
.product-badge--agotado { background: #57606a; }

.product-cat-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--marca-color, var(--primary-color));
    background: color-mix(in srgb, var(--marca-color, var(--primary-color)) 12%, transparent);
    padding: 0.25em 0.75em;
    border-radius: 999px;
    margin: 0.9rem auto 0.5rem;
}

.product-body { padding: 0 1.2rem; display: flex; flex-direction: column; flex-grow: 1; }
.product-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4em; }
.product-benefit, .product-description {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
    flex-grow: 1;
}

.product-price-row { display: flex; align-items: baseline; justify-content: center; gap: 0.5em; margin-bottom: 1rem; }
.product-price { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--marca-color, var(--primary-color)); }
.product-price-antes { font-size: 0.88rem; color: var(--text-muted); text-decoration: line-through; }

.product-card .btn { margin: 0 1.2rem 0; }
.product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 1.2rem 0;
    align-items: center;
}
.product-actions .btn, .product-actions .add-to-cart-form { flex: 1 1 auto; margin: 0; }
.add-to-cart-form { display: contents; }
.add-to-cart-btn { width: 100%; }
.category-description { text-align: center; color: var(--text-muted); max-width: 680px; margin: 0 auto 1rem; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   DETALLE DE PRODUCTO
   ========================================================================= */
.product-detail-card {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: flex-start;
    justify-content: center;
    background: var(--surface-color, #fff);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    padding: 2.5rem 2rem;
    max-width: 960px;
    margin: 2.5rem auto;
}
.product-images-lateral {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
}
.gallery-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    border: 2px solid transparent;
    background: var(--surface-color, #fff);
    padding: 4px;
}
.gallery-img.selected { border-color: var(--marca-color, var(--primary-color)); }

.product-image-zoom-container {
    position: relative;
    width: 320px;
    height: 320px;
    background: var(--gray-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
}
.product-image-zoom-container img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(.4,2,.6,1);
}
.product-image-zoom-container.zoomed img { cursor: zoom-out; transform: scale(2.1); }
/* Video corto del producto: miniatura al final de la lista de imágenes y
   reproducción dentro del mismo recuadro principal, solo a pedido. */
.gallery-video-thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    background: var(--marca-color, var(--primary-color));
    color: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font: inherit;
    padding: 0;
}
.gallery-video-thumb:hover { filter: brightness(1.08); }
.gallery-video-thumb.selected { border-color: var(--text-color, #1f2937); }
.gallery-video-play { font-size: 1.2rem; line-height: 1; }
.gallery-video-texto { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.product-image-zoom-container.mostrando-video { cursor: default; background: #000; }
.product-image-zoom-container .product-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.product-image-zoom-container .product-video[hidden],
.product-image-zoom-container img[hidden] { display: none; }

.product-detail-info { flex: 1 1 320px; max-width: 500px; }
.product-detail-contactar { margin-bottom: 1rem; }
.product-detail-info .product-title { font-size: 1.7rem; color: var(--marca-color, var(--primary-color)); margin-bottom: 0.8em; }
.product-detail-info .product-description { font-size: 1.05rem; color: #444; margin-bottom: 1.6rem; }
.product-brand-badge {
    display: inline-block;
    background: var(--marca-color, var(--primary-color));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3em 0.8em;
    border-radius: 999px;
    margin-bottom: 0.8em;
}

/* Ficha técnica + Descripción importante: apiladas, cada una con el MISMO
   ancho que la tarjeta del producto de arriba (.product-detail-card, 960px).
   Antes la tabla tenía un tope de 560px y el contenedor un relleno lateral
   propio, así que la ficha técnica quedaba visiblemente más angosta que
   las demás secciones de la página. */
.specs-important-flex {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 960px;
    margin: 0 auto 3rem;
    padding: 0;
}
.specs-important-flex > .specs-bloque { width: 100%; }
.specs-table { width: 100%; max-width: none; border-collapse: collapse; background: var(--surface-color, #fff); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.specs-table th { text-align: left; font-weight: 700; padding: 0.7em 1em; background: var(--gray-light); width: 42%; }
.specs-table td { padding: 0.7em 1em; }
.specs-table tr:nth-child(even) { background: var(--gray-light); }
.important-desc-box {
    flex: 1 1 300px;
    background: var(--surface-color, #fff);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 1.4em;
    color: #333;
    line-height: 1.7;
}

/* =========================================================================
   MARCAS (Avène / Ducray)
   ========================================================================= */
.marca-header {
    background: linear-gradient(90deg, var(--marca-color) 0%, var(--marca-color-light) 100%);
    color: #fff;
    text-align: center;
    padding: 3rem 1.5rem 2.2rem;
}
.marca-header img { height: 70px; margin: 0 auto 1rem; background: #fff; border-radius: 12px; padding: 0.3em 1em; }
.marca-header h1 { font-size: 2.2rem; margin-bottom: 0.4em; }
.marca-header p { max-width: 640px; margin: 0 auto; opacity: 0.95; }

.marcas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.6rem;
    margin: 2rem 0 3rem;
}
.marca-card {
    background: var(--surface-color, #fff);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.marca-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.marca-card img { height: 56px; margin: 0 auto 1rem; }

/* =========================================================================
   NOSOTROS / ALIADOS
   ========================================================================= */
.nosotros-section { padding: 1rem 0 3rem; }
.nosotros-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2.5rem;
    align-items: center;
}
.nosotros-grid p { margin-bottom: 1em; color: #444; }
/* "Nosotros" sin el recuadro de datos de contacto (que ya está en el pie):
   una sola columna de texto, centrada y con un ancho de lectura cómodo. */
.nosotros-grid--solo-texto { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; text-align: center; }
.nosotros-datos { background: var(--surface-color, #fff); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.6rem; }
.nosotros-datos li { display: flex; gap: 0.7em; align-items: flex-start; margin-bottom: 0.9em; }
.nosotros-datos li i { color: var(--primary-color); margin-top: 0.2em; }

.features-strip {
    background: var(--surface-color, #fff);
    padding: 3rem 0;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.8rem;
}
.feature-tile { text-align: center; padding: 0.5rem; }
.feature-tile i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
}
.feature-tile h4 { font-family: var(--font-heading); font-size: 1rem; margin-bottom: 0.3em; }
.feature-tile p { font-size: 0.86rem; color: var(--text-muted); }

.contacto-preview { padding-bottom: 3rem; }
.contacto-preview-grid {
    max-width: 640px;
    margin: 0 auto;
    background: var(--surface-color, #fff);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    text-align: center;
}
.contacto-preview-grid .contact-info-box { box-shadow: none; padding: 0 0 1.4rem; text-align: left; max-width: 380px; margin: 0 auto; }

/* =========================================================================
   CONTACTO
   ========================================================================= */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin: 2rem 0 3rem;
}
.contact-form-box, .contact-info-box {
    background: var(--surface-color, #fff);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
}
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-weight: 600; margin-bottom: 0.4em; font-size: 0.92rem; }
.form-group input, .form-group textarea {
    width: 100%;
    padding: 0.7em 0.9em;
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-sm);
    font-size: 0.98rem;
    font-family: inherit;
}
.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(32,95,52,0.12);
}
.contact-info-box li { display: flex; gap: 0.8em; margin-bottom: 1.2em; align-items: flex-start; }
.contact-info-box li i { color: var(--primary-color); font-size: 1.2rem; margin-top: 0.15em; }
.contact-info-box iframe { width: 100%; height: 220px; border: 0; border-radius: var(--radius-sm); margin-top: 1rem; }

/* =========================================================================
   FOOTER
   ========================================================================= */
#footer-contact { background: var(--primary-dark); color: #fff; padding: 3rem 0 1.5rem; }
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    justify-content: space-between;
}
.footer-column { flex: 1 1 220px; }
.footer-column h3 { margin-bottom: 1rem; font-size: 1.1rem; }
.footer-eslogan { opacity: 0.85; margin-bottom: 1rem; font-size: 0.92rem; }
.footer-column ul li { margin-bottom: 0.7em; font-size: 0.9rem; opacity: 0.92; }
.footer-column ul li a:hover { text-decoration: underline; }
.social-links-box { display: flex; gap: 0.9rem; }
.social-links-box a {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    transition: background 0.2s, transform 0.2s;
}
.social-links-box a:hover { background: var(--primary-light); transform: scale(1.1); }
.copyright { text-align: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.85rem; opacity: 0.8; }
.copyright .powered-by { font-size: 0.76rem; opacity: 0.75; margin-top: 0.4em; }
/* Descripción para los buscadores (SEO): discreta, letra pequeña, sin negritas. */
.copyright .footer-descripcion-seo {
    font-size: 0.74rem;
    font-weight: 400;
    opacity: 0.7;
    max-width: 760px;
    margin: 0 auto 0.9em;
    line-height: 1.5;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
    .mobile-menu-btn { display: block; }
    .main-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 0.5em 0 1em;
    }
    .main-nav.active { display: flex; }
    .main-nav > li { width: 100%; }
    .dropdown-menu, .dropdown-menu--grid { position: static; box-shadow: none; min-width: 0; columns: 1; display: none; }
    .main-nav li.has-dropdown.open > .dropdown-menu { display: block; }

    .nosotros-grid { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .footer-container, .footer-column, .copyright { text-align: center; }
    .footer-container { flex-direction: column; align-items: center; }
    .social-links-box { justify-content: center; }
    .product-detail-card { flex-direction: column; align-items: center; padding: 1.5rem 1rem; }
    .product-images-lateral { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 600px) {
    .hero-content h1 { font-size: 1.7rem; }
    .header-container { flex-direction: column; text-align: center; }
    .product-image-zoom-container { width: 220px; height: 220px; }
    .video-hero-titulo { font-size: 1.5rem; }
    .video-hero-media { max-height: 320px; }
    .video-hero-mute-btn { width: 38px; height: 38px; font-size: 0.95rem; right: 0.7rem; bottom: 0.7rem; }
}

/* =========================================================================
   TIENDA EN LÍNEA (módulo opcional): carrito, checkout, confirmación
   ========================================================================= */
.carrito-section { padding: 2.5rem 0 4rem; }
.carrito-tabla-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.carrito-tabla { width: 100%; border-collapse: collapse; background: var(--surface-color, #fff); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.carrito-tabla th, .carrito-tabla td { padding: 0.9em 1em; text-align: left; border-bottom: 1px solid var(--gray-light); font-size: 0.92rem; vertical-align: middle; }
.carrito-tabla th { background: var(--gray-light); font-weight: 700; }
.carrito-thumb { width: 52px; height: 52px; object-fit: contain; background: var(--gray-light); border-radius: 8px; }
.carrito-cantidad-form { display: flex; align-items: center; gap: 0.5rem; }
.carrito-cantidad-form input[type=number] { padding: 0.4em 0.5em; border: 1px solid var(--gray-light); border-radius: 6px; }

.carrito-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
}
.carrito-total { font-size: 1.15rem; margin-right: auto; }

.checkout-layout { display: grid; grid-template-columns: 340px 1fr; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } }
.checkout-resumen, .checkout-form-box {
    background: var(--surface-color, #fff);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.6rem;
}
.checkout-items-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.checkout-items-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6em 0; border-bottom: 1px solid var(--gray-light); font-size: 0.9rem; }
.checkout-items-list li em { color: var(--text-muted); font-style: normal; font-size: 0.82rem; }
.checkout-total { text-align: right; font-size: 1.15rem; padding-top: 0.8rem; }
.checkout-desglose { text-align: right; color: var(--text-muted); font-size: 0.88rem; border-top: 1px solid var(--gray-light); padding-top: 0.6rem; }
.checkout-desglose p { display: flex; justify-content: flex-end; gap: 0.8rem; margin: 0.15em 0; }
.checkout-factura-check { margin: 1.2rem 0; font-size: 0.88rem; display: flex; align-items: flex-start; gap: 0.5em; }
.checkout-factura-check input { margin-top: 0.2em; width: auto; }

.checkout-metodos { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1rem; }
.checkout-metodo-card {
    display: block;
    border: 2px solid var(--gray-light);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
    position: relative;
}
.checkout-metodo-card input { position: absolute; opacity: 0; }
.checkout-metodo-card.selected { border-color: var(--marca-color, var(--primary-color)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-color, var(--primary-color)) 15%, transparent); }
.checkout-metodo-card strong { display: block; margin-bottom: 0.4em; }
.checkout-metodo-card > span { font-size: 0.85rem; color: var(--text-muted); }

.pago-manual-instrucciones { font-size: 0.85rem; color: var(--text-muted); }
.pago-manual-instrucciones h4 { display: none; }
.pago-manual-instrucciones ul { list-style: none; padding: 0; margin: 0; }
.pago-manual-instrucciones li { padding: 0.15em 0; }

/* Monto ya convertido a la moneda que realmente cobra una pasarela (ej.
   Pago Móvil en bolívares) cuando difiere de la moneda con la que se
   precia el sitio — módulo multi-moneda, ver includes/tasas_cambio.php. */
.pago-manual-monto-convertido {
    background: color-mix(in srgb, var(--marca-color, var(--primary-color)) 8%, transparent);
    border-radius: var(--radius-sm);
    padding: 0.55em 0.8em;
    margin: 0 0 0.6em;
    font-size: 0.88rem;
    color: var(--text-color, inherit);
}
.pago-manual-monto-convertido strong { font-size: 1.05em; }
.pago-manual-monto-convertido .negocio-hint { display: block; margin-top: 0.15em; }

/* =========================================================================
   NEGOCIOS Y COTIZACIONES (módulo opcional): marketplace de licitaciones B2B
   Portal propio (negocios/), separado del sitio público principal y del
   panel de administración, pero que hereda los colores/tipografías del
   tema activo (ver negocios/includes/negocio_header.php).
   ========================================================================= */
.negocio-topbar {
    background: var(--surface-color, #fff);
    box-shadow: var(--shadow-sm);
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.negocio-brand { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-heading); font-weight: 800; color: var(--marca-color, var(--primary-color)); font-size: 1.1rem; }
.negocio-brand-logo { height: 40px; width: auto; }
.negocio-brand small { display: block; font-weight: 600; font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.negocio-nav { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.negocio-nav a { font-size: 0.92rem; font-weight: 600; color: var(--dark-color); }
.negocio-nav a:hover { color: var(--marca-color, var(--primary-color)); }
.negocio-nav a i { margin-right: 0.35em; }
.negocio-nav-cta {
    background: var(--marca-color, var(--primary-color));
    color: #fff !important;
    padding: 0.5em 1.1em;
    border-radius: var(--radius-sm);
}
.negocio-nav-cta:hover { filter: brightness(1.08); }
button.negocio-nav-cta {
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: normal;
}

/* Modal genérico del módulo Negocios (por ahora, solo lo usa el botón
   "Invitar" del encabezado — ver negocios/includes/negocio_header.php). */
.negocio-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 24, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.negocio-modal {
    background: var(--surface-color, #fff);
    border-radius: var(--radius-md, 12px);
    padding: 1.6rem;
    max-width: 440px;
    width: 100%;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.negocio-modal h3 { margin-top: 0; margin-bottom: 0.5rem; }
.negocio-modal-cerrar {
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--dark-color);
}
.negocio-hint-exito { color: #205f34; font-weight: 600; }
.negocio-hint-error { color: #b3261e; font-weight: 600; }

/* Chip con el negocio/usuario que tiene la sesión iniciada, al principio
   de la barra de navegación — para que siempre sea visible con quién se
   está trabajando (sobre todo si el negocio tiene más de un usuario) y,
   a la vez, sirva de acceso directo a "Mi perfil" (por eso ese enlace ya
   no aparece por separado en el menú). El nombre se muestra completo,
   sin recortar: es la única referencia visible de con qué cuenta se
   está operando. */
.negocio-usuario-chip {
    display: flex;
    align-items: center;
    gap: 0.6em;
    background: var(--gray-light);
    border-radius: var(--radius-sm);
    padding: 0.5em 1em;
    font-weight: 600;
    transition: background-color 0.12s ease;
}
.negocio-usuario-chip:hover { background: var(--gray-medium); }
.negocio-usuario-chip i.fa-circle-user { font-size: 1.3rem; color: var(--marca-color, var(--primary-color)); flex-shrink: 0; }
.negocio-usuario-chip-datos { display: flex; flex-direction: column; line-height: 1.25; }
.negocio-usuario-chip-nombre { white-space: normal; word-break: break-word; }
.negocio-usuario-chip-tipo { font-weight: 400; font-size: 0.76rem; color: var(--text-muted); }

/* Aviso de mensaje(s) nuevo(s) en la fila de una licitación en el panel
   (negocios/panel.php): una "burbuja" de notificación clásica, superpuesta
   sobre el ícono de chat de esa fila (junto al botón "Ver"), igual que un
   contador de mensajes sobre el ícono de una app — el chat ya no tiene su
   propia sección de "Mensajes" en el menú, así que este aviso, más el
   contador en "Panel", son ahora la única forma de enterarse de un
   mensaje nuevo sin entrar a cada licitación una por una. */
.negocio-tabla-acciones { display: flex; align-items: center; gap: 0.5em; white-space: nowrap; }
.negocio-icono-badge-wrap { position: relative; display: inline-flex; }
.negocio-icono-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}
/* Resalte breve de la fila completa cuando el sondeo del panel detecta
   un mensaje que acaba de llegar, para que salte a la vista de
   inmediato y no solo la burbuja del ícono. */
@keyframes negocio-destello-fila {
    0%   { background-color: #fff7e0; }
    100% { background-color: transparent; }
}
tr.negocio-fila-mensaje-nuevo { animation: negocio-destello-fila 4s ease-out; }

.negocio-main { min-height: 60vh; }
.negocio-section { padding: 2.5rem 0 4rem; }
.negocio-container-angosto { max-width: 720px; }
/* Igual que .negocio-container-angosto pero más ancha — para formularios
   con tablas o columnas que necesitan más espacio horizontal (ver
   negocios/licitacion_nueva.php, cuya tabla de ítems ganó una columna de
   contador de caracteres y un ícono de ayuda). */
.negocio-container-media { max-width: 980px; }

/* ---- Ícono de ayuda con globo/tooltip al pasar el mouse (o con foco de
   teclado, para que también funcione sin mouse) ------------------------
   Autocontenido en CSS puro, sin JS: usado por negocios/licitacion_nueva.php
   para explicar brevemente cómo describir un ítem de licitación, y
   reutilizable en cualquier otro formulario que necesite una ayuda breve
   junto a una etiqueta. */
.negocio-ayuda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--primary-color, #2563eb);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    position: relative;
    margin-left: 0.4em;
    vertical-align: middle;
}
.negocio-ayuda:focus { outline: 2px solid var(--primary-color, #2563eb); outline-offset: 2px; }
.negocio-ayuda .negocio-ayuda-globo {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    background: #1f2937;
    color: #fff;
    text-align: left;
    font-weight: 400;
    font-size: 0.82rem;
    line-height: 1.45;
    padding: 0.7em 0.9em;
    border-radius: 8px;
    width: 300px;
    max-width: 78vw;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 30;
    pointer-events: none;
}
.negocio-ayuda .negocio-ayuda-globo::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f2937;
}
.negocio-ayuda:hover .negocio-ayuda-globo,
.negocio-ayuda:focus .negocio-ayuda-globo {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.negocio-contador-caracteres {
    display: block;
    text-align: right;
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 0.2em;
}
.negocio-contador-caracteres.negocio-contador-limite { color: #a33; font-weight: 600; }
.negocio-intro { color: var(--text-muted); margin-bottom: 1.5rem; text-align: center; }
.negocio-hint { color: var(--text-muted); font-size: 0.85rem; }

.negocio-form {
    background: var(--surface-color, #fff);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
}
.negocio-form h3 { margin: 1.4rem 0 0.8rem; font-size: 1.05rem; }
.negocio-form h3:first-child { margin-top: 0; }

.negocio-radio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
.negocio-radio-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .negocio-radio-grid, .negocio-radio-grid-2 { grid-template-columns: 1fr; } }
.negocio-radio-card {
    display: block;
    border: 2px solid var(--gray-light);
    border-radius: var(--radius-sm);
    padding: 1rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
    position: relative;
}
.negocio-radio-card input { position: absolute; opacity: 0; }
.negocio-radio-card.selected { border-color: var(--marca-color, var(--primary-color)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-color, var(--primary-color)) 15%, transparent); }
.negocio-radio-card strong { display: block; margin-bottom: 0.3em; }
.negocio-radio-card strong i { color: var(--marca-color, var(--primary-color)); margin-right: 0.4em; }
.negocio-radio-card span { font-size: 0.85rem; color: var(--text-muted); }

/* Detalle del método de pago elegido en la lista desplegable (ver
   negocios/cargos.php): a diferencia de .negocio-radio-grid, aquí solo se
   muestra UNO a la vez (el resto queda con [hidden] vía JS), así que es
   una sola caja en vez de una grilla de tarjetas. */
.negocio-metodo-detalle {
    border: 2px solid var(--gray-light);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1.4rem;
}
/* El "display: block" de arriba (ya quitado) le ganaba SIEMPRE al estilo
   nativo del navegador para [hidden] (una regla del CSS del sitio tiene
   más prioridad que el estilo por defecto del navegador, sin importar la
   especificidad) — por eso se veían todas las tarjetas de métodos de pago
   a la vez en vez de solo la elegida en el desplegable. Esta regla explícita
   asegura que [hidden] siempre gane, pase lo que pase con el resto del CSS. */
.negocio-metodo-detalle[hidden] {
    display: none;
}
.negocio-metodo-detalle strong { display: block; margin-bottom: 0.3em; }
.negocio-metodo-detalle strong i { color: var(--marca-color, var(--primary-color)); margin-right: 0.4em; }
.negocio-metodo-detalle span { font-size: 0.85rem; color: var(--text-muted); }

.negocio-reto-box {
    background: var(--gray-light);
    border: 1px dashed var(--marca-color, var(--primary-color));
    border-radius: var(--radius-sm);
    padding: 1.2rem;
    margin: 1rem 0 1.4rem;
}
.negocio-reto-codigo { font-family: monospace; font-size: 1.1rem; font-weight: 700; margin: 0.5em 0 1em; word-break: break-all; }
.negocio-reto-nuevo { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; margin-left: 0.8em; text-decoration: underline; }

.negocio-toolbar { margin-bottom: 1.2rem; }
.negocio-toolbar select { padding: 0.6em 0.9em; border: 1px solid var(--gray-medium); border-radius: var(--radius-sm); font-family: inherit; }

.negocio-panel-card {
    background: var(--surface-color, #fff);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.6rem;
    margin-bottom: 1.4rem;
}
.negocio-panel-card h3 { margin-bottom: 0.8rem; font-size: 1.05rem; }
.negocio-panel-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 0.8rem; }
.negocio-panel-card-header h3 { margin-bottom: 0; }

/* Pestañas "Mis licitaciones" / "Mis cotizaciones" en negocios/panel.php:
   solo aparecen cuando la cuenta es cliente y proveedor a la vez, para
   separar ambos listados en vez de apilarlos uno debajo del otro. */
.negocio-panel-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.negocio-panel-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.65em 1.1em;
    border: 1px solid var(--gray-medium);
    border-radius: 999px;
    background: var(--surface-color, #fff);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.negocio-panel-tab:hover { border-color: var(--marca-color, var(--primary-color)); }
.negocio-panel-tab.activo {
    background: var(--marca-color, var(--primary-color));
    border-color: var(--marca-color, var(--primary-color));
    color: #fff;
}
.negocio-panel-tab-contador {
    display: inline-block;
    min-width: 1.4em;
    padding: 0.05em 0.4em;
    border-radius: 999px;
    background: var(--gray-light);
    color: var(--text-color, #222);
    font-size: 0.78rem;
    text-align: center;
}
.negocio-panel-tab.activo .negocio-panel-tab-contador { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* Buscador + filtro por estado sobre cada tabla del panel: solo se
   muestran cuando la cuenta ya acumula suficientes registros como para
   que valga la pena filtrar (ver el conteo en panel.php). */
.negocio-tabla-toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.negocio-tabla-toolbar input[type="search"] {
    flex: 1 1 220px;
    padding: 0.55em 0.9em;
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.88rem;
}
.negocio-tabla-toolbar select {
    padding: 0.55em 0.9em;
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.88rem;
}

/* Variante compacta: mismas reglas de .negocio-tabla pero con menos
   relleno y letra algo más chica, pensada para las tablas del panel
   ("Mis licitaciones" / "Mis cotizaciones") que con el tiempo acumulan
   muchas filas y donde priorizar la densidad ayuda a escanear la lista. */
.negocio-tabla-compacta th, .negocio-tabla-compacta td { padding: 0.55em 0.85em; font-size: 0.84rem; }
.negocio-tabla-fecha { color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Envoltorio con scroll horizontal: en vez de que las columnas se
   aplasten en pantallas angostas (celular, o la columna angosta que le
   queda a la tabla cuando el chat ocupa el costado derecho), la tabla
   conserva un ancho mínimo legible y se desplaza horizontalmente dentro
   de su tarjeta. */
.negocio-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.2rem; padding: 0 0.2rem; }
.negocio-tabla-scroll .negocio-tabla { min-width: 560px; }

.negocio-tabla { width: 100%; border-collapse: separate; border-spacing: 0; }
.negocio-tabla th, .negocio-tabla td { padding: 0.85em 1em; text-align: left; border-bottom: 1px solid var(--gray-light); font-size: 0.9rem; vertical-align: middle; }
.negocio-tabla thead th {
    background: var(--gray-light);
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}
.negocio-tabla thead th:first-child { border-top-left-radius: var(--radius-sm); }
.negocio-tabla thead th:last-child { border-top-right-radius: var(--radius-sm); }
.negocio-tabla tbody tr { transition: background-color 0.12s ease; }
.negocio-tabla tbody tr:hover { background: var(--gray-light); }
.negocio-tabla tbody tr:last-child td { border-bottom: none; }
/* Columnas numéricas (cantidades, precios, montos): alineadas a la
   derecha y con espaciado tabular, para que se puedan comparar de un
   vistazo entre filas — como en cualquier tabla de precios prolija. */
.negocio-tabla th.num, .negocio-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* El monto/total de cada fila es el dato que más le importa a quien lee
   la tabla (el cliente comparando cotizaciones, el proveedor viendo lo
   que le van a cobrar): se resalta con más peso y el color de marca. */
.negocio-tabla-monto { font-weight: 700; font-size: 0.98rem; color: var(--marca-color, var(--primary-color)); }
.negocio-tabla tfoot td { border-bottom: none; border-top: 2px solid var(--gray-medium); padding-top: 0.7em; padding-bottom: 0.7em; }
.negocio-tabla tfoot tr:first-child td { border-top: 2px solid var(--gray-medium); }
.negocio-tabla tfoot tr + tr td { border-top: none; padding-top: 0.3em; }
/* Fila de la cotización ganadora: destacada en el historial del cliente
   (tabla de cotizaciones recibidas) para que salte a la vista sin tener
   que leer la columna de estado de cada fila. */
.negocio-tabla tr.negocio-fila-ganadora { background: #f2fbf6; }
.negocio-tabla tr.negocio-fila-ganadora:hover { background: #e3f8ec; }
.negocio-tabla tr.negocio-fila-ganadora td:first-child { border-left: 3px solid #1a4f2a; }
/* Input de precio unitario dentro de la tabla de cotización del
   proveedor: sin esto quedaba con el ancho mínimo por defecto del
   navegador, muy angosto para un campo de precio. */
.negocio-tabla input.input-precio-unitario { width: 100%; max-width: 140px; padding: 0.45em 0.6em; border: 1px solid var(--gray-medium); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.9rem; }
/* Columna de la propuesta del proveedor: ancho acotado (con salto de
   línea normal, sin recortar texto) para que el resto de columnas —
   monto, plazo, estado, chat — quepan sin necesidad de desplazamiento
   horizontal en la mayoría de anchos de pantalla. */
.negocio-tabla-propuesta { max-width: 220px; white-space: pre-wrap; }
.negocio-tabla-adjunto { display: inline-flex; align-items: center; gap: 0.3em; margin-top: 0.4em; font-size: 0.78rem; white-space: nowrap; }
/* Botón de acción reducido a solo ícono (con title accesible) para no
   competir por espacio horizontal con el resto de la tabla. */
.negocio-btn-icono { padding: 0.5em 0.7em; line-height: 1; }

/* Tarjetas de "Cotizaciones recibidas" (vista del cliente en
   licitacion_detalle.php). Cada cotización es una tarjeta propia en vez
   de una fila de tabla: el resumen (proveedor, monto, plazo, botones)
   siempre visible en una sola línea, y todo el detalle — contacto,
   desglose del monto, ítems, propuesta, estado — dentro de un
   desplegable, para que el resumen no se recargue ni se desalinee. */
.negocio-cotizaciones-lista { display: flex; flex-direction: column; gap: 0.9rem; }
.negocio-cotizacion-card {
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.negocio-cotizacion-card.negocio-cotizacion-card-ganadora { border-color: #1a4f2a; }

.negocio-cotizacion-resumen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    padding: 0.9em 1.1em;
    background: var(--gray-light);
}
.negocio-cotizacion-card-ganadora .negocio-cotizacion-resumen { background: #f2fbf6; }
.negocio-cotizacion-etiqueta {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.15em;
}
.negocio-cotizacion-proveedor { flex: 1 1 180px; min-width: 0; font-weight: 700; font-size: 0.98rem; }
.negocio-cotizacion-plazo { flex: 0 1 auto; }
.negocio-cotizacion-monto { flex: 0 0 auto; text-align: right; }
.negocio-cotizacion-monto-valor { font-size: 1.08rem; white-space: nowrap; }
.negocio-cotizacion-resumen .negocio-tabla-acciones { flex: 0 0 auto; margin-left: auto; }

.negocio-cotizacion-detalle { border-top: 1px solid var(--gray-medium); }
.negocio-cotizacion-detalle > summary {
    cursor: pointer;
    padding: 0.55em 1.1em;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.45em;
    user-select: none;
}
.negocio-cotizacion-detalle > summary::-webkit-details-marker { display: none; }
.negocio-cotizacion-detalle > summary::before {
    content: "▸";
    display: inline-block;
    font-size: 0.72rem;
    transition: transform 0.15s ease;
}
.negocio-cotizacion-detalle[open] > summary::before { transform: rotate(90deg); }
.negocio-cotizacion-detalle > summary:hover { color: var(--marca-color, var(--primary-color)); }

.negocio-cotizacion-detalle-body {
    padding: 0.2rem 1.1em 1.1em;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.negocio-cotizacion-seccion h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.5em;
}
.negocio-cotizacion-moneda-nota {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--gray-light);
    border-radius: var(--radius-sm);
    padding: 0.5em 0.75em;
    margin: 0 0 0.6em;
}
.negocio-cotizacion-moneda-nota strong { color: inherit; }
.negocio-cotizacion-desglose { display: flex; flex-direction: column; gap: 0.35em; font-size: 0.88rem; max-width: 440px; }
.negocio-cotizacion-desglose-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4em 1em; }
.negocio-cotizacion-desglose-fila > span:first-child { flex: 1 1 auto; min-width: 0; }
.negocio-cotizacion-desglose-fila > span:last-child {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.negocio-cotizacion-desglose-fila.negocio-cotizacion-desglose-total {
    font-weight: 700;
    border-top: 1px solid var(--gray-medium);
    padding-top: 0.4em;
    margin-top: 0.15em;
    color: var(--marca-color, var(--primary-color));
}
.negocio-cotizacion-desglose-fila.negocio-cotizacion-desglose-equiv { color: var(--text-muted); font-size: 0.85em; }

.negocio-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.negocio-stat { background: var(--gray-light); border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; }
.negocio-stat .num { font-size: 1.7rem; font-weight: 800; color: var(--primary-color, inherit); line-height: 1.2; }
.negocio-stat .label { color: var(--text-muted); font-size: 0.82rem; margin-top: 0.2rem; }

.negocio-badge {
    display: inline-block;
    padding: 0.25em 0.7em;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    background: var(--gray-medium);
    color: var(--dark-color);
}
.negocio-badge-abierta, .negocio-badge-enviada, .negocio-badge-pendiente { background: #fff7e0; color: #7a5b00; }
.negocio-badge-cerrada, .negocio-badge-ganadora, .negocio-badge-pagado, .negocio-badge-aprobado { background: #e3f8ec; color: #1a4f2a; }
.negocio-badge-cancelada, .negocio-badge-rechazado, .negocio-badge-no_seleccionada, .negocio-badge-retirada, .negocio-badge-anulado, .negocio-badge-suspendido { background: #fdeaea; color: #8a1f1f; }

.negocio-estado-box {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--surface-color, #fff);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.4rem;
    border-left: 5px solid var(--gray-medium);
}
.negocio-estado-box i { font-size: 1.6rem; margin-top: 0.15em; flex-shrink: 0; }
.negocio-estado-box p { margin-top: 0.3em; font-size: 0.9rem; color: var(--text-muted); }
.negocio-estado-pendiente { border-left-color: #f2df9e; }
.negocio-estado-pendiente i { color: #7a5b00; }
.negocio-estado-aprobado { border-left-color: #b7e9c8; }
.negocio-estado-aprobado i { color: #1a4f2a; }
.negocio-estado-rechazado { border-left-color: #f3bcbc; }
.negocio-estado-rechazado i { color: #8a1f1f; }

/* Restatement del monto/moneda "congelados" al adjudicar (cláusula 8 de
   las Políticas de uso) — dentro de un .negocio-estado-box, pero debe
   distinguirse del resto del texto porque es la parte más importante de
   ese aviso, no una nota secundaria. */
.negocio-monto-congelado {
    background: #eef7f0;
    border: 1px solid #b7e9c8;
    border-radius: 6px;
    padding: 0.6em 0.8em;
    color: var(--text-color, #222) !important;
}
.negocio-monto-congelado strong { color: #1a4f2a; }

/* =========================================================================
   PANEL DE BIENVENIDA (resumen de la cuenta, cuenta ya aprobada)
   Tarjeta destacada de negocios/panel.php, justo debajo del cintillo
   informativo: agrupa el estado de la cuenta y sus indicadores propios
   (licitaciones, cotizaciones, mensajes, cargos) en un solo espacio bien
   definido, en vez de varias cajas sueltas apiladas.
   ========================================================================= */
.negocio-resumen-panel {
    background: var(--surface-color, #fff);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 1.6rem 1.8rem;
    margin-bottom: 1.6rem;
    border: 1px solid var(--gray-medium);
    border-top: 4px solid var(--marca-color, var(--primary-color));
}

.negocio-resumen-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}
.negocio-resumen-icono {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #e3f8ec;
    color: #1a4f2a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.negocio-resumen-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.negocio-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.9em;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--gray-light);
    color: var(--dark-color);
}
.negocio-chip-ok { background: #e3f8ec; color: #1a4f2a; }
.negocio-chip-muted { background: transparent; color: var(--text-muted); font-weight: 600; }

.negocio-resumen-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.negocio-resumen-stat {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--gray-light);
    border-radius: var(--radius-sm);
    padding: 1rem 1.15rem;
    color: inherit;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
a.negocio-resumen-stat:hover, a.negocio-resumen-stat:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--marca-color, var(--primary-color));
}
.negocio-resumen-stat > i {
    font-size: 1.4rem;
    color: var(--marca-color, var(--primary-color));
    flex-shrink: 0;
    width: 1.6rem;
    text-align: center;
}
.negocio-resumen-stat .num { font-size: 1.6rem; font-weight: 800; line-height: 1.15; }
.negocio-resumen-stat .label { color: var(--text-muted); font-size: 0.82rem; margin-top: 0.15rem; }
.negocio-resumen-stat-detalle { display: block; font-weight: 700; color: var(--dark-color); margin-top: 0.15rem; }

.negocio-resumen-stat-alerta { background: #fff7e0; }
.negocio-resumen-stat-alerta > i { color: #7a5b00; }
.negocio-resumen-stat-alerta .num { color: #7a5b00; }
a.negocio-resumen-stat-alerta:hover, a.negocio-resumen-stat-alerta:focus-visible { border-color: #7a5b00; }

@media (max-width: 600px) {
    .negocio-resumen-panel { padding: 1.3rem 1.2rem; }
    .negocio-resumen-header { flex-direction: column; align-items: flex-start; }
}

.negocio-footer { text-align: center; padding: 2rem 1.5rem; color: var(--text-muted); font-size: 0.85rem; }
.negocio-footer .powered-by { font-size: 0.76rem; opacity: 0.8; margin-top: 0.3em; }
.negocio-footer a { text-decoration: underline; }

/* Aviso informativo de tarifas de comisión, con tabla de ejemplos (registro) */
.negocio-comisiones-aviso {
    background: var(--gray-light);
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.2rem;
    margin: 1rem 0 1.4rem;
}
.negocio-comisiones-aviso h4 { font-size: 0.92rem; margin-bottom: 0.5em; }
.negocio-comisiones-aviso table { margin-bottom: 0.6em; }

/* Casilla de aceptación de la comisión calculada, justo antes de guardar/
   enviar (nueva licitación y envío de cotización): texto pequeño y
   resaltado para que no pase inadvertido, mismo tono ámbar de aviso que ya
   se usa en otras advertencias del admin. */
.negocio-comision-check {
    background: #fff7e0;
    border: 1px solid #f2df9e;
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin: 1.1rem 0;
    font-size: 0.8rem;
    line-height: 1.5;
}
.negocio-comision-check label { display: flex; align-items: flex-start; gap: 0.55em; font-weight: 400; color: #7a5b00; }
.negocio-comision-check input { width: auto; margin-top: 0.2em; flex-shrink: 0; }
.negocio-comision-check strong { color: #6b4c00; }

/* Casilla de aceptación de políticas de uso (registro y reaceptación) */
.negocio-terminos-check {
    background: var(--gray-light);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    margin: 1rem 0 1.4rem;
    font-size: 0.88rem;
}
.negocio-terminos-check label { display: flex; align-items: flex-start; gap: 0.6em; font-weight: 400; }
.negocio-terminos-check input { width: auto; margin-top: 0.2em; flex-shrink: 0; }
.negocio-terminos-check a { text-decoration: underline; font-weight: 600; }

/* Lista de checkboxes sueltos (categorías que puede proveer, etc.): sin
   esta clase, un checkbox dentro de .form-group hereda el width:100% /
   padding / borde que esa regla aplica a los campos de texto normales
   (ver .form-group input más arriba), y termina viéndose como un
   rectángulo enorme en vez de una casilla — mismo problema que ya se
   había resuelto para .negocio-terminos-check, aquí generalizado. */
label.negocio-check-label { display: flex; align-items: center; gap: 0.6em; font-weight: 400; margin-bottom: 0.5em; cursor: pointer; }
.negocio-check-label input[type="checkbox"] { width: auto; flex-shrink: 0; }
.negocio-terminos-texto { white-space: pre-line; line-height: 1.7; font-size: 0.95rem; }

/* Mensajería directa entre cliente y proveedor */
.negocio-chat-log {
    max-height: 480px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.5rem 0.2rem 1rem;
    margin-bottom: 1rem;
}
.negocio-chat-msg { max-width: 78%; display: flex; flex-direction: column; }
.negocio-chat-msg-mio { align-self: flex-end; align-items: flex-end; }
.negocio-chat-msg-otro { align-self: flex-start; align-items: flex-start; }
.negocio-chat-burbuja {
    padding: 0.65em 1em;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.45;
    word-break: break-word;
}
.negocio-chat-msg-mio .negocio-chat-burbuja { background: var(--marca-color, var(--primary-color)); color: #fff; border-bottom-right-radius: 4px; }
.negocio-chat-msg-otro .negocio-chat-burbuja { background: var(--gray-light); color: var(--dark-color); border-bottom-left-radius: 4px; }
.negocio-chat-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25em; padding: 0 0.3em; }
.negocio-chat-texto { white-space: pre-line; }
.negocio-chat-imagen {
    display: block;
    max-width: 100%;
    max-height: 260px;
    border-radius: 10px;
    cursor: pointer;
}
.negocio-chat-burbuja .negocio-chat-imagen + .negocio-chat-texto { margin-top: 0.5em; }
.negocio-chat-aviso-oculto {
    margin-top: 0.4em;
    padding-top: 0.4em;
    border-top: 1px solid rgba(0,0,0,0.12);
    font-size: 0.78rem;
    font-style: italic;
    opacity: 0.85;
}
.negocio-chat-msg-mio .negocio-chat-aviso-oculto { border-top-color: rgba(255,255,255,0.35); }
/* A diferencia del aviso de contacto oculto (arriba), este SÍ debe llamar
   la atención: es una alerta de una posible mala práctica (cláusula 8 de
   las Políticas de uso), no una nota discreta sobre algo ya ocultado. */
.negocio-chat-aviso-moneda {
    margin-top: 0.4em;
    padding: 0.4em 0.55em;
    background: #fdf3d9;
    border: 1px solid #f0dfa0;
    border-radius: 6px;
    color: #7a5a00;
    font-size: 0.78rem;
}
.negocio-chat-msg-mio .negocio-chat-aviso-moneda { color: #5c4400; }

/* Caja de mensaje: bloque propio, ya no una fila apretada junto al botón. */
.negocio-chat-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--gray-light);
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-sm);
    padding: 0.7rem;
}
.negocio-chat-form textarea {
    width: 100%;
    min-height: 4.5em;
    resize: vertical;
    padding: 0.7em 0.9em;
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.98rem;
    background: #fff;
    box-sizing: border-box;
}
.negocio-chat-form textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(32,95,52,0.12); }
.negocio-chat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
/* El label de "Adjuntar imagen" es un botón real (antes le faltaba la
   clase base .btn, así que se veía como un texto suelto con borde en
   vez de un botón); .negocio-chat-btn-imagen solo ajusta el layout
   interno del ícono + texto sobre esa base. */
.negocio-chat-btn-imagen { display: inline-flex; align-items: center; gap: 0.4em; cursor: pointer; margin: 0; }
.negocio-chat-btn-enviar { margin-left: auto; }
.negocio-chat-preview { display: flex; align-items: center; gap: 0.7rem; background: var(--gray-light); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; }
.negocio-chat-preview-miniatura { position: relative; flex-shrink: 0; line-height: 0; }
.negocio-chat-preview-miniatura img { max-height: 64px; max-width: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gray-medium); }
.negocio-chat-preview-quitar {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    line-height: 20px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #dc2626;
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.negocio-chat-preview-quitar:hover { filter: brightness(1.1); }

@media (max-width: 500px) {
    .negocio-chat-toolbar { flex-wrap: wrap; }
    .negocio-chat-btn-imagen, .negocio-chat-btn-enviar { flex: 1 1 auto; justify-content: center; }
    .negocio-chat-btn-enviar { margin-left: 0; }
}

/* Detalle de licitación: chat embebido al costado, para ver los datos de
   la licitación/cotización y conversar con el proveedor o el cliente al
   mismo tiempo, sin salir de la página. */
.negocio-detalle-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
}
.negocio-detalle-principal { flex: 1 1 64%; min-width: 0; }
.negocio-detalle-chat { flex: 1 1 350px; max-width: 400px; }
.negocio-chat-panel-sticky {
    position: sticky;
    top: 1rem;
}
.negocio-chat-panel-sticky .negocio-chat-log { max-height: 420px; }
.negocio-chat-selector { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.negocio-chat-selector .btn { width: 100%; text-align: left; }
.btn-activo { background: var(--marca-color, var(--primary-color)); color: #fff; border-color: transparent; }

@media (max-width: 900px) {
    .negocio-detalle-layout { flex-direction: column; }
    .negocio-detalle-chat { max-width: none; width: 100%; }
    .negocio-chat-panel-sticky { position: static; }
}

@media (max-width: 700px) {
    .negocio-topbar { flex-direction: column; align-items: flex-start; }
    .negocio-panel-card-header { flex-direction: column; align-items: flex-start; }
    .negocio-cotizacion-resumen { align-items: flex-start; }
    .negocio-cotizacion-monto { text-align: left; }
    .negocio-cotizacion-resumen .negocio-tabla-acciones { margin-left: 0; width: 100%; }
}

.product-detail-cart-form { margin-bottom: 1.2rem; }
.product-detail-cart-row { display: flex; align-items: center; gap: 0.8rem; }

/* =========================================================================
   CINTILLO INFORMATIVO DEL MÓDULO DE NEGOCIOS ("bolsa de valores")
   Franja angosta y rotativa debajo del encabezado de negocios/, solo
   dentro de ese módulo (ver negocio_header.php). Usa los colores de marca
   del tema activo (--marca-color / --primary-dark) para que combine con
   cualquiera de los temas del sitio, con un par de acentos propios (verde
   / rojo de tendencia) que no existen en el resto de la hoja de estilos
   pública porque nada más los necesita.
   ========================================================================= */
.negocio-ticker {
    background: linear-gradient(90deg, var(--primary-dark, #16472a) 0%, var(--marca-color, var(--primary-color)) 55%, var(--primary-dark, #16472a) 100%);
    background-size: 200% 100%;
    animation: negocioTickerFondo 12s ease-in-out infinite;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    position: relative;
    z-index: 5;
}
@keyframes negocioTickerFondo {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.negocio-ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: negocioTickerScroll linear infinite;
    animation-duration: 40s; /* Respaldo antes de que el JS calcule la duración real. */
}
@keyframes negocioTickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.negocio-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.55em 1.3em;
    font-size: 0.86rem;
    font-weight: 600;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    letter-spacing: 0.01em;
}
.negocio-ticker-item i {
    font-size: 0.92em;
    opacity: 0.9;
}
.negocio-ticker-item strong { font-weight: 800; }

/* Un acento de color propio por tipo de dato, para que el vistazo rápido
   distinga "esto es dinero" de "esto es actividad" sin tener que leer. */
.negocio-ticker-item-reloj i { color: #ffe58a; }
.negocio-ticker-item-tasa i { color: #8ad6ff; }
.negocio-ticker-item-licitaciones i { color: #ffb677; }
.negocio-ticker-item-cotizaciones i { color: #b9f0c8; }
.negocio-ticker-item-categoria i { color: #ffc2e8; }

/* Tendencia de tasas de cambio: mismo criterio semántico que el resto del
   panel de administración (verde = sube/bien, rojo = baja/atención), pero
   definido aquí porque la hoja pública no traía estos tonos todavía. */
.negocio-ticker-sube { color: #7CFFB2; font-weight: 800; }
.negocio-ticker-baja { color: #FF9A9A; font-weight: 800; }
.negocio-ticker-igual { color: #E4E9E6; font-weight: 800; }

/* Pausar el desplazamiento al pasar el mouse o al enfocar con teclado,
   para poder leer con calma sin que el texto se siga moviendo. */
.negocio-ticker:hover .negocio-ticker-track,
.negocio-ticker:focus-within .negocio-ticker-track {
    animation-play-state: paused;
}

/* Modo estático (prefers-reduced-motion, activado por JS): sin animación
   de fondo ni de desplazamiento; el cintillo se recorre a mano. */
.negocio-ticker.negocio-ticker-estatico { animation: none; background-position: 0 0; }
.negocio-ticker.negocio-ticker-estatico .negocio-ticker-track {
    animation: none;
    overflow-x: auto;
    max-width: 100%;
}
/* La pista trae los elementos duplicados (para el efecto de vuelta continua
   de la animación); en modo estático esa segunda copia solo estorbaría al
   desplazarse a mano, así que se oculta. */
.negocio-ticker.negocio-ticker-estatico .negocio-ticker-item[aria-hidden="true"] {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    .negocio-ticker { animation: none; }
}

@media (max-width: 600px) {
    .negocio-ticker-item { padding: 0.5em 1em; font-size: 0.78rem; }
}
.product-detail-cart-row input[type=number] { padding: 0.55em 0.7em; border: 1px solid var(--gray-light); border-radius: var(--radius-sm); }