/* ===========================================================================
   Las escenas — trozos de pantalla dibujados con HTML
   ===========================================================================
   Compañera de dk-escenas.js. Una escena es una miniatura de algo que existe
   de verdad —la lista de existencias, el pedido con su sello, el botón morado
   escribiendo— y sirve a dos sitios: el aviso «Lo nuevo en tu Dkard» del panel
   y el carrusel de módulos de la landing. Por eso vive en su propio archivo y
   no dentro de ninguno de los dos: dos copias garantizan que un día se vean
   distinto.

   LO QUE PIDE DE FUERA: los tokens de marca (--panel, --panel-2, --border,
   --text, --muted, --accent, --accent-2, --ok, --danger), que admin.css y
   landing.css declaran iguales, y `--esc-acento`, que pone quien la usa: el
   color de la novedad o del módulo. El morado de la IA no está en landing.css,
   así que aquí va con reserva.

   TODO EN `em`. La escena fija el `font-size` y todo lo de dentro se mide en
   em: en el teléfono se encoge entera con una sola regla, sin tocar nada más.

   DECORATIVAS. Cada escena lleva aria-hidden: lo que dicen ya está escrito al
   lado, en texto de verdad. Por eso sus contrastes no se exigen como los de
   un texto que haya que leer.
   =========================================================================== */

.dk-esc {
    --esc-ia: var(--ia, #7C4DE8);
    --esc-ia-alto: var(--ia-alto, #9B6BFF);
    --esc-ia-suave: var(--ia-suave, rgba(124, 77, 232, 0.18));

    position: relative;
    display: grid;
    place-items: center;
    min-height: 350px;
    padding: 1.6rem 1.4rem;
    font-size: 14px;
    line-height: 1.35;
    background:
        radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--esc-acento, var(--accent)) 17%, transparent), transparent 75%),
        var(--bg);
    overflow: hidden;
}

/* Una rejilla tenue detrás, para que se lea como "una pantalla" y no como una
   tarjeta suelta flotando en el vacío. */
.dk-esc::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(62% 62% at 50% 50%, #000, transparent);
    mask-image: radial-gradient(62% 62% at 50% 50%, #000, transparent);
}

.dk-esc-mini {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 21em;
    padding: 0.7em 0.85em;
    border-radius: 1em;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    box-shadow: 0 18px 44px rgb(0 0 0 / 0.45);
}

/* Las piezas que asoman por una esquina: una segunda tarjeta chica que dice
   algo que la principal no alcanza a decir. */
.dk-esc-flotante {
    position: absolute;
    width: auto;
    max-width: none;
    z-index: 2;
}

/* El botón verde de la página pública. Verde #107c41 y no el de WhatsApp:
   con letra blanca, el de WhatsApp no llega al contraste mínimo. */
.dk-esc-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    width: 100%;
    margin-top: 0.6em;
    padding: 0.55em 0.8em;
    border-radius: 0.6em;
    background: #107c41;
    color: #fff;
    font-size: 0.82em;
    font-weight: 700;
}
.dk-esc-wa svg { width: 1.1em; height: 1.1em; }

/* La miniatura de un producto: un cuadro de color, que es lo que hay antes de
   subir la foto. Tres tonos para que tres filas no parezcan la misma. */
.dk-esc-foto {
    flex: none;
    width: 2.4em;
    height: 2.4em;
    border-radius: 0.55em;
    background: linear-gradient(135deg, #6a3a25, #3b2016);
}
.dk-esc-foto--2 { background: linear-gradient(135deg, #2f4b6d, #1b2a3d); }
.dk-esc-foto--3 { background: linear-gradient(135deg, #7a5a2a, #3d2d14); }

.dk-esc-nombre { font-weight: 600; font-size: 0.92em; line-height: 1.2; }
.dk-esc-nombre small {
    display: block;
    margin-top: 0.1em;
    font-weight: 400;
    font-size: 0.8em;
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Inventario: la lista con su chip de estado y la tabla de dos ejes
   --------------------------------------------------------------------------- */

/* El nombre lleva un MÍNIMO, no `minmax(0, 1fr)`: el chip va con `nowrap` y
   se queda con su ancho entero, así que con la caja estrecha el nombre se
   quedaba en 30 px y «urbanos» —una palabra no se parte— se salía por encima
   del chip. Con el mínimo, quien cede es el chip. */
.dk-esc-fila {
    display: grid;
    grid-template-columns: 2.4em minmax(4.5em, 1fr) auto;
    gap: 0.6em;
    align-items: center;
    padding: 0.5em 0.15em;
    border-bottom: 1px solid var(--border);
}
.dk-esc-fila--ultima { border-bottom: 0; }

/* Los mismos tres colores que el chip real del inventario (inventario.css):
   verde de «está bien», amarillo de «ojo», rojo de «se acabó». */
.dk-esc-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.22em 0.55em;
    border-radius: 999px;
    font-size: 0.74em;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.dk-esc-chip--ok { color: var(--ok); background: rgb(62 207 142 / 0.13); }
.dk-esc-chip--bajo { color: var(--accent-2); background: rgb(255 189 18 / 0.14); }
.dk-esc-chip--agotado { color: var(--danger); background: rgb(229 72 77 / 0.14); }

/* La tabla de dos ejes, asomando por la esquina: es lo que dice «y de cada
   talla o color» sin escribirlo dos veces. */
.dk-esc-flotante--matriz {
    right: 0.9em;
    bottom: 0.9em;
    width: 12.5em;
    padding: 0.6em 0.7em 0.7em;
    transform: rotate(-2deg);
}

.dk-esc-matriz-titulo {
    display: block;
    margin-bottom: 0.4em;
    font-size: 0.68em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.dk-esc-matriz {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 0.25em;
    font-size: 0.78em;
    text-align: center;
}
.dk-esc-matriz b {
    align-self: center;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--muted);
}
.dk-esc-matriz em {
    align-self: center;
    font-style: normal;
    font-weight: 600;
    font-size: 0.9em;
    text-align: left;
    color: var(--muted);
}
.dk-esc-matriz span {
    padding: 0.25em 0;
    border-radius: 0.35em;
    border: 1px solid var(--border);
    background: var(--panel);
}
.dk-esc-matriz .es-bajo { border-color: rgb(255 189 18 / 0.7); color: var(--accent-2); }
.dk-esc-matriz .es-cero { border-color: rgb(229 72 77 / 0.7); color: var(--danger); }

/* ---------------------------------------------------------------------------
   Pagos: el pedido con su sello
   --------------------------------------------------------------------------- */

.dk-esc-ped-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    padding: 0.1em 0.1em 0.55em;
    border-bottom: 1px dashed var(--border);
}
.dk-esc-ped-codigo { font-weight: 600; font-size: 0.9em; }

/* El sello cae encima del pedido cuando llega la pantalla: es la novedad
   entera en un gesto. `es-actual` la pone quien enseña la escena. */
.dk-esc-sello {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.6em;
    border: 2px solid var(--ok);
    border-radius: 0.4em;
    color: var(--ok);
    font-size: 0.74em;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: rotate(-6deg);
    opacity: 0;
}
.dk-esc-sello svg { width: 1em; height: 1em; }
.es-actual .dk-esc-sello {
    animation: dk-esc-sello 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.55s both;
}
@keyframes dk-esc-sello {
    from { opacity: 0; transform: rotate(-6deg) scale(1.9); }
    to   { opacity: 1; transform: rotate(-6deg) scale(1); }
}

.dk-esc-ped-linea {
    display: flex;
    justify-content: space-between;
    gap: 0.6em;
    padding: 0.45em 0.1em;
    font-size: 0.86em;
    color: var(--muted);
}

.dk-esc-ped-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.5em 0.1em 0.3em;
    border-top: 1px solid var(--border);
    font-size: 0.92em;
}
.dk-esc-ped-total strong { font-size: 1.15em; color: var(--text); }

.dk-esc-medios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    padding: 0.5em 0 0.2em;
}
.dk-esc-medios span {
    padding: 0.22em 0.55em;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    font-size: 0.72em;
    font-weight: 600;
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   IA: el campo con el botón morado escribiendo
   --------------------------------------------------------------------------- */

.dk-esc-ia-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    margin-bottom: 0.45em;
    font-size: 0.82em;
    color: var(--muted);
}

.dk-esc-btn-ia {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.32em 0.65em;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--esc-ia), var(--esc-ia-alto));
    color: #fff;
    font-size: 0.86em;
    font-weight: 700;
}
.dk-esc-btn-ia svg { width: 1em; height: 1em; }

.dk-esc-ia-texto {
    min-height: 5.6em;
    padding: 0.6em 0.7em;
    border-radius: 0.6em;
    /* Con reserva delante: un navegador que no entienda `color-mix` descarta
       la declaración ENTERA, no solo el color, y la caja se quedaría sin
       marco. Se queda con la de arriba. */
    border: 1px solid var(--border);
    border-color: color-mix(in srgb, var(--esc-ia) 45%, var(--border));
    background: var(--panel);
    font-size: 0.88em;
    line-height: 1.5;
    color: var(--text);
}

.dk-esc-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 1px;
    vertical-align: -0.15em;
    background: var(--esc-ia-alto);
    animation: dk-esc-parpadea 0.9s steps(2) infinite;
}
.ya-escrito .dk-esc-cursor { display: none; }
@keyframes dk-esc-parpadea { to { opacity: 0; } }

.dk-esc-ia-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    margin-top: 0.6em;
}
.dk-esc-ia-chips span {
    padding: 0.22em 0.55em;
    border-radius: 999px;
    background: var(--esc-ia-suave);
    color: var(--esc-ia-alto);
    font-size: 0.72em;
    font-weight: 700;
}

.dk-esc-flotante--creditos {
    top: 0.9em;
    right: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.4em 0.7em;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--esc-ia) 45%, transparent);
    font-size: 0.78em;
    font-weight: 700;
    color: var(--esc-ia-alto);
}
.dk-esc-flotante--creditos svg { width: 1em; height: 1em; }

/* ---------------------------------------------------------------------------
   Tu página: el cotizador
   ---------------------------------------------------------------------------
   Es lo que el visitante de la página usa: elige, cambia cantidades, ve el
   total y lo manda. La barra verde de arriba es la del cotizador real. */

.dk-esc-mini--cot { padding-top: 0; overflow: hidden; }

.dk-esc-cot-cab {
    margin: 0 -0.85em 0.4em;
    padding: 0.45em 0.85em;
    background: #107c41;
    color: #fff;
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
}

.dk-esc-cot-linea {
    display: grid;
    grid-template-columns: 2.4em minmax(4.5em, 1fr) auto auto;
    gap: 0.55em;
    align-items: center;
    padding: 0.45em 0.1em;
    border-bottom: 1px solid var(--border);
}

/* El − 2 +, como en la página. */
.dk-esc-cot-qty {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.8em;
}
.dk-esc-cot-qty i {
    display: grid;
    place-items: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 0.35em;
    border: 1px solid var(--border);
    font-style: normal;
    color: var(--muted);
}
.dk-esc-cot-qty b { min-width: 1em; text-align: center; }

.dk-esc-cot-precio { font-size: 0.82em; font-weight: 600; white-space: nowrap; }

.dk-esc-cot-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.55em 0.1em 0.2em;
    font-size: 0.92em;
}
.dk-esc-cot-total strong { font-size: 1.15em; }

/* El idioma, asomando arriba a la derecha: la página se ve en los dos. */
.dk-esc-flotante--idiomas {
    top: 0.9em;
    right: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.4em 0.7em;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 700;
}
.dk-esc-flotante--idiomas svg { width: 1em; height: 1em; color: var(--accent-2); }
.dk-esc-flotante--idiomas em { font-style: normal; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Métricas: las cifras y la gráfica
   --------------------------------------------------------------------------- */

.dk-esc-mini--met { max-width: 23em; }

.dk-esc-met-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45em;
}
.dk-esc-met-tile {
    padding: 0.55em 0.6em;
    border-radius: 0.6em;
    border: 1px solid var(--border);
    background: var(--panel);
}
.dk-esc-met-tile strong {
    display: block;
    font-size: 1.35em;
    line-height: 1.1;
    color: var(--text);
}
.dk-esc-met-tile span {
    display: block;
    margin-top: 0.15em;
    font-size: 0.68em;
    line-height: 1.2;
    color: var(--muted);
}

.dk-esc-met-graf { margin-top: 0.6em; }
.dk-esc-met-rotulo {
    display: block;
    margin-bottom: 0.3em;
    font-size: 0.68em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.dk-esc-met-graf svg {
    display: block;
    width: 100%;
    height: 4.6em;
    overflow: visible;
}
.dk-esc-met-area { fill: url(#dkEscMetRelleno); }
.dk-esc-met-stop1 { stop-color: var(--accent); stop-opacity: 0.38; }
.dk-esc-met-stop2 { stop-color: var(--accent); stop-opacity: 0; }
/* La línea se dibuja sola al llegar a la pantalla: es la gráfica «en vivo». */
.dk-esc-met-linea {
    fill: none;
    stroke: var(--accent-2);
    stroke-width: 2.4;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 420;
    stroke-dashoffset: 0;
}
.es-actual .dk-esc-met-linea {
    animation: dk-esc-traza 1.3s ease-out 0.25s both;
}
@keyframes dk-esc-traza {
    from { stroke-dashoffset: 420; }
    to   { stroke-dashoffset: 0; }
}
.dk-esc-met-punto { fill: var(--accent-2); }

/* ---------------------------------------------------------------------------
   Recursos: las piezas y el QR
   --------------------------------------------------------------------------- */

.dk-esc-mini--rec { max-width: 22em; }

.dk-esc-rec-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    margin-bottom: 0.55em;
    font-size: 0.88em;
    font-weight: 600;
}
.dk-esc-rec-badge {
    padding: 0.18em 0.5em;
    border-radius: 999px;
    background: rgb(242 96 12 / 0.16);
    color: var(--accent);
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dk-esc-rec-piezas {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5em;
    align-items: end;
}
.dk-esc-rec-pieza small {
    display: block;
    margin-top: 0.4em;
    font-size: 0.7em;
    line-height: 1.25;
    color: var(--text);
}
.dk-esc-rec-pieza small b {
    display: block;
    font-weight: 600;
    color: var(--muted);
}

/* La tarjeta personal: una franja del color del negocio con su QR. */
.dk-esc-rec-tarjeta {
    position: relative;
    aspect-ratio: 9 / 5;
    border-radius: 0.45em;
    background: linear-gradient(135deg, #1f3a63, #0f1f3a);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.4);
    overflow: hidden;
}
.dk-esc-rec-tarjeta::before {
    content: '';
    position: absolute;
    left: 0.6em;
    top: 0.6em;
    width: 2.6em;
    height: 0.5em;
    border-radius: 0.2em;
    background: rgb(255 255 255 / 0.85);
}
.dk-esc-rec-tarjeta::after {
    content: '';
    position: absolute;
    left: 0.6em;
    top: 1.4em;
    width: 1.6em;
    height: 0.3em;
    border-radius: 0.2em;
    background: rgb(255 255 255 / 0.4);
}
.dk-esc-rec-tarjeta .dk-esc-qr {
    position: absolute;
    right: 0.5em;
    bottom: 0.5em;
    width: 2.2em;
    height: 2.2em;
    padding: 0.2em;
    border-radius: 0.2em;
    background: #fff;
    color: #111;
}

.dk-esc-rec-separador {
    aspect-ratio: 1 / 3.4;
    width: 55%;
    margin-inline: auto;
    border-radius: 0.3em;
    background: linear-gradient(180deg, #1f3a63, #0f1f3a 60%, #f7ece4 60%);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.4);
}

.dk-esc-rec-historia {
    aspect-ratio: 9 / 16;
    width: 70%;
    margin-inline: auto;
    border-radius: 0.4em;
    background: linear-gradient(160deg, #ffbd12, #f2600c);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.4);
}

/* El QR dibujado a mano: 15 × 15 celdas con sus tres esquinas, que es lo
   que hace que el ojo lo lea como un QR. Escanearlo no lleva a ningún sitio. */
.dk-esc-qr { display: block; }
.dk-esc-qr rect { fill: currentColor; }

.dk-esc-flotante--qr {
    left: 0.9em;
    bottom: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em 0.7em;
    border-radius: 0.8em;
    font-size: 0.78em;
}
.dk-esc-flotante--qr .dk-esc-qr {
    flex: none;
    width: 2.6em;
    height: 2.6em;
    padding: 0.25em;
    border-radius: 0.25em;
    background: #fff;
    color: #111;
}
.dk-esc-flotante--qr span { font-weight: 600; line-height: 1.25; }
.dk-esc-flotante--qr span b {
    display: block;
    font-weight: 400;
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Servicios: la tarjeta con su galería, su precio y la solicitud
   --------------------------------------------------------------------------- */

.dk-esc-mini--srv { max-width: 19em; }

.dk-esc-srv-galeria {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.3em;
    height: 6.4em;
    margin-bottom: 0.6em;
}
.dk-esc-srv-galeria .dk-esc-foto { width: auto; height: auto; }
.dk-esc-srv-galeria .dk-esc-foto:first-child { grid-row: 1 / 3; }

.dk-esc-srv-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6em;
}
.dk-esc-srv-precio {
    flex: none;
    text-align: right;
    color: var(--accent-2);
    font-weight: 700;
    font-size: 0.9em;
    line-height: 1.15;
}
.dk-esc-srv-precio small {
    display: block;
    color: var(--muted);
    font-size: 0.75em;
    font-weight: 600;
}

/* Por dónde va la solicitud: lo que el panel le cambia y la cuenta le enseña. */
.dk-esc-srv-pasos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    margin-top: 0.6em;
}
.dk-esc-srv-paso {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.18em 0.5em;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.68em;
    font-weight: 700;
    white-space: nowrap;
}
.dk-esc-srv-paso svg { width: 1em; height: 1em; }
.dk-esc-srv-paso i {
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    border: 1.5px solid currentColor;
}
.dk-esc-srv-paso--hecho {
    border-color: color-mix(in srgb, var(--ok) 45%, transparent);
    color: var(--ok);
}

/* El archivo que el negocio le deja a su cliente. */
.dk-esc-flotante--archivo {
    right: 0.9em;
    bottom: 1.1em;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.5em 0.75em 0.5em 0.5em;
    border-radius: 0.8em;
    font-size: 0.78em;
}
.dk-esc-flotante--archivo > b {
    display: grid;
    place-items: center;
    width: 2.4em;
    height: 2.8em;
    border-radius: 0.3em;
    background: #c7362f;
    color: #fff;
    font-size: 0.72em;
    letter-spacing: 0.04em;
}
.dk-esc-flotante--archivo span { font-weight: 600; line-height: 1.25; }
.dk-esc-flotante--archivo small { display: block; font-weight: 400; color: var(--muted); }

/* ---------------------------------------------------------------------------
   La plata del inventario: las dos cifras de arriba y la cuenta del mes
   ---------------------------------------------------------------------------
   Las cifras son las fichas de las métricas (`.dk-esc-met-tile`), de dos en
   dos. La cuenta copia «Lo que te quedó» de Dinero: dos renglones en gris y
   el resultado debajo de una raya, en verde. */

.dk-esc-mini--din { max-width: 21em; }

.dk-esc-din-cifras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45em;
    margin-bottom: 0.45em;
}
.dk-esc-din-cifras strong { font-size: 1.15em; }
.dk-esc-din-cifras .es-ojo { color: var(--accent-2); }

.dk-esc-din-calc {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6em;
    padding: 0.28em 0.15em;
    font-size: 0.86em;
    color: var(--muted);
}
.dk-esc-din-calc b { color: var(--text); font-weight: 600; white-space: nowrap; }
.dk-esc-din-calc--res {
    margin-top: 0.15em;
    padding-top: 0.45em;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-weight: 700;
}
.dk-esc-din-calc--res small { margin-left: 0.45em; font-weight: 400; color: var(--muted); }
.dk-esc-din-calc--res b { color: var(--ok); font-size: 1.2em; font-weight: 800; }

/* ---------------------------------------------------------------------------
   Diseños para redes: la publicación, la historia y el carrusel
   --------------------------------------------------------------------------- */

.dk-esc-mini--redes { max-width: 22em; }

.dk-esc-redes-ia {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.18em 0.55em;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--esc-ia), var(--esc-ia-alto));
    color: #fff;
    font-size: 0.68em;
    font-weight: 700;
}
.dk-esc-redes-ia svg { width: 1em; height: 1em; }

/* Las mismas columnas que Recursos (sus `small` también): las dos escenas
   enseñan piezas, y que se parezcan es que se lean igual. */
.dk-esc-redes-piezas {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 0.55em;
    align-items: end;
}

.dk-esc-redes-post,
.dk-esc-redes-historia {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.2em;
    padding: 0.45em;
    border-radius: 0.45em;
    background: linear-gradient(160deg, #2d4a3a, #14251b);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.4);
    overflow: hidden;
}
.dk-esc-redes-post { aspect-ratio: 1; }
.dk-esc-redes-historia {
    aspect-ratio: 9 / 16;
    width: 78%;
    margin-inline: auto;
    background: linear-gradient(160deg, #ffbd12, #f2600c);
}

/* El producto dentro de la pieza: un óvalo claro, como una foto sin fondo. */
.dk-esc-redes-foto {
    position: absolute;
    top: 14%;
    left: 50%;
    width: 46%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #f7ece4, #c9a98e 70%);
}
.dk-esc-redes-historia .dk-esc-redes-foto { top: 22%; width: 62%; }

.dk-esc-redes-post b,
.dk-esc-redes-historia b {
    position: relative;
    color: #fff;
    font-size: 0.66em;
    line-height: 1.1;
}
.dk-esc-redes-historia b {
    height: 0.45em;
    width: 70%;
    border-radius: 0.2em;
    background: rgb(255 255 255 / 0.85);
}
.dk-esc-redes-post i {
    position: relative;
    align-self: flex-start;
    padding: 0.1em 0.4em;
    border-radius: 0.3em;
    background: var(--accent-2);
    color: #2a1509;
    font-size: 0.6em;
    font-style: normal;
    font-weight: 800;
}

/* El carrusel: tres láminas abiertas en abanico. */
.dk-esc-redes-carrusel {
    position: relative;
    aspect-ratio: 1;
}
.dk-esc-redes-carrusel span {
    position: absolute;
    inset: 12% 22% 12% 0;
    border-radius: 0.4em;
    background: linear-gradient(160deg, #3a2a5c, #1d1433);
    box-shadow: 0 6px 14px rgb(0 0 0 / 0.4);
}
.dk-esc-redes-carrusel span:nth-child(2) { inset: 6% 11% 18% 11%; background: linear-gradient(160deg, #5a3f8c, #2a1d4a); }
.dk-esc-redes-carrusel span:nth-child(3) { inset: 0 0 24% 22%; background: linear-gradient(160deg, var(--esc-ia-alto), var(--esc-ia)); }

/* El pack: cuántas piezas trae el mes. */
.dk-esc-flotante--pack {
    left: 0.9em;
    bottom: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.5em 0.75em 0.5em 0.5em;
    border-radius: 0.8em;
    font-size: 0.78em;
}
.dk-esc-flotante--pack > b {
    display: grid;
    place-items: center;
    width: 2.2em;
    height: 2.2em;
    border-radius: 0.5em;
    background: var(--esc-ia-suave);
    color: var(--esc-ia-alto);
    font-size: 1.05em;
}
.dk-esc-flotante--pack span { font-weight: 600; line-height: 1.25; }
.dk-esc-flotante--pack small { display: block; font-weight: 400; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Pedidos: la bandeja del panel
   --------------------------------------------------------------------------- */

.dk-esc-mini--pd { max-width: 21em; }

.dk-esc-pd-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.6em;
    align-items: center;
    padding: 0.5em 0;
    border-top: 1px solid var(--border);
}
.dk-esc-pd-cod { font-weight: 700; font-size: 0.84em; letter-spacing: 0.02em; }
.dk-esc-pd-cod small { display: block; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.dk-esc-pd-fila b { font-size: 0.82em; text-align: right; }
.dk-esc-pd-estado {
    padding: 0.15em 0.55em;
    border-radius: 999px;
    font-size: 0.66em;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}
.dk-esc-pd-estado--pendiente { background: rgb(255 189 18 / 0.16); color: var(--accent-2); }
.dk-esc-pd-estado--confirmado { background: rgb(91 156 255 / 0.18); color: #8db8ff; }
.dk-esc-pd-estado--entregado { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }

/* ---------------------------------------------------------------------------
   Clientes: la ficha de quien te compra
   --------------------------------------------------------------------------- */

.dk-esc-mini--cl { max-width: 19em; }

.dk-esc-cl-cab { display: flex; align-items: center; gap: 0.6em; margin-bottom: 0.7em; }
.dk-esc-cl-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%;
    background: var(--accent-gradient, linear-gradient(135deg, #ffbd12, #f2600c));
    color: #2a1509;
    font-weight: 800;
    font-size: 0.85em;
}
.dk-esc-cl-datos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4em;
}
.dk-esc-cl-dato {
    padding: 0.45em 0.5em;
    border-radius: 0.55em;
    background: var(--panel);
    color: var(--muted);
    font-size: 0.68em;
    line-height: 1.3;
}
.dk-esc-cl-dato b { display: block; color: var(--text); font-size: 1.35em; }

/* ---------------------------------------------------------------------------
   Cuenta del cliente: «Mis pedidos», en claro
   ---------------------------------------------------------------------------
   La cuenta del comprador es la única pantalla clara de DKARD, y se dibuja
   clara a propósito: sobre el panel oscuro, el cambio de fondo dice solo «esto
   es lo que ve tu cliente, no lo que ves tú». */

.dk-esc-mini--cta {
    max-width: 22em;
    background: #fbf7f3;
    border-color: #e6d8cb;
    color: #2a1509;
}

.dk-esc-cta-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5em;
    padding: 0.1em 0.1em 0.5em;
    border-bottom: 1px solid #ecdfd3;
}
.dk-esc-cta-marca {
    font-size: 0.95em;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.02em;
}
.dk-esc-cta-titulo { font-size: 0.82em; font-weight: 700; }
.dk-esc-cta-titulo small {
    display: block;
    font-weight: 400;
    font-size: 0.82em;
    color: #8a6f5c;
}

.dk-esc-cta-fila {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
    gap: 0.5em;
    align-items: center;
    padding: 0.5em 0.1em;
    border-bottom: 1px solid #ecdfd3;
}
.dk-esc-cta-fila:last-child { border-bottom: 0; }
.dk-esc-cta-cod {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.dk-esc-cta-cod small {
    display: block;
    margin-top: 0.15em;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0;
    color: #8a6f5c;
}
.dk-esc-cta-fila > b { font-size: 0.85em; white-space: nowrap; }

.dk-esc-cta-estados { display: flex; flex-direction: column; gap: 0.25em; align-items: flex-start; }
.dk-esc-cta-estado {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.5em;
    border-radius: 999px;
    border: 1px solid #e6d8cb;
    background: #fff;
    color: #6d574a;
    font-size: 0.66em;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}
.dk-esc-cta-estado--pagado { background: #107c41; border-color: #107c41; color: #fff; }
.dk-esc-cta-estado--confirmado { background: #e6f0fb; border-color: #c7dcf5; color: #1d5fb8; }
.dk-esc-cta-estado--entregado { background: #e4f6ec; border-color: #bfe8d0; color: #146b3a; }
.dk-esc-cta-fecha { font-size: 0.64em; color: #8a6f5c; }

/* ---------------------------------------------------------------------------
   Modificadores: la hoja donde el cliente lo pide a su gusto (16/10)
   --------------------------------------------------------------------------- */
.dk-esc-mini--mods { display: flex; flex-direction: column; gap: 0.5em; max-width: 19.5em; }
.dk-esc-mods-cab { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 0.55em; align-items: center; padding-bottom: 0.45em; border-bottom: 1px solid var(--border); }
.dk-esc-mods-precio { font-weight: 700; font-size: 0.92em; color: var(--esc-acento, var(--accent)); }
.dk-esc-mods-grupo { display: flex; flex-direction: column; gap: 0.3em; }
.dk-esc-mods-titulo { display: flex; align-items: center; gap: 0.45em; font-size: 0.76em; font-weight: 700; }
.dk-esc-mods-titulo em { font-style: normal; font-size: 0.82em; padding: 0.1em 0.5em; border-radius: 999px; background: var(--esc-acento, var(--accent)); color: #1a0d07; letter-spacing: 0.03em; text-transform: uppercase; }
.dk-esc-mods-titulo small { font-weight: 400; color: var(--muted); }
.dk-esc-mods-fila { display: flex; gap: 0.35em; flex-wrap: wrap; }
.dk-esc-mods-op {
    display: flex; align-items: center; gap: 0.45em;
    padding: 0.32em 0.55em; border: 1px solid var(--border); border-radius: 0.55em;
    font-size: 0.78em;
}
.dk-esc-mods-op > span { flex: 1 1 auto; }
.dk-esc-mods-op b { font-weight: 600; color: var(--muted); white-space: nowrap; }
.dk-esc-mods-op.es-activa { border-color: var(--esc-acento, var(--accent)); background: color-mix(in srgb, var(--esc-acento, var(--accent)) 12%, transparent); }
.dk-esc-mods-radio, .dk-esc-mods-casilla {
    flex: none; display: grid; place-items: center;
    width: 1.05em; height: 1.05em; border: 1.5px solid var(--muted);
}
.dk-esc-mods-radio { border-radius: 50%; }
.dk-esc-mods-casilla { border-radius: 0.25em; }
.es-activa .dk-esc-mods-radio { border-color: var(--esc-acento, var(--accent)); box-shadow: inset 0 0 0 0.2em var(--panel-2); background: var(--esc-acento, var(--accent)); }
.es-activa .dk-esc-mods-casilla { border-color: var(--esc-acento, var(--accent)); background: var(--esc-acento, var(--accent)); color: #1a0d07; }
.dk-esc-mods-casilla svg { width: 0.8em; height: 0.8em; }
.dk-esc-mods-boton {
    display: block; margin-top: 0.15em; padding: 0.5em 0.8em; border-radius: 0.6em;
    background: #107c41; color: #fff; text-align: center; font-size: 0.82em; font-weight: 700;
}
/* Cómo llega al WhatsApp, asomando arriba a la derecha. */
.dk-esc-flotante--mods-wa {
    top: 1.1em; right: 0.9em;
    display: flex; flex-direction: column; gap: 0.15em;
    width: 11.5em; padding: 0.55em 0.7em;
    border-color: rgb(37 211 102 / 0.4); background: #0b2b1c;
    font-size: 0.74em; line-height: 1.3;
}
.dk-esc-mods-wa-cab { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 700; color: #4fd98a; margin-bottom: 0.15em; }
.dk-esc-mods-wa-cab svg { width: 1em; height: 1em; }
.dk-esc-mods-wa-sin { font-weight: 800; color: #ffd166; }

/* ---------------------------------------------------------------------------
   Recetario: lo que lleva un producto, lo que cuesta y lo que deja (16/10)
   --------------------------------------------------------------------------- */
.dk-esc-mini--receta { max-width: 19.5em; }
.dk-esc-receta-cab { display: flex; align-items: center; justify-content: flex-start; gap: 0.55em; padding-bottom: 0.45em; margin-bottom: 0.2em; border-bottom: 1px solid var(--border); }
.dk-esc-receta-linea {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 4.6em; gap: 0.6em; align-items: baseline;
    padding: 0.28em 0.1em; font-size: 0.8em;
    border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
}
.dk-esc-receta-linea em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.dk-esc-receta-linea b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.dk-esc-receta-suma { display: flex; justify-content: space-between; gap: 0.6em; padding: 0.3em 0.1em 0; font-size: 0.82em; }
.dk-esc-receta-suma span { color: var(--muted); }
.dk-esc-receta-suma b { font-variant-numeric: tabular-nums; }
.dk-esc-receta-suma--ok { margin-top: 0.2em; padding-top: 0.45em; border-top: 1px solid var(--border); font-size: 0.9em; }
.dk-esc-receta-suma--ok span, .dk-esc-receta-suma--ok b { color: var(--ok); font-weight: 700; }
/* «Qué comprar», asomando abajo a la derecha. */
.dk-esc-flotante--comprar {
    right: 0.9em; bottom: 1.1em;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em;
    padding: 0.55em 0.75em; font-size: 0.78em;
}
.dk-esc-comprar-titulo { font-size: 0.82em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------------------
   La carta: una categoría con su plato con foto y sus renglones (17/10)
   --------------------------------------------------------------------------- */
.dk-esc-mini--carta { max-width: 19em; }
.dk-esc-carta-cab {
    font-weight: 800; font-size: 1.05em; letter-spacing: 0.02em;
    padding-bottom: 0.35em; margin-bottom: 0.4em;
    border-bottom: 2px solid var(--esc-acento, var(--accent));
}
.dk-esc-carta-plato { display: flex; align-items: center; gap: 0.55em; padding: 0.15em 0 0.5em; }
.dk-esc-carta-plato .dk-esc-nombre { flex: 1; min-width: 0; }
.dk-esc-carta-plato b,
.dk-esc-carta-renglon b { font-weight: 700; color: var(--esc-acento, var(--accent)); font-variant-numeric: tabular-nums; }
.dk-esc-carta-renglon { display: flex; align-items: baseline; gap: 0.5em; padding: 0.28em 0.1em; font-size: 0.84em; }
/* La línea de puntos hasta el precio: un borde y no puntos escritos, para
   que llene lo que sobre en cualquier ancho. */
.dk-esc-carta-renglon i { flex: 1; min-width: 1em; border-bottom: 1px dashed color-mix(in srgb, var(--muted) 65%, transparent); transform: translateY(-0.25em); }

/* ---------------------------------------------------------------------------
   En el teléfono
   ---------------------------------------------------------------------------
   Todo es `em`: basta con bajar el tamaño de la escena. Las tarjetas que
   asoman por una esquina se esconden: a 375 px no caben al lado de la
   principal y encima de ella tapaban justo lo que había que ver. */

@media (max-width: 860px) {
    .dk-esc {
        min-height: 0;
        height: 14.5rem;
        padding: 1rem;
        font-size: 11.5px;
    }
    .dk-esc-flotante--matriz,
    .dk-esc-flotante--qr,
    .dk-esc-flotante--archivo,
    .dk-esc-flotante--pack,
    .dk-esc-flotante--idiomas,
    .dk-esc-flotante--creditos,
    .dk-esc-flotante--mods-wa,
    .dk-esc-flotante--comprar { display: none; }

    /* La tarjeta de la IA es la más alta de las siete y a este tamaño llenaba
       la escena hasta arriba: el chip de créditos le caía encima (por eso se
       esconde, como los demás que asoman) y no quedaba aire. Menos alto en
       la caja del texto, que en el teléfono escribe tres líneas y no cuatro. */
    .dk-esc-ia-texto { min-height: 4.4em; }
}

@media (max-width: 400px) {
    .dk-esc { height: 13.5rem; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .es-actual .dk-esc-sello { animation: none; opacity: 1; }
    .es-actual .dk-esc-met-linea { animation: none; }
    .dk-esc-cursor { animation: none; }
}