/*
  HOJA DEL SISTEMA · panel y portal.

  Los valores viven en tokens.css, que es la misma fuente para la pagina del
  SaaS. Aqui no hay un solo color escrito a mano: todo es var(). Lo que se
  escribe aqui es la FORMA: base, componentes, el armazon del panel y la capa
  del portal. Los nombres de clase son los del plan de diseno
  (docs/diseno/plan-de-diseno.md, seccion 10).

  Desde F1.3 todas las plantillas viven en el armazon del panel o en la capa
  del portal: no hay seccion de compatibilidad.
*/

/* =====================================================================
   1. Fuentes, servidas por la instancia. WOFF2 recortadas al alfabeto latino;
      swap para que el texto se lea con la de respaldo mientras llegan.
   ===================================================================== */
/* =====================================================================
   2. Base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--familia-texto);
    font-size: var(--letra-cuerpo);
    line-height: var(--interlinea-cuerpo);
    color: var(--texto);
    background: var(--blanco);
}
/* Los controles no heredan el tipo de letra por su cuenta: en Chromium salen a
   13,3 px, mas chicos que el cuerpo. Se dice una vez, para todos. */
input, select, textarea, button, option { font: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
h1 {
    font-family: var(--familia-titulos);
    font-size: var(--letra-titulo);
    line-height: var(--interlinea-titulo);
    letter-spacing: -0.04em;
    font-weight: 700;
}
h2 {
    font-family: var(--familia-titulos);
    font-size: var(--letra-seccion);
    line-height: var(--interlinea-seccion);
}
h3 { font-size: var(--letra-cuerpo); line-height: var(--interlinea-cuerpo); }
p { margin: 0 0 var(--e3); }
p:last-child { margin-bottom: 0; }
a {
    color: var(--texto);
    text-decoration-thickness: 1px;
    text-decoration-color: var(--borde-fuerte);
    text-underline-offset: 0.15em;
    transition: color var(--transicion), text-decoration-color var(--transicion);
}
a:hover { text-decoration-color: currentColor; }
ul, ol { margin: 0 0 var(--e3); padding-left: 1.25em; }
dl { margin: 0; }
dd { margin: 0; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--borde); margin: var(--e5) 0; }
code, kbd { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.9em; }
[hidden] { display: none !important; }
[x-cloak] { display: none !important; }

/* Foco visible de dos tonos: tinta sobre lo claro, acento sobre lo oscuro.
   En outline con separacion, para que se vea alrededor del control y no
   empuje nada. */
:focus-visible {
    outline: 2px solid var(--foco-claro);
    outline-offset: 2px;
    border-radius: var(--radio-control);
}
.oscuro :focus-visible { outline-color: var(--foco-oscuro); }

/* Cifras, fechas y folios: anchos fijos, para que los millares caigan uno
   debajo de otro. */
.numero, .cifra, .folio, .fecha, time { font-variant-numeric: tabular-nums; }
.numero, .derecha { text-align: right; }

.visualmente-oculto {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.prosa { max-width: var(--ancho-lectura); }
.prosa p { margin-bottom: var(--e4); }
.apoyo { font-size: var(--letra-apoyo); line-height: var(--interlinea-apoyo); color: var(--texto-2); }
.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); }
.negativo { color: var(--rojo-texto); font-weight: 600; }
.fila { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.fila--separada { justify-content: space-between; }
.pila > * + * { margin-top: var(--e5); }
.pila--compacta > * + * { margin-top: var(--e3); }
.rejilla {
    display: grid;
    gap: var(--e4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* =====================================================================
   3. Iconos: un sprite propio, siempre con texto al lado en la navegacion.
   ===================================================================== */
.icono {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    vertical-align: -0.28em;
    fill: none;
    stroke: currentColor;
}
.icono--chico { width: 1em; height: 1em; vertical-align: -0.15em; }
.icono--grande { width: 1.75em; height: 1.75em; }

/* =====================================================================
   4. Botones: primario, secundario, discreto, peligro, acento.
   ===================================================================== */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    min-height: var(--alto-control);
    padding: 0 var(--e4);
    border: 1px solid var(--tinta);
    border-radius: var(--radio-control);
    background: var(--tinta);
    color: var(--texto-inverso);
    font-weight: 600;
    font-size: var(--letra-cuerpo);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: normal;
    text-align: center;
    transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.boton:hover { background: var(--superficie-oscura-2); border-color: var(--superficie-oscura-2); color: var(--texto-inverso); }
.boton--secundario {
    background: var(--superficie);
    color: var(--tinta);
    border-color: var(--borde-fuerte);
}
.boton--secundario:hover { background: var(--realce); border-color: var(--tinta); color: var(--tinta); }
.boton--discreto {
    background: transparent;
    border-color: transparent;
    color: var(--texto-2);
    font-weight: 500;
}
.boton--discreto:hover { background: var(--superficie-2); border-color: transparent; color: var(--tinta); }
.boton--peligro {
    background: var(--rojo-suave);
    color: var(--rojo-texto);
    border-color: color-mix(in srgb, var(--rojo) 45%, var(--blanco));
}
.boton--peligro:hover { background: color-mix(in srgb, var(--rojo) 16%, var(--blanco)); border-color: var(--rojo); color: var(--rojo-texto); }
/* El acento como relleno, con la tinta encima: 9,7:1. Nunca como texto. */
.boton--acento { background: var(--acento); border-color: var(--acento); color: var(--tinta); }
.boton--acento:hover { background: color-mix(in srgb, var(--acento) 85%, var(--tinta)); border-color: transparent; color: var(--tinta); }
.boton--chico { min-height: var(--alto-control-chico); padding: 0 var(--e3); font-size: var(--letra-apoyo); }
.boton--bloque { width: 100%; }
.boton:disabled, .boton[disabled], .boton[aria-disabled="true"] {
    background: var(--deshabilitado);
    border-color: var(--deshabilitado);
    color: var(--texto-2);
    cursor: not-allowed;
}
.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.acciones--apiladas { flex-direction: column; align-items: stretch; }
.formulario__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e5); }

/* =====================================================================
   5. Campos: etiqueta arriba, ayuda y error con sitio fijo.
   ===================================================================== */
.campo { display: flex; flex-direction: column; gap: var(--e1); margin-bottom: var(--e4); min-width: 0; }
.campo > label, .campo__etiqueta {
    font-size: var(--letra-etiqueta);
    font-weight: 500;
    line-height: 1.4;
    color: var(--texto);
}
.campo__ayuda, .pista { font-size: var(--letra-apoyo); line-height: var(--interlinea-apoyo); color: var(--texto-2); }
.campo__error, .mensaje-error {
    display: block;
    min-height: 1.15em;
    font-size: var(--letra-apoyo);
    line-height: var(--interlinea-apoyo);
    color: var(--rojo-texto);
}
/* :where() deja la regla base con la especificidad de un elemento: cuatro
   :not() sumaban (0,4,1) y le ganaban a cualquier clase (la lupa de la busqueda
   y el prefijo de importe no conseguian su relleno; visto en rc.4 a rc.9). */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])),
select, textarea {
    width: 100%;
    min-height: var(--alto-control);
    padding: 0 var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--radio-control);
    background: var(--superficie);
    color: var(--texto);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
textarea { padding: var(--e2) var(--e3); min-height: calc(var(--alto-control) * 2); resize: vertical; }
select {
    appearance: none;
    padding-right: var(--e8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23598381' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--e3) center;
    background-size: 1rem;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
    border-color: var(--tinta);
    box-shadow: 0 0 0 3px var(--acento-suave);
    outline: none;
}
input[type="file"] { font-size: var(--letra-apoyo); }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--tinta); }
.campo--invalido input, .campo--invalido select, .campo--invalido textarea { border-color: var(--rojo); }
.campo--importe { position: relative; }
.campo--importe input { text-align: right; font-variant-numeric: tabular-nums; padding-left: 3.25rem; }
.campo__prefijo {
    position: absolute;
    left: var(--e3);
    bottom: 0;
    height: var(--alto-control);
    display: flex;
    align-items: center;
    font-size: var(--letra-apoyo);
    font-weight: 500;
    color: var(--texto-2);
    pointer-events: none;
}
.campo:has(.campo__error:not(:empty)) .campo__prefijo, .campo:has(.campo__ayuda) .campo__prefijo { bottom: auto; top: calc(1.4 * var(--letra-etiqueta) + var(--e1)); }
.casilla { display: flex; align-items: center; gap: var(--e2); min-height: var(--alto-control); font-weight: 400; }
.campos { display: grid; gap: 0 var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.campos--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.formulario-en-linea { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end; }
.formulario-en-linea .campo { flex: 1 1 12rem; margin-bottom: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end; margin-bottom: var(--e5); }
.filtros .campo { margin-bottom: 0; min-width: 11rem; }
.filtros .boton { min-height: var(--alto-control); }

/* =====================================================================
   6. Tablas: encabezado fijo, orden, fila que abre el detalle, estado vacio.
   ===================================================================== */
.tabla-envoltorio {
    /* F1.10 · las etiquetas visualmente ocultas de las formas de una celda son
       absolutas: sin este relative su caja de 1 px caia fuera de la pagina y la
       hacia desplazable (bandeja de WhatsApp a 768 y 1024). */
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    background: var(--superficie);
}
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--letra-tabla); line-height: var(--interlinea-tabla); }
.tabla th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    font-size: var(--letra-apoyo);
    font-weight: 500;
    color: var(--texto-2);
    background: var(--superficie-2);
    padding: var(--e3) var(--e4);
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}
.tabla th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--e1); }
.tabla th[aria-sort] a { color: var(--tinta); }
.tabla td { padding: var(--e4); border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--realce); }
.tabla td { transition: background var(--transicion); }
/* Lote 18 · G0.2 · las cifras de las tablas de facturacion llevan .cifra, no
   .numero, y se quedaban a la izquierda bajo su encabezado a la derecha (lote
   15). Una cifra en una tabla se alinea como un numero. */
.tabla td.numero, .tabla td.cifra, .tabla th.numero { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Lote 18 · G3 · debajo del importe en pesos, el mismo en la divisa en que se
   pacto, con su tipo de cambio. Es la segunda cifra, no la primera. */
.cifra-divisa { display: block; font-size: var(--letra-apoyo); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.tabla td.principal, .tabla td.clave { font-weight: 500; }
.tabla td.principal a { text-decoration: none; }
.tabla td.principal a:hover { text-decoration: underline; }
.tabla tr[data-enlace] { cursor: pointer; }
.tabla tr.total td { font-weight: 600; background: var(--superficie-2); border-top: 2px solid var(--borde-fuerte); }
.tabla tr.fila--problema td, .tabla tr.fila--urgente td, .tabla tr.fila--descalce td { background: var(--rojo-suave); }
.tabla tr.fila--atencion td, .tabla tr.fila--fragil td { background: var(--ambar-suave); }
.tabla tr.fila--apagada td { color: var(--texto-3); }
.tabla .acciones { display: flex; flex-wrap: wrap; gap: var(--e1); }
.tabla__vacio td { padding: var(--e8) var(--e5); }
/* Cuando la tabla es de la pagina y no de una caja con alto propio, el
   contenedor no recorta: es lo que deja al encabezado quedarse arriba. */
/* F1.10 · ninguna tabla desplaza la pagina: la mas ancha (bloqueos, 16 columnas)
   se desplaza dentro de su envoltorio a cualquier ancho. El encabezado pegajoso
   solo vale dentro del envoltorio, y se acepta a cambio de desborde cero. */
.tabla-envoltorio--pagina { overflow-x: auto; }
/* Un mensaje largo dentro de una celda se envuelve; no estira la tabla. */
.tabla .mensaje { white-space: pre-wrap; word-break: break-word; margin: 0; font-family: inherit; font-size: var(--letra-apoyo); }
.tabla .columna-mensaje { min-width: 18rem; max-width: 26rem; }

/* Carga parcial con HTMX: lo que se esta pidiendo se atenua; el esqueleto
   ocupa el sitio del contenido que va a llegar. */
.htmx-request .esqueleto, .esqueleto.htmx-request { display: block; }
.esqueleto { display: none; height: 1em; border-radius: var(--radio-control); background: var(--tinta-suave); animation: pulso 1.2s ease-in-out infinite; }
.esqueleto + .esqueleto { margin-top: var(--e2); }
.htmx-request .se-atenua { opacity: 0.5; }
@keyframes pulso { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

/* En el telefono, la tabla se vuelve lista: cada fila es una ficha, los datos
   clave van primero y en negrita, y el resto lleva delante el nombre de su
   columna (data-columna). */
@media (max-width: 640px) {
    .tabla--lista thead { display: none; }
    .tabla--lista, .tabla--lista tbody, .tabla--lista tr, .tabla--lista td { display: block; width: 100%; }
    .tabla--lista tr { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borde); }
    .tabla--lista tbody tr:last-child { border-bottom: 0; }
    .tabla--lista td { padding: var(--e1) 0; border: 0; text-align: left; white-space: normal; }
    .tabla--lista td.numero, .tabla--lista td.cifra { text-align: left; }
    .tabla--lista td[data-columna]::before {
        content: attr(data-columna) ": ";
        color: var(--texto-2);
        font-size: var(--letra-apoyo);
    }
    .tabla--lista td.clave { font-weight: 600; font-size: var(--letra-cuerpo); }
    .tabla--lista td.clave[data-columna]::before { content: none; }
    .tabla--lista td .acciones { margin-top: var(--e2); }
    .tabla .columna-mensaje { min-width: 0; max-width: none; }
    .tabla-envoltorio { border-radius: var(--radio-tarjeta); }
}

/* =====================================================================
   7. Chips (filtros), paginacion, insignias y pestanas
   ===================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: var(--e2); }
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    min-height: var(--alto-control-chico);
    padding: 0 var(--e3);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-pildora);
    background: var(--superficie);
    color: var(--texto);
    font-size: var(--letra-apoyo);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.chip:hover { background: var(--realce); }
.chip--activo, .chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--texto-inverso); }
.paginacion { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; justify-content: space-between; padding: var(--e3) 0; font-size: var(--letra-apoyo); color: var(--texto-2); }
.paginacion__paginas { display: flex; gap: var(--e1); }

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    min-height: 1.5rem;
    padding: 0 var(--e2);
    border-radius: var(--radio-pildora);
    font-size: var(--letra-insignia);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    background: var(--estado-espera-fondo);
    color: var(--estado-espera-texto);
    box-shadow: inset 0 0 0 1px var(--estado-espera-borde);
}
/* Seis tonos, y cada estado del sistema cae en uno. Ninguno usa rojo ni ambar
   salvo atencion y problema, que son para eso. */
.etiqueta--marcha, .etiqueta--confirmada, .etiqueta--aceptada, .etiqueta--abierta, .etiqueta--abierto,
.etiqueta--enviada, .etiqueta--en_proceso, .etiqueta--publicado, .etiqueta--activa, .etiqueta--vigente {
    background: var(--estado-marcha-fondo); color: var(--estado-marcha-texto);
    box-shadow: inset 0 0 0 1px var(--estado-marcha-borde);
}
.etiqueta--cerrado, .etiqueta--liquidada, .etiqueta--liquidado, .etiqueta--pagada, .etiqueta--completada,
.etiqueta--ganada, .etiqueta--cerrada, .etiqueta--enviado, .etiqueta--conciliado, .etiqueta--abierto_ya {
    background: var(--estado-cerrado-fondo); color: var(--estado-cerrado-texto);
    box-shadow: inset 0 0 0 1px var(--estado-cerrado-borde);
}
.etiqueta--apagado, .etiqueta--cancelada, .etiqueta--cancelado, .etiqueta--rechazada, .etiqueta--perdida,
.etiqueta--liberada, .etiqueta--inactiva, .etiqueta--borrador {
    background: var(--estado-apagado-fondo); color: var(--estado-apagado-texto);
    box-shadow: inset 0 0 0 1px var(--estado-apagado-borde);
}
.etiqueta--atencion, .etiqueta--parcial, .etiqueta--negociacion, .etiqueta--cotizada, .etiqueta--fallido,
.etiqueta--fragil, .etiqueta--hoy, .etiqueta--proximo, .etiqueta--por_enviar {
    background: var(--estado-atencion-fondo); color: var(--estado-atencion-texto);
    box-shadow: inset 0 0 0 1px var(--estado-atencion-borde);
}
.etiqueta--problema, .etiqueta--vencida, .etiqueta--vencido, .etiqueta--agotado, .etiqueta--no_se_pudo,
.etiqueta--descalce {
    background: var(--estado-problema-fondo); color: var(--estado-problema-texto);
    box-shadow: inset 0 0 0 1px var(--estado-problema-borde);
}

.pestanas { display: flex; gap: var(--e1); border-bottom: 1px solid var(--borde); overflow-x: auto; margin-bottom: var(--e5); }
.pestanas a, .pestanas button {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e3) var(--e4);
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--texto-2);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transicion), border-color var(--transicion), background var(--transicion);
}
.pestanas a:hover, .pestanas button:hover { color: var(--tinta); background: var(--superficie-2); }
.pestanas [aria-current="page"], .pestanas [aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }
.pestanas__cuenta { font-size: var(--letra-insignia); background: var(--superficie-2); border-radius: var(--radio-pildora); padding: 0 var(--e2); color: var(--texto-2); }

/* =====================================================================
   8. Avisos, tarjetas, encabezado de pagina, migas, indicador, linea de
      tiempo, estado vacio
   ===================================================================== */
.aviso {
    display: flex;
    gap: var(--e3);
    align-items: flex-start;
    padding: var(--e3) var(--e4);
    margin-bottom: var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    background: var(--superficie-2);
    color: var(--texto);
}
.aviso--ok { background: var(--estado-marcha-fondo); border-color: var(--estado-marcha-borde); color: var(--tinta); }
.aviso--error { background: var(--rojo-suave); border-color: color-mix(in srgb, var(--rojo) 40%, var(--blanco)); color: var(--rojo-texto); }
.aviso--atencion { background: var(--ambar-suave); border-color: color-mix(in srgb, var(--ambar) 45%, var(--blanco)); color: var(--ambar-texto); }
.aviso--neutro { background: var(--superficie-2); }
.aviso .icono { margin-top: 0.15em; }

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    padding: var(--e6);
    min-width: 0;
}
.tarjeta--compacta { padding: var(--e4); }
.tarjeta > h2:first-child, .tarjeta > .tarjeta__cabecera:first-child { margin-bottom: var(--e4); }
.tarjeta__cabecera { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: baseline; justify-content: space-between; }
.tarjeta__cabecera p { color: var(--texto-2); font-size: var(--letra-apoyo); margin: 0; flex-basis: 100%; }
.tarjeta .tabla-envoltorio { border: 0; border-radius: 0; margin: 0 calc(-1 * var(--e6)); }
.tarjeta .tabla-envoltorio:last-child { margin-bottom: calc(-1 * var(--e6)); }
.tarjeta--compacta .tabla-envoltorio { margin: 0 calc(-1 * var(--e4)); }

.encabezado {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3) var(--e5);
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--e6);
}
.encabezado__texto { min-width: 0; flex: 1 1 20rem; }
.encabezado__para-que { margin: var(--e3) 0 0; color: var(--texto-2); max-width: var(--ancho-lectura); }
.encabezado__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.encabezado__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }

.migas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); margin: 0 0 var(--e3); padding: 0; list-style: none; font-size: var(--letra-apoyo); color: var(--texto-2); }
.migas a { color: var(--texto-2); text-decoration: none; }
.migas a:hover { color: var(--tinta); text-decoration: underline; }
.migas > * + *::before { content: "/"; margin-right: var(--e1); color: var(--borde-fuerte); }

.indicadores { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.indicador {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    min-width: 0;
    padding: var(--e6);
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    background: var(--superficie);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transicion), background var(--transicion);
}
a.indicador:hover { border-color: var(--borde-fuerte); background: var(--realce); }
.indicador__titulo { font-size: var(--letra-apoyo); font-weight: 500; color: var(--texto-2); }
.indicador__cifra { font-size: clamp(1.5rem, 2.8vw, 2rem); letter-spacing: -.04em; font-weight: 700; line-height: var(--interlinea-cifra); font-variant-numeric: tabular-nums; }
.indicador__detalle { font-size: var(--letra-apoyo); color: var(--texto-2); display: flex; align-items: center; gap: var(--e1); }
.indicador--problema .indicador__cifra { color: var(--rojo-texto); }
.indicador--atencion .indicador__cifra { color: var(--ambar-texto); }
.indicador__lista { list-style: none; margin: var(--e2) 0 0; padding: 0; font-size: var(--letra-apoyo); }
.indicador__lista li { display: flex; justify-content: space-between; gap: var(--e2); padding: var(--e1) 0; border-top: 1px solid var(--borde); }

.linea-tiempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--borde); }
.linea-tiempo__punto { position: relative; padding: 0 0 var(--e4) var(--e6); }
.linea-tiempo__punto::before {
    content: "";
    position: absolute;
    left: 0; top: 4px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--superficie);
    border: 2px solid var(--borde-fuerte);
}
.linea-tiempo__punto--hecho::before { background: var(--tinta); border-color: var(--tinta); }
.linea-tiempo__punto--ahora::before { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.linea-tiempo__punto--problema::before { border-color: var(--rojo); background: var(--rojo-suave); }
.linea-tiempo__cuando { font-size: var(--letra-apoyo); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.linea-tiempo__que { font-weight: 500; }
.linea-tiempo__detalle { color: var(--texto-2); font-size: var(--letra-apoyo); }

.vacio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e2);
    max-width: 40rem;
    padding: var(--e8) var(--e6);
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio-tarjeta);
    background: var(--superficie);
}
.vacio__icono { width: 2rem; height: 2rem; color: var(--secundario); }
.vacio__titulo { font-family: var(--familia-titulos); font-size: var(--letra-seccion); font-weight: 600; }
.vacio__texto { margin: 0; color: var(--texto-2); max-width: var(--ancho-lectura); }
.vacio .boton { margin-top: var(--e2); }

/* =====================================================================
   9. Capas: cajon lateral, confirmacion y menu
   ===================================================================== */
dialog { color: inherit; }
dialog::backdrop { background: color-mix(in srgb, var(--tinta) 45%, transparent); }
.cajon {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(32rem, 100%);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--borde);
    background: var(--superficie);
    box-shadow: var(--sombra-capa);
    display: none;
    flex-direction: column;
}
.cajon[open] { display: flex; animation: cajon-entra var(--transicion-capa); }
@keyframes cajon-entra { from { transform: translateX(100%); } to { transform: none; } }
.cajon__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e4) var(--e5); border-bottom: 1px solid var(--borde); }
.cajon__cabecera h2 { font-size: var(--letra-seccion); }
.cajon__cuerpo { padding: var(--e5); overflow: auto; flex: 1 1 auto; }
.cajon__pie { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: flex-end; padding: var(--e4) var(--e5); border-top: 1px solid var(--borde); background: var(--superficie); }
.confirmacion {
    width: min(28rem, calc(100% - 2 * var(--e4)));
    margin: auto;
    padding: var(--e6);
    border: 1px solid var(--borde);
    border-radius: var(--radio-capa);
    background: var(--superficie);
    box-shadow: var(--sombra-capa);
}
.confirmacion h2 { margin-bottom: var(--e2); }
.confirmacion p { color: var(--texto-2); }
.confirmacion .formulario__acciones { justify-content: flex-end; }
.cerrar { display: inline-flex; align-items: center; justify-content: center; width: var(--alto-control-chico); height: var(--alto-control-chico); border: 0; border-radius: var(--radio-control); background: none; color: var(--texto-2); cursor: pointer; }
.cerrar:hover { background: var(--superficie-2); color: var(--tinta); }

/* =====================================================================
   10. El armazon del panel: barra lateral por proceso, barra superior con
       busqueda, y el contenido. Se disena a 1440 y se comprueba a 380.
   ===================================================================== */
/* La navegación conserva las mismas entradas y permisos; sólo cambia su presentación. */
.armazon { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); grid-template-rows: var(--alto-superior) 1fr; min-height: 100vh; min-height: 100dvh; }
.lateral { grid-row: 1 / -1; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; background: var(--blanco); border-right: 1px solid var(--borde); color: var(--tinta); }
.lateral__cabecera { display: flex; align-items: center; gap: var(--e2); min-height: var(--alto-superior); padding: var(--e4) var(--e5); border-bottom: 1px solid var(--borde); }
.lateral__marca { display: flex; align-items: center; gap: var(--e3); color: var(--tinta); text-decoration: none; font-weight: 750; font-size: 15px; line-height: 1.2; min-height: 44px; }
.lateral__marca > .icono { width: 36px; height: 36px; padding: 7px; border-radius: var(--radio-control); background: var(--acento); }
.lateral__marca > img, .acceso-cabecera > img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.lateral__marca small { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; color: var(--texto-2); }
.lateral__nav { padding: var(--e3) var(--e3) var(--e6); }
.lateral__grupo { padding: var(--e5) var(--e3) var(--e2); margin: 0; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 650; color: var(--texto-2); }
.lateral__enlace { display: flex; align-items: center; gap: var(--e3); min-height: 44px; margin-block: 2px; padding: var(--e2) var(--e3); border-radius: var(--radio-control); color: var(--texto-2); font-size: 13px; font-weight: 550; text-decoration: none; transition: background var(--transicion); }
.lateral__enlace .icono { width: 18px; height: 18px; }
.lateral__enlace:hover { background: var(--superficie-2); color: var(--tinta); }
.lateral__enlace[aria-current="page"] { background: var(--acento-suave); color: var(--tinta); font-weight: 700; }
.lateral__cuenta { margin-left: auto; font-size: var(--letra-insignia); background: var(--superficie-2); border-radius: var(--radio-control); padding: 0 var(--e2); }
.lateral__pie { margin-top: auto; padding: var(--e4) var(--e5); border-top: 1px solid var(--borde); font-size: var(--letra-apoyo); color: var(--texto-2); overflow-wrap: anywhere; }
.lateral__cerrar { display: none; }
.salto-contenido { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; background: var(--tinta); color: var(--blanco); border-radius: var(--radio-control); }
.salto-contenido:focus { top: 12px; }
.armazon :is(a, button, input, select, summary, textarea, [id]) { scroll-margin-block: 100px; }
.armazon main { min-width: 0; }
.ceja { display: flex; align-items: center; gap: var(--e2); color: var(--texto-2); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--e3); }
.hoy-encabezado { padding-block: var(--e3) var(--e5); border-bottom: 1px solid var(--borde); }
.hoy-fecha { display: flex; align-items: center; gap: var(--e2); border: 1px solid var(--borde); border-radius: var(--radio-control); padding: var(--e3) var(--e4); font-size: var(--letra-apoyo); color: var(--texto-2); }

.superior {
    grid-column: 2;
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--e4);
    padding: 0 var(--e6);
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
}
.menu-boton { display: none; }
.busqueda { position: relative; flex: 1 1 auto; max-width: 34rem; min-width: 0; }
.busqueda input {
    padding-left: 2.5rem;
    padding-right: 4.5rem;
    min-height: 44px;
    background: var(--superficie-2);
    border-color: transparent;
}
.busqueda input:focus { background: var(--superficie); border-color: var(--borde-fuerte); }
.busqueda > .icono { position: absolute; left: var(--e3); top: 50%; transform: translateY(-50%); color: var(--texto-2); pointer-events: none; }
.busqueda__atajo {
    position: absolute;
    right: var(--e3);
    top: 50%;
    transform: translateY(-50%);
    padding: 0 var(--e1);
    border: 1px solid var(--borde);
    border-radius: var(--radio-control);
    font-size: var(--letra-insignia);
    color: var(--texto-3);
    pointer-events: none;
}
.busqueda__resultados {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 10;
    max-height: 60vh;
    overflow: auto;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-capa);
}
.busqueda__resultados:empty { display: none; }
.busqueda__grupo { padding: var(--e2) var(--e3) var(--e1); font-size: var(--letra-insignia); font-weight: 600; color: var(--texto-2); border-top: 1px solid var(--borde); }
.busqueda__grupo:first-child { border-top: 0; }
.busqueda__resultado { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: baseline; padding: var(--e2) var(--e3); text-decoration: none; color: var(--texto); }
.busqueda__resultado > span { min-width: 0; overflow-wrap: anywhere; }
.busqueda__resultado:hover, .busqueda__resultado:focus { background: var(--realce); }
.busqueda__resultado .folio { font-weight: 600; min-width: 6rem; }
.busqueda__resultado .apoyo { margin-left: auto; white-space: normal; }
.busqueda__nada { padding: var(--e4); color: var(--texto-2); font-size: var(--letra-apoyo); }
.superior__agencia { margin-left: auto; font-size: 12px; color: var(--texto-2); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario { position: relative; margin-left: auto; }
.usuario > summary { list-style: none; display: flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e3); border: 1px solid var(--borde); border-radius: var(--radio-control); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; }
.usuario > summary::-webkit-details-marker { display: none; }
.usuario > summary:hover { background: var(--superficie-2); }
.usuario__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 10;
    min-width: 14rem;
    padding: var(--e2);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-capa);
    box-shadow: var(--sombra-capa);
}
.usuario__quien { padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borde); margin-bottom: var(--e2); }
.usuario__quien strong { display: block; }
.usuario__quien span { font-size: var(--letra-apoyo); color: var(--texto-2); }
.usuario__menu a, .usuario__menu button {
    display: flex;
    align-items: center;
    gap: var(--e2);
    width: 100%;
    padding: var(--e2) var(--e3);
    border: 0;
    border-radius: var(--radio-control);
    background: none;
    color: var(--texto);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.usuario__menu a:hover, .usuario__menu button:hover { background: var(--superficie-2); }

.contenido { grid-column: 2; padding: var(--e10) clamp(20px, 3vw, 48px) var(--e16); min-width: 0; }
.armazon > .contenido > main { max-width: 1440px; margin-inline: auto; }
.contenido--lectura { max-width: calc(var(--ancho-lectura) + 2 * var(--e8)); }
.armazon__telon { display: none; }
.accion-fija { position: static; }

@media (max-width: 899px) {
    .armazon { grid-template-columns: minmax(0, 1fr); }
    .lateral {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 20;
        width: min(20rem, 85vw);
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform var(--transicion-capa);
    }
    .armazon--menu-abierto .lateral { visibility: visible; transform: none; box-shadow: var(--sombra-capa); }
    .lateral__cerrar { display: inline-flex; margin-left: auto; color: var(--tinta); min-width: 44px; min-height: 44px; }
    .armazon--menu-abierto { overflow: hidden; }
    .armazon__telon { position: fixed; inset: 0; z-index: 15; background: color-mix(in srgb, var(--tinta) 45%, transparent); }
    .armazon--menu-abierto .armazon__telon { display: block; }
    .superior { grid-column: 1; padding: 0 var(--e4); gap: var(--e3); }
    .menu-boton { display: inline-flex; }
    .superior__agencia { display: none; }
    .busqueda__atajo { display: none; }
    .contenido { grid-column: 1; padding: var(--e4) var(--e4) var(--e16); }
    .encabezado { margin-bottom: var(--e5); }
    .encabezado__acciones .boton { flex: 1 1 auto; }
    .accion-fija { position: static; display: flex; flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .filtros .campo { min-width: 0; flex: 1 1 40%; }
    .busqueda__resultado .apoyo { flex-basis: 100%; margin-left: 0; }
    .cajon { width: 100%; }
}

/* =====================================================================
   11. Acceso: misma identidad que el viajero, con contexto de trabajo.
   ===================================================================== */
.pagina-acceso { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.acceso-cabecera { display: flex; align-items: center; gap: var(--e3); min-height: 80px; padding: var(--e5) max(24px, calc((100vw - 1200px) / 2)); border-bottom: 1px solid var(--borde); font-weight: 700; }
.acceso-cabecera > .icono { padding: 7px; width: 38px; height: 38px; background: var(--acento); border-radius: var(--radio-control); }
.acceso-composicion { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 7vw, 100px); width: min(1120px, 100%); padding: 64px 32px; margin: auto; }
.acceso-contexto { display: grid; gap: 28px; padding: 40px; border-radius: 20px; background-color: var(--acento-suave); background-image: repeating-radial-gradient(ellipse at 100% 0%, transparent 0 90px, color-mix(in srgb, var(--tinta) 6%, transparent) 91px 92px, transparent 93px 150px); }
.acceso-contexto h2 { font-size: clamp(28px, 3.3vw, 40px); letter-spacing: -.04em; line-height: 1.15; }
.acceso-contexto p { color: var(--texto-2); }
.acceso-contexto__ruta { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.acceso-contexto__ruta li { display: flex; align-items: center; gap: 12px; min-height: 56px; font-size: 14px; border-top: 1px solid var(--borde); }
.acceso { width: 100%; max-width: 440px; margin: 0 auto; }
.acceso.tarjeta { border: 0; padding: 0; }
.acceso__marca { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e6); font-weight: 600; font-size: 13px; color: var(--texto-2); }
.acceso h1 { font-size: 30px; margin-bottom: var(--e3); }
.acceso .encabezado__para-que { margin-bottom: var(--e6); }
.acceso .boton { width: 100%; margin-top: var(--e2); min-height: 48px; background: var(--acento); border-color: var(--acento); color: var(--tinta); }
.acceso .campo input { min-height: 48px; }
.acceso__pie { margin-top: var(--e6); font-size: var(--letra-apoyo); color: var(--texto-2); }
.acceso__pie a { display: inline-flex; align-items: center; min-height: 44px; }
.pagina-acceso__pie { text-align: center; font-size: var(--letra-apoyo); color: var(--texto-2); padding: var(--e6); border-top: 1px solid var(--borde); }
@media (max-width: 700px) {
    .acceso-composicion { grid-template-columns: minmax(0, 1fr); padding: 40px 24px; }
    .acceso-contexto { display: none; }
}

/* =====================================================================
   12b. La guia de componentes: muestras de color, solo en /guia.
   ===================================================================== */
.guia-muestras { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.guia-muestra { display: flex; flex-direction: column; gap: var(--e1); font-size: var(--letra-apoyo); }
.guia-muestra__color { display: block; height: 3rem; border-radius: var(--radio-control); border: 1px solid var(--borde); }
.guia-muestra__color[data-color="tinta"] { background: var(--tinta); }
.guia-muestra__color[data-color="secundario"] { background: var(--secundario); }
.guia-muestra__color[data-color="acento"] { background: var(--acento); }
.guia-muestra__color[data-color="papel"] { background: var(--papel); }
.guia-muestra__color[data-color="texto-2"] { background: var(--texto-2); }
.guia-muestra__color[data-color="texto-3"] { background: var(--texto-3); }
.guia-muestra__color[data-color="borde"] { background: var(--borde); }
.guia-muestra__color[data-color="acento-suave"] { background: var(--acento-suave); }

/* =====================================================================
   13. Impresion
   ===================================================================== */
@media print {
    .lateral, .superior, .accion-fija, .armazon__telon, .portal__nav, .boton { display: none !important; }
    .armazon { display: block; }
    .contenido { padding: 0; }
    body { background: var(--blanco); }
}

/* =====================================================================
   14. Piezas de contenido que comparten panel y portal: itinerario por dia,
       eventos, embudo, imagenes del paquete, personas, cabecera y pie del
       portal, y los alias de nombre corto (--radio, --lienzo, --activo).
       F1.3 retiro de aqui las reglas de las plantillas viejas (fichas,
       navegacion, resumen de pago, tabla de fichas): ya no las usa nadie.
   ===================================================================== */
:root {
    --espacio: var(--e4);
    --radio: var(--radio-control);
    --ancho-maximo: 68rem;
    --lienzo: var(--papel);
    --texto-suave: var(--texto-2);
    --hover: var(--realce);
    --activo: var(--acento-suave);
    --anillo: var(--foco-claro);
    --sombra-tarjeta: none;
    --sombra-elevada: none;
    --canalon: clamp(1rem, 0.55rem + 1.9vw, 2.5rem);
    --ritmo: clamp(1.25rem, 1rem + 1.1vw, 2.25rem);
    --texto-titulo: var(--letra-titulo);
    --texto-seccion: var(--letra-seccion);
    --texto-subtitulo: var(--letra-cuerpo);
    --texto-cuerpo: var(--letra-cuerpo);
    --texto-apoyo: var(--letra-apoyo);
    --texto-micro: var(--letra-insignia);
    --celda-y: var(--e3);
    --celda-x: var(--e3);
}
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); padding: var(--e3) var(--e5); background: var(--tinta); color: var(--texto-inverso); }
.cabecera__marca { display: flex; align-items: center; gap: var(--e3); }
.cabecera__logo { height: 2.25rem; width: auto; }
.cabecera__nombre { display: block; font-family: var(--familia-titulos); font-weight: 600; }
.cabecera__lema { display: block; font-size: var(--letra-apoyo); color: var(--texto-inverso-2); }
.cabecera nav { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.cabecera a, .cabecera button { color: var(--texto-inverso); }
.cabecera a:hover { color: var(--acento); }
.cabecera .boton { background: transparent; border-color: var(--texto-inverso-2); color: var(--texto-inverso); }
.cabecera .boton:hover { border-color: var(--acento); background: var(--superficie-oscura-2); }
.cabecera :focus-visible { outline-color: var(--foco-oscuro); }
.pie { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e4); padding: var(--e4); margin-top: var(--ritmo); border-top: 1px solid var(--borde); font-size: var(--letra-apoyo); color: var(--texto-2); }
.tarjeta + .tarjeta { margin-top: var(--e4); }
.tarjeta > h2 + * { margin-top: 0; }
:where(.tarjeta, section, article) > :where(h2, h3):first-child { margin-bottom: var(--e3); }
details > summary { cursor: pointer; font-weight: 600; padding: var(--e1) 0; }
details[open] > summary { margin-bottom: var(--e3); }
.ficha { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.ficha:hover { border-color: var(--borde-fuerte); }
.portada { padding: var(--e6) 0; }
.portada h1 { margin: 0 0 var(--e1); }
.itinerario, .lista-texto { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; padding: var(--e4); background: var(--superficie-2); border-radius: var(--radio-tarjeta); }
.viaje { display: flex; flex-direction: column; gap: var(--e2); }
.viaje--cancelada { opacity: 0.75; border-left: 4px solid var(--rojo); }
.lista-personas { margin: 0; padding-left: 1.1rem; }
.lista-personas li { margin-bottom: var(--e1); }
.aviso-privacidad { border-left: 4px solid var(--acento); }
.aviso-privacidad h2 { margin-top: 0; font-size: var(--letra-cuerpo); }
.embudo { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
.embudo__etapa { flex: 1 1 6.5rem; display: flex; flex-direction: column; align-items: center; gap: var(--e1); padding: var(--e3) var(--e2); border-radius: var(--radio-tarjeta); border: 1px solid var(--borde); background: var(--superficie); text-decoration: none; color: inherit; }
.embudo__etapa.abierta { background: var(--realce); }
/* Una etapa cerrada se atenua por color, no por opacidad: la opacidad bajaba el
   contraste del nombre por debajo de 4.5 (axe, F1.10). */
.embudo__etapa.cerrada { background: var(--superficie-2); }
.embudo__etapa.cerrada .embudo__nombre, .embudo__etapa.cerrada .embudo__cuantas { color: var(--texto-2); }
.embudo__cuantas { font-size: var(--letra-cifra); font-weight: 600; font-variant-numeric: tabular-nums; }
.embudo__nombre { font-size: var(--letra-apoyo); color: var(--texto-2); }
.dia-itinerario { border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: var(--e4); margin-bottom: var(--e4); background: var(--superficie); }
.dia-itinerario__cabecera { display: flex; gap: var(--e2); align-items: baseline; flex-wrap: wrap; }
.dia-itinerario__numero { font-weight: 600; color: var(--tinta); font-size: var(--letra-apoyo); }
.dia-itinerario__fecha { color: var(--texto-2); font-size: var(--letra-apoyo); }
.dia-itinerario__titulo { margin: var(--e1) 0 var(--e2); font-size: var(--letra-seccion); }
.dia-itinerario__notas { margin: 0 0 var(--e2); }
.eventos { list-style: none; margin: 0; padding: 0; }
.evento { display: flex; gap: var(--e3); padding: var(--e2) 0; border-top: 1px solid var(--borde); }
.evento__hora { flex: 0 0 3.2rem; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.evento__cuerpo { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.evento__lugar, .evento__descripcion { font-size: var(--letra-apoyo); color: var(--texto-2); }
.lista-documentos { list-style: none; margin: 0; padding: 0; }
.documento { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; padding: var(--e3) 0; border-bottom: 1px solid var(--borde); }
.lista-imagenes { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.lista-imagenes__item { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; padding: var(--e2) 0; border-bottom: 1px solid var(--borde); }
.lista-imagenes__datos { flex: 1 1 12rem; min-width: 0; }
.lista-imagenes__datos code { display: block; overflow-wrap: anywhere; font-size: var(--letra-apoyo); }
.miniatura { width: 4rem; height: 3rem; object-fit: cover; border-radius: var(--radio-control); background: var(--apagado); }
.forma-regla .acciones { margin-top: var(--e4); }
.forma-no-se-pudo { display: flex; gap: var(--e1); align-items: center; }
.forma-no-se-pudo input[type=text] { flex: 1 1 auto; min-width: 0; }
@media (max-width: 600px) {
.forma-no-se-pudo { flex-direction: column; align-items: stretch; }
}
.acciones--apiladas input[type=text] { width: 100%; min-width: 9rem; }
@media (max-width: 480px) {
.cabecera { flex-wrap: wrap; gap: var(--e2); }
.cabecera nav { width: 100%; }
.encabezado-seccion .boton { text-align: center; }
.pie { flex-direction: column; gap: var(--e1); text-align: center; }
.viaje__acciones .boton { flex: 1 1 auto; }
}
/* =====================================================================
   12c. Detalles con lateral, cifras de cabecera, datos, portal del viaje
        y catalogo (F1.3 a F1.7).
   ===================================================================== */
.datos { display: grid; gap: var(--e3) var(--e5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.datos dt { font-size: var(--letra-apoyo); color: var(--texto-2); }
.datos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.datos--cifras { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--borde); }
.cifras-reserva { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e6); margin: 0; }
.cifras-reserva dt { font-size: var(--letra-apoyo); color: var(--texto-2); }
.cifras-reserva dd { margin: 0; font-size: var(--letra-seccion); font-weight: 600; font-variant-numeric: tabular-nums; line-height: var(--interlinea-seccion); }
.encabezado--reserva { position: static; margin: 0 0 var(--e6); padding: 0 0 var(--e6); background: var(--blanco); border-bottom: 1px solid var(--borde); }
/* Lote 18 · G0.1 · el margen negativo lo sube hasta el borde del contenido
   cuando es lo primero; con las migas antes, las partia a la mitad (reserva,
   estado de cuenta y cotizacion, a 1440). Despues de las migas, no sube. */
.migas ~ .encabezado--reserva { margin-top: 0; }
.detalle-con-lateral { display: grid; gap: var(--e5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .detalle-con-lateral { grid-template-columns: minmax(0, 1fr) 20rem; } .lateral-de-detalle { position: sticky; top: calc(var(--alto-superior) + var(--e4)); } }
.lateral-de-detalle .tarjeta + .tarjeta { margin-top: var(--e3); }
.tabla tr.fila--actual td { background: var(--acento-suave); }
.boton--sutil { background: var(--superficie); color: var(--tinta); border-color: var(--borde-fuerte); }
.boton--sutil:hover { background: var(--realce); color: var(--tinta); }
.vista-previa__portal { padding: var(--e4); border-radius: var(--radio-tarjeta); background: var(--color-fondo, var(--papel)); border: 1px solid var(--borde); margin-bottom: var(--e3); }
.vista-previa__marca { margin: 0; font-family: var(--familia-titulos); font-weight: 600; color: var(--color-primario, var(--tinta)); }
/* Lema y precio de la vista previa: tonos de texto del producto (>= 4.5:1 sobre
   papel y sobre blanco); el secundario de la agencia daba 4.21 (F1.10). */
.vista-previa__lema { margin: 0 0 var(--e3); font-size: var(--letra-apoyo); color: var(--texto-2); }
.vista-previa__tarjeta { background: var(--blanco); border: 1px solid color-mix(in srgb, var(--color-secundario, var(--secundario)) 25%, var(--blanco)); border-radius: var(--radio-tarjeta); overflow: hidden; padding-bottom: var(--e3); }
.vista-previa__portada { aspect-ratio: 3 / 2; background: var(--color-primario, var(--tinta)); box-shadow: inset 0 -3px 0 0 var(--color-acento, var(--acento)); margin-bottom: var(--e2); }
.vista-previa__titulo { margin: 0 var(--e3); font-weight: 600; color: var(--color-primario, var(--tinta)); }
.vista-previa__precio { margin: 0 var(--e3) var(--e2); font-size: var(--letra-apoyo); color: var(--texto-2); }
.vista-previa__tarjeta .boton { margin: 0 var(--e3); background: var(--color-primario, var(--tinta)); border-color: var(--color-primario, var(--tinta)); color: var(--color-fondo, var(--papel)); }

/* --- el portal: portada del viaje, galeria y salidas ------------------- */
.portada-viaje { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .portada-viaje { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; } }
.portada-viaje__imagen { aspect-ratio: 3 / 2; border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--tinta-suave); }
.portada-viaje__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portada-viaje__texto .encabezado__titulo h1 { font-size: var(--letra-titulo); }
.portada-viaje__cuenta { margin: var(--e3) 0 0; font-size: var(--letra-seccion); font-family: var(--familia-titulos); font-weight: 600; }
.portada-viaje__dias { display: inline-block; min-width: 2.5em; margin-right: var(--e2); padding: 0 var(--e2); border-radius: var(--radio-control); background: var(--acento); color: var(--tinta); text-align: center; font-variant-numeric: tabular-nums; }
.viaje--cancelada { opacity: 0.75; }
.galeria-paquete { display: grid; gap: var(--e2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .galeria-paquete { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } }
.galeria-paquete__principal { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--tinta-suave); }
.galeria-paquete__principal img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galeria-paquete__principal img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* minmax(0, 1fr): una imagen que no carga mide lo que dice su atributo width y con 1fr
   a secas ensanchaba la columna hasta desbordar la pagina (inspeccion a 380, F1.10). */
.galeria-paquete__resto { display: grid; gap: var(--e2); grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
@media (min-width: 640px) { .galeria-paquete__resto { grid-template-columns: minmax(0, 1fr); } }
.galeria-paquete__resto img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio-control); }
.salidas-paquete__lista { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.salida-paquete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e3); padding: var(--e3) 0; border-top: 1px solid var(--borde); }
.salida-paquete__fechas { display: flex; flex-direction: column; }
.salida-paquete__precio { display: flex; flex-direction: column; text-align: right; }
.salida-paquete__precio .cifra { font-weight: 600; }
.detalle-paquete .prosa h2 { margin-bottom: var(--e2); }
.lista-documentos { list-style: none; margin: 0; padding: 0; }
.documento { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center; padding: var(--e3) 0; border-top: 1px solid var(--borde); }
.documento:first-child { border-top: 0; }
.busqueda__pagina .busqueda__resultado { padding: var(--e3); }
.encabezado__titulo .etiqueta { font-size: var(--letra-apoyo); }
@media (max-width: 899px) {
    .encabezado--reserva { position: static; margin: 0 0 var(--e4); padding: 0; background: none; border: 0; }
}

/* =====================================================================
   15. Hoy (F1.4): la lista corta. Cinco renglones como mucho, cada uno un
       enlace entero: clave, quien, de que, y el dato a la derecha.
   ===================================================================== */
.lista-corta { list-style: none; margin: 0; padding: 0; }
.lista-corta li + li { border-top: 1px solid var(--borde); }
.lista-corta a {
    display: grid; grid-template-columns: auto 1fr auto; gap: var(--e1) var(--e3); align-items: baseline;
    padding: var(--e2) 0; color: inherit; text-decoration: none;
}
.lista-corta a:hover { background: var(--fondo-hover); }
.lista-corta a > .apoyo { grid-column: 2 / 3; }
.lista-corta__dato { font-variant-numeric: tabular-nums; color: var(--texto-2); white-space: nowrap; }
@media (max-width: 40rem) {
    .lista-corta a { grid-template-columns: auto 1fr; }
    .lista-corta__dato { grid-column: 1 / -1; }
}

/* =====================================================================
   16. Filtros de lista (F1.5): chips por estado y saldo, la salida como
       lista desplegable. Sin JavaScript: enlaces y un formulario GET.
   ===================================================================== */
.filtros-lista { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); align-items: center; }
.filtros-lista__salida { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.filtros-lista__salida select { min-height: var(--alto-control-chico); max-width: 100%; }
/* La caja de busqueda: el texto empieza despues del icono, con cualquier regla de input. */
/* Chromium pinta el campo de busqueda con su aspecto nativo y se salta el relleno:
   sin appearance: none la lupa cae encima del texto (visto en las capturas de rc.4 y rc.7). */
.busqueda input[type=search] { -webkit-appearance: none; appearance: none; padding-left: 2.75rem; }

/* =====================================================================
   17. F1.9 · el resto del panel en el telefono y dos remates de escritorio.
       - La barra superior: la busqueda toma su propio renglon y el usuario
         queda en su icono; a 380 la caja ya no se aplasta.
       - Las tablas-lista ensenan tres datos clave, el estado y las acciones;
         lo demas vive en el escritorio (regla del encargo a 380).
       - Las acciones de la cabecera de pagina bajan a una barra fija al
         alcance del pulgar; el contenido deja sitio abajo.
       - En un detalle con lateral, el lateral (siguiente accion, atajos) va
         antes del contenido en pantallas de una columna.
       - Una celda de acciones vuelve a ser celda: con display:flex el
         navegador la envolvia en una celda anonima sin fondo (se veia en la
         fila actual de las versiones del cotizador).
       - El prefijo de moneda se ancla a la etiqueta, no al fondo del campo:
         en una rejilla estirada caia debajo del control.
   ===================================================================== */
.tabla td.acciones { display: table-cell; white-space: normal; min-width: 12rem; }
.tabla td.acciones > .boton, .tabla td.acciones > form, .tabla td.acciones > a { display: inline-flex; vertical-align: middle; margin: 0 var(--e1) var(--e1) 0; }
.campo__prefijo { bottom: auto; top: calc(1.4 * var(--letra-etiqueta) + var(--e1)); }
@media (max-width: 1099px) { .lateral-de-detalle { order: -1; } }
@media (max-width: 640px) {
    /* Con dos renglones la barra ya no es fija: pegada arriba tapaba el titulo
       de la pagina (se vio en Hoy a 380 en rc.9). */
    .superior { position: static; flex-wrap: wrap; height: auto; min-height: var(--alto-superior); padding-block: var(--e2); }
    /* Lote 18 · G0.1 · y su fila de la rejilla crece con ella. Con la fila fija
       en --alto-superior, el segundo renglon (la busqueda) se salia de la barra y
       se pintaba encima de las migas de cada pantalla. */
    .armazon { grid-template-rows: auto 1fr; }
    .busqueda { order: 3; flex: 1 1 100%; max-width: none; }
    .busqueda input { padding-right: var(--e3); }
    .usuario > summary > span { display: none; }
    .encabezado--reserva { margin-inline: 0; }
    /* Lote 18 · G3 · .en-divisa: la cifra que se pacto en otra moneda y su tipo
       de cambio siguen en la ficha, con su rotulo, junto a su equivalente. */
    .tabla--lista td.principal { font-size: var(--letra-cuerpo); font-weight: 600; }
    .tabla--lista td.acciones { display: block; white-space: normal; }
    .tabla--lista td.acciones > .boton, .tabla--lista td.acciones > a { display: inline-flex; min-height: var(--alto-control); }
    /* B1 · el PORTAL no lleva esta barra: ya tiene la de destinos abajo, y dos
       barras fijas apiladas se comen media pantalla de telefono. En el
       itinerario eran ademas dos botones que el viajero no necesita alli. */
    .portal .encabezado__acciones { position: static; padding: 0; background: none; border: 0; }
    .portal .contenido { padding-bottom: 0; }
    .encabezado__acciones .boton { flex: 1 1 auto; min-height: var(--alto-control); }
    .contenido { padding-bottom: calc(var(--e16) + var(--alto-control)); }
}


/* ==========================================================================
   B · LA CAPA VIEJA DEL PORTAL, DESPUES DEL CENSO DEL LOTE 24
   ==========================================================================
   El portal entero es v2 (lotes 21 a 23) y lo pinta portal-v2.css. El censo
   del lote 24 conto, regla por regla, donde casa cada una de esta capa (B1 a
   B11) en todas las pantallas servidas del portal y del panel, con sus
   estados: lo que no casaba en ninguna se borro; lo que solo casaba en el
   portal se borro si portal-v2.css ya lo anulaba, o se movio alli; lo que
   casa en el panel se queda TAL CUAL, en su orden, y es lo que sigue. La
   tabla: docs/diseno/portal-v2/lote-24/censo-css.tsv.
   ========================================================================== */

/* B1 · pares dato/valor: en el panel, en diez pantallas (cotizacion, reserva,
   comprobante, timbres...). */
.datos { margin: 0; display: grid; gap: var(--e3); }

/* B2 · las pestanas: en el panel, en la reserva, su estado de cuenta y su viaje. */
.pestanas { display: flex; gap: var(--e1); border-bottom: 1px solid var(--borde); }

@media print {
    /* Un enlace impreso que no se puede tocar solo gasta tinta. */
    a { color: inherit; text-decoration: none; }
}

/* B5 · el lugar de un evento del itinerario: en el viaje de la reserva, en el panel. */
.evento__lugar { display: inline-flex; align-items: center; gap: var(--e1); color: var(--texto-2); }
.evento__lugar:hover { color: var(--tinta); }

/* B7 · los chips: en el panel, en la lista de reservas. */
.chips { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; }

.armazon .rejilla > *, .armazon .filtros-lista > * { min-width: 0; }
.armazon .tarjeta > .tabla-envoltorio { max-width: calc(100% + 48px); }
.armazon .tabla td :is(a:not(.boton), button:not(.boton)), .armazon .migas a { display: inline-flex; align-items: center; min-height: 28px; }
.armazon .tabla td :is(a, span, p) { overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .armazon input, .armazon select, .armazon textarea, .pagina-acceso input { font-size: 16px; }
    .armazon .encabezado__acciones { position: static; padding: 0; border: 0; background: transparent; box-shadow: none; width: 100%; }
    .armazon .encabezado__acciones .boton { white-space: normal; }
    .armazon .tabla--lista td { display: block; }
    .armazon .tabla--lista td[data-columna]::before { display: inline; }
    .armazon .filtros-lista__salida { width: 100%; }
    .armazon .filtros-lista__salida select { flex: 1 1 180px; min-width: 0; width: 100%; }
    .armazon .hoy-fecha { padding: 0; border: 0; }
}

/* L31: contenido abierto, una jerarquía común y edición en el lugar. */
.lateral { border-right: 0; background: var(--superficie-2); }
.lateral__cabecera { border-bottom: 0; }
.lateral__seccion { margin: var(--e2) 0; }
.lateral__seccion > summary { padding: var(--e3) var(--e5); font-weight: 600; cursor: pointer; }
.lateral__seccion .lateral__enlace { margin-left: var(--e3); }
.editor-paquete { max-width: 1200px; margin-inline: auto; gap: var(--e10); }
.editor-seccion { padding-block: var(--e8); border-top: 1px solid var(--borde); }
.editor-seccion > h2 { margin-bottom: var(--e6); }
.editor-paquete input, .editor-paquete select, .editor-paquete textarea { width: 100%; min-height: var(--alto-control); border: 0; border-radius: var(--radio-control); background: var(--superficie-2); color: var(--texto); padding: var(--e3); }
.editor-paquete textarea { resize: vertical; }
.editor-paquete .editor-titulo { font-size: var(--letra-seccion); font-weight: 600; background: transparent; }
.editor-paquete .pestanas button { border: 0; background: transparent; padding: var(--e3) var(--e6); cursor: pointer; color: var(--texto); }
.programa-dias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e8); }
.editor-dia { min-width: 0; padding-block: var(--e4); }
.editor-dia form { display: grid; gap: var(--e2); }
.editor-salidas { display: grid; gap: var(--e8); }
.editor-salida { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4); padding-block: var(--e6); border-bottom: 1px solid var(--borde); }
.editor-salida label { display: grid; gap: var(--e2); }
#estado-editor { position: sticky; top: var(--e2); z-index: 2; background: var(--superficie); padding: var(--e2); }
@media (max-width: 700px) {
    .programa-dias { grid-template-columns: 1fr; }
    .editor-salida { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .editor-paquete { gap: var(--e6); }
}

.editor-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e6); }
.editor-fotos figure { margin: 0; min-width: 0; }
.editor-fotos img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio-tarjeta); }
.zona-fotos { background: var(--superficie-2); padding: var(--e8); margin-top: var(--e6); border-radius: var(--radio-tarjeta); }
@media (max-width: 700px) { .editor-fotos { grid-template-columns: 1fr; } }
.catalogo-editor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e10) var(--e6); }
.catalogo-ficha { min-width: 0; }
.catalogo-ficha a { text-decoration: none; }
.catalogo-ficha h2 { font-size: var(--letra-seccion); margin-block: var(--e4) var(--e2); }
.catalogo-ficha img, .catalogo-sin-foto { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio-tarjeta); }
.catalogo-sin-foto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e3); background: var(--tinta); color: var(--texto-inverso); }
.catalogo-sin-foto .icono { width: 48px; height: 48px; }
@media (max-width: 1000px) { .catalogo-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .catalogo-editor { grid-template-columns: 1fr; } }

.chips-servicios { display:flex; flex-wrap:wrap; gap:var(--e2); margin-block:var(--e4); }
.chips-servicios label { display:flex; align-items:center; gap:var(--e2); background:var(--superficie-2); border-radius:var(--radio-pildora); padding:var(--e2) var(--e4); cursor:pointer; }
.chips-servicios label:has(input:checked) { background:var(--acento-suave); }
.editor-paquete .chips-servicios input[role="switch"] {
    appearance: none; position: relative; flex: 0 0 2.75rem;
    width: 2.75rem; height: 1.5rem; min-height: 1.5rem; padding: 0; margin: 0;
    border: 0; border-radius: var(--radio-pildora); background: var(--texto-2); cursor: pointer;
}
.editor-paquete .chips-servicios input[role="switch"]::before,
.interruptor-publicacion::after {
    content: ""; position: absolute; width: 1.125rem; height: 1.125rem;
    border-radius: 50%; background: var(--blanco); transition: transform 150ms ease;
}
.editor-paquete .chips-servicios input[role="switch"]::before { top: .1875rem; left: .1875rem; }
.editor-paquete .chips-servicios input[role="switch"]:checked { background: var(--acento); }
.editor-paquete .chips-servicios input[role="switch"]:checked::before { transform: translateX(1.25rem); }
.editor-paquete .chips-servicios input[role="switch"]:focus-visible,
.interruptor-publicacion:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.interruptor-publicacion { position: relative; display: inline-flex; align-items: center; gap: .75rem; }
.interruptor-publicacion::before {
    content: ""; width: 2.75rem; height: 1.5rem; flex: 0 0 2.75rem;
    border-radius: var(--radio-pildora); background: var(--texto-2);
}
.interruptor-publicacion::after { left: calc(var(--e4) + .1875rem); }
.interruptor-publicacion[aria-checked="true"]::before { background: var(--acento); }
.interruptor-publicacion[aria-checked="true"]::after { transform: translateX(1.25rem); }
@media (prefers-reduced-motion: reduce) {
    .editor-paquete .chips-servicios input[role="switch"]::before,
    .interruptor-publicacion::after { transition: none; }
}

.editor-paquete .campo:has(textarea) { grid-column: span 2; }
@media (max-width: 700px) { .editor-paquete .campo:has(textarea) { grid-column: span 1; } }

.chips-servicios .icono-servicio { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
.politica-resumen { display: flex; flex-wrap: wrap; gap: var(--e4); padding: 0; list-style: none; }
.politica-resumen li { display: grid; gap: var(--e2); padding: var(--e4); background: var(--superficie-2); border-radius: var(--radio-control); }
.politica-resumen strong { font-size: var(--letra-seccion); }
.politica-especial summary { cursor: pointer; padding-block: var(--e4); }
.politica-tramo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--e3); align-items: end; }
@media (max-width: 600px) { .politica-tramo { grid-template-columns: 1fr; padding-block: var(--e4); border-bottom: 1px solid var(--borde); } }

.referencia-secundaria { display: block; color: var(--texto-2); font-size: var(--letra-apoyo); font-weight: 400; margin-block: var(--e1); }

/* El resumen mantiene todos los días al alcance durante la edición. */
.resumen-dias { position:sticky; top:3rem; z-index:4; display:flex; gap:.5rem; overflow-x:auto; padding:.75rem 0; background:var(--blanco); }
.resumen-dias a { flex:0 0 10rem; display:grid; gap:.2rem; padding:.65rem .8rem; border-radius:.6rem; background:var(--superficie-2); color:var(--tinta); text-decoration:none; }
.resumen-dias a span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resumen-dias a small { color:var(--texto-2); }
.editor-dia { scroll-margin-top:12rem; }
.tipos-actividad { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.5rem; border:0; padding:0; min-width:0; }
.tipos-actividad legend { margin-bottom:.5rem; }
.tipos-actividad label { position:relative; cursor:pointer; }
.tipos-actividad input { position:absolute; opacity:0; width:1px; height:1px; }
.tipos-actividad label > span { display:flex; align-items:center; gap:.4rem; padding:.65rem .85rem; border:1px solid var(--borde); border-radius:.6rem; }
.tipos-actividad input:checked + span { background:var(--tinta); color:var(--blanco); border-color:var(--tinta); }
.tipos-actividad input:focus-visible + span { outline:3px solid var(--acento); outline-offset:3px; }
.nueva-actividad { margin-top:1rem; }
.nueva-actividad summary { cursor:pointer; display:flex; align-items:center; gap:.5rem; padding:.85rem; background:var(--superficie-2); border-radius:.6rem; font-weight:600; }
.nueva-actividad[open] summary { margin-bottom:1rem; }
.programa-actividades { list-style:none; padding:0; display:grid; gap:1rem; }
.programa-actividades li { display:flex; align-items:flex-start; gap:.75rem; }
.programa-actividades .icono { flex-shrink:0; margin-top:.15rem; }
.programa-actividades p { margin:.3rem 0 0; }
@media(max-width:600px) { .resumen-dias a { flex-basis:8rem; } .tipos-actividad label { flex:1 0 42%; } }
@media (min-width:641px) {
    #estado-editor { top:var(--alto-superior); }
    .resumen-dias { top:calc(var(--alto-superior) + 3rem); }
    .editor-dia { scroll-margin-top:calc(var(--alto-superior) + 12rem); }
}

.editor-paquete { padding-bottom:7rem; }
.barra-guardar-paquete { position:fixed; bottom:1rem; right:1rem; z-index:6; display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; background:var(--blanco); border:1px solid var(--borde); border-radius:.75rem; max-width:calc(100vw - 2rem); }
.barra-guardar-paquete small { display:block; color:var(--texto-2); }
.barra-guardar-paquete .boton { flex-shrink:0; }
.actividad-editor { padding-bottom:1rem; border-bottom:1px solid var(--borde); }
.hoy-pago { display:grid; gap:.25rem; min-width:0; }
.hoy-pago > * { min-width:0; overflow-wrap:anywhere; }
.folio-en-linea { display:block; margin-top:.2rem; }
@media(max-width:640px) { .barra-guardar-paquete { left:.5rem; right:.5rem; bottom:.5rem; max-width:none; gap:.5rem; padding:.65rem; font-size:.8rem; } .barra-guardar-paquete small { display:none; } .barra-guardar-paquete .boton { padding:.65rem; } }

/* L34 · elegir el tipo de producto: tarjetas en rejilla, una por tipo. */
.tipos-de-producto { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.tipo-de-producto { display: flex; flex-direction: column; gap: var(--e2); height: 100%; text-decoration: none; color: inherit; }
.tipo-de-producto:hover, .tipo-de-producto:focus-visible { border-color: var(--borde-fuerte); }
/* L34 · líneas de una venta. */
.lineas-de-venta { list-style: none; padding: 0; margin: 0; }
.linea-de-venta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); padding: var(--e3) 0; border-top: 1px solid var(--borde); }
.linea-de-venta__que { flex: 1 1 18rem; font-weight: 600; }
.linea-de-venta input[type=number] { width: 6rem; }
.linea-de-venta--libre .campos { flex: 1 1 100%; }
#calendario-venta { padding-left: var(--e4); }
#calendario-venta li { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; padding: var(--e1) 0; }