/* ============================================
   theme/default/css/style.css
   Estilos base. Personalizable por sitio/tema.
   TODO lo que se personaliza por cliente/tema vive
   en las variables de :root de aqui abajo. No hace
   falta tocar nada mas adelante en el archivo para
   cambiar colores.
   BOTONES: --btn-bg acepta tanto un color solido
   (ej: #333333) como un degradado (ej:
   linear-gradient(135deg, #ff6a00, #ee0979)).
   Ambos funcionan igual, es la misma propiedad CSS
   "background" por debajo.
   ============================================ */
:root {
    /* Paleta general del sitio */
    --color-primary: #E91E63;
    --color-primary-hover: #ff2d9e;
    --color-bg: #0d0d0d;
    --color-card-bg: #161616;
    --color-border: #333333;
    --color-text: #ffffff;
    --color-text-muted: #b3b3b3;
    /* Campos de formulario (inputs) - degradado blanco a rosa clarito,
       con letras negras (--input-bg acepta degradado igual que --btn-bg,
       es la misma propiedad "background" por debajo) */
    --input-bg: linear-gradient(135deg, #ffffff, #fbdce8);
    --input-text: #1a1a1a;
    --input-border: #f3c2d6;
    --input-border-focus: #E91E63;
    --input-placeholder: #8a7a80;
    /* Botones: cambia --btn-bg por un color solido o un
       linear-gradient(...) — ambos casos funcionan igual */
    --btn-bg: linear-gradient(90deg, #EC2267, #FC3C7D);
    --btn-bg-hover: linear-gradient(90deg, #ff3d7d, #ff5c93);
    --btn-shadow: 0 6px 20px rgba(236, 34, 103, 0.45);
    --btn-border: 1px solid rgba(255, 255, 255, 0.35);
    --btn-text: #ffffff;
    --btn-radius: 50px;
    /* Mensajes */
    --color-error-bg: #fdecea;
    --color-error-border: #f5b7b1;
    --color-error-text: #c0392b;
    --color-success-bg: #eafaf1;
    --color-success-border: #a9dfbf;
    --color-success-text: #1e8449;
    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --radius: 8px;
}
* {
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    font-family: var(--font-base);
    background: var(--color-bg);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
/* ---------- Header ---------- */
.site-header {
    background: var(--color-card-bg);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.site-header-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-logo {
    font-weight: bold;
    font-size: 20px;
    color: var(--color-text);
    text-decoration: none;
}
.site-logo img {
    max-height: 40px;
}
.site-nav {
    position: absolute;
    top: 90%;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(50, 14, 28, 0.6);
    padding: 8px 10px;
    border-radius: 50px;
    backdrop-filter: blur(3px);
}
.site-nav-align-right {
    right: 24px;
    left: auto;
    transform: translateY(-50%);
}
.site-nav-align-left {
    left: 24px;
    right: auto;
    transform: translateY(-50%);
}
.site-nav-align-center {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
}
.nx-nav-item-has-sub {
    position: relative;
    display: inline-flex;
}
.nx-nav-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--btn-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 6px 0;
    min-width: 160px;
    z-index: 50;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    margin-top: 0;
    overflow: hidden;
}
.nx-nav-item-has-sub:hover .nx-nav-submenu {
    display: block;
}
.nx-nav-submenu a {
    display: block;
    padding: 8px 14px;
    white-space: nowrap;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0;
}
.nx-nav-submenu a:hover {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    color: #ffffff;
    transform: none;
}
.site-nav a,
.site-nav .nx-nav-parent-label {
    margin-left: 0;
    padding: 8px 18px;
    border-radius: 50px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.site-nav a:hover,
.site-nav .nx-nav-parent-label:hover {
    background: var(--btn-bg);
    color: #000000;
    transform: scale(1.05);
}
/* ---------- Main / cards ---------- */
.site-main {
    max-width: 480px;
    margin: 48px auto;
    padding: 0 20px;
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px;
}
/* Texto justificado en cualquier parrafo/lista dentro de una tarjeta -
   aplica tanto a bloques normales como a lo que se cargue por Markdown
   (marked.js genera <p>/<li> normales, que ya heredan esto solos).
   hyphens:auto es OBLIGATORIO aqui - sin el, el justificado en columnas
   angostas deja huecos blancos feos entre palabras. */
.card p,
.card li {
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
/* El <hr> que genera Markdown (---) rompe la lectura como raya visual -
   se deja nomas como espacio en blanco entre secciones, sin linea. */
.card hr {
    border: none;
    height: 24px;
    margin: 0;
}
.text-center {
    text-align: center;
}
h1, h2, h3 {
    margin-top: 0;
    color: var(--color-primary);
}
a {
    color: var(--color-primary);
}
a:hover {
    color: var(--color-primary-hover);
}
/* ---------- Formularios ---------- */
label {
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    color: var(--color-text);
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    font-size: 14px;
    font-family: var(--font-base);
}
input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder);
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--input-border-focus);
}
/* ---------- Botones ---------- */
/* Personalizar SOLO cambiando --btn-bg / --btn-bg-hover / --btn-text /
   --btn-shadow / --btn-border arriba en :root. --btn-bg y --btn-bg-hover
   aceptan color solido o degradado, es la misma propiedad "background". */
button,
.btn,
input[type="submit"] {
    padding: 10px 22px;
    border: var(--btn-border);
    border-radius: var(--btn-radius);
    background: var(--btn-bg);
    color: var(--btn-text);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-base);
    margin-top: 6px;
    box-shadow: var(--btn-shadow);
    transform: scale(1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease;
}
button:hover,
.btn:hover,
input[type="submit"]:hover {
    background: var(--btn-bg-hover);
    opacity: 0.95;
    transform: scale(1.05);
}
.btn {
    display: inline-block;
    margin: 6px 6px 0 6px;
}
/* ---------- Mensajes ---------- */
.errors {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
    padding: 14px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
}
.errors ul {
    margin: 0;
    padding-left: 18px;
}
.success {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    color: var(--color-success-text);
    padding: 14px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
}
.success a {
    color: var(--color-success-text);
    font-weight: 600;
}
/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--color-border);
    margin-top: 60px;
    flex-shrink: 0;
}
.site-footer-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
}
/* ---------- NXCaptcha ---------- */
.nxc-wrap {
    margin-bottom: 4px;
}
/* ==================================================
   Layouts (paginas/articulos) - 3 columnas
   ================================================== */
/* .site-main viene fijo a 480px (perfecto para login/registro). Las
   paginas que necesitan mas espacio (como los layouts de 3 columnas) le
   pasan 'main_class' => 'site-main-wide' al header.tpl explicitamente -
   nada de adivinar por CSS que contenido trae adentro. 90% del ancho REAL
   del dispositivo (no un px fijo) - responsive de verdad en cualquier
   pantalla: celular, tablet, monitor grande, lo que sea. */
.site-main-wide {
    max-width: 90% !important;
    width: 90% !important;
    margin-top: 0 !important;
}
.site-header-inner-wide {
    max-width: 100% !important;
    width: 100% !important;
}
/* Envuelve la tabla de 3 columnas. Aqui vive el gap horizontal real de la
   pagina (izquierda/derecha) - a proposito FUERA de .card, para que la
   regla ".card > *" (mas abajo) nunca lo pueda pisar sin querer. El
   contenido debe llenar la mayor parte de la pantalla - los extremos
   son solo un respiro chico, no un tercio del ancho. */
.nx-layout-outer {
    max-width: 1800px;
    margin: 24px auto;
    padding: 0 8px;
    box-sizing: border-box;
}
/* ==================================================
   Breadcrumb - Inicio > Categoria > ... > Titulo. Estilo "flechas
   interconectadas" (punta triangular a la derecha, muesca triangular a
   la izquierda que encaja con la punta de la anterior - como una K al
   reves). El envoltorio de una categoria con submenu (.nx-breadcrumb-
   item-has-sub) NUNCA lleva clip-path/overflow el mismo - eso recortaria
   tambien al submenu que vive adentro. La forma vive en el <a> de
   adentro; el envoltorio solo da posicion.
   ================================================== */
.nx-breadcrumb {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    background: none;
    border: none;
    padding: 0;
    margin: 16px 0;
}
.nx-breadcrumb-sep {
    display: none;
}
.nx-breadcrumb > a,
.nx-breadcrumb > span:not(.nx-breadcrumb-item-has-sub),
.nx-breadcrumb-item-has-sub > a {
    display: inline-flex;
    align-items: center;
    padding: 10px 28px 10px 30px;
    background: var(--btn-bg);
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
}
.nx-breadcrumb > a:hover {
    filter: brightness(1.12);
    color: #ffffff;
    text-decoration: none;
}
/* El primero de la cadena (Inicio) no recibe nada de otro lado - lado
   izquierdo plano, sin muesca. */
.nx-breadcrumb > a:first-child,
.nx-breadcrumb-item-has-sub:first-child > a {
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
    padding-left: 18px;
}
/* Todos menos el primero se traslapan 16px para que la muesca de uno
   encaje exacto con la punta del anterior, sin dejar hueco entre ellos. */
.nx-breadcrumb > *:not(:first-child) {
    margin-left: -16px;
}
/* El tramo actual (el ultimo) - mismo rosa, pero en degradado vertical
   en vez de plano, para distinguirlo sin dejar de verse parte de la
   misma cadena de flechas. */
.nx-breadcrumb > a:last-child,
.nx-breadcrumb > span:last-child:not(.nx-breadcrumb-item-has-sub),
.nx-breadcrumb-item-has-sub:last-child > a {
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-hover));
}
/* El envoltorio de una categoria con subcategorias - a proposito SIN
   clip-path/overflow aqui (eso recortaria al submenu de adentro). Solo
   da la posicion relativa para que el submenu se pueda anclar. */
.nx-breadcrumb-item-has-sub {
    position: relative;
    display: inline-flex;
}
.nx-breadcrumb-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--btn-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 6px 0;
    min-width: 160px;
    z-index: 50;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    margin-top: 0;
}
.nx-breadcrumb-item-has-sub:hover .nx-breadcrumb-submenu {
    display: block;
}
.nx-breadcrumb-submenu a {
    display: block;
    padding: 8px 14px;
    white-space: nowrap;
    font-size: 13px;
    color: #ffffff;
    text-decoration: none;
}
.nx-breadcrumb-submenu a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}
/* Un renglon dentro de un submenu - si esa hija a su vez tiene hijas
   propias (nietas de la categoria original), se le agrega su propio
   flyout hacia la DERECHA (no hacia abajo, para no encimarse con el
   resto del submenu). Con el limite de 3 niveles, esto nunca necesita
   otro nivel mas de anidacion. */
.nx-breadcrumb-submenu-item {
    position: relative;
}
.nx-breadcrumb-submenu-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    white-space: nowrap;
    font-size: 13px;
    color: #ffffff;
    text-decoration: none;
}
.nx-breadcrumb-submenu-item > a:hover {
    background: rgba(255, 255, 255, 0.15);
}
.nx-breadcrumb-flyout-arrow {
    opacity: 0.8;
    font-size: 11px;
}
.nx-breadcrumb-submenu-flyout {
    display: none;
    position: absolute;
    top: -6px;
    left: 100%;
    margin-left: 4px;
    background: var(--btn-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 6px 0;
    width: max-content;
    min-width: 160px;
    z-index: 60;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.nx-breadcrumb-submenu-item-has-sub:hover > .nx-breadcrumb-submenu-flyout {
    display: block;
}
.nx-layout-table {
    width: 100%;
    border-collapse: collapse;
}
.nx-layout-side-cell {
    width: 180px;
    vertical-align: top;
}
.nx-layout-side-cell-left {
    padding-right: 16px;
}
.nx-layout-side-cell-right {
    padding-left: 16px;
}
.nx-layout-content-cell {
    vertical-align: top;
}
.nx-layout-content-cell img,
.nx-layout-side-cell img {
    max-width: 100%;
    height: auto;
}
/* El .card comun trae padding:32px, pensado para un formulario de login de
   480px de ancho. En una columna de 180px eso se come mas de un tercio
   del espacio util - aqui se reduce SOLO para las cards que viven dentro
   del layout, sin tocar el padding del login/registro. */
.nx-layout-side-cell .card,
.nx-layout-content-cell .card {
    padding: 10px;
}
/* El bloque de contenido puede venir de CUALQUIER editor (Summernote, o lo
   que sea que se use despues) y puede traer su propio ancho, margen o
   padding fijo pensado para vivir suelto en una pagina ancha - eso choca
   con el espacio real del contenedor donde lo pongamos. Esto OBLIGA a que
   el bloque siempre llene el 100% real que le demos y respete el padding
   de la .card (no el suyo propio), sin importar que etiqueta o que
   medidas traiga escritas por dentro. */
.card > * {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
@media (max-width: 768px) {
    /* En celular las columnas laterales NO se despliegan (ni se apilan
       abajo) - se ocultan por completo. Solo se ve el contenido central. */
    .nx-layout-side-cell {
        display: none !important;
    }
    .nx-layout-table,
    .nx-layout-table tbody,
    .nx-layout-table tr,
    .nx-layout-content-cell {
        display: block !important;
        width: 100% !important;
    }
    /* En celular el gap grande de escritorio no tiene sentido - un margen
       chico basta y deja mas espacio real para el contenido. */
    .nx-layout-outer {
        padding: 0 16px;
    }
}
/* ==================================================
   "Sin tarjeta" - para landing pages con diseño propio (ej. fondo negro
   de punta a punta, como TopQueens) que no deben verse envueltas en una
   tarjeta blanca con borde.
   ================================================== */
.nx-layout-plain {
    width: 100%;
}
/* Cuando la pagina completa es "sin tarjeta", tambien se libera .site-main
   de su tope del 90% - la landing va de verdad de punta a punta, y cada
   seccion de adentro maneja su propio ancho/centrado como haya sido
   diseñada. */
.site-main-full-bleed {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* ---------- Buscador (header publico) ---------- */
.nx-search-outer {
    max-width: 1800px;
    margin: 24px auto;
    padding: 0 8px;
    box-sizing: border-box;
}
.nx-search-grid {
    display: grid;
    grid-template-columns: var(--nx-search-left-w, 0px) 1fr var(--nx-search-right-w, 0px);
}
.nx-search-form-col {
    grid-column: 2;
    min-width: 0;
}
.nx-search-label {
    display: block;
    margin: 0 0 6px 0;
    text-align: left;
    color: var(--color-text);
}
.nx-search-form {
    display: flex;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.nx-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    box-sizing: border-box;
    padding: 0 16px;
    border: none;
    background: var(--input-bg);
    color: var(--input-text);
    font-family: inherit;
    font-size: 14px;
}
.nx-search-btn {
    flex: 0 0 56px;
    height: 48px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--btn-bg);
    color: var(--btn-text, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Widget flotante de WhatsApp ---------- */
.nxwhats-bubble {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 9998;
    font-family: var(--font-base);
}
.nxwhats-closed {
    display: flex;
    align-items: center;
    background: var(--color-primary);
    border: 3px solid var(--color-primary);
    border-radius: 50px;
    padding: 6px 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.2s, opacity 0.3s;
}
.nxwhats-closed:hover {
    transform: scale(1.05);
    background: var(--color-primary);
}
.nxwhats-logo-circle {
    width: 35px;
    height: 35px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-primary);
    overflow: hidden;
    margin-right: 8px;
}
.nxwhats-logo-circle img {
    width: 70%;
    object-fit: contain;
}
.nxwhats-text {
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
}
.nxwhats-window {
    position: fixed;
    bottom: 145px;
    right: 20px;
    width: 320px;
    height: 420px;
    background: rgba(50, 14, 28, 0.15);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 4px solid var(--color-primary);
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
}
.nxwhats-window.open {
    display: flex;
}
@media (max-width: 768px) {
    .nxwhats-window {
        width: 90vw;
        right: 5vw;
    }
}
.nxwhats-header {
    background: var(--color-primary);
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--color-primary);
}
.nxwhats-header-left {
    display: flex;
    align-items: center;
}
.nxwhats-header-logo-circle {
    width: 32px;
    height: 32px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-primary);
    margin-right: 10px;
    overflow: hidden;
}
.nxwhats-header-logo-circle img {
    width: 65%;
    object-fit: contain;
}
.nxwhats-brand-name {
    color: #ffffff;
    font-weight: 800;
    font-size: 15px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.nxwhats-close-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}
.nxwhats-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nxwhats-message {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
}
/* Burbuja del BOT con el verde que pediste */
.nxwhats-message.bot {
    background: #eda6ff;
    color: #1a1a1a;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}
.nxwhats-message.bot.offline {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
    font-size: 13px;
}
/* Burbuja del USUARIO - se mantiene igual */
.nxwhats-message.user {
    background: var(--color-primary);
    color: #ffffff;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}
.nxwhats-input-area {
    padding: 10px;
    background: var(--color-primary);
    border-top: 2px solid var(--color-primary);
}
.nxwhats-input-wrapper {
    display: flex;
    background: #ffffff;
    border-radius: 25px;
    padding: 5px 5px 5px 15px;
    border: 2px solid var(--color-primary);
    align-items: center;
}
.nxwhats-input-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #1a1a1a;
    background: #ffffff;
    margin: 0;
    padding: 0;
}
.nxwhats-send-btn {
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    width: 35px;
    height: 35px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.nxwhats-send-btn svg {
    display: block;
}
.nxwhats-send-btn:hover {
    background: var(--color-primary-hover);
}
.nxwhats-messages::-webkit-scrollbar {
    width: 6px;
}
.nxwhats-messages::-webkit-scrollbar-thumb {
    background: var(--color-primary-hover);
    border-radius: 10px;
}

/* ===== Calificacion con estrellas (nx-rating-*) ===== */

.nx-rating-widget {
	margin-top: 24px;
}

.nx-rating-average {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.nx-rating-stars-display {
	position: relative;
	display: inline-block;
	font-size: 22px;
	line-height: 1;
}

.nx-rating-stars-bg,
.nx-rating-stars-fill {
	white-space: nowrap;
	letter-spacing: 2px;
}

.nx-rating-stars-bg {
	color: var(--color-border);
}

.nx-rating-stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: #ffc107;
}

.nx-rating-summary-text {
	color: var(--color-text-muted);
	font-size: 14px;
}

.nx-rating-prompt {
	color: var(--color-primary);
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 8px 0;
}

.nx-rating-vote-stars {
	display: flex;
	gap: 4px;
}

.nx-rating-vote-star {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--color-border);
	cursor: pointer;
	transition: color 0.15s ease;
}

.nx-rating-vote-star.nx-rating-hovered {
	color: #ffc107;
}

.nx-rating-thanks,
.nx-rating-already {
	color: var(--color-text-muted);
	font-size: 14px;
	margin-top: 8px;
}

.nx-rating-hp-wrap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ===== Comentarios (nx-comment*) ===== */

:root {
	--comment-root-bg: #d3274f;
	--comment-reply-bg: #8f2829;
	--comment-text: #fafafa;
}

.nx-comments-widget {
	margin-top: 24px;
}

.nx-comments-heading {
	margin: 0 0 16px 0;
}

.nx-comments-empty,
.nx-comments-login-msg {
	color: var(--color-text-muted);
	font-size: 14px;
}

.nx-comment-bubble {
	max-width: 640px;
	padding: 12px 14px;
	border-radius: 10px;
	margin-bottom: 10px;
	color: var(--comment-text);
}

.nx-comment-root {
	background: var(--comment-root-bg);
}

.nx-comment-replies {
	margin-left: 32px;
}

.nx-comment-reply {
	background: var(--comment-reply-bg);
}

.nx-comment-header {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 6px;
}

.nx-comment-username {
	font-weight: 700;
	color: var(--comment-text);
	text-decoration: none;
}

.nx-comment-username:hover {
	text-decoration: underline;
}

.nx-comment-date {
	font-size: 12px;
	opacity: 0.65;
}

.nx-comment-content {
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.nx-comment-footer {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 8px;
}

.nx-comment-vote-like,
.nx-comment-vote-dislike,
.nx-comment-reply-btn {
	background: rgba(0,0,0,0.06);
	border: none;
	border-radius: 14px;
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
	color: var(--comment-text);
}

.nx-comment-vote-active {
	background: rgba(0,0,0,0.18);
	font-weight: 700;
}

.nx-comment-vote-readonly {
	font-size: 12px;
	opacity: 0.75;
}

.nx-comment-reply-form-box {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(0,0,0,0.1);
}

.nx-comment-new-box {
	margin-top: 20px;
}

.nx-comment-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
	margin-bottom: 8px;
}

.nx-comment-form-actions {
	text-align: right;
}

.nx-comment-status-msg {
	font-size: 13px;
	margin-top: 8px;
}

.nx-comment-hp-wrap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ===== Favoritos (nx-favorite-*) ===== */

.nx-favorite-widget {
	margin-bottom: 16px;
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

.nx-favorite-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: none;
	box-shadow: none;
	padding: 4px 0;
	cursor: pointer;
	font-family: inherit;
	color: var(--color-text);
}

.nx-favorite-btn:hover {
	background: none;
	transform: none;
	opacity: 0.85;
}

.nx-favorite-icon {
	width: 48px;
	height: 48px;
	object-fit: contain;
	display: block;
}

.nx-favorite-label {
	font-size: 14px;
	font-weight: 600;
}