/* Ficha de oficio: una persona debe poder decidir y pedir disponibilidad sin
   recorrer una torre de tarjetas ni descifrar colores de canales. */
/* El <style> de la propia pagina pinta "html, body" con var(--bg-color), y ese
   --bg-color sigue siendo el #121212 de la paleta anterior. Al body lo tapa la
   regla de abajo; al html no lo tapaba nadie, y asomaba una franja del gris
   viejo al final de la ficha. Esta hoja se enlaza despues de ese <style>, asi
   que basta con darle al lienzo la misma superficie que al contenido. */
html { background: #ffffff; }
:root[data-theme="dark"] { background: #0b1533; }

body.detalle-page {
    --detail-ink: #0b1533;
    --detail-muted: #566078;
    --detail-line: #dbe2ee;
    --detail-ice: #f3f7fc;
    --detail-action: #1463e6;
    --detail-action-hover: #0e50c8;
    --detail-success: #087a56;
    --detail-surface: #ffffff;
    --detail-link: #0a56d4;
    --detail-gold-surface: #fff4d6;
    --detail-gold-border: #aa791c;
    --detail-gold-ink: #352b18;
    background: #ffffff;
    color: var(--detail-ink);
    padding-bottom: 48px;
    -webkit-font-smoothing: antialiased;
    font-family: "Onest", sans-serif;
}

body.detalle-page .detalle-layout {
    width: min(1280px, 100%);
    grid-template-columns: minmax(0, 1.45fr) minmax(336px, .82fr);
    gap: 32px;
    padding: 32px 28px 56px;
    overflow: visible;
}

body.detalle-page .col-principal,
body.detalle-page .col-secundaria { gap: 28px; }

body.detalle-page .col-secundaria { top: 84px; align-self: start; }

body.detalle-page .detalle-hero-card,
body.detalle-page .resenas-card,
body.detalle-page .detalle-sidebar-card {
    border: 1px solid var(--detail-line);
    border-radius: 15px;
    background: var(--detail-surface);
    box-shadow: none;
}

body.detalle-page .detalle-hero-card { overflow: hidden; padding: 0; }

body.detalle-page .detalle-hero-card .galeria-wrapper {
    aspect-ratio: 4 / 3;
    margin: 0;
    background: var(--detail-ice);
}

body.detalle-page .galeria {
    height: 100%;
    gap: 0;
    border-radius: 0;
    scroll-snap-type: x mandatory;
}

body.detalle-page .detalle-galeria-foto {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
    scroll-snap-align: center;
}

body.detalle-page .detalle-hero-card .galeria img {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    object-fit: cover;
    outline: 1px solid rgba(11, 21, 51, .09);
    outline-offset: -1px;
}

body.detalle-page .btn-flecha {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(11, 21, 51, .14);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--detail-ink);
    box-shadow: 0 4px 14px rgba(11, 21, 51, .12);
    backdrop-filter: none;
}

body.detalle-page .btn-flecha:hover { background: #fff; color: var(--detail-action); transform: scale(1.04); }
body.detalle-page .btn-flecha:focus-visible,
body.detalle-page a:focus-visible,
body.detalle-page button:focus-visible,
body.detalle-page input:focus-visible,
body.detalle-page textarea:focus-visible,
body.detalle-page summary:focus-visible { outline: 3px solid rgba(20, 99, 230, .35); outline-offset: 3px; }

body.detalle-page .detalle-body { padding: 28px; gap: 14px; }
body.detalle-page .detalle-meta-top { align-items: center; }
body.detalle-page .detalle-titulo { color: var(--detail-ink); font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }

body.detalle-page .detalle-ubicacion-pill,
body.detalle-page .detalle-visitas-pill,
body.detalle-page .detalle-rating-pill {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--detail-muted);
    font-size: .82rem;
    font-weight: 650;
}

body.detalle-page .detalle-ubicacion-pill::before { content: "Zona · "; color: var(--detail-muted); }
body.detalle-page .detalle-rating-pill { color: #805b06; }

body.detalle-page .detalle-precio-row {
    padding: 16px 18px;
    border: 1px solid var(--detail-line);
    border-radius: 14px;
    background: var(--detail-ice);
}

body.detalle-page .detalle-precio-label { color: var(--detail-muted); opacity: 1; }
/* Mismo precio en tinta que el catálogo; el tamaño sostiene su jerarquía. */
:root body.detalle-page .precio-servicio {
    color: var(--detail-ink) !important;
    font-size: 2.35rem;
    font-weight: 720;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
body.detalle-page .detalle-desc-bloque { max-width: 68ch; }
body.detalle-page .detalle-desc-titulo { color: var(--detail-ink); font-size: 1rem; }
body.detalle-page .detalle-descripcion { color: var(--detail-muted); line-height: 1.65; text-wrap: pretty; }
body.detalle-page .detalle-muted { color: var(--detail-muted); opacity: 1; }

body.detalle-page .resenas-card,
body.detalle-page .detalle-sidebar-card { padding: 24px; }

body.detalle-page .detalle-sidebar-head { margin-bottom: 16px; }
body.detalle-page .detalle-sidebar-head h2 { color: var(--detail-ink); margin: 0; font-size: 1.35rem; letter-spacing: -.03em; }
body.detalle-page .detalle-vendedor-wrap { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--detail-line); }
body.detalle-page .detalle-vendedor-card img { border-color: var(--detail-action); }
body.detalle-page .detalle-vendedor-info a { color: var(--detail-ink); }
body.detalle-page .detalle-vendedor-info a:hover { color: var(--detail-action); text-decoration-thickness: 1.5px; }
body.detalle-page .detalle-contacto-linea { color: var(--detail-muted); margin: 0 0 16px; font-size: .84rem; }
body.detalle-page .detalle-contacto-valor { color: var(--detail-ink); }
body.detalle-page .detalle-contacto-protegido { color: var(--detail-muted); font-style: normal; }

body.detalle-page .contenedor-acciones { gap: 12px; }
body.detalle-page .paquete-contacto {
    padding: 18px;
    margin: 0;
    border: 1px solid var(--detail-line);
    border-radius: 14px;
    background: var(--detail-ice);
}
body.detalle-page .paquete-contacto h4 { margin: 0 0 6px; color: var(--detail-ink); font-size: 1rem; letter-spacing: -.015em; }
body.detalle-page .paquete-contacto > p { color: var(--detail-muted); margin: 0 0 14px; font-size: .82rem; line-height: 1.48; opacity: 1; }
body.detalle-page .paquete-contacto label { color: var(--detail-ink); font-size: .78rem; margin-bottom: 6px; }
body.detalle-page .detalle-input,
body.detalle-page .detalle-textarea {
    min-height: 44px;
    margin-bottom: 10px;
    border: 1px solid #c5d0e0;
    border-radius: 11px;
    background: #fff;
    color: var(--detail-ink);
    box-shadow: none;
}
body.detalle-page .detalle-textarea { min-height: 82px; }
body.detalle-page .detalle-input::placeholder,
body.detalle-page .detalle-textarea::placeholder { color: #65718a; opacity: 1; }
body.detalle-page .detalle-input:focus,
body.detalle-page .detalle-textarea:focus { border-color: var(--detail-action); box-shadow: 0 0 0 3px rgba(20, 99, 230, .14); }

body.detalle-page .btn-minimalista {
    min-height: 48px;
    border-radius: 11px !important;
    font-size: .92rem;
    font-weight: 750 !important;
    text-decoration: none;
    transition: background-color 160ms cubic-bezier(.23,1,.32,1), border-color 160ms cubic-bezier(.23,1,.32,1), color 160ms cubic-bezier(.23,1,.32,1), transform 120ms cubic-bezier(.23,1,.32,1), box-shadow 160ms cubic-bezier(.23,1,.32,1);
}
body.detalle-page .btn-minimalista:active { transform: scale(.98); }
body.detalle-page .btn-whatsapp {
    border: 1px solid var(--detail-action);
    background: var(--detail-action);
    color: #fff;
    box-shadow: 0 6px 14px rgba(20, 99, 230, .18);
}
body.detalle-page .btn-whatsapp:hover { background: var(--detail-action-hover); border-color: var(--detail-action-hover); filter: none; box-shadow: 0 8px 18px rgba(20, 99, 230, .24); }
body.detalle-page .detalle-contacto-directo { gap: 8px; }
body.detalle-page .btn-telegram { border: 1px solid var(--detail-line); background: #fff; color: var(--detail-ink); box-shadow: none; }
body.detalle-page .btn-telegram:hover { background: var(--detail-ice); color: var(--detail-action); filter: none; box-shadow: none; }

body.detalle-page .detalle-acciones-menores { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; padding-top: 16px; border-top-color: var(--detail-line); }
body.detalle-page .detalle-acciones-menores .btn-minimalista {
    min-height: 44px;
    padding-inline: 10px;
    background: #fff;
    border-color: var(--detail-line);
    color: var(--detail-ink);
}
body.detalle-page .detalle-acciones-menores .btn-minimalista:hover { background: var(--detail-ice); border-color: #b9c8dc; color: var(--detail-action); }
body.detalle-page .detalle-acciones-menores svg,
body.detalle-page .btn-comparar-detalle svg,
body.detalle-page .btn-profesional-confianza svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.detalle-page .btn-chat-interno { box-shadow: none; }
body.detalle-page .btn-compartir svg { color: inherit; }
body.detalle-page .btn-comparar-detalle,
body.detalle-page .btn-profesional-confianza { grid-column: 1 / -1; }
body.detalle-page .btn-comparar-detalle { color: var(--detail-ink); border-color: var(--detail-line); background: #fff; }
body.detalle-page .btn-comparar-detalle small { color: var(--detail-muted); }
body.detalle-page .btn-comparar-detalle[aria-pressed="true"] { background: var(--detail-ice); border-color: var(--detail-action); color: var(--detail-action); box-shadow: none; }
body.detalle-page .btn-profesional-confianza { color: var(--detail-ink); border-color: var(--detail-line); background: #fff; }
body.detalle-page .btn-profesional-confianza[aria-pressed="true"] { background: #eef6f3; border-color: #087a56; color: #075b40; }
body.detalle-page .btn-ver-comparacion { grid-column: 1 / -1; background: var(--detail-action); border-color: var(--detail-action); box-shadow: none; }

body.detalle-page .detalle-acciones-secundarias { margin-top: 2px; }
body.detalle-page .btn-detalle-ghost { min-height: 40px; border-color: var(--detail-line); color: var(--detail-muted); }
body.detalle-page .btn-detalle-reportar { color: #b4233f; border-color: #efb5c0; }

body.detalle-page .detalle-acuerdo-seguro { border-top: 1px solid var(--detail-line); padding-top: 14px; }
body.detalle-page .detalle-acuerdo-seguro summary { display: flex; align-items: center; gap: 8px; color: var(--detail-ink); font-size: .86rem; font-weight: 750; cursor: pointer; }
body.detalle-page .detalle-acuerdo-seguro summary::-webkit-details-marker { display: none; }
body.detalle-page .detalle-acuerdo-seguro summary svg { width: 18px; height: 18px; fill: none; stroke: var(--detail-action); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.detalle-page .detalle-aviso { margin: 12px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--detail-line); border-radius: 0; background: transparent; color: var(--detail-muted); }
body.detalle-page .detalle-aviso strong { color: var(--detail-ink); }
body.detalle-page .detalle-aviso-ok strong { color: var(--detail-success); }
body.detalle-page .detalle-aviso-warn strong { color: #805b06; }
body.detalle-page .detalle-aviso ul { color: var(--detail-muted); }

body.detalle-page .formulario-resena { border-top-color: var(--detail-line); }
body.detalle-page .formulario-resena-pedida {
    border-top: 0;
    background: var(--detail-ice, #eaf1ff);
}
body.detalle-page .btn-publicar-resena { background: var(--detail-action) !important; border-radius: 11px !important; }
body.detalle-page .interactive-stars { display: flex; gap: 2px; }
body.detalle-page .interactive-stars button { width: 44px; height: 44px; border: 0; background: transparent; color: #9a6f05; font-size: 1.35rem; cursor: pointer; }
body.detalle-page .interactive-stars button:not(.selected):not(.hovered) { color: #c8d2df; }

body.detalle-page .detalle-relacionadas-vacio { width: 100%; padding: 24px; border: 1px dashed #b9c8dc; border-radius: 14px; background: var(--detail-ice); text-align: center; }
body.detalle-page .detalle-relacionadas-vacio strong,
body.detalle-page .detalle-relacionadas-vacio span { display: block; }
body.detalle-page .detalle-relacionadas-vacio span { margin: 6px auto 16px; color: var(--detail-muted); font-size: .86rem; }
body.detalle-page .detalle-relacionadas-vacio > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
body.detalle-page .detalle-link-principal,
body.detalle-page .detalle-link-secundario { min-height: 42px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 10px; font-size: .86rem; font-weight: 750; text-decoration: none; }
body.detalle-page .detalle-link-principal { color: #fff; background: var(--detail-action); }
body.detalle-page .detalle-link-secundario { color: var(--detail-ink); border: 1px solid var(--detail-line); background: #fff; }

@media (max-width: 991px) {
    body.detalle-page { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }
    body.detalle-page .detalle-layout { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 36px; gap: 20px; }
    body.detalle-page .detalle-hero-card { order: 1; }
    body.detalle-page #perfil-profesional { order: 2; }
    body.detalle-page #seccion-resenas { order: 3; }
}

@media (max-width: 620px) {
    body.detalle-page .detalle-layout { padding-inline: 12px; }
    body.detalle-page .detalle-hero-card .galeria-wrapper { aspect-ratio: 4 / 3; }
    body.detalle-page .detalle-body,
    body.detalle-page .resenas-card,
    body.detalle-page .detalle-sidebar-card { padding: 20px; }
    body.detalle-page .detalle-titulo { font-size: 1.9rem; }
    body.detalle-page .detalle-precio-row { padding: 14px; }
    body.detalle-page .detalle-acciones-menores { grid-template-columns: 1fr; }
    body.detalle-page .detalle-acciones-menores .btn-minimalista { width: 100%; }
    body.detalle-page .btn-flecha { width: 40px; height: 40px; }
    body.detalle-page .detalle-sticky-cta { left: 8px; right: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; border-color: var(--detail-line); box-shadow: 0 8px 22px rgba(11, 21, 51, .14); backdrop-filter: none; }
    body.detalle-page .detalle-sticky-precio strong { color: var(--detail-ink); }
    body.detalle-page .detalle-sticky-cta .btn-whatsapp,
    body.detalle-page .detalle-sticky-cta #btn-contactar-sticky { max-width: none; min-height: 44px !important; height: 44px !important; background: var(--detail-action); color: #fff; }
}

:root[data-theme="dark"] body.detalle-page,
body.dark-mode.detalle-page {
    --detail-ink: #f6f8fc;
    --detail-muted: #c1cadb;
    --detail-line: rgba(219, 226, 238, .15);
    --detail-ice: #111d36;
    --detail-surface: #101b34;
    --detail-link: #8ab7ff;
    --detail-gold-surface: #342913;
    --detail-gold-border: #d5a744;
    --detail-gold-ink: #fff4dc;
    background: #0b1533;
}
:root[data-theme="dark"] body.detalle-page .detalle-hero-card,
:root[data-theme="dark"] body.detalle-page .resenas-card,
:root[data-theme="dark"] body.detalle-page .detalle-sidebar-card,
body.dark-mode.detalle-page .detalle-hero-card,
body.dark-mode.detalle-page .resenas-card,
body.dark-mode.detalle-page .detalle-sidebar-card { background: var(--detail-surface); box-shadow: none; }
:root[data-theme="dark"] body.detalle-page .paquete-contacto,
body.dark-mode.detalle-page .paquete-contacto { background: #0d1730; }
:root[data-theme="dark"] body.detalle-page .detalle-input,
:root[data-theme="dark"] body.detalle-page .detalle-textarea,
:root[data-theme="dark"] body.detalle-page .detalle-acciones-menores .btn-minimalista,
:root[data-theme="dark"] body.detalle-page .btn-telegram,
:root[data-theme="dark"] body.detalle-page .btn-comparar-detalle,
:root[data-theme="dark"] body.detalle-page .btn-profesional-confianza,
body.dark-mode.detalle-page .detalle-input,
body.dark-mode.detalle-page .detalle-textarea,
body.dark-mode.detalle-page .detalle-acciones-menores .btn-minimalista,
body.dark-mode.detalle-page .btn-telegram,
body.dark-mode.detalle-page .btn-comparar-detalle,
body.dark-mode.detalle-page .btn-profesional-confianza { background: #14213e; color: var(--detail-ink); border-color: var(--detail-line); }
/* Las flechas de la galeria tenian el fondo blanco escrito a pelo pero el
   glifo en var(--detail-ink), que si cambia con el tema. En oscuro el texto se
   aclaraba a #f6f8fc y el fondo seguia blanco: 1,06 de contraste, blanco sobre
   blanco. Solo se veian al pasar el raton, porque el :hover si fija los dos
   colores. Van sobre una foto, asi que el pastilla oscura translucida es lo que
   se lee tanto sobre imagen clara como oscura. */
:root[data-theme="dark"] body.detalle-page .btn-flecha,
body.dark-mode.detalle-page .btn-flecha {
    background: rgba(16, 27, 52, .82);
    border-color: rgba(255, 255, 255, .18);
    color: var(--detail-ink);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
:root[data-theme="dark"] body.detalle-page .btn-flecha:hover,
body.dark-mode.detalle-page .btn-flecha:hover {
    background: #16244a;
    color: #8ab7ff;
}
:root[data-theme="dark"] body.detalle-page .detalle-precio-row,
body.dark-mode.detalle-page .detalle-precio-row { background: #0d1730; }
:root[data-theme="dark"] body.detalle-page .detalle-link-secundario,
body.dark-mode.detalle-page .detalle-link-secundario { background: #14213e; color: var(--detail-ink); }
:root[data-theme="dark"] body.detalle-page .detalle-sticky-cta,
body.dark-mode.detalle-page .detalle-sticky-cta { background: #101b34; }

/* El precio sale de aquí: en claro también va en verde, como en el catálogo.
   Esta regla lo forzaba a tinta y era la que ganaba de verdad (0,0,4,1). */
:root[data-theme="light"] body.detalle-page .detalle-sticky-precio strong,
:root[data-theme="light"] body.detalle-page .detalle-vendedor-info a {
    color: var(--detail-ink) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.detalle-page *, body.detalle-page *::before, body.detalle-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Estado vacío de reseñas en una línea. Antes era una tarjeta de 150px con
   icono y dos frases para comunicar que no hay nada; en una página que pedía
   2,9 pantallas eso es espacio que no informa. */
body.detalle-page .resenas-vacio-linea {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--detail-line);
    border-radius: 10px;
    color: var(--detail-muted);
    font-size: .87rem;
}

/* La "píldora" de zona se estiraba a los 652px de la columna y arrastraba un
   fondo gris, así que bajo el título aparecía una barra que no dice nada.
   detalle.css ya la quería como texto plano (background:transparent arriba),
   pero :root[data-theme="light"] .detalle-ubicacion-pill de theme.css gana por
   especificidad (0,0,3,0 contra 0,0,2,1) y le devolvía el fondo. Se iguala con
   :root delante y se le fija fit-content para que se ciña a su texto. */
:root body.detalle-page .detalle-ubicacion-pill {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    background: transparent;
}

/* "Más opciones": Compartir, Comparar, Guardar, Reportar y Bloquear estaban
   sueltos con el mismo peso que WhatsApp y Reservar. Ocho acciones apiladas y
   ninguna jerarquía. Es un <details> nativo — teclado y semántica de serie —
   y ocupa las dos columnas de la rejilla de acciones. */
body.detalle-page .detalle-mas-opciones {
    grid-column: 1 / -1;
    margin-top: 2px;
    border-top: 1px solid var(--detail-line);
    padding-top: 10px;
}
body.detalle-page .detalle-mas-opciones > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    color: var(--detail-muted);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    list-style: none;
}
body.detalle-page .detalle-mas-opciones > summary::-webkit-details-marker { display: none; }
/* Chevron propio: el triángulo del navegador se dibuja distinto en cada uno. */
body.detalle-page .detalle-mas-opciones > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .16s cubic-bezier(.23, 1, .32, 1);
}
body.detalle-page .detalle-mas-opciones[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}
body.detalle-page .detalle-mas-opciones > summary:hover { color: var(--detail-ink); }
body.detalle-page .detalle-mas-opciones > summary:focus-visible {
    outline: 3px solid rgba(20, 99, 230, .35);
    outline-offset: 3px;
}
/* Dentro del desplegable las utilidades van una por fila: ya no compiten. */
body.detalle-page .detalle-mas-opciones .btn-minimalista { width: 100%; margin-top: 8px; }

/* ===== Franja de disponibilidad ==========================================
   El verde entra aquí porque significa algo: "sí, este día puede". Es el mismo
   idioma que el botón de WhatsApp —contacto y disponibilidad son la misma
   promesa— y por eso no se añade un tercer color a la página. Los días que no
   atiende se apagan en lugar de pintarse de rojo: no atender un domingo no es
   un error, es un horario. */
body.detalle-page {
    --dispo-si: #0f6b4f;
    --dispo-si-fondo: rgba(15, 107, 79, .10);
    --dispo-si-borde: rgba(15, 107, 79, .35);
}
:root[data-theme="dark"] body.detalle-page,
body.dark-mode.detalle-page {
    --dispo-si: #6ee0b4;
    --dispo-si-fondo: rgba(110, 224, 180, .12);
    --dispo-si-borde: rgba(110, 224, 180, .32);
}
/* Precio y días son un bloque: pegados entre sí y con aire antes de lo
   siguiente, que ya es otra cosa (quién es y cómo escribirle). */
body.detalle-page .detalle-disponibilidad { margin: 12px 0 20px; }
body.detalle-page .detalle-dispo-titulo {
    margin: 0 0 7px;
    color: var(--detail-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
body.detalle-page .detalle-dispo-dias {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.detalle-page .detalle-dispo-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 2px;
    border: 1px solid var(--detail-line);
    border-radius: 9px;
    text-align: center;
}
body.detalle-page .detalle-dispo-dia.abre {
    border-color: var(--dispo-si-borde);
    background: var(--dispo-si-fondo);
}
body.detalle-page .detalle-dispo-nombre {
    color: var(--detail-muted);
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .03em;
    text-transform: uppercase;
}
body.detalle-page .detalle-dispo-dia.abre .detalle-dispo-nombre { color: var(--dispo-si); }
body.detalle-page .detalle-dispo-horas {
    color: var(--detail-muted);
    font-size: .64rem;
    font-variant-numeric: tabular-nums;
}
body.detalle-page .detalle-dispo-dia.abre .detalle-dispo-horas { color: var(--detail-ink); }
/* Sin opacity. El día cerrado ya se distingue por no llevar verde; bajarle
   además la opacidad al 50% hundía "Cerrado" de 6,3 a ~2,6 de contraste, y
   eso es información, no un control deshabilitado. */

/* Una sola familia de acciones con el catálogo. El icono identifica el canal. */
body.detalle-page .btn-whatsapp {
    background: var(--detail-action) !important;
    border-color: var(--detail-action) !important;
    color: #fff !important;
    box-shadow: none;
}
body.detalle-page .btn-whatsapp:hover {
    background: var(--detail-action-hover) !important;
    border-color: var(--detail-action-hover) !important;
    box-shadow: none;
}

/* La decisión comienza por nombre y zona; las fotos y el contacto siguen. */
body.detalle-page .detalle-encabezado { grid-column: 1 / -1; min-width: 0; }
body.detalle-page .detalle-volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 8px; color: var(--detail-muted); font-size: .875rem; text-decoration: none; }
body.detalle-page .detalle-volver:hover { color: var(--detail-link); }
body.detalle-page .detalle-volver svg,
body.detalle-page .btn-flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.detalle-page .detalle-titulo { max-width: 38ch; overflow-wrap: anywhere; line-height: 1.15; }
body.detalle-page .detalle-meta-top { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 18px; margin-top: 14px; }
:root body.detalle-page #detalle-categoria .etiqueta-categoria { position: static; color: var(--detail-muted); background: var(--detail-ice); border: 0; padding: 7px 10px; border-radius: 10px; font-size: .875rem; }
body.detalle-page .detalle-destacado-sello { background: #e7ba50; color: #35250a; padding: 7px 12px; border-radius: 10px; font-size: .875rem; font-weight: 700; }
body.detalle-page .detalle-destacado-sello[hidden] { display: none; }
:root body.detalle-page.detalle-destacado .detalle-hero-card { border: 2px solid var(--detail-gold-border); }
:root body.detalle-page.detalle-destacado .detalle-precio-row { background: var(--detail-gold-surface); border-color: var(--detail-gold-border); }
:root body.detalle-page.detalle-destacado .detalle-precio-row .precio-servicio,
:root body.detalle-page.detalle-destacado .detalle-precio-row .detalle-precio-label { color: var(--detail-gold-ink) !important; }
body.detalle-page .detalle-galeria-pie { display: flex; justify-content: space-between; padding: 12px 16px; gap: 12px; color: var(--detail-muted); font-size: .79rem; font-variant-numeric: tabular-nums; }
body.detalle-page .btn-flecha:disabled { opacity: .55; cursor: default; transform: none; }
body.detalle-page .detalle-sin-fotos,
body.detalle-page .detalle-foto-error { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--detail-muted); background: var(--detail-ice); }
body.detalle-page .detalle-sin-fotos svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.detalle-page .detalle-sin-fotos span { max-width: 28ch; line-height: 1.5; font-size: .875rem; }
body.detalle-page .detalle-descripcion-seccion { padding: 8px 0 24px; border-bottom: 1px solid var(--detail-line); }
body.detalle-page .detalle-desc-titulo { font-size: 1.35rem; margin-bottom: 16px; }
body.detalle-page .detalle-descripcion { white-space: pre-line; overflow-wrap: anywhere; }
body.detalle-page .detalle-visitas-pill { display: block; margin-top: 18px; font-weight: 400; }
body.detalle-page .detalle-precio-row { flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
body.detalle-page .detalle-precio-label { font-size: .79rem; text-transform: none; letter-spacing: normal; }
body.detalle-page .precio-servicio { overflow-wrap: anywhere; }
:root body.detalle-page.detalle-sin-precio .precio-servicio { font-size: 1.5rem; }
body.detalle-page .detalle-vendedor-info { min-width: 0; }
body.detalle-page .detalle-vendedor-info a,
body.detalle-page .detalle-vendedor-nombre { font-size: 1rem; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; color: var(--detail-ink); }
body.detalle-page .detalle-respuesta { display: block; color: var(--detail-link); font-size: .79rem; font-weight: 600; line-height: 1.5; }
body.detalle-page .detalle-respuesta small { font-size: inherit; font-weight: 400; color: var(--detail-muted); }
:root body.detalle-page .pc-sellos .insignia-verificado,
:root body.detalle-page .pc-sellos .sello-sembrada { background: transparent; border: 0; padding: 0; color: var(--detail-link); font-size: .79rem; }
body.detalle-page .detalle-reputacion { margin-top: 10px; color: var(--detail-muted); }
body.detalle-page .contenedor-acciones .detalle-contacto-linea { margin: 0; }
body.detalle-page .reputacion-resumen { font-size: .875rem; line-height: 1.5; }
body.detalle-page .detalle-reputacion-evidencia summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: .79rem; color: var(--detail-link); }
body.detalle-page .detalle-reputacion-evidencia p { font-size: .875rem; margin-bottom: 8px; }
body.detalle-page .detalle-reputacion-chips { display: flex; flex-wrap: wrap; gap: 6px; }
:root body.detalle-page .chip-confianza { background: var(--detail-ice); border-color: var(--detail-line); color: var(--detail-muted); }
body.detalle-page .paquete-contacto { padding: 0; border: 0; border-radius: 0; background: transparent !important; }
body.detalle-page .paquete-contacto summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 44px; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--detail-link); }
body.detalle-page .paquete-contacto summary span { font-size: .79rem; font-weight: 400; color: var(--detail-muted); }
body.detalle-page .paquete-contacto > p { margin: 8px 0 16px; }
body.detalle-page .paquete-contacto summary::after,
body.detalle-page .detalle-reputacion-evidencia summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
body.detalle-page .paquete-contacto[open] summary::after,
body.detalle-page .detalle-reputacion-evidencia[open] summary::after { transform: rotate(225deg); }
body.detalle-page .paquete-contacto summary::-webkit-details-marker,
body.detalle-page .detalle-reputacion-evidencia summary::-webkit-details-marker { display: none; }
body.detalle-page .detalle-mas-opciones > summary,
body.detalle-page .detalle-acuerdo-seguro summary,
body.detalle-page .btn-detalle-ghost { min-height: 44px; }
body.detalle-page :is(a, button, input, textarea, summary):focus-visible { outline: 3px solid var(--detail-link); outline-offset: 3px; }
body.detalle-page .detalle-input::placeholder,
body.detalle-page .detalle-textarea::placeholder { color: var(--detail-muted); }
body.detalle-page .detalle-error { grid-column: 1 / -1; padding: 32px 0; }
body.detalle-page .resena-texto { overflow-wrap: anywhere; }

/* Las reglas globales de tema usan !important: se acotan aquí para que no
   reintroduzcan superficies translúcidas ni enlaces violetas en la ficha. */
:root[data-theme] body.detalle-page .detalle-hero-card,
:root[data-theme] body.detalle-page .detalle-sidebar-card,
:root[data-theme] body.detalle-page .resenas-card {
    background: var(--detail-surface) !important;
    box-shadow: none !important;
    backdrop-filter: none;
}
:root[data-theme] body.detalle-page .detalle-vendedor-info a { color: var(--detail-ink) !important; }
:root[data-theme] body.detalle-page .detalle-vendedor-info a:hover { color: var(--detail-link) !important; }
body.detalle-page #seccion-relacionadas:has(.detalle-relacionadas-vacio) .rel-flecha { display: none !important; }
body.detalle-page .detalle-error p { margin: 16px 0 24px; color: var(--detail-muted); }
body.detalle-page .detalle-error button { border: 0; cursor: pointer; }

@media (max-width: 991px) {
    body.detalle-page .detalle-encabezado { order: 0; }
    body.detalle-page .detalle-descripcion-seccion { order: 3; }
    body.detalle-page #seccion-resenas { order: 4; }
    body.detalle-page #seccion-relacionadas { order: 5; }
    body.detalle-page .detalle-titulo { font-size: clamp(1.65rem, 5.5vw, 2.35rem); }
    body.detalle-page .btn-flecha { width: 44px; height: 44px; }
}
@media (max-width: 991px) {
    body.detalle-page .detalle-meta-top { gap: 10px; }
    body.detalle-page .detalle-layout { padding-top: 12px; }
    body.detalle-page .detalle-sticky-cta { right: 72px; left: 8px; gap: 8px; padding: 10px; }
    body.detalle-page .detalle-sticky-precio small { font-size: .68rem; text-transform: none; letter-spacing: normal; }
    body.detalle-page .detalle-sticky-precio strong { font-size: 1.1rem; white-space: normal; }
    body.detalle-page.detalle-sin-precio .detalle-sticky-precio strong { font-size: .875rem; }
    body.detalle-page .detalle-sticky-cta #btn-contactar-sticky { padding-inline: 10px; flex: none; font-size: .875rem; }
    body.detalle-page #chat-widget-btn { bottom: calc(22px + env(safe-area-inset-bottom)) !important; right: 12px !important; width: 48px !important; height: 48px !important; }
    body.detalle-page #chat-widget-panel { top: 76px !important; bottom: calc(96px + env(safe-area-inset-bottom)) !important; height: auto !important; max-height: none !important; }
    body.detalle-page:has(#chat-widget-panel[style*="display: flex"]) .detalle-sticky-cta { visibility: hidden; }
}