/* ===========================================================================
   LA FICHA DE UN SERVICIO (módulo de servicios) — files/dk-servicio.js
   ===========================================================================
   BLANCA SIEMPRE, CON LOS COLORES DEL NEGOCIO DE ACENTO (el dueño, 18/10). Con
   el fondo del negocio, la de Maisa era un bloque azul de punta a punta y no
   se distinguía nada. Ahora el color fuerte del negocio (--dks-marca: su fondo,
   o su contraste en el tema claro, que es donde el fondo es pálido) va en
   títulos, datos clave, fechas y etiquetas, y el del botón (--dks-acento) en
   lo elegido y en «Reservar».

   EN EL TELÉFONO, UNA HOJA CASI ENTERA que sube desde abajo, con el listado
   asomando arriba (nota 3 de los wireframes); EN EL ESCRITORIO, un panel de
   800 px centrado, con flechas al anterior y al siguiente.

   LA CAPA: 3200, la de la ficha del producto (ver CapasDeLaPaginaTest y
   LaFichaDelServicioEnLaPaginaTest). Dentro, números chicos.
   =========================================================================== */

.dk-servicio {
    --dks-marca: var(--dk-fondo, #1d1714);
    --dks-fondo: #fff;
    --dks-tinta: #1f2328;
    --dks-tinta-suave: rgba(31, 35, 40, 0.64);
    --dks-linea: rgba(0, 0, 0, 0.1);
    --dks-caja: color-mix(in srgb, var(--dks-marca) 5%, #fff);
    --dks-caja-marca: color-mix(in srgb, var(--dks-marca) 9%, #fff);
    --dks-linea-marca: color-mix(in srgb, var(--dks-marca) 22%, #fff);
    --dks-acento: var(--dk-boton, #e0894f);
    /* Sobre el botón: el que se lea, medido sobre el color del botón
       (ajustarTextoDePaneles en main.js). Sin medida, el fondo del negocio en
       el tema oscuro y blanco en el claro — que en Maisa era blanco sobre
       amarillo (18/10). */
    --dks-acento-tinta: var(--dk-auto-boton-texto, var(--dk-fondo, #111));
    position: fixed;
    inset: 0;
    z-index: 3200;
    font-family: 'Barlow', sans-serif;
    color: var(--dks-tinta);
    -webkit-tap-highlight-color: transparent;
}

[data-tema="claro"] .dk-servicio {
    --dks-marca: var(--dk-contraste, #1d1714);
    --dks-acento-tinta: var(--dk-auto-boton-texto, #fff);
}

.dk-servicio[hidden] { display: none; }
.dk-servicio *, .dk-servicio *::before, .dk-servicio *::after { box-sizing: border-box; }
html.dk-servicio-abierto { overflow: hidden; }
/* La barra flotante no tiene nada que hacer encima de la ficha. */
html.dk-servicio-abierto .dkarta-ui-options { visibility: hidden; }

.dks-velo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dks-hoja {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 12px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: var(--dks-fondo);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform: translateY(24px);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.dks-abierta .dks-velo { opacity: 1; }
.dks-abierta .dks-hoja { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .dks-velo, .dks-hoja { transition: none; }
}

.dks-asa {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--dks-linea);
    margin: 8px auto 0;
    flex: none;
}

.dks-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    flex: none;
}

.dks-barra-titulo {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.dks-con-titulo .dks-barra-titulo { opacity: 1; }

.dks-boton-icono {
    width: 44px;
    height: 44px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dks-linea);
    border-radius: 10px;
    background: var(--dks-fondo);
    color: inherit;
    cursor: pointer;
}

.dks-cuerpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 16px 24px;
    outline: none;
}

/* --- La galería ----------------------------------------------------------- */
.dks-galeria { display: flex; flex-direction: column; gap: 6px; }

.dks-foto {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--dks-caja);
    cursor: zoom-in;
}

.dks-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dks-foto-cuenta {
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}

.dks-miniaturas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.dks-miniaturas::-webkit-scrollbar { display: none; }

.dks-miniatura {
    flex: none;
    width: 56px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--dks-linea);
    border-radius: 6px;
    overflow: hidden;
    background: var(--dks-caja);
    cursor: pointer;
}

.dks-miniatura img { width: 100%; height: 100%; object-fit: cover; }

/* --- El encabezado y los datos clave -------------------------------------- */
.dks-encabezado { padding-top: 14px; }

.dks-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--dks-tinta-suave);
}

.dks-etiqueta {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--dks-caja-marca);
    border: 1px solid var(--dks-linea-marca);
    color: var(--dks-marca);
}

.dks-titulo {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 600;
    color: inherit;
}

.dks-hechos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 0;
}

.dks-hecho {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--dks-linea-marca);
    border-radius: 10px;
    background: var(--dks-caja);
}

.dks-hecho dt {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dks-marca);
}

.dks-hecho dd {
    margin: 3px 0 0;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* --- Los planes ----------------------------------------------------------- */
.dks-planes-caja { margin-top: 18px; }
.dks-planes-cabeza h3, .dks-bloque h3, .dks-otros h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--dks-marca); }

.dks-planes {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.dks-plan {
    flex: none;
    width: 168px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--dks-caja);
    border: 1px solid var(--dks-linea);
    border-radius: 12px;
    cursor: pointer;
}

.dks-plan.es-elegido { border: 2px solid var(--dks-acento); padding: 11px; }
.dks-plan-nombre { font-weight: 600; font-size: 14px; }
.dks-plan-precio { font-weight: 700; font-size: 18px; color: var(--dks-marca); }
.dks-plan-precio small { font-weight: 400; font-size: 11px; color: var(--dks-tinta-suave); }
.dks-plan-nota { font-size: 12px; color: var(--dks-tinta-suave); }

.dks-recomendado {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--dks-acento);
    color: var(--dks-acento-tinta);
    vertical-align: middle;
}

.dks-incluye { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.dks-incluye span { display: flex; gap: 5px; align-items: flex-start; }
.dks-incluye .no { color: var(--dks-tinta-suave); text-decoration: line-through; }
.dks-incluye svg { flex: none; margin-top: 1px; }

/* --- Las secciones que se pliegan ----------------------------------------- */
.dks-secciones { margin-top: 18px; }

.dks-seccion { border-top: 1px solid var(--dks-linea); }
.dks-seccion:last-child { border-bottom: 1px solid var(--dks-linea); }

.dks-seccion > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--dks-marca);
    cursor: pointer;
}

.dks-seccion > summary::-webkit-details-marker { display: none; }

.dks-seccion > summary::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-right: 4px;
    transition: transform 0.15s ease;
}

.dks-seccion[open] > summary::after { transform: rotate(-135deg); }
.dks-seccion-cuerpo { padding: 0 0 16px; font-size: 14px; line-height: 1.55; }

.dks-texto p { margin: 0 0 0.6em; }
.dks-texto ul, .dks-texto ol { margin: 0 0 0.6em; padding-left: 1.2em; }
.dks-texto ul { list-style: disc; }
.dks-texto ol { list-style: decimal; }

.dks-lista { margin: 0; padding-left: 1.1em; list-style: disc; }
.dks-lista li { margin: 3px 0; }
.dks-lista--marcas { padding-left: 0; list-style: none; }
.dks-lista--marcas li { display: flex; gap: 8px; align-items: flex-start; }
.dks-lista--marcas li svg { flex: none; margin-top: 3px; }
.dks-lista--marcas li.no { color: var(--dks-tinta-suave); }

.dks-datos { margin: 0; display: grid; gap: 6px; }
.dks-datos div { display: flex; gap: 10px; }
.dks-datos dt { min-width: 110px; color: var(--dks-tinta-suave); }
.dks-datos dd { margin: 0; }

.dks-dia { margin: 6px 0 6px; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dks-tinta-suave); }
.dks-pasos { margin: 0 0 8px; padding: 0; list-style: none; }

.dks-paso {
    display: flex;
    gap: 12px;
    padding: 8px 0 8px 12px;
    border-left: 2px solid var(--dks-linea-marca);
}

.dks-paso-hora { flex: none; width: 46px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dks-marca); }
.dks-paso p { margin: 2px 0 0; color: var(--dks-tinta-suave); font-size: 13px; }

.dks-enlaces { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.dks-enlace {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--dks-linea);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}

.dks-pregunta { border-top: 1px solid var(--dks-linea); }
.dks-pregunta:first-child { border-top: 0; }
.dks-pregunta > summary { padding: 10px 0; cursor: pointer; font-weight: 600; }
.dks-pregunta p { margin: 0 0 10px; color: var(--dks-tinta-suave); }

.dks-lugar { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; }
.dks-lugar svg { flex: none; margin-top: 3px; }

/* --- Las fechas ------------------------------------------------------------ */
.dks-fechas { display: flex; flex-direction: column; gap: 8px; }

.dks-fecha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--dks-linea);
    border-radius: 10px;
    font-size: 13px;
    color: inherit;
    background: none;
    text-align: left;
    font-family: inherit;
}

label.dks-fecha { cursor: pointer; }
label.dks-fecha input { position: absolute; opacity: 0; pointer-events: none; }
.dks-fecha.es-elegida { border: 2px solid var(--dks-acento); padding: 9px 11px; }
.dks-fecha.esta-llena { opacity: 0.75; }
label.dks-fecha:focus-within { outline: 2px solid var(--dks-acento); outline-offset: 2px; }
.dks-fecha--boton { width: 100%; cursor: pointer; }

.dks-fecha-dia { flex: none; width: 40px; text-align: center; line-height: 1.1; text-transform: lowercase; }
.dks-fecha-dia b { display: block; font-size: 20px; color: var(--dks-marca); }
.dks-fecha-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dks-fecha-rango { font-weight: 600; }
.dks-fecha-nota { color: var(--dks-tinta-suave); font-size: 12px; }

.dks-estado { font-size: 12px; color: var(--dks-tinta-suave); }
.dks-estado--quedan { color: inherit; font-weight: 600; }

.dks-mini {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--dks-tinta);
    border-radius: 8px;
    background: none;
    color: inherit;
    font: 600 12px 'Barlow', sans-serif;
    cursor: pointer;
}

.dks-mini--suave { border-color: var(--dks-linea-marca); color: var(--dks-marca); }
/* En dos renglones si no cabe: en un teléfono la fila es angosta, y partido
   se lee mejor que cortado. */
/* EN UNA LÍNEA (el dueño, 18/10: «espacio innecesario»). Partido en dos, el
   botón se quedaba con el ancho del tope y no con el del texto: un texto que
   se parte no encoge su caja, y a la derecha de «calendario» sobraba medio
   botón. Con el texto entero cabe al lado de la fecha también en 360 px. */
.dks-mini--calendario { padding: 4px 10px; gap: 6px; white-space: nowrap; line-height: 1.15; }
.dks-mini--calendario svg { flex: none; }

/* --- Otros servicios ------------------------------------------------------- */
.dks-otros { margin-top: 22px; }
.dks-otros-lista { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }

.dks-otro {
    flex: none;
    width: 150px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.dks-otro img, .dks-otro-inicial {
    width: 150px;
    height: 96px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--dks-caja);
}

.dks-otro-inicial { display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; }
.dks-otro-nombre { font-weight: 600; font-size: 13px; line-height: 1.25; }
.dks-otro-dato { font-size: 12px; color: var(--dks-tinta-suave); }

/* --- Reservar y la espera -------------------------------------------------- */
.dks-paso-cabeza { display: flex; align-items: center; gap: 12px; padding: 6px 0 12px; }

/* LA FOTO, MÁS BAJA (el dueño, 18/10): el paso sigue siendo del servicio, pero
   lo que se elige tiene que asomar sin bajar. */
.dks-foto.dks-foto--paso { aspect-ratio: auto; height: 130px; margin-bottom: 12px; }

/* «VOLVER» CON SU PALABRA Y EN EL COLOR DEL BOTÓN (el dueño, 18/10): la flecha
   sola en un cuadro gris no se leía como la salida del paso. */
.dks-volver {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 16px 0 10px;
    border: 0;
    border-radius: 999px;
    background: var(--dks-acento);
    color: var(--dks-acento-tinta);
    font: 700 15px 'Barlow', sans-serif;
    cursor: pointer;
}
.dks-paso-de { margin: 0; font-size: 12px; color: var(--dks-tinta-suave); }
.dks-bloque { padding: 12px 0; border-top: 1px solid var(--dks-linea); }

.dks-opciones { display: flex; flex-wrap: wrap; gap: 8px; }

.dks-opcion {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--dks-linea);
    border-radius: 999px;
    background: none;
    color: inherit;
    font: 600 13px 'Barlow', sans-serif;
    cursor: pointer;
}

.dks-opcion span { font-weight: 400; }
.dks-opcion.es-elegida { background: var(--dks-acento); color: var(--dks-acento-tinta); border-color: var(--dks-acento); }

.dks-cantidad-fila { display: flex; align-items: center; gap: 14px; }

.dks-cantidad {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--dks-tinta);
    border-radius: 10px;
    height: 44px;
}

.dks-cantidad button {
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
}

.dks-cantidad button:disabled { opacity: 0.35; cursor: default; }
.dks-cantidad span { min-width: 28px; text-align: center; font-weight: 700; font-size: 16px; }
.dks-cantidad-nota { margin: 0; font-size: 12px; color: var(--dks-tinta-suave); line-height: 1.4; }

.dks-nota {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--dks-caja);
    font-size: 13px;
    color: var(--dks-tinta-suave);
}

.dks-espera { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.dks-espera p { margin: 0; }
.dks-espera-fecha { font-weight: 600; }
.dks-casilla { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.dks-casilla input { width: 18px; height: 18px; accent-color: var(--dks-acento); }
.dks-espera-listo, .dks-espera-error, .dks-espera-cuenta { padding: 10px 12px; border-radius: 10px; background: var(--dks-caja); }
.dks-espera-cuenta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* --- El pie fijo ------------------------------------------------------------ */
.dks-pie {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--dks-linea);
    background: var(--dks-fondo);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

.dks-pie-precio { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dks-pie-rotulo { font-size: 11px; color: var(--dks-tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Grande (el dueño, 18/10): es el dato por el que se decide, y a 16 px se
   perdía junto al botón. */
.dks-pie-precio strong { font-size: 24px; line-height: 1.15; color: var(--dks-marca); }
.dks-desde { font-weight: 400; font-size: 12px; }

.dks-wa { background: #25d366; border-color: #25d366; color: #fff; }
.dks-cta {
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--dks-acento);
    color: var(--dks-acento-tinta);
    font: 700 14px 'Barlow', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.dks-cta:disabled { opacity: 0.5; cursor: default; }

/* El «Volver» del pie, más discreto que el botón de seguir: con borde y sin
   relleno. En el teléfono los dos bajan a su propia fila, porque junto al
   precio y al WhatsApp no cabían sin partir «Agregar a la solicitud». */
.dks-cta.dks-cta--volver {
    background: none;
    color: var(--dks-tinta);
    border: 1px solid var(--dks-linea-marca);
    font-weight: 600;
}

.dks-pie-botones { display: flex; gap: 8px; }
.dks-pie--paso { flex-wrap: wrap; row-gap: 8px; }
.dks-pie--paso .dks-pie-botones { flex: 1 1 100%; }
.dks-pie--paso .dks-pie-botones .dks-cta:last-child { flex: 1; }

/* --- Las flechas, solo en el escritorio ------------------------------------- */
.dks-flecha {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border: 0;
    border-radius: 50%;
    background: var(--dks-fondo);
    color: var(--dks-tinta);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.dks-flecha[hidden] { display: none !important; }

@media (min-width: 900px) {
    .dks-hoja {
        left: 50%;
        right: auto;
        top: 32px;
        bottom: 32px;
        width: min(800px, calc(100vw - 180px));
        transform: translate(-50%, 16px);
        border-radius: 14px;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
    }

    .dks-abierta .dks-hoja { transform: translateX(-50%); }
    /* En el panel la foto no se come la pantalla: los datos tienen que
       asomar sin bajar (el wireframe del escritorio, 260 px). */
    .dks-foto { aspect-ratio: auto; height: 300px; }
    .dks-foto.dks-foto--paso { height: 170px; }
    /* En el panel cabe todo en una fila. */
    .dks-pie--paso { flex-wrap: nowrap; }
    .dks-pie--paso .dks-pie-botones { flex: none; }
    .dks-asa { display: none; }
    .dks-barra { padding: 10px 16px; border-bottom: 1px solid var(--dks-linea); }
    .dks-barra-titulo { opacity: 1; }
    .dks-cuerpo { padding: 16px 24px 28px; }
    .dks-flecha { display: inline-flex; }
    .dks-flecha--anterior { left: calc(50% - min(400px, calc(50vw - 90px)) - 66px); }
    .dks-flecha--siguiente { right: calc(50% - min(400px, calc(50vw - 90px)) - 66px); }
}

/* EN PANTALLA GRANDE, TODO MÁS GRANDE (el dueño, 19/10: «en escritorio todo
   se ve muy pequeño, agranda todos los textos»). La ficha está medida en
   píxeles para el teléfono; aquí crecen JUNTOS letras, botones y espacios
   con `zoom` sobre lo de adentro —no sobre la hoja, que se posiciona con
   top/left y se correría—, y el panel se ensancha para que no se apriete. */
@media (min-width: 1100px) {
    .dks-hoja { width: min(920px, calc(100vw - 180px)); }
    .dks-barra, .dks-cuerpo, .dks-pie { zoom: 1.15; }
    .dks-flecha--anterior { left: calc(50% - min(460px, calc(50vw - 90px)) - 66px); }
    .dks-flecha--siguiente { right: calc(50% - min(460px, calc(50vw - 90px)) - 66px); }
}
@media (min-width: 1500px) {
    .dks-hoja { width: min(1000px, calc(100vw - 180px)); }
    .dks-barra, .dks-cuerpo, .dks-pie { zoom: 1.25; }
    .dks-flecha--anterior { left: calc(50% - min(500px, calc(50vw - 90px)) - 66px); }
    .dks-flecha--siguiente { right: calc(50% - min(500px, calc(50vw - 90px)) - 66px); }
}

@media (max-width: 400px) {
    .dks-hechos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dks-cta { padding: 0 14px; }
}

/* ===========================================================================
   LA TARJETA DEL SERVICIO EN LA PÁGINA: los datos clave bajo el nombre y el
   precio con su unidad (nota 1 de los wireframes). Toda la tarjeta abre la
   ficha; el botón sigue siendo el de pedir.
   =========================================================================== */
.service-card.service-card--ficha { cursor: pointer; }

/* LOS DATOS COMO ETIQUETAS CON SU ÍCONO (el dueño, 18/10): cuánto dura,
   cuántas personas y la próxima fecha. Sueltos en una línea gris se leían
   como una nota al pie; en píldora se leen como lo que son, lo primero que
   se compara entre dos tours. El fondo sale del color del texto, así sirven
   igual en la tarjeta blanca y en la destacada oscura. */
.service-hechos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -0.5rem 0 0.85rem;
    font-size: 0.76rem;
}

.service-hecho {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 10px 3px 8px;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 6%, transparent);
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.service-hecho svg {
    flex: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--dk-servicio-boton, currentColor);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 550px) {
    .service-hechos { gap: 4px; font-size: 0.68rem; }
    .service-hecho { gap: 4px; padding: 2px 8px 2px 6px; }
    .service-hecho svg { width: 12px; height: 12px; }
}

.service-precio .service-unidad { font-size: 0.75em; font-weight: 400; opacity: 0.8; }

.service-cupo {
    display: inline-block;
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.service-cupo--completa { opacity: 0.75; }

/* El chip del formulario dice lo elegido en la ficha: «Completo · 4 – 20 nov · 3 personas». */
.dk-serv-chip-detalle { display: block; margin-top: 2px; font-size: 0.78em; font-weight: 400; opacity: 0.8; }

/* ===========================================================================
   LA TIENDA DE SERVICIOS (files/dk-tienda-servicios.js)
   ===========================================================================
   La ventana usa la carcasa de la tienda de productos (.dk-tienda, .dkt-* de
   dk-tienda.css): aquí solo va lo que es de los servicios —la entrada del
   bloque, el cupo en la tarjeta, el «✓» de lo que ya está en la solicitud—.
   =========================================================================== */

/* La caja del bloque deja de ser rejilla de tarjetas: la entrada ocupa la fila. */
.service-list.dkts-caja { display: block !important; }

/* La entrada (main.js, pintarEntradaDeServicios) es la de las categorías del
   catálogo: sus estilos están en dk-tienda.css. */

/* Dentro de la ventana. */
.dkts-cupo { font-size: 12px; font-weight: 600; color: var(--dkt-tinta); }

/* LOS DATOS CON ÍCONO (18/10): en la tarjeta, las píldoras de la página, más
   chicas; en la lista, solo el ícono delante de cada dato —la píldora no cabe
   en un renglón—. El ícono, en el color del botón de la tienda. */
.dk-tienda .service-hechos { margin: 4px 0 2px; gap: 4px; font-size: 11px; color: var(--dkt-tinta); }
.dk-tienda .service-hecho { padding: 2px 8px 2px 6px; gap: 4px; }
.dk-tienda .service-hecho svg { width: 12px; height: 12px; stroke: var(--dkt-acento, currentColor); }
.dk-tienda .dkt-fila .service-hechos { gap: 2px 12px; }
.dk-tienda .dkt-fila .service-hecho { padding: 0; border: 0; background: none; font-weight: 500; }
.dkts-precio-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dkts-insignia-linea { position: static; display: inline-block; margin-left: 6px; vertical-align: middle; }
.dkts-en-solicitud { outline: 2px solid var(--dkt-acento); outline-offset: -2px; border-radius: 12px; }
.dkt-fila.dkts-en-solicitud { outline-offset: 2px; }
.dkt-agregar.dkts-elegido { background: var(--dkt-acento); color: var(--dkt-acento-tinta); }

/* LA TARJETA DE LA TIENDA, CON LA PIEL DE LA DE LA PÁGINA (el dueño, 18/10:
   «parecen tarjetas de páginas distintas… me gustan las diferencias en el
   volumen de información, pero el estilo no debería cambiar tanto»). La
   carcasa es la de productos y traía sus colores (--dk-producto-*): aquí van
   los del grupo Servicios, los que el negocio elige para su tarjeta en Tu
   Dkard › Colores, con los mismos respaldos que styles.css. Así un color
   elegido vale en las dos. Los medidos (--dk-auto-servicio-*) los escribe
   main.js en la sección y la tienda, que vive fuera, se los copia al abrirse
   (dk-tienda-servicios.js, copiarLosMedidos). `.dk-tienda` doble para ganarle
   al tema claro de dk-tienda.css. */
.dk-tienda.dk-tienda--servicios {
    --dkt-tarjeta: var(--dk-servicio-fondo, #fff);
    --dkt-borde-tarjeta: #f0f0f020;
    --dkt-titulo: var(--dk-auto-servicio-titulo, var(--dk-servicio-titulo, var(--dk-servicio-boton, var(--dk-boton))));
    --dkt-texto: var(--dk-servicio-texto, #666);
    --dkt-precio: var(--dk-servicio-precio, var(--dk-servicio-texto, #1e1e1e));
    --dkt-boton: var(--dk-servicio-boton, var(--dk-boton));
    --dkt-boton-tinta: var(--dk-auto-servicio-boton-texto, #fff);
    /* La letra fuerte de la tarjeta (los datos, el cupo), la de la página. */
    --dkts-tinta-tarjeta: var(--dk-servicio-texto, #1e1e1e);
}
/* Su forma: el radio, la sombra suave y el nombre del tamaño de la página. */
.dk-tienda--servicios .dkt-tarjeta { border-radius: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); }
.dk-tienda--servicios .dkt-nombre { font-size: 1.12rem; line-height: 1.1; }
/* El «+», redondo y lleno como el «Solicitar» de la página. */
.dk-tienda--servicios .dkt-agregar:not(.dkts-elegido) { border-radius: 999px; }
/* Dentro de la tarjeta, la tinta de la tarjeta y no la de la tienda: en el
   tema oscuro era blanca, sobre el blanco de la tarjeta de servicio. */
.dk-tienda--servicios .dkt-items .service-hechos,
.dk-tienda--servicios .dkt-items .dkts-cupo { color: var(--dkts-tinta-tarjeta); }
.dk-tienda--servicios .dkt-items .service-hecho svg { stroke: var(--dk-servicio-boton, currentColor); }
.dk-tienda--servicios .dkt-items { --dkt-linea: color-mix(in srgb, var(--dkts-tinta-tarjeta) 12%, transparent); }
.dkt-agregar.dkts-avisarme { width: auto; padding: 0 10px; font-size: 12px; font-weight: 700; }