/* ===========================================================================
   MI CUENTA DKARD — dkard.co/cuenta
   ===========================================================================
   El lenguaje de las paginas publicas de DKARD (el de /creatuchispa): claro,
   tinta sobre papel y el naranja de la marca para lo que hay que pulsar. Es
   una puerta a la que llega alguien desde un dkard, casi siempre en el
   telefono y a plena luz.

   TRES COSAS QUE NO SON ESTETICA:
   - El naranja de la marca (#f2600c) da 3,25:1 con texto blanco: sirve para
     el foco y los acentos, NO para el fondo de un boton con texto. El boton
     va en un naranja mas hondo que pasa 4,5:1 en todo su degradado.
   - Todo lo que se pulsa mide al menos 44 px de alto.
   - Nada se mueve para quien pidio menos movimiento (al final del archivo).
   ========================================================================= */

:root {
    --ct-tinta: #1b100c;
    --ct-tinta-suave: #6b5a52;        /* 6,4:1 sobre papel */
    --ct-tinta-tenue: #7a6a62;        /* 5,1:1: lo atenuado sigue leyendose */
    --ct-linea: #e7ded8;
    --ct-linea-fuerte: #958276;       /* borde de los controles: 3,6:1 */
    --ct-papel: #fffdfb;
    --ct-fondo: #fdf6f1;
    --ct-crema: #f7f1ec;
    --ct-naranja: #f2600c;            /* marca: foco y acentos que no son texto */
    --ct-naranja-texto: #b24303;      /* enlaces: 5,6:1 */
    --ct-naranja-hondo: #8f3503;
    --ct-boton: linear-gradient(135deg, #c24805, #a93f04);
    --ct-boton-sombra: 0 6px 18px rgba(194, 72, 5, .26);
    --ct-error: #b3261e;
    --ct-error-fondo: #fdf0ee;
    --ct-error-borde: #f2cfc9;
    --ct-ok: #1f6b47;
    --ct-ok-fondo: #eef7f2;
    --ct-ok-borde: #cfe8dd;
    --ct-info: #5a3b1f;
    --ct-info-fondo: #fbf3ea;
    --ct-info-borde: #f0dcc8;
    --ct-foco: 0 0 0 3px rgba(242, 96, 12, .4);
    --ct-sombra: 0 1px 2px rgba(27, 16, 12, .04), 0 18px 46px rgba(27, 16, 12, .08);
    --ct-sombra-suave: 0 1px 2px rgba(27, 16, 12, .05), 0 6px 18px rgba(27, 16, 12, .05);
    --ct-lateral: 268px;
    --ct-barra-alto: 62px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: Barlow, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ct-tinta);
    background: var(--ct-fondo);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

[hidden] {
    display: none !important;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: Blinker, Barlow, sans-serif;
    line-height: 1.15;
    text-wrap: balance;
}

p {
    margin: 0;
}

a {
    color: var(--ct-naranja-texto);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--ct-naranja-hondo);
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

img {
    max-width: 100%;
}

:focus-visible {
    outline: 3px solid var(--ct-naranja);
    outline-offset: 2px;
}

/* Los titulos reciben el foco por codigo al cambiar de vista o de paso, para
   que el lector de pantalla empiece por ahi. No son controles: sin anillo. */
[tabindex="-1"]:focus {
    outline: none;
}

.ct-ico {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    vertical-align: -0.2em;
}

.ct-ico-hueco {
    display: inline-flex;
    flex-shrink: 0;
}

.ct-visualmente-oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ct-saltar {
    position: absolute;
    top: -80px;
    left: 12px;
    z-index: 100;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--ct-tinta);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.ct-saltar:focus {
    top: 12px;
    color: #fff;
}

.ct-sin-js {
    max-width: 420px;
    margin: 40px auto;
    padding: 16px;
    text-align: center;
}

.ct-glifo {
    display: inline-block;
    font-size: .95em;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   BOTONES
   --------------------------------------------------------------------------- */

.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    font-family: Barlow, system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, background-color .15s ease, border-color .15s ease, transform .12s ease;
}

.ct-btn--primario {
    color: #fff;
    background: var(--ct-boton);
    box-shadow: var(--ct-boton-sombra);
}

.ct-btn--primario:hover {
    color: #fff;
    filter: brightness(1.07);
}

.ct-btn--primario:active {
    transform: translateY(1px);
}

/* Apagado pero ENFOCABLE (aria-disabled y no disabled): al pulsarlo dice que
   falta. Gris con texto oscuro, que se lee (6:1). */
.ct-btn--primario[aria-disabled="true"] {
    color: #4f423c;
    background: #ded4ce;
    box-shadow: none;
    filter: none;
    cursor: not-allowed;
}

.ct-btn--secundario {
    color: var(--ct-tinta);
    background: #fff;
    border-color: var(--ct-linea-fuerte);
}

.ct-btn--secundario:hover {
    color: var(--ct-tinta);
    background: #fff8f3;
    border-color: var(--ct-tinta-suave);
}

.ct-btn--peligro {
    color: #fff;
    background: var(--ct-error);
}

.ct-btn--peligro:hover {
    color: #fff;
    filter: brightness(1.08);
}

.ct-btn--bloque {
    display: flex;
    width: 100%;
}

.ct-btn--chico {
    padding: 8px 14px;
    font-size: .94rem;
}

.ct-btn:disabled {
    cursor: not-allowed;
    opacity: .6;
    filter: none;
    transform: none;
}

.ct-btn[aria-busy="true"] {
    cursor: progress;
}

.ct-btn--apagado {
    color: var(--ct-tinta-tenue);
    border-style: dashed;
    cursor: not-allowed;
}

.ct-btn--apagado:hover {
    background: #fff;
    border-color: var(--ct-linea-fuerte);
    color: var(--ct-tinta-tenue);
}

.ct-enlace {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 4px;
    border: 0;
    background: none;
    color: var(--ct-naranja-texto);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ct-enlace:disabled {
    color: var(--ct-tinta-suave);
    text-decoration: none;
    cursor: default;
}

.ct-enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    font-weight: 600;
    text-decoration: none;
}

.ct-enlace-flecha:hover {
    text-decoration: underline;
}

.ct-enlace-externo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    font-weight: 600;
    font-size: .9rem;
}

.ct-icono-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ct-tinta-suave);
    cursor: pointer;
}

.ct-icono-btn:hover {
    background: rgba(27, 16, 12, .06);
    color: var(--ct-tinta);
}

.ct-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.ct-acciones--centro {
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   CAMPOS
   --------------------------------------------------------------------------- */

.ct-campo {
    min-width: 0;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.ct-rotulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 0;
    font-weight: 600;
    font-size: .95rem;
}

.ct-rotulo-chico {
    display: block;
    margin-bottom: 4px;
    font-size: .82rem;
    color: var(--ct-tinta-suave);
}

.ct-opcional {
    padding: 1px 8px;
    border-radius: 99px;
    background: #f1e9e3;
    color: var(--ct-tinta-suave);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.ct-control,
.ct-campo .dk-tel-pais {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    /* 16 px reales: por debajo, Safari en iPhone hace zoom al enfocar y
       descoloca la pagina entera. */
    font-size: 16px;
    color: var(--ct-tinta);
    background: #fff;
    border: 1.5px solid var(--ct-linea-fuerte);
    border-radius: 11px;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.ct-control:focus,
.ct-campo .dk-tel-pais:focus {
    outline: none;
    border-color: var(--ct-naranja);
    box-shadow: var(--ct-foco);
}

.ct-control::placeholder {
    color: #8c7b72;
    opacity: 1;
}

.ct-control[aria-invalid="true"] {
    border-color: var(--ct-error);
}

.ct-select,
.ct-campo .dk-tel-pais {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5a52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    cursor: pointer;
}

.ct-campo .dk-tel-pais:disabled {
    opacity: .6;
    cursor: not-allowed;
}

textarea.ct-control {
    min-height: 96px;
    resize: vertical;
    line-height: 1.45;
}

.ct-error-campo {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    color: var(--ct-error);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.4;
}

.ct-error-campo::before {
    content: "✕";
    flex-shrink: 0;
}

.ct-ayuda {
    margin-top: 6px;
    color: var(--ct-tinta-suave);
    font-size: .88rem;
    line-height: 1.45;
}

.ct-ayuda--centro {
    text-align: center;
}

/* El selector de indicativo de dk-telefono.js: apilado en lo angosto y en
   fila cuando cabe, las dos mitades con el mismo dibujo. */
.dk-tel {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.dk-tel > .dk-tel-pais,
.dk-tel > input {
    flex: 1 1 100%;
    min-width: 0;
}

.dk-tel-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 420px) {
    .dk-tel > .dk-tel-pais {
        flex: 0 1 auto;
        max-width: 52%;
    }

    .dk-tel > input {
        flex: 1 1 9em;
    }
}

.ct-cumple {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: 10px;
}

.ct-campo--grupo > legend {
    float: none;
}

.ct-error-bloque {
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid var(--ct-error-borde);
    border-radius: 11px;
    background: var(--ct-error-fondo);
    color: var(--ct-error);
    font-size: .92rem;
}

.ct-error-bloque-texto {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ct-error-bloque-texto .ct-ico {
    margin-top: 2px;
}

.ct-error-bloque .ct-btn {
    margin-top: 10px;
}

/* ---------------------------------------------------------------------------
   AVISOS
   --------------------------------------------------------------------------- */

.ct-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 12px;
    font-size: .94rem;
    line-height: 1.45;
}

.ct-aviso > .ct-ico {
    margin-top: 2px;
}

.ct-aviso--ok {
    background: var(--ct-ok-fondo);
    border-color: var(--ct-ok-borde);
    color: #17543a;
}

.ct-aviso--info {
    background: var(--ct-info-fondo);
    border-color: var(--ct-info-borde);
    color: var(--ct-info);
}

.ct-aviso--error {
    background: var(--ct-error-fondo);
    border-color: var(--ct-error-borde);
    color: var(--ct-error);
}

.ct-aviso-texto {
    flex: 1;
    min-width: 0;
}

.ct-aviso-texto a {
    color: inherit;
    font-weight: 700;
}

.ct-aviso-cerrar {
    margin: -11px -10px -11px 0;
    color: inherit;
}

.ct-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ct-info-fondo);
    color: var(--ct-info);
    font-size: .92rem;
}

.ct-info > .ct-ico {
    margin-top: 2px;
}

/* Un aviso suelto al principio de una vista, con algo debajo: el cuerpo de la
   vista no reparte aire entre sus hijos, y en «Dkards a los que escribiste» el
   aviso quedaba pegado a la primera tarjeta (el dueño, 14/09). Los avisos
   dentro de una seccion no entran: ahi el aire lo pone la seccion. */
.ct-vista-cuerpo > .ct-info:not(:last-child) {
    margin-bottom: 18px;
}

/* ---------------------------------------------------------------------------
   ARRANQUE
   --------------------------------------------------------------------------- */

.ct-arranque {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    text-align: center;
}

.ct-arranque-icono {
    width: 34px;
    height: auto;
    animation: ct-latido 1.6s ease-in-out infinite;
}

.ct-arranque-texto {
    max-width: 32ch;
    color: var(--ct-tinta-suave);
}

.ct-arranque-acciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

@keyframes ct-latido {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.9); opacity: .7; }
}

/* ---------------------------------------------------------------------------
   LA ENTRADA
   --------------------------------------------------------------------------- */

/* La variante clara del fondo de chispas: dk-particulas.css trae uno oscuro
   quemado. Con las dos clases gana sin depender del orden de las hojas. */
.ct-entrada.dk-fondo-chispas {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 16px 40px;
    padding-top: max(24px, env(safe-area-inset-top));
    background:
        radial-gradient(circle at 12% 8%, rgba(242, 96, 12, .10), transparent 42%),
        radial-gradient(circle at 88% 92%, rgba(255, 189, 18, .12), transparent 48%),
        linear-gradient(165deg, #fffdfb 0%, #fdf4ee 55%, #fbeade 100%);
}

.ct-entrada-caja {
    width: 100%;
    max-width: 468px;
    padding: 24px 24px 20px;
    border: 1px solid var(--ct-linea);
    border-radius: 18px;
    background: var(--ct-papel);
    box-shadow: var(--ct-sombra);
}

.ct-entrada-caja--ancha {
    max-width: 660px;
}

.ct-entrada-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    margin-bottom: 20px;
}

.ct-marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}

.ct-marca-logo {
    width: auto;
    height: 30px;
}

.ct-marca-rotulo {
    padding-left: 10px;
    border-left: 1px solid var(--ct-linea-fuerte);
    color: var(--ct-tinta-suave);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ct-enlace-panel {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    color: var(--ct-tinta-suave);
    font-size: .82rem;
    line-height: 1.3;
    text-align: right;
    text-decoration: none;
}

.ct-enlace-panel span {
    color: var(--ct-naranja-texto);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ct-entrada-aviso {
    margin-bottom: 18px;
}

.ct-entrada-titulo {
    margin-bottom: 8px;
    font-weight: 800;
    font-size: 1.6rem;
}

.ct-lead {
    margin-bottom: 20px;
    color: var(--ct-tinta-suave);
}

.ct-lead strong {
    color: var(--ct-tinta);
    word-break: break-all;
}

#ct-form-correo .ct-btn,
#ct-form-codigo .ct-btn--bloque {
    margin-top: 4px;
}

/* ---------- La otra puerta: entrar con Google ---------- */

.ct-google-zona {
    margin-top: 20px;
}

.ct-separador {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: var(--ct-tinta-suave);
    font-size: .86rem;
}

/* Las dos rayas del «o». Con respaldo en el color: esta linea tiene que
   verse aunque la variable cambie de nombre. */
.ct-separador::before,
.ct-separador::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ct-linea, #e7ddd6);
}

/* El boton lo pinta GOOGLE dentro de su propio marco y no acepta estilos
   nuestros: lo unico que se hace desde aqui es centrarlo. Por eso tampoco se
   intenta que combine con .ct-btn — quedaria a medias, y un boton de Google a
   medias parece falso. */
.ct-google {
    display: flex;
    justify-content: center;
}

/* ---------- El codigo: un campo de verdad pintado como seis casillas ---------- */

.ct-casillas {
    position: relative;
    width: 100%;
    max-width: 372px;
    margin: 0 auto;
}

.ct-casillas-dibujo {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.ct-casilla {
    display: grid;
    place-items: center;
    height: 58px;
    border: 1.5px solid var(--ct-linea-fuerte);
    border-radius: 11px;
    background: #fff;
    font-family: Blinker, Barlow, sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.ct-casilla--llena {
    border-color: var(--ct-tinta-suave);
}

.ct-casilla--actual {
    border-color: var(--ct-naranja);
    box-shadow: var(--ct-foco);
}

.ct-casillas--seleccion .ct-casilla--llena {
    background: #fde7d9;
}

.ct-casillas--error .ct-casilla {
    border-color: var(--ct-error);
}

/* El campo de verdad va ENCIMA de las casillas y es invisible: recibe el
   teclado, el pegado y la sugerencia del codigo (one-time-code); lo que se
   ve es el dibujo de abajo. Transparente y no con opacidad cero: asi sigue
   siendo un campo normal para el navegador. */
.ct-casillas .ct-codigo {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: transparent;
    font-size: 16px;
    letter-spacing: 1em;
    cursor: text;
    -webkit-appearance: none;
    appearance: none;
}

.ct-casillas .ct-codigo:focus,
.ct-casillas .ct-codigo:focus-visible {
    outline: none;
}

.ct-casillas .ct-codigo::selection {
    background: transparent;
}

.ct-codigo-estado {
    min-height: 8px;
    margin: 12px 0;
    text-align: center;
}

.ct-codigo-estado:empty {
    margin: 4px 0;
}

.ct-codigo-estado-texto {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .94rem;
    font-weight: 600;
    text-align: left;
}

.ct-codigo-estado-texto .ct-ico {
    margin-top: 2px;
}

.ct-codigo-estado--error {
    color: var(--ct-error);
}

.ct-codigo-estado--ok {
    color: var(--ct-ok);
}

.ct-codigo-estado--aviso {
    color: var(--ct-info);
}

.ct-codigo-estado--espera {
    color: var(--ct-tinta-suave);
}

.ct-codigo-estado .ct-btn {
    margin-top: 10px;
}

.ct-codigo-otras {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 12px;
    margin-top: 8px;
}

.ct-codigo-otras .ct-ico-hueco .ct-ico {
    width: 1em;
    height: 1em;
}

/* ---------- Completa tus datos ---------- */

.ct-completar-arriba {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 16px;
}

.ct-pasitos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ct-tinta-suave);
    font-size: .88rem;
}

.ct-pasito {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ct-pasito--hecho {
    color: var(--ct-ok);
    font-weight: 600;
}

.ct-pasito--actual {
    color: var(--ct-tinta);
    font-weight: 700;
}

.ct-pasito-n {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ct-tinta);
    color: #fff;
    font-size: .75rem;
}

.ct-correo-fijo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--ct-crema);
    font-weight: 600;
    word-break: break-all;
}

.ct-verificado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ct-ok);
    font-size: .84rem;
    font-weight: 700;
    word-break: normal;
}

.ct-bloque {
    min-width: 0;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
}

.ct-bloque-titulo {
    margin-bottom: 12px;
    padding: 0;
    font-family: Blinker, Barlow, sans-serif;
    font-weight: 800;
    font-size: 1.08rem;
}

.ct-bloque--opcional {
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px dashed var(--ct-linea-fuerte);
}

.ct-autorizacion {
    margin: 18px 0 6px;
    padding: 16px;
    border: 1px solid var(--ct-linea);
    border-radius: 14px;
    background: #fbf7f3;
}

.ct-autorizacion-titulo {
    margin-bottom: 10px;
    font-family: Barlow, system-ui, sans-serif;
    font-weight: 700;
    font-size: .98rem;
}

/* Toda la caja es la casilla: el cuadrito solo no es un objetivo tactil. */
.ct-autorizacion-casilla {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
    margin: -8px;
    padding: 8px;
    border-radius: 10px;
    font-size: .92rem;
    line-height: 1.5;
    cursor: pointer;
}

.ct-autorizacion-casilla:hover {
    background: #f5ece5;
}

.ct-autorizacion-casilla input {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    accent-color: var(--ct-naranja-texto);
    cursor: pointer;
}

.ct-autorizacion .ct-ayuda {
    margin-top: 12px;
}

/* El boton de crear se queda a la vista mientras se baja por el formulario,
   con el motivo encima si todavia falta algo. */
.ct-accion-fija {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 12px -24px -20px;
    padding: 12px 24px 18px;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    border-radius: 0 0 18px 18px;
    background: linear-gradient(to top, var(--ct-papel) 78%, rgba(255, 253, 251, 0));
}

.ct-falta {
    display: flex;
    gap: 6px;
    min-height: 1.4em;
    margin-bottom: 8px;
    color: var(--ct-tinta-suave);
    font-size: .9rem;
}

.ct-falta:empty {
    min-height: 0;
    margin: 0;
}

.ct-pila {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.ct-entrada-pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--ct-linea);
    color: var(--ct-tinta-suave);
    font-size: .84rem;
    text-align: center;
}

@media (min-width: 600px) and (min-height: 720px) {
    .ct-entrada.dk-fondo-chispas {
        align-items: center;
    }
}

/* ---------------------------------------------------------------------------
   EL PANEL
   Telefono: cabecera corta arriba y barra fija abajo. Escritorio: la
   navegacion al lado, en dos bloques.
   --------------------------------------------------------------------------- */

.ct-panel {
    min-height: 100vh;
    min-height: 100dvh;
}

.ct-lateral {
    display: none;
}

.ct-cabecera-movil {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 16px;
    padding-top: max(4px, env(safe-area-inset-top));
    border-bottom: 1px solid var(--ct-linea);
    background: rgba(253, 246, 241, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.ct-cabecera-movil .ct-marca-logo {
    height: 26px;
}

.ct-quien-movil {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ct-tinta);
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
}

.ct-principal {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 18px 16px calc(var(--ct-barra-alto) + 32px + env(safe-area-inset-bottom));
}

.ct-principal:focus {
    outline: none;
}

.ct-avisos:empty {
    display: none;
}

.ct-barra {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: grid;
    /* Seis desde el 15/09: «Avisos» entre Dkards y Chispa. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--ct-linea);
    background: var(--ct-papel);
    box-shadow: 0 -6px 18px rgba(27, 16, 12, .06);
}

.ct-barra-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--ct-barra-alto);
    padding: 6px 2px;
    color: var(--ct-tinta-suave);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
}

.ct-barra-item .ct-ico {
    width: 22px;
    height: 22px;
}

.ct-barra-item[aria-current="page"] {
    color: var(--ct-naranja-hondo);
}

.ct-barra-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--ct-naranja);
}

/* En el detalle de un pedido, WhatsApp ocupa el sitio de la barra. */
.ct-en-detalle .ct-barra {
    display: none;
}

.ct-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.ct-nav-bloque {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-nav-bloque--segundo {
    padding-top: 14px;
    border-top: 1px solid var(--ct-linea);
}

.ct-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 11px;
    background: none;
    color: var(--ct-tinta);
    font-weight: 600;
    font-size: .96rem;
    /* Pedido del dueño (14/09): «Dkards a los que escribiste» parte en dos
       renglones y con el interlineado heredado se veian muy separados. */
    line-height: 120%;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ct-nav-item:hover {
    background: #f6eee8;
    color: var(--ct-tinta);
}

.ct-nav-item .ct-ico {
    width: 20px;
    height: 20px;
}

.ct-nav-item[aria-current="page"] {
    background: #fde9dc;
    color: var(--ct-naranja-hondo);
}

.ct-quien {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: var(--ct-crema);
}

.ct-quien:empty {
    display: none;
}

.ct-avatar {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ct-tinta);
    color: #fff;
    font-weight: 700;
}

.ct-quien-datos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ct-quien-nombre,
.ct-quien-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-quien-nombre {
    font-weight: 700;
}

.ct-quien-email {
    color: var(--ct-tinta-suave);
    font-size: .82rem;
}

@media (min-width: 900px) {
    .ct-panel {
        display: grid;
        grid-template-columns: var(--ct-lateral) minmax(0, 1fr);
    }

    .ct-lateral {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 22px;
        height: 100vh;
        height: 100dvh;
        padding: 22px 16px;
        overflow-y: auto;
        border-right: 1px solid var(--ct-linea);
        background: var(--ct-papel);
    }

    .ct-cabecera-movil,
    .ct-barra,
    .ct-en-detalle .ct-barra {
        display: none;
    }

    .ct-principal {
        max-width: 1000px;
        margin: 0;
        padding: 34px 44px 64px;
    }
}

/* ---------------------------------------------------------------------------
   LAS VISTAS
   --------------------------------------------------------------------------- */

.ct-vista-cabeza {
    margin-bottom: 18px;
}

.ct-vista-titulo {
    font-weight: 800;
    font-size: 1.7rem;
}

.ct-vista-sub {
    margin-top: 4px;
    color: var(--ct-tinta-suave);
}

.ct-volver {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    margin: -6px 0 2px -6px;
    padding: 0 6px;
    font-weight: 600;
    text-decoration: none;
}

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

.ct-seccion {
    margin-top: 28px;
}

.ct-seccion:first-child {
    margin-top: 0;
}

.ct-seccion-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 12px;
    margin-bottom: 10px;
}

.ct-seccion-titulo {
    font-weight: 800;
    font-size: 1.22rem;
}

.ct-tarjeta {
    padding: 18px;
    border: 1px solid var(--ct-linea);
    border-radius: 16px;
    background: var(--ct-papel);
    box-shadow: var(--ct-sombra-suave);
}

.ct-pila-tarjetas {
    display: grid;
    gap: 14px;
}

.ct-tarjeta-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 8px;
}

.ct-tarjeta-titulo {
    font-family: Barlow, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.06rem;
    line-height: 1.3;
}

.ct-negocio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-weight: 700;
}

.ct-negocio-nombre {
    min-width: 0;
}

.ct-logo {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 10px;
    background: #f1e9e3;
    color: var(--ct-tinta);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .02em;
}

/* Los detalles de un servicio para el cliente (16/09). */
.ct-seccion-nota {
    color: var(--ct-tinta-suave);
    font-size: .86rem;
}

.ct-detalle + .ct-detalle {
    margin-top: 18px;
}

.ct-detalle-titulo {
    margin: 0 0 6px;
    color: var(--ct-tinta);
    font-size: 1rem;
    font-weight: 700;
}

.ct-detalle-texto {
    color: var(--ct-tinta);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ct-detalle-texto p {
    margin: 0 0 8px;
}

.ct-detalle-texto ul,
.ct-detalle-texto ol {
    margin: 0 0 8px;
    padding-left: 22px;
}

.ct-detalle-texto li + li {
    margin-top: 3px;
}

.ct-archivos {
    margin-top: 20px;
}

/* Los tipos de bloque (17/09): lista con avance, datos, itinerario y botones. */
.ct-avance-lista {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 10px;
}

.ct-avance-lista-riel {
    position: relative;
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: var(--ct-crema);
    box-shadow: inset 0 0 0 1px var(--ct-linea);
    overflow: hidden;
}

.ct-avance-lista-barra {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ct-naranja);
    transition: width .3s ease;
}

.ct-avance-lista--completa .ct-avance-lista-barra {
    background: var(--ct-ok);
}

.ct-avance-lista-texto {
    flex: none;
    color: var(--ct-tinta-suave);
    font-size: .86rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ct-avance-lista--completa .ct-avance-lista-texto {
    color: var(--ct-ok);
}

.ct-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ct-tinta);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.ct-check-marca {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 2px solid var(--ct-linea-fuerte);
    border-radius: 7px;
    background: var(--ct-papel);
    color: #fff;
}

.ct-check-marca svg {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.ct-check--hecho .ct-check-marca {
    border-color: var(--ct-ok);
    background: var(--ct-ok);
}

.ct-check--hecho .ct-check-texto {
    color: var(--ct-tinta-suave);
}

.ct-datos-clave {
    display: grid;
    margin: 0;
    border: 1px solid var(--ct-linea);
    border-radius: 12px;
    background: var(--ct-papel);
    overflow: hidden;
}

.ct-dato-clave {
    display: grid;
    grid-template-columns: minmax(7rem, 34%) 1fr;
    gap: 12px;
    padding: 10px 14px;
}

.ct-dato-clave + .ct-dato-clave {
    border-top: 1px solid var(--ct-linea);
}

.ct-dato-clave dt {
    color: var(--ct-tinta-suave);
    font-size: .88rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ct-dato-clave dd {
    margin: 0;
    color: var(--ct-tinta);
    overflow-wrap: anywhere;
}

.ct-itinerario {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ACOTADO A .ct-itinerario, Y NO ES DETALLE (el dueño, 18/09: «el formulario
   de la cuenta se ve todo en columna»). `.ct-paso` tambien es el nombre de las
   pantallas de ENTRADA —el correo, el codigo— en cuenta.html. Suelta, esta
   regla les ponia `display: flex` y la linea vertical del itinerario: el
   titulo, el texto y el formulario salian uno al lado del otro, cada uno de
   un dedo de ancho, y el boton de Google se salia de la caja. Estuvo asi desde
   que entro el itinerario (16/09). */
.ct-itinerario > .ct-paso {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}

.ct-itinerario > .ct-paso:last-child {
    padding-bottom: 0;
}

/* La linea que une los puntos, del centro de uno al siguiente. */
.ct-itinerario > .ct-paso:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 0;
    left: 10px;
    width: 2px;
    background: var(--ct-linea);
}

.ct-itinerario > .ct-paso--hecho:not(:last-child)::before {
    background: var(--ct-ok-borde);
}

.ct-paso-punto {
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--ct-linea-fuerte);
    border-radius: 50%;
    background: var(--ct-papel);
    color: #fff;
}

.ct-paso-punto svg {
    width: 13px;
    height: 13px;
    stroke-width: 3;
}

.ct-paso--hecho .ct-paso-punto {
    border-color: var(--ct-ok);
    background: var(--ct-ok);
}

.ct-paso-cuerpo {
    min-width: 0;
    padding-top: 1px;
}

.ct-paso-cuerpo p {
    margin: 0;
}

.ct-paso-cuando {
    color: var(--ct-naranja-texto);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.ct-paso--hecho .ct-paso-cuando {
    color: var(--ct-tinta-suave);
}

.ct-paso-titulo {
    color: var(--ct-tinta);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ct-paso-detalle {
    margin-top: 2px;
    color: var(--ct-tinta-suave);
    font-size: .92rem;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.ct-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ct-enlace-boton {
    max-width: 100%;
}

.ct-enlace-boton span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 520px) {
    .ct-dato-clave {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .ct-enlaces {
        flex-direction: column;
    }

    .ct-enlace-boton {
        justify-content: center;
    }
}

.ct-archivos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-archivo--imagen {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 104px;
}

.ct-aviso-foto.ct-archivo-foto {
    width: 104px;
    height: 104px;
}

.ct-archivo--descarga {
    flex-basis: 100%;
}

.ct-archivo-nombre {
    min-width: 0;
    color: var(--ct-tinta-suave);
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.ct-archivo-descargar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--ct-linea-fuerte);
    border-radius: 12px;
    background: #fff;
    color: var(--ct-tinta);
    text-decoration: none;
}

.ct-archivo-descargar:hover {
    border-color: var(--ct-tinta-suave);
}

.ct-archivo-descargar .ct-archivo-nombre {
    color: var(--ct-tinta);
    font-size: .92rem;
    font-weight: 600;
}

.ct-archivo-peso {
    flex: none;
    color: var(--ct-tinta-suave);
    font-size: .8rem;
}

/* La invitacion de un negocio (16/09): quien invita, arriba de la entrada. */
.ct-invitacion {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid var(--ct-info-borde);
    border-radius: 14px;
    background: var(--ct-info-fondo);
}

.ct-invitacion .ct-invitacion-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.ct-invitacion-titulo {
    margin: 0;
    color: var(--ct-tinta);
    font-weight: 700;
    line-height: 1.3;
}

.ct-invitacion-nota {
    margin: 3px 0 0;
    color: var(--ct-tinta-suave);
    font-size: .9rem;
    line-height: 1.4;
}

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

.ct-logo--chico {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: .6rem;
}

.ct-logo--grande {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: .95rem;
}

.ct-numero {
    color: var(--ct-tinta-suave);
    font-size: .92rem;
}

.ct-codigo-pedido {
    color: var(--ct-tinta);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.ct-prometido {
    margin: 8px 0 2px;
    font-family: Blinker, Barlow, sans-serif;
    font-weight: 800;
    font-size: 1.38rem;
    line-height: 1.2;
}

.ct-prometido--pasado {
    color: #8a4b00;
}

.ct-resumen {
    margin: 6px 0 2px;
}

.ct-total-linea {
    margin: 6px 0 2px;
    color: var(--ct-tinta-suave);
}

.ct-monto {
    color: var(--ct-tinta);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* EL CODIGO DE MONEDA, Y DONDE SE PIERDE.
   ---------------------------------------------------------------------------
   Tenia `--ct-tinta-suave` fijo —un gris pensado para el papel— y dentro del
   boton rojo de pagar desaparecia: se leia «Pagar $ 11.000» y el «COP» no
   estaba. Lo mismo en la linea verde de «Pagado».

   NO SE ARREGLA CON UNA REGLA POR SITIO: ya habia dos —`.ct-btn--pagar-vivo
   .ct-monto` y `.ct-pagado-linea .ct-monto`— que ponian `color: inherit` en el
   PADRE, y el color propio de este span ganaba igual. Se arregla al reves: el
   color sale de una variable, y la declara el CONTENEDOR que sabe sobre que
   fondo esta. `.ct-btn--primario` la declara para todos los botones de color,
   presentes y futuros, que es lo que evita que el proximo boton estrene el
   mismo fallo.

   Y NO CON `opacity` A SECAS: al 68% daba 3,71:1 sobre el rojo del boton —
   medido— y esto es texto de 12 px, que necesita 4,5:1. Al 88% da 6:1 en el
   boton y 4,5:1 en el verde de «Pagado». Sobre el papel no cambia nada: ahi
   sigue el gris de siempre, que es el que lo mantiene discreto. */
.ct-mon {
    margin-left: 4px;
    color: var(--ct-mon-color, var(--ct-tinta-suave));
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .06em;
}

.ct-btn--primario,
.ct-pagado-linea,
.ct-pago-curso-linea {
    --ct-mon-color: color-mix(in srgb, currentColor 88%, transparent);
}

.ct-sin-precio {
    color: var(--ct-tinta-suave);
    font-weight: 600;
}

.ct-ultimo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.ct-ultimo-texto {
    flex: 1 1 260px;
}

.ct-primer-uso p + p {
    margin-top: 6px;
}

.ct-bienvenida {
    margin-bottom: 18px;
}

/* ---------- Estados del pedido: color, glifo y texto ---------- */

.ct-chips-estado {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ct-estado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    border: 1px solid transparent;
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.ct-estado .ct-ico {
    width: 1em;
    height: 1em;
}

.ct-estado--pendiente { background: #f2ece8; border-color: #e2d8d1; color: #5c4d45; }
.ct-estado--confirmado { background: #e8f0fb; border-color: #cddcf2; color: #1d4f91; }
.ct-estado--en_proceso { background: #fdf1dc; border-color: #f4dcb0; color: #8a4b00; }
.ct-estado--entregado { background: #e5f4ec; border-color: #c7e6d5; color: #1f6b47; }
.ct-estado--cancelado { background: #fbe9e7; border-color: #f2cdc8; color: #a3261c; }
.ct-estado--por_cotizar { background: #f3ebf9; border-color: #e1d0ef; color: #6a3a8c; }
/* PAGADO: el verde de «esto esta bien», en firme y no en el tono claro de
   «entregado». Son dos cosas que pueden salir juntas en la misma fila —un
   pedido entregado Y pagado— y tienen que distinguirse de un vistazo: si los
   dos fueran el mismo verde palido, la fila diria dos veces lo mismo. */
.ct-estado--pagado {
    background: var(--ct-ok);
    border-color: var(--ct-ok);
    color: #ffffff;
    font-weight: 700;
}

/* LA NOVEDAD (el dueño, 18/09): el naranja de la marca, que en esta pantalla
   solo usan los botones principales y el foco: salta a la vista sin
   confundirse con un estado del pedido. */
.ct-estado--novedad {
    background: #fff1e8;
    border-color: #f5b88f;
    color: var(--ct-naranja-hondo);
}

.ct-estado--novedad .ct-glifo { color: var(--ct-naranja); }

/* EL NÚMERO EN «PEDIDOS»: una píldora al final del renglón en el menú de
   escritorio, y un globo sobre el icono en la barra del teléfono, que no
   tiene sitio al lado. */
.ct-nav-novedad {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--ct-naranja);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1;
}

.ct-barra-item .ct-nav-novedad {
    position: absolute;
    top: 6px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 0 5px;
    font-size: .68rem;
    box-shadow: 0 0 0 2px #fff;
}
.ct-estado--otro,
.ct-estado--apagado { background: #f2efec; border-color: #e2dcd7; color: #5c4d45; }

/* ---------- «Avisos que pediste» y la autorizacion por aceptar (15/09) ---------- */

/* Lo que se pidio: su foto (o su inicial) al lado del nombre, la variacion y
   el precio de hoy. */
.ct-aviso-producto {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 8px;
}

.ct-aviso-foto {
    display: grid;
    flex: none;
    place-items: center;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border: 1px solid var(--ct-linea);
    border-radius: 12px;
    background: #f7f1ec;
    color: var(--ct-tinta-suave);
    font-family: Barlow, system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
}

.ct-aviso-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-aviso-datos {
    min-width: 0;
}

.ct-aviso-nombre {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ct-aviso-variacion {
    color: var(--ct-tinta-suave);
    font-size: .9rem;
}

.ct-aviso-precio {
    margin-top: 2px;
    font-weight: 600;
}

/* Con foto, la miniatura es un boton que la abre en grande. */
.ct-aviso-foto-boton {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.ct-aviso-foto-boton:focus-visible {
    outline: 3px solid var(--ct-naranja-texto);
    outline-offset: 2px;
}

/* La foto en grande: el <dialog> sin caja, sobre un fondo oscuro. Se cierra
   tocando donde sea. */
.ct-visor {
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    cursor: zoom-out;
}

.ct-visor::backdrop {
    background: rgba(20, 12, 8, .86);
}

.ct-visor-marco {
    margin: 0;
}

.ct-visor-foto {
    display: block;
    max-width: min(92vw, 960px);
    max-height: 80vh;
    max-height: 80dvh;
    border-radius: 14px;
    background: #fff;
    object-fit: contain;
}

.ct-visor-titulo {
    margin-top: 10px;
    color: #fff;
    font-weight: 600;
    text-align: center;
}

.ct-visor-cerrar {
    position: fixed;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
}

.ct-visor-cerrar .ct-ico {
    width: 22px;
    height: 22px;
}

.ct-visor-cerrar:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* En escritorio cada aviso es una FILA y no una tarjeta: foto, lo que se
   pidio, el negocio con el dia, el estado y el boton, en una linea; caben
   muchos mas a la vista (el dueño, 15/09: «que se vean más filas»). El mismo
   marcado que en el telefono: las dos cajas de dentro se disuelven con
   `display: contents` y sus hijos van a la rejilla de la tarjeta. */
@media (min-width: 900px) {
    .ct-pedido-de-aviso {
        display: grid;
        grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1.2fr) auto auto;
        grid-template-areas:
            "foto datos negocio estado accion"
            "foto datos fecha estado accion";
        align-items: center;
        gap: 2px 18px;
        padding: 12px 18px;
    }

    .ct-pedido-de-aviso .ct-tarjeta-cabeza,
    .ct-pedido-de-aviso .ct-aviso-producto {
        display: contents;
    }

    .ct-pedido-de-aviso .ct-aviso-foto {
        grid-area: foto;
        width: 64px;
        height: 64px;
    }

    .ct-pedido-de-aviso .ct-aviso-datos {
        grid-area: datos;
    }

    .ct-pedido-de-aviso .ct-negocio {
        grid-area: negocio;
        align-self: end;
    }

    .ct-pedido-de-aviso .ct-numero {
        grid-area: fecha;
        align-self: start;
        font-size: .85rem;
    }

    .ct-pedido-de-aviso .ct-estado {
        grid-area: estado;
        justify-self: end;
    }

    .ct-pedido-de-aviso .ct-acciones {
        grid-area: accion;
        margin-top: 0;
    }

    .ct-pila-tarjetas:has(> .ct-pedido-de-aviso) {
        gap: 10px;
    }
}

/* La version nueva de la autorizacion, por aceptar: la misma caja de la
   casilla que al crear la cuenta, con lo que cambio encima. */
.ct-autorizacion--nueva {
    margin: 0 0 18px;
}

.ct-autorizacion-novedad {
    margin: 0 0 12px;
    font-weight: 600;
}

.ct-autorizacion-aceptada {
    margin: 0 0 18px;
}

/* ---------- El avance en cuatro tramos ---------- */

.ct-avance-caja {
    margin-top: 12px;
}

.ct-avance {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

.ct-avance-paso {
    position: relative;
    padding-top: 12px;
    color: var(--ct-tinta-tenue);
    font-size: .76rem;
    line-height: 1.25;
}

.ct-avance-paso::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 6px;
    border-radius: 99px;
    background: var(--ct-linea);
}

.ct-avance-paso--hecho::before {
    background: var(--ct-ok);
}

.ct-avance-paso--actual {
    color: var(--ct-tinta);
    font-weight: 700;
}

.ct-avance-paso--actual::before {
    background: var(--ct-naranja);
}

.ct-avance-resumen {
    color: var(--ct-tinta-suave);
    font-size: .86rem;
}

/* ---------- Pagar: el hueco del modulo que viene ---------- */

/* ---------- Pagar en línea (18/09) ----------
   El bloque tiene TRES formas —pagar, esperando, pagado— y las tres viven en
   `.ct-pagar`: en columna, porque cada una lleva su línea de texto encima o
   debajo del botón. Dentro de `.ct-acciones` de una tarjeta vuelve a ser una
   pieza más de la fila, que es donde estaba antes. */

.ct-pagar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.ct-acciones > .ct-pagar {
    gap: 6px;
}

.ct-pagar .ct-ayuda {
    margin: 0;
    max-width: 46ch;
}

/* EL «DETALLE DE LA COTIZACIÓN» (el dueño, 18/09). Con el mismo filete que la
   nota del pago y la de un paso del seguimiento: las tres son un mensaje del
   negocio, y se leen igual. Aquí puede traer párrafos y listas del editor. */
.ct-detalle-cotizacion {
    padding-left: 12px;
    border-left: 2px solid var(--ct-linea);
    color: var(--ct-tinta);
    font-size: .95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ct-detalle-cotizacion p { margin: 0 0 .5em; }
.ct-detalle-cotizacion p:last-child { margin-bottom: 0; }
.ct-detalle-cotizacion ul,
.ct-detalle-cotizacion ol { margin: 0 0 .5em; padding-left: 1.2em; }

/* LA NOTA QUE ESCRIBE EL NEGOCIO (el dueño, 18/09). Con su filete a la
   izquierda, como la nota de un paso del seguimiento: las dos son lo mismo
   —un mensaje suyo— y se leen igual. Lo de arriba lo decimos nosotros; esto
   lo dice él, y la diferencia tiene que verse. */
.ct-pago-nota {
    padding-left: 10px;
    border-left: 2px solid var(--ct-linea);
    white-space: pre-line;
}

/* El botón que SÍ cobra. El de antes —línea discontinua, apagado, con la
   etiqueta «Próximamente»— se fue entero con sus clases: no queda ninguna
   pantalla que prometa un pago para después.

   Y PESA MAS QUE LOS DEMAS (el dueño, 17/09). Compartía `ct-btn--primario`
   con «Escribir a Insignia Store» y se veían gemelos: dos botones del mismo
   color y del mismo tamaño, uno al lado del otro, no dicen cuál es el que
   resuelve el pedido. Se diferencia por tamaño y por un halo del naranja de
   marca, NO por otro color de fondo: el naranja #f2600c da 3,25:1 con texto
   blanco y como fondo de un botón con letras no pasa (ver la cabecera de este
   archivo). Al de WhatsApp no se le baja el rango porque en un pedido sin
   pago en línea —que hoy son casi todos— él es la acción principal. */
.ct-btn--pagar-vivo {
    width: 100%;
    min-height: 52px;
    font-size: 1.06rem;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(194, 72, 5, .3), 0 0 0 3px rgba(242, 96, 12, .16);
}

.ct-btn--pagar-vivo:hover {
    box-shadow: 0 10px 26px rgba(194, 72, 5, .34), 0 0 0 4px rgba(242, 96, 12, .2);
}

.ct-btn--pagar-vivo .ct-monto {
    color: inherit;
    font-weight: 700;
}

/* Ya pagado. En verde y con el monto, que es lo que la persona busca cuando
   vuelve a mirar el pedido tres días después. */
.ct-pagado-linea,
.ct-pago-curso-linea {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .95rem;
}

.ct-pagado-linea {
    color: var(--ct-ok);
}

.ct-pagado-linea .ct-monto {
    color: inherit;
    font-weight: 700;
}

/* Esperando: ámbar y no rojo. Un PSE tarda minutos en confirmarse y en ese
   rato no ha fallado nada — pintarlo como error es asustar a alguien que ya
   pagó bien. */
/* PAGADO, EN SU PROPIA CAJA (el dueño, 17/09).
   ---------------------------------------------------------------------------
   «Pagando» tenia contorno desde el principio y «Pagado» no, y mientras los
   dos vivian al final de «Lo que pediste» no se notaba. Al subir al principio
   del detalle, justo debajo de las tres cajas del resumen —Estado, Prometido
   para, Total—, un texto suelto sin contorno se lee como el pie de la caja de
   encima y se pierde. Misma forma que la de «pagando», con el verde de «esto
   esta bien» que ya existe en la paleta. */
/* ¿CÓMO VAS A PAGAR? (el dueño, 18/09): en línea, transferencia o efectivo.
   ---------------------------------------------------------------------------
   Las formas como botones grandes en fila —se tocan con el pulgar—, la
   elegida marcada con el color de la marca, y debajo lo que toca hacer con
   esa: el botón de pagar, la cuenta a la que transferir o la nota del
   efectivo. Una sola a la vez: tres paneles abiertos son tres instrucciones
   que compiten. */
.ct-pagar--metodos {
    align-items: stretch;
    width: 100%;
    gap: 12px;
}

.ct-pago-pregunta {
    margin: 0;
    color: var(--ct-tinta);
    font-weight: 700;
}

.ct-pago-metodos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ct-pago-metodo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--ct-linea-fuerte);
    border-radius: 12px;
    background: #fff;
    color: var(--ct-tinta);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ct-pago-metodo:hover { border-color: var(--ct-tinta-suave); }
.ct-pago-metodo:focus-visible { outline: none; box-shadow: var(--ct-foco); }
.ct-pago-metodo:disabled { cursor: wait; opacity: .7; }
.ct-pago-metodo .ct-ico { width: 18px; height: 18px; flex: none; }

.ct-pago-metodo--elegido {
    border-color: var(--ct-naranja);
    background: #fff4ec;
    color: var(--ct-naranja-hondo);
    box-shadow: inset 0 0 0 1px var(--ct-naranja);
}

.ct-pago-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.ct-pago-panel .ct-ayuda { margin: 0; max-width: 52ch; }

.ct-pago-instruccion {
    margin: 0;
    color: var(--ct-tinta);
    font-weight: 600;
}

/* La cuenta, como la lee quien va a transferir: el rótulo pequeño y el dato
   grande, y el número con su botón de copiar al lado —dictarlo a mano de una
   pantalla a otra es la forma más común de transferir a una cuenta que no
   existe—. */
.ct-pago-cuenta {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 14px;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--ct-linea);
    border-radius: 12px;
    background: #fff;
}

.ct-pago-cuenta dt { color: var(--ct-tinta-suave); font-size: .85rem; }

.ct-pago-cuenta dd {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin: 0;
}

.ct-pago-cuenta-valor {
    color: var(--ct-tinta);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ct-pago-copiar { width: 36px; height: 36px; }
.ct-pago-copiar .ct-ico { width: 16px; height: 16px; }
.ct-pago-copiar--hecho { color: var(--ct-ok); }

.ct-pago-enviados-linea {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--ct-ok);
    font-weight: 700;
}

.ct-pago-enviados-linea .ct-ico { width: 18px; height: 18px; flex: none; }
.ct-pago-enviados { display: grid; gap: 4px; }

.ct-pago-subir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* El botón es un <label> del campo de archivo, que va escondido: el foco del
   teclado cae en el campo, así que el anillo se le pinta al botón. */
.ct-pago-enviar { cursor: pointer; }
.ct-pago-subir input:focus-visible + .ct-pago-enviar { box-shadow: var(--ct-foco); }
.ct-pago-enviar--ocupado { opacity: .7; pointer-events: none; cursor: wait; }

/* EL RECARGO (18/09), en su propia línea y ANTES del botón: lo que la ley
   colombiana pide para poder cobrarlo. */
.ct-pago-recargo {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ct-info-borde);
    border-radius: 10px;
    background: var(--ct-info-fondo);
}

.ct-pago-recargo-linea {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0;
    color: var(--ct-info);
    font-weight: 600;
}

.ct-pago-recargo-monto { white-space: nowrap; }

@media (max-width: 480px) {
    .ct-pago-metodo { flex: 1 1 100%; }
    .ct-pago-cuenta { grid-template-columns: 1fr; gap: 2px; }
    .ct-pago-cuenta dd { margin-bottom: 6px; }
}

.ct-pagado {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ct-ok-fondo);
    border: 1px solid var(--ct-ok-borde);
}

.ct-pago-curso {
    padding: 12px 14px;
    border-radius: 12px;
    background: #fdf6ec;
    border: 1px solid #e8d5b5;
}

/* Y separados del resumen. Solo cuando van pegados a el: en el renglón de la
   lista de pedidos el hueco ya trae su propio espacio, y ahi este margen
   dejaria un escalón. */
.ct-datos-pedido + .ct-pagado,
.ct-datos-pedido + .ct-pago-curso {
    margin-top: 14px;
}

.ct-pago-curso-linea {
    color: #8a5a17;
    font-weight: 600;
}

/* EL INTENTO QUE SALIO MAL, con la misma forma que «Pagado» y «Pagando».
   ---------------------------------------------------------------------------
   Los tres estados del pago son la misma pregunta —¿qué pasó con mi plata?—
   y hasta hoy dos tenían caja y el tercero era una línea gris, del mismo
   tamaño que «podrás pagar con tarjeta o PSE». Y es justo al revés: de los
   tres, este es el único que pide hacer algo. */
.ct-pago-falla {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ct-error-fondo);
    border: 1px solid var(--ct-error-borde);
}

.ct-pago-falla-linea {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ct-error);
}

.ct-pago-falla-linea svg { flex: none; }

/* «Pago de prueba» NO es un fallo, y por eso ya no comparte clase con uno:
   vive dentro del bloque verde de «Pagado» y ahí un rojo diría que algo salió
   mal. Es un dato al margen, y se ve como tal. */
.ct-pago-prueba {
    color: var(--ct-tinta-suave);
}

/* ---------- Dkards ---------- */

.ct-rejilla-dkards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: 14px;
}

.ct-dkard {
    display: flex;
    flex-direction: column;
}

.ct-dkard .ct-acciones {
    margin-top: auto;
    padding-top: 14px;
}

.ct-dkard .ct-acciones .ct-btn {
    flex: 1 1 auto;
}

.ct-dkard-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 10px;
}

.ct-dkard-nombres {
    flex: 1 1 140px;
    min-width: 0;
}

.ct-dkard-url {
    color: var(--ct-tinta-suave);
    font-size: .86rem;
    overflow-wrap: anywhere;
}

.ct-dkard-datos {
    color: var(--ct-tinta-suave);
    font-size: .92rem;
}

.ct-dkard-ultimo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 8px;
    font-size: .9rem;
}

.ct-dkard--apagado {
    background: #faf6f3;
    box-shadow: none;
}

.ct-dkard--apagado .ct-tarjeta-titulo {
    color: var(--ct-tinta-suave);
}

.ct-pie-nota {
    margin-top: 22px;
    color: var(--ct-tinta-suave);
    font-size: .92rem;
}

/* ---------- La Chispa ---------- */

.ct-chispa-tarjeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 28px;
    border-color: #f2d9c7;
    background: linear-gradient(135deg, #fff8f2, #fdece0);
}

.ct-chispa-tarjeta .ct-acciones {
    margin-top: 0;
}

.ct-chispa-icono {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #fff;
    color: var(--ct-naranja-texto);
}

.ct-chispa-icono .ct-ico {
    width: 24px;
    height: 24px;
}

.ct-chispa-cuerpo {
    flex: 1 1 240px;
    min-width: 0;
}

.ct-lista-check {
    display: grid;
    gap: 8px;
    margin: 14px 0;
    padding: 0;
    list-style: none;
}

.ct-lista-check li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ct-lista-check .ct-ico {
    margin-top: 3px;
    color: var(--ct-ok);
}

.ct-direccion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 10px 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ct-crema);
    font-weight: 700;
    word-break: break-all;
}

/* Sin direccion todavia (la tomo otra persona mientras era un borrador): el
   mismo hueco, sin la tinta de una direccion que se pueda copiar. */
.ct-direccion--vacia {
    color: var(--ct-tinta-suave);
    font-weight: 600;
}

/* ---------- Estados vacios, carga y error ---------- */

.ct-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 34px 20px;
    border: 1px solid var(--ct-linea);
    border-radius: 18px;
    background: var(--ct-papel);
    text-align: center;
}

.ct-vacio-icono {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fdeee4;
    color: var(--ct-naranja-texto);
}

.ct-vacio-icono .ct-ico {
    width: 26px;
    height: 26px;
}

.ct-vacio-titulo {
    font-weight: 800;
    font-size: 1.22rem;
}

.ct-vacio-texto {
    max-width: 48ch;
    color: var(--ct-tinta-suave);
}

.ct-vacio .ct-nota {
    width: 100%;
    max-width: 560px;
    text-align: left;
}

.ct-vacio--error .ct-vacio-icono {
    background: var(--ct-error-fondo);
    color: var(--ct-error);
}

.ct-cargando {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    color: var(--ct-tinta-suave);
}

.ct-girador {
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(178, 67, 3, .22);
    border-top-color: var(--ct-naranja-texto);
    border-radius: 50%;
    animation: ct-girar .8s linear infinite;
}

.ct-esqueleto {
    display: grid;
    flex-basis: 100%;
    gap: 12px;
    margin-top: 6px;
}

.ct-esqueleto span {
    height: 86px;
    border-radius: 16px;
    background: linear-gradient(90deg, #f3ebe5 25%, #faf5f1 50%, #f3ebe5 75%);
    background-size: 200% 100%;
    animation: ct-brillo 1.4s ease-in-out infinite;
}

@keyframes ct-girar {
    to { transform: rotate(360deg); }
}

@keyframes ct-brillo {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Mis pedidos: busqueda y filtros ---------- */

.ct-buscar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.ct-buscar-lupa {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    color: var(--ct-tinta-suave);
    transform: translateY(-50%);
    pointer-events: none;
}

.ct-buscar-control {
    flex: 1;
    min-width: 0;
    padding-left: 42px;
}

.ct-buscar-control::-webkit-search-cancel-button {
    cursor: pointer;
}

.ct-buscar-boton {
    flex-shrink: 0;
    min-height: 48px;
}

.ct-filtros {
    display: grid;
    gap: 14px;
    margin-bottom: 8px;
}

/* El rotulo ENCIMA de sus botones y no al lado (el dueño, 14/09). Al lado le
   quitaba ancho a la fila, y cuando los botones saltaban de renglon no se
   sabia bien a cual acompañaba. */
.ct-filtro {
    display: grid;
    gap: 4px;
    min-width: 0;
}

/* El 3px de los lados es el aire de .ct-chips (para el anillo del foco): asi
   el rotulo empieza justo donde empieza el primer boton. */
.ct-filtro-rotulo {
    padding: 0 3px;
    color: var(--ct-tinta-suave);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* La raya entre lo que filtra y la lista de pedidos (el dueño, 14/09). La pone
   vistaPedidos() solo cuando hay buscador o filtros encima. */
.ct-lista-zona--separada {
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--ct-linea);
}

/* En el telefono la fila se desliza; en escritorio se reparte en renglones. */
.ct-chips {
    display: flex;
    flex: 1;
    gap: 8px;
    min-width: 0;
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ct-chips::-webkit-scrollbar {
    display: none;
}

.ct-chip {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1.5px solid var(--ct-linea);
    border-radius: 99px;
    background: #fff;
    color: var(--ct-tinta);
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.ct-chip:hover {
    border-color: var(--ct-linea-fuerte);
}

.ct-chip--activo {
    border-color: var(--ct-naranja-texto);
    background: #fdeee4;
    color: var(--ct-naranja-hondo);
}

.ct-chip--activo:hover {
    border-color: var(--ct-naranja-hondo);
}

/* En cero se ve atenuado pero se puede tocar: lleva a su vacio, no a un
   callejon. */
.ct-chip--cero {
    color: var(--ct-tinta-tenue);
    border-style: dashed;
}

.ct-chip-n {
    padding: 1px 7px;
    border-radius: 99px;
    background: #f1e9e3;
    color: var(--ct-tinta-suave);
    font-size: .76rem;
    font-weight: 700;
}

.ct-chip--activo .ct-chip-n {
    background: #fff;
    color: var(--ct-naranja-hondo);
}

.ct-chip--mas {
    color: var(--ct-naranja-texto);
}

.ct-chip--mas .ct-ico {
    width: 1em;
    height: 1em;
}

@media (max-width: 899px) {
    .ct-chip--mas {
        display: none;
    }
}

@media (min-width: 900px) {
    .ct-chips {
        flex-wrap: wrap;
        overflow: visible;
    }

    .ct-chips:not(.ct-chips--todos) .ct-chip--extra {
        display: none;
    }
}

/* ---------- Mis pedidos: la lista ----------
   UN SOLO MARCADO para las dos formas: fila de tabla en escritorio y
   tarjeta en el telefono, repartiendo las mismas piezas con grid. */

.ct-lista-cabeza {
    display: none;
}

.ct-mes {
    margin: 22px 0 8px;
    color: var(--ct-tinta-suave);
    font-family: Barlow, system-ui, sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ct-lista-pedidos {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "dkard estado"
        "resumen resumen"
        "nota nota"
        "codigo total";
    align-items: center;
    gap: 6px 10px;
    padding: 14px 16px;
    border: 1px solid var(--ct-linea);
    border-radius: 14px;
    background: var(--ct-papel);
    box-shadow: var(--ct-sombra-suave);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ct-fila:hover {
    border-color: var(--ct-linea-fuerte);
    color: inherit;
}

.ct-fila-codigo { grid-area: codigo; color: var(--ct-tinta-suave); font-size: .86rem; }
.ct-fila-resumen { grid-area: resumen; }
.ct-fila-dkard { grid-area: dkard; display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; }
.ct-fila-dkard-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-fila-fecha { display: none; grid-area: fecha; color: var(--ct-tinta-suave); font-size: .9rem; }
.ct-fila-estado { grid-area: estado; justify-self: end; }
.ct-fila-nota { grid-area: nota; color: var(--ct-tinta-suave); font-size: .86rem; font-weight: 600; }
.ct-fila-total { grid-area: total; justify-self: end; text-align: right; }
.ct-fila-ir { display: none; grid-area: ir; color: var(--ct-tinta-tenue); }

.ct-fila-codigo .ct-codigo-pedido {
    color: var(--ct-tinta-suave);
    font-weight: 600;
}

@media (min-width: 760px) {
    .ct-lista-cabeza,
    .ct-fila {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.15fr) 72px minmax(0, 1.1fr) minmax(0, .95fr) 20px;
    }

    .ct-lista-cabeza {
        display: grid;
        gap: 0 12px;
        padding: 0 16px 6px;
        color: var(--ct-tinta-suave);
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .ct-lista-cabeza span:nth-child(5) {
        text-align: right;
    }

    .ct-fila {
        grid-template-areas:
            "codigo dkard fecha estado total ir"
            "resumen dkard fecha nota total ir";
        gap: 2px 12px;
    }

    .ct-fila-codigo {
        font-size: .95rem;
    }

    .ct-fila-codigo .ct-codigo-pedido {
        color: var(--ct-tinta);
        font-weight: 700;
    }

    .ct-fila-fecha-movil {
        display: none;
    }

    .ct-fila-resumen {
        color: var(--ct-tinta-suave);
        font-size: .9rem;
    }

    .ct-fila-fecha,
    .ct-fila-ir {
        display: block;
    }

    .ct-fila-estado {
        justify-self: start;
    }
}

.ct-lista-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 16px;
}

.ct-lista-cuenta {
    color: var(--ct-tinta-suave);
    font-size: .92rem;
}

.ct-lista-pie .ct-error-campo {
    flex-basis: 100%;
}

.ct-nota {
    margin-top: 22px;
    padding: 4px 14px 4px;
    border-radius: 12px;
    background: var(--ct-crema);
    color: var(--ct-tinta-suave);
    font-size: .92rem;
}

.ct-nota summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--ct-tinta);
    font-weight: 700;
    cursor: pointer;
}

.ct-nota[open] {
    padding-bottom: 14px;
}

.ct-nota strong {
    word-break: break-all;
}

/* ---------- El detalle de un pedido ---------- */

.ct-negocio-linea {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin-bottom: 4px;
    font-weight: 700;
}

.ct-datos-pedido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 10px;
}

.ct-dato {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--ct-linea);
    border-radius: 14px;
    background: var(--ct-papel);
}

.ct-dato-rotulo {
    color: var(--ct-tinta-suave);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ct-dato-valor {
    font-family: Blinker, Barlow, sans-serif;
    font-weight: 800;
    font-size: 1.32rem;
    line-height: 1.2;
}

.ct-dato-nota {
    color: var(--ct-tinta-suave);
    font-size: .88rem;
}

.ct-dato--prometido .ct-dato-valor {
    color: var(--ct-tinta);
}

.ct-lineas-cabeza {
    display: none;
}

.ct-lineas {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ct-linea);
    list-style: none;
}

.ct-linea {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "nombre sub"
        "cant sub";
    gap: 2px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ct-linea);
}

.ct-linea-nombre {
    display: flex;
    flex-direction: column;
    grid-area: nombre;
    font-weight: 600;
}

.ct-linea-variante {
    color: var(--ct-tinta-suave);
    font-size: .86rem;
    font-weight: 400;
}

/* Lo que ajustó el negocio (16/09): «Pediste 3» bajo el nombre, y lo quitado
   tachado al final de la lista. */
.ct-linea-ajuste {
    color: var(--ct-info, #1d4ed8);
    font-size: .82rem;
    font-weight: 500;
}

.ct-linea--quitada .ct-linea-nombre > span:first-child {
    text-decoration: line-through;
    color: var(--ct-tinta-suave);
    font-weight: 500;
}

.ct-linea--quitada .ct-linea-cant {
    font-style: italic;
}

.ct-linea-cant {
    grid-area: cant;
    color: var(--ct-tinta-suave);
    font-size: .9rem;
}

.ct-linea-cant .ct-monto {
    color: var(--ct-tinta-suave);
    font-weight: 600;
}

.ct-linea-sub {
    grid-area: sub;
    align-self: center;
    text-align: right;
}

/* La miniatura de cada producto (16/09): una columna propia a la izquierda,
   para que el nombre y «2 × $» sigan alineados entre si. Los servicios no la
   llevan y se quedan con su rejilla de siempre. */
.ct-linea--con-foto {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas:
        "foto nombre sub"
        "foto cant sub";
}

.ct-aviso-foto.ct-linea-foto {
    grid-area: foto;
    align-self: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    font-size: 1.15rem;
}

/* Lo quitado se sigue pudiendo ver, pero no compite con lo que sigue. */
.ct-linea--quitada .ct-linea-foto {
    opacity: .55;
    filter: grayscale(1);
}

@media (min-width: 760px) {
    .ct-lineas-cabeza,
    .ct-linea {
        grid-template-columns: minmax(0, 1fr) 190px 140px;
    }

    .ct-lineas-cabeza {
        display: grid;
        gap: 12px;
        padding-bottom: 6px;
        color: var(--ct-tinta-suave);
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .ct-lineas-cabeza span:last-child {
        text-align: right;
    }

    .ct-linea {
        grid-template-areas: "nombre cant sub";
        align-items: center;
    }

    /* La cabecera sigue en tres columnas: «Producto» cubre la foto y el
       nombre, y las dos de la derecha miden lo mismo en las dos rejillas. */
    .ct-linea--con-foto {
        grid-template-columns: 48px minmax(0, 1fr) 190px 140px;
        grid-template-areas: "foto nombre cant sub";
    }
}

.ct-totales {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    margin: 14px 0 0;
}

.ct-totales dt {
    display: flex;
    flex-direction: column;
    color: var(--ct-tinta-suave);
}

.ct-totales dd {
    margin: 0;
    text-align: right;
}

.ct-totales-nota {
    color: var(--ct-tinta-tenue);
    font-size: .8rem;
}

/* EL DESCUENTO, RESALTADO (el dueño, 18/09). Una franja verde de lado a lado:
   dt y dd son dos celdas de la rejilla con 16px de hueco en medio, así que el
   dt se estira con margen negativo hasta tocar al dd y la franja no se corta.
   El monto va en el mismo verde, con su menos delante. */
.ct-totales dt.ct-totales-descuento,
.ct-totales dd.ct-totales-descuento {
    padding: 8px 12px;
    background: var(--ct-ok-fondo);
    color: var(--ct-ok);
    --ct-mon-color: color-mix(in srgb, currentColor 88%, transparent);
}

.ct-totales dt.ct-totales-descuento {
    margin-right: -16px;
    padding-right: 28px;
    border-radius: 10px 0 0 10px;
    font-weight: 700;
}

.ct-totales dd.ct-totales-descuento {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 0 10px 10px 0;
}

.ct-descuento-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ct-descuento-rotulo .ct-ico {
    flex: none;
    width: 16px;
    height: 16px;
}

.ct-totales-descuento .ct-totales-nota {
    color: inherit;
    font-weight: 400;
    opacity: .85;
}

.ct-descuento-monto,
.ct-descuento-monto .ct-monto {
    color: var(--ct-ok);
    font-weight: 800;
    white-space: nowrap;
}

.ct-totales dt.ct-totales-total,
.ct-totales dd.ct-totales-total {
    padding-top: 10px;
    border-top: 1px solid var(--ct-linea);
    color: var(--ct-tinta);
    font-weight: 800;
    font-size: 1.14rem;
}

/* La raya de encima del total, entera: salía cortada en el hueco de 16px
   entre las dos columnas. Mismo arreglo que la franja del descuento. */
.ct-totales dt.ct-totales-total {
    margin-right: -16px;
    padding-right: 16px;
}

.ct-monto--total {
    font-size: 1.14rem;
}

.ct-lineas ~ .ct-pagar,
.ct-seccion > .ct-pagar {
    margin-top: 14px;
}

.ct-escribir {
    margin-top: 22px;
}

.ct-escribir .ct-ayuda {
    max-width: 60ch;
}

.ct-notas {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--ct-crema);
    white-space: pre-line;
}

/* En el telefono el WhatsApp va fijo abajo (ver .ct-barra-escribir) y el del
   flujo sobra; en escritorio es al reves. */
.ct-escribir-en-flujo {
    display: none;
}

.ct-barra-escribir {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    padding: 10px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--ct-linea);
    background: var(--ct-papel);
    box-shadow: 0 -6px 18px rgba(27, 16, 12, .08);
}

.ct-barra-escribir-nota {
    margin-bottom: 6px;
    color: var(--ct-tinta-suave);
    font-size: .8rem;
    text-align: center;
}

@media (min-width: 900px) {
    .ct-escribir-en-flujo {
        display: block;
    }

    .ct-barra-escribir {
        display: none;
    }
}

/* EN EL DETALLE HAY QUE DEJAR LIBRE LA BARRA DE WHATSAPP, NO LA DE
   NAVEGACION. La reserva de .ct-principal mide la barra de cinco (62 px), que
   en el detalle se esconde; la que queda fija es esta, y mide 111 px a 375 de
   ancho con su nota en dos lineas. Bajando del todo, el ultimo paso del
   seguimiento —o el final de «Lo que escribiste»— se quedaba 18 px debajo de
   ella, sin forma de leerlo. Con holgura para una tercera linea de nota; la
   zona segura del iPhone va aparte porque la barra tambien la suma. */
@media (max-width: 899px) {
    .ct-en-detalle .ct-principal {
        padding-bottom: calc(132px + 24px + env(safe-area-inset-bottom));
    }
}

/* ---------- Seguimiento ---------- */

.ct-seguimiento {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-paso-seg {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 18px;
}

.ct-paso-seg::before {
    content: "";
    position: absolute;
    top: 26px;
    bottom: 0;
    left: 11px;
    width: 2px;
    background: var(--ct-linea);
}

.ct-paso-seg:last-child {
    padding-bottom: 0;
}

.ct-paso-seg:last-child::before {
    display: none;
}

.ct-paso-seg-punto {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--ct-linea-fuerte);
    border-radius: 50%;
    background: #fff;
    color: #fff;
}

.ct-paso-seg-punto .ct-ico {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.ct-paso-seg--hecho .ct-paso-seg-punto {
    border-color: var(--ct-ok);
    background: var(--ct-ok);
}

.ct-paso-seg--hecho::before {
    background: var(--ct-ok);
}

.ct-paso-seg--actual .ct-paso-seg-punto {
    border-color: var(--ct-naranja);
    box-shadow: 0 0 0 4px rgba(242, 96, 12, .18);
}

.ct-paso-seg--cancelado .ct-paso-seg-punto {
    border-color: #a3261c;
    background: #a3261c;
}

.ct-paso-seg--saltado .ct-paso-seg-punto,
.ct-paso-seg--sin-registro .ct-paso-seg-punto {
    border-style: dashed;
}

.ct-paso-seg--futuro,
.ct-paso-seg--saltado,
.ct-paso-seg--sin-registro {
    color: var(--ct-tinta-tenue);
}

.ct-paso-seg-texto {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 1px;
}

.ct-paso-seg-detalle {
    color: var(--ct-tinta-suave);
    font-size: .9rem;
}

/* LO QUE ESCRIBIO EL NEGOCIO EN ESE PASO (el dueño, 17/09). Con filete a la
   izquierda y en la tinta normal, no en el gris de los detalles: es un
   mensaje de una persona, y en gris claro al lado de la fecha se lee como
   metadato. Solo aparece si el negocio marco la casilla al escribirla. */
.ct-paso-seg-nota {
    margin-top: 4px;
    padding-left: 10px;
    border-left: 2px solid var(--ct-linea);
    color: var(--ct-tinta);
    font-size: .92rem;
    white-space: pre-line;
}

.ct-paso-seg-ahora {
    color: var(--ct-naranja-texto);
    font-weight: 700;
}

/* LO QUE EL NEGOCIO ADJUNTO EN ESE PASO: la foto de la entrega debajo de
   «Entregado», el comprobante debajo de «Confirmado». Mas pequeñas que las de
   un servicio —ahi el archivo ES el contenido; aqui acompaña a un paso— y
   alineadas con la nota, que es el otro mensaje suyo. */
.ct-paso-seg-archivos {
    margin-top: 8px;
    gap: 10px;
}

.ct-paso-seg-archivos .ct-archivo--imagen { width: 84px; }
.ct-paso-seg-archivos .ct-aviso-foto.ct-archivo-foto { width: 84px; height: 84px; }

/* El nombre, a dos renglones. Aqui lo que se mira es la foto: un
   «guia-de-envio-con-nombre-largo.png» partido en cuatro estira el paso y
   empuja el resto del seguimiento hacia abajo. Entero sigue en el title. */
.ct-paso-seg-archivos .ct-archivo-nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .78rem;
    line-height: 1.25;
}

/* Los que no supieron de que paso eran (los de antes del 17/09). */
.ct-archivos-sueltos { margin-top: 16px; }

/* ---------- Mis datos y privacidad ---------- */

.ct-formulario-datos {
    max-width: 640px;
}

.ct-formulario-datos .ct-bloque--opcional {
    margin-top: 4px;
}

.ct-guardar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 6px;
}

.ct-caja-accion {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid var(--ct-linea);
    border-radius: 16px;
    background: var(--ct-papel);
}

.ct-caja-accion:first-child {
    margin-top: 0;
}

.ct-caja-accion-titulo {
    margin-bottom: 6px;
    font-family: Barlow, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.06rem;
}

.ct-caja-accion > p + p {
    margin-top: 8px;
}

.ct-caja-accion--peligro {
    border-color: var(--ct-error-borde);
}

.ct-tramite {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 99px;
    background: #fdf1dc;
    color: #8a4b00;
    font-size: .8rem;
    font-weight: 700;
}

.ct-lista-puntos {
    display: grid;
    gap: 6px;
    margin: 10px 0 0;
    padding-left: 20px;
    color: var(--ct-tinta-suave);
    font-size: .94rem;
}

.ct-cita {
    margin: 12px 0;
    padding: 12px 14px;
    border-left: 3px solid var(--ct-naranja);
    border-radius: 0 10px 10px 0;
    background: #fbf7f3;
    color: var(--ct-tinta-suave);
    font-size: .92rem;
    line-height: 1.55;
}

.ct-negocios-lista {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.ct-negocio-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 14px 16px;
    border: 1px solid var(--ct-linea);
    border-radius: 14px;
    background: var(--ct-papel);
}

.ct-negocio-fila-datos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ct-negocio-fila-datos strong {
    font-weight: 700;
}

.ct-negocio-fila-datos span {
    color: var(--ct-tinta-suave);
    font-size: .88rem;
}

.ct-zona-peligro {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 3px solid var(--ct-error-borde);
}

.ct-zona-peligro-rotulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--ct-error);
    font-family: Barlow, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
}

.ct-solo-movil {
    margin-top: 28px;
}

@media (min-width: 900px) {
    .ct-solo-movil {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------------
   EL DIALOGO — en el telefono, hoja inferior
   --------------------------------------------------------------------------- */

/* El dialogo no se desplaza: lo hace su caja, que tiene su propio tope. Con
   el `overflow: auto` que le pone el navegador, la animacion de entrada de la
   hoja lo dejaba con una barra de desplazamiento mientras duraba. */
.ct-dialogo {
    width: calc(100% - 32px);
    max-width: 560px;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--ct-tinta);
}

.ct-dialogo::backdrop {
    background: rgba(27, 16, 12, .5);
}

.ct-dialogo-caja {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    padding: 18px 22px 20px;
    overflow-y: auto;
    border-radius: 18px;
    background: var(--ct-papel);
    box-shadow: 0 24px 60px rgba(27, 16, 12, .3);
}

.ct-dialogo-cabeza {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ct-dialogo-titulo {
    padding-top: 8px;
    font-weight: 800;
    font-size: 1.3rem;
}

.ct-dialogo-cabeza .ct-icono-btn {
    margin: 0 -10px 0 0;
}

.ct-dialogo-cuerpo {
    display: grid;
    gap: 12px;
    font-size: .96rem;
}

.ct-dialogo-cuerpo h3 {
    font-family: Barlow, system-ui, sans-serif;
    font-weight: 700;
    font-size: .98rem;
}

.ct-dialogo-cuerpo .ct-lista-puntos {
    margin-top: 4px;
}

.ct-confirmar-casilla {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--ct-linea);
    border-radius: 12px;
    background: #fbf7f3;
    font-weight: 600;
    cursor: pointer;
}

.ct-confirmar-casilla input {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    accent-color: var(--ct-error);
    cursor: pointer;
}

.ct-dialogo .ct-error-bloque {
    margin-bottom: 0;
}

.ct-dialogo-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.ct-dialogo-acciones .ct-btn:empty {
    display: none;
}

@media (max-width: 640px) {
    .ct-dialogo {
        width: 100%;
        max-width: none;
        margin: auto 0 0;
    }

    .ct-dialogo-caja {
        max-height: 92vh;
        max-height: 92dvh;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
    }

    .ct-dialogo[open] .ct-dialogo-caja {
        animation: ct-subir .22s ease-out;
    }

    /* «No, conservarlos» abajo, donde descansa el pulgar. */
    .ct-dialogo-acciones {
        flex-direction: column-reverse;
    }

    .ct-dialogo-acciones .ct-btn {
        width: 100%;
    }
}

@keyframes ct-subir {
    from { transform: translateY(28px); opacity: .6; }
    to { transform: none; opacity: 1; }
}

/* ---------------------------------------------------------------------------
   PANTALLAS ANGOSTAS (360 px)
   --------------------------------------------------------------------------- */

@media (max-width: 400px) {
    .ct-entrada.dk-fondo-chispas {
        padding: 14px 10px 28px;
    }

    .ct-entrada-caja {
        padding: 20px 16px 16px;
        border-radius: 16px;
    }

    .ct-accion-fija {
        margin: 12px -16px -16px;
        padding: 12px 16px 16px;
    }

    .ct-entrada-titulo {
        font-size: 1.42rem;
    }

    .ct-casillas-dibujo {
        gap: 6px;
    }

    .ct-casilla {
        height: 52px;
        font-size: 1.4rem;
    }

    .ct-enlace-panel {
        align-items: flex-start;
        text-align: left;
    }

    .ct-principal {
        padding-right: 12px;
        padding-left: 12px;
    }

    .ct-vista-titulo {
        font-size: 1.48rem;
    }

    .ct-tarjeta,
    .ct-caja-accion {
        padding: 16px 14px;
    }

    .ct-fila {
        padding: 12px 14px;
    }

    .ct-buscar-boton {
        padding-right: 12px;
        padding-left: 12px;
    }

    .ct-avance-texto {
        font-size: .7rem;
    }
}

/* ---------------------------------------------------------------------------
   MENOS MOVIMIENTO Y COLORES FORZADOS
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .ct-girador {
        border-color: var(--ct-naranja-texto);
        border-right-color: transparent;
    }
}

@media (forced-colors: active) {
    .ct-estado,
    .ct-chip,
    .ct-casilla,
    .ct-tarjeta,
    .ct-fila {
        border: 1px solid CanvasText;
    }

    .ct-btn--primario {
        border: 2px solid ButtonText;
    }
}

/* Sumar productos a un pedido pendiente (16/09): el boton y su explicacion,
   antes de «Escribir a…». Con aire arriba, que no se pegue a «Pagar», y con
   el naranja de la marca: pesa mas que un secundario sin competir con el
   boton lleno de WhatsApp que va debajo (el dueño: «un poco más relevante»). */
.ct-sumar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 22px 0 1.25rem;
}

.ct-btn--sumar {
    min-height: 48px;
    padding: 11px 22px;
    border: 2px solid var(--ct-naranja-texto);
    background: #fff1e6;
    color: var(--ct-naranja-hondo);              /* 7:1 sobre su fondo */
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(194, 72, 5, .14);
}

.ct-btn--sumar .ct-ico {
    color: var(--ct-naranja-texto);
}

.ct-btn--sumar:hover {
    color: var(--ct-naranja-hondo);
    background: #ffe4d1;
    border-color: var(--ct-naranja-hondo);
}

.ct-btn--sumar:active {
    transform: translateY(1px);
}