/**
 * Dnjoc Portal — estilos.
 *
 * Diseñados para heredar del tema activo: no se fija tipografía ni color de
 * texto, solo lo imprescindible para el modal, las tarjetas y los formularios.
 * El color de acento sale de --dnjoc-marca (ver ajustes del plugin).
 */

:root {
    --dnjoc-marca: #0f766e;
    --dnjoc-marca-solido: #0f766e;
    --dnjoc-radio: 14px;
    --dnjoc-modal-ancho: 440px;
    --dnjoc-ancho-min: 270px;
    --dnjoc-imagen-alto: 170px;
    --dnjoc-ficha-ancho: 360px;
    --dnjoc-sombra: 0.28;

    /* Fondo y texto de las superficies propias (modal, ficha de la tarjeta).
       Se toman del tema: primero la paleta global de WordPress, después la de
       Astra, y como último recurso un par claro. El JavaScript los sustituye
       por los colores reales medidos en el <body>, así que funcionan igual con
       un tema claro que con uno oscuro. */
    --dnjoc-fondo: var(--wp--preset--color--base, var(--ast-global-color-4, #ffffff));
    --dnjoc-texto: var(--wp--preset--color--contrast, var(--ast-global-color-3, #1e293b));

    /* Respaldos planos por si el navegador no soporta color-mix. */
    --dnjoc-borde: rgba(128, 128, 128, 0.32);
    --dnjoc-suave: rgba(128, 128, 128, 0.1);

    /* Claro u oscuro según el tema, no según el sistema operativo.
       El JavaScript lo ajusta al medir el fondo real. */
    --dnjoc-esquema: light;
}

/* Los controles que dibuja el propio navegador —el ojo de "ver contraseña",
   las casillas, el desplegable de países, las barras de desplazamiento, el
   relleno automático— se pintan según el esquema de color declarado, no según
   nuestro CSS. Sin esto, en un tema oscuro salen con los colores del modo
   claro del sistema y se pierden contra el fondo. */
.dnjoc-modal__caja,
.dnjoc-acceso,
.dnjoc-registro-inline,
.dnjoc-cotizar,
.dnjoc-tarjeta__ficha,
.dnjoc-panel {
    color-scheme: var(--dnjoc-esquema);
    accent-color: var(--dnjoc-marca);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
    :root {
        --dnjoc-borde: color-mix(in srgb, var(--dnjoc-texto) 22%, transparent);
        --dnjoc-suave: color-mix(in srgb, var(--dnjoc-texto) 7%, transparent);
    }
}

/* ---------- Utilidades ---------- */

/* El aspecto de los botones y de los campos se genera en PHP, porque depende
   de si eliges heredarlo del tema o usar el del plugin.
   Ver dnjoc_css_dinamico() en includes/textos.php.
   Aquí solo queda lo estructural, que no debe cambiar nunca. */

.dnjoc-boton--ancho {
    display: block;
    width: 100%;
}

.dnjoc-boton[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* Aire alrededor de los bloques del portal.

   Las páginas del plugin suelen tener el atajo como único contenido, y muchos
   temas no dejan margen entre la cabecera y el primer elemento: el bloque
   quedaba pegado al menú. Este margen se puede ajustar desde el CSS propio
   redefiniendo --dnjoc-aire. */
:root {
    --dnjoc-aire: 2rem;
}

.dnjoc-aviso,
.dnjoc-error,
.dnjoc-acceso,
.dnjoc-cotizar,
.dnjoc-registro-inline {
    margin-block: var(--dnjoc-aire);
}

/* Dentro de una caja propia el aire ya lo pone la caja. */
.dnjoc-modal .dnjoc-aviso,
.dnjoc-modal .dnjoc-error,
.dnjoc-panel .dnjoc-aviso,
.dnjoc-panel .dnjoc-error,
.dnjoc-cotizar .dnjoc-aviso,
.dnjoc-cotizar .dnjoc-error,
.dnjoc-registro-inline .dnjoc-error {
    margin-block: 1rem;
}

.dnjoc-aviso,
.dnjoc-error {
    padding: 1em 1.2em;
    border-radius: 10px;
    background: var(--dnjoc-suave);
}

.dnjoc-error {
    background: #fee2e2;
    color: #991b1b;
}

.dnjoc-errores:empty {
    display: none;
}

/* Los mensajes se retiran solos pasado el tiempo configurado: se apagan
   con una transición corta para que el cambio no dé un salto. */
.dnjoc-errores,
.dnjoc-error {
    transition: opacity 0.35s ease;
}

.dnjoc-errores.se-va,
.dnjoc-error.se-va {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dnjoc-errores,
    .dnjoc-error {
        transition: none;
    }
}

/* Campo trampa anti-robot: fuera de la pantalla, nunca oculto con display:none
   (hay robots que se saltan lo que está oculto así). */
.dnjoc-trampa {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Visible solo para lectores de pantalla (no dependemos de la clase del tema). */
.dnjoc-oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.dnjoc-errores {
    margin: 0.75em 0 0;
    color: #dc2626;
    font-size: 0.9em;
}

.dnjoc-ayuda {
    margin-top: 1em;
    font-size: 0.85em;
    opacity: 0.75;
    text-align: center;
}

.dnjoc-codigo-inline {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.05em;
}

/* ---------- Pestañas del panel de acceso ---------- */

.dnjoc-pestanas {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    padding: 0.25rem;
    border-radius: 10px;
    background: var(--dnjoc-suave);
}

.dnjoc-pestana {
    flex: 1;
    padding: 0.55em 0.6em;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.88em;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    opacity: 0.65;
}

.dnjoc-pestana[aria-selected="true"] {
    background: var(--dnjoc-marca);
    color: #fff;
    opacity: 1;
}

.dnjoc-enlace.dnjoc-enlace,
.dnjoc-volver.dnjoc-volver {
    display: inline;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--dnjoc-marca);
    font: inherit;
    line-height: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: underline;
    cursor: pointer;
}

/* Muchos temas pintan un fondo de botón al pasar el cursor por cualquier
   <button>. Estos dos no son botones: son enlaces con forma de texto. */
.dnjoc-enlace.dnjoc-enlace:hover,
.dnjoc-enlace.dnjoc-enlace:focus,
.dnjoc-enlace.dnjoc-enlace:focus-visible,
.dnjoc-enlace.dnjoc-enlace:active,
.dnjoc-volver.dnjoc-volver:hover,
.dnjoc-volver.dnjoc-volver:focus,
.dnjoc-volver.dnjoc-volver:focus-visible,
.dnjoc-volver.dnjoc-volver:active {
    background: none;
    box-shadow: none;
    border: 0;
    color: var(--dnjoc-marca);
    text-decoration: underline;
    filter: none;
    transform: none;
}

.dnjoc-enlace.dnjoc-enlace:hover,
.dnjoc-volver.dnjoc-volver:hover {
    opacity: 0.75;
}

.dnjoc-enlace.dnjoc-enlace:focus-visible,
.dnjoc-volver.dnjoc-volver:focus-visible {
    outline: 2px solid var(--dnjoc-marca);
    outline-offset: 2px;
}

/* El de volver es una acción secundaria: hereda el color del texto, no el de marca. */
.dnjoc-volver.dnjoc-volver,
.dnjoc-volver.dnjoc-volver:hover,
.dnjoc-volver.dnjoc-volver:focus-visible {
    color: inherit;
    font-size: 0.9em;
    text-decoration: none;
}

.dnjoc-volver.dnjoc-volver:hover {
    text-decoration: underline;
}

.dnjoc-campo-codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.05em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dnjoc-errores--ok {
    color: #166534 !important;
}

.dnjoc-nota {
    margin: 0.5em 0 1em;
    font-size: 0.85em;
    opacity: 0.75;
}

/* ---------- Formularios ---------- */

.dnjoc-form__titulo {
    margin: 0 0 0.25em;
}

.dnjoc-form__intro {
    margin: 0 0 1em;
    font-size: 0.9em;
    opacity: 0.75;
}

.dnjoc-campo {
    margin: 0 0 0.9em;
}

.dnjoc-campo label {
    display: block;
    margin-bottom: 0.3em;
    font-size: 0.9em;
    font-weight: 600;
}

.dnjoc-form input:focus-visible,
.dnjoc-form select:focus-visible,
.dnjoc-form textarea:focus-visible {
    outline: 2px solid var(--dnjoc-marca);
    outline-offset: 1px;
}

.dnjoc-form input[aria-invalid="true"] {
    border-color: #dc2626;
}

.dnjoc-form input[type="file"] {
    box-sizing: border-box;
    width: 100%;
    padding: 0.55em 0.75em;
    border: 1px dashed var(--dnjoc-borde);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.9em;
    cursor: pointer;
}

.dnjoc-ayuda-campo {
    display: block;
    margin-top: 0.35em;
    font-size: 0.8em;
    opacity: 0.7;
}

/* ---------- Modal ---------- */

body.dnjoc-sin-scroll {
    overflow: hidden;
}

.dnjoc-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.72);
    overflow-y: auto;
}

.dnjoc-modal__caja {
    width: 100%;
    max-width: var(--dnjoc-modal-ancho, 440px);
    max-height: 92vh;
    padding: 1.75rem;
    border-radius: var(--dnjoc-radio);
    background: var(--dnjoc-fondo);
    color: var(--dnjoc-texto);
    box-shadow: 0 24px 60px rgba(0, 0, 0, calc(var(--dnjoc-sombra, 0.28) * 1.25));
    overflow-y: auto;
}

/* El modal y la ficha son superficies propias: su texto debe contrastar con su
   fondo, no con el del tema. Muchos temas (Astra entre ellos) fijan el color de
   títulos, etiquetas y campos con reglas propias, así que hay que ganarles en
   especificidad o el texto se vuelve invisible sobre nuestra caja. */
.dnjoc-modal .dnjoc-modal__caja :is(h1, h2, h3, h4, p, label, span, strong, b, dt, dd, li, legend),
.dnjoc-tarjeta .dnjoc-tarjeta__ficha :is(h1, h2, h3, h4, p, label, span, strong, b, dt, dd, li) {
    color: var(--dnjoc-texto);
}

.dnjoc-modal .dnjoc-modal__caja :is(input, select, textarea, option) {
    color: var(--dnjoc-texto);
    background-color: var(--dnjoc-fondo);
}

.dnjoc-modal .dnjoc-modal__caja a:not(.dnjoc-boton) {
    color: var(--dnjoc-marca);
}

.dnjoc-modal .dnjoc-modal__caja .dnjoc-codigo {
    color: var(--dnjoc-marca);
}

.dnjoc-modal .dnjoc-modal__caja .dnjoc-errores {
    color: #dc2626;
}

.dnjoc-modal .dnjoc-modal__caja .dnjoc-errores--ok {
    color: #16a34a !important;
}

.dnjoc-modal .dnjoc-modal__caja .dnjoc-pestana[aria-selected="true"] {
    color: #fff;
}

.dnjoc-modal .dnjoc-modal__caja .dnjoc-enlace {
    color: var(--dnjoc-marca);
}

.dnjoc-exito {
    text-align: center;
}

.dnjoc-codigo {
    margin: 0.5em 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--dnjoc-marca);
}

.dnjoc-espera {
    opacity: 0.75;
}

/* ---------- Entornos ---------- */

.dnjoc-entornos {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-block: var(--dnjoc-aire);
}

.dnjoc-entorno {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 1.5rem;
    border: 1px solid var(--dnjoc-borde);
    border-radius: var(--dnjoc-radio);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.dnjoc-entorno:hover,
.dnjoc-entorno:focus-visible {
    border-color: var(--dnjoc-marca);
    transform: translateY(-2px);
    color: inherit;
}

/* ---------- Catálogo ---------- */

.dnjoc-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--dnjoc-ancho-min, 270px), 1fr));
    margin-block: var(--dnjoc-aire);
}

/* Número de columnas fijado con el atributo columnas="3" del atajo. */
.dnjoc-grid--fijo {
    grid-template-columns: repeat(var(--dnjoc-columnas, 3), 1fr);
}

@media (max-width: 880px) {
    .dnjoc-grid--fijo {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .dnjoc-grid--fijo {
        grid-template-columns: 1fr;
    }
}

/* La tarjeta se ajusta a su contenido: sin altura mínima, sin huecos. */
.dnjoc-tarjeta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dnjoc-borde);
    border-radius: var(--dnjoc-radio);
    background: var(--dnjoc-fondo);
    transition: border-color 0.15s ease;
}

/* Al abrirse la ficha, esta tarjeta pasa por encima de todo lo demás.

   No basta con ganar a las tarjetas vecinas: la ficha tiene que quedar también
   por encima de la cabecera del tema, que suele ir fija y con su propio
   z-index (Astra usa 99). Como la tarjeta crea contexto de apilamiento, es
   ella —no la ficha— la que debe subir. Si tu tema usara un valor aún mayor,
   se sube desde el CSS propio redefiniendo --dnjoc-ficha-z. */
.dnjoc-tarjeta:hover,
.dnjoc-tarjeta:focus-within,
.dnjoc-tarjeta.esta-abierta {
    z-index: var(--dnjoc-ficha-z, 100000);
    border-color: var(--dnjoc-marca);
}

.dnjoc-tarjeta:focus-visible {
    outline: 2px solid var(--dnjoc-marca);
    outline-offset: 2px;
}

.dnjoc-tarjeta__imagen img,
.dnjoc-carrusel__lamina img {
    display: block;
    width: 100%;
    height: var(--dnjoc-imagen-alto, 170px);
    object-fit: cover;
    border-radius: calc(var(--dnjoc-radio) - 1px) calc(var(--dnjoc-radio) - 1px) 0 0;
}

.dnjoc-tarjeta__frente {
    padding: 1rem;
}

.dnjoc-tarjeta__extracto {
    margin: 0.5em 0 0;
    font-size: 0.9em;
    opacity: 0.85;
}

/* ---------- Carrusel de imágenes ---------- */

.dnjoc-carrusel {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--dnjoc-radio) - 1px) calc(var(--dnjoc-radio) - 1px) 0 0;
}

.dnjoc-carrusel__lamina {
    display: none;
}

.dnjoc-carrusel__lamina.esta-visible {
    display: block;
}

/* Las flechas solo aparecen cuando el cursor está sobre la tarjeta. */
.dnjoc-carrusel__flecha {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.dnjoc-carrusel__flecha--atras {
    left: 0.5rem;
}

.dnjoc-carrusel__flecha--adelante {
    right: 0.5rem;
}

.dnjoc-tarjeta:hover .dnjoc-carrusel__flecha,
.dnjoc-tarjeta:focus-within .dnjoc-carrusel__flecha,
.dnjoc-carrusel__flecha:focus-visible {
    opacity: 1;
}

.dnjoc-carrusel__puntos {
    position: absolute;
    right: 0;
    bottom: 0.5rem;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 0.35rem;
}

.dnjoc-carrusel__punto {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}

.dnjoc-carrusel__punto.esta-activo {
    background: #fff;
}

.dnjoc-tarjeta__ficha-imagen img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
}

.dnjoc-tarjeta__titulo {
    margin: 0 0 0.25em;
}

.dnjoc-tarjeta__precio {
    margin: 0;
    font-size: 0.9em;
    opacity: 0.7;
}

/* ---------- Ficha flotante ---------- */

.dnjoc-tarjeta__ficha {
    /* La posición real la calcula JavaScript (top/left en píxeles) buscando el
       lado con espacio. Estos valores son el respaldo si JavaScript no corre. */
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    box-sizing: border-box;
    min-width: 100%;
    width: max-content;
    max-width: min(var(--dnjoc-ficha-ancho, 360px), calc(100vw - 2rem));
    padding: 1rem 1.1rem;
    border: 1px solid var(--dnjoc-borde);
    border-radius: 12px;
    background: var(--dnjoc-fondo);
    color: var(--dnjoc-texto);
    box-shadow: 0 18px 44px rgba(0, 0, 0, var(--dnjoc-sombra, 0.28));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* La ficha entra desde el lado por el que se abre. */
.dnjoc-tarjeta__ficha--arriba {
    transform: translateY(-6px);
}

.dnjoc-tarjeta__ficha--derecha {
    transform: translateX(6px);
}

.dnjoc-tarjeta__ficha--izquierda {
    transform: translateX(-6px);
}

.dnjoc-tarjeta:hover .dnjoc-tarjeta__ficha,
.dnjoc-tarjeta:focus-within .dnjoc-tarjeta__ficha,
.dnjoc-tarjeta.esta-abierta .dnjoc-tarjeta__ficha {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

/* Cuando no cabe entera, JavaScript limita su altura y aparece esta barra. */
.dnjoc-tarjeta__ficha {
    scrollbar-width: thin;
}

.dnjoc-tarjeta__ficha-titulo {
    margin: 0;
}

.dnjoc-tarjeta__acciones {
    display: flex;
    gap: 0.5rem;
}

.dnjoc-tarjeta__acciones .dnjoc-boton {
    flex: 1;
}

/* Botón "Ver detalles": solo aparece donde no hay cursor. */
.dnjoc-tarjeta__detalles {
    display: none;
    margin-top: 0.75em;
    padding: 0.45em 0.9em;
    border: 1px solid var(--dnjoc-borde);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
}

/* ---------- Pantallas sin cursor: acordeón en lugar de flotante ---------- */

@media (hover: none) {
    .dnjoc-tarjeta__detalles {
        display: inline-block;
    }

    .dnjoc-tarjeta__ficha {
        position: static;
        display: none;
        /* Anula lo que hubiera calculado JavaScript antes de reducir la ventana. */
        top: auto !important;
        left: auto !important;
        max-height: none !important;
        overflow: visible !important;
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0 1rem 1rem;
        border: 0;
        border-top: 1px solid var(--dnjoc-borde);
        border-radius: 0;
        padding: 0.9rem 0 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    /* Sin cursor no hay hover real: manda el botón. */
    .dnjoc-tarjeta:hover .dnjoc-tarjeta__ficha,
    .dnjoc-tarjeta:focus-within .dnjoc-tarjeta__ficha {
        display: none;
    }

    .dnjoc-tarjeta.esta-abierta .dnjoc-tarjeta__ficha {
        display: flex;
        transform: none;
    }

    /* El título ya está arriba: no lo repetimos. */
    .dnjoc-tarjeta__ficha-titulo {
        display: none;
    }

    .dnjoc-tarjeta:hover,
    .dnjoc-tarjeta:focus-within {
        border-color: var(--dnjoc-borde);
    }

    .dnjoc-tarjeta.esta-abierta {
        border-color: var(--dnjoc-marca);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dnjoc-tarjeta__ficha,
    .dnjoc-tarjeta,
    .dnjoc-entorno,
    .dnjoc-boton {
        transition: none;
    }
}

/* ---------- Listas de datos ---------- */

.dnjoc-datos {
    margin: 0;
    font-size: 0.9em;
}

.dnjoc-datos > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25em 0;
    border-bottom: 1px solid var(--dnjoc-borde);
}

.dnjoc-datos dt {
    opacity: 0.65;
}

.dnjoc-datos dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.dnjoc-datos--amplio {
    font-size: 1em;
    max-width: 560px;
}

.dnjoc-detalle {
    margin-top: 2rem;
}

.dnjoc-detalle__cta {
    margin-top: 2rem;
}

/* ---------- Documentos y galería ---------- */

.dnjoc-archivos {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    max-width: 720px;
}

.dnjoc-archivo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--dnjoc-borde);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.dnjoc-archivo:hover,
.dnjoc-archivo:focus-visible {
    border-color: var(--dnjoc-marca);
    color: inherit;
}

.dnjoc-archivo__icono {
    flex: none;
    padding: 0.3em 0.5em;
    border-radius: 6px;
    background: #d63638;
    color: #fff;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.dnjoc-archivo__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.dnjoc-archivo__texto small {
    opacity: 0.6;
    font-size: 0.8em;
}

.dnjoc-galeria {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    margin-bottom: 1.5rem;
}

.dnjoc-galeria img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
}

/* ---------- Cotizar / acceso ---------- */

.dnjoc-cotizar {
    max-width: 560px;
}

.dnjoc-cotizar__resumen {
    margin-bottom: 1.5rem;
    padding: 1rem 1.2rem;
    border-radius: 10px;
    background: var(--dnjoc-suave);
}

.dnjoc-cotizar__resumen p {
    margin: 0 0 0.5em;
}

.dnjoc-cotizar__resumen p:last-child {
    margin-bottom: 0;
}

.dnjoc-cotizar__resumen span {
    display: block;
    font-size: 0.8em;
    opacity: 0.65;
}

.dnjoc-exito-mensaje {
    padding: 1em 1.2em;
    border-radius: 10px;
    background: #f0fdf4;
    color: #166534;
}

.dnjoc-acceso {
    max-width: 380px;
}

.dnjoc-acceso--centrado {
    margin-inline: auto;
}

/* Restos del formulario que dibujaba WordPress: se dejan por si un tema hijo
   sigue usando wp_login_form() en su propia plantilla. */
.dnjoc-acceso .login-username,
.dnjoc-acceso .login-password {
    margin-bottom: 0.9em;
}

.dnjoc-acceso input:focus-visible {
    outline: 2px solid var(--dnjoc-marca);
    outline-offset: 1px;
}

/* Botón de "ver contraseña" cuando lo añade WordPress o el tema (el que dibuja
   el navegador por su cuenta se resuelve con color-scheme, más arriba). */
.dnjoc-acceso .wp-pwd {
    position: relative;
}

.dnjoc-acceso .wp-hide-pw,
.dnjoc-acceso button[class*="hide-pw"] {
    position: absolute;
    top: 50%;
    right: 0.35em;
    transform: translateY(-50%);
    padding: 0.35em;
    border: 0;
    background: transparent;
    color: var(--dnjoc-texto);
    opacity: 0.65;
    cursor: pointer;
}

.dnjoc-acceso .wp-hide-pw:hover,
.dnjoc-acceso .wp-hide-pw:focus-visible,
.dnjoc-acceso button[class*="hide-pw"]:hover {
    opacity: 1;
    color: var(--dnjoc-marca);
}

.dnjoc-acceso .wp-pwd input[type="password"],
.dnjoc-acceso .wp-pwd input[type="text"] {
    padding-right: 2.4em;
}

/* "Recuérdame": la casilla y su texto en una sola línea, alineadas. */
.dnjoc-acceso .login-remember {
    margin-bottom: 1em;
}

.dnjoc-acceso .login-remember label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

.dnjoc-acceso .login-remember input[type="checkbox"] {
    width: 1.05em;
    height: 1.05em;
    margin: 0;
    flex: none;
}

.dnjoc-acceso .dnjoc-ayuda {
    text-align: left;
}

.dnjoc-acceso .dnjoc-ayuda a {
    color: var(--dnjoc-marca);
}

.dnjoc-paginacion {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 2rem 0;
}

.dnjoc-paginacion .page-numbers {
    padding: 0.4em 0.8em;
    border: 1px solid var(--dnjoc-borde);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
}

.dnjoc-paginacion .page-numbers.current {
    background: var(--dnjoc-marca);
    border-color: var(--dnjoc-marca);
    color: #fff;
}

.dnjoc-campo-casilla {
    display: flex;
    align-items: flex-start;
    gap: 0.55em;
    font-weight: 400 !important;
    cursor: pointer;
}

.dnjoc-campo-casilla input[type="checkbox"] {
    width: auto;
    margin-top: 0.2em;
    flex: none;
}

/* ---------- Acceso del personal ---------- */

/* Un panel oculto se oculta, pase lo que pase.
   Sin esto, cualquier regla de «display» —del tema o nuestra— gana al atributo
   [hidden] del navegador y el formulario aparece debajo de los otros dos. */
.dnjoc-panel [hidden],
.dnjoc-registro-inline [hidden] {
    display: none !important;
}

.dnjoc-form--personal:not([hidden]) {
    display: flex;
    flex-direction: column;
}

/* Se llega por el enlace del pie, no por una pestaña: este botón es la vuelta. */
.dnjoc-volver {
    align-self: flex-start;
    margin: 0 0 0.5rem;
}

.dnjoc-form--acceso .dnjoc-campo-casilla {
    font-weight: 400;
}