/* ===========================================================================
   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;
}

.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;
}

.ct-mon {
    margin-left: 4px;
    color: var(--ct-tinta-suave);
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .06em;
}

.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; }
.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 ---------- */

.ct-pagar {
    display: inline-flex;
}

.ct-btn--pagar {
    border: 1.5px dashed var(--ct-linea-fuerte);
    background: #fff;
    color: var(--ct-tinta-suave);
}

.ct-btn--pagar:disabled {
    opacity: 1;
}

.ct-btn--pagar .ct-monto {
    color: var(--ct-tinta-suave);
}

.ct-pronto {
    padding: 2px 8px;
    border-radius: 99px;
    background: #f1e9e3;
    color: var(--ct-tinta-suave);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---------- 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;
}

@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;
    }
}

.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;
}

.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;
}

.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;
}

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

/* ---------- 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;
    }
}