/* ============================================================
   INSTALACIÓN — casilla del carrito y pantallas con token
   WIDDI, 2026-09-30. Solo tokens --t-*, cero colores sueltos.
   Se ve primero en teléfono: el cliente abre esto desde WhatsApp.
   ============================================================ */

/* --- la casilla del carrito --- */

.t-inst-bump {
    margin: 16px 0 0;
    padding: 18px;
    border: 1px solid var(--t-acento-200);
    border-radius: var(--t-radio-sm);
    background: var(--t-acento-050);
}
.t-inst-bump-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.4;
}
.t-inst-bump-head input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--t-acento);
}
.t-inst-bump-note {
    margin: 10px 0 0;
    padding-left: 34px;
    color: var(--t-suave);
    font-size: .84rem;
    line-height: 1.5;
}

/* --- estructura de las pantallas --- */

.t-inst-wrap {
    max-width: 720px;
    padding-block: clamp(1.5rem, 5vw, 3rem);
}
.t-inst-head { margin-bottom: 28px; }
.t-inst-head h1 {
    margin: 4px 0 12px;
    font: 700 clamp(1.9rem, 4.6vw, 2.9rem)/1.05 var(--t-font-titulo);
    color: var(--t-primario);
}
.t-inst-lead { color: var(--t-suave); margin: 0; }

.t-inst-vacio { padding-block: clamp(2rem, 8vw, 5rem); text-align: center; }
.t-inst-vacio h1 { font: 700 clamp(1.6rem, 4vw, 2.2rem)/1.1 var(--t-font-titulo); color: var(--t-primario); }
.t-inst-vacio p { color: var(--t-suave); max-width: 46ch; margin-inline: auto; }

.t-inst-ok {
    margin-bottom: 28px;
    padding: 20px;
    border: 1px solid var(--t-exito);
    border-radius: var(--t-radio-sm);
    background: #F0F8F3;
}
.t-inst-ok h1 { margin: 0 0 8px; font: 700 1.5rem/1.15 var(--t-font-titulo); color: var(--t-primario); }
.t-inst-ok p { margin: 0 0 12px; color: var(--t-texto); }

/* --- pasos --- */

.t-inst-paso {
    margin-bottom: 32px;
    padding: 22px;
    border: 1px solid var(--t-borde);
    border-radius: var(--t-radio);
    background: var(--t-blanco);
}
.t-inst-paso h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    font: 700 clamp(1.25rem, 3vw, 1.5rem)/1.2 var(--t-font-titulo);
    color: var(--t-primario);
}
.t-inst-num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--t-radio-pill);
    background: var(--t-acento);
    color: var(--t-blanco);
    font-size: 1rem;
}
.t-inst-ayuda { margin: 0 0 16px; color: var(--t-suave); font-size: .92rem; line-height: 1.55; }
.t-inst-ayuda-chica { margin: 6px 0 0; color: var(--t-suave); font-size: .82rem; line-height: 1.5; }

/* --- mapa --- */

.t-inst-mapa {
    height: 340px;
    border: 1px solid var(--t-borde);
    border-radius: var(--t-radio-sm);
    background: var(--t-superficie);
}
.t-inst-mapa-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.t-inst-coords { color: var(--t-suave); font-size: .85rem; }

/* --- campos --- */

.t-inst-campo { display: block; margin-top: 18px; }
.t-inst-campo > span {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: .92rem;
}
.t-inst-campo textarea,
.t-inst-campo input[type="file"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--t-borde);
    border-radius: var(--t-radio-sm);
    font: 400 1rem/1.5 var(--t-font-cuerpo);
    color: var(--t-texto);
    background: var(--t-blanco);
}
.t-inst-campo textarea { resize: vertical; }

/* --- preguntas --- */

.t-inst-pregunta {
    margin: 0 0 20px;
    padding: 0 0 18px;
    border: 0;
    border-bottom: 1px solid var(--t-borde);
}
.t-inst-pregunta:last-of-type { border-bottom: 0; padding-bottom: 0; }
.t-inst-pregunta legend {
    padding: 0;
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.35;
    color: var(--t-texto);
}
.t-inst-opciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.t-inst-opcion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 18px;
    border: 1px solid var(--t-borde);
    border-radius: var(--t-radio-pill);
    background: var(--t-blanco);
    cursor: pointer;
    font-weight: 600;
    transition: background var(--t-movimiento), border-color var(--t-movimiento);
}
.t-inst-opcion input { accent-color: var(--t-acento); width: 18px; height: 18px; margin: 0; }
.t-inst-opcion:has(input:checked) {
    border-color: var(--t-acento);
    background: var(--t-acento-050);
}

/* --- resultado en vivo --- */

.t-inst-resultado {
    margin-top: 20px;
    padding: 18px;
    border-radius: var(--t-radio-sm);
    border: 1px solid var(--t-primario);
    background: var(--t-primario-050);
}
.t-inst-resultado strong { display: block; margin-bottom: 6px; font-size: 1.05rem; color: var(--t-primario); }
.t-inst-resultado p { margin: 0; color: var(--t-texto); font-size: .92rem; line-height: 1.55; }
.t-inst-resultado.es-colocacion { border-color: var(--t-exito); background: #F0F8F3; }
.t-inst-resultado.es-colocacion strong { color: var(--t-exito); }
.t-inst-resultado.es-instalacion { border-color: var(--t-acento); background: var(--t-acento-050); }
.t-inst-resultado.es-instalacion strong { color: var(--t-acento); }

/* --- fotos --- */

.t-inst-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}
.t-inst-fotos img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: var(--t-radio-sm);
    border: 1px solid var(--t-borde);
}

/* --- enviar --- */

.t-inst-enviar { margin-top: 8px; }
.t-inst-enviar .t-button { width: 100%; justify-content: center; }

/* --- bloque de seguimiento en gracias, correo y mi cuenta --- */

.t-inst-cta {
    margin: 28px 0;
    padding: 22px;
    border-radius: var(--t-radio);
    border: 1px solid var(--t-acento-200);
    background: var(--t-acento-050);
}
.t-inst-cta h2 { margin: 0 0 8px; font: 700 1.4rem/1.15 var(--t-font-titulo); color: var(--t-primario); }
.t-inst-cta p { margin: 0 0 14px; color: var(--t-texto); }
.t-inst-cta-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

@media (min-width: 640px) {
    .t-inst-enviar .t-button { width: auto; }
}

/* --- pantalla del instalador --- */

.t-inst-trabajo {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid var(--t-borde);
    border-radius: var(--t-radio);
    background: var(--t-blanco);
}
.t-inst-trabajo-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.t-inst-trabajo-top h2 {
    margin: 0;
    font: 700 1.18rem/1.2 var(--t-font-titulo);
    color: var(--t-primario);
}
.t-inst-km {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: var(--t-radio-pill);
    background: var(--t-primario-050);
    color: var(--t-primario);
    font-size: .78rem;
    font-weight: 600;
}
.t-inst-trabajo-dir { margin: 6px 0 2px; color: var(--t-texto); font-size: .95rem; }
.t-inst-trabajo-modelo { margin: 0 0 8px; color: var(--t-suave); font-size: .86rem; }
.t-inst-trabajo-cuando { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--t-primario); font-size: 1rem; }
.t-inst-trabajo-cuando .t-icon { width: 18px; height: 18px; }
.t-inst-trabajo-precio { margin: 0 0 12px; font-size: .86rem; color: var(--t-texto); }
.t-inst-trabajo-precio strong { color: var(--t-acento); letter-spacing: .03em; }

.t-inst-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: var(--t-radio-sm);
    background: var(--t-superficie);
    font-size: .84rem;
    font-weight: 600;
}
.t-inst-trabajo-nota {
    margin: 0 0 8px;
    color: var(--t-suave);
    font-size: .86rem;
    line-height: 1.5;
}
.t-inst-trabajo-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}
.t-inst-trabajo-acciones .t-button { flex: 1 1 auto; min-width: 104px; justify-content: center; padding-inline: 14px; }
.t-inst-cerrar .t-button { width: 100%; justify-content: center; }

/* ============================================================
   PANEL — lista de trabajo
   120 colocaciones al mes y una o dos instalaciones. Lista densa,
   no tarjetas: con treinta filas vivas, lo que se necesita es
   recorrer con la vista, no desplazarse.
   ============================================================ */

.t-pan {
    --pan-alto: 1px solid var(--t-borde);
    max-width: 1180px;
    margin-inline: auto;
    padding-block: clamp(1.25rem, 3vw, 2rem);
    font-family: var(--t-font-cuerpo);
}
.t-pan ::selection { background: var(--t-acento-200); color: var(--t-primario-900); }
.t-pan :where(a, button, input, select, summary):focus-visible {
    outline: 2px solid var(--t-acento);
    outline-offset: 2px;
    border-radius: 3px;
}
.t-num { font-variant-numeric: tabular-nums; }
.t-sr {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- encabezado --- */

.t-pan-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.t-pan-top h1 {
    margin: 0;
    font: 700 1.75rem/1.1 var(--t-font-titulo);
    color: var(--t-primario);
}
.t-pan-quien { margin: 2px 0 0; font-size: .82rem; color: var(--t-suave); }

.t-pan-alta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--t-radio-sm);
    background: var(--t-acento);
    color: var(--t-blanco);
    font: 600 .95rem/1 var(--t-font-cuerpo);
    cursor: pointer;
    transition: background 180ms ease;
}
.t-pan-alta:hover { background: var(--t-acento-900); }
.t-pan-alta .t-icon { width: 18px; height: 18px; }

.t-pan-aviso {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 16px;
    border: 1px solid var(--t-exito);
    border-radius: var(--t-radio-sm);
    background: #F0F8F3;
    color: #145C39;
    font-size: .9rem;
}
.t-pan-aviso .t-icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- cifras, que además filtran --- */

.t-pan-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.t-pan-cifra {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: var(--pan-alto);
    border-radius: var(--t-radio-sm);
    background: var(--t-blanco);
    text-align: left;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease;
}
.t-pan-cifra:hover { border-color: var(--t-primario); }
.t-pan-cifra b { font: 700 1.45rem/1 var(--t-font-titulo); color: var(--t-primario); }
.t-pan-cifra span { font-size: .76rem; color: var(--t-suave); }
.t-pan-cifra[aria-pressed="true"] {
    border-color: var(--t-acento);
    background: var(--t-acento-050);
}
.t-pan-cifra[aria-pressed="true"] b { color: var(--t-acento); }
.t-pan-cifra.es-ojo b { color: var(--t-acento); }

/* --- buscador --- */

.t-pan-buscar { display: flex; gap: 10px; margin-bottom: 14px; }
.t-pan-campo-buscar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    padding: 0 14px;
    border: var(--pan-alto);
    border-radius: var(--t-radio-sm);
    background: var(--t-blanco);
}
.t-pan-campo-buscar:focus-within { border-color: var(--t-primario); }
.t-pan-campo-buscar .t-icon { width: 18px; height: 18px; color: var(--t-suave); flex: 0 0 auto; }
.t-pan-campo-buscar input {
    flex: 1 1 auto;
    min-height: 44px;
    border: 0;
    background: none;
    font: 400 .95rem/1 var(--t-font-cuerpo);
    color: var(--t-texto);
}
.t-pan-campo-buscar input:focus { outline: 0; }
.t-pan-limpiar {
    min-height: 44px;
    padding: 0 16px;
    border: var(--pan-alto);
    border-radius: var(--t-radio-sm);
    background: var(--t-blanco);
    font: 600 .88rem/1 var(--t-font-cuerpo);
    color: var(--t-primario);
    cursor: pointer;
}
.t-pan-limpiar:hover { border-color: var(--t-primario); }

/* --- la lista --- */

.t-pan-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    border: var(--pan-alto);
    border-radius: var(--t-radio-sm);
    background: var(--t-blanco);
    overflow: hidden;
}
.t-pan-fila + .t-pan-fila { border-top: var(--pan-alto); }
.t-pan-fila.es-cerrada .t-pan-resumen { opacity: .5; }
.t-pan-fila.es-cerrada:hover .t-pan-resumen { opacity: 1; }

.t-pan-resumen {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 1.1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    transition: background 150ms ease;
}
.t-pan-fila:hover .t-pan-resumen { background: var(--t-primario-050); }
/* La instalación es el caso raro (una o dos al mes contra ciento veinte
   colocaciones) y tiene que saltar. Se marca con un tinte de fondo, no con
   una barra de color al costado. */
.t-pan-fila.es-instalacion .t-pan-resumen { background: var(--t-acento-050); }
.t-pan-fila.es-instalacion:hover .t-pan-resumen { background: #FBE3E1; }

.t-pan-col-quien strong {
    display: block;
    font-size: .98rem;
    font-weight: 600;
    color: var(--t-texto);
    line-height: 1.25;
}
.t-pan-dir {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    color: var(--t-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.t-pan-col-trabajo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.t-pan-tipo { font-size: .82rem; font-weight: 600; color: var(--t-suave); }
.t-pan-tipo.t-t-instalacion, .t-pan-tipo.t-t-visita { color: var(--t-acento); }
.t-pan-dato {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    color: var(--t-suave);
}
.t-pan-dato .t-icon { width: 14px; height: 14px; }
.t-pan-dato.es-hoy { color: var(--t-acento); font-weight: 700; }

.t-pan-col-estado { text-align: right; }
.t-pan-toca {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--t-acento);
}
.t-pan-estado { display: block; font-size: .82rem; color: var(--t-suave); }
.t-pan-monto { display: block; margin-top: 2px; font-size: .86rem; color: var(--t-texto); }
.t-pan-debe { display: block; font-size: .72rem; color: var(--t-acento); }

.t-pan-col-acciones { display: flex; align-items: center; gap: 2px; }
.t-pan-ic, .t-pan-abrir {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--t-radio-sm);
    background: none;
    color: var(--t-suave);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.t-pan-ic:hover, .t-pan-abrir:hover { background: var(--t-superficie); color: var(--t-primario); }
/* El acento se reserva para la acción y el estado. Un icono de fila en rojo es
   decoración, y con treinta filas el rojo deja de significar nada.
   Gana a la regla de color.css, que pinta todo .t-icon con el acento. */
.t-pan .t-pan-ic .t-icon,
.t-pan .t-pan-abrir .t-icon,
.t-pan .t-pan-dato .t-icon,
.t-pan .t-pan-campo-buscar .t-icon { color: currentColor; }
.t-pan .t-pan-alta .t-icon,
.t-pan .t-pan-aviso .t-icon { color: currentColor; }
.t-pan-ic .t-icon, .t-pan-abrir .t-icon { width: 18px; height: 18px; }
.t-pan-abrir[aria-expanded="true"] { background: var(--t-primario); color: var(--t-blanco); }

/* --- detalle, en la misma fila --- */

.t-pan-detalle {
    padding: 4px 14px 18px;
    border-top: 1px dashed var(--t-borde);
    background: var(--t-superficie);
}
.t-pan-check { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
.t-pan-ck {
    padding: 4px 10px;
    border: var(--pan-alto);
    border-radius: var(--t-radio-pill);
    background: var(--t-blanco);
    font-size: .76rem;
    color: var(--t-suave);
}
.t-pan-ck b { color: var(--t-texto); }
.t-pan-ck.es-si { border-color: var(--t-exito); }
.t-pan-ck.es-si b { color: var(--t-exito); }
.t-pan-ck.es-no b, .t-pan-ck.es-nose b { color: var(--t-acento); }

.t-pan-ref { margin: 0 0 10px; font-size: .84rem; color: var(--t-texto); }
.t-pan-fotos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.t-pan-fotos img {
    width: 56px; height: 56px; object-fit: cover;
    border: var(--pan-alto); border-radius: var(--t-radio-sm); display: block;
}

.t-pan-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 12px;
    margin-bottom: 12px;
}
.t-pan-ancho { grid-column: 1 / -1; }
.t-pan-campos label { display: block; }
.t-pan-campos span {
    display: block;
    margin-bottom: 4px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--t-suave);
}
.t-pan-campos input, .t-pan-campos select {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: var(--pan-alto);
    border-radius: var(--t-radio-sm);
    background: var(--t-blanco);
    font: 400 .92rem/1.3 var(--t-font-cuerpo);
    color: var(--t-texto);
}
.t-pan-campos input:focus, .t-pan-campos select:focus { border-color: var(--t-primario); outline: 0; }

/* --- cotizador --- */

.t-pan-cotiza {
    margin: 4px 0 14px;
    padding: 12px 14px;
    border: var(--pan-alto);
    border-radius: var(--t-radio-sm);
    background: var(--t-blanco);
}
.t-pan-cotiza summary {
    cursor: pointer;
    font: 600 .88rem/1 var(--t-font-cuerpo);
    color: var(--t-primario);
    list-style: none;
    padding: 4px 0;
}
.t-pan-cotiza summary::-webkit-details-marker { display: none; }
.t-pan-cotiza summary::before { content: '+ '; }
.t-pan-cotiza[open] summary::before { content: '– '; }
.t-pan-cotiza[open] summary { margin-bottom: 12px; }
.t-pan-mo, .t-pan-mats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.t-pan-opc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    border: var(--pan-alto);
    border-radius: var(--t-radio-pill);
    background: var(--t-blanco);
    font-size: .86rem;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}
.t-pan-opc input { width: 16px; height: 16px; margin: 0; accent-color: var(--t-acento); }
.t-pan-opc:hover { border-color: var(--t-primario); }
.t-pan-opc:has(input:checked) { border-color: var(--t-acento); background: var(--t-acento-050); }
.t-pan-opc b { color: var(--t-primario); }

.t-pan-total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 0 auto;
    padding-left: 14px;
}
.t-pan-total span { font-size: .78rem; color: var(--t-suave); }
.t-pan-total strong { font: 700 1.3rem/1 var(--t-font-titulo); color: var(--t-acento); }

/* --- pie --- */

.t-pan-pie { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.t-pan-guardar {
    min-height: 44px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--t-radio-sm);
    background: var(--t-primario);
    color: var(--t-blanco);
    font: 600 .95rem/1 var(--t-font-cuerpo);
    cursor: pointer;
    transition: background 180ms ease;
}
.t-pan-guardar:hover { background: var(--t-primario-900); }
.t-pan-enlace { flex: 1 1 260px; }
.t-pan-enlace span {
    display: block;
    margin-bottom: 4px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--t-suave);
}
.t-pan-enlace input {
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: var(--pan-alto);
    border-radius: var(--t-radio-sm);
    background: var(--t-blanco);
    font: 400 .72rem/1 ui-monospace, monospace;
    color: var(--t-suave);
}

/* --- vacío y sin resultados --- */

.t-pan-vacio, .t-pan-nada {
    padding: 36px 20px;
    border: 1px dashed var(--t-borde);
    border-radius: var(--t-radio-sm);
    text-align: center;
    color: var(--t-suave);
    font-size: .92rem;
}
.t-pan-vacio p { margin: 0 0 8px; max-width: 46ch; margin-inline: auto; }
.t-pan-vacio strong { color: var(--t-texto); }
.t-pan-nada { margin-top: 12px; }

/* --- teléfono: la fila se apila, sigue siendo fila --- */

@media (max-width: 720px) {
    .t-pan-resumen {
        grid-template-columns: 1fr auto;
        grid-template-areas: 'quien acciones' 'trabajo acciones' 'estado acciones';
        row-gap: 4px;
    }
    .t-pan-col-quien { grid-area: quien; }
    .t-pan-col-trabajo { grid-area: trabajo; }
    .t-pan-col-estado { grid-area: estado; text-align: left; display: flex; align-items: baseline; gap: 10px; }
    .t-pan-col-acciones { grid-area: acciones; align-self: start; flex-wrap: wrap; justify-content: flex-end; max-width: 84px; }
    .t-pan-monto { margin-top: 0; }
    .t-pan-total { margin-left: 0; padding-left: 0; width: 100%; }
}

.t-inst-wrap--ancho { max-width: 100%; }

/* --- acceso al panel --- */

.t-acceso {
    max-width: 380px;
    margin-inline: auto;
    padding-block: clamp(2rem, 7vw, 4rem);
}
.t-acceso h1 {
    margin: 0 0 10px;
    font: 700 1.75rem/1.1 var(--t-font-titulo);
    color: var(--t-primario);
}
.t-acceso > p { margin: 0 0 22px; color: var(--t-suave); font-size: .95rem; }
.t-acceso .login-username, .t-acceso .login-password { margin-bottom: 14px; }
.t-acceso label { display: block; font-size: .8rem; font-weight: 600; color: var(--t-suave); margin-bottom: 5px; }
.t-acceso input[type="text"], .t-acceso input[type="password"] {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--t-borde);
    border-radius: var(--t-radio-sm);
    background: var(--t-blanco);
    font: 400 1rem/1.3 var(--t-font-cuerpo);
    color: var(--t-texto);
}
.t-acceso input:focus { border-color: var(--t-primario); outline: 0; }
.t-acceso .login-remember { margin-bottom: 18px; font-size: .88rem; color: var(--t-texto); }
.t-acceso .login-remember label { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 400; color: var(--t-texto); }
.t-acceso .login-remember input { width: 18px; height: 18px; accent-color: var(--t-acento); }
.t-acceso .login-submit input[type="submit"] {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: var(--t-radio-sm);
    background: var(--t-acento);
    color: var(--t-blanco);
    font: 600 1rem/1 var(--t-font-cuerpo);
    cursor: pointer;
    transition: background 180ms ease;
}
.t-acceso .login-submit input[type="submit"]:hover { background: var(--t-acento-900); }
.t-acceso-pie { margin-top: 16px; font-size: .86rem; }
.t-pan-quien a { color: var(--t-suave); }

/* El checklist y los iconos del técnico usan el mismo vocabulario que el panel:
   si el mismo dato se ve distinto en dos pantallas, una de las dos está mal. */
.t-inst-trabajo .t-pan-check { margin: 0 0 12px; }
.t-inst-trabajo-nota .t-icon { width: 15px; height: 15px; vertical-align: -2px; color: var(--t-suave); }
.t-inst-trabajo-acciones .t-icon { width: 17px; height: 17px; }

/* En el checkout va entre la revisión del pedido y los métodos de pago. */
.t-inst-bump--checkout { margin: 0 0 20px; }