/* ============================================================================
   daily-tasks — estilo del módulo.
   Se apoya en los tokens --nt-* de _assets/notion.css —la copia PROPIA del
   módulo, no la del módulo base (ver el encabezado de ese archivo)—, que se
   linkea ANTES que este archivo.
   ========================================================================= */

.dt-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 24px 96px;
}

/* --- encabezado ---------------------------------------------------------- */

.dt-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.dt-back {
    font-size: 13px;
    color: var(--nt-muted);
    text-decoration: none;
}
.dt-back:hover { color: var(--nt-text); }

/*  CERRAR SESIÓN, en la barra de arriba del panel.
    Se ve como un botón —es una acción, no una navegación más— pero chico y
    suave: si tuviera el peso de `.dt-btn` competiría con lo que la persona vino
    a hacer, que es trabajar. Lo que lo distingue de los enlaces del día es el
    borde: alcanza para que se lea como «esto termina algo». */
.dt-salir {
    display: inline-block;
    border: 1px solid var(--nt-border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--nt-muted);
    background: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.dt-salir:hover { background: var(--nt-hover); color: var(--nt-text); }

/*  «Completar CV» — el aviso de la barra de arriba. Mismo tamaño y forma que
    «Cerrar Sesión» para que la barra se lea como una sola cosa, pero en ámbar:
    es lo único de esa fila que reclama algo. Los tonos son los mismos que usan
    los carteles de advertencia del módulo (`.dt-note-warn`), así que «ámbar =
    algo pendiente» quiere decir lo mismo en todas las pantallas. */
.dt-avisar {
    display: inline-block;
    border: 1px solid #e6d9ae;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--nt-amber);
    background: var(--nt-amber-bg);
    text-decoration: none;
    white-space: nowrap;
}
.dt-avisar:hover { border-color: var(--nt-amber); color: var(--nt-amber); }

.dt-title {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.25;
    margin: 12px 0 6px;
    color: var(--nt-text);
}
.dt-lead {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--nt-muted);
    margin: 0 0 26px;
    max-width: 62ch;
}
.dt-lead b { color: var(--nt-text); }

/* --- tira de saldos ------------------------------------------------------ */

.dt-wallet {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 28px;
}
.dt-wallet-item {
    flex: 1 1 150px;
    border: 1px solid var(--nt-border);
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
}
.dt-wallet-label {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nt-faint);
    margin-bottom: 4px;
}
.dt-wallet-value {
    font-size: 21px;
    font-weight: 700;
    color: var(--nt-text);
    line-height: 1.1;
}
.dt-wallet-hint {
    font-size: 11.5px;
    color: var(--nt-muted);
    margin-top: 5px;
    line-height: 1.45;
}
.dt-wallet-item.is-credito .dt-wallet-value { color: var(--nt-amber); }

/*  La tarjeta pasa a tener DOS columnas: el dato, y a la derecha el círculo.
    El texto va en .dt-wallet-main para que el círculo no lo empuje. */
.dt-wallet-item { display: flex; align-items: center; gap: 12px; }
.dt-wallet-main { flex: 1 1 auto; min-width: 0; }

/*  EL CÍRCULO DE LA DERECHA. Mismo tamaño y misma posición en las dos tarjetas
    que lo tienen —rank y candado—: son «el dato de al lado» y alinearlos hace
    que la tira se lea como una sola cosa. */
.dt-badge {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
}
.dt-badge.is-rank {
    background: var(--nt-callout);
    border: 1px solid var(--nt-border);
    color: var(--nt-text);
}
.dt-badge-num { font-size: 16px; font-weight: 700; }
.dt-badge-cap {
    font-size: 8px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--nt-faint);
    margin-top: 3px;
}

/*  EL CANDADO. Rojo Notion y con forma de botón: es lo único de la tira que se
    puede tocar, y tiene que parecerlo. El emoji va grande —el chiquito al lado
    de la etiqueta se leía como decoración y nadie lo apretaba—. */
.dt-badge.is-lock {
    background: var(--nt-red-bg);
    border: 1px solid rgba(212, 76, 71, .35);
    color: var(--nt-red);
    font-size: 32px;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .12s;
}
.dt-badge.is-lock:hover {
    background: #fbdcdd;
    border-color: var(--nt-red);
    transform: scale(1.05);
}
.dt-badge.is-lock:focus-visible { outline: 2px solid var(--nt-red); outline-offset: 2px; }

/*  EL SALDO BLOQUEADO. Todo en grises: es la única de las tres tarjetas que hoy
    no lleva a ningún lado, y tiene que verse apagada al lado de las otras dos.
    El verde de «disponible» volvería el día que existan los retiros. */
.dt-wallet-item.is-locked {
    background: #f4f4f2;
    border-color: #e3e3df;
}
.dt-wallet-item.is-locked .dt-wallet-label,
.dt-wallet-item.is-locked .dt-wallet-value { color: var(--nt-faint); }

/*  El texto de abajo abre el modal: se subraya punteado para que se lea como
    algo que se toca y no como una aclaración más. */
.dt-lock-link {
    display: inline-block;
    color: var(--nt-muted);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}
.dt-lock-link:hover { color: var(--nt-text); }

/* --- modal y panel: se abren con :target, sin JavaScript ------------------- */
/*
    El disparador es un <a href="#id"> y la hoja los muestra cuando ese id es el
    :target. Cerrar es volver a `#`, y por eso el fondo y la cruz son enlaces:
    tocar afuera funciona sin una línea de script.

    ⚠ Consecuencia a tener presente: abrir y cerrar deja entradas en el
    historial, así que «atrás» cierra el modal en vez de salir de la página. Es
    el precio de que ande sin JavaScript, y para un cartel informativo es un
    precio barato.
*/
.dt-modal, .dt-panel {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
}
.dt-modal:target, .dt-panel:target { display: block; }

.dt-modal-fondo, .dt-panel-fondo {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, .45);
    display: block;
}

/*  el modal, centrado */
.dt-modal-caja {
    position: relative;
    z-index: 1;
    max-width: 420px;
    margin: 14vh auto 0;
    background: #fff;
    border-radius: 12px;
    padding: 26px 26px 20px;
    box-shadow: 0 14px 40px rgba(15, 15, 15, .22);
}
.dt-modal-ico, .dt-panel-ico {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 12px;
}
.dt-modal-title, .dt-panel-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--nt-text);
    margin: 0 0 10px;
    line-height: 1.3;
}
.dt-modal-texto, .dt-panel-texto {
    font-size: 14px;
    line-height: 1.6;
    color: var(--nt-muted);
    margin: 0 0 18px;
}
.dt-modal-pie, .dt-panel-pie {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.dt-modal-x, .dt-panel-x {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 22px;
    line-height: 1;
    color: var(--nt-faint);
    text-decoration: none;
}
.dt-modal-x:hover, .dt-panel-x:hover { color: var(--nt-text); }

/*  el panel, pegado al borde IZQUIERDO y de alto completo */
.dt-panel-caja {
    position: relative;
    z-index: 1;
    width: 380px;
    max-width: 88vw;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    padding: 30px 26px;
    box-shadow: 6px 0 30px rgba(15, 15, 15, .18);
    display: block;
}
.dt-panel-lista {
    margin: 0 0 18px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nt-muted);
}
.dt-panel-lista li { margin-bottom: 12px; }
.dt-panel-lista b { color: var(--nt-text); }
.dt-panel-nota {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--nt-faint);
    border-top: 1px solid var(--nt-border);
    padding-top: 14px;
    margin: 0 0 18px;
}
.dt-panel-pie { justify-content: flex-start; }

/* --- la primera pregunta: qué venís a buscar ------------------------------ */
/*
    Pantalla centrada y sin nada alrededor. Es la primera y la única decisión de
    ese momento: cualquier otra cosa en la página compite con las cuatro
    opciones.
*/
/*  LA PANTALLA ES EL ANCHO GRANDE, y el que quiera ser angosto se angosta solo
    (2026-08-16). Antes era al revés: `.dt-centro` medía 560px y cada bloque
    grande se escapaba a los costados con sus propios márgenes negativos. Dos
    escapes distintos —las cajas y el área de búsqueda— es un escalón esperando
    a que alguien cambie uno solo, y además ninguno de los dos podía centrarse
    con `auto`, que es lo natural.

    Ahora el escape se hace UNA VEZ, acá: el 50% se resuelve contra el ancho de
    `.dt-wrap`, que es el que hay que compensar para salir de sus 860px. De ahí
    para adentro todo es un hijo normal de un contenedor ancho y se centra con
    `margin: 0 auto`.

    El tope contra el viewport evita la barra horizontal en una ventana angosta,
    y los 48px son el mismo aire que el padding de `.dt-wrap`. */
.dt-centro {
    --dt-ancho: min(1120px, calc(100vw - 48px));
    width: var(--dt-ancho);
    margin: 4vh calc(50% - var(--dt-ancho) / 2) 0;
    text-align: center;
}
.dt-title-c { margin-bottom: 10px; }
.dt-lead-c  { margin: 0 auto 30px; max-width: 46ch; }
/*  Los avisos NO se estiran a 1120px: un párrafo de ese largo no se lee. Se
    quedan en el ancho de lectura de siempre, centrados en la pantalla ancha. */
.dt-note-c  { text-align: left; max-width: 560px; margin-left: auto; margin-right: auto; }

/*  LAS DOS CAJAS DEL COMIENZO — «AI - Automatización» y «Human in the loop».
    Son presentación y no opciones: no tienen hover, ni foco, ni estado elegido.
    Ese contraste es a propósito —lo que se puede tocar en esta pantalla se
    levanta al pasar el mouse; esto no— y es lo que evita que compitan con las
    tarjetas por el clic.

    OCUPAN TODA LA PANTALLA ANCHA. Ya no se escapan de nada: el que se escapa es
    `.dt-centro`, y estas dos no hacen más que llenarlo. */
.dt-modos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 0 22px;
}
/*  EL TEXTO ARRIBA A LA IZQUIERDA, a 32px de los dos bordes (pedido del dueño,
    2026-08-16). No hace falta posicionarlo: el padding y el flex arrancando en
    el vértice dan exactamente eso, y siguen empujando la caja si algún día el
    texto crece — un `position: absolute` a 32/32 se superpondría con la bajada.

    `text-align` explícito porque `.dt-centro` centra todo lo que cuelga de él. */
.dt-modo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6px;
    min-height: 468px;
    border: 1px solid var(--nt-border);
    border-radius: 12px;
    background: var(--nt-callout);
    padding: 32px;
    text-align: left;
}
/*  DOS RENGLONES, y cortados a mano: «AI / Automatización» y «Human In / The
    Loop» no son donde los cortaría el navegador por ancho. Cada renglón es su
    propio bloque —no un <br>— para que el interlineado sea el de un título de
    dos líneas y no el de un párrafo partido. */
.dt-modo-titulo {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--nt-text);
}
.dt-modo-linea { display: block; }
/*  El lugar de la bajada. Hoy ninguna caja la trae; el estilo está escrito para
    que agregar el texto sea agregar un <span> y nada más. */
.dt-modo-help {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--nt-muted);
}

/*  LAS CINCO BÚSQUEDAS, EN CHIPS (2026-08-16). Eran tarjetas de dos columnas
    con emoji, nombre largo y una línea de ayuda; con las dos cajas grandes
    arriba, tres renglones por opción empujaban la elección abajo del pliegue.

    ⚠ SE LLAMAN `.dt-busca` Y NO `.dt-chip`: ese nombre ya estaba tomado más
    abajo en este mismo archivo por los chips del desplegable de `signup`, que
    son otra cosa —pastillas azules con una cruz para sacarlas—. Nacieron con el
    nombre repetido y, como el bloque de `signup` va después, era ÉL el que
    ganaba: estos chips salían con su padding y su tamaño de letra, no con los de
    acá. Si agregás un componente al módulo, buscá el nombre antes.

    Una tira, y no una grilla: los cinco nombres miden distinto —«Empleo» y
    «Co-Fundador» no piden el mismo ancho— y estirarlos a una columna pareja deja
    aire adentro del chip, que es justo lo que un chip no tiene.

    LOS CINCO EN UNA SOLA LÍNEA (pedido del dueño, 2026-08-16). `nowrap`, y el
    marco de afuera crece con ellos: mientras `.dt-centro` medía 560px el quinto
    se caía solo a un segundo renglón.

    El aire entre chips es MARGEN y no `gap`, para que cada uno tenga el mismo a
    la izquierda que a la derecha: el `gap` no le pone nada al primero por
    delante ni al último por detrás.

    EL ÁREA CON SU NOMBRE (pedido del dueño, 2026-08-16). Cinco pastillas sueltas
    sobre el fondo no dicen qué son; el marco y el «Buscar» de adelante las
    convierten en las opciones de una búsqueda. El rótulo va EN LA MISMA LÍNEA y
    no arriba del grupo —es una barra de filtros, no una sección— y se separa con
    una línea vertical, que es lo que hace que se lea como rótulo y no como un
    chip más sin borde.

    EL MARCO MIDE LO QUE MIDE SU CONTENIDO, y se centra con márgenes `auto`
    (2026-08-16). No se estira a lo ancho de las cajas: un marco de 1120px con
    850px de chips adentro deja un vacío a la derecha que se lee como que falta
    una opción. `fit-content` es lo que lo hace posible, y poder escribir `auto`
    a secas es el motivo por el que `.dt-centro` pasó a ser el contenedor ancho:
    contra un padre de 560px, `auto` no centra nada que sea más grande que él.

    `max-width: 100%` es el tope: el día que haya nueve búsquedas, el marco deja
    de crecer en el borde de la pantalla y los chips se arrastran adentro. */
.dt-buscador {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid var(--nt-border);
    border-radius: 14px;
    background: var(--nt-callout);
    padding: 9px 32px;
    text-align: left;
}
/*  Radio chico en el marco contra el redondeo total de los chips: dos pastillas
    anidadas se leen como una sola cosa mal dibujada. */
.dt-buscador-label {
    flex: 0 0 auto;
    padding-right: 14px;
    border-right: 1px solid var(--nt-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--nt-muted);
}
/*  Los chips ocupan lo que sobra a la derecha del rótulo. `min-width: 0` es lo
    que permite que en el celular se encojan y arrastren en vez de desbordar el
    marco. */
.dt-buscas {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
}
.dt-busca {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    border: 1px solid var(--nt-border);
    border-radius: 999px;
    background: #fff;
    padding: 9px 16px;
    margin: 0 5px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--nt-text);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .12s, background .12s, transform .12s;
}
.dt-busca:hover {
    border-color: var(--nt-blue);
    background: var(--nt-blue-soft);
    transform: translateY(-1px);
}
.dt-busca:focus-visible { outline: 2px solid var(--nt-blue); outline-offset: 2px; }

/*  EL ÍCONO — un UIcon de Flaticon, familia thin rounded, que reemplazó al
    emoji. La hoja del CDN trae el `font-family` y el dibujo; acá va sólo el
    tamaño y el alineado. Un pelo más grande que el texto y apagado: el trazo
    fino a 14px se pierde, y a la misma intensidad que el nombre le compite. */
.dt-busca-icon {
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    color: var(--nt-muted);
}
/*  el ícono del elegido acompaña al texto, que ahí cambia de color */
.dt-busca.is-elegida .dt-busca-icon { color: inherit; }

/*  La elegida queda marcada al volver: sin eso, quien toca una que todavía no
    está abierta vuelve a una pantalla idéntica y no sabe si el clic hizo algo. */
.dt-busca.is-elegida { border-color: var(--nt-blue); background: var(--nt-blue-soft); }

/*  La que todavía no tiene registro se ve apagada y lo DICE antes de tocarla.
    Sigue siendo un enlace —lleva al aviso— porque un cartel que no se puede
    tocar no explica nada. */
.dt-busca.is-pronto { background: var(--nt-callout); }
.dt-busca.is-pronto .dt-busca-icon { opacity: .55; }
.dt-busca.is-pronto .dt-busca-label { color: var(--nt-muted); }

/*  Los carteles van ADENTRO del chip y en la misma línea. En la tarjeta estaban
    absolutos en la esquina; acá no hay esquina, y un chip que crece a lo ancho
    para hacerles lugar sigue siendo un chip. Conviven los dos —«Servicio
    Gratuito» y «pronto» dicen cosas distintas— en vez de pisarse. */
.dt-tag {
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap;
}
.dt-tag.is-pronto { color: var(--nt-amber); background: var(--nt-amber-bg); }
/*  el verde es el de «esto está bien», y que un servicio no cueste lo está */
.dt-tag.is-gratis { color: var(--nt-green); background: var(--nt-green-bg); }

/*  El pie del navegador: la pregunta y el enlace en la MISMA LÍNEA, centrados.
    Es un enlace de texto y no un botón — con mouse, un enlace de 13px se
    apunta sin esfuerzo, y un botón acá pelearía con los chips, que son la
    decisión de esta pantalla.

    En el celular cambia de forma: la pregunta arriba y el enlace convertido en
    botón, en su propio renglón. Está en el bloque de 640px. */
.dt-pie-c {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 26px;
    font-size: 13px;
    color: var(--nt-muted);
}

/* --- registros de las búsquedas ------------------------------------------ */

/*  «opcional» al lado de la etiqueta, y no «*» en las obligatorias: marcar lo
    que falta es más corto que marcar lo que sobra sólo cuando la mayoría es
    opcional, y acá es al revés. */
.dt-opcional {
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--nt-faint);
    margin-left: 6px;
}

/*  El link personal y su botón, en una línea. El campo es de sólo lectura pero
    sigue siendo un input: se puede seleccionar y copiar a mano, que es lo que
    hace que la pantalla sirva sin JavaScript. */
.dt-linkbox { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.dt-linkbox .dt-input { flex: 1 1 260px; min-width: 0; font-size: 13px; }
.dt-linkbox .dt-btn   { flex: 0 0 auto; white-space: nowrap; }

/*  La pantalla de gracias reemplaza al formulario: llega por redirect y no
    comparte nada con él, así que se centra sola. */
.dt-gracias { text-align: center; padding: 8vh 0 4vh; }
.dt-gracias .dt-lead { margin-left: auto; margin-right: auto; max-width: 48ch; }
.dt-gracias-ico {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--nt-green-bg);
    color: var(--nt-green);
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- progreso ------------------------------------------------------------ */

.dt-progress {
    border: 1px solid var(--nt-border);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 28px;
    background: var(--nt-callout);
}
.dt-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.dt-progress-title { font-size: 14px; font-weight: 700; }
.dt-progress-meta  { font-size: 12.5px; color: var(--nt-muted); }
.dt-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(55, 53, 47, 0.10);
    overflow: hidden;
}
.dt-bar-fill {
    height: 100%;
    background: var(--nt-blue);
    border-radius: 999px;
    transition: width .2s ease;
}
.dt-bar-fill.is-done { background: var(--nt-green); }

/* --- grilla de tipos de tarea -------------------------------------------- */

.dt-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 244px, 1fr ) );
    gap: 14px;
}
.dt-card {
    border: 1px solid var(--nt-border);
    border-radius: 12px;
    padding: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, background .15s ease;
}
a.dt-card:hover { border-color: #d3d3ce; background: var(--nt-hover); }
.dt-card-emoji { font-size: 22px; line-height: 1; margin-bottom: 10px; }
.dt-card-title { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.dt-card-desc  { font-size: 12.5px; color: var(--nt-muted); line-height: 1.55; margin-bottom: 14px; }
.dt-card-foot  { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dt-card-count { font-size: 12.5px; color: var(--nt-muted); }
.dt-card-count b { color: var(--nt-text); }
.dt-card.is-complete { background: var(--nt-green-bg); border-color: #cfe0d3; }
.dt-card.is-complete .dt-card-count b { color: var(--nt-green); }

/* --- reproductor de video ------------------------------------------------ */

.dt-video-wrap {
    position: relative;
    padding-top: 56.25%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--nt-border);
}
.dt-video-wrap iframe,
.dt-video-wrap > div {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.dt-video-state {
    font-size: 12.5px;
    color: var(--nt-muted);
    margin-top: 10px;
    line-height: 1.5;
}

/* botón a la espera de que termine el video */
.dt-btn.is-off,
.dt-btn:disabled {
    background: #d8d7d3;
    border-color: #d8d7d3;
    color: #fff;
    cursor: not-allowed;
}
.dt-btn.is-off:hover { background: #d8d7d3; border-color: #d8d7d3; }

/* --- la comisión de una tarea offline ------------------------------------ */
/* Va grande y arriba: es lo que distingue a estas tareas del resto, donde el
   valor es siempre USD 1. */

.dt-comision {
    border: 1px solid #cfe0d3;
    background: var(--nt-green-bg);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 20px;
}
.dt-comision-monto {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--nt-green);
}
.dt-comision-sobre {
    font-size: 13.5px;
    color: var(--nt-muted);
    margin-top: 5px;
    line-height: 1.5;
}

/* el embebido de X trae su propio ancho; se centra y se limita al contenedor */
.dt-tweet { display: flex; justify-content: center; }
.dt-tweet .twitter-tweet { max-width: 100% !important; margin: 0 auto !important; }

/* --- bloque de un contacto (comunicación 1 a 1) -------------------------- */

.dt-contact {
    border: 1px solid var(--nt-border);
    border-radius: 10px;
    padding: 14px 15px 15px;
    margin-bottom: 14px;
    background: var(--nt-callout);
}
.dt-contact.is-error { border-color: var(--nt-red); background: var(--nt-red-bg); }
.dt-contact-num {
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--nt-faint);
    font-weight: 700;
    margin-bottom: 10px;
}
.dt-contact .dt-input { background: #fff; }

/* --- lista de las tareas propias del día --------------------------------- */

.dt-tasklist { display: flex; flex-direction: column; gap: 8px; }
.dt-taskrow {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--nt-border);
    border-radius: 10px;
    padding: 13px 15px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.dt-taskrow:hover { border-color: #d3d3ce; background: var(--nt-hover); }
/* el enlace principal ocupa todo salvo lo que queda a la derecha (estado y Ver) */
.dt-taskrow-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

/* botón «Ver» — sólo en desarrollo */
.dt-ver {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--nt-muted);
    text-decoration: none;
    border: 1px dashed var(--nt-border);
    border-radius: 6px;
    padding: 4px 9px;
    background: #fff;
}
.dt-ver:hover { color: var(--nt-text); border-color: var(--nt-faint); background: var(--nt-callout); }

/* el aviso de que se entró por la puerta de servicio */
.dt-note.dt-dev {
    background: repeating-linear-gradient( 45deg, #fbf3db, #fbf3db 10px, #f7eed0 10px, #f7eed0 20px );
    color: var(--nt-amber);
    border: 1px dashed #d9c48a;
}
.dt-taskrow.is-next { border-color: var(--nt-blue); background: var(--nt-blue-soft); }
.dt-taskrow.is-done { opacity: .62; }
/* El TURNO. Es el dato más fuerte de la fila: contesta «¿por cuál voy?».
   Se distingue del ID público por peso y por color, no sólo por posición. */
.dt-taskrow-pos {
    flex: 0 0 26px;
    text-align: right;
    font-size: 15px;
    font-weight: 800;
    color: var(--nt-text);
    font-variant-numeric: tabular-nums;
}
/* El ID PÚBLICO. Deliberadamente apagado: identifica, no ordena. */
.dt-taskrow-slot {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--nt-faint);
    font-variant-numeric: tabular-nums;
}
/* Ancho fijo aunque no haya chip: sin esto, la fila de la daily —que no tiene
   plataforma— corre su título a la izquierda y la lista queda despareja. */
.dt-taskrow-plat { flex: 0 0 88px; }
.dt-taskrow-plat .dt-pill { white-space: nowrap; }

.dt-taskrow-hora {
    flex: 0 0 46px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--nt-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dt-taskrow-prog { flex: 0 0 104px; }
.dt-taskrow-prog .dt-pill { white-space: nowrap; }

/* los puntos, cuando sólo se muestran */
.dt-taskrow-pts {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--nt-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* los puntos, cuando se editan — sólo en desarrollo */
.dt-pts {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.dt-pts-input {
    width: 54px;
    padding: 4px 6px;
    border: 1px solid var(--nt-border);
    border-radius: 6px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-align: right;
    color: var(--nt-text);
    background: #fff;
    font-variant-numeric: tabular-nums;
}
.dt-pts-input:focus { outline: none; border-color: var(--nt-blue); }
.dt-pts-unit { font-size: 11px; font-weight: 700; color: var(--nt-faint); }
.dt-pts-ok {
    border: 1px dashed var(--nt-border);
    border-radius: 6px;
    background: #fff;
    color: var(--nt-muted);
    font-size: 12px;
    line-height: 1;
    padding: 5px 7px;
    cursor: pointer;
}
.dt-pts-ok:hover { color: var(--nt-green); border-color: var(--nt-green); }
/* la que se acaba de guardar, para no quedarse dudando si tomó el cambio */
.dt-pts.is-ok .dt-pts-input { border-color: var(--nt-green); background: var(--nt-green-bg); }
.dt-pts-ok[disabled] { opacity: .5; cursor: default; }

/* --- interruptor edición / usuario (sólo en desarrollo) ------------------- */
/*  Abajo a la IZQUIERDA: el toast vive a la derecha y no se pueden pisar. */
.dt-switch {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px 7px 13px;
    border-radius: 999px;
    background: #fbf3db;
    border: 1px dashed #d9c48a;
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
    font-size: 12px;
}
.dt-switch-label { font-weight: 700; color: var(--nt-amber); white-space: nowrap; }
.dt-switch-btn {
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
    color: var(--nt-text);
    background: #fff;
    border: 1px solid #d9c48a;
    border-radius: 999px;
    padding: 5px 11px;
}
.dt-switch-btn:hover { background: var(--nt-callout); border-color: var(--nt-amber); }
/*  Mirando como usuario el cartel se apaga: no tiene que competir con lo que se
    está yendo a mirar, pero tampoco puede desaparecer. */
.dt-switch.is-usuario {
    background: #fff;
    border-color: var(--nt-border);
    opacity: .72;
}
.dt-switch.is-usuario:hover { opacity: 1; }
.dt-switch.is-usuario .dt-switch-label { color: var(--nt-faint); font-weight: 600; }
.dt-switch.is-usuario .dt-switch-btn   { border-color: var(--nt-border); }

/* --- toast ---------------------------------------------------------------- */
/*  Confirma lo que acaba de pasar sin mover nada de la página. Abajo a la
    derecha y por encima de todo: se lee de reojo y no tapa la fila que se está
    editando. */
.dt-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;
    max-width: min(420px, calc(100vw - 40px));
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
    background: #2f2d29;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    /*  fuera de pantalla y sin recibir clics mientras no se muestra */
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.dt-toast.is-visible { opacity: 1; transform: translateY(0); }
.dt-toast.is-ok      { background: #2b6b45; }
.dt-toast.is-error   { background: #8a2f28; }

@media (prefers-reduced-motion: reduce) {
    .dt-toast { transition: none; transform: none; }
}

.dt-taskrow-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dt-taskrow-title { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.dt-taskrow-meta  { font-size: 12px; color: var(--nt-muted); line-height: 1.4; }

/* --- píldoras ------------------------------------------------------------ */

.dt-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--nt-callout);
    color: var(--nt-muted);
    white-space: nowrap;
}
.dt-pill.is-pendiente { background: var(--nt-blue-soft); color: var(--nt-blue); }
.dt-pill.is-enviada   { background: var(--nt-amber-bg);  color: var(--nt-amber); }
.dt-pill.is-aprobada  { background: var(--nt-green-bg);  color: var(--nt-green); }
.dt-pill.is-rechazada { background: var(--nt-red-bg);    color: var(--nt-red); }
/* vencida: se perdió por no hacerse a tiempo. Gris, no rojo — no es un error
   del usuario ni un rechazo, es una oportunidad que pasó. */
.dt-pill.is-vencida   { background: #efeeec; color: var(--nt-faint); }
.dt-pill.is-plat      { background: #f1f0ed; color: #55534e; }
.dt-pill.is-obj       { background: var(--nt-blue-soft); color: var(--nt-blue); }
/* la hora es SUYA, no se la dio la grilla */
.dt-pill.is-prog      { background: var(--nt-amber-bg); color: var(--nt-amber); }

/* --- vista de una tarea -------------------------------------------------- */

.dt-task {
    border: 1px solid var(--nt-border);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}
.dt-task-head {
    padding: 20px 24px;
    border-bottom: 1px solid var(--nt-divider);
    background: var(--nt-callout);
}
.dt-task-kicker {
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nt-faint);
    margin-bottom: 7px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.dt-task-title { font-size: 20px; font-weight: 700; line-height: 1.3; }
.dt-task-body  { padding: 22px 24px; }
.dt-task-brief {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--nt-text);
    margin: 0 0 18px;
}
.dt-block { margin-bottom: 20px; }
.dt-block-label {
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--nt-faint);
    margin-bottom: 7px;
}
.dt-target {
    display: block;
    border: 1px solid var(--nt-border);
    border-radius: 10px;
    padding: 13px 15px;
    text-decoration: none;
    color: var(--nt-blue);
    font-size: 13.5px;
    word-break: break-all;
    line-height: 1.5;
}
.dt-target:hover { background: var(--nt-blue-soft); }
.dt-target-title { color: var(--nt-text); font-weight: 700; margin-bottom: 3px; word-break: normal; }

.dt-steps { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.75; color: var(--nt-muted); }
.dt-steps li { margin-bottom: 4px; }
.dt-steps b { color: var(--nt-text); }

.dt-copy {
    border: 1px solid var(--nt-border);
    border-radius: 10px;
    padding: 13px 15px;
    font-size: 13.5px;
    line-height: 1.6;
    background: var(--nt-callout);
    white-space: pre-wrap;
}

/*  La idea que el comentario tiene que sostener. Se ve como una cita y NO como
    un bloque de «copiar»: es justo lo que no hay que copiar tal cual. */
.dt-idea {
    font-size: 15px;
    font-style: italic;
    line-height: 1.55;
    color: var(--nt-text);
    border-left: 3px solid var(--nt-blue);
}

/*  Las etiquetas que el comentario tiene que llevar. Cada una con su arroba
    grande —es lo que hay que tipear— y el link sólo para verificar el perfil. */
.dt-etiquetas { list-style: none; margin: 0; padding: 0; }
.dt-etiquetas li {
    border: 1px solid var(--nt-border);
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 8px;
    background: #fff;
}
.dt-arroba {
    display: block;
    font-size: 15px;
    color: var(--nt-blue);
    line-height: 1.35;
    margin-bottom: 2px;
    word-break: break-word;
}

/*  Los cargos que valen para buscar a quién comentarle. Lista corta y en dos
    columnas: leída de un vistazo, no como un texto. */
.dt-cargos {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
    font-size: 13px;
}
.dt-cargos li {
    padding: 6px 10px;
    border: 1px solid var(--nt-border);
    border-radius: 8px;
    background: var(--nt-callout);
    color: var(--nt-text);
}

/* --- formulario de confirmación ------------------------------------------ */

.dt-form { border-top: 1px solid var(--nt-divider); padding: 20px 24px 24px; }
.dt-field { margin-bottom: 16px; }
.dt-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--nt-text);
}
.dt-field .dt-help { font-size: 12.5px; color: var(--nt-muted); line-height: 1.55; margin: 0 0 8px; }
.dt-input, .dt-textarea, .dt-select {
    width: 100%;
    border: 1px solid var(--nt-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--nt-text);
    background: #fff;
    outline: none;
}
.dt-input:focus, .dt-textarea:focus, .dt-select:focus { border-color: var(--nt-blue); }
.dt-textarea { min-height: 84px; resize: vertical; line-height: 1.6; }

.dt-options { display: flex; flex-direction: column; gap: 7px; }
.dt-option {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--nt-border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13.5px;
    cursor: pointer;
}
.dt-option:hover { background: var(--nt-hover); }
.dt-option input { margin: 0; }

.dt-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.dt-btn {
    display: inline-block;
    border: 1px solid var(--nt-blue);
    background: var(--nt-blue);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    /*  ⚠ EXPLÍCITO PARA QUE <a> Y <button> MIDAN IGUAL. Un <button> trae
        `line-height: normal` del navegador y un <a> hereda la del contenedor
        —en este módulo, hasta 1.65—: puestos en la misma fila, el enlace queda
        varios píxeles más alto que el botón de al lado. Se ve en la fila de
        acciones de `perfil/preguntas`, donde conviven cuatro <button> y un <a>. */
    line-height: 1.2;
}
.dt-btn:hover { background: var(--nt-blue-hover); border-color: var(--nt-blue-hover); }
.dt-btn-soft {
    border-color: var(--nt-border);
    background: #fff;
    color: var(--nt-text);
}
.dt-btn-soft:hover { background: var(--nt-hover); }
.dt-reward { font-size: 12.5px; color: var(--nt-muted); }
.dt-reward b { color: var(--nt-text); }

/* --- formulario de registro ---------------------------------------------- */

.dt-row { display: flex; gap: 14px; flex-wrap: wrap; }
.dt-row .dt-field { flex: 1 1 220px; }

.dt-input.is-error, .dt-textarea.is-error, .dt-drop.is-error > .dt-drop-toggle {
    border-color: var(--nt-red);
    background: var(--nt-red-bg);
}
.dt-error {
    font-size: 12.5px;
    color: var(--nt-red);
    line-height: 1.5;
    margin: 6px 0 0;
}
.dt-error a { color: inherit; }

.dt-file { padding: 9px 12px; font-size: 13px; cursor: pointer; }
.dt-file::file-selector-button {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--nt-text);
    background: var(--nt-callout);
    border: 1px solid var(--nt-border);
    border-radius: 6px;
    padding: 6px 12px;
    margin-right: 12px;
    cursor: pointer;
}
.dt-file::file-selector-button:hover { background: var(--nt-hover); }

/* desplegable de selección múltiple: <details> + checkboxes, sin JS obligatorio */
.dt-drop {
    border: 1px solid var(--nt-border);
    border-radius: 8px;
    background: #fff;
}
.dt-drop-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
    border-radius: 8px;
}
.dt-drop-toggle::-webkit-details-marker { display: none; }
.dt-drop-toggle:hover { background: var(--nt-hover); }
.dt-drop[open] > .dt-drop-toggle {
    border-bottom: 1px solid var(--nt-divider);
    border-radius: 8px 8px 0 0;
}
.dt-drop-caret { color: var(--nt-faint); font-size: 12px; }
.dt-drop[open] .dt-drop-caret { transform: rotate(180deg); }
.dt-drop-panel { max-height: 280px; overflow-y: auto; padding: 8px; }
.dt-drop-group {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nt-faint);
    font-weight: 700;
    padding: 10px 4px 5px;
}
.dt-drop-panel .dt-option { border: 0; padding: 7px 8px; border-radius: 6px; }
.dt-drop-panel .dt-option input:disabled + span { color: var(--nt-faint); }

/* chips de lo elegido, debajo del desplegable cerrado */
.dt-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dt-chips:not(:empty) { margin-top: 10px; }
.dt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--nt-blue-soft);
    color: var(--nt-blue);
    border-radius: 999px;
    padding: 5px 6px 5px 12px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
}
.dt-chip-x {
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    opacity: .65;
}
.dt-chip-x:hover { opacity: 1; background: rgba(35, 131, 226, 0.18); }

/* --- párrafo al tamaño del título ---------------------------------------- */
/* Para pantallas donde el mensaje es el encabezado y no hay título aparte.
   Mismo tamaño que .dt-title; el interlineado es un poco más suelto porque acá
   son frases largas y no un título de una línea. */

.dt-hero {
    font-size: 27px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--nt-text);
    margin: 0 0 18px;
    max-width: 42ch;
}
.dt-hero:first-of-type { margin-top: 12px; }
.dt-hero-strong { font-weight: 700; }

/* --- opciones con título y ayuda ----------------------------------------- */

.dt-lead-strong { color: var(--nt-text); font-weight: 700; }

.dt-option-rich { align-items: flex-start; padding: 13px 15px; }
.dt-option-rich input { margin-top: 3px; flex: 0 0 auto; }
.dt-option-body { display: flex; flex-direction: column; gap: 3px; }
.dt-option-title { font-weight: 700; line-height: 1.45; }
.dt-option-help { font-size: 12.5px; color: var(--nt-muted); line-height: 1.5; }
.dt-option-rich input:checked ~ .dt-option-body .dt-option-title { color: var(--nt-blue); }

/* --- mensaje de bienvenida: los tres puntos ------------------------------ */

.dt-steps-big { list-style: none; margin: 30px 0 0; padding: 0; }
.dt-step-big {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--nt-divider);
}
.dt-step-big:last-child { border-bottom: 1px solid var(--nt-divider); }
.dt-step-num {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--nt-blue-soft);
    color: var(--nt-blue);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dt-step-body { flex: 1 1 auto; }
.dt-step-title {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--nt-text);
    margin-bottom: 6px;
}
.dt-step-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--nt-muted);
    margin: 0;
    max-width: 62ch;
}

/* --- avisos -------------------------------------------------------------- */

.dt-note {
    border-radius: 10px;
    padding: 13px 16px;
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.dt-note-ok    { background: var(--nt-green-bg); color: var(--nt-green); }
.dt-note-error { background: var(--nt-red-bg);   color: var(--nt-red); }
.dt-note-info  { background: var(--nt-callout);  color: var(--nt-muted); }
.dt-note-warn  { background: var(--nt-amber-bg); color: var(--nt-amber); }
.dt-note a { color: inherit; }

/*  ⚠ EXCEPCIÓN: LOS BOTONES DENTRO DE UNA NOTA CONSERVAN SU COLOR.
    La regla de arriba hace que un enlace dentro de un cartel tome el color del
    cartel, que es lo que se quiere para un enlace de texto —se lee como parte
    de la frase—. Pero le gana por especificidad a `.dt-btn`, así que un BOTÓN
    dentro de un cartel salía con la letra del color del cartel sobre su fondo
    azul: ámbar sobre azul en «Completar mi registro» (2026-08-18), ilegible.
    Un botón no es parte de la frase: es el lugar donde se toca, y su color no
    lo decide el cartel que lo rodea. */
.dt-note a.dt-btn      { color: #fff; }
.dt-note a.dt-btn-soft { color: var(--nt-text); }

.dt-empty {
    border: 1px dashed var(--nt-border);
    border-radius: 12px;
    padding: 44px 24px;
    text-align: center;
    color: var(--nt-muted);
    font-size: 14px;
    line-height: 1.6;
}

.dt-footnote {
    font-size: 12px;
    color: var(--nt-faint);
    line-height: 1.6;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--nt-divider);
}

/* --- movimientos --------------------------------------------------------- */

.dt-moves { width: 100%; border-collapse: collapse; font-size: 13px; }
.dt-moves th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--nt-faint);
    font-weight: 700;
    padding: 0 10px 8px 0;
    border-bottom: 1px solid var(--nt-divider);
}
.dt-moves td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--nt-divider); color: var(--nt-muted); }
.dt-moves td.dt-move-concept { color: var(--nt-text); }
.dt-moves td.dt-move-amount { text-align: right; font-weight: 700; color: var(--nt-text); white-space: nowrap; }
.dt-moves td.dt-move-amount.is-neg { color: var(--nt-red); }


/* --- el perfil profesional en JSON ---------------------------------------- */
/*
    El árbol del JSON: una rama por objeto y por lista, plegable, y una fila por
    valor final. Lo que no tiene información va resaltado — es a lo que vino a
    mirar el usuario— y por eso el resaltado es lo ÚNICO con color en toda la
    pantalla: si además hubiera color en los tipos, en las claves y en los
    bordes, «lo que falta» dejaría de saltar a la vista.

    Claves y valores en monoespaciada: es un JSON, y en una tipografía de ancho
    variable las columnas de un árbol dejan de leerse como columnas.
*/

/*  El contador de arriba: cuántas propiedades están sin completar. Es el primer
    dato de la pantalla porque es la pregunta que trae el usuario. */
.dt-jresumen {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--nt-muted);
}
.dt-jresumen-n {
    min-width: 30px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--nt-callout);
    color: var(--nt-muted);
    font-weight: 700;
    text-align: center;
}
/*  en ámbar sólo si hay algo que completar: un «0» en ámbar dice que hay un
    problema donde no lo hay */
.dt-jresumen-n.tiene-vacias { background: var(--nt-amber-bg); color: var(--nt-amber); }
.dt-jfecha { color: var(--nt-faint); }

/*  los dos botones que crea el script; sin JavaScript no existen y el árbol se
    pliega igual, rama por rama */
.dt-jtoggles { display: flex; gap: 8px; margin-bottom: 10px; }
.dt-jtoggle {
    border: 1px solid var(--nt-border);
    background: #fff;
    color: var(--nt-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
}
.dt-jtoggle:hover { border-color: var(--nt-blue); color: var(--nt-text); }

.dt-jarbol {
    border: 1px solid var(--nt-border);
    border-radius: 12px;
    background: #fff;
    padding: 10px 14px;
    font-size: 13px;
}

/* --- las ramas ------------------------------------------------------------ */

/*  `<details>` nativo: plegar es del navegador. El triángulo también, y por eso
    no se dibuja ninguno acá — uno propio se desincroniza con el estado real. */
.dt-jrama > .dt-jsum {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-radius: 6px;
    cursor: pointer;
    list-style-position: inside;
}
.dt-jrama > .dt-jsum:hover { background: var(--nt-hover); }
.dt-jsum::marker { color: var(--nt-faint); }

/*  La línea de la izquierda es la jerarquía: sin ella, cuatro niveles de
    sangría son cuatro filas que empiezan en lugares distintos y nada más. */
.dt-jhijos {
    margin-left: 9px;
    padding-left: 14px;
    border-left: 1px solid var(--nt-divider);
}

.dt-jclave {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    color: var(--nt-text);
}
/*  El tipo y el conteo son referencia, no contenido: quedan chicos y apagados
    para que la fila se lea como «clave → valor» y no como tres datos iguales. */
.dt-jtipo {
    font-size: 11px;
    color: var(--nt-faint);
    white-space: nowrap;
}

/*  LA PISTA de una rama de lista: el primer texto con contenido que tiene
    adentro. Es lo que convierte «#1 #2 #3 #4» en cuatro trabajos distinguibles
    sin abrir ninguno. Se corta con puntos suspensivos porque compite con el
    cartel de lo que falta, que no se puede tapar. */
.dt-jpista {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nt-muted);
}

/* --- las hojas ------------------------------------------------------------ */

/*  Clave, campo y tipo en una línea. La clave con ancho fijo hace que todos los
    campos de un mismo nivel arranquen alineados, que es lo que permite recorrer
    la columna de valores de un vistazo. */
.dt-jhoja {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 4px 3px 8px;
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
}
.dt-jhoja > .dt-jclave { flex: 0 0 190px; min-width: 0; overflow-wrap: anywhere; }

/*  «Probar» — abre el link del campo en otra pestaña. Va pegado al campo y
    discreto: en un árbol de decenas de renglones, un botón con peso propio en
    uno solo se lleva la vista de toda la pantalla. Aparece dibujado siempre y
    no al pasar el mouse: en pantalla táctil no hay «pasar el mouse». */
.dt-jver {
    flex: 0 0 auto;
    border: 1px solid var(--nt-border);
    background: #fff;
    color: var(--nt-muted);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    padding: 4px 9px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.dt-jver:hover { background: var(--nt-hover); color: var(--nt-text); border-color: var(--nt-faint); }
.dt-jcampo {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--nt-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 5px 8px;
    resize: vertical;
}
/*  El campo no se ve como campo hasta que se lo toca: veinte cajas dibujadas al
    mismo tiempo convierten el árbol en un formulario y tapan el resaltado. Al
    pasar el mouse y al enfocar aparece, que es cuando importa. */
.dt-jcampo:hover  { border-color: var(--nt-border); }
.dt-jcampo:focus  { border-color: var(--nt-blue); background: #fff; outline: none; }
.dt-jcampo::placeholder { color: var(--nt-faint); font-style: italic; }

/*  LO QUE NO TIENE INFORMACIÓN. Fondo ámbar y un filo del mismo color a la
    izquierda: el fondo se ve de lejos y el filo sobrevive cuando la fila queda
    a media pantalla. Es el mismo ámbar de los avisos del módulo, así que el
    usuario ya sabe que significa «esto pide atención». */
.dt-jhoja.is-vacia {
    background: var(--nt-amber-bg);
    border-left-color: var(--nt-amber);
}
.dt-jhoja.is-vacia > .dt-jclave { color: var(--nt-amber); }

/*  EL BOOLEANO: una casilla y, al lado, la palabra que va a quedar en el JSON.
    La palabra la dibuja el CSS mirando si está tildada, así que sigue al día
    cuando se la toca y no hace falta JavaScript para mantenerla sincronizada. */
.dt-jcheck {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0 0 0 8px;
    accent-color: var(--nt-blue);
    cursor: pointer;
}
.dt-jbool {
    flex: 1 1 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--nt-muted);
    padding: 5px 0;
}
.dt-jbool::after                { content: "false"; }
.dt-jcheck:checked + .dt-jbool::after { content: "true"; color: var(--nt-text); }

/*  el contenedor vacío no tiene campo que editar: dice qué es y que está vacío */
.dt-jsinval {
    flex: 1 1 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--nt-faint);
    font-style: italic;
    padding: 5px 8px;
}

/*  LA INSTANCIA VACÍA — la rama que no es un dato de la persona sino la forma de
    lo que le falta cargar. Va punteada y sobre fondo apagado: el punteado dice
    «esto todavía no existe» sin necesidad de leer el cartel, y es la misma
    convención que el chip «pronto» de la puerta.

    ⚠ Tiene que distinguirse a simple vista de un dato cargado a medias. Sin la
    marca, quien mire su perfil va a creer que cargó una certificación en blanco
    y que perdió lo que había escrito. */
.dt-jrama.es-molde {
    border: 1px dashed var(--nt-border);
    border-radius: 8px;
    background: var(--nt-callout);
    padding: 2px 6px;
    margin: 4px 0;
}
.dt-jmolde {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--nt-faint);
    border: 1px dashed var(--nt-border);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}
/*  adentro de la instancia vacía no se resalta campo por campo: falta TODA, y
    veinte filas en ámbar adentro de una caja que ya dice que está vacía tapan
    los huecos de verdad — los del perfil que la persona sí cargó */
.dt-jrama.es-molde .dt-jhoja.is-vacia {
    background: transparent;
    border-left-color: transparent;
}
.dt-jrama.es-molde .dt-jhoja.is-vacia > .dt-jclave { color: var(--nt-muted); }
.dt-jrama.es-molde .dt-jfalta { display: none; }

/*  AGREGAR Y BORRAR ELEMENTOS DE UNA LISTA. Son `<button type="submit">` del
    mismo formulario que los campos: sin JavaScript, y lo que el usuario venía
    escribiendo se guarda en el mismo viaje —el servidor aplica los valores
    ANTES de agregar o borrar—.

    Discretos a propósito: la acción de esta pantalla es completar lo que falta,
    no administrar listas. Aparecen al pasar el mouse por su fila y quedan
    siempre visibles con el teclado, que es lo que evita que sean inalcanzables
    para quien no usa mouse. */
.dt-jop {
    flex: 0 0 auto;
    border: 1px solid var(--nt-border);
    background: #fff;
    color: var(--nt-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
}
.dt-jop.is-agregar {
    display: inline-block;
    margin: 6px 0 2px 8px;
    border-style: dashed;
}
.dt-jop.is-agregar:hover { border-color: var(--nt-blue); color: var(--nt-blue); border-style: solid; }
/*  GUARDAR y BORRAR aparecen al pasar el mouse por su fila —dos botones fijos en
    cada elemento de cada lista convierten el árbol en una botonera y tapan los
    campos, que es lo que hay que leer—. Con el teclado se ven siempre al
    enfocarlos, que es lo que evita que sean inalcanzables sin mouse. */
.dt-jop.is-borrar,
.dt-jop.is-guardar { opacity: 0; }
.dt-jhoja:hover .dt-jop,
.dt-jsum:hover  .dt-jop,
.dt-jop:focus-visible { opacity: 1; }

/*  ⚠ En una instancia VACÍA el «Guardar» va siempre visible: ahí es la acción
    principal —«esto que estoy completando, guardámelo»— y además es lo único que
    hace existir esa instancia. Un botón que hay que descubrir pasando el mouse
    no sirve para eso. */
.dt-jop.is-guardar.is-siempre { opacity: 1; border-style: solid; color: var(--nt-blue); }

.dt-jop.is-guardar:hover { border-color: var(--nt-blue); color: var(--nt-blue); }
/*  el rojo recién al pasar el mouse: un botón de borrar rojo en cada fila
    convierte el árbol en un campo minado */
.dt-jop.is-borrar:hover { border-color: var(--nt-red); color: var(--nt-red); }

/*  Mientras el pedido de agregar o borrar está en vuelo. No se tapa ni se
    bloquea nada: el árbol sigue ahí y se puede seguir leyendo — lo único que se
    dice es que algo está pasando, porque sin recarga de página no hay ninguna
    otra señal de que el clic hizo algo. */
.dt-jform[aria-busy="true"] .dt-jarbol { opacity: .6; transition: opacity .12s; }
.dt-jform[aria-busy="true"] .dt-jop    { pointer-events: none; }

/*  El aviso que deja el pedido cuando la página no se recargó. Vacío no ocupa
    nada, así que no deja un hueco arriba del árbol cuando no hay nada que decir. */
#dt-javiso:empty { display: none; }

/*  El cartel de lo que falta, tanto en la hoja como en la rama plegada. En la
    rama es lo que evita que plegar el árbol esconda justo lo que hay que ver. */
.dt-jfalta {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--nt-amber);
    background: var(--nt-amber-bg);
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap;
}


/*  EL PÁRRAFO EN EL RENGLÓN — se lee, no se edita ahí.
    ---------------------------------------------------------------------------
    Un resumen de cuatro renglones adentro de un campo del árbol se edita
    mirando por una rendija, y encima empuja las filas de al lado. Acá se
    muestra el PRIMER PÁRRAFO COMPLETO —sin cortarlo con puntos suspensivos, que
    es el pedido— y se escribe en el panel de la derecha.

    ⚠ El intercambio entre el resumen y el campo lo hace la clase `con-panel`,
    que pone el script sobre el árbol. Sin JavaScript no está, y entonces el
    <textarea> se ve en su renglón como siempre: la pantalla sigue sirviendo. */
.dt-jparrafo { display: none; }
.dt-jarbol.con-panel .dt-jparrafo             { display: block; }
.dt-jarbol.con-panel .is-parrafo > .dt-jcampo { display: none; }

.dt-jparrafo {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--nt-text);
    padding: 6px 8px;
    cursor: pointer;
}
.dt-jparrafo:hover        { border-color: var(--nt-border); background: #fff; }
.dt-jparrafo:focus-visible{ outline: 2px solid var(--nt-blue); outline-offset: 2px; }
/*  mientras se lo está editando en el panel, la fila queda marcada: sin eso, con
    el panel abierto no hay forma de saber cuál de los diez párrafos es */
.dt-jparrafo.esta-abierto { border-color: var(--nt-blue); background: var(--nt-blue-soft); }

.dt-jparrafo-txt.is-vacio { color: var(--nt-faint); font-style: italic; }
/*  cuántos párrafos quedan atrás: el renglón muestra el primero entero, no todo */
.dt-jparrafo-mas {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--nt-faint);
    white-space: nowrap;
}

/*  la fila de un párrafo alinea arriba y no al medio: con un texto de cuatro
    renglones, una clave centrada verticalmente queda flotando en el aire */
.dt-jhoja.is-parrafo { align-items: flex-start; }
.dt-jhoja.is-parrafo > .dt-jclave { padding-top: 7px; }

/* --- el panel de la derecha ----------------------------------------------- */

/*  Fijo contra el borde, con su propio scroll. No tapa la pantalla entera ni la
    bloquea: el árbol se sigue leyendo al lado, que es lo que permite corregir un
    texto mirando lo que dice el resto del perfil. */
.dt-jpanel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: min(460px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: #fff;
    border-left: 1px solid var(--nt-border);
    box-shadow: -8px 0 28px rgba(0, 0, 0, .10);
    overflow-y: auto;
}
.dt-jpanel[hidden] { display: none; }

.dt-jpanel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/*  el nombre de la propiedad, que es lo que se vino a editar */
.dt-jpanel-tit {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--nt-text);
    overflow-wrap: anywhere;
}
/*  y de qué rama cuelga: «summary» solo no alcanza cuando hay tres iguales en
    ramas distintas */
.dt-jpanel-ruta {
    font-size: 11px;
    color: var(--nt-faint);
    margin-top: -6px;
}

.dt-jpanel-campo { flex: 1 1 auto; display: flex; }
/*  ⚠ el campo se muestra SIEMPRE acá adentro, aunque el árbol lo esconda en su
    renglón: es el mismo nodo, movido */
.dt-jpanel-campo .dt-jcampo {
    display: block;
    width: 100%;
    min-height: 260px;
    border-color: var(--nt-border);
    background: #fff;
    font-size: 13px;
    line-height: 1.6;
    padding: 12px;
}

.dt-jpanel-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/*  «Continuar», apagado mientras haya cambios sin guardar. Se ve pero no se
    toca: esconderlo dejaría a la persona buscando por dónde sigue, y lo que hay
    que decirle no es «no existe» sino «guardá primero» — que es lo que dice el
    texto de al lado. */
.dt-jseguir.is-off {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}
/* --- el editor de texto --------------------------------------------------- */

/*  Plegado y al final: puede TODO —agregar propiedades, sacarlas, cambiar la
    forma— y justamente por eso no es la puerta de entrada. La corrección normal
    es completar un campo. */
.dt-jtexto { margin-top: 22px; }
.dt-jtexto > summary {
    display: inline-block;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--nt-muted);
    padding: 6px 0;
}
.dt-jtexto > summary:hover { color: var(--nt-text); }
.dt-jraw {
    display: block;
    width: 100%;
    margin: 8px 0 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--nt-text);
    background: var(--nt-callout);
    border: 1px solid var(--nt-border);
    border-radius: 10px;
    padding: 14px;
    resize: vertical;
    tab-size: 2;
}
.dt-jraw:focus { border-color: var(--nt-blue); outline: none; background: #fff; }
@media screen and (max-width: 640px) {
    .dt-wrap { padding: 24px 16px 72px; }
    .dt-title { font-size: 23px; }
    .dt-hero  { font-size: 23px; }
    .dt-task-head, .dt-task-body, .dt-form { padding-left: 16px; padding-right: 16px; }
    .dt-grid { grid-template-columns: 1fr; }
    /*  en el celular no entran número + chip + título + estado en una línea:
        el chip pasa a acompañar al número y el título ocupa el ancho completo */
    .dt-taskrow { flex-wrap: wrap; gap: 8px 10px; }
    .dt-taskrow-plat { flex: 0 0 auto; }
    .dt-taskrow-hora { flex: 0 0 auto; }
    /*  El flag se cae en el celular: ahí la hora ya está a la vista y el ancho
        se necesita para el título. Quien quiera el detalle abre la tarea. */
    .dt-taskrow-prog { display: none; }
    .dt-pts-input { width: 46px; }
    .dt-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
    /*  en el celular no entran los dos abajo: el interruptor se corre arriba
        del toast y se queda con lo mínimo para seguir siendo una salida */
    .dt-switch { left: 12px; right: 12px; bottom: 64px; justify-content: space-between; }
    .dt-taskrow-body { flex: 1 1 100%; order: 3; }
    /*  el modal deja de estar centrado a media altura: en el celular conviene
        arriba y con aire a los costados */
    .dt-modal-caja { margin: 8vh 14px 0; padding: 22px 20px 18px; }
    .dt-panel-caja { width: 100%; max-width: 100%; padding: 26px 20px; }
    /*  EN EL CELULAR LOS CHIPS SE APILAN, uno debajo del otro (pedido del dueño,
        2026-08-16). Reemplaza a la tira que se arrastraba de costado: apilados
        se ven los cinco de una, y en una pantalla de 375px lo que sobra es alto
        y lo que falta es ancho.

        Con la columna, el rótulo no puede seguir al costado —quedaría un
        «Buscar» solo contra cinco renglones—, así que el marco entero pasa a
        columna y el rótulo se va arriba. La línea que lo separa deja de ser el
        borde derecho y pasa a ser el de abajo: es la misma separación, girada.

        Los 32px de los costados se mantienen, que es la medida pedida: en 375px
        lo que se achica es lo de adentro, no el marco. */
    .dt-buscador {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        border-radius: 12px;
    }
    .dt-buscador-label {
        padding: 0 0 10px;
        border-right: 0;
        border-bottom: 1px solid var(--nt-border);
        font-size: 12.5px;
    }
    /*  `flex-start` y no `stretch`: un chip estirado al ancho de la columna deja
        de ser un chip y pasa a ser un renglón de menú. Siguen midiendo lo que
        mide su nombre, apilados contra el margen izquierdo. */
    .dt-buscas {
        flex-direction: column;
        align-items: flex-start;
    }
    .dt-busca { padding: 8px 13px; font-size: 13.5px; margin: 3px 4px; }
    /*  EL PIE SE PARTE EN DOS RENGLONES Y EL ENLACE SE VUELVE BOTÓN. En el
        celular no hay mouse: un enlace de texto de 13px es un blanco difícil de
        tocar, y el botón le da el área que le falta. En el navegador sigue
        siendo un enlace al lado de la pregunta.

        Se dibuja con TOKENS y fondo transparente, no copiando `.dt-btn`: así
        vale igual en la piel clara y en la oscura, sin una regla por piel. */
    .dt-pie-c { flex-direction: column; gap: 10px; }
    .dt-pie-c a {
        border: 1px solid var(--nt-border);
        border-radius: 8px;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 600;
        color: var(--nt-text);
        text-decoration: none;
    }
    /*  las dos cajas del comienzo bajan a una columna con las tarjetas: al lado
        una de otra en un celular quedan dos títulos partidos en tres renglones,
        y además empujan las opciones abajo del pliegue */
    /*  EL ÁRBOL DEL JSON, EN DOS RENGLONES POR HOJA. La clave arriba y el campo
        abajo: con 190px fijos para la clave, en un celular al valor le quedan
        cien y pico de píxeles, que no alcanzan ni para una fecha. El resaltado
        de lo vacío se mantiene igual, que es lo que la pantalla vino a mostrar. */
    .dt-jhoja {
        flex-wrap: wrap;
        gap: 2px 8px;
        padding: 6px 4px 8px 8px;
    }
    .dt-jhoja > .dt-jclave { flex: 1 1 100%; }
    .dt-jcampo             { flex: 1 1 100%; border-color: var(--nt-border); }
    .dt-jarbol             { padding: 8px; }
    .dt-jhijos             { margin-left: 5px; padding-left: 9px; }
    /*  el panel de la derecha ocupa la pantalla: en 375px, «a la derecha» no es
        un lugar —lo que queda al lado no se lee— y un panel angosto para escribir
        un párrafo es peor que no tenerlo */
    .dt-jpanel { width: 100%; border-left: 0; }
    .dt-jpanel-campo .dt-jcampo { min-height: 200px; }

    .dt-modos    { grid-template-columns: 1fr; }
    /*  y no conservan el alto ni el cuerpo del escritorio: apiladas, 468px cada
        una son tres pantallas de celular antes del primer chip. Se achican a lo
        que sigue siendo una caja grande sin tapar lo que hay abajo, y el texto
        se acerca al borde en la misma proporción. */
    .dt-modo        { min-height: 198px; padding: 24px; }
    .dt-modo-titulo { font-size: 26px; }
    .dt-centro   { margin-top: 0; }
    .dt-cargos   { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PIEL VERCEL — sólo la vista `welcome` (2026-08-16)
   ==========================================================================

   La puerta se viste como una pantalla de Vercel: fondo negro, tipografía Geist
   con el tracking cerrado, bordes de 1px muy finos y el brillo de arriba en las
   cajas. No cambia NI UN componente ni una línea de HTML — son los mismos
   `.dt-modo` y `.dt-busca` de siempre, repintados.

   ⚠ TODO cuelga de `body.dt-skin-vercel`, sin excepción. Este archivo lo carga
   el módulo entero: una sola regla suelta acá deja el panel de tareas en negro.
   La clase la pone `head.php` cuando la vista declara `$s_dt_skin = 'vercel'`.

   La mayor parte del trabajo la hacen los TOKENS `--nt-*`: el módulo ya pinta
   todo con ellos, así que redefinirlos en el <body> arrastra los avisos, los
   textos y los bordes sin repetir un selector por componente. Lo que se escribe
   abajo a mano es sólo lo que un modo oscuro no resuelve solo: los degradados,
   el brillo del borde y los estados de hover, que en Vercel aclaran en vez de
   teñir de color.
   ------------------------------------------------------------------------- */

body.dt-skin-vercel {
    /*  la Geist la pide `head.php`; el resto de la pila es para el segundo que
        tarda en llegar y para el día que Google no responda */
    --nt-font: "Geist", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Helvetica, Arial, sans-serif;

    /*  la escala de grises de Vercel: negro puro y el texto en #ededed, que no
        es blanco — el blanco puro sobre negro vibra y cansa a los dos párrafos */
    --nt-text:    #ededed;
    --nt-muted:   #a1a1a1;
    --nt-faint:   #7d7d7d;
    --nt-border:  #2e2e2e;
    --nt-divider: rgba(255, 255, 255, .10);
    --nt-hover:   rgba(255, 255, 255, .06);
    --nt-callout: #0a0a0a;

    /*  los acentos siguen existiendo porque los avisos los usan, pero pasan a
        sus versiones oscuras: el mismo tono sobre negro sin bajar el fondo es un
        cartel fluorescente */
    --nt-blue:      #0072f5;
    --nt-blue-soft: rgba(0, 114, 245, .16);
    --nt-green:     #62c073;
    --nt-green-bg:  rgba(98, 192, 115, .12);
    --nt-amber:     #f5a623;
    --nt-amber-bg:  rgba(245, 166, 35, .12);
    --nt-red:       #ff6369;
    --nt-red-bg:    rgba(255, 99, 105, .12);

    background: #000;
    color: var(--nt-text);
    font-weight: 400;
    /*  el <body> tiene que tapar la pantalla entera: `notion.css` le puso fondo
        blanco al <html>, y sin esto queda un borde blanco abajo */
    min-height: 100vh;
}

/*  y el <html> también, para el rebote del scroll y la barra del navegador. Es
    una mejora y no un requisito: donde `:has()` no exista, el `min-height` de
    arriba ya deja la pantalla negra. */
html:has( > body.dt-skin-vercel ) { background: #000; }

/*  EL RESPLANDOR DE ARRIBA. Es lo que impide que el negro se lea como «no cargó
    la hoja de estilos»: una luz muy tenue, fija, detrás de todo. Sin eventos de
    mouse, porque tapa la pantalla entera. */
body.dt-skin-vercel::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient( 62% 46% at 50% 0%,
                                 rgba(255, 255, 255, .07), transparent 72% );
}
/*  el contenido, por encima del resplandor */
body.dt-skin-vercel .dt-wrap { position: relative; z-index: 1; }

/* --- las dos cajas ------------------------------------------------------- */

/*  Negro sobre negro: la caja no se separa del fondo por color sino por el
    borde y por el degradado, que es como se separan las de Vercel. */
body.dt-skin-vercel .dt-modo {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 180deg, #0e0e0e 0%, #000 100% );
    border-color: #2e2e2e;
}
/*  LA LÍNEA DE LUZ DEL BORDE SUPERIOR — el detalle más reconocible de las cards
    de Vercel. Se apaga hacia los costados: un filo parejo se lee como un borde
    mal pintado, y el degradado es lo que lo hace leer como un reflejo. */
body.dt-skin-vercel .dt-modo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient( 90deg, transparent,
                                 rgba(255, 255, 255, .38) 50%, transparent );
}

/*  El título, con el tracking cerrado de los headings de Vercel. A este cuerpo
    la diferencia se nota: sin el ajuste, 34px de Geist quedan sueltos. */
body.dt-skin-vercel .dt-modo-titulo {
    font-weight: 600;
    letter-spacing: -.045em;
}
/*  y el degradado de blanco a gris que Vercel le pone a los títulos grandes. Va
    detrás de un @supports porque el recorte contra el texto es lo que hace
    visible la letra: donde no exista, el título quedaría transparente. */
@supports ( -webkit-background-clip: text ) or ( background-clip: text ) {
    body.dt-skin-vercel .dt-modo-titulo {
        background: linear-gradient( 180deg, #fff 34%, #8f8f8f 100% );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* --- el área de búsqueda y los chips -------------------------------------- */

/*  El marco, un tono por encima del negro del fondo y no por debajo: hundirlo
    lo convertiría en un input, y esto no se escribe, se elige. El rótulo queda
    gris contra los chips claros, que es el orden en que hay que leerlos. */
body.dt-skin-vercel .dt-buscador {
    background: #0a0a0a;
    border-color: #2e2e2e;
}
/*  `border-color` y no `border-right-color`: en el celular la línea del rótulo
    deja de estar a la derecha y pasa a estar abajo, y una sola declaración
    cubre las dos. */
body.dt-skin-vercel .dt-buscador-label {
    color: #a1a1a1;
    border-color: #2e2e2e;
    font-weight: 500;
    letter-spacing: -.01em;
}

/*  Los botones de Vercel no se levantan al pasar el mouse: aclaran el fondo y
    el borde, y nada más. Por eso el `transform` del módulo se apaga acá — un
    chip que salta es de otra pantalla. */
/*  ⚠ Un tono MÁS CLARO que el marco que ahora los contiene: con los dos en
    #0a0a0a los chips desaparecían adentro del área y quedaban cinco bordes
    flotando. La escala es fondo negro → marco #0a0a0a → chip #171717. */
body.dt-skin-vercel .dt-busca {
    background: #171717;
    border-color: #2e2e2e;
    color: var(--nt-text);
    font-weight: 500;
    letter-spacing: -.01em;
    transition: border-color .15s, background .15s, color .15s;
}
body.dt-skin-vercel .dt-busca:hover {
    background: #262626;
    border-color: #565656;
    transform: none;
}
body.dt-skin-vercel .dt-busca:focus-visible { outline-color: #ededed; }

/*  El elegido se marca en BLANCO y no en azul: en esta piel el color es del
    aviso, y el estado se dice con contraste. Queda como el botón primario de
    Vercel, que es negro sobre blanco. */
body.dt-skin-vercel .dt-busca.is-elegida {
    background: #ededed;
    border-color: #ededed;
    color: #000;
}
body.dt-skin-vercel .dt-busca.is-elegida:hover { background: #fff; border-color: #fff; }

/*  El que todavía no abrió: apagado, sin fondo propio y con el borde punteado.
    Sigue siendo un enlace y sigue diciendo «pronto». */
body.dt-skin-vercel .dt-busca.is-pronto {
    background: transparent;
    border-style: dashed;
    color: var(--nt-muted);
}

/*  Los carteles de adentro del chip, en versión oscura y sin fondo de color: dos
    pastillas encendidas adentro de un chip negro pesan más que el nombre de la
    búsqueda, que es lo que hay que leer primero. */
body.dt-skin-vercel .dt-tag {
    font-weight: 600;
    border: 1px solid;
    background: transparent;
}
body.dt-skin-vercel .dt-tag.is-gratis { color: #62c073; border-color: rgba(98, 192, 115, .35); }
body.dt-skin-vercel .dt-tag.is-pronto { color: #f5a623; border-color: rgba(245, 166, 35, .35); }

/* --- avisos y pie -------------------------------------------------------- */

/*  Los avisos ya salen oscuros por los tokens; lo único que les falta sobre
    negro es el borde, que es lo que los despega del fondo cuando el relleno es
    casi del mismo tono. */
body.dt-skin-vercel .dt-note      { border: 1px solid var(--nt-divider); }
body.dt-skin-vercel .dt-note-info { border-color: #2e2e2e; }
body.dt-skin-vercel .dt-note-warn { border-color: rgba(245, 166, 35, .32); }
body.dt-skin-vercel .dt-note b    { color: var(--nt-text); }

/*  El enlace del pie, subrayado a la manera de Vercel: la línea despegada del
    texto y en gris, no del color del texto. En el celular este mismo enlace se
    vuelve botón y el subrayado se apaga — está abajo, en el bloque de 640px. */
body.dt-skin-vercel .dt-pie-c a {
    color: var(--nt-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #565656;
}
body.dt-skin-vercel .dt-pie-c a:hover { text-decoration-color: #ededed; }

/*  ⚠ NO HAY REGLAS PARA `.dt-switch` ACÁ, y no es un olvido: `welcome` —la única
    vista con esta piel— NO dibuja el interruptor de desarrollo (`$b_dt_dev_switch
    = false`), así que cualquier cosa que se escriba para él es código muerto.

    Si algún día otra vista toma la piel y sí lo muestra, hay que escribirlas, y
    hay una trampa esperando: el módulo pinta el estado «como usuario» con fondo
    BLANCO, etiqueta en `--nt-faint` y `opacity: .72`, tres decisiones pensadas
    contra un fondo claro. Sobre negro queda una pastilla casi negra con letra
    gris al 72%, o sea invisible. Vale para todo lo que el módulo haya pintado
    con colores literales en vez de tokens. */

@media screen and (max-width: 640px) {
    /*  el resplandor se achica con la pantalla: a 375px de ancho, un radial
        pensado para escritorio le lava el negro a la mitad de arriba */
    body.dt-skin-vercel::before {
        background: radial-gradient( 90% 28% at 50% 0%,
                                     rgba(255, 255, 255, .07), transparent 72% );
    }
    /*  ⚠ El enlace del pie es botón acá, y el subrayado de la piel le ganaba al
        `text-decoration: none` del bloque de celular por especificidad —la piel
        agrega el `body`—. Se apaga desde la piel, que es donde se prendió: un
        botón subrayado no se lee como botón. */
    body.dt-skin-vercel .dt-pie-c a {
        text-decoration: none;
        background: transparent;
    }
    body.dt-skin-vercel .dt-pie-c a:hover { background: #1a1a1a; border-color: #565656; }
}

/* --- las preguntas por lo que falta en el CV ------------------------------ */
/*
    Una sola pregunta por pantalla. Todo el ancho es para ella: acá no hay nada
    más que mirar, y eso es a propósito — la pantalla anterior es justamente la
    que muestra todo junto.
*/

/*  El avance arriba. Sin saber cuántas faltan, contestar de a una se siente
    interminable, que es la sensación que hace abandonar en la tercera. */
.dt-javance {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}
.dt-javance-n {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--nt-muted);
    white-space: nowrap;
}
.dt-javance-barra {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background: var(--nt-callout);
    overflow: hidden;
}
.dt-javance-hecho {
    display: block;
    height: 100%;
    background: var(--nt-blue);
    transition: width .2s;
}

/*  La pregunta es el título de la pantalla, y por eso es más grande que un
    título normal: es lo único que hay que leer. */
.dt-jpregunta { font-size: 30px; line-height: 1.25; max-width: 22ch; }

.dt-jform-preg { max-width: 640px; }
.dt-jresp      { width: 100%; margin-bottom: 16px; }
/*  el campo de una línea igual respira: una respuesta corta en una caja chica
    parece un buscador, no una conversación */
input.dt-jresp { padding: 12px 14px; font-size: 15px; }

/*  «Seguir sin responder» no es un botón más: es la salida. Se ve como un enlace
    y no como los otros dos porque no hace lo mismo que ellos —no guarda nada— y
    tres botones iguales en fila obligan a leer los tres para elegir. */
.dt-jsaltar {
    border: 0;
    background: transparent;
    color: var(--nt-muted);
    font-family: inherit;
    font-size: 13px;
    padding: 10px 4px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.dt-jsaltar:hover { color: var(--nt-text); }

/*  LOS CINCO BOTONES DE LA PREGUNTA, EN UNA SOLA FILA (pedido del dueño,
    2026-08-18).

    ⚠ NO ENTRAN EN EL ANCHO DEL FORMULARIO, y no es cuestión de achicarlos: los
    cinco piden ~810px y el formulario mide 640, que es un ancho elegido para
    que el TEXTO se lea —no para cinco botones—. Bajarles el cuerpo hasta que
    entren los dejaría más chicos que los del resto del módulo, que es lo
    contrario de «el mismo estilo».

    Así que la fila —y sólo la fila— se estira hasta el borde del contenedor:
    812px = 860 del `.dt-wrap` menos sus 24px de padding a cada lado, y 172 es
    lo que le falta a los 640 del formulario para llegar ahí. El formulario no
    se toca.

    ⚠ SÓLO DESDE 880px DE ANCHO. Más abajo el contenedor ya no mide 860 —se
    achica con la pantalla— y ese +172 se saldría de la página; ahí la fila se
    queda dentro del formulario y `flex-wrap` baja los botones de renglón, que
    es lo que corresponde en un teléfono. */
@media ( min-width: 880px ) {
    .dt-jform-preg .dt-actions { width: calc( 100% + 172px ); gap: 8px; }
}

/*  cuántas quedaron salteadas, desde el principio: si sólo se dijera al final,
    quien saltea tres se entera de que la ronda no terminó cuando ya se iba */
.dt-javance-salt {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--nt-amber);
    background: var(--nt-amber-bg);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}

/*  EL ELEMENTO ENTERO, DEBAJO DE LA PREGUNTA — para repasarlo, no para editarlo.
    Se despega del formulario con fondo propio: es material de consulta, y si se
    viera igual que lo de arriba competiría con la pregunta, que es lo único que
    hay que contestar. */
.dt-jinst {
    max-width: 640px;
    margin-top: 28px;
    border: 1px solid var(--nt-border);
    border-radius: 12px;
    background: var(--nt-callout);
    padding: 16px 18px;
}
.dt-jinst-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--nt-muted);
    margin-bottom: 10px;
}
.dt-jinst-de {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 500;
    font-size: 11px;
    color: var(--nt-faint);
    white-space: nowrap;
}

.dt-jinst-fila {
    display: flex;
    gap: 12px;
    padding: 5px 6px;
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
    font-size: 12.5px;
    line-height: 1.5;
}
.dt-jinst-clave {
    flex: 0 0 170px;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    color: var(--nt-text);
    overflow-wrap: anywhere;
}
.dt-jinst-valor { flex: 1 1 auto; min-width: 0; color: var(--nt-text); overflow-wrap: anywhere; }
.dt-jinst-valor.is-vacio { color: var(--nt-faint); font-style: italic; }

/*  lo que falta, en el mismo ámbar que en el perfil: es la misma idea */
.dt-jinst-fila.is-vacia .dt-jinst-clave { color: var(--nt-amber); }

/*  ⚠ y la fila que se está preguntando, marcada: en un ítem de diez campos, sin
    esto hay que ir comparando cada uno con el título de la pregunta */
.dt-jinst-fila.es-esta {
    background: var(--nt-blue-soft);
    border-left-color: var(--nt-blue);
}
.dt-jinst-fila.es-esta .dt-jinst-clave,
.dt-jinst-fila.es-esta .dt-jinst-valor { color: var(--nt-blue); }

@media screen and (max-width: 640px) {
    .dt-jinst-fila  { flex-wrap: wrap; gap: 2px 12px; }
    .dt-jinst-clave { flex: 1 1 100%; }
}

/* --- el cierre: lo que te llevó, y tu link --------------------------------- */

.dt-cierre { max-width: 660px; }

/*  EL TIEMPO, primero y grande. Es el dato que convierte el consejo de abajo en
    una conclusión: «compartí tu link» dicho solo es una recomendación más;
    dicho después de «te llevó 34 minutos» es lo que la persona acaba de vivir. */
.dt-cierre-tiempo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.dt-cierre-n {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--nt-amber);
}
.dt-cierre-t { font-size: 14px; color: var(--nt-muted); }

/* --- el CV público, para reclutadores -------------------------------------- */

/*  El JSON entero y a la vista: el que abre esto no viene a leerlo, viene a
    llevárselo, y cualquier cosa que haya que desplegar antes de copiar es un
    paso de más. Con scroll propio para que la página no se haga infinita. */
.dt-cvjson {
    margin: 18px 0 0;
    padding: 16px 18px;
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--nt-border);
    border-radius: 12px;
    background: var(--nt-callout);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--nt-text);
    white-space: pre;
    tab-size: 2;
}

/*  La frase que sigue al título va con el MISMO tamaño —lleva `.dt-title`— y por
    eso sólo se le corrige lo que no es tamaño: menos peso, para que el título
    siga siendo el título, y aire arriba para que se lean como dos golpes y no
    como un párrafo partido. */
.dt-cierre-golpe {
    font-weight: 600;
    color: var(--nt-text);
    margin: 14px 0 20px;
    max-width: 26ch;
}

/*  el aviso del copiado nace vacío: sin esto dejaría un hueco arriba de los
    botones hasta que alguien toque «Copiar mi link» */
#dt-cierre-aviso:empty { display: none; }

/*  EL PEDIDO de la pantalla —«compartí tu link»— en un escalón entre el título y
    la bajada: es lo único que hay que hacer acá, así que se lee antes que el
    campo con el link, pero sin pelear con los dos golpes de arriba. */
.dt-cierre-pedido {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--nt-text);
    margin: 0 0 8px;
    max-width: 30ch;
}
.dt-cierre-pedido b { font-weight: 700; }

/*  EL AVISO PARA EL RECLUTADOR, en la vista pública del CV. Es lo único de esta
    pantalla que no son datos, y por eso se despega con marco propio: el que
    entra viene a copiar, y algo que se parezca al resto de la página no lo
    frena ni un segundo. */
.dt-cvaviso {
    margin: 18px 0 22px;
    padding: 16px 20px;
    border: 1px solid var(--nt-amber);
    border-left-width: 4px;
    border-radius: 12px;
    background: var(--nt-amber-bg);
    max-width: 640px;
}
.dt-cvaviso-1 {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--nt-text);
}
/*  la segunda frase es el pedido de verdad. En mayúsculas por `text-transform` y
    no escrita en mayúsculas: así el texto del HTML se puede leer, buscar y
    traducir como una oración normal —y un lector de pantalla no la deletrea—. */
.dt-cvaviso-2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nt-amber);
}

/*  El botón de dejar preguntas, adentro del aviso: es la salida del pedido que
    el reclutador acaba de leer, y abajo competiría con copiar y descargar, que
    es a lo que vino. En ámbar como el marco —es del aviso, no de la página—. */
.dt-cvaviso-btn {
    display: inline-block;
    margin-top: 14px;
    border-color: var(--nt-amber);
    background: var(--nt-amber);
    color: #fff;
}
.dt-cvaviso-btn:hover { filter: brightness(.93); }

/*  Los dos indicadores sueltos de «N postulantes a nivel mundial» / «en <país>»
    se sacaron el 2026-08-17: los números los dice el título, en la oración
    entera, que es donde se entienden. Sueltos y grandes competían con el puntaje
    de la esquina, que es el número de la persona. */
.dt-cierre .dt-title { max-width: 24ch; }

/* --- el puntaje del perfil, arriba a la derecha ---------------------------- */
/*
    Protagonista: es lo primero que se mira al entrar y lo que se vuelve a mirar
    después de completar algo. Alineado a la derecha para que el número quede
    contra el borde —así se lo encuentra sin buscarlo— y con el pie debajo.

    Va adentro de `.dt-top`, que ya reparte el espacio: el enlace de volver a la
    izquierda y esto a la derecha.
*/
.dt-puntaje {
    flex: 0 0 auto;
    text-align: right;
    line-height: 1.1;
}
.dt-puntaje-cifra { display: flex; align-items: baseline; justify-content: flex-end; gap: 2px; }
.dt-puntaje-n {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--nt-text);
}
/*  el «/100» pegado y chico: sin él, un «72» de ese tamaño se puede leer como
    cualquier cosa —cuántos perfiles, cuántos días—; con él ya no hace falta
    pensarlo */
.dt-puntaje-de { font-size: 15px; font-weight: 600; color: var(--nt-faint); }

/*  ⚠ CON DECIMALES EL NÚMERO VA MÁS CHICO. «6,33» son cuatro caracteres donde
    antes había dos, y a 64px se comía el ancho del título que tiene al lado en
    la misma fila. Sigue siendo el elemento más grande de la cabecera —que es lo
    que tiene que ser—, pero deja lugar. */
.dt-puntaje.es-abierto .dt-puntaje-n { font-size: 48px; }

.dt-puntaje-l {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--nt-muted);
    margin-top: 2px;
}
/*  Tres bandas y no cinco: lo único que hay que entender de un vistazo es si
    esto está bien, a medias o mal. El color va SÓLO en el número — pintar
    también las etiquetas convierte la esquina en un semáforo. */
.dt-puntaje.es-alto  .dt-puntaje-n { color: var(--nt-green); }
.dt-puntaje.es-medio .dt-puntaje-n { color: var(--nt-blue); }
.dt-puntaje.es-bajo  .dt-puntaje-n { color: var(--nt-amber); }

@media screen and (max-width: 640px) {
    /*  en el celular el número baja de cuerpo: 46px contra un «← Volver» a la
        izquierda deja el encabezado desbalanceado en 375px de ancho */
    .dt-puntaje-n { font-size: 44px; }
}

/*  LOS QUE ESTÁN POR ENCIMA Y LOS QUE ESTÁN POR DEBAJO, uno a cada lado del
    puntaje. La POSICIÓN es la información: con los dos abajo —o los dos arriba—
    habría que leer las etiquetas para saber cuál es cuál. Por eso el de arriba
    va arriba aunque el número quede más lejos del borde.

    Sólo aparecen donde la vista pasa el reparto: en `perfil` el puntaje va solo
    —esa pantalla es para completar el perfil, y decirle a alguien cuánta gente
    lo supera mientras corrige su teléfono no lo ayuda a corregir su teléfono—. */
.dt-puntaje-arriba,
.dt-puntaje-abajo {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--nt-muted);
    white-space: nowrap;
}
.dt-puntaje-arriba { margin-bottom: 4px; }
/*  el de abajo respira más que el de arriba: queda pegado al pie del
    puntaje —«puntaje del perfil»— y sin ese aire los dos se leen como una
    sola cosa de tres renglones */
.dt-puntaje-abajo  { margin-top: 16px; }

/*  el número, del color de lo que significa: los que están por encima son la
    competencia que todavía le gana, los de abajo son lo que ya construyó */
.dt-puntaje-arriba .dt-puntaje-c { font-weight: 700; color: var(--nt-amber); }
.dt-puntaje-abajo  .dt-puntaje-c { font-weight: 700; color: var(--nt-green); }

/*  la flecha marca la dirección sin gastar una palabra */
.dt-puntaje-arriba::before { content: "▲ "; color: var(--nt-amber); font-size: 9px; }
.dt-puntaje-abajo::before  { content: "▼ "; color: var(--nt-green); font-size: 9px; }

/*  `perfil/competencia`: el indicador arriba a la derecha, FUERA DEL FLUJO.

    ⚠ No es un capricho. Con el mapa de calor abajo, el indicador mide más de
    400px; como columna de un flex le imponía esa altura a toda la fila, y el
    texto que sigue arrancaba recién abajo del mapa, con medio metro de blanco en
    el medio. Sacándolo del flujo, la altura de la izquierda es la de la
    izquierda.

    Lo que evita que se pisen no es la suerte: es el `padding-right` del bloque
    de texto, que reserva exactamente el ancho de la columna del indicador. */
.dt-compa     { position: relative; }
.dt-compa-ind {
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
}
.dt-compa-txt { padding-right: 200px; }
.dt-compa-txt .dt-title { max-width: 24ch; margin-top: 10px; }

@media screen and (max-width: 640px) {
    /*  en el celular no hay lugar para dos columnas: el indicador vuelve al
        flujo y va arriba, que es el orden en que se leen apilados */
    .dt-compa-ind { position: static; width: auto; margin-bottom: 22px; }
    .dt-compa-txt { padding-right: 0; }
    .dt-compa     { display: flex; flex-direction: column; }
    .dt-compa .dt-puntaje { text-align: left; }
    .dt-compa .dt-puntaje-cifra { justify-content: flex-start; }
}

/*  LOS DOS NÚMEROS DE AL LADO DEL PUNTAJE, en cuerpo grande y en miles («96,9k»).
    Compiten con el puntaje por el ojo, y a esa escala una cifra completa como
    «96.900» hay que leerla dígito por dígito. La etiqueta que los explica se
    queda chica: el número es lo que se mira, el texto es lo que se lee una vez. */
.dt-puntaje-c { font-size: 22px; line-height: 1.15; letter-spacing: -.02em; }
.dt-puntaje-q { display: block; font-size: 11px; }

/* --- el mapa de calor de las habilidades, debajo del indicador ------------- */
/*
    Una celda por habilidad y el color dice cuánta EVIDENCIA hay detrás: de «está
    en tu lista» a «tenés tres ejemplos con su repositorio». Esa diferencia
    —decir que sabés algo contra poder mostrarlo— es lo que separa un CV de un
    perfil que sirve, y acá se ve sin leer nada.

    ⚠ LA GRILLA ES FIJA, 10 × 20, y NO una celda por habilidad. El hueco también
    dice algo: doce celdas encendidas sobre doscientas se leen de un vistazo como
    «esto recién empieza», sin necesidad de escribirlo. Por eso las celdas
    sobrantes se dibujan igual, apagadas.

    Sin rótulo ni leyenda: es un bloque visual, no un gráfico que haya que
    interpretar. Lo que dice cada celda está en su `title`.
*/
/*  Sin separador arriba (pedido del dueño, 2026-08-17): una línea entre el
    puntaje y el mapa los presenta como dos cosas, y son la misma —el mapa ES el
    puntaje, dibujado—. */
.dt-heat {
    margin-top: 20px;
}
.dt-heat-g {
    display: grid;
    grid-template-columns: repeat(10, 9px);
    gap: 2px;
    /*  ⚠ PEGADO A LA DERECHA, como todo lo demás del indicador. La grilla mide
        127px adentro de una columna de 160, así que alineada a la izquierda
        quedaba 33px corrida respecto del «63/100» y del «164,9k», que van
        contra el borde derecho. Era lo único desalineado del bloque. */
    justify-content: end;
}
.dt-heat-c {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--nt-callout);
}

/*  TODA LA ESCALA EN VERDE, del más apagado al pleno. Un solo tono con cinco
    pasos se lee como una sola cosa que crece; dos colores distintos se leerían
    como dos cosas que compiten.

    `n0` son las celdas que faltan por llenar: apenas visibles, para que se
    entienda que ahí hay lugar sin que compitan con las que sí están. */
.dt-heat-c.n0 { background: rgba(68, 131, 97, .06); }
.dt-heat-c.n1 { background: rgba(68, 131, 97, .22); }
.dt-heat-c.n2 { background: rgba(68, 131, 97, .45); }
.dt-heat-c.n3 { background: rgba(68, 131, 97, .70); }
.dt-heat-c.n4 { background: var(--nt-green); }

/* --- el ambiente, a la vista ----------------------------------------------- */
/*
    En DESARROLLO y CALIDAD se muestra siempre; en PRODUCCIÓN sólo al
    administrador. La confusión entre ambientes no se arregla con cuidado: se
    arregla con un cartel.

    Abajo a la derecha y por encima de todo, pero chico y con transparencia: es
    una referencia permanente, no un aviso. Al pasar el mouse se vuelve opaco,
    por si hay que leer el correo o la fecha de vencimiento.
*/
.dt-ambiente {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.4;
    opacity: .62;
    transition: opacity .12s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}
.dt-ambiente:hover { opacity: 1; }

/*  un color por ambiente, y no el mismo con el nombre cambiado: lo que evita el
    error es reconocerlo de reojo, sin leer */
.dt-ambiente.es-desarrollo { background: var(--nt-blue-soft);  color: var(--nt-blue);  border: 1px solid var(--nt-blue); }
.dt-ambiente.es-calidad    { background: var(--nt-amber-bg);   color: var(--nt-amber); border: 1px solid var(--nt-amber); }
.dt-ambiente.es-produccion { background: var(--nt-red-bg);     color: var(--nt-red);   border: 1px solid var(--nt-red); }

.dt-ambiente-n { font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.dt-ambiente-u,
.dt-ambiente-v { color: var(--nt-muted); white-space: nowrap; }

.dt-ambiente-salir {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

@media screen and (max-width: 640px) {
    /*  en el celular sólo el nombre del ambiente: el correo y la fecha ocupan
        media pantalla y el cartel taparía los botones de abajo */
    .dt-ambiente    { left: auto; bottom: 8px; right: 8px; }
    .dt-ambiente-u,
    .dt-ambiente-v  { display: none; }
}

/* --- el login del módulo --------------------------------------------------- */
/*
    Mismo lenguaje que el resto: título, bajada, un campo y los botones. SIN caja
    ni marco — el perfil, las preguntas y las tareas tampoco los tienen, y una
    tarjeta centrada acá haría que el login se viera como de otro producto, que
    es justamente lo que se vino a arreglar.

    El ancho es el de una conversación, no el de la pantalla: un campo de correo
    de 800px se ve como un error.
*/
.dt-login { max-width: 520px; }
.dt-login .dt-lead { margin-bottom: 26px; }

/*  El campo del código: seis dígitos, grandes y separados. Es lo único que hay
    que escribir en esa pantalla, y a cuerpo de texto normal se lee como un campo
    más de un formulario que no existe. */
.dt-login-campo {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .28em;
    text-align: center;
    padding: 16px 14px;
    margin-bottom: 16px;
}
.dt-login-campo::placeholder { letter-spacing: .28em; color: var(--nt-faint); font-weight: 400; }

/*  el código que se muestra en desarrollo, adentro del aviso */
.dt-login-cod {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .16em;
    background: #fff;
    border: 1px solid var(--nt-amber);
    border-radius: 6px;
    padding: 2px 8px;
    margin-left: 4px;
}


/* --- perfil/procesando: los pasos de la lectura del CV ---------------------
   Es una MAQUETA: no hay barra que avance ni porcentaje que suba, a propósito
   —ver el comentario de la vista—. Los pasos se dibujan quietos y numerados. */

.dt-proc {
    list-style: none;
    margin: 24px 0 0 0;
    padding: 0;
}

.dt-proc-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--nt-divider);
}

.dt-proc-item:last-child { border-bottom: 0; }

.dt-proc-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--nt-callout);
    border: 1px solid var(--nt-border);
    color: var(--nt-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}

.dt-proc-txt   { display: block; font-size: 14px; color: var(--nt-text); line-height: 1.45; }
.dt-proc-det   { display: block; font-size: 13px; color: var(--nt-muted); margin-top: 2px; }

/*  LOS TRES ESTADOS DE UN PASO. Los pone el JavaScript a medida que el endpoint
    va contestando (ver perfil/procesando/index.js).

    El número es lo único que cambia de color: el texto se queda quieto para que
    la lista no parpadee entera en cada paso. El que está corriendo late, y ese
    latido es lo único que dice «esto sigue vivo» mientras se espera a una API
    que puede tardar. */

.dt-proc-item.is-curso .dt-proc-num {
    border-color: var(--nt-blue);
    background: var(--nt-blue-soft);
    color: var(--nt-blue);
    animation: dt-proc-late 1.1s ease-in-out infinite;
}
.dt-proc-item.is-hecho .dt-proc-num {
    border-color: #cfe0d3;
    background: var(--nt-green-bg);
    color: var(--nt-green);
}
.dt-proc-item.is-error .dt-proc-num {
    border-color: #f0c9c7;
    background: var(--nt-red-bg);
    color: var(--nt-red);
}
.dt-proc-item.is-error .dt-proc-det { color: var(--nt-red); }

@keyframes dt-proc-late {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

/*  ⚠ Quien pidió no ver animaciones no las ve: el latido es decoración, no
    información —el estado también se lee por el color y por el texto—. */
@media ( prefers-reduced-motion: reduce ) {
    .dt-proc-item.is-curso .dt-proc-num { animation: none; }
}

/* --- newsletter: los dos contadores de la consola de envío ----------------- */

.dt-news-tabla { border-collapse: collapse; margin-top: 22px; }
.dt-news-tabla td { padding: 4px 0; vertical-align: baseline; }
.dt-news-n {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--nt-text);
    padding-right: 12px !important;
    text-align: right;
    min-width: 110px;
}
.dt-news-l { font-size: 13px; color: var(--nt-muted); }

/* --- respaldo: la lista de dumps ------------------------------------------- */

.dt-resp-tabla { border-collapse: collapse; margin-top: 14px; width: 100%; }
.dt-resp-tabla td { padding: 6px 0; border-bottom: 1px solid var(--nt-divider); font-size: 13px; }
.dt-resp-n { color: var(--nt-text); overflow-wrap: anywhere; }
.dt-resp-d { color: var(--nt-muted); white-space: nowrap; padding-left: 14px !important; text-align: right; }

/* --- refresco: el informe tabla por tabla ---------------------------------- */
/*  Las tres cifras —producción, calidad antes, calidad ahora— van juntas y
    alineadas a la derecha con cifras de ancho fijo: la comparación es vertical,
    y con números que bailan de ancho no se puede leer de un vistazo cuál se
    llenó y cuál quedó en cero. */

.dt-ref-paso { font-size: 19px; margin-top: 34px; }

.dt-ref-tabla { border-collapse: collapse; margin-top: 14px; width: 100%; }
.dt-ref-tabla th {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nt-muted);
    text-align: right;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--nt-divider);
}
.dt-ref-tabla th:first-child { text-align: left; }
.dt-ref-tabla td {
    padding: 7px 0;
    border-bottom: 1px solid var(--nt-divider);
    font-size: 13px;
    vertical-align: top;
}
.dt-ref-n { color: var(--nt-text); overflow-wrap: anywhere; }
.dt-ref-d {
    color: var(--nt-muted);
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-left: 14px !important;
}
.dt-ref-r { white-space: nowrap; text-align: right; padding-left: 14px !important; font-size: 12.5px; }
.dt-ref-r.is-ok      { color: var(--nt-green); }
.dt-ref-r.is-omitida { color: var(--nt-muted); }
.dt-ref-r.is-error   { color: var(--nt-red); font-weight: 700; }

/*  la nota va debajo del nombre y no en una columna propia: es larga —nombra
    columnas— y una columna más angosta la partiría en cinco renglones */
.dt-ref-nota { display: block; margin-top: 3px; font-size: 12px; color: var(--nt-muted); line-height: 1.5; }

.dt-ref-chk { margin: 4px 0 18px; }
.dt-ref-chk label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.dt-ref-chk input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--nt-blue); cursor: pointer; }

/* --- actividad: el tablero del administrador ------------------------------- */
/*  Cuatro tarjetas por fila en pantalla ancha y dos en el teléfono. El número va
    grande y la etiqueta abajo: lo que se lee de un vistazo es la cifra, y el
    texto está para saber de qué cifra se trata cuando uno se detiene. */

.dt-act-kpis {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    gap: 12px;
    margin: 22px 0 8px;
}
@media ( max-width: 700px ) {
    .dt-act-kpis { grid-template-columns: repeat( 2, 1fr ); }
}
.dt-act-kpi {
    border: 1px solid var(--nt-border);
    border-radius: 12px;
    padding: 14px 16px 15px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dt-act-n {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--nt-text);
    line-height: 1.15;
}
.dt-act-l { font-size: 13px; color: var(--nt-text); }
.dt-act-h { font-size: 11.5px; color: var(--nt-muted); line-height: 1.45; margin-top: 3px; }

.dt-act-h2  { font-size: 19px; margin-top: 38px; }
.dt-act-pie { margin-top: 12px; }

/*  ⚠ LA TABLA SE DESPLAZA SOLA EN PANTALLA ANGOSTA. Ocho columnas de números no
    entran en un teléfono, y sin esto la página entera se va para el costado —lo
    que rompe también el texto de arriba, que sí entraba—. */
.dt-act-scroll { overflow-x: auto; margin-top: 14px; }

.dt-act-tabla { border-collapse: collapse; width: 100%; min-width: 620px; }
.dt-act-tabla th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nt-muted);
    text-align: right;
    padding: 0 0 7px 12px;
    border-bottom: 1px solid var(--nt-divider);
    line-height: 1.35;
    vertical-align: bottom;
}
.dt-act-tabla th:first-child { text-align: left; padding-left: 0; }
.dt-act-tabla td {
    padding: 8px 0 8px 12px;
    border-bottom: 1px solid var(--nt-divider);
    font-size: 13px;
    vertical-align: top;
}
.dt-act-tabla td:first-child { padding-left: 0; }

.dt-act-f { color: var(--nt-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dt-act-d {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--nt-text);
}

/*  el día sin nada pasa a segundo plano: la fila sigue estando —un día vacío es
    un dato— pero no compite con los días que sí tuvieron movimiento */
.dt-act-tabla tr.is-vacio td { color: var(--nt-faint); }

/*  ocho columnas: la del link personal entró el 2026-08-21 y empujó el ancho */
.dt-act-gente { min-width: 900px; }
.dt-act-p  { color: var(--nt-text); }
.dt-act-in { word-break: break-all; }
.dt-act-cv { white-space: nowrap; }
.dt-act-sub { display: block; font-size: 11.5px; color: var(--nt-muted); line-height: 1.45; margin-top: 2px; }
.dt-act-no  { color: var(--nt-faint); }
.dt-act-si  { color: var(--nt-green); }
.dt-act-ojo { color: var(--nt-amber); }

/* --- tareas: el listado de un día hábil, para mirarlo -------------------------- */

.dt-tar-nav { margin: 22px 0; }
.dt-tar-hoy { margin-left: 4px; }

/*  seis columnas con nombres largos no entran en un teléfono; la tabla se
    desplaza sola en vez de empujar la página entera para el costado */
.dt-tar-scroll { overflow-x: auto; }
.dt-tar-tabla  { min-width: 680px; }

.dt-tar-n { color: var(--nt-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-tar-r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/*  la descripción y el desglose del premio, debajo de lo que acompañan: son
    contexto, y en el mismo renglón compiten con el dato */
.dt-tar-desc {
    display: block;
    font-size: 11.5px;
    color: var(--nt-muted);
    line-height: 1.5;
    margin-top: 3px;
    font-weight: 400;
}

/*  la tarea apagada se lee, pero no compite: sigue en la lista porque su slot
    está ocupado, y ésa es toda la información que aporta */
.dt-moves tr.is-off td,
.dt-moves tr.is-off td.dt-move-concept b { color: var(--nt-faint); }

/* --- actividad: el link personal de cada persona ---------------------------- */

.dt-act-lk { white-space: nowrap; }
.dt-act-copia { display: inline-flex; gap: 8px; align-items: baseline; }

/*  El botón de copiar es del tamaño de la fila, no de un formulario: hay uno por
    persona y con cuerpo de botón normal la tabla se convierte en una columna de
    botones azules que tapa los datos. */
.dt-act-btn-copia {
    font-family: inherit;
    font-size: 12px;
    line-height: 1.2;
    padding: 4px 9px;
    border: 1px solid var(--nt-border);
    border-radius: 6px;
    background: #fff;
    color: var(--nt-text);
    cursor: pointer;
    white-space: nowrap;
}
.dt-act-btn-copia:hover  { background: var(--nt-hover); }
.dt-act-btn-copia.is-ok  { border-color: var(--nt-green); color: var(--nt-green); }

/*  los dos links de cada persona, uno por renglón y con su etiqueta: en una sola
    línea no se distingue cuál es cuál, y son cosas distintas */
.dt-act-lk-fila { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.dt-act-lk-rot  { font-size: 11px; color: var(--nt-faint); min-width: 56px; }


/* ==========================================================================
   INTRODUCCIONES (2026-08-21)

   Lo que se muestra entre el login y el panel del día. Los PASOS de una
   introducción no traen estilos propios: usan los del módulo —`dt-title`,
   `dt-lead`, `dt-task`, `dt-form`, `dt-options`— justamente para que dos
   introducciones que se comparan entre sí se diferencien por lo que dicen y
   no por cómo están pintadas.

   Acá quedan sólo dos cosas que no existían: el botón que se ve como enlace
   —«Ahora no» tiene que ser un <button> porque saltear ANOTA un evento, y un
   enlace que escribe se dispara solo con que el navegador lo precargue— y la
   fila de acciones del panel.
   ========================================================================== */

.dt-link-btn {
    display: inline-block;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 13px;
    color: var(--nt-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.dt-link-btn:hover { color: var(--nt-text); }

.dt-actions .dt-form { display: inline; margin: 0; }

.dt-intro-acc {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}
.dt-intro-acc form { display: inline; margin: 0; }

.dt-intro-obj input[type="text"] {
    width: 52px;
    padding: 2px 6px;
    font-size: 12px;
    text-align: right;
    border: 1px solid var(--nt-divider);
    border-radius: 4px;
    background: transparent;
    color: var(--nt-text);
    font-variant-numeric: tabular-nums;
}

/* La etiqueta de un campo cuya pregunta ya es el <h1> de la pantalla: escribirla
   otra vez arriba del cuadro seria repetir la pregunta dos veces, y no ponerla
   deja al lector de pantalla con un cuadro de texto sin nombre. Se dice, no se
   dibuja. */
.dt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}