:root {
    --color-fondo: #f8fafc;
    --color-superficie: #ffffff;
    --color-superficie-suave: #f1f5f9;
    /* Letras negras (pedido de la usuaria: los grises suaves no se distinguían); el "suave" también es casi negro. */
    --color-texto: #000000;
    --color-suave: #1a1a1a;
    --color-borde: #e2e8f0;
    --color-primario: #2563eb;
    --color-primario-oscuro: #1d4ed8;
    --color-primario-fondo: #eff6ff;
    /* Relleno de botones y opción marcada, su texto y el acompañante: los cambia el color de la empresa (PaletaService). */
    --color-marca: #2563eb;
    --color-marca-hover: #1d4ed8;
    --color-sobre-marca: #fff;
    --color-acento: #2563eb;
    --color-acento-fondo: #eff6ff;
    --color-exito: #047857;
    --color-exito-fondo: #d1fae5;
    --color-error: #b91c1c;
    --color-error-fondo: #fee2e2;
    --color-aviso: #92400e;
    --color-aviso-fondo: #fef3c7;
    --radio: 8px;
    --radio-grande: 12px;
    --sombra: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .07);
    --sombra-alta: 0 10px 25px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    color: var(--color-texto);
    background: var(--color-fondo);
}

h1 { font-size: 1.4rem; font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .75rem; }
a { color: var(--color-primario); }

/* Íconos SVG en línea (helper icono()). */
.icono { flex-shrink: 0; vertical-align: -.2em; }

/* Barra superior: marca, empresa y agencia, menú del usuario; abajo el menú de secciones. */
.barra { background: var(--color-superficie); border-bottom: 1px solid var(--color-borde); box-shadow: var(--sombra); }
.barra__fila { display: flex; align-items: center; gap: .5rem 1.25rem; padding: .5rem 1rem; }
.barra__marca { font-weight: 700; font-size: 1.05rem; color: var(--color-primario); text-decoration: none; }
.barra__contexto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; font-size: .8rem; color: var(--color-suave); }
.barra__empresa { font-weight: 600; color: var(--color-texto); }
.barra__empresa, .barra__agencia { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.menu-usuario { position: relative; margin-left: auto; }
.menu-usuario summary {
    display: flex; align-items: center; gap: .4rem; list-style: none; cursor: pointer;
    padding: .35rem .7rem; border: 1px solid var(--color-borde); border-radius: 999px; font-size: .88rem; font-weight: 500;
}
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary:hover { background: var(--color-fondo); }
.menu-usuario[open] summary { border-color: var(--color-primario); }
.menu-usuario__lista {
    position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; min-width: 13rem;
    display: flex; flex-direction: column; padding: .35rem;
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra-alta);
}
.menu-usuario__lista a, .menu-usuario__lista button {
    display: block; width: 100%; padding: .55rem .75rem; border: 0; border-radius: 6px;
    background: none; color: var(--color-texto); font: inherit; font-size: .9rem; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-usuario__lista a:hover, .menu-usuario__lista button:hover { background: var(--color-superficie-suave); }
.menu-usuario__lista form { margin: .3rem 0 0; padding-top: .3rem; border-top: 1px solid var(--color-borde); }
.menu-usuario__lista button { color: var(--color-error); }

.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .1rem; padding: 0 .6rem; border-top: 1px solid var(--color-borde); }
.menu a {
    padding: .6rem .55rem; margin-bottom: -1px; border-bottom: 2px solid transparent;
    color: var(--color-suave); font-size: .87rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.menu a:hover { color: var(--color-texto); }
.menu a.menu__actual { color: var(--color-primario); border-bottom-color: var(--color-primario); font-weight: 600; }
.barra__boton-menu { display: none; }

@media (max-width: 767px) {
    .barra__fila { flex-wrap: wrap; }
    .barra__boton-menu {
        display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; cursor: pointer;
        border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie); color: var(--color-texto); font: inherit; font-size: .88rem;
    }
    .menu-usuario__nombre { display: none; }
    .menu { display: none; flex-direction: column; padding: .3rem .5rem .6rem; }
    .menu.menu--abierto { display: flex; }
    .menu a { padding: .75rem .8rem; margin: 0; border-bottom: 0; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; font-size: 1rem; }
    .menu a.menu__actual { border-left-color: var(--color-primario); background: var(--color-primario-fondo); }
}

.contenido { max-width: 1200px; margin: 1.25rem auto; padding: 0 1rem; }

.panel {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra);
    padding: 1.5rem;
}
@media (max-width: 600px) {
    .panel { padding: 1rem; }
}
.panel--angosto { max-width: 420px; }
.panel--medio { max-width: 720px; }
.panel + .panel { margin-top: 1.25rem; }
.separado { margin-top: 1.5rem; }

/* Pestañas de secciones */
.pestanas { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-borde); }
.pestanas a {
    padding: .55rem 1rem;
    text-decoration: none;
    color: var(--color-suave);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.pestanas a.pestanas__actual { color: var(--color-primario); border-bottom-color: var(--color-primario); font-weight: 600; }
.pestanas--chicas { font-size: .92rem; }
.tabla-desplazable { overflow-x: auto; max-width: 100%; }

.logo-vista { max-width: 240px; max-height: 120px; border: 1px solid var(--color-borde); padding: .5rem; background: #fff; }
.formulario textarea { resize: vertical; }
.resumen-dato { background: var(--color-fondo); padding: .6rem .9rem; border-radius: var(--radio); }

/* Períodos con vigencia (ej. tablas del seguro) */
.bloque-vigencia { border: 1px solid var(--color-borde); border-radius: var(--radio); padding: .75rem 1rem; margin-top: 1rem; }
.bloque-vigencia--actual { border-color: var(--color-exito); }
.bloque-vigencia h2 { font-size: 1rem; margin-bottom: .5rem; }
.bloque-vigencia ul { margin: 0 0 .5rem; padding-left: 1.25rem; }

/* Tablas con campos editables */
.tabla--formulario input { width: 100%; padding: .45rem .55rem; border: 1px solid var(--color-borde); border-radius: var(--radio); font: inherit; }
.fila-error td { background: var(--color-error-fondo); }

/* Filtros de listados */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.filtros > div { display: flex; flex-direction: column; gap: .3rem; }
.filtros label { font-weight: 500; font-size: .9rem; }
.filtros input, .filtros select {
    padding: .45rem .55rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font: inherit;
}
.filtros__acciones { flex-direction: row !important; align-items: center; gap: 1rem !important; }

/* Selector de agencias de los informes: desplegable con casillas, buscador y marcar / desmarcar todas. */
.selector-agencias { position: relative; }
.selector-agencias__rotulo { font-weight: 500; font-size: .9rem; }
.selector-agencias__menu > summary { list-style: none; }
.selector-agencias__menu > summary::-webkit-details-marker { display: none; }
.selector-agencias__boton {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 15rem; max-width: 22rem;
    padding: .45rem .55rem; border: 1px solid var(--color-borde); border-radius: var(--radio);
    background: var(--color-superficie); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.selector-agencias__boton::after { content: "▾"; color: var(--color-suave); flex: none; }
.selector-agencias__menu[open] > .selector-agencias__boton { border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--color-primario-fondo); }
.selector-agencias__panel {
    position: absolute; z-index: 30; top: calc(100% + .35rem); left: 0; width: min(24rem, 90vw);
    padding: .75rem; background: var(--color-superficie); border: 1px solid var(--color-borde);
    border-radius: var(--radio); box-shadow: var(--sombra-alta);
}
.filtros .selector-agencias__buscar { width: 100%; }
.selector-agencias__atajos { display: flex; gap: .5rem; margin: .6rem 0; }
.selector-agencias__lista {
    max-height: 16rem; overflow-y: auto; border: 1px solid var(--color-borde); border-radius: var(--radio);
}
.filtros .selector-agencias__opcion, .selector-agencias__opcion {
    display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; font-weight: 400; font-size: .9rem; cursor: pointer;
    border-bottom: 1px solid var(--color-borde);
}
.selector-agencias__opcion:last-child { border-bottom: none; }
.selector-agencias__opcion:hover { background: var(--color-superficie-suave); }
.selector-agencias__opcion[hidden] { display: none; }
.selector-agencias__opcion strong { display: inline-block; min-width: 3.4rem; }
.selector-agencias__ayuda { margin: .5rem 0 0; font-size: .8rem; color: var(--color-suave); }

/* Auditoría */
.tabla--auditoria td { vertical-align: top; }
.sin-corte { white-space: nowrap; }
.cambios { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.cambios li + li { margin-top: .2rem; }
.cambios__mas { color: var(--color-exito); margin-right: .5rem; }
.cambios__menos { color: var(--color-error); }
.accion { font-size: .8rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; }
.accion--alta { background: var(--color-exito-fondo); color: var(--color-exito); }
.accion--modificacion { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.accion--baja { background: var(--color-error-fondo); color: var(--color-error); }
.barra-acciones { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.barra-acciones form { display: flex; align-items: center; gap: 1rem; margin: 0; }
.en-linea { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.paginacion { display: flex; gap: 1.5rem; justify-content: center; margin-top: 1rem; }

/* Lista de opciones para elegir (ej. empresa) */
.lista-opciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.lista-opciones form { margin: 0; }
.lista-opciones__boton {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    padding: .8rem 1rem;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.lista-opciones__boton:hover { border-color: var(--color-primario); }
.grupo-permisos .formulario__check { margin-top: .35rem; font-weight: 400; }
.grupo-permisos legend .formulario__check { margin: 0; font-weight: 600; }
/* Etiqueta (píldora); va antes de sus variantes para que estas la pisen. */
.etiqueta {
    display: inline-block;
    font-weight: 500;
    font-size: .75rem;
    background: var(--color-exito-fondo);
    color: var(--color-exito);
    padding: .1rem .45rem;
    border-radius: 999px;
}
.etiqueta--suave { background: var(--color-fondo); color: var(--color-suave); }
.etiqueta--aviso { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.etiqueta--info { background: #dbeafe; color: var(--color-primario-oscuro); }
.panel__encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.panel__encabezado h1 { margin: 0; }
.boton[href] { text-decoration: none; }
.texto-suave { color: var(--color-suave); font-size: .9rem; margin: .25rem 0; }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--color-borde); }
.tabla th { font-weight: 600; color: var(--color-suave); font-size: .85rem; }
.tabla__fila--inactiva td { color: var(--color-suave); }

/* Páginas de ingreso y error */
.pagina-simple {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.tarjeta {
    width: 100%;
    max-width: 380px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 2rem;
}
.tarjeta__marca { text-align: center; color: var(--color-primario); }

/* Formularios */
.formulario { display: flex; flex-direction: column; gap: .35rem; }
.formulario label { font-weight: 500; margin-top: .6rem; }
.formulario input, .formulario select, .formulario textarea {
    padding: .55rem .65rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font: inherit;
}
.formulario input:focus { outline: 2px solid var(--color-primario); outline-offset: -1px; }
.formulario .boton { margin-top: 1.1rem; }
.formulario fieldset {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: .5rem 1rem 1rem;
    margin: .75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.formulario legend { font-weight: 600; padding: 0 .35rem; }
[hidden] { display: none !important; }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.formulario__fila > div { display: flex; flex-direction: column; gap: .35rem; }
.formulario__check { display: flex; align-items: center; gap: .5rem; font-weight: 500; margin-top: 1rem; }
.formulario__acciones { display: flex; align-items: center; gap: 1rem; }
@media (max-width: 600px) {
    .formulario__fila { grid-template-columns: 1fr; }
    .tabla { display: block; overflow-x: auto; }
}
.campo-error { color: var(--color-error); font-size: .85rem; margin: 0; }

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 1rem;
    border: 1px solid var(--color-marca);
    border-radius: var(--radio);
    background: var(--color-marca);
    color: var(--color-sobre-marca);
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: var(--sombra);
}
.boton:hover { background: var(--color-marca-hover); border-color: var(--color-marca-hover); }
.boton:focus-visible, .boton-copiar:focus-visible, .menu a:focus-visible, .menu-usuario summary:focus-visible {
    outline: 2px solid var(--color-primario); outline-offset: 2px;
}
.boton--secundario { background: var(--color-superficie); color: var(--color-primario); border: 1px solid var(--color-primario); }
.boton--secundario:hover { background: var(--color-primario-fondo); border-color: var(--color-primario); }
.boton--chico { padding: .4rem .75rem; font-size: .88rem; }
.boton--exito { background: #059669; border-color: #059669; }
.boton--exito:hover { background: var(--color-exito); border-color: var(--color-exito); }
/* Entregar: verde flúor bien llamativo (pedido de la usuaria), con letra oscura para que se lea y un brillo suave. */
.boton--entregar {
    background: #39f56a; border-color: #1fd14f; color: #052e16; font-weight: 700;
    box-shadow: 0 0 0 3px rgba(57, 245, 106, .25), 0 4px 14px rgba(31, 209, 79, .45);
}
.boton--entregar:hover, .boton--entregar:focus-visible {
    background: #2be65c; border-color: #16b843; color: #052e16;
    box-shadow: 0 0 0 4px rgba(57, 245, 106, .35), 0 6px 18px rgba(31, 209, 79, .55);
}
.boton--entregar .icono { color: #052e16; }
.boton--ancho { width: 100%; }
.texto-error { color: var(--color-error); font-weight: 500; }
.boton-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Mensajes */
.alerta { padding: .75rem 1rem; border-radius: var(--radio); border: 1px solid transparent; border-left-width: 4px; margin-bottom: 1rem; }
.alerta > .icono { margin-right: .5rem; }
.alerta form.en-linea { margin-left: .5rem; }
.alerta--exito { background: var(--color-exito-fondo); color: var(--color-exito); border-color: #6ee7b7; border-left-color: #059669; font-weight: 500; }
.alerta--error { background: var(--color-error-fondo); color: var(--color-error); border-color: #fca5a5; border-left-color: var(--color-error); }
.alerta--aviso { background: var(--color-aviso-fondo); color: var(--color-aviso); border-color: #fcd34d; border-left-color: #d97706; }
/* Cierre de la liquidación: recaudado, comisiones y lo que hay que rendir. */
.total-a-rendir { max-width: 48rem; }
.total-a-rendir__detalle { padding-left: 1.5rem !important; color: var(--color-suave); font-size: .9em; }
.total-a-rendir .total td { font-weight: 700; font-size: 1.1rem; border-top: 2px solid var(--color-texto); }

.detalle-error {
    white-space: pre-wrap;
    font-size: .8rem;
    background: var(--color-fondo);
    padding: 1rem;
    overflow-x: auto;
}

/* Listas largas de casillas (ej. provincias de destino), en columnas. */
.lista-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 1rem; }
.lista-checks .formulario__check { margin-top: .35rem; font-weight: 400; }

/* Importes alineados a la derecha en tablas. */
.numero, .tabla th.numero, .tabla td.numero { text-align: right; white-space: nowrap; }
.tabla--formulario select { width: 100%; padding: .45rem .55rem; border: 1px solid var(--color-borde); border-radius: var(--radio); font: inherit; }

/* Formularios compactos: campos en grilla que se acomoda al ancho, sin tanto espacio vertical. */
.formulario__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .6rem 1rem; }
.formulario__grilla > div { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.formulario__grilla select, .formulario__grilla input[type=text] { width: 100%; }
.formulario--compacto { gap: .25rem; }
.formulario--compacto h2 { font-size: 1rem; margin: 0 0 .4rem; }
.formulario--compacto h2.separado { margin-top: 1rem; }
.formulario--compacto label { margin-top: 0; }
.formulario--compacto input, .formulario--compacto select { padding: .4rem .55rem; }
.formulario--compacto .formulario__acciones { margin-top: .75rem; }
.formulario--compacto .formulario__acciones .boton { margin-top: 0; }
.formulario__check--etiqueta { margin-top: 0; min-height: 1.4rem; }
.formulario [aria-invalid=true] { border-color: var(--color-error); background: var(--color-error-fondo); }
.tabla--compacta th, .tabla--compacta td { padding: .3rem .4rem; }
.fila-error--mensaje td { padding-top: 0; }
.tabla--bultos .tabla--bultos__tipo select { min-width: 9rem; }
.tabla--bultos input[name$="[cantidad]"] { max-width: 4.5rem; }
.boton-quitar {
    width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--color-borde); border-radius: var(--radio);
    background: var(--color-superficie); color: var(--color-suave); font: inherit; line-height: 1; cursor: pointer;
}
.boton-quitar:hover { border-color: var(--color-error); color: var(--color-error); background: var(--color-error-fondo); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cotizador: formulario a la izquierda y resultado fijo a la derecha en pantallas anchas. */
.cotizador { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.formulario__grilla--ancha { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.cotizador > .panel { margin: 0; padding: 1rem 1.25rem; min-width: 0; }
.formulario--compacto > * { min-width: 0; }
.cotizador .panel__encabezado { margin-bottom: .5rem; }
@media (min-width: 1000px) {
    .cotizador { grid-template-columns: minmax(0, 1fr) 360px; }
    .cotizador__resultado { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}

/* Celular: cada bulto es una tarjeta (tipo arriba, peso y medidas en grilla con su nombre). */
@media (max-width: 640px) {
    .cotizador > .panel { padding: .9rem; }
    .cotizador .panel__encabezado { flex-direction: column; align-items: flex-start; gap: .1rem; }
    .formulario__grilla { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
    .formulario--compacto .formulario__acciones { flex-direction: column; align-items: stretch; text-align: center; gap: .6rem; }
    .formulario--compacto .formulario__acciones .boton { padding: .75rem 1rem; }
    .formulario--compacto input, .formulario--compacto select { font-size: 16px; } /* evita el zoom automático en iPhone */

    .tabla.tabla--bultos { display: block; overflow: visible; }
    .tabla--bultos thead { display: none; }
    .tabla--bultos tbody { display: flex; flex-direction: column; gap: .6rem; }
    .tabla--bultos tr[data-bulto] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .4rem .6rem;
        padding: .6rem;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio);
    }
    .tabla--bultos tr[data-bulto].fila-error { border-color: var(--color-error); }
    .tabla--bultos td { display: flex; flex-direction: column; gap: .15rem; padding: 0; border: 0; background: none !important; }
    .tabla--bultos td[data-etiqueta]::before { content: attr(data-etiqueta); font-size: .8rem; font-weight: 600; color: var(--color-suave); }
    .tabla--bultos .tabla--bultos__tipo { grid-column: 1 / -1; }
    .tabla--bultos tr[data-bulto] { position: relative; }
    .tabla--bultos .tabla--bultos__quitar { position: absolute; top: .45rem; right: .45rem; }
    .tabla--bultos .fila-error--mensaje { display: block; margin-top: -.5rem; }
    .tabla--bultos .fila-error--mensaje td:first-child { display: none; }
    .cotizador__resultado .tabla { display: table; }
}
@media (max-width: 480px) {
    .formulario__grilla, .formulario__grilla--ancha { grid-template-columns: minmax(0, 1fr); }
    [data-opcional] input[type=text]:disabled { display: none; }
}

/* Carga de encomiendas: datos de un cliente registrado (solo lectura) y buscador por nombre. */
.formulario input[readonly], .formulario select:disabled { background: var(--color-fondo); color: var(--color-suave); }
.buscador-clientes { margin-top: .5rem; position: relative; }
.buscador-clientes summary { cursor: pointer; color: var(--color-primario); font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.buscador-clientes summary .icono { width: 15px; height: 15px; }
.buscador-clientes input { width: 100%; margin-top: .4rem; }
/* Resultados: lista desplegable debajo del buscador (no empuja el resto de la pantalla). */
.buscador-clientes__lista { list-style: none; margin: .25rem 0 0; padding: 0; position: absolute; z-index: 30; left: 0; top: 100%;
    width: min(36rem, calc(100vw - 2rem)); max-height: 22rem; overflow-y: auto; background: var(--color-superficie);
    border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: 0 8px 22px rgba(0, 0, 0, .14); }
.buscador-clientes__lista:empty { display: none; }
.buscador-clientes__lista li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .1rem .65rem;
    padding: .55rem .75rem; border-bottom: 1px solid var(--color-borde); }
.buscador-clientes__lista li:last-child { border-bottom: 0; }
.buscador-clientes__lista li:hover { background: var(--color-superficie-suave); }
.buscador-clientes__numero { grid-row: 1 / span 2; align-self: center; font-size: .8rem; font-weight: 700; white-space: nowrap;
    color: var(--color-primario); background: var(--color-primario-fondo); border-radius: 999px; padding: .15rem .55rem; }
.buscador-clientes__nombre { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.buscador-clientes__datos { grid-column: 2; color: var(--color-suave); font-size: .82rem; }
.buscador-clientes__acciones { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: .3rem; }
.buscador-clientes__lista li.buscador-clientes__vacio { display: block; color: var(--color-suave); font-size: .9rem; }
@media (max-width: 560px) {
    .buscador-clientes__lista li { grid-template-columns: auto minmax(0, 1fr); }
    .buscador-clientes__acciones { grid-column: 1 / -1; grid-row: auto; margin-top: .3rem; }
}
.resumen-encomienda h2 { font-size: .95rem; color: var(--color-suave); margin: 0 0 .2rem; }
.resumen-encomienda p { margin: 0; }

/* Detalle de la encomienda: impresión de la Guía R y las etiquetas. */
.imprimir { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; padding: .75rem; margin: .5rem 0 1rem; background: var(--color-fondo); border-radius: var(--radio); }
.imprimir form { flex-wrap: wrap; }
.imprimir select { padding: .4rem .5rem; border: 1px solid var(--color-borde); border-radius: var(--radio); font: inherit; max-width: 100%; }
.panel-prueba { border: 1px solid var(--color-borde); border-radius: var(--radio); padding: .6rem .8rem; margin-bottom: 1rem; }
.panel-prueba p { margin: 0 0 .4rem; }

/* Detalle como comprobante: importe al final del renglón, subtotal, ajustes y total. */
.tabla--detalle td { vertical-align: bottom; }
.tabla--detalle td.numero { width: 1%; padding-left: 1rem; }
.tabla--detalle__cierre td { border-bottom: 0; padding-top: .2rem; padding-bottom: .2rem; }
.tabla--detalle__subtotal td { border-top: 1px solid var(--color-texto); font-weight: 600; }
.tabla--detalle__ajuste td { color: var(--color-suave); }
.tabla--detalle__total td { border-top: 2px solid var(--color-texto); font-weight: 700; font-size: 1.05rem; }
.tabla--detalle__nota { text-align: right; font-size: .8rem; }

/* Envío interno: sin flete, no hacen falta las medidas ni el flete (columnas 5 a 8 de las líneas). */
.envio-interno #bultos th:nth-child(n+5):nth-child(-n+8),
.envio-interno #bultos td:nth-child(n+5):nth-child(-n+8) { display: none; }
/* Flete al lado de cada línea (lo llena la vista previa). */
.tabla--bultos__flete { font-weight: 600; min-width: 6.5rem; }


/* Formulario denso (carga de encomienda): todo a la vista sin bajar. */
.cotizador > .panel { padding: .65rem .85rem; }
.cotizador .panel__encabezado { margin-bottom: .3rem; flex-wrap: wrap; }
.cotizador .panel__encabezado h1 { font-size: 1.15rem; }
.formulario--denso { gap: .1rem; }
.formulario--denso h2 { font-size: .78rem; margin: 0 0 .15rem; color: var(--color-suave); text-transform: uppercase; letter-spacing: .04em; }
.formulario--denso h2.separado { margin-top: .45rem; }
.formulario--denso label { font-size: .76rem; font-weight: 500; margin: 0; }
.formulario--denso input, .formulario--denso select { padding: .22rem .4rem; font-size: .86rem; }
.formulario--denso .formulario__grilla { gap: .25rem .5rem; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); }
.formulario--denso .formulario__grilla > div { gap: .08rem; }
.formulario--denso .tabla--compacta th, .formulario--denso .tabla--compacta td { padding: .1rem .22rem; }
.formulario--denso .tabla--bultos th { font-size: .72rem; }
.formulario--denso .texto-suave { font-size: .74rem; margin: .05rem 0; }
.formulario--denso .campo-error { font-size: .72rem; }
.formulario--denso .formulario__check--etiqueta { font-size: .8rem; min-height: 0; margin: 0; }
.formulario--denso .boton { padding: .38rem .8rem; margin-top: 0; }
.formulario--denso .boton-quitar { width: 1.6rem; height: 1.6rem; }
.persona { display: grid; grid-template-columns: 6.8rem minmax(0, 1fr); align-items: end; gap: .5rem; }
.persona + .persona { margin-top: .25rem; }
.formulario--denso .persona__titulo { margin: 0 0 .3rem; }
.persona__titulo span { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .7rem; }
.formulario--denso .persona__campos { grid-template-columns: 8.2rem 4.6rem minmax(9rem, 1fr) 8.2rem; }
.persona__campos > [data-solo-cuit] { grid-column: 1 / 3; }
.cierre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 1rem; margin-top: .45rem; }
.cierre__observaciones { flex: 1 1 16rem; display: flex; flex-direction: column; gap: .08rem; }
.cierre .formulario__acciones { margin: 0; }
.panel__encabezado .buscador-clientes { margin: 0; max-width: 24rem; }
@media (max-width: 700px) {
    .persona { grid-template-columns: 1fr; gap: .1rem; }
    .formulario--denso .persona__campos { grid-template-columns: 1fr 1fr; }
}

/* Estado de la encomienda: etiqueta, cambio de estado (excepciones) e historial. */
.estado-actual { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .25rem 0 .75rem; }
.estado-actual .etiqueta { font-size: .9rem; padding: .2rem .7rem; }
.cambio-estado { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin: .5rem 0; }
.cambio-estado input[type="text"] { min-width: min(16rem, 100%); flex: 1; }
.cambio-estado .campo-error { flex-basis: 100%; margin: 0; }

/* Opciones habilitadas a una empresa (superadministrador). */
.opciones-empresa { margin-bottom: .75rem; }
.opciones-empresa__acciones { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .85rem; margin-bottom: .25rem; }
.opciones-empresa__tipo { margin: .5rem 0 0; font-size: .8rem; font-weight: 600; color: var(--color-suave); text-transform: uppercase; }
.opciones-empresa .formulario__check { margin-top: .25rem; font-weight: 400; }

/* Logística: paradas de un recorrido y días de salida. */
.paradas { margin: .5rem 0; padding-left: 1.5rem; }
.paradas__fila { display: flex; gap: .5rem; align-items: center; margin-bottom: .35rem; }
.paradas__fila select { flex: 1; min-width: 0; }
.dias { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .5rem; }
.dias .formulario__check { margin-top: 0; font-weight: 400; }

/* Hoja de ruta: campo de escaneo. */
.escaneo { margin: 1rem 0; padding: .75rem; border: 1px dashed var(--color-borde); border-radius: var(--radio); }
.escaneo__fila { display: flex; gap: .5rem; }
.escaneo__fila input { flex: 1; min-width: 0; font-size: 1.1rem; }
.escaneo p { margin: .35rem 0 0; }

/* Recepción de la hoja de ruta en una parada. */
.recepcion { margin: 1rem 0; padding: .75rem; border: 2px solid var(--color-primario); border-radius: var(--radio); }
.recepcion h2 { margin-top: 0; }
.recepcion__completa td { color: var(--color-exito); }
/* Cierre de la recepción: los dos botones juntos, abajo; el faltante despliega la lista de bultos debajo. */
.recepcion__cierre { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; margin-top: 1rem; padding-top: .75rem;
    border-top: 1px solid var(--color-borde); }
.recepcion__faltante { flex: 1 1 100%; }
.recepcion__faltante > summary { display: inline-flex; list-style: none; cursor: pointer; }
.recepcion__faltante > summary::-webkit-details-marker { display: none; }
.recepcion__faltante[open] > summary { margin-bottom: .75rem; }
.recepcion__faltante form { padding: .75rem; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-fondo-suave, transparent); }

/* Novedades de recepción y contador del menú. */
.novedad { border-bottom: 1px solid var(--color-borde); padding: .6rem 0; }
.novedad__encabezado { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.novedad p { margin: .3rem 0; }
.contador { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: var(--color-error); color: #fff;
    font-size: .75rem; text-align: center; line-height: 1.3rem; }

/* ===== Detalle de la encomienda (rediseño): encabezado, tarjetas, bultos, historial, impresión y costos. ===== */
.etiqueta--grande { font-size: .85rem; font-weight: 600; padding: .25rem .8rem; }
.encabezado-pagina { margin-bottom: 1rem; }
.encabezado-pagina__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: .9rem 0 .2rem; }
.encabezado-pagina p { margin: 0; }
.codigo-seguimiento { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: .02em; }

.detalle-encomienda__columnas {
    display: grid; gap: 1rem; align-items: start;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "datos" "lateral" "bultos" "historial";
}
.detalle-encomienda__datos { grid-area: datos; }
.detalle-encomienda__bultos { grid-area: bultos; }
.detalle-encomienda__historial { grid-area: historial; }
.detalle-encomienda__lateral { grid-area: lateral; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.detalle-encomienda .panel + .panel { margin-top: 0; }
.detalle-encomienda__entrega { grid-area: entrega; }
.detalle-encomienda__columnas--entregada { grid-template-areas: "datos" "entrega" "lateral" "bultos" "historial"; }
@media (min-width: 768px) {
    .detalle-encomienda__columnas {
        grid-template-columns: minmax(0, 1fr) clamp(280px, 30vw, 360px);
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "datos lateral" "bultos lateral" "historial lateral";
    }
    .detalle-encomienda__columnas--entregada {
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas: "datos lateral" "entrega lateral" "bultos lateral" "historial lateral";
    }
    .detalle-encomienda__lateral { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}

/* Tarjetas de datos (remitente, destinatario, envío). */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.tarjeta-dato {
    padding: 1rem 1.25rem; background: var(--color-superficie);
    border: 1px solid var(--color-borde); border-radius: var(--radio-grande); box-shadow: var(--sombra);
}
.tarjeta-dato h2 { margin: 0 0 .5rem; font-size: .75rem; font-weight: 600; color: var(--color-suave); text-transform: uppercase; letter-spacing: .06em; }
.tarjeta-dato p { margin: .15rem 0; overflow-wrap: anywhere; }
.tarjeta-dato__nombre { font-size: 1.05rem; font-weight: 600; }
.tarjeta-dato .tarjeta-dato__nota { margin-top: .65rem; padding-top: .65rem; border-top: 1px dashed var(--color-borde); font-size: .9rem; }
.recorrido { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-weight: 600; }
.recorrido .icono { color: var(--color-primario); }

/* Tabla moderna en contenedor redondeado (se desplaza de costado si no entra). */
.tabla-contenedor { border: 1px solid var(--color-borde); border-radius: var(--radio); overflow-x: auto; }
.tabla-contenedor .tabla { display: table; }
.tabla--moderna th { padding: .6rem 1rem; background: var(--color-fondo); white-space: nowrap; }
.tabla--moderna td { padding: .75rem 1rem; vertical-align: middle; }
.tabla--moderna tbody tr:last-child td { border-bottom: 0; }
.observaciones { margin: .9rem 0 0; }
.tabla--moderna .fila-codigos td { padding-top: 0; }
.tabla--moderna tr.con-codigos td { border-bottom: 0; padding-bottom: .4rem; }

/* Códigos de bulto: letra monoespaciada con botón para copiar. */
.codigos { display: flex; flex-wrap: wrap; gap: .3rem; }
.codigo {
    display: inline-flex; align-items: center; gap: .1rem; padding: .1rem .15rem .1rem .5rem;
    background: var(--color-superficie-suave); border: 1px solid var(--color-borde); border-radius: 6px;
}
.codigo code { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .82rem; }
.boton-copiar {
    display: inline-flex; padding: .25rem; border: 0; border-radius: 4px;
    background: none; color: var(--color-suave); cursor: pointer;
}
.boton-copiar .icono { width: 14px; height: 14px; }
.boton-copiar:hover { color: var(--color-primario); background: var(--color-borde); }
.boton-copiar--hecho, .boton-copiar--hecho:hover { color: var(--color-exito); }

/* Historial como línea de tiempo (lo más nuevo arriba). */
.linea-tiempo { list-style: none; margin: 1rem 0 0; padding: 0; }
.linea-tiempo__hito { position: relative; padding: 0 0 1.1rem 1.75rem; }
.linea-tiempo__hito::before { content: ""; position: absolute; left: .37rem; top: 1.1rem; bottom: 0; width: 2px; background: var(--color-borde); }
.linea-tiempo__hito:last-child { padding-bottom: 0; }
.linea-tiempo__hito:last-child::before { display: none; }
.linea-tiempo__hito::after {
    content: ""; position: absolute; left: 0; top: .3rem; width: .85rem; height: .85rem;
    border: 2px solid #94a3b8; border-radius: 50%; background: var(--color-superficie);
}
.linea-tiempo__hito--actual::after { border-color: var(--color-marca); background: var(--color-marca); box-shadow: 0 0 0 3px var(--color-primario-fondo); }
.linea-tiempo__encabezado { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; }
.linea-tiempo__encabezado time { font-size: .85rem; color: var(--color-suave); white-space: nowrap; }
.linea-tiempo p { margin: .1rem 0 0; }
.linea-tiempo .linea-tiempo__motivo { margin-top: .35rem; padding: .35rem .6rem; font-size: .9rem; background: var(--color-fondo); border-radius: 6px; }
.desplegable { margin: .5rem 0; }
.desplegable summary { cursor: pointer; color: var(--color-primario); font-size: .9rem; font-weight: 500; }

/* Impresión: una tarjeta por comprobante (guía y etiquetas). */
.acciones-impresion { display: flex; flex-direction: column; gap: .75rem; }
.acciones-impresion h2 { margin: 0; }
.accion-impresion { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: .85rem; border: 1px solid var(--color-borde); border-radius: var(--radio); }
.accion-impresion h3 { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .95rem; font-weight: 600; }
.accion-impresion__opciones { display: flex; flex-direction: column; gap: .5rem; }
.accion-impresion select {
    flex: 1; min-width: 0; padding: .45rem .5rem;
    border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie); font: inherit; font-size: .9rem;
}

/* Resumen de costos (también el resultado del cotizador): descuentos en verde y total destacado. */
.tabla--detalle__descuento td { color: var(--color-exito); }
.tabla--detalle .tabla--detalle__total td { padding: .7rem .6rem; border-top: 0; background: var(--color-primario-fondo); font-size: 1.2rem; font-weight: 700; }
.tabla--detalle__total td:first-child { border-radius: var(--radio) 0 0 var(--radio); }
.tabla--detalle__total td:last-child { border-radius: 0 var(--radio) var(--radio) 0; color: var(--color-primario-oscuro); }
.resumen-costos h2 { margin-bottom: .5rem; }
.resumen-costos__nota { margin: .75rem 0 0; padding: .5rem .7rem; font-size: .9rem; background: var(--color-aviso-fondo); color: var(--color-aviso); border-radius: var(--radio); }

/* Celular: barra fija abajo con el total y la impresión rápida. */
.barra-inferior { display: none; }
@media (max-width: 767px) {
    .detalle-encomienda { padding-bottom: 4.5rem; }
    .barra-inferior {
        display: flex; align-items: center; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
        padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
        background: var(--color-superficie); border-top: 1px solid var(--color-borde); box-shadow: 0 -4px 14px rgba(15, 23, 42, .08);
    }
    .barra-inferior__total { display: flex; flex-direction: column; margin-right: auto; line-height: 1.15; }
    .barra-inferior__total span { font-size: .75rem; color: var(--color-suave); }
    .barra-inferior__total strong { font-size: 1.15rem; }
    .barra-inferior .boton { padding: .6rem .8rem; }
    .codigo-seguimiento { font-size: 1.45rem; }
}

/* Entrega en el mostrador: formulario en la columna lateral y tarjeta de la entrega hecha. */
.panel-entrega { border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--color-primario-fondo), var(--sombra); }
.panel-entrega h2 { margin-bottom: .5rem; }
.panel-entrega h3 { margin: 0 0 .15rem; font-size: .9rem; font-weight: 600; }
.panel-entrega h3.separado { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--color-borde); }
.panel-entrega fieldset { margin-top: .5rem; }
.panel-entrega .formulario__check { margin-top: .3rem; font-weight: 400; }
.panel-entrega .formulario__acciones { margin-top: .9rem; }
.panel-entrega--espera { border-color: var(--color-borde); box-shadow: var(--sombra); }
.panel-entrega--directa { border-color: #d97706; box-shadow: 0 0 0 3px var(--color-aviso-fondo), var(--sombra); }

/* Anulación: formulario plegado (acción poco frecuente) y tarjeta de la anulada. */
.panel-anular > summary { cursor: pointer; color: var(--color-error); font-weight: 600; }
.panel-anular[open] > summary { margin-bottom: .5rem; }
.panel-anular .formulario__acciones { margin-top: .9rem; }
.panel-anulada { border-left: 4px solid var(--color-error); }
.panel-anulada h2 { display: flex; align-items: center; gap: .4rem; color: var(--color-error); }
.panel-anulada p { margin: .25rem 0; }
.acciones-anular { flex-wrap: wrap; gap: .5rem; }
.acciones-anular .boton { flex: 1 1 8rem; }
.boton--peligro { background: var(--color-error); border-color: var(--color-error); }
.boton--peligro:hover { background: #991b1b; border-color: #991b1b; }
/* Botón que todavía no se puede usar (ej. Dar salida con la hoja vacía): conserva su color, sin efecto al pasar el mouse. */
.boton:disabled { cursor: not-allowed; opacity: .8; box-shadow: none; }
.boton--peligro:disabled:hover { background: var(--color-error); border-color: var(--color-error); }
.panel-entrega--espera p { margin: 0; }
.subformulario { display: flex; flex-direction: column; gap: .25rem; margin: .3rem 0 .2rem 1.5rem; }
.detalle-encomienda__entrega { border-left: 4px solid #059669; }
.detalle-encomienda__entrega p { margin: .25rem 0; }
.detalle-encomienda__entrega .icono { color: #059669; }
.accion-impresion--destacada { border-color: var(--color-primario); background: var(--color-primario-fondo); }
.panel-entrega .formulario__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.panel-entrega input, .panel-entrega select { width: 100%; min-width: 0; }
.panel-entrega .formulario__check input { width: auto; }

/* Superadministrador: editar el nombre y el email de un administrador de la empresa. */
.editar-administrador { margin-top: .6rem; padding: .5rem .75rem; border: 1px solid var(--color-borde); border-radius: var(--radio); }
.editar-administrador summary { cursor: pointer; color: var(--color-primario); font-weight: 500; }
.editar-administrador .formulario { margin-top: .4rem; }

/* Carga de encomienda: una sola columna centrada, con el resultado ABAJO del formulario (total y resumen a la
   izquierda, detalle a la derecha) para que entre todo en una pantalla. El cotizador sigue con el resultado al costado. */
.cotizador--apilado { max-width: 1100px; margin: 0 auto; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.cotizador--apilado .cotizador__resultado { position: static; max-height: none; overflow: visible; }
.cotizador--apilado .cotizador__resultado h2 { font-size: 1.05rem; margin-bottom: .2rem; }
.resultado__resumen p, .resultado__resumen .alerta { margin: .2rem 0; }
.resultado__detalle .tabla--compacta th, .resultado__detalle .tabla--compacta td { padding: .15rem .4rem; }
.resultado__detalle details { margin-top: .3rem; font-size: .9rem; }
@media (min-width: 1000px) {
    .cotizador--apilado { grid-template-columns: minmax(0, 1fr); }
    .cotizador--apilado .resultado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: .5rem 1.5rem; align-items: start; }
    .cotizador--apilado .resultado__resumen h2 { font-size: 1.5rem; }
}

/* Barra en una sola fila: marca y empresa a la izquierda, menú en el medio (si no entra, en dos líneas dentro de ese
   espacio) y usuario a la derecha. En el celular el menú se abre abajo, a todo el ancho. */
.barra__fila { padding: 0 1rem; min-height: 3.1rem; flex-wrap: nowrap; }
.barra__fila .menu { flex: 1 1 0; min-width: 0; align-self: stretch; align-items: stretch; border-top: 0; padding: 0; }
.barra__fila .menu a { display: flex; align-items: center; margin-bottom: 0; padding: .45rem .55rem; }
.barra__fila .menu-usuario { margin-left: 0; }
@media (max-width: 767px) {
    .barra__fila { flex-wrap: wrap; padding: .45rem 1rem; }
    .barra__fila .menu { order: 10; flex: 1 1 100%; align-self: auto; }
    .barra__fila .menu-usuario { margin-left: auto; }
}

/* Carga de encomienda más baja: el domicilio del remitente en su misma fila y, en el destinatario, sin repetir los
   títulos de las columnas (son las mismas que las del remitente). */
.contenido { margin-top: .75rem; }
@media (min-width: 1000px) {
    .formulario--denso .persona__campos { grid-template-columns: 8.2rem 4.6rem minmax(9rem, 1fr) 8.2rem minmax(9rem, 1fr); }
    .formulario--denso .persona__campos[data-cliente="destinatario"] > div > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .formulario--denso .persona__campos[data-cliente="destinatario"] { margin-top: .15rem; }
    .persona:has([data-cliente="destinatario"]) { align-items: center; }
}
.cotizador--apilado .resultado__detalle { font-size: .92rem; }
.cotizador--apilado .resultado__detalle .tabla--detalle__nota { margin: .15rem 0 0; }
@media (min-width: 1000px) {
    .cotizador--apilado .resultado__detalle details { margin-top: -1.15rem; width: max-content; }
    .cotizador--apilado .resultado__detalle details[open] { margin-top: .3rem; width: auto; }
}

/* Carga de encomienda: el contenedor con un fondo suave y cada parte (personas, envío, bultos, cargos) en su recuadro
   blanco, para distinguirlas de un vistazo. */
.cotizador--apilado > .panel:not(.cotizador__resultado) { background: #eef2f7; border-color: #cbd5e1; }
.cotizador--apilado > .panel .panel__encabezado { margin-bottom: .4rem; }
.bloque-carga {
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04); padding: .45rem .7rem .55rem;
}
.bloque-carga + .bloque-carga { margin-top: .45rem; }
.formulario--denso .bloque-carga > h2, .formulario--denso .bloque-carga > h2.separado { margin: 0 0 .2rem; color: var(--color-primario-oscuro); }
.bloque-carga .persona + .persona { margin-top: .3rem; padding-top: .3rem; border-top: 1px dashed var(--color-borde); }
.formulario--denso .bloque-carga .persona__titulo { color: var(--color-primario-oscuro); }
.cotizador--apilado .cierre { margin-top: .5rem; }
.cotizador--apilado > .cotizador__resultado { border-color: #cbd5e1; }

/* ===== Carga de encomienda: que entre entera en una pantalla de notebook (≈ 1366 × 768). ===== */
/* Barra más baja (en todas las pantallas). */
.barra__fila { min-height: 2.6rem; }
.barra__fila .menu a { padding: .3rem .5rem; }
.barra__marca { font-size: 1rem; }
.menu-usuario summary { padding: .25rem .6rem; }
.contenido:has(.cotizador--apilado) { margin-top: .45rem; }

.cotizador--apilado { gap: .45rem; }
.cotizador--apilado > .panel { padding: .45rem .7rem .55rem; }
.cotizador--apilado .panel__encabezado h1 { font-size: 1.05rem; }
.cotizador--apilado > .panel .panel__encabezado { margin-bottom: .15rem; }

/* Títulos de Envío, Bultos y Cargos sobre el borde del recuadro (como una etiqueta): no ocupan una fila. */
.bloque-carga { position: relative; padding: .4rem .6rem .45rem; }
.bloque-carga + .bloque-carga { margin-top: .6rem; }
.formulario--denso .bloque-carga > h2, .formulario--denso .bloque-carga > h2.separado {
    position: absolute; top: -.55rem; left: .5rem; margin: 0; padding: 0 .35rem;
    background: var(--color-superficie); border-radius: 4px; font-size: .68rem; line-height: 1.1rem;
}
.bloque-carga > h2 + * { margin-top: .1rem; }
.bloque-carga [id^="domicilio-"] h2 { margin: .3rem 0 .1rem; }

/* Campos y filas un poco más bajos. */
.formulario--denso input, .formulario--denso select { padding: .16rem .4rem; }
.formulario--denso label { line-height: 1.15; }
.formulario--denso .tabla--compacta th, .formulario--denso .tabla--compacta td { padding: .06rem .22rem; }
.formulario--denso .formulario__grilla { gap: .15rem .5rem; }
.bloque-carga .persona + .persona { margin-top: .2rem; padding-top: .2rem; }
.cotizador--apilado .cierre { margin-top: .35rem; }

/* Resultado compacto. */
.cotizador--apilado > .cotizador__resultado { padding: .4rem .8rem .45rem; }
.cotizador--apilado .resultado__detalle { font-size: .86rem; }
.cotizador--apilado .resultado__detalle .tabla--detalle th, .cotizador--apilado .resultado__detalle .tabla--detalle td { padding: .08rem .4rem; }
.cotizador--apilado .resultado__detalle .tabla--detalle .tabla--detalle__total td { padding: .25rem .4rem; font-size: 1.05rem; }
@media (min-width: 1000px) {
    .cotizador--apilado .resultado__resumen h2 { font-size: 1.35rem; }
}

/* Botones de la carga arriba a la derecha (en el HTML siguen al final: el Enter termina en ellos) y el buscador de
   clientes al lado del título; las observaciones van en la fila del envío. */
.cotizador--apilado > .panel { position: relative; }
.cotizador--apilado .panel__encabezado { justify-content: flex-start; gap: 1.25rem; }
/* Botones abajo, a la derecha: Calcular, Limpiar y Generar y guardar. */
.cotizador--apilado .cierre--abajo { margin-top: .45rem; justify-content: flex-end; }
.cotizador--apilado .cierre--abajo .formulario__acciones { gap: .6rem; }
.cotizador--apilado .cierre--abajo .boton { padding: .35rem 1rem; }
.envio__observaciones { grid-column: auto; }
.cotizador--apilado > .panel + .panel { margin-top: 0; }
/* Resultado sin el encabezado "Concepto / Importe" (se entiende solo). */
.cotizador--apilado .resultado__detalle .tabla--detalle thead { display: none; }
/* Menú un poco más chico para que entre en una línea. */
.barra__fila .menu a { font-size: .82rem; padding: .3rem .42rem; }
@media (max-width: 999px) {
    .cotizador--apilado .panel__encabezado { flex-wrap: wrap; }
    .envio__observaciones { grid-column: auto; }
}
.cotizador--apilado > .cotizador__resultado { top: auto; }

/* Impresión automática del comprobante recién generado: el marco no se ve (pero tiene que tener tamaño para cargar el PDF). */
.impresion-automatica { position: fixed; right: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }

/* Todo se adapta al ancho de la pantalla (sin ancho máximo), con un margen chico a los costados. */
.contenido { max-width: none; padding: 0 1rem; }
.cotizador--apilado { max-width: none; }
@media (min-width: 1400px) {
    .contenido { padding: 0 1.5rem; }
    /* En la carga, los campos de las personas crecen con el ancho (nombre y domicilio). */
    .formulario--denso .persona__campos { grid-template-columns: 9rem 5rem minmax(12rem, 1.4fr) 10rem minmax(12rem, 1fr); }
}
/* Las filas de campos de la carga reparten todo el ancho entre sus campos (auto-fit: no quedan columnas vacías). */
.cotizador--apilado .formulario--denso .formulario__grilla:not(.persona__campos) { grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr)); }
/* Remitente y Destinatario alineados con sus campos: el título mide lo mismo que un campo y queda a su altura (debajo
   del rótulo de las columnas; en el destinatario los rótulos están ocultos). El aviso de cliente va debajo del título. */
@media (min-width: 701px) {
    .formulario--denso .persona { align-items: start; }
    .formulario--denso .persona .persona__titulo {
        position: relative; display: flex; align-items: center; height: 1.57rem; margin: calc(.76rem * 1.15 + .08rem) 0 0;
    }
    .formulario--denso .persona__titulo span { position: absolute; top: 100%; left: 0; white-space: nowrap; }
}
@media (min-width: 1000px) {
    .formulario--denso .persona:has([data-cliente="destinatario"]) .persona__titulo { margin-top: 0; }
    .formulario--denso .persona__campos[data-cliente="destinatario"] { margin-top: 0; }
}
/* Franja del Total en verde y con letras más grandes (carga, cotizador y detalle de la encomienda). */
.tabla--detalle .tabla--detalle__total td,
.cotizador--apilado .resultado__detalle .tabla--detalle .tabla--detalle__total td {
    background: #d1fae5; color: #065f46; font-size: 1.4rem; font-weight: 700; padding: .35rem .6rem;
}
.tabla--detalle .tabla--detalle__total td:last-child { color: #047857; }

/* Comprobante con el que sale la encomienda, arriba a la derecha de la carga, en negrita (se actualiza solo). */
.comprobante-previsto {
    margin-left: auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: .1rem .5rem;
    padding: .2rem .75rem; border: 1px solid var(--color-primario); border-radius: var(--radio); background: var(--color-superficie);
    font-weight: 700; color: var(--color-primario-oscuro);
}
.comprobante-previsto__tipo { font-size: 1rem; }
.comprobante-previsto__numero { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.comprobante-previsto__nota { font-size: .78rem; font-weight: 500; color: var(--color-suave); }

/* Carga de encomienda: letras más grandes en lo que se carga (campos) y en los rótulos, con los campos de alto fijo
   para que la pantalla siga entrando. */
.cotizador--apilado {
    --alto-campo: 1.8rem;
    --rotulo: .82rem;
}
.cotizador--apilado .formulario--denso input:not([type=checkbox]):not([type=radio]),
.cotizador--apilado .formulario--denso select {
    height: var(--alto-campo); padding: 0 .45rem; font-size: 1rem;
}
.cotizador--apilado .formulario--denso label { font-size: var(--rotulo); }
.cotizador--apilado .formulario--denso .tabla--bultos th { font-size: .78rem; }
.cotizador--apilado .formulario--denso .bloque-carga > h2 { font-size: .74rem; }
.cotizador--apilado .formulario--denso .persona__titulo { font-size: .82rem; }
.cotizador--apilado .formulario--denso .formulario__check--etiqueta { font-size: .86rem; }
.cotizador--apilado .tabla--bultos__flete { font-size: 1rem; }
@media (min-width: 701px) {
    .cotizador--apilado .formulario--denso .persona .persona__titulo {
        height: var(--alto-campo); margin-top: calc(var(--rotulo) * 1.15 + .08rem);
    }
}
@media (min-width: 1000px) {
    .cotizador--apilado .formulario--denso .persona:has([data-cliente="destinatario"]) .persona__titulo { margin-top: 0; }
}
/* Botón para quitar una línea de bultos: en rojo (y relleno al pasar el mouse). */
.boton-quitar { border-color: #fca5a5; color: var(--color-error); background: var(--color-error-fondo); font-weight: 700; }
.boton-quitar:hover, .boton-quitar:focus-visible { border-color: var(--color-error); background: var(--color-error); color: #fff; }

/* Carga: títulos de las secciones y rótulos de los campos más grandes. */
.cotizador--apilado { --rotulo: .92rem; }
.cotizador--apilado .formulario--denso label { font-size: var(--rotulo); }
.cotizador--apilado .formulario--denso .bloque-carga > h2 { font-size: .9rem; line-height: 1.3rem; top: -.72rem; padding: 0 .45rem; }
.cotizador--apilado .bloque-carga + .bloque-carga { margin-top: .8rem; }
.cotizador--apilado .bloque-carga { padding-top: .55rem; }
.cotizador--apilado .formulario--denso .persona { grid-template-columns: 8.4rem minmax(0, 1fr); }
.cotizador--apilado .formulario--denso .persona__titulo { font-size: .95rem; }
.cotizador--apilado .formulario--denso .tabla--bultos th { font-size: .88rem; }
.cotizador--apilado .formulario--denso .formulario__check--etiqueta { font-size: .95rem; }
.cotizador--apilado .formulario--denso .texto-suave { font-size: .82rem; }
.cotizador--apilado .panel__encabezado h1 { font-size: 1.2rem; }

/* Botón para agregar una línea de bultos: verde, con el signo + destacado. */
.boton-agregar {
    display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .7rem .2rem .25rem; margin-right: .3rem; cursor: pointer;
    border: 1px solid #6ee7b7; border-radius: 999px; background: var(--color-exito-fondo); color: var(--color-exito);
    font: inherit; font-size: .9rem; font-weight: 600;
}
.boton-agregar__signo {
    display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem;
    border-radius: 50%; background: #059669; color: #fff; font-size: 1.1rem; font-weight: 700; line-height: 1;
}
.boton-agregar:hover, .boton-agregar:focus-visible { background: #059669; border-color: #059669; color: #fff; }
.boton-agregar:hover .boton-agregar__signo, .boton-agregar:focus-visible .boton-agregar__signo { background: #fff; color: #059669; }

/* ===== Todas las pantallas a lo ancho y adaptadas al dispositivo. ===== */
/* Los paneles "medios" ocupan todo el ancho (antes se cortaban en 720 px); el angosto (cambiar clave) queda centrado. */
.panel--medio { max-width: none; }
.panel--angosto { margin-left: auto; margin-right: auto; }
img, svg, video { max-width: 100%; }
.formulario input, .formulario select, .formulario textarea { width: 100%; min-width: 0; }
.formulario input[type=checkbox], .formulario input[type=radio] { width: auto; }
.formulario__fila > div, .formulario fieldset { min-width: 0; }

/* Pantallas anchas: las filas de campos reparten el ancho y los textos no se estiran de punta a punta. */
@media (min-width: 1000px) {
    .formulario__fila { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 1.5rem; }
    .panel > p.texto-suave, .panel > p:not([class]) { max-width: 75ch; }
}

/* Tablet y celular. */
@media (max-width: 900px) {
    .contenido { padding: 0 .75rem; }
    /* Las tablas anchas se desplazan de costado en lugar de romper la pantalla (salvo bultos y costos, que ya se acomodan). */
    .tabla:not(.tabla--bultos):not(.tabla--detalle) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tabla-contenedor .tabla, .cotizador__resultado .tabla { display: table; }
    .pestanas { overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
    .pestanas a { flex-shrink: 0; }
    .panel__encabezado { flex-wrap: wrap; }
}
@media (max-width: 600px) {
    .contenido { padding: 0 .5rem; }
    h1 { font-size: 1.2rem; }
    .panel__encabezado { flex-direction: column; align-items: stretch; gap: .6rem; }
    /* Botones del encabezado (ej. "Envío interno" y "Nuevo envío"): lado a lado, repartiendo el ancho, sin salirse. */
    .panel__encabezado > .boton { align-self: stretch; }
    .panel__encabezado > .en-linea { display: flex; width: 100%; gap: .5rem; }
    .panel__encabezado > .en-linea > .boton { flex: 1 1 0; min-width: 0; padding: .55rem .6rem; font-size: .92rem; white-space: nowrap; }
    .formulario__acciones { flex-wrap: wrap; }
    .formulario__acciones .boton { flex: 1 1 100%; }
    /* Filtros de los listados: un campo por fila, a todo el ancho. */
    .filtros { flex-direction: column; align-items: stretch; }
    .filtros input, .filtros select { width: 100%; }
    .filtros__acciones { justify-content: space-between; }
    .barra-acciones form { flex-wrap: wrap; }
    /* Letra de 16 px en los campos: evita el zoom automático del iPhone al tocarlos. */
    input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
    .paginacion { gap: 1rem; flex-wrap: wrap; }
}

/* Carga: el primer recuadro (Envío) lleva su título sobre el borde: aire para que no se monte sobre el encabezado. */
.cotizador--apilado .formulario--denso > .bloque-carga:first-of-type { margin-top: .9rem; }

/* Cotizador por localidades: dos opciones lado a lado (retira en la agencia / a domicilio). */
.cotizacion__ruta { margin: 0 0 .6rem; }
.cotizacion__opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
.cotizacion { padding: .75rem .9rem; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie); }
.cotizacion__titulo { display: flex; align-items: center; gap: .4rem; margin: 0 0 .25rem; font-size: 1rem; }
.cotizacion__titulo .icono { color: var(--color-primario); }
.cotizacion__total { margin: .1rem 0; font-size: 1.6rem; font-weight: 700; color: #047857; }
.cotizacion p { margin: .15rem 0; }

/* Rendición del reparto: el cobro (canje de la Guía R y medio de pago) debajo de quién recibió. */
.rendicion { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.rendicion > .boton { align-self: flex-start; }
.rendicion__cobro { max-width: 40rem; padding: .25rem .9rem .8rem; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-fondo); }
.rendicion__cobro h3 { margin: .5rem 0 .2rem; font-size: .95rem; }
.separado-abajo { margin-bottom: 1.25rem; }

/* ===== Inicio: accesos rápidos como botones grandes, centrados en la pantalla. ===== */
.inicio {
    min-height: calc(100vh - 6rem); display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.5rem 0 2.5rem; text-align: center;
}
.inicio__saludo { margin: 0; font-size: 1.6rem; }
.inicio__contexto { margin: .3rem 0 1.75rem; color: var(--color-suave); }
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 13rem)); justify-content: center; gap: 1rem; width: 100%; max-width: 72rem; }
.acceso {
    display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.5rem 1rem 1.25rem;
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-grande);
    box-shadow: var(--sombra); color: var(--color-texto); text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.acceso:hover, .acceso:focus-visible { border-color: var(--color-primario); box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.acceso:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.acceso__icono {
    display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem;
    border-radius: 50%; background: var(--color-acento-fondo); color: var(--color-acento);
}
.acceso__icono .icono { width: 28px; height: 28px; }
.acceso__texto { font-size: 1.1rem; font-weight: 600; }
.acceso__descripcion { font-size: .85rem; color: var(--color-suave); line-height: 1.3; }
/* El primero (Encomiendas) destacado en verde, como el botón "Nuevo envío". */
.acceso:first-child .acceso__icono { background: var(--color-exito-fondo); color: #059669; }
@media (max-width: 600px) {
    .inicio { min-height: 0; justify-content: flex-start; padding-top: 1rem; }
    .inicio__saludo { font-size: 1.35rem; }
    .inicio__contexto { margin-bottom: 1.1rem; font-size: .9rem; }
    .accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .acceso { padding: 1.1rem .6rem 1rem; }
    .acceso__icono { width: 3rem; height: 3rem; }
    .acceso__descripcion { font-size: .78rem; }
    /* Si quedan impares, el último ocupa la fila entera (no queda un hueco). */
    .acceso:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ===== Accesos rápidos a la izquierda en las demás pantallas (al tocar uno en el inicio, los recuadros se acomodan
   ahí). Compu: ícono y nombre; pantallas medianas: solo el ícono; celular: tira de íconos arriba. ===== */
.marco--con-accesos { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
/* Dentro de la grilla, el margen automático achicaba el contenido a su tamaño mínimo: ocupa todo su espacio. */
.marco--con-accesos > .contenido { margin-left: 0; margin-right: 0; min-width: 0; }
.accesos-laterales {
    position: sticky; top: .75rem; display: flex; flex-direction: column; gap: .35rem;
    width: 11.5rem; max-height: calc(100vh - 1.5rem); overflow-y: auto; margin: .75rem 0 1rem .75rem; padding: .5rem;
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-grande); box-shadow: var(--sombra);
}
.accesos-laterales a {
    display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: var(--radio);
    color: var(--color-texto); font-size: .92rem; font-weight: 500; text-decoration: none;
}
.accesos-laterales a:hover { background: var(--color-superficie-suave); }
.accesos-laterales a:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.accesos-laterales__icono {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.1rem; height: 2.1rem;
    border-radius: 50%; background: var(--color-acento-fondo); color: var(--color-acento);
}
.accesos-laterales a:first-child .accesos-laterales__icono { background: var(--color-exito-fondo); color: #059669; }
.accesos-laterales a.accesos-laterales__actual { background: var(--color-primario-fondo); color: var(--color-primario-oscuro); font-weight: 600; }
.accesos-laterales a.accesos-laterales__actual .accesos-laterales__icono { background: var(--color-marca); color: var(--color-sobre-marca); }
@media (min-width: 701px) and (max-width: 1199px) {
    .accesos-laterales { width: auto; align-items: center; }
    .accesos-laterales a { padding: .35rem; }
    .accesos-laterales__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 700px) {
    .marco--con-accesos { grid-template-columns: minmax(0, 1fr); }
    .accesos-laterales {
        position: static; flex-direction: row; width: auto; min-width: 0; max-height: none; overflow-x: auto; overflow-y: hidden;
        margin: .5rem .5rem 0; padding: .35rem; scrollbar-width: none;
    }
    .accesos-laterales a { flex-direction: column; gap: .2rem; flex: 1 0 4.2rem; padding: .3rem .2rem; font-size: .72rem; text-align: center; }
    .accesos-laterales__icono { width: 2rem; height: 2rem; }
}

/* Sin animación entre pantallas (pedido de la usuaria: se sentía trabado): la pantalla nueva aparece directo. */

/* ===== Celular: carga de envío como pasos numerados, uno debajo del otro. ===== */
@media (max-width: 700px) {
    /* Barra: marca, usuario y Menú en una fila; empresa y agencia debajo, en una sola línea. */
    .barra__fila { gap: .35rem .6rem; padding: .4rem .75rem; }
    .barra__contexto { order: 5; flex: 1 1 100%; flex-direction: row; gap: .4rem; font-size: .75rem; }
    .barra__contexto > span { min-width: 0; }
    .contenido > .alerta { padding: .5rem .75rem; font-size: .88rem; margin-bottom: .5rem; }

    /* Encabezado: título, buscador y comprobante previsto a lo ancho. */
    .cotizador--apilado > .panel { padding: .6rem .6rem .8rem; }
    .cotizador--apilado .panel__encabezado { flex-direction: column; align-items: stretch; gap: .5rem; }
    .cotizador--apilado .panel__encabezado .buscador-clientes { max-width: none; }
    .comprobante-previsto { margin-left: 0; justify-content: space-between; }

    /* Pasos numerados: 1 Remitente, 2 Destinatario, 3 Envío, 4 Bultos, 5 Cargos. */
    .cotizador--apilado .formulario--denso { counter-reset: paso; }
    .cotizador--apilado .persona__titulo, .cotizador--apilado .bloque-carga > h2 { counter-increment: paso; }
    .cotizador--apilado .persona__titulo::before, .cotizador--apilado .bloque-carga > h2::before {
        content: counter(paso); display: inline-flex; align-items: center; justify-content: center;
        width: 1.35rem; height: 1.35rem; margin-right: .4rem; border-radius: 50%;
        background: var(--color-marca); color: var(--color-sobre-marca); font-size: .78rem; font-weight: 700; letter-spacing: 0;
    }
    .cotizador--apilado .bloque-carga { padding: .9rem .7rem .7rem; }
    .cotizador--apilado .bloque-carga + .bloque-carga { margin-top: 1.1rem; }
    .cotizador--apilado .formulario--denso .bloque-carga > h2 { top: -.8rem; display: flex; align-items: center; font-size: .95rem; }

    /* Remitente y destinatario: el título arriba de sus campos (no al costado). */
    .cotizador--apilado .formulario--denso .persona { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
    .cotizador--apilado .formulario--denso .persona .persona__titulo {
        display: flex; flex-wrap: wrap; align-items: center; height: auto; margin: 0; font-size: 1rem;
    }
    .cotizador--apilado .formulario--denso .persona__titulo span { position: static; flex-basis: 100%; white-space: normal; margin-top: .15rem; }
    .cotizador--apilado .bloque-carga .persona + .persona { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--color-borde); }
    /* Documento y tipo lado a lado; nombre, teléfono, domicilio y condición IVA a lo ancho. */
    .cotizador--apilado .formulario--denso .persona__campos { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .45rem .6rem; }
    .cotizador--apilado .persona__campos > div:nth-child(n+4) { grid-column: 1 / -1; }

    /* Campos más altos para tocarlos con el dedo, y el envío y los cargos en dos columnas (una en pantallas chicas). */
    .cotizador--apilado { --alto-campo: 2.5rem; }
    .cotizador--apilado .formulario--denso .formulario__grilla:not(.persona__campos) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .6rem; }
    .cotizador--apilado .formulario--denso .formulario__grilla > div { gap: .15rem; }

    /* Botones: "Generar y guardar" primero y grande; Calcular y Limpiar debajo. */
    .cotizador--apilado .cierre--abajo .formulario__acciones { width: 100%; flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
    .cotizador--apilado .cierre--abajo .boton { width: 100%; padding: .8rem 1rem; }
    .cotizador--apilado .cierre--abajo .boton[value=guardar] { font-size: 1.05rem; font-weight: 600; }
}
@media (max-width: 520px) {
    .cotizador--apilado .formulario--denso .formulario__grilla:not(.persona__campos) { grid-template-columns: minmax(0, 1fr); }
}

/* Informes: al imprimir solo va el contenido (sin barra, accesos, filtros ni botones). */
@media print {
    .barra, .accesos-laterales, .marco > nav, .filtros, .no-imprimir, .alerta { display: none !important; }
    .marco, .contenido { display: block; margin: 0; padding: 0; }
    .panel { box-shadow: none; border: 0; padding: 0; }
    .tabla { font-size: 9pt; }
}

/* Acuerdo de comisiones de la agencia: tarjetas por rol con reglas en castellano. */
.acuerdo { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.acuerdo__rol h3 { display: flex; align-items: center; gap: .5rem; margin-top: 0; }
.acuerdo-herramientas { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; align-items: end; }
.acuerdo-notas textarea { width: 100%; }
.reglas { list-style: none; padding: 0; margin: 0 0 .75rem; }
.regla { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--color-borde); }
.regla__texto { flex: 1 1 12rem; }
.regla__cuando { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.regla__editar, .regla__agregar { flex-basis: 100%; }
.regla__editar:not([open]) { flex-basis: auto; }
.regla__editar > summary, .regla__agregar > summary { list-style: none; display: inline-block; cursor: pointer; }
.regla-formulario { margin-top: .5rem; padding: .75rem; border: 1px dashed var(--color-borde); border-radius: var(--radio); }
.regla-formulario__frase { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.regla-formulario__situaciones { border: 0; padding: 0; margin: .5rem 0; }

/* Cifras destacadas (cuenta corriente del cliente). */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: .75rem 0; }
.cifra { border: 1px solid var(--color-borde); border-radius: var(--radio); padding: .6rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.cifra__titulo { font-size: .85rem; color: var(--color-texto-suave, #666); }
.cifra strong { font-size: 1.2rem; }
.cifra--debe strong { color: var(--color-primario); }
.cifra--alerta { border-color: #d97706; background: var(--color-aviso-fondo); }

/* Tablero del inicio (paso 15a): alertas a la izquierda, números a la derecha; en pantallas chicas, uno abajo del otro. */
.inicio--con-tablero { min-height: 0; justify-content: flex-start; }
.tablero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem; width: 100%; max-width: 72rem; margin-top: 2rem; text-align: left; }
.tablero__bloque { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: 1rem 1.25rem; margin: 0; }
.tablero__bloque h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.tablero__grupo { margin: .9rem 0 .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-suave); }
.tablero__numeros { width: 100%; }
.tablero__numeros th[scope="row"] { font-weight: 500; }
.tablero__cambio { display: block; font-size: .78rem; font-weight: 600; color: var(--color-exito); }
.tablero__cambio--baja { color: var(--color-error); }
.tablero__nota { font-size: .8rem; margin: .6rem 0 0; }
.pendientes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.pendiente { padding: .5rem .75rem; border-radius: var(--radio); border-left: 4px solid; font-size: .92rem; }
.pendiente a { color: inherit; font-weight: 500; }
.pendiente--error { background: var(--color-error-fondo); color: var(--color-error); border-left-color: var(--color-error); }
.pendiente--aviso { background: var(--color-aviso-fondo); color: var(--color-aviso); border-left-color: #d97706; }
.pendiente--ok { background: var(--color-exito-fondo); color: var(--color-exito); border-left-color: #059669; }
.pendiente__detalle { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .85rem; }

/* Seguimiento público (paso 15c): en la página simple, un poco más ancha. */
.tarjeta:has(.seguimiento) { max-width: 34rem; }
.seguimiento__buscar label { display: block; font-weight: 600; margin-bottom: .35rem; }
.seguimiento__campo { display: flex; gap: .5rem; }
.seguimiento__campo input { flex: 1; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--color-borde); border-radius: var(--radio); font: inherit; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; }
.seguimiento__resultado { margin-top: 1.25rem; }
.seguimiento__estado { margin: .25rem 0 1rem; padding: .7rem .9rem; border-radius: var(--radio); font-size: 1.15rem; font-weight: 600; background: var(--color-primario-fondo); color: var(--color-primario-oscuro); }
.seguimiento__estado--final { background: var(--color-exito-fondo); color: var(--color-exito); }
.seguimiento__estado--excepcion { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.seguimiento__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .5rem 1rem; margin: 0 0 1rem; }
.seguimiento__datos dt { font-size: .78rem; color: var(--color-suave); }
.seguimiento__datos dd { margin: 0; font-weight: 500; }
.seguimiento__titulo { font-size: 1rem; margin: 1rem 0 .5rem; }
.seguimiento__recorrido { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--color-borde); }
.seguimiento__recorrido li { position: relative; display: flex; flex-direction: column; padding: 0 0 .75rem .5rem; }
.seguimiento__recorrido li::before { content: ""; position: absolute; left: -1.4rem; top: .35rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--color-borde); }
.seguimiento__recorrido li.seguimiento__actual::before { background: var(--color-marca); }
.seguimiento__cuando { font-size: .8rem; color: var(--color-suave); }
.seguimiento__contacto { margin-top: 1rem; font-size: .85rem; }

/* Control de agencias (paso 15d): tipos de hecho como pestañas con contador. */
.control-tipos { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.control-tipo { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 1px solid var(--color-borde); border-radius: 999px; font-size: .88rem; color: var(--color-texto); text-decoration: none; background: var(--color-superficie); }
.control-tipo:hover { border-color: var(--color-primario); }
.control-tipo--actual { border-color: var(--color-primario); background: var(--color-primario-fondo); color: var(--color-primario-oscuro); font-weight: 600; }

/* Observaciones del auditor (paso 15d-2): la conversación, el auditor a la izquierda y la agencia a la derecha. */
.conversacion { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.conversacion__mensaje { max-width: 85%; padding: .6rem .8rem; border-radius: var(--radio-grande); border: 1px solid var(--color-borde); }
.conversacion__mensaje--auditor { align-self: flex-start; background: var(--color-superficie-suave); }
.conversacion__mensaje--agencia { align-self: flex-end; background: var(--color-primario-fondo); }
.conversacion__quien { margin: 0 0 .25rem; font-size: .78rem; color: var(--color-suave); }
.conversacion__texto { margin: 0; }

/* Tarjetas del inicio con contador (opciones con pendientes). */
.acceso { position: relative; }
.acceso__contador { position: absolute; top: .6rem; right: .6rem; }

/* Agencia: encabezado simple (empresa a la izquierda, usuario a la derecha) y todo el menú en la columna izquierda,
   sin desplazamiento interno y con los textos completos. */
.barra--agencia .menu-usuario { margin-left: auto; }
.barra--agencia .barra__marca { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accesos-laterales--agencia { position: static; width: max-content; max-width: 17rem; max-height: none; overflow: visible; }
.accesos-laterales--agencia .accesos-laterales__texto { white-space: nowrap; }
.accesos-laterales a .contador { margin-left: auto; }
.accesos-laterales a.accesos-laterales__inicio .accesos-laterales__icono { background: var(--color-exito-fondo); color: #059669; }
.accesos-laterales--agencia a:first-child + a .accesos-laterales__icono { background: var(--color-primario-fondo); color: var(--color-primario); }
@media (min-width: 701px) and (max-width: 1199px) {
    .accesos-laterales--agencia { align-items: stretch; }
    .accesos-laterales--agencia a { padding: .45rem .55rem; }
    .accesos-laterales--agencia .accesos-laterales__texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@media (max-width: 700px) {
    .accesos-laterales--agencia { width: auto; max-width: none; flex-wrap: wrap; overflow: visible; }
    .accesos-laterales--agencia a { flex: 1 0 5.2rem; }
    .accesos-laterales--agencia .accesos-laterales__texto { white-space: normal; }
}

/* Pie de todas las pantallas. */
.pie { padding: 1.5rem 1rem 2rem; text-align: center; font-size: .8rem; color: var(--color-suave); }
.pagina-simple { flex-direction: column; }
.pagina-simple .pie { padding-bottom: 0; }
@media print { .pie { display: none; } }

/* Tablas de datos (listado de Encomiendas): cada fila en una sola línea, encabezados ordenables, cantidad por página y
   paginador. La pantalla usa más ancho para que entre todo sin desplazamiento horizontal. */
.contenido:has(.tabla--datos) { max-width: 1680px; }
.pestanas--envuelven { flex-wrap: wrap; }
.tabla--datos { width: 100%; font-size: .9rem; }
.tabla--datos th, .tabla--datos td { white-space: nowrap; padding-left: .55rem; padding-right: .55rem; }
.tabla--datos .celda-texto { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
.tabla--datos td .etiqueta { margin-left: .2rem; }
.ordenable a { display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none; }
.ordenable.numero a { justify-content: flex-end; width: 100%; }
.ordenable a:hover { color: var(--color-primario); }
.ordenable a:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; border-radius: 3px; }
.orden-flechas { display: inline-flex; flex-direction: column; gap: 2px; }
.orden-flechas::before, .orden-flechas::after { content: ""; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: .3; }
.orden-flechas::before { border-bottom: 5px solid currentColor; }
.orden-flechas::after { border-top: 5px solid currentColor; }
.orden-flechas--asc::before, .orden-flechas--desc::after { opacity: 1; color: var(--color-primario); }
.tabla-datos__barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin: .75rem 0 .5rem; }
.tabla-datos__cantidad { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .9rem; }
.tabla-datos__cantidad select { padding: .25rem .4rem; border: 1px solid var(--color-borde); border-radius: var(--radio); font: inherit; background: var(--color-superficie); }
.paginador { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .3rem; margin-top: 1rem; font-size: .9rem; }
.paginador a, .paginador span { min-width: 2.1rem; padding: .3rem .6rem; border: 1px solid var(--color-borde); border-radius: var(--radio); text-align: center; text-decoration: none; }
.paginador a { color: var(--color-primario); background: var(--color-superficie); }
.paginador a:hover { background: var(--color-primario-fondo); }
.paginador .paginador__actual { background: var(--color-marca); border-color: var(--color-marca); color: var(--color-sobre-marca); font-weight: 600; }
.paginador .paginador__inactivo { color: var(--color-suave); opacity: .6; }
.paginador .paginador__salto { border: 0; min-width: 0; padding: .3rem .2rem; }
@media (max-width: 1440px) {
    .tabla--datos { font-size: .84rem; }
    .tabla--datos th, .tabla--datos td { padding-left: .38rem; padding-right: .38rem; }
    .tabla--datos .celda-texto { max-width: 11rem; }
    .tabla--datos td .etiqueta { font-size: .74rem; padding: .1rem .4rem; }
}
/* En pantallas angostas las filas pueden ocupar dos líneas (así no hace falta desplazarse de costado). */
@media (max-width: 1100px) {
    .tabla--datos th, .tabla--datos td { white-space: normal; }
    .tabla--datos .celda-texto { max-width: 10rem; }
}

/* Tablas de datos del lado del navegador (tablas.js): mismo diseño que el listado de Encomiendas. */
.tabla--datos-cliente th, .tabla--datos-cliente td { white-space: nowrap; }
.ordenable__boton { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: inherit; }
.ordenable.numero .ordenable__boton { justify-content: flex-end; width: 100%; }
.ordenable__boton:hover { color: var(--color-primario); }
.ordenable__boton:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; border-radius: 3px; }
.tabla-datos__buscar { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .9rem; }
.tabla-datos__buscar input { width: 14rem; max-width: 60vw; padding: .3rem .55rem; border: 1px solid var(--color-borde); border-radius: var(--radio); font: inherit; background: var(--color-superficie); }
.tabla-datos__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-top: .6rem; }
.tabla-datos__pie .paginador { margin-top: 0; }
.tabla-datos__vacia td { text-align: center; color: var(--color-suave); padding: 1rem; }
.paginador button { min-width: 2.1rem; padding: .3rem .6rem; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie); color: var(--color-primario); font: inherit; cursor: pointer; }
.paginador button:hover { background: var(--color-primario-fondo); }
/* Los listados que paginan en el servidor (clientes, localidades, auditoría) con el mismo aspecto de paginador. */
.paginacion { justify-content: flex-end; gap: .3rem; align-items: center; font-size: .9rem; }
.paginacion a, .paginacion span { padding: .3rem .7rem; border: 1px solid var(--color-borde); border-radius: var(--radio); text-decoration: none; }
.paginacion a { color: var(--color-primario); background: var(--color-superficie); }
.paginacion a:hover { background: var(--color-primario-fondo); }
.paginacion span { color: var(--color-suave); }
.contenido:has(.tabla--datos-cliente) { max-width: 1680px; }
.tabla--datos-cliente { font-size: .9rem; }
.tabla--datos-cliente th, .tabla--datos-cliente td { padding-left: .5rem; padding-right: .5rem; }
.tabla--datos-cliente.tabla--apretada th, .tabla--datos-cliente.tabla--apretada td { white-space: normal; }
.tabla--datos-cliente.tabla--apretada td.numero, .tabla--datos-cliente.tabla--apretada td.sin-corte { white-space: nowrap; }
@media (max-width: 1440px) {
    .tabla--datos-cliente { font-size: .84rem; }
    .tabla--datos-cliente th, .tabla--datos-cliente td { padding-left: .38rem; padding-right: .38rem; }
}

/* Ajustes pedidos: todo más compacto (botones, aviso de caja, filtros), paginador al estilo DataTables y datos de las
   tablas centrados. */
.boton { padding: .42rem .8rem; font-size: .92rem; }
.boton--chico { padding: .28rem .6rem; font-size: .84rem; }
.alerta--compacta { display: flex; align-items: center; gap: .5rem; padding: .35rem .75rem; margin-bottom: .6rem; font-size: .85rem; border-left-width: 3px; }
.alerta--compacta .icono { width: 16px; height: 16px; margin-right: 0; }
.alerta--compacta .boton { padding: .18rem .55rem; font-size: .8rem; }
.panel { padding: 1.1rem 1.25rem; }
.filtros { gap: .5rem .75rem; margin-bottom: .75rem; }
.filtros label { font-size: .82rem; }
.filtros input, .filtros select { padding: .32rem .5rem; font-size: .88rem; }
.pestanas { margin-bottom: .6rem; }
.pestanas a { padding-top: .4rem; padding-bottom: .4rem; }

/* Mostrar N registros, fechas y buscar: chicos. */
.tabla-datos__barra { margin: .4rem 0 .35rem; font-size: .8rem; }
.tabla-datos__cantidad, .tabla-datos__buscar, .tabla-datos__fechas label { font-size: .8rem; gap: .3rem; }
.tabla-datos__cantidad select { padding: .12rem .3rem; font-size: .8rem; }
.tabla-datos__buscar input { width: 11rem; padding: .18rem .45rem; font-size: .8rem; }
.tabla-datos__fechas { display: flex; flex-wrap: wrap; gap: .3rem .75rem; }
.tabla-datos__fechas label { display: flex; align-items: center; margin: 0; }
.tabla-datos__fechas input { padding: .12rem .35rem; border: 1px solid var(--color-borde); border-radius: var(--radio); font: inherit; font-size: .8rem; background: var(--color-superficie); }
.tabla-datos__pie { margin-top: .4rem; font-size: .8rem; }

/* Paginador al estilo DataTables: texto chico, sin recuadros salvo la página actual. */
.paginador { gap: .1rem; margin-top: .4rem; font-size: .8rem; }
.paginador a, .paginador span, .paginador button {
    min-width: 1.7rem; padding: .18rem .5rem; border: 1px solid transparent; border-radius: 3px; background: transparent;
    color: var(--color-texto); font: inherit; line-height: 1.4; text-decoration: none; cursor: pointer;
}
.paginador a:hover, .paginador button:hover { border-color: var(--color-borde); background: var(--color-superficie-suave); color: var(--color-texto); }
.paginador .paginador__actual { border-color: var(--color-borde); background: linear-gradient(var(--color-superficie), var(--color-superficie-suave)); color: var(--color-texto); font-weight: 600; cursor: default; }
.paginador .paginador__inactivo { color: var(--color-suave); opacity: .55; cursor: default; }
.paginador .paginador__salto { cursor: default; padding: .18rem .2rem; min-width: 0; }
.paginacion { font-size: .8rem; gap: .1rem; }
.paginacion a, .paginacion span { padding: .18rem .5rem; border-color: transparent; border-radius: 3px; background: transparent; }
.paginacion a:hover { border-color: var(--color-borde); background: var(--color-superficie-suave); }

/* Datos de las tablas centrados (encabezados y celdas), filas más bajas. */
.tabla--datos th, .tabla--datos td, .tabla--datos-cliente th, .tabla--datos-cliente td { text-align: center; padding-top: .38rem; padding-bottom: .38rem; }
.tabla--datos th.numero, .tabla--datos td.numero, .tabla--datos-cliente th.numero, .tabla--datos-cliente td.numero { text-align: center; }
.ordenable a, .ordenable__boton, .ordenable.numero a, .ordenable.numero .ordenable__boton { justify-content: center; width: 100%; }
.tabla[data-servidor] th, .tabla[data-servidor] td { text-align: center; }

/* Columna izquierda y pie más compactos (para que la pantalla no necesite desplazamiento vertical). */
.accesos-laterales { gap: .1rem; padding: .35rem; margin-top: .6rem; }
.accesos-laterales a { padding: .28rem .5rem; font-size: .86rem; gap: .5rem; }
.accesos-laterales__icono { width: 1.7rem; height: 1.7rem; }
.accesos-laterales__icono .icono { width: 16px; height: 16px; }
.contenido { margin-top: .6rem; margin-bottom: .6rem; }
.pie { padding: .5rem 1rem .75rem; font-size: .75rem; }
.panel > h1, .panel .panel__encabezado h1, .encabezado-pagina__titulo { margin: .15rem 0 .45rem; font-size: 1.4rem; }
.panel > p { margin: .3rem 0 .5rem; }
.panel > p.no-imprimir:first-child { margin-top: 0; font-size: .85rem; }
.panel__encabezado { margin-bottom: .35rem; }

/* Nuevo envío: etiquetas a la izquierda de su campo (sin amontonarse), remitente y destinatario en dos tarjetas. */
.cotizador--apilado .formulario--denso.formulario--horizontal .formulario__grilla:not(.persona__campos), .formulario--horizontal .formulario__grilla {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: .45rem 1.75rem;
}
.formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) {
    display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; column-gap: .6rem; row-gap: .1rem;
}
.formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) > label {
    margin: 0; font-size: .84rem; font-weight: 500; color: var(--color-texto); text-align: right; line-height: 1.2;
}
.formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) > :not(label) { grid-column: 2; }
.formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) > :is(input, select):first-of-type { grid-row: 1; }
.formulario--horizontal input, .formulario--horizontal select { padding: .3rem .5rem; font-size: .9rem; }
.formulario--horizontal #bloque-pago-contado, .formulario--horizontal .envio__observaciones { grid-column: 1 / -1; }
.formulario--horizontal #bloque-pago-contado .formulario__fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: .45rem 1.75rem; }
.formulario--horizontal .envio__observaciones { max-width: calc(50% - .9rem); }
.personas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: .75rem 0; }
.tarjeta-persona { border: 1px solid var(--color-borde); border-radius: var(--radio-grande); padding: .75rem 1rem .9rem; background: var(--color-superficie); }
.formulario--denso .tarjeta-persona__titulo, .tarjeta-persona__titulo {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--color-borde);
    font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-primario);
}
.tarjeta-persona__titulo span { text-transform: none; letter-spacing: 0; font-size: .75rem; font-weight: 400; }
.campos-persona { display: flex; flex-direction: column; gap: .45rem; }
.campos-persona input[type=text], .campos-persona select { width: 100%; }
@media (max-width: 900px) {
    .personas { grid-template-columns: 1fr; }
    .formulario--horizontal .envio__observaciones { max-width: none; }
}
@media (max-width: 520px) {
    .formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) { grid-template-columns: 1fr; }
    .formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) > label { text-align: left; }
    .formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) > :not(label) { grid-column: 1; }
}

/* Modo oscuro (botones sol / luna en la barra de arriba; se guarda en el navegador). */
:root[data-tema="oscuro"] {
    color-scheme: dark;
    --color-fondo: #0f141b;
    --color-superficie: #171e28;
    --color-superficie-suave: #1f2833;
    --color-texto: #e5e9f0;
    --color-suave: #9aa5b5;
    --color-borde: #2c3747;
    --color-primario: #4f8df7;
    --color-primario-oscuro: #93bbfb;
    --color-primario-fondo: #1a2a42;
    --color-marca: #2563eb;
    --color-marca-hover: #3b7de8;
    --color-sobre-marca: #fff;
    --color-acento: #4f8df7;
    --color-acento-fondo: #1a2a42;
    --color-exito: #34d399;
    --color-exito-fondo: #10302a;
    --color-error: #f87171;
    --color-error-fondo: #3b1a1d;
    --color-aviso: #fbbf24;
    --color-aviso-fondo: #332810;
    --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .4);
    --sombra-alta: 0 10px 25px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4);
}
:root[data-tema="oscuro"] input, :root[data-tema="oscuro"] select, :root[data-tema="oscuro"] textarea { background-color: var(--color-superficie-suave); color: var(--color-texto); border-color: var(--color-borde); }
:root[data-tema="oscuro"] .alerta--aviso { border-color: #6b5316; border-left-color: #d97706; }
:root[data-tema="oscuro"] .alerta--error { border-color: #6b2a2a; }
:root[data-tema="oscuro"] .alerta--exito { border-color: #1f5c4a; }
:root[data-tema="oscuro"] .logo-vista { background: #fff; }
.tema { display: inline-flex; gap: .15rem; padding: .15rem; margin-left: auto; border: 1px solid var(--color-borde); border-radius: 999px; }
.tema__boton { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--color-suave); cursor: pointer; }
.tema__boton .icono { width: 16px; height: 16px; }
.tema__boton:hover { color: var(--color-texto); background: var(--color-superficie-suave); }
.tema__boton[aria-pressed="true"] { background: var(--color-primario-fondo); color: var(--color-primario); }
.tema__boton:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.barra--agencia .menu-usuario { margin-left: 0; }

/* Barra de arriba fija y columna izquierda de alto completo (sin desplazamiento propio); el pie queda en el área de
   contenido. */
:root { --alto-barra: 3.1rem; }
.barra { position: sticky; top: 0; z-index: 20; }
.barra__fila { min-height: var(--alto-barra); }
@media (min-width: 701px) {
    .marco--con-accesos { grid-template-rows: 1fr auto; min-height: calc(100vh - var(--alto-barra)); }
    .marco--con-accesos > .accesos-laterales {
        grid-row: 1 / span 2; position: sticky; top: var(--alto-barra); align-self: start;
        height: calc(100vh - var(--alto-barra)); max-height: none; overflow: hidden;
        margin: 0; border: 0; border-right: 1px solid var(--color-borde); border-radius: 0; box-shadow: none; padding: .6rem .5rem;
    }
    .marco--con-accesos > .contenido { grid-column: 2; }
    .marco--con-accesos > .pie { grid-column: 2; }
}

/* Nuevo envío más compacto (que entre en la pantalla). */
.formulario--horizontal .formulario__grilla, .cotizador--apilado .formulario--denso.formulario--horizontal .formulario__grilla:not(.persona__campos) { row-gap: .3rem; }
.formulario--horizontal input, .formulario--horizontal select { padding: .2rem .45rem; font-size: .86rem; }
.formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) > label { font-size: .8rem; }
.personas { gap: .75rem; margin: .5rem 0; }
.tarjeta-persona { padding: .45rem .8rem .55rem; }
.formulario--denso .tarjeta-persona__titulo, .tarjeta-persona__titulo { margin-bottom: .4rem; padding-bottom: .25rem; }
.campos-persona { gap: .3rem; }
.tabla--bultos td, .tabla--bultos th { padding-top: .2rem; padding-bottom: .2rem; }
.tabla--bultos input, .tabla--bultos select { padding: .18rem .4rem; }
/* Tarjetas de remitente y destinatario: dos campos por fila (el nombre, a lo ancho). */
.campos-persona { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .9rem; }
.campos-persona > .campo--ancho, .campos-persona > [data-solo-cuit] { grid-column: 1 / -1; }
.formulario--horizontal .campos-persona > div:has(> label:first-child:not(.formulario__check)) { grid-template-columns: 6.6rem minmax(0, 1fr); }
.formulario--horizontal .campos-persona > .campo--ancho:has(> label:first-child) { grid-template-columns: 6.6rem minmax(0, 1fr); }
/* Envío: "Paga con" y la referencia ocupan dos columnas; las observaciones, la tercera. */
.formulario--horizontal #bloque-pago-contado { grid-column: span 2; }
.formulario--horizontal #bloque-pago-contado .formulario__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .3rem; }
.formulario--horizontal .envio__observaciones { grid-column: auto; max-width: none; }
/* Cargos: cada casilla con su importe en la misma línea. */
.formulario--horizontal #opcionales { row-gap: .3rem; }
.formulario--horizontal #opcionales > div:has(> label.formulario__check:first-child) {
    display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: center; column-gap: .6rem;
}
.formulario--horizontal #opcionales > div:has(> label.formulario__check:first-child) > label { margin: 0; font-size: .8rem; line-height: 1.2; }
.formulario--horizontal #opcionales > div:has(> label.formulario__check:first-child) > :not(label) { grid-column: 2; }
/* Resultado del cálculo, más bajo. */
.cotizador--apilado .cotizador__resultado { padding: .45rem 1rem; }
.cotizador--apilado .cotizador__resultado > h2 { font-size: .95rem; margin: 0; }
.cotizador--apilado .cotizador__resultado > p { margin: .1rem 0 0; font-size: .85rem; }
.cierre--abajo .formulario__acciones { margin-top: .4rem; }
@media (max-width: 900px) {
    .campos-persona { grid-template-columns: 1fr; }
    .formulario--horizontal #bloque-pago-contado { grid-column: 1 / -1; }
}
.cotizador--apilado .bloque-carga + .bloque-carga, .personas + .bloque-carga { margin-top: .55rem; }
.personas { margin: .45rem 0 .35rem; }
.formulario--horizontal .campos-persona > div:has(> label:first-child:not(.formulario__check)) { grid-template-columns: 4.6rem minmax(0, 1fr); }
.formulario--horizontal .campos-persona > .campo--ancho:has(> label:first-child) { grid-template-columns: 4.6rem minmax(0, 1fr); }
.panel__encabezado { margin-bottom: .2rem; }
.formulario--horizontal .campos-persona > div:has(> label:first-child:not(.formulario__check)),
.formulario--horizontal .campos-persona > .campo--ancho:has(> label:first-child) { grid-template-columns: 5.6rem minmax(0, 1fr); }
/* Nuevo envío: el recuadro de resultado vacío ("Completá el envío…") no ocupa lugar; aparece al calcular o si falta algo. */
.cotizador--apilado .cotizador__resultado:has(> h2:first-child + p.texto-suave:last-child) { display: none; }
.pie { padding: .3rem 1rem .45rem; }
/* La barra mide su alto más 1px de borde: la columna y el área de contenido lo descuentan. */
@media (min-width: 701px) {
    .marco--con-accesos { min-height: calc(100vh - var(--alto-barra) - 1px); }
    .marco--con-accesos > .accesos-laterales { top: calc(var(--alto-barra) + 1px); height: calc(100vh - var(--alto-barra) - 1px); }
}
.cotizador--apilado > .panel { padding-top: .55rem; padding-bottom: .5rem; }
.alerta--compacta { margin-bottom: .45rem; }
.formulario--horizontal input, .formulario--horizontal select, .tabla--bultos input, .tabla--bultos select { padding-top: .12rem; padding-bottom: .12rem; }
.formulario--horizontal .formulario__grilla, .cotizador--apilado .formulario--denso.formulario--horizontal .formulario__grilla:not(.persona__campos), .campos-persona, .formulario--horizontal #opcionales { row-gap: .22rem; }
.cotizador--apilado .panel__encabezado h1 { font-size: 1.2rem; margin: 0; }
.cierre--abajo .formulario__acciones { margin-top: .25rem; }
:root[data-tema="oscuro"] .etiqueta--info { background: var(--color-primario-fondo); color: var(--color-primario-oscuro); }
:root[data-tema="oscuro"] .etiqueta--suave { background: var(--color-superficie-suave); }

/* Modo oscuro: el recuadro principal de Nuevo envío con los colores del tema (antes, gris claro fijo). */
:root[data-tema="oscuro"] .cotizador--apilado > .panel:not(.cotizador__resultado) { background: var(--color-superficie); border-color: var(--color-borde); }
:root[data-tema="oscuro"] .bloque-carga { background: var(--color-fondo); border-color: var(--color-borde); }
:root[data-tema="oscuro"] .tarjeta-persona { background: var(--color-fondo); }

/* Menú lateral de todo el alto de la pantalla (desde arriba de todo); la barra de arriba queda solo sobre el contenido. */
@media (min-width: 701px) {
    body:has(.marco--con-accesos) { --ancho-lateral: 3.6rem; }
    body:has(.accesos-laterales--agencia) { --ancho-lateral: 13rem; }
    body:has(.marco--con-accesos) .barra { margin-left: var(--ancho-lateral); }
    .marco--con-accesos { display: flex; flex-direction: column; margin-left: var(--ancho-lateral); min-height: calc(100vh - var(--alto-barra) - 1px); }
    .marco--con-accesos > .contenido { flex: 1 0 auto; width: 100%; }
    .marco--con-accesos > .accesos-laterales {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: var(--ancho-lateral); height: 100vh;
        margin: 0; padding: .7rem .45rem; overflow: hidden; border: 0; border-right: 1px solid var(--color-borde); border-radius: 0; box-shadow: none;
        background: var(--color-superficie);
    }
}
@media (min-width: 1200px) {
    body:has(.marco--con-accesos) { --ancho-lateral: 12.5rem; }
    body:has(.accesos-laterales--agencia) { --ancho-lateral: 13rem; }
    .marco--con-accesos > .accesos-laterales { width: var(--ancho-lateral); }
}

/* En pantallas altas los formularios se agrandan (hay lugar); en las bajas (notebook) quedan compactos. */
@media (min-height: 860px) {
    .formulario--horizontal input, .formulario--horizontal select, .tabla--bultos input, .tabla--bultos select { padding: .38rem .6rem; font-size: .95rem; }
    .formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) > label,
    .formulario--horizontal #opcionales > div:has(> label.formulario__check:first-child) > label { font-size: .9rem; }
    .formulario--horizontal .formulario__grilla, .cotizador--apilado .formulario--denso.formulario--horizontal .formulario__grilla:not(.persona__campos),
    .campos-persona, .formulario--horizontal #opcionales { row-gap: .55rem; }
    .personas { gap: 1rem; margin: .8rem 0 .6rem; }
    .tarjeta-persona { padding: .75rem 1.1rem .9rem; }
    .cotizador--apilado .bloque-carga + .bloque-carga, .personas + .bloque-carga { margin-top: .9rem; }
    .tabla--bultos td, .tabla--bultos th { padding-top: .35rem; padding-bottom: .35rem; }
    .cotizador--apilado .panel__encabezado h1 { font-size: 1.4rem; }
    .cotizador--apilado > .panel { padding: .9rem 1.1rem 1rem; }
    .bloque-carga { padding: .7rem .9rem .8rem; }
}
.marco--con-accesos > .pie { align-self: stretch; width: 100%; text-align: center; }

/* Liquidación de agencia: recuadros de comisiones por tipo de operación. */
.recuadros-comision { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.recuadro-comision { width: 100%; border-collapse: collapse; border: 1px solid var(--color-borde); border-radius: var(--radio); font-size: .85rem; }
.recuadro-comision th.recuadro-comision__titulo { padding: .35rem .6rem; font-weight: 600; font-size: .82rem; color: var(--color-primario-oscuro); background: var(--color-primario-fondo); }
.recuadro-comision th, .recuadro-comision td { padding: .28rem .6rem; border-bottom: 1px solid var(--color-borde); text-align: left; }
.recuadro-comision th { color: var(--color-suave); font-weight: 500; font-size: .78rem; }
.recuadro-comision .numero { text-align: right; }
.recuadro-comision tfoot td { font-weight: 600; border-bottom: 0; }

/* Liquidación de agencia: detalle de ventas por tipo de operación. */
.tabla-ventas-liquidacion { font-size: .82rem; }
.tabla-ventas-liquidacion th, .tabla-ventas-liquidacion td { white-space: nowrap; }
.tabla-ventas-liquidacion__grupo th { background: var(--color-primario-fondo); color: var(--color-primario-oscuro); text-align: left; font-size: .82rem; }
.tabla-ventas-liquidacion__total td { font-weight: 600; background: var(--color-superficie-suave); }
.tabla-ventas-liquidacion__final td { font-weight: 700; border-top: 2px solid var(--color-borde); }
.tabla-ventas-liquidacion .derecha { text-align: right; }

/* Nuevo envío: Origen y Destino en dos tarjetas iguales a las de remitente y destinatario, un campo debajo del otro. */
.campos-persona.recorrido__campos { grid-template-columns: minmax(0, 1fr); }
.formulario--horizontal .campos-persona.recorrido__campos > div:has(> label:first-child:not(.formulario__check)) { grid-template-columns: 9rem minmax(0, 1fr); }
.personas.tarjetas-recorrido { margin: 0; }
.personas.tarjetas-recorrido + .bloque-carga { margin-top: .7rem; }
.personas.tarjetas-recorrido + .bloque-carga + .personas { margin: .3rem 0 0; }
.personas.tarjetas-recorrido ~ .cierre { margin-top: .2rem; }
.personas .campos-persona { row-gap: .25rem; }
.personas + .bloque-carga + .bloque-carga, .personas + .bloque-carga:not(:has(+ .personas)) { margin-top: .7rem; }
.personas .tarjeta-persona { padding: .3rem .8rem .4rem; }
.formulario--denso .personas .tarjeta-persona__titulo { margin-bottom: .3rem; padding-bottom: .15rem; }
@media (min-height: 860px) {
    .personas.tarjetas-recorrido { margin-top: .4rem; }
    .formulario--horizontal .campos-persona.recorrido__campos > div:has(> label:first-child:not(.formulario__check)) { grid-template-columns: 11rem minmax(0, 1fr); }
    .personas.tarjetas-recorrido + .bloque-carga { margin-top: 1rem; }
    .personas.tarjetas-recorrido + .bloque-carga + .personas { margin: .8rem 0 .6rem; }
    .personas .tarjeta-persona { padding: .75rem 1.1rem .9rem; }
    .formulario--denso .personas .tarjeta-persona__titulo { margin-bottom: .6rem; padding-bottom: .4rem; }
}

/* ===== Detalle de la encomienda (entrega en el mostrador) compacto: que entre en una pantalla sin desplazarse. ===== */
.detalle-encomienda .encabezado-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .9rem; margin-bottom: .45rem; }
.detalle-encomienda .encabezado-pagina > p { font-size: .85rem; }
.detalle-encomienda .encabezado-pagina > .alerta { flex-basis: 100%; }
.detalle-encomienda .encabezado-pagina__titulo { margin: 0; gap: .4rem .8rem; }
.detalle-encomienda .codigo-seguimiento { font-size: 1.45rem; }
.detalle-encomienda .etiqueta--grande { font-size: .8rem; padding: .15rem .65rem; }
.detalle-encomienda__columnas, .detalle-encomienda__lateral { gap: .5rem; }
.detalle-encomienda .tarjeta-dato .etiqueta { padding: 0 .4rem; font-size: .7rem; }
.detalle-encomienda .panel { padding: .55rem .85rem .6rem; }
.detalle-encomienda .panel > h2 { margin: 0 0 .3rem; font-size: .95rem; }
.detalle-encomienda .tarjetas { gap: .5rem; }
.detalle-encomienda .tarjeta-dato { padding: .5rem .8rem; font-size: .86rem; }
.detalle-encomienda .tarjeta-dato h2 { margin-bottom: .25rem; font-size: .7rem; }
.detalle-encomienda .tarjeta-dato p { margin: .05rem 0; }
.detalle-encomienda .tarjeta-dato__nombre { font-size: .95rem; }
.detalle-encomienda .tarjeta-dato .tarjeta-dato__nota { margin-top: .35rem; padding-top: .35rem; font-size: .82rem; }
.detalle-encomienda .tabla--moderna { font-size: .86rem; }
.detalle-encomienda .tabla--moderna th { padding: .35rem .6rem; }
.detalle-encomienda .tabla--moderna td { padding: .4rem .6rem; }
.detalle-encomienda .tabla--moderna tr.con-codigos td { padding-bottom: .25rem; }
.detalle-encomienda .codigo code { font-size: .76rem; }
.detalle-encomienda .boton-copiar { padding: .15rem; }
.detalle-encomienda .observaciones { margin-top: .5rem; font-size: .88rem; }
.detalle-encomienda .linea-tiempo { margin-top: .3rem; font-size: .86rem; line-height: 1.3; }
.detalle-encomienda .linea-tiempo__hito { padding-bottom: .35rem; }
.detalle-encomienda .linea-tiempo__hito::after { top: .2rem; }
.detalle-encomienda .linea-tiempo__hito::before { top: 1rem; }
.detalle-encomienda .linea-tiempo__encabezado time { font-size: .78rem; }
.detalle-encomienda .linea-tiempo p { font-size: .8rem; line-height: 1.3; }
.detalle-encomienda .linea-tiempo .linea-tiempo__motivo { margin-top: .1rem; padding: .1rem .45rem; font-size: .78rem; line-height: 1.25; }
.detalle-encomienda .desplegable { margin: .3rem 0; }
.detalle-encomienda__entrega p { margin: .1rem 0; font-size: .9rem; }
/* Formulario de entrega. */
.detalle-encomienda .panel-entrega h2 { margin-bottom: .25rem; }
.detalle-encomienda .panel-entrega .formulario { gap: .15rem; }
.detalle-encomienda .panel-entrega label { margin: .25rem 0 .1rem; font-size: .82rem; }
.detalle-encomienda .panel-entrega input, .detalle-encomienda .panel-entrega select { padding: .3rem .5rem; font-size: .88rem; }
.detalle-encomienda .panel-entrega h3 { font-size: .85rem; }
.detalle-encomienda .panel-entrega h3.separado { margin-top: .5rem; padding-top: .45rem; }
.detalle-encomienda .panel-entrega fieldset { margin-top: .3rem; padding: .3rem .6rem .45rem; }
.detalle-encomienda .panel-entrega fieldset legend { font-size: .82rem; }
.detalle-encomienda .panel-entrega .formulario__check { margin-top: .1rem; font-size: .85rem; }
.detalle-encomienda .panel-entrega .formulario__acciones { margin-top: .5rem; }
.detalle-encomienda .panel-entrega .formulario__fila { gap: .1rem .5rem; }
/* Impresión: la principal a la vista; solo la guía y solo las etiquetas, plegadas. */
.detalle-encomienda .acciones-impresion { gap: .45rem; }
.detalle-encomienda .accion-impresion { gap: .35rem; padding: .5rem .6rem; }
.detalle-encomienda .accion-impresion h3 { font-size: .88rem; }
.detalle-encomienda .accion-impresion__opciones { flex-direction: row; gap: .35rem; }
.detalle-encomienda .accion-impresion select { padding: .3rem .4rem; font-size: .82rem; }
.detalle-encomienda .accion-impresion .boton { padding-top: .35rem; padding-bottom: .35rem; }
.detalle-encomienda .accion-impresion p { margin: 0; font-size: .78rem; }
.otras-impresiones > summary { cursor: pointer; color: var(--color-primario); font-size: .85rem; font-weight: 500; }
.otras-impresiones[open] > summary { margin-bottom: .45rem; }
.otras-impresiones > .accion-impresion + .accion-impresion { margin-top: .45rem; }
/* Resumen de costos. */
.detalle-encomienda__costos { grid-area: costos; }
.detalle-encomienda .resumen-costos .tabla { font-size: .86rem; }
.detalle-encomienda .resumen-costos .tabla td, .detalle-encomienda .resumen-costos .tabla th { padding-top: .15rem; padding-bottom: .15rem; }
.detalle-encomienda .resumen-costos .tabla + p, .detalle-encomienda .resumen-costos > p { margin: .2rem 0; font-size: .78rem; }
.detalle-encomienda .tabla--detalle .tabla--detalle__total td { padding: .4rem .6rem; font-size: 1.05rem; }
.detalle-encomienda .resumen-costos__nota { margin-top: .45rem; padding: .35rem .6rem; font-size: .82rem; }
.detalle-encomienda .resumen-costos__nota p { margin: .1rem 0; }

/* Celular: todo en una columna (la entrega y la impresión después de los datos). */
.detalle-encomienda__columnas { grid-template-areas: "datos" "lateral" "costos" "bultos" "historial"; }
/* Tablet y notebook chica: datos a la izquierda y la entrega e impresión a la derecha, sin barra propia. */
@media (min-width: 768px) {
    .detalle-encomienda__columnas { grid-template-rows: auto; grid-template-areas: "datos lateral" "bultos lateral" "costos lateral" "historial lateral"; }
    .detalle-encomienda__lateral { position: static; max-height: none; overflow: visible; }
    .detalle-encomienda__columnas > :last-child:not(.detalle-encomienda__lateral) { margin-bottom: 0; }
    .detalle-encomienda__historial { align-self: start; }
}
/* Pantalla ancha: bultos e historial en el medio, costos al lado y la entrega e impresión a la derecha. */
@media (min-width: 1200px) {
    .detalle-encomienda__columnas {
        grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem) clamp(18rem, 24vw, 22rem);
        grid-template-areas: "datos datos lateral" "bultos costos lateral" "historial costos lateral";
    }
    .detalle-encomienda__costos { align-self: stretch; }
    .detalle-encomienda__historial { align-self: stretch; }
}
.acciones-impresion--plegada > summary { display: flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; }
.acciones-impresion--plegada > summary::-webkit-details-marker { display: none; }
.acciones-impresion--plegada > summary::before { content: "▸"; color: var(--color-primario); }
.acciones-impresion--plegada[open] > summary::before { content: "▾"; }
.acciones-impresion--plegada > summary h2 { margin: 0; }
.acciones-impresion--plegada[open] { gap: .45rem; }
.acciones-impresion--plegada:not([open]) { padding-top: .5rem; padding-bottom: .5rem; }

/* Tablet: con la grilla en una sola columna, el pago ocupa esa columna (no crea una segunda) y sus campos van uno debajo del otro. */
@media (max-width: 900px) {
    .formulario--horizontal #bloque-pago-contado { grid-column: 1 / -1; }
    .formulario--horizontal #bloque-pago-contado .formulario__fila { grid-template-columns: minmax(0, 1fr); }
}
/* Notebook chica: en remitente y destinatario no entra la etiqueta al costado; va arriba y siguen dos campos por fila. */
@media (min-width: 901px) and (max-width: 1180px) {
    .formulario.formulario--horizontal .campos-persona:not(.recorrido__campos) > div:has(> label:first-child:not(.formulario__check)) {
        display: flex; flex-direction: column; align-items: stretch; gap: .1rem;
    }
    .formulario.formulario--horizontal .campos-persona:not(.recorrido__campos) > div:has(> label:first-child:not(.formulario__check)) > label { text-align: left; }
}
/* Celular: en los formularios con etiqueta al costado, la etiqueta va arriba de su campo (le gana a las reglas de escritorio). */
@media (max-width: 520px) {
    .formulario.formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) {
        display: flex; flex-direction: column; align-items: stretch; gap: .1rem;
    }
    .formulario.formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) > label { text-align: left; }
    .formulario--horizontal #bloque-pago-contado { grid-column: auto; }
    .formulario--horizontal #bloque-pago-contado .formulario__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .6rem; }
}

/* Inicio de la agencia sin desplazamiento (pedido de la usuaria): barra, aviso de caja, tarjetas y pie entran en el alto
   de la pantalla; en pantallas bajas las tarjetas se achican. En el celular sigue bajando normal. */
@media (min-width: 601px) {
    .marco:has(> .contenido > .inicio:not(.inicio--con-tablero)) {
        display: flex; flex-direction: column; height: calc(100dvh - var(--alto-barra) - 1px); overflow: hidden; /* 1px: borde de la barra */
    }
    /* Si con muchas tarjetas no entra, se baja dentro del contenido (nunca se corta). */
    .contenido:has(> .inicio:not(.inicio--con-tablero)) { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; overflow-y: auto; }
    .inicio:not(.inicio--con-tablero) { flex: 1; min-height: 0; padding: .5rem 0; }
    .inicio:not(.inicio--con-tablero) .inicio__contexto { margin-bottom: 1.25rem; }
}
@media (min-width: 601px) and (max-height: 700px) {
    .inicio:not(.inicio--con-tablero) .inicio__saludo { font-size: 1.35rem; }
    .inicio:not(.inicio--con-tablero) .inicio__contexto { margin-bottom: .8rem; font-size: .9rem; }
    .inicio:not(.inicio--con-tablero) .accesos { gap: .7rem; }
    .inicio:not(.inicio--con-tablero) .acceso { padding: .85rem .8rem .75rem; gap: .35rem; }
    .inicio:not(.inicio--con-tablero) .acceso__icono { width: 2.6rem; height: 2.6rem; }
    .inicio:not(.inicio--con-tablero) .acceso__icono .icono { width: 22px; height: 22px; }
    .inicio:not(.inicio--con-tablero) .acceso__texto { font-size: 1rem; }
    .inicio:not(.inicio--con-tablero) .acceso__descripcion { font-size: .78rem; }
}
@media (min-width: 601px) and (max-height: 560px) {
    .inicio:not(.inicio--con-tablero) .acceso__descripcion { display: none; }
}

/* ===== Colores de la empresa (superadministrador): opciones, campos y vista previa en modo claro y oscuro. ===== */
.colores__opciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.colores__muestra {
    display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem .4rem .45rem; font: inherit; font-size: .9rem;
    background: var(--color-superficie); color: var(--color-texto); border: 1px solid var(--color-borde); border-radius: 999px; cursor: pointer;
}
.colores__muestra:hover, .colores__muestra:focus-visible { border-color: var(--color-primario); }
.colores__par { display: inline-flex; width: 1.9rem; height: 1.2rem; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.colores__par > span { flex: 1; }
.colores__par > span:first-child { flex: 2; }
.colores__par--logo { align-items: center; justify-content: center; width: 1.2rem; box-shadow: none; color: var(--color-suave); }
.colores__par--logo .icono { width: 16px; height: 16px; }
.colores__campo { display: flex; align-items: center; gap: .4rem; }
.colores__campo input[type="color"] { width: 2.6rem; height: 2.2rem; padding: .1rem; border-radius: var(--radio); cursor: pointer; }
.colores__campo input[type="text"] { width: 6.5rem; font-family: ui-monospace, monospace; text-transform: lowercase; }
.colores__avisos { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.colores__avisos:empty { display: none; }
.colores__vistas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; margin: .75rem 0; }
/* Cada vista tiene sus propios fondos (claro u oscuro) y recibe los tonos de la empresa como variables (colores.js). */
.colores__vista--claro { --color-superficie: #ffffff; --color-fondo: #f8fafc; --color-texto: #1e293b; --color-suave: #64748b; --color-borde: #e2e8f0; }
.colores__vista--oscuro { --color-superficie: #171e28; --color-fondo: #0f141b; --color-texto: #e5e9f0; --color-suave: #9aa5b5; --color-borde: #2c3747; }
.colores__vista { background: var(--color-fondo); color: var(--color-texto); border: 1px solid var(--color-borde); border-radius: var(--radio-grande); overflow: hidden; font-size: .88rem; }
.colores__vista-barra {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .75rem;
    background: var(--color-superficie); border-bottom: 3px solid var(--color-marca);
}
.colores__vista-barra strong { color: var(--color-primario); }
.colores__vista-barra span { color: var(--color-suave); font-size: .78rem; }
.colores__vista-cuerpo { display: grid; gap: .6rem; padding: .75rem; }
.colores__vista-tarjeta { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); }
.colores__vista-icono { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--color-acento-fondo); color: var(--color-acento); }
.colores__vista-icono .icono { width: 18px; height: 18px; }
.colores__vista-enlace { color: var(--color-primario); text-decoration: underline; }
.colores__vista-botones { display: flex; gap: .4rem; }
.colores__vista-boton { padding: .35rem .75rem; border-radius: var(--radio); border: 1px solid var(--color-marca); background: var(--color-marca); color: var(--color-sobre-marca); font-weight: 500; }
.colores__vista-boton--secundario { background: var(--color-superficie); color: var(--color-primario); border-color: var(--color-primario); }
.colores__vista-paginas { display: flex; gap: .25rem; }
.colores__vista-paginas span { min-width: 1.7rem; padding: .15rem .4rem; text-align: center; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie); }
.colores__vista-paginas .colores__vista-actual { background: var(--color-marca); border-color: var(--color-marca); color: var(--color-sobre-marca); font-weight: 600; }

/* ===== Informe de facturación general: resumen arriba, una tarjeta por agencia y un desplegable por forma de cobro. ===== */
.facturacion-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .75rem; margin-top: .75rem; }
.facturacion-resumen > div { display: flex; flex-direction: column; gap: .15rem; padding: .75rem 1rem; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie-suave); }
.facturacion-resumen strong { font-size: 1.15rem; }
.facturacion-resumen__principal { border-left: 4px solid var(--color-marca) !important; }
.facturacion-resumen__principal strong { font-size: 1.5rem; color: var(--color-primario-oscuro); }
.facturacion-resumen span { font-size: .82rem; }
.facturacion-agencia .panel__encabezado h2 { margin: 0; }
.facturacion-grupo { border: 1px solid var(--color-borde); border-radius: var(--radio); margin-top: .6rem; background: var(--color-superficie); }
.facturacion-grupo > summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; padding: .55rem .8rem; cursor: pointer; list-style-position: inside;
}
.facturacion-grupo[open] > summary { border-bottom: 1px solid var(--color-borde); }
.facturacion-grupo__titulo { font-weight: 600; }
.facturacion-grupo__total { margin-left: auto; font-weight: 600; white-space: nowrap; }
.facturacion-grupo--informativo { background: var(--color-superficie-suave); }
.facturacion-grupo--informativo .facturacion-grupo__titulo, .facturacion-grupo--informativo .facturacion-grupo__total { color: var(--color-suave); }
.facturacion-grupo .tabla-desplazable { padding: 0 .4rem .4rem; }
.facturacion-tabla { font-size: .82rem; }
.facturacion-tabla tfoot th, .facturacion-tabla tfoot td { border-top: 2px solid var(--color-borde); }
@media print { .facturacion-grupo > summary { list-style: none; } }
.facturacion-tabla td:first-child, .facturacion-tabla td:nth-child(2) { white-space: nowrap; }
.facturacion-tabla td:nth-child(3) { min-width: 9rem; }

/* Buscador para listas largas (buscador-select.js): campo de texto con las coincidencias debajo. */
.buscador-select { position: relative; }
.buscador-select__campo { width: 100%; }
.buscador-select__lista {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); max-height: 18rem; overflow-y: auto;
    margin: 0; padding: .25rem 0; list-style: none; background: var(--color-superficie); border: 1px solid var(--color-borde);
    border-radius: var(--radio); box-shadow: var(--sombra-alta);
}
.buscador-select__item { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem .7rem; cursor: pointer; }
.buscador-select__item:hover, .buscador-select__item--marcado { background: var(--color-primario-fondo); }
.buscador-select__grupo { color: var(--color-suave); font-size: .85rem; white-space: nowrap; }
.buscador-select__aviso { padding: .4rem .7rem; color: var(--color-suave); font-size: .85rem; }

/* Bloque dentro de un grupo del formulario (ej. "Responsable / encargado" dentro de los datos de la agencia). */
fieldset.subgrupo { margin: .9rem 0; padding: .6rem .9rem .3rem; border: 1px dashed var(--color-borde); border-radius: var(--radio); }
fieldset.subgrupo > legend { font-size: .92rem; font-weight: 600; padding: 0 .3rem; }

/* Alta de agencia: pestañas dentro del mismo formulario (botones en lugar de enlaces). */
.pestanas button {
    padding: .55rem 1rem; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    color: var(--color-suave); font: inherit; cursor: pointer; flex-shrink: 0;
}
.pestanas button.pestanas__actual { color: var(--color-primario); border-bottom-color: var(--color-primario); font-weight: 600; }
.pestanas button.pestanas__error { color: var(--color-error, #b42318); }
.alta-cobertura { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.alta-cobertura li { border: 1px solid var(--color-borde); border-radius: 999px; padding: .15rem .6rem; }
.alta-regla { border-bottom: 1px dashed var(--color-borde); padding: .3rem 0; }
/* La lista original queda oculta detrás del buscador: sin ancho propio (las opciones largas desbordaban la página). */
.buscador-select > select.solo-lector { width: 1px; min-width: 0; max-width: 1px; padding: 0; border: 0; left: 0; top: 0; }
.alta-regla .regla-formulario__frase { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.alta-regla .regla-formulario__frase select { width: auto; max-width: 100%; }
.alta-regla [data-tipo] select { width: auto; display: inline-block; }

/* Nuevo envío: el total y su detalle en una columna a la derecha, fija al bajar (pedido de la usuaria). En pantallas
   angostas sigue debajo del formulario. */
@media (min-width: 1100px) {
    .cotizador--apilado.cotizador--lateral { grid-template-columns: minmax(0, 1fr) 19.5rem; align-items: start; max-width: none; }
    .cotizador--lateral > .cotizador__resultado {
        position: sticky; top: .5rem; max-height: calc(100vh - 1rem); overflow-y: auto; padding: .7rem .85rem;
    }
    .cotizador--lateral .cotizador__resultado:has(> h2:first-child + p.texto-suave:last-child) { display: block; }
    .cotizador--apilado.cotizador--lateral .resultado { display: block; }
    .cotizador--lateral .resultado__resumen h2 { font-size: 1.45rem; margin: 0 0 .25rem; }
    .cotizador--lateral .resultado__detalle { margin-top: .4rem; }
    .cotizador--apilado.cotizador--lateral .resultado__detalle details { margin-top: .4rem; width: auto; }
    .cotizador--lateral .cotizador__resultado > h2 { font-size: 1.05rem; }
    /* Cada concepto en su renglón (ej. "Flete Bulto · 15 kg") con el importe al final; el detalle de la cantidad
       ("× 2 de $ 2.500,00") va abajo, en chico, para que la tabla no sea más ancha que la columna y no se corte el total. */
    .cotizador--lateral .tabla--detalle td:first-child { white-space: normal; overflow-wrap: anywhere; }
    .cotizador--lateral .tabla--detalle td:first-child > .texto-suave { display: block; font-size: .85em; line-height: 1.2; }
    .cotizador--lateral .tabla--detalle td.numero { white-space: nowrap; }
    .cotizador--lateral > .cotizador__resultado { overflow-x: hidden; }
}

/* Columna izquierda con muchas opciones (la central del administrador de la empresa): más compacta y, si igual no
   entra en la pantalla, con desplazamiento propio. */
@media (min-width: 701px) {
    .marco--con-accesos > .accesos-laterales--muchas { overflow-y: auto; scrollbar-width: thin; gap: 0; padding: .35rem .45rem; }
    .accesos-laterales--muchas a { padding-top: .16rem; padding-bottom: .16rem; }
    .accesos-laterales--muchas .accesos-laterales__icono { width: 1.5rem; height: 1.5rem; }
}

/* Lista del buscador más ancha que el campo (los nombres de localidad con su departamento y provincia no se parten en
   varias líneas ni se encima con lo de abajo). */
.buscador-select__lista { right: auto; min-width: 100%; width: max-content; max-width: min(34rem, calc(100vw - 2rem)); overflow-x: hidden; }
.buscador-select__item { white-space: nowrap; }
.buscador-select__item > span:not(.buscador-select__grupo) { overflow: hidden; text-overflow: ellipsis; }

/* Cotizador: origen y destino anchos en la primera fila; valor declarado, contrareembolso y cliente en la segunda. */
.cotizador .formulario__grilla.cotizador__envio { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem .9rem; }
.cotizador__envio > div { grid-column: span 2; min-width: 0; }
.cotizador__envio > .cotizador__localidad { grid-column: span 3; }
@media (max-width: 700px) {
    .cotizador .formulario__grilla.cotizador__envio { grid-template-columns: minmax(0, 1fr); }
    .cotizador__envio > div, .cotizador__envio > .cotizador__localidad { grid-column: auto; }
}

/* Cotizador con más aire (pedido de la usuaria: estaba muy compacto). No toca Nuevo envío (cotizador--apilado). */
.cotizador:not(.cotizador--apilado) > .panel { padding: 1.1rem 1.4rem 1.25rem; }
.cotizador:not(.cotizador--apilado) .panel__encabezado { flex-direction: column; align-items: flex-start; gap: .2rem; margin-bottom: .9rem; }
.cotizador:not(.cotizador--apilado) .panel__encabezado h1 { margin: 0; }
.cotizador:not(.cotizador--apilado) .formulario h2 { margin: 1.1rem 0 .5rem; font-size: .85rem; letter-spacing: .04em; }
.cotizador:not(.cotizador--apilado) .formulario h2:first-of-type { margin-top: 0; }
.cotizador:not(.cotizador--apilado) .formulario--denso label { margin-bottom: .2rem; font-size: .9rem; }
.cotizador:not(.cotizador--apilado) .formulario--denso input:not([type=checkbox]):not([type=radio]),
.cotizador:not(.cotizador--apilado) .formulario--denso select { padding: .45rem .6rem; font-size: .95rem; min-height: 2.3rem; }
.cotizador:not(.cotizador--apilado) .tabla--bultos th { padding-bottom: .3rem; }
.cotizador:not(.cotizador--apilado) .tabla--bultos td { padding-top: .3rem; padding-bottom: .3rem; }
.cotizador:not(.cotizador--apilado) .formulario__acciones { margin-top: 1.1rem; }
/* El resultado del cotizador crece con la página (sin desplazamiento propio: al calcular, la pantalla saltaba y se
   encimaba todo) y es un poco más ancho. */
@media (min-width: 1000px) {
    .cotizador:not(.cotizador--apilado) { grid-template-columns: minmax(0, 1fr) 24rem; }
}
.cotizador:not(.cotizador--apilado) > .cotizador__resultado { position: static; max-height: none; overflow: visible; }
.cotizador:not(.cotizador--apilado) .cotizacion__opciones { grid-template-columns: minmax(0, 1fr); }

/* Nuevo envío con el total a la derecha: en Remitente y Destinatario (no en Origen y Destino) el rótulo va arriba de
   su campo; al costado no entraban y los campos quedaban cortados. Documento | Tipo, Nombre, Teléfono | Domicilio,
   Condición IVA. Selectores con el mismo peso que las reglas de .formulario--horizontal, para ganarles. */
@media (min-width: 1100px) {
    .cotizador--lateral .personas:not(.tarjetas-recorrido) .campos-persona { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .75rem; }
    .cotizador--lateral .formulario--horizontal .personas:not(.tarjetas-recorrido) .campos-persona > div:has(> label:first-child:not(.formulario__check)) {
        grid-template-columns: minmax(0, 1fr); row-gap: .12rem;
    }
    .cotizador--lateral .formulario--horizontal .personas:not(.tarjetas-recorrido) .campos-persona > div:has(> label:first-child:not(.formulario__check)) > label {
        text-align: left; white-space: nowrap;
    }
    .cotizador--lateral .formulario--horizontal .personas:not(.tarjetas-recorrido) .campos-persona > div:has(> label:first-child:not(.formulario__check)) > :not(label) { grid-column: 1; }
    .cotizador--lateral .formulario--horizontal .personas:not(.tarjetas-recorrido) .campos-persona > div:has(> label:first-child:not(.formulario__check)) > :is(input, select):first-of-type { grid-row: auto; }
}
/* Origen y Destino con el total a la derecha: sus dos campos lado a lado, con el rótulo arriba (no se cortan). */
@media (min-width: 1100px) {
    .cotizador--lateral .tarjetas-recorrido .campos-persona { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .75rem; }
    .cotizador--lateral .formulario--horizontal .tarjetas-recorrido .campos-persona > div:has(> label:first-child:not(.formulario__check)) {
        grid-template-columns: minmax(0, 1fr); row-gap: .12rem;
    }
    .cotizador--lateral .formulario--horizontal .tarjetas-recorrido .campos-persona > div:has(> label:first-child:not(.formulario__check)) > label {
        text-align: left; white-space: nowrap;
    }
    .cotizador--lateral .formulario--horizontal .tarjetas-recorrido .campos-persona > div:has(> label:first-child:not(.formulario__check)) > :not(label) { grid-column: 1; }
    .cotizador--lateral .formulario--horizontal .tarjetas-recorrido .campos-persona > div:has(> label:first-child:not(.formulario__check)) > :is(input, select):first-of-type { grid-row: auto; }
}

/* Detalle: Imprimir y Anular debajo de los bultos; el resumen de costos en la columna derecha (más ancha), debajo de la
   entrega, para que los importes no se salgan del recuadro (pedido de la usuaria). */
.detalle-encomienda__acciones { grid-area: acciones; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.detalle-encomienda__columnas { grid-template-areas: "datos" "lateral" "costos" "bultos" "acciones" "historial"; }
@media (min-width: 768px) {
    .detalle-encomienda__columnas { grid-template-areas: "datos lateral" "bultos costos" "acciones costos" "historial costos"; }
    .detalle-encomienda__costos { align-self: start; }
}
@media (min-width: 1200px) {
    .detalle-encomienda__columnas {
        grid-template-columns: minmax(0, 1fr) clamp(20rem, 27vw, 25rem);
        grid-template-areas: "datos lateral" "bultos costos" "acciones costos" "historial costos";
    }
    .detalle-encomienda__costos { align-self: start; }
    .detalle-encomienda__historial { align-self: start; }
}
.detalle-encomienda .resumen-costos .tabla td.numero, .detalle-encomienda .resumen-costos .tabla th.numero { white-space: nowrap; }
.detalle-encomienda .resumen-costos { min-width: 0; overflow-wrap: anywhere; }

/* Nuevo envío: títulos de sección más grandes para ubicarse a simple vista, y el comprobante (tipo y número) en negro
   fuerte (pedido de la usuaria). */
.cotizador--apilado .formulario--denso .tarjeta-persona__titulo,
.cotizador--apilado .formulario--denso .personas .tarjeta-persona__titulo { font-size: 1.02rem; font-weight: 800; letter-spacing: .04em; }
.cotizador--apilado .formulario--denso .bloque-carga > h2,
.cotizador--apilado .formulario--denso .bloque-carga > h2.separado { font-size: 1.02rem; font-weight: 800; line-height: 1.4rem; top: -.85rem; letter-spacing: .04em; }
.cotizador--apilado .bloque-carga { padding-top: .75rem; }
.cotizador--apilado .bloque-carga + .bloque-carga, .cotizador--apilado .personas + .bloque-carga { margin-top: 1rem; }
.cotizador--apilado .comprobante-previsto { color: var(--color-texto); border-color: var(--color-texto); border-width: 2px; }
.cotizador--apilado .comprobante-previsto__tipo,
.cotizador--apilado .comprobante-previsto__numero { font-size: 1.15rem; font-weight: 800; color: var(--color-texto); }

/* Nuevo envío sin desplazamiento en 1366×768 (pedido de la usuaria), con los títulos grandes: más campos por fila. */
@media (min-width: 1100px) {
    /* Remitente y Destinatario: Documento | Tipo | Teléfono, y Nombre (dos lugares) | Domicilio; Condición IVA abajo. */
    .cotizador--lateral .personas:not(.tarjetas-recorrido) .campos-persona { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem .6rem; }
    .cotizador--lateral .personas:not(.tarjetas-recorrido) .campos-persona > .campo--ancho { grid-column: span 2; grid-row: 2; }
    .cotizador--lateral .personas:not(.tarjetas-recorrido) .campos-persona > div:has(#remitente_telefono),
    .cotizador--lateral .personas:not(.tarjetas-recorrido) .campos-persona > div:has(#destinatario_telefono) { grid-row: 1; grid-column: 3; }
    .cotizador--lateral .personas:not(.tarjetas-recorrido) .campos-persona > div:has(#remitente_domicilio) { grid-row: 2; grid-column: 3; }
    .cotizador--lateral .personas:not(.tarjetas-recorrido) .campos-persona > [data-solo-cuit] { grid-column: 1 / -1; grid-row: 3; }
    /* El comprobante en el renglón del título y menos aire entre bloques. */
    .cotizador--lateral .comprobante-previsto { padding: .1rem .6rem; }
    .cotizador--lateral .comprobante-previsto__tipo, .cotizador--lateral .comprobante-previsto__numero { font-size: 1.05rem; }
    .cotizador--lateral .panel__encabezado { flex-wrap: nowrap; gap: .8rem; }
    .cotizador--lateral .bloque-carga { padding-top: .7rem; padding-bottom: .35rem; }
    .cotizador--lateral .bloque-carga + .bloque-carga, .cotizador--lateral .personas + .bloque-carga { margin-top: .85rem; }
    .cotizador--lateral .personas { margin: .5rem 0 .3rem; gap: .6rem; }
    .cotizador--lateral .tarjeta-persona { padding: .35rem .7rem .45rem; }
    .cotizador--lateral .formulario--denso .personas .tarjeta-persona__titulo { margin-bottom: .25rem; padding-bottom: .15rem; }
}

/* Columna izquierda con muchas opciones: sin barra de desplazamiento a la vista (pedido de la usuaria). Si no entra,
   igual se recorre con la rueda del mouse; además va más compacta para que entre en pantallas bajas. */
@media (min-width: 701px) {
    .marco--con-accesos > .accesos-laterales--muchas { scrollbar-width: none; padding-top: .25rem; padding-bottom: .25rem; }
    .marco--con-accesos > .accesos-laterales--muchas::-webkit-scrollbar { display: none; }
    .accesos-laterales--muchas a { padding-top: .1rem; padding-bottom: .1rem; font-size: .84rem; }
    .accesos-laterales--muchas .accesos-laterales__icono { width: 1.35rem; height: 1.35rem; }
}

/* Nueva hoja de ruta sin desplazamiento: los datos en filas de tres; lo que espera despacho, plegado. */
.formulario__grilla.hoja-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 1rem; align-items: end; }
.hoja-campos > [data-propio]:not([hidden]) { display: contents; }
.hoja-campos > .quien-lleva, .hoja-campos > [data-externo] { grid-column: 1 / -1; }
.hoja-campos label { margin-top: 0; }
@media (max-width: 800px) { .formulario__grilla.hoja-campos { grid-template-columns: minmax(0, 1fr); } }
.hoja-esperando > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; }
.hoja-esperando > summary::-webkit-details-marker { display: none; }
.hoja-esperando > summary::before { content: "▸"; color: var(--color-primario); }
.hoja-esperando[open] > summary::before { content: "▾"; }
.hoja-esperando > summary h2 { margin: 0; font-size: 1rem; }
#cargar-al-armar { margin-top: .8rem; }
#cargar-al-armar .tabla { margin-top: .3rem; }
.formulario__grilla.hoja-campos { align-items: start; }
.hoja-campos > div > label, .hoja-campos [data-propio] > div > label { display: block; margin: 0 0 .15rem; }
#cargar-al-armar > [data-pendientes-acciones] { margin: 0; }
/* Nueva hoja de ruta: "← Hojas de ruta" al lado del título. */
.panel:has(> .hoja-campos, form .hoja-campos) > p:first-child { display: inline-block; margin: 0 1rem 0 0; vertical-align: middle; }
.panel:has(form .hoja-campos) > h1 { display: inline-block; margin: 0; vertical-align: middle; }
.panel:has(form .hoja-campos) > h1 + .texto-suave { margin: .3rem 0 .5rem; }

/* Botón principal de carga: gris mientras falta algo obligatorio, verde cuando lo básico está cargado (boton-listo.js). */
.boton.boton--pendiente, .boton.boton--pendiente:hover { background: #9ca3af; border-color: #9ca3af; color: #fff; }
.boton.boton--listo { background: #059669; border-color: #059669; color: #fff; }
.boton.boton--listo:hover { background: #047857; border-color: #047857; }
/* "Volver" que agrega la plantilla en las pantallas que no lo traen. */
.volver-auto { margin: 0 0 .5rem; }

/* Menú lateral comprimido por defecto (solo íconos) y desplegable con ☰ (pedido de la usuaria). En celulares, sin cambios. */
.accesos-laterales__alternar { display: none; }
@media (min-width: 701px) {
    body:has(.accesos-laterales--compacta) { --ancho-lateral: 3.4rem; }
    .accesos-laterales__alternar {
        display: flex; align-items: center; gap: .5rem; width: 100%; margin: 0 0 .3rem; padding: .28rem .5rem; border: 0;
        border-radius: var(--radio); background: none; color: var(--color-texto); font: inherit; font-size: .86rem; cursor: pointer;
    }
    .accesos-laterales__alternar:hover { background: var(--color-superficie-suave); }
    .accesos-laterales__alternar .accesos-laterales__icono { background: var(--color-superficie-suave); }
    /* Comprimido: solo los íconos, centrados; el contador va sobre el ícono. */
    .marco--con-accesos > .accesos-laterales--compacta:not(.accesos-laterales--abierta) { width: var(--ancho-lateral); padding-left: .35rem; padding-right: .35rem; }
    .accesos-laterales--compacta:not(.accesos-laterales--abierta) :is(a, .accesos-laterales__alternar) { justify-content: center; padding-left: .2rem; padding-right: .2rem; position: relative; }
    .accesos-laterales.accesos-laterales--compacta:not(.accesos-laterales--abierta) .accesos-laterales__texto {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .accesos-laterales--compacta:not(.accesos-laterales--abierta) a .contador {
        position: absolute; top: 0; right: .1rem; margin: 0; min-width: 1.05rem; padding: 0 .25rem; font-size: .62rem; line-height: 1.05rem;
    }
    /* Desplegado: con los nombres, por encima del contenido (no lo corre). */
    .marco--con-accesos > .accesos-laterales.accesos-laterales--abierta {
        width: 13.5rem; max-width: 80vw; box-shadow: 4px 0 18px rgba(15, 23, 42, .18); z-index: 40;
    }
    .accesos-laterales--abierta .accesos-laterales__texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
    .marco--con-accesos > .accesos-laterales { transition: width .15s ease; }
}

/* Nuevo envío: títulos de sección en negro (pedido de la usuaria; en modo oscuro, el color del texto). */
.cotizador--apilado .formulario--denso .tarjeta-persona__titulo,
.cotizador--apilado .formulario--denso .personas .tarjeta-persona__titulo,
.cotizador--apilado .formulario--denso .bloque-carga > h2,
.cotizador--apilado .formulario--denso .bloque-carga > h2.separado { color: var(--color-texto); }

/* Programa de impresión directa: cartel de instalación (ingreso y aviso en las pantallas) y aviso de "enviado a la impresora". */
fieldset.sin-borde { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.sin-borde:disabled { opacity: .55; }
.instalar-impresora { background: var(--color-aviso-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio-grande); padding: 1rem 1.1rem; margin-bottom: 1rem; color: var(--color-texto); }
.instalar-impresora ol { padding-left: 1.2rem; margin: .6rem 0; }
.instalar-impresora li { margin: .45rem 0; line-height: 1.45; }
.instalar-impresora--aviso { display: block; }
.instalar-impresora--aviso summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.instalar-impresora--aviso summary .boton { margin-left: auto; }
.instalar-impresora--aviso[open] summary { margin-bottom: .6rem; }
.aviso-impresora { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; background: var(--color-exito); color: #fff; padding: .7rem 1rem; border-radius: var(--radio); box-shadow: var(--sombra-alta); max-width: min(26rem, calc(100vw - 2rem)); font-weight: 600; }
.aviso-impresora--error { background: var(--color-error); }

/* Domicilio de entrega / retiro en la carga (pedido de la usuaria: que se note al elegir envío a domicilio). */
.bloque-domicilio { margin-top: 1rem; padding: .9rem 1rem 1rem; border: 2px solid var(--color-acento); border-left-width: 6px;
    border-radius: var(--radio-grande); background: var(--color-acento-fondo); }
.bloque-domicilio__titulo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .6rem; color: var(--color-acento); }
.bloque-domicilio__titulo svg { width: 1.3em; height: 1.3em; }
.bloque-domicilio__marca { background: var(--color-acento); color: var(--color-sobre-marca); font-size: .72rem; font-weight: 800;
    letter-spacing: .06em; padding: .2rem .55rem; border-radius: 999px; }
.bloque-domicilio--retiro { border-color: var(--color-aviso); background: var(--color-aviso-fondo); }
.bloque-domicilio--retiro .bloque-domicilio__titulo { color: var(--color-aviso); }
.bloque-domicilio--retiro .bloque-domicilio__marca { background: var(--color-aviso); color: #fff; }
.bloque-domicilio--aparece { animation: bloque-domicilio-aparece .9s ease-out; }
@keyframes bloque-domicilio-aparece {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-acento) 55%, transparent); transform: scale(.985); }
    60% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-acento) 0%, transparent); transform: scale(1); }
    100% { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .bloque-domicilio--aparece { animation: none; } }
/* Más fuerte que los títulos compactos del formulario de carga. */
.formulario--denso .bloque-carga .bloque-domicilio { background: color-mix(in srgb, var(--color-acento) 9%, var(--color-superficie)); }
.formulario--denso .bloque-carga .bloque-domicilio--retiro { background: color-mix(in srgb, var(--color-aviso) 10%, var(--color-superficie)); }
.formulario--denso .bloque-carga .bloque-domicilio .bloque-domicilio__titulo { font-size: 1.05rem; font-weight: 800; color: var(--color-acento);
    letter-spacing: .02em; margin: 0 0 .6rem; position: static; padding: 0; background: none; }
.formulario--denso .bloque-carga .bloque-domicilio--retiro .bloque-domicilio__titulo { color: var(--color-aviso); }
.formulario--denso .bloque-carga .bloque-domicilio .bloque-domicilio__titulo::before { content: none; }
/* Programa de impresión: aviso de una línea y bloque corto del ingreso (pedido de la usuaria: solo Descargar). */
.instalar-impresora--linea { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.instalar-impresora--linea #aviso-instalar-impresora-cerrar { margin-left: auto; }
.instalar-impresora--corto { text-align: center; }
.instalar-impresora--corto p { margin: .5rem 0 .2rem; }

/* Inicio de la agencia sin desplazamiento (pedido de la usuaria): espacios verticales más justos; si igual no entra, el
   ajuste automático (data-ajustar-alto) lo achica lo necesario. */
@media (min-width: 1100px) {
    .inicio--con-tablero .inicio__contexto { margin: .2rem 0 1rem; }
    .inicio--con-tablero .acceso { padding-top: .9rem; padding-bottom: .9rem; }
    .inicio--con-tablero .tablero { margin-top: 1rem; }
    .inicio--con-tablero .tablero__bloque { padding: .8rem 1.1rem; }
    .contenido:has(.inicio) { margin-top: .5rem; margin-bottom: .25rem; }
}

/* Carga de encomiendas más legible (pedido de la usuaria: "cuesta leer, está muy claro"): rótulos más grandes y oscuros,
   texto de los campos más grande, textos guía y ayudas más oscuros y bordes de los campos visibles. El alto de los
   campos no cambia (el formulario mantiene su tamaño). */
.cotizador--apilado { --rotulo: 1rem; }
.cotizador--apilado .formulario--denso label,
.cotizador--apilado .formulario--denso .formulario__check--etiqueta { font-size: var(--rotulo); font-weight: 600; color: var(--color-texto); }
.cotizador--apilado .formulario--denso input:not([type=checkbox]):not([type=radio]),
.cotizador--apilado .formulario--denso select {
    font-size: 1.06rem; color: var(--color-texto);
    border-color: color-mix(in srgb, var(--color-texto) 32%, var(--color-superficie));
}
.cotizador--apilado .formulario--denso input:disabled,
.cotizador--apilado .formulario--denso select:disabled { color: var(--color-texto); }
.cotizador--apilado .formulario--denso input::placeholder { color: var(--color-texto); opacity: 1; }
.cotizador--apilado .formulario--denso .tabla--bultos th { font-size: .95rem; font-weight: 600; color: var(--color-texto); }
.cotizador--apilado .formulario--denso .texto-suave { font-size: .88rem; color: var(--color-texto); }
.cotizador--apilado .formulario--denso input[type=checkbox] { width: 1.05rem; height: 1.05rem; }
.cotizador--apilado .formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) > label,
.cotizador--apilado .formulario--horizontal #opcionales > div:has(> label.formulario__check:first-child) > label {
    font-size: .95rem; font-weight: 600; color: var(--color-texto);
}

/* Nuevo envío: todos los campos alineados en la misma columna (pedido de la usuaria). Las casillas de Cargos (domicilio,
   retiro, servicios) usan el mismo ancho de rótulo que "Valor declarado" y "Contrareembolso", y la casilla no se achica
   cuando el texto ocupa dos renglones. */
.cotizador--apilado .formulario--horizontal :is(.formulario__grilla, .formulario__fila) > div:has(> label:first-child:not(.formulario__check)),
.cotizador--apilado .formulario--horizontal #opcionales > div:has(> label.formulario__check:first-child) { grid-template-columns: 11.5rem minmax(0, 1fr); }
.cotizador--apilado .formulario--denso .formulario__check { align-items: center; }
.cotizador--apilado .formulario--denso .formulario__check > input[type=checkbox] { flex-shrink: 0; }
.sin-cortar { white-space: nowrap; }

/* Ficha del cliente: un solo Guardar para todas las partes, siempre a mano abajo de la pantalla. */
.ficha-cliente__acciones { position: sticky; bottom: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    margin-top: 1rem; padding: .7rem 1rem; background: var(--color-superficie);
    border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: 0 -4px 14px rgba(0, 0, 0, .08); }

/* Switch (interruptor): una casilla con forma de llave de encendido. Apagada y deshabilitada = no está configurado.
   Con ".formulario" adelante para ganarle a las reglas generales de los campos (ancho, relleno, borde, alto). */
.formulario input[type=checkbox].interruptor, input.interruptor {
    appearance: none; -webkit-appearance: none; box-sizing: border-box; flex: 0 0 2.1rem; width: 2.1rem; min-width: 2.1rem; height: 1.2rem;
    min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--color-borde); position: relative;
    cursor: pointer; transition: background .15s ease; vertical-align: middle; }
.formulario input.interruptor::before, input.interruptor::before { content: ""; position: absolute; top: .15rem; left: .15rem; width: .9rem;
    height: .9rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.formulario input.interruptor:checked, input.interruptor:checked { background: var(--color-primario); }
.formulario input.interruptor:checked::before, input.interruptor:checked::before { transform: translateX(.9rem); }
.formulario input.interruptor:focus, input.interruptor:focus { outline: none; }
.formulario input.interruptor:focus-visible, input.interruptor:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.formulario input.interruptor:disabled, input.interruptor:disabled { opacity: .45; cursor: not-allowed; }
label:has(> input.interruptor:disabled) { color: var(--color-suave); }

/* Pantalla principal a todo el ancho (pedido de la usuaria): en pantallas anchas las tarjetas se reparten en filas
   parejas (--columnas-accesos, lo calcula la vista) y crecen con la pantalla; "Para atender" y "Números de la agencia"
   ocupan cada uno la mitad. En pantallas chicas sigue como antes. */
@media (min-width: 1100px) {
    .contenido:has(> .inicio) { max-width: none; padding-left: clamp(1rem, 2.5vw, 3rem); padding-right: clamp(1rem, 2.5vw, 3rem); }
    .inicio .accesos { max-width: none; grid-template-columns: repeat(var(--columnas-accesos, 5), minmax(0, 1fr)); gap: clamp(.9rem, 1.3vw, 1.75rem); }
    .inicio .acceso { padding: clamp(1.1rem, 1.7vw, 2.4rem) clamp(.8rem, 1vw, 1.5rem); gap: clamp(.4rem, .5vw, .7rem); }
    .inicio .acceso__icono { width: clamp(3.2rem, 3.8vw, 5rem); height: clamp(3.2rem, 3.8vw, 5rem); }
    .inicio .acceso__icono .icono { width: clamp(26px, 1.9vw, 40px); height: clamp(26px, 1.9vw, 40px); }
    .inicio .acceso__texto { font-size: clamp(1.05rem, 1.15vw, 1.55rem); }
    .inicio .acceso__descripcion { font-size: clamp(.82rem, .8vw, 1.1rem); }
    .inicio__saludo { font-size: clamp(1.6rem, 1.7vw, 2.3rem); }
    .inicio__contexto { font-size: clamp(.95rem, .85vw, 1.15rem); }
    .inicio .tablero { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 1.3vw, 1.75rem); margin-top: clamp(1.25rem, 2vw, 2.5rem); }
    .inicio .tablero__bloque { padding: clamp(1rem, 1.3vw, 1.75rem) clamp(1.25rem, 1.6vw, 2.25rem); }
    .inicio .tablero__bloque h2 { font-size: clamp(1.1rem, 1.1vw, 1.5rem); }
    .inicio .tablero__numeros { font-size: clamp(.95rem, .95vw, 1.3rem); }
    .inicio .tablero__numeros td, .inicio .tablero__numeros th { font-size: inherit; padding-top: clamp(.3rem, .45vw, .6rem); padding-bottom: clamp(.3rem, .45vw, .6rem); }
    .inicio .tablero__nota { font-size: clamp(.8rem, .7vw, .95rem); }
    .inicio .pendiente { font-size: clamp(.9rem, .85vw, 1.15rem); }
}


/* ===== Listado de encomiendas (rediseño UX: bloques delimitados y jerarquía clara) ===== */
.listado__encabezado { align-items: center; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-borde); }
.listado__titulo { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.listado__icono {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem;
    border-radius: .8rem; background: var(--color-primario-fondo); color: var(--color-primario);
}
.listado__icono .icono { width: 22px; height: 22px; }
.listado__titulo h1 { margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; color: var(--color-texto); line-height: 1.15; }
.listado__subtitulo { margin: .15rem 0 0; font-size: .88rem; color: var(--color-suave); }
.listado__acciones { flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.listado__acciones .boton { display: inline-flex; align-items: center; gap: .4rem; }
.listado__principal { box-shadow: 0 2px 6px color-mix(in srgb, var(--color-exito) 35%, transparent); }

/* Pestañas como control segmentado: la actual en blanco con sombra; el número en un globito. */
.pestanas--segmentadas {
    display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; margin: 0 0 .6rem; border: 1px solid var(--color-borde);
    border-radius: .85rem; background: var(--color-superficie-suave); max-width: 100%;
}
.pestanas--segmentadas a {
    display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; margin: 0; border: 0; border-radius: .6rem;
    color: var(--color-suave); font-weight: 500; font-size: .92rem; text-decoration: none; transition: background .12s ease, color .12s ease;
}
.pestanas--segmentadas a:hover { color: var(--color-texto); background: color-mix(in srgb, var(--color-superficie) 70%, transparent); }
.pestanas--segmentadas a.pestanas__actual {
    background: var(--color-superficie); color: var(--color-primario); font-weight: 600; box-shadow: 0 1px 3px rgb(15 23 42 / .12);
}
.pestanas__contador {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem;
    border-radius: 999px; background: var(--color-borde); color: var(--color-suave); font-size: .75rem; font-weight: 700;
}
.pestanas__contador--con { background: var(--color-primario-fondo); color: var(--color-primario); }
.pestanas__actual .pestanas__contador { background: var(--color-primario); color: #fff; }
.listado__ayuda {
    margin: 0 0 1rem; padding: .55rem .85rem; border-left: 3px solid var(--color-primario); border-radius: 0 .5rem .5rem 0;
    background: var(--color-primario-fondo); color: var(--color-texto); font-size: .88rem;
}

/* Filtros en una tarjeta propia: rótulos chicos en mayúscula suave, campos parejos. */
.filtros--tarjeta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); align-items: end; gap: .85rem 1rem;
    padding: 1rem 1.1rem; margin-bottom: 1rem; border: 1px solid var(--color-borde); border-radius: var(--radio-grande);
    background: var(--color-superficie-suave);
}
.filtros--tarjeta > div { min-width: 0; }
.filtros--tarjeta label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-suave); }
.filtros--tarjeta input, .filtros--tarjeta select { width: 100%; min-width: 0; height: 2.4rem; background: var(--color-superficie); }
.filtros--tarjeta .filtros__acciones { display: flex; justify-content: flex-end; gap: .5rem !important; }
.boton--fantasma { background: transparent; border: 1px solid transparent; color: var(--color-suave); }
.boton--fantasma:hover { background: var(--color-superficie); border-color: var(--color-borde); color: var(--color-texto); }

/* Lista vacía: aviso centrado y amable. */
.estado-vacio {
    display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 2.5rem 1rem; margin: .5rem 0 1rem;
    border: 1.5px dashed var(--color-borde); border-radius: var(--radio-grande); text-align: center;
}
.estado-vacio__icono {
    display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin-bottom: .35rem;
    border-radius: 999px; background: var(--color-superficie-suave); color: var(--color-suave);
}
.estado-vacio__icono .icono { width: 26px; height: 26px; }
.estado-vacio__titulo { margin: 0; font-weight: 600; font-size: 1.02rem; color: var(--color-texto); }
.estado-vacio__texto { margin: 0; font-size: .88rem; color: var(--color-suave); }
.estado-vacio__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .5rem 0 0; }
@media (max-width: 700px) {
    .listado__encabezado { align-items: stretch; }
    .pestanas--segmentadas { display: flex; flex-wrap: nowrap; overflow-x: auto; }
    .pestanas--segmentadas a { flex-shrink: 0; }
}
.pestanas__contador--con { background: color-mix(in srgb, var(--color-primario) 16%, var(--color-superficie)); }
@media (min-width: 1100px) {
    .listado .filtros--tarjeta { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; }
}
.filtros--tarjeta .filtros__acciones { align-self: end; }
.filtros--tarjeta .filtros__acciones .boton { height: 2.4rem; display: inline-flex; align-items: center; white-space: nowrap; }
/* Tabla del listado en su propio marco, con encabezado suave y fila resaltada al pasar. */
.listado .tabla--datos { border: 1px solid var(--color-borde); border-radius: var(--radio-grande); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--color-superficie); }
.listado .tabla--datos thead th { background: var(--color-superficie-suave); border-bottom: 1px solid var(--color-borde); padding-top: .65rem; padding-bottom: .65rem; }
.listado .tabla--datos thead th, .listado .tabla--datos thead th a { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-suave); }
.listado .tabla--datos tbody td { padding-top: .7rem; padding-bottom: .7rem; }
.listado .tabla--datos tbody tr:not(:last-child) td { border-bottom: 1px solid var(--color-borde); }
.listado .tabla--datos tbody tr:last-child td { border-bottom: 0; }
.listado .tabla--datos tbody tr:hover td { background: color-mix(in srgb, var(--color-primario) 4%, var(--color-superficie)); }
.listado .tabla-datos__barra { margin-bottom: .6rem; color: var(--color-suave); font-size: .88rem; }
@media (max-width: 700px) {
    .panel__encabezado > .listado__acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; width: 100%; }
    .panel__encabezado > .listado__acciones > .boton { justify-content: center; white-space: normal; text-align: center; line-height: 1.2; min-height: 2.6rem; }
    .panel__encabezado > .listado__acciones > .listado__principal { grid-column: 1 / -1; order: -1; }
    .listado__titulo h1 { font-size: 1.25rem; }
    .listado .filtros--tarjeta { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .85rem; }
    .listado .filtros--tarjeta .filtros__acciones { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .listado .tabla--datos { display: block; max-width: 100%; overflow-x: auto; }
}


/* ===== Celular: menú principal como hamburguesa desplegable (pedido de la usuaria) ===== */
.barra__hamburguesa { display: none; }
@media (max-width: 700px) {
    .barra__hamburguesa {
        display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem;
        border: 1px solid var(--color-borde); border-radius: .7rem; background: var(--color-superficie); color: var(--color-texto); cursor: pointer;
    }
    .barra__hamburguesa .icono { width: 22px; height: 22px; }
    .barra__hamburguesa[aria-expanded="true"] { background: var(--color-primario-fondo); border-color: var(--color-primario); color: var(--color-primario); }

    /* Cerrado no ocupa lugar; abierto es un panel debajo de la barra, con ícono y nombre de cada sección. */
    .marco--con-accesos > .accesos-laterales { display: none; }
    .marco--con-accesos > .accesos-laterales.accesos-laterales--movil-abierta {
        display: flex; flex-direction: column; flex-wrap: nowrap; gap: .15rem; position: fixed; z-index: 60; left: .5rem; right: .5rem;
        top: calc(var(--alto-barra, 3.1rem) + .5rem); width: auto; max-width: none; max-height: calc(100vh - 6.5rem);
        margin: 0; padding: .5rem; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--color-borde); border-radius: var(--radio-grande);
        background: var(--color-superficie); box-shadow: 0 18px 40px rgb(15 23 42 / .22);
    }
    .accesos-laterales--movil-abierta a {
        flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: .75rem; padding: .6rem .7rem; border-radius: .6rem;
        font-size: .98rem; text-align: left;
    }
    .accesos-laterales--movil-abierta .accesos-laterales__icono { width: 2.1rem; height: 2.1rem; }
    .accesos-laterales.accesos-laterales--movil-abierta .accesos-laterales__texto {
        position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    }
    .accesos-laterales--movil-abierta .accesos-laterales__alternar { display: none; }
    .accesos-laterales--movil-abierta a .contador { margin-left: auto; }
    body.menu-movil-abierto::after {
        content: ''; position: fixed; inset: 0; z-index: 50; background: rgb(15 23 42 / .35);
    }
}


/* ===== Nuevo envío: rediseño UX (tarjetas calmas por paso, rótulos arriba, campos parejos, acción principal clara) =====
   Solo presentación: la estructura y el comportamiento del formulario no cambian. */
.cotizador--apilado > .panel:not(.cotizador__resultado):has(.carga) { background: transparent; border: 0; box-shadow: none; padding: 0; }
:root[data-tema="oscuro"] .cotizador--apilado > .panel:not(.cotizador__resultado):has(.carga) { background: transparent; }
.cotizador--apilado > .panel:has(.carga) > .panel__encabezado {
    padding: .2rem .1rem .9rem; margin-bottom: .2rem; align-items: center; gap: 1rem;
}
.cotizador--apilado > .panel:has(.carga) > .panel__encabezado h1 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
.cotizador--apilado .comprobante-previsto {
    border: 1px solid color-mix(in srgb, var(--color-primario) 30%, var(--color-borde)); background: var(--color-primario-fondo);
    color: var(--color-primario-oscuro, var(--color-primario)); border-radius: 999px; padding: .35rem 1rem; box-shadow: none;
}

/* Cada paso en su tarjeta blanca, con aire y borde suave. */
.carga { counter-reset: paso; }
.carga .bloque-carga, .carga .tarjeta-persona {
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 14px;
    box-shadow: 0 1px 2px rgb(15 23 42 / .05); padding: 1rem 1.15rem 1.1rem;
}
.cotizador--apilado .carga .bloque-carga + .bloque-carga, .cotizador--apilado .carga .personas + .bloque-carga,
.cotizador--apilado .carga .bloque-carga + .personas { margin-top: .9rem; }
.cotizador--apilado .carga .personas { gap: .9rem; margin: .9rem 0 0; }

/* Títulos de paso: número en un círculo, sin mayúsculas ni superposición con el borde. */
.cotizador--apilado .carga.formulario--denso .bloque-carga > h2, .cotizador--apilado .carga .tarjeta-persona__titulo {
    position: static; display: flex; align-items: center; gap: .55rem; top: auto; margin: 0 0 .9rem; padding: 0 0 .7rem;
    border: 0; border-bottom: 1px solid var(--color-borde); background: none; line-height: 1.3;
    font-size: 1rem; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--color-texto);
}
.cotizador--apilado .carga.formulario--denso .bloque-carga > h2::before, .cotizador--apilado .carga .tarjeta-persona__titulo::before {
    counter-increment: paso; content: counter(paso);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.6rem; height: 1.6rem; margin: 0;
    border-radius: 999px; background: var(--color-primario-fondo); color: var(--color-primario); font-size: .8rem; font-weight: 700;
}
.cotizador--apilado .carga .tarjeta-persona__titulo .texto-suave { margin-left: auto; font-weight: 500; font-size: .82rem; }

/* Rótulos arriba del campo (nada se corta y todo queda alineado). */
.cotizador--apilado .carga.formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)),
.cotizador--apilado .carga.formulario--horizontal .campos-persona > .campo--ancho:has(> label:first-child) {
    display: flex; flex-direction: column; align-items: stretch; gap: .32rem; grid-template-columns: none;
}
.cotizador--apilado .carga.formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) > label,
.cotizador--apilado .carga.formulario--denso label:not(.formulario__check) {
    text-align: left; font-size: .86rem; font-weight: 600; color: var(--color-texto);
}
.cotizador--apilado .carga.formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) > :not(label) { grid-column: auto; }
.cotizador--apilado .carga .formulario__grilla:not(.persona__campos) { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .85rem 1rem; }
.cotizador--apilado .carga .campos-persona { gap: .8rem 1rem; }

/* Campos parejos, bordes suaves y foco visible. */
.cotizador--apilado .carga.formulario--denso input:not([type=checkbox]):not([type=radio]),
.cotizador--apilado .carga.formulario--denso select {
    height: 2.55rem; padding: .35rem .7rem; border-radius: .6rem; background: var(--color-superficie);
    border: 1px solid color-mix(in srgb, var(--color-texto) 20%, var(--color-superficie)); font-size: 1rem;
}
.cotizador--apilado .carga.formulario--denso input:not([type=checkbox]):not([type=radio]):focus,
.cotizador--apilado .carga.formulario--denso select:focus {
    outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 18%, transparent);
}
.cotizador--apilado .carga.formulario--denso input[readonly] { background: var(--color-superficie-suave); }

/* Cargos: cada opción en su celda, con la casilla y el texto arriba del importe. */
.cotizador--apilado .carga #opcionales { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem 1.25rem; }
.cotizador--apilado .carga.formulario--horizontal #opcionales > div:has(> label.formulario__check:first-child) {
    display: flex; flex-direction: column; align-items: stretch; gap: .35rem; grid-template-columns: none;
}
.cotizador--apilado .carga.formulario--horizontal #opcionales > div:has(> label.formulario__check:first-child) > label { font-size: .9rem; font-weight: 600; }
.cotizador--apilado .carga #opcionales small, .cotizador--apilado .carga #opcionales .texto-suave { font-size: .8rem; }

/* Bultos: encabezado de la tabla en el mismo estilo que los rótulos. */
.cotizador--apilado .carga .tabla--bultos th { font-size: .82rem; font-weight: 600; color: var(--color-texto); }

/* Acciones al pie, siempre a mano: "Generar y guardar" como acción principal. */
.cotizador--apilado .carga .cierre--abajo {
    position: sticky; bottom: 0; z-index: 5; margin: 1rem 0 0; padding: .75rem 0;
    background: linear-gradient(to top, var(--color-fondo) 70%, transparent);
}
.cotizador--apilado .carga .cierre--abajo .formulario__acciones { gap: .6rem; }
.cotizador--apilado .carga .cierre--abajo .boton { padding: .55rem 1.15rem; border-radius: .6rem; }
.cotizador--apilado .carga .cierre--abajo button[value="guardar"] { padding: .6rem 1.6rem; font-weight: 700; box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primario) 30%, transparent); }
/* Ajustes: letra legible (pedido anterior de la usuaria), títulos iguales y menos alto en notebook. */
.cotizador--apilado .carga.formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) > label,
.cotizador--apilado .carga.formulario--denso label:not(.formulario__check) { font-size: .93rem; }
.cotizador--apilado .carga.formulario--denso input:not([type=checkbox]):not([type=radio]),
.cotizador--apilado .carga.formulario--denso select { font-size: 1.04rem; }
.cotizador--apilado .carga.formulario--denso .tabla--bultos th { font-size: .9rem; }
.cotizador--apilado .carga.formulario--horizontal #opcionales > div:has(> label.formulario__check:first-child) > label { font-size: .95rem; }
.cotizador--apilado .carga.formulario--denso .bloque-carga > h2, .cotizador--apilado .carga .tarjeta-persona__titulo,
.cotizador--apilado .carga.formulario--denso .persona__titulo { font-family: inherit; font-weight: 650; font-size: 1.05rem; }
.cotizador--apilado .carga.formulario--denso .bloque-carga > h2, .cotizador--apilado .carga .tarjeta-persona__titulo { margin-bottom: .7rem; padding-bottom: .55rem; }
.carga .bloque-carga, .carga .tarjeta-persona { padding: .85rem 1.1rem .95rem; }
@media (min-width: 1100px) {
    .cotizador--apilado .carga > .bloque-carga:first-of-type .formulario__grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.cotizador--apilado .carga.formulario--denso .personas .tarjeta-persona__titulo,
.cotizador--apilado .carga.formulario--denso .tarjeta-persona__titulo { font-size: 1.05rem; font-weight: 650; letter-spacing: 0; text-transform: none; margin-bottom: .7rem; padding-bottom: .55rem; }
/* Una sola numeración de pasos (la del celular contaba de nuevo cada título). */
.cotizador--apilado .carga .bloque-carga > h2, .cotizador--apilado .carga .tarjeta-persona__titulo,
.cotizador--apilado .carga .persona__titulo { counter-increment: none; }
@media (max-width: 700px) {
    .cotizador--apilado > .panel:has(.carga) > .panel__encabezado > div:first-child { display: flex; align-items: center; gap: .6rem; }
    .cotizador--apilado > .panel:has(.carga) > .panel__encabezado > div:first-child > .boton { width: auto; flex: 0 0 auto; }
    .cotizador--apilado > .panel:has(.carga) > .panel__encabezado h1 { font-size: 1.25rem; }
    .cotizador--apilado .carga .cierre--abajo .formulario__acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .cotizador--apilado .carga .cierre--abajo .formulario__acciones > * { width: 100%; justify-content: center; margin: 0; }
    .cotizador--apilado .carga .cierre--abajo button[value="guardar"] { grid-column: 1 / -1; order: -1; }
}
/* Sin desplazamiento (pedido de la usuaria): la carga compacta, para que entre entera en la pantalla (el ajuste de alto
   la achica lo justo en ventanas bajas). */
.carga .bloque-carga, .carga .tarjeta-persona { padding: .6rem .95rem .7rem; }
.cotizador--apilado .carga .bloque-carga + .bloque-carga, .cotizador--apilado .carga .personas + .bloque-carga,
.cotizador--apilado .carga .bloque-carga + .personas { margin-top: .55rem; }
.cotizador--apilado .carga .personas { gap: .55rem; margin-top: .55rem; }
.cotizador--apilado .carga.formulario--denso .bloque-carga > h2, .cotizador--apilado .carga .tarjeta-persona__titulo,
.cotizador--apilado .carga.formulario--denso .personas .tarjeta-persona__titulo,
.cotizador--apilado .carga.formulario--denso .tarjeta-persona__titulo { margin-bottom: .4rem; padding-bottom: 0; border-bottom: 0; font-size: 1rem; }
.cotizador--apilado .carga.formulario--denso .bloque-carga > h2::before, .cotizador--apilado .carga .tarjeta-persona__titulo::before { width: 1.45rem; height: 1.45rem; font-size: .75rem; }
.cotizador--apilado .carga.formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)),
.cotizador--apilado .carga.formulario--horizontal .campos-persona > .campo--ancho:has(> label:first-child) { gap: .18rem; }
.cotizador--apilado .carga .formulario__grilla:not(.persona__campos), .cotizador--apilado .carga .campos-persona { gap: .5rem .9rem; }
.cotizador--apilado .carga #opcionales { gap: .5rem 1.1rem; }
.cotizador--apilado .carga.formulario--denso input:not([type=checkbox]):not([type=radio]),
.cotizador--apilado .carga.formulario--denso select { height: 2.25rem; padding-top: .2rem; padding-bottom: .2rem; }
.cotizador--apilado .carga .cierre--abajo { margin-top: .5rem; padding: .45rem 0; }
.cotizador--apilado > .panel:has(.carga) > .panel__encabezado { padding-bottom: .5rem; }
/* Lo oculto sigue oculto (las reglas de arriba ponen display: flex en los campos). */
.carga [hidden] { display: none !important; }
/* Cargos en una sola fila en pantallas anchas. */
@media (min-width: 1100px) {
    .cotizador--apilado .carga #opcionales { grid-template-columns: repeat(auto-fit, minmax(8.6rem, 1fr)); gap: .5rem .8rem; }
    .cotizador--apilado .carga.formulario--horizontal #opcionales > div:has(> label.formulario__check:first-child) > label { font-size: .88rem; white-space: nowrap; }
    .cotizador--apilado .carga #opcionales small, .cotizador--apilado .carga #opcionales .texto-suave { font-size: .74rem; line-height: 1.15; }
}
@media (min-width: 1100px) {
    .cotizador--apilado .carga #opcionales { grid-template-columns: repeat(auto-fit, minmax(7.3rem, 1fr)); gap: .4rem .7rem; }
    /* Bultos: "Agregar línea" sube a la altura del título (un renglón menos). */
    .cotizador--apilado .carga .bloque-carga:has(> #bultos) { position: relative; }
    .cotizador--apilado .carga .bloque-carga:has(> #bultos) > p.texto-suave:has(> #agregar-bulto) {
        position: absolute; top: .45rem; right: .95rem; left: auto; margin: 0; display: flex; align-items: center; gap: .5rem; max-width: 70%;
    }
}
/* Acciones al pie más bajas. */
.cotizador--apilado .carga .cierre--abajo { padding: .3rem 0; margin-top: .4rem; }
.cotizador--apilado .carga .cierre--abajo .boton { padding-top: .4rem; padding-bottom: .4rem; }

/* ===== Liquidaciones por agencia: operación → agencia (buscador) → pendientes, pagadas, pagar y cuenta ===== */
.etiqueta--exito { background: color-mix(in srgb, var(--color-exito) 14%, var(--color-superficie)); color: var(--color-exito); }
.liq .derecha { text-align: right; }
.liq .listado__titulo > .boton { flex-shrink: 0; }
.liq__operaciones { margin-bottom: .75rem; }
.liq__buscador { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; }
.liq__buscador input[type=search] {
    flex: 1 1 22rem; min-width: 0; height: 2.75rem; padding: .4rem 1rem; font-size: 1rem; border-radius: .7rem;
    border: 1px solid color-mix(in srgb, var(--color-texto) 20%, var(--color-superficie)); background: var(--color-superficie);
}
.liq__buscador input[type=search]:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 18%, transparent); }
.liq__filtro { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--color-borde); border-radius: .7rem; background: var(--color-superficie-suave); }
.liq__filtro button {
    display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 0; border-radius: .5rem; background: transparent;
    color: var(--color-suave); font: inherit; font-size: .9rem; cursor: pointer;
}
.liq__filtro button span { font-size: .75rem; font-weight: 700; padding: 0 .4rem; border-radius: 999px; background: var(--color-borde); }
.liq__filtro button.activo { background: var(--color-superficie); color: var(--color-primario); font-weight: 600; box-shadow: 0 1px 3px rgb(15 23 42 / .12); }
.liq__filtro button.activo span { background: var(--color-primario); color: #fff; }

.liq__agencias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .75rem; }
.liq__agencias > li[hidden] { display: none; }
.liq-agencia {
    display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: .85rem 1rem; border: 1px solid var(--color-borde);
    border-radius: 12px; background: var(--color-superficie); color: var(--color-texto); text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.liq-agencia:hover, .liq-agencia:focus-visible {
    border-color: var(--color-primario); box-shadow: 0 4px 14px rgb(15 23 42 / .08); transform: translateY(-1px); outline: none;
}
.liq-agencia__cabeza { display: flex; align-items: center; gap: .5rem; }
.liq-agencia__codigo {
    font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--color-primario); background: var(--color-primario-fondo);
    padding: .1rem .5rem; border-radius: .4rem;
}
.liq-agencia__nombre { font-weight: 650; font-size: .98rem; line-height: 1.25; }
.liq-agencia__lugar { font-size: .82rem; color: var(--color-suave); }
.liq-agencia__estado { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.liq-agencia__nada { font-size: .8rem; color: var(--color-suave); }
.liq-agencia__saldo { margin-top: .3rem; font-size: .88rem; font-weight: 650; }
/* Desde la empresa: verde lo que la agencia nos debe (a cobrar); rojo lo que la empresa le debe (a pagar). */
.liq-agencia__saldo--debe { color: var(--color-exito); }
.liq-agencia__saldo--favor { color: var(--color-error); }

.liq__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.liq-cifra {
    display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border: 1px solid var(--color-borde); border-radius: 12px;
    background: var(--color-superficie-suave);
}
.liq-cifra__rotulo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-suave); }
.liq-cifra__valor { font-size: 1.1rem; font-weight: 700; color: var(--color-texto); }
.liq-cifra__detalle { font-size: .82rem; color: var(--color-suave); }
.liq__titulo { display: flex; align-items: baseline; gap: .4rem; margin: 1.25rem 0 .6rem; font-size: 1.05rem; font-weight: 650; }
.liq__titulo .texto-suave { font-size: .85rem; font-weight: 400; }
.liq__vacio { margin: 0; padding: .9rem 1rem; border: 1.5px dashed var(--color-borde); border-radius: 10px; color: var(--color-suave); font-size: .9rem; }
.liq__anuladas { margin-top: 1rem; }
.liq__anuladas summary { cursor: pointer; color: var(--color-suave); font-size: .9rem; }
.liq-liquidar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .7rem 1rem; margin: 0 0 .5rem;
    border-left: 3px solid var(--color-aviso); border-radius: 0 .6rem .6rem 0; background: var(--color-aviso-fondo);
}
.liq-liquidar label { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; margin: 0; }
.liq-liquidar input[type=date] { height: 2.1rem; }
.liq-liquidar .boton { margin-left: auto; }
.liq-cuenta tfoot td { font-weight: 700; }
.liq .tabla td.en-linea { display: table-cell; white-space: nowrap; }
.liq .tabla td.en-linea .boton + .boton { margin-left: .3rem; }
@media (max-width: 700px) {
    .liq__agencias { grid-template-columns: 1fr; }
    .liq-liquidar .boton { margin-left: 0; }
}
.liq-lote .formulario__fila { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.liq-lote .formulario__fila > div { flex: 0 1 20rem; }

/* Módulos en orden alfabético: el destacado en verde es siempre Encomiendas (la tarea principal), no el primero. */
.acceso:first-child .acceso__icono, .accesos-laterales a:first-child .accesos-laterales__icono { background: var(--color-primario-fondo); color: var(--color-primario); }
.acceso[href="/encomiendas"] .acceso__icono, .accesos-laterales a[href="/encomiendas"] .accesos-laterales__icono { background: var(--color-exito-fondo); color: #059669; }

/* Detalle de la encomienda sin desplazamiento (pedido de la usuaria): bloques más compactos y la impresión principal en
   dos renglones (opciones y botón en la misma línea). */
@media (min-width: 1200px) {
    .detalle-encomienda .accion-impresion--destacada {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo nota" "opciones boton"; align-items: center; gap: .4rem .6rem;
    }
    .detalle-encomienda .accion-impresion--destacada > h3 { grid-area: titulo; }
    .detalle-encomienda .accion-impresion--destacada > p { grid-area: nota; text-align: right; }
    .detalle-encomienda .accion-impresion--destacada > .accion-impresion__opciones { grid-area: opciones; min-width: 0; }
    .detalle-encomienda .accion-impresion--destacada > .accion-impresion__opciones select { min-width: 0; flex: 1 1 0; }
    .detalle-encomienda .accion-impresion--destacada > button { grid-area: boton; width: auto; white-space: nowrap; }
    .detalle-encomienda .panel { padding-top: .7rem; padding-bottom: .7rem; }
    .detalle-encomienda .panel > h2 { margin-bottom: .45rem; }
}
/* Los desplegables secundarios ("Imprimir solo…", "Ver los pasos anteriores") van en el renglón del título del bloque. */
@media (min-width: 1200px) {
    .detalle-encomienda section.acciones-impresion, .detalle-encomienda__historial { position: relative; }
    .detalle-encomienda section.acciones-impresion > .otras-impresiones > summary,
    .detalle-encomienda__historial > .linea-tiempo__anteriores > summary { position: absolute; top: .75rem; right: 1rem; margin: 0; }
    .detalle-encomienda section.acciones-impresion > .otras-impresiones[open] { margin-top: .45rem; }
}
.linea-tiempo__anteriores > summary { cursor: pointer; color: var(--color-primario); font-size: .88rem; }
.linea-tiempo__anteriores[open] > .linea-tiempo { margin-top: .4rem; }

/* Liquidación de cuentas corrientes por cliente (mismo diseño que las liquidaciones de agencias). */
.etiqueta--peligro { background: color-mix(in srgb, var(--color-peligro, #dc2626) 12%, var(--color-superficie)); color: var(--color-peligro, #b91c1c); }
.liq-periodo { border-left-color: var(--color-primario); background: var(--color-primario-fondo); margin-bottom: .75rem; }
.liq-periodo .boton { margin-left: 0; }
.liq-factura { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: .75rem; }
.liq-factura > div { flex: 0 1 26rem; }
.liq .anular-factura { display: inline-block; vertical-align: top; text-align: left; }
.liq .anular-factura[open] { display: block; margin-top: .4rem; }

/* ===== Nuevo envío: letra más grande y más oscura sin perder el "entra en la pantalla" (pedido de la usuaria) ===== */
/* Letra: rótulos y campos más grandes y en el color del texto (no grises claros). */
.cotizador--apilado .carga.formulario--denso label:not(.formulario__check),
.cotizador--apilado .carga.formulario--horizontal :is(.formulario__grilla, .formulario__fila, .campos-persona) > div:has(> label:first-child:not(.formulario__check)) > label {
    font-size: .95rem; font-weight: 600; color: var(--color-texto);
}
.cotizador--apilado .carga.formulario--denso input:not([type=checkbox]):not([type=radio]),
.cotizador--apilado .carga.formulario--denso select { font-size: 1.05rem; color: var(--color-texto); }
.cotizador--apilado .carga.formulario--denso input::placeholder { color: var(--color-texto); }
.cotizador--apilado .carga.formulario--denso .bloque-carga > h2, .cotizador--apilado .carga .tarjeta-persona__titulo { font-size: 1.08rem; color: var(--color-texto); }
.cotizador--apilado .carga .texto-suave, .cotizador--apilado .carga small, .cotizador--apilado .carga #opcionales small,
.cotizador--apilado .carga #opcionales .texto-suave { color: var(--color-texto); font-size: .82rem; }
.cotizador--apilado .carga.formulario--horizontal #opcionales > div:has(> label.formulario__check:first-child) > label { font-size: .95rem; color: var(--color-texto); }
.cotizador--apilado .carga .tabla--bultos th { font-size: .9rem; color: var(--color-texto); }
.cotizador--lateral .cotizador__resultado { font-size: 1rem; }
@media (min-width: 1100px) {
    .cotizador--apilado > .panel:has(.carga) > .panel__encabezado { padding: 0 .1rem .35rem; margin-bottom: 0; }
    .cotizador--apilado .carga .bloque-carga + .bloque-carga, .cotizador--apilado .carga .personas + .bloque-carga,
    .cotizador--apilado .carga .bloque-carga + .personas { margin-top: .45rem; }
    .cotizador--apilado .carga .personas { margin-top: .45rem; gap: .45rem; }
    .cotizador--apilado .carga .campos-persona { row-gap: .35rem; }
}
@media (min-width: 1100px) {
    .cotizador--apilado .carga .bloque-carga, .cotizador--apilado .carga .tarjeta-persona { padding-top: .5rem; padding-bottom: .55rem; }
}

/* Acciones de hojas de ruta con color propio (pedido de la usuaria), junto a "Nuevo envío" en verde:
   recibir (lo que llega) en ámbar y armar la hoja de ruta (lo que sale) en índigo. */
.boton.boton--recibir, .boton.boton--despacho { color: #fff; border: 1px solid transparent; display: inline-flex; align-items: center; gap: .4rem; }
.boton.boton--recibir { background: #d97706; box-shadow: 0 2px 6px rgb(217 119 6 / .3); }
.boton.boton--recibir:hover { background: #b45309; color: #fff; }
.boton.boton--despacho { background: #4f46e5; box-shadow: 0 2px 6px rgb(79 70 229 / .3); }
.boton.boton--despacho:hover { background: #4338ca; color: #fff; }
.boton--recibir .contador, .boton--despacho .contador { background: #fff; color: #b45309; }
:root[data-tema="oscuro"] .boton.boton--recibir { background: #b45309; }
:root[data-tema="oscuro"] .boton.boton--despacho { background: #4338ca; }

/* Nuevo envío: cada sección con sombra (pedido de la usuaria), para que se distingan del fondo. */
.carga .bloque-carga, .carga .tarjeta-persona {
    box-shadow: 0 1px 2px rgb(15 23 42 / .06), 0 4px 12px rgb(15 23 42 / .08);
}
:root[data-tema="oscuro"] .carga .bloque-carga, :root[data-tema="oscuro"] .carga .tarjeta-persona { box-shadow: 0 2px 10px rgb(0 0 0 / .35); }
@media (min-width: 1100px) {
    .cotizador--apilado .carga .cierre--abajo { padding: .15rem 0 0; margin-top: .3rem; }
    .cotizador--apilado .carga .cierre--abajo .boton { padding-top: .35rem; padding-bottom: .35rem; }
    .cotizador--apilado .carga #opcionales small, .cotizador--apilado .carga #opcionales .texto-suave { line-height: 1.15; }
}

/* Recorridos: atajos para elegir los días de salida de una vez. */
.dias-atajos { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .5rem; }


/* ===== Nuevo envío: buscador de clientes moderno (pedido de la usuaria) =====
   Siempre a la vista en el encabezado; panel flotante con iniciales, nombre resaltado, documento, teléfono, localidad,
   N° de cliente y si tiene cuenta corriente; el activo resaltado para usar el teclado. */
.buscador-clientes { position: relative; margin: 0; flex: 1 1 22rem; max-width: 34rem; }
.buscador-clientes__caja {
    display: flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .6rem 0 .8rem; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-texto) 18%, var(--color-superficie)); background: var(--color-superficie);
    box-shadow: 0 1px 2px rgb(15 23 42 / .05); transition: border-color .12s ease, box-shadow .12s ease;
}
.buscador-clientes__caja:focus-within { border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 18%, transparent); }
.buscador-clientes__caja > .icono { width: 18px; height: 18px; color: var(--color-suave); flex-shrink: 0; }
.buscador-clientes__caja input, .cotizador--apilado .carga .buscador-clientes__caja input {
    flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; outline: none; font-size: .98rem;
}
.buscador-clientes__caja input::-webkit-search-cancel-button { cursor: pointer; }
.buscador-clientes kbd, .buscador-clientes__atajo {
    font: 600 .7rem/1 inherit; font-family: inherit; color: var(--color-suave); background: var(--color-superficie-suave);
    border: 1px solid var(--color-borde); border-bottom-width: 2px; border-radius: .35rem; padding: .18rem .35rem;
}
.buscador-clientes__atajo { flex-shrink: 0; }
.buscador-clientes__caja:focus-within .buscador-clientes__atajo { display: none; }
.buscador-clientes__panel {
    position: absolute; z-index: 40; top: calc(100% + .4rem); left: 0; width: min(40rem, calc(100vw - 2rem));
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 14px;
    box-shadow: 0 18px 40px rgb(15 23 42 / .18), 0 2px 6px rgb(15 23 42 / .08); overflow: hidden;
}
.buscador-clientes__estado { padding: .5rem .9rem; font-size: .8rem; color: var(--color-suave); border-bottom: 1px solid var(--color-borde); }
.buscador-clientes__estado:empty { display: none; }
.buscador-clientes__lista, .buscador-clientes__panel .buscador-clientes__lista {
    position: static; list-style: none; margin: 0; padding: .3rem; width: auto; max-height: 21rem; overflow-y: auto; border: 0; border-radius: 0;
    box-shadow: none; background: transparent;
}
.buscador-clientes__lista:empty { display: none; }
.buscador-clientes__panel .buscador-clientes__item {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .55rem .6rem;
    border: 0; border-radius: 10px; cursor: pointer;
}
.buscador-clientes__panel .buscador-clientes__item.activo { background: var(--color-primario-fondo); }
.buscador-clientes__avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 999px;
    background: linear-gradient(135deg, var(--color-primario), color-mix(in srgb, var(--color-primario) 60%, #7c3aed)); color: #fff;
    font-weight: 700; font-size: .85rem; letter-spacing: .02em;
}
.buscador-clientes__cuerpo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.buscador-clientes__panel .buscador-clientes__nombre { font-weight: 700; font-size: .98rem; color: var(--color-texto); overflow-wrap: anywhere; }
.buscador-clientes__panel .buscador-clientes__datos { font-size: .84rem; color: var(--color-texto); }
.buscador-clientes__panel mark { background: color-mix(in srgb, #facc15 45%, transparent); color: inherit; border-radius: .2rem; padding: 0 .05rem; }
.buscador-clientes__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .1rem; }
.buscador-clientes__panel .buscador-clientes__numero {
    font-size: .72rem; font-weight: 700; color: var(--color-primario); background: var(--color-primario-fondo); border-radius: 999px; padding: .1rem .5rem;
}
.buscador-clientes__cuenta { font-size: .72rem; font-weight: 700; color: var(--color-exito); background: color-mix(in srgb, var(--color-exito) 12%, var(--color-superficie));
    border-radius: 999px; padding: .1rem .5rem; }
.buscador-clientes__panel .buscador-clientes__acciones { display: flex; gap: .35rem; grid-column: auto; grid-row: auto; }
.buscador-clientes__panel .buscador-clientes__vacio { display: flex; flex-direction: column; gap: .25rem; padding: .9rem; font-size: .9rem; color: var(--color-suave); }
.buscador-clientes__panel .buscador-clientes__vacio strong { color: var(--color-texto); }
.buscador-clientes__pie { padding: .45rem .9rem; font-size: .74rem; color: var(--color-suave); border-top: 1px solid var(--color-borde); background: var(--color-superficie-suave); }
.buscador-clientes__pie kbd { margin: 0 .1rem; }
@media (max-width: 700px) {
    .buscador-clientes, .cotizador--apilado .panel__encabezado .buscador-clientes { flex: 0 0 auto; max-width: none; width: 100%; }
    .buscador-clientes__atajo, .buscador-clientes__pie { display: none; }
    .buscador-clientes__panel .buscador-clientes__item { grid-template-columns: auto minmax(0, 1fr); }
    .buscador-clientes__panel .buscador-clientes__acciones { grid-column: 1 / -1; }
}
@media (min-width: 1100px) { .cotizador--apilado .buscador-clientes__caja { height: 2.2rem; } }

/* Inicio: liquidaciones impagas y hojas de ruta sin recibir (en lugar de los números). */
.tablero__listas { display: grid; gap: 1rem; align-content: start; }
.tablero__listas h2 { display: flex; align-items: center; gap: .45rem; }
.tablero__lista { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.tablero__lista a {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; padding: .5rem .7rem; border: 1px solid var(--color-borde);
    border-radius: 10px; background: var(--color-superficie); color: var(--color-texto); text-decoration: none;
    transition: border-color .12s ease, background .12s ease;
}
.tablero__lista a:hover { border-color: var(--color-primario); background: var(--color-primario-fondo); }
.tablero__lista-titulo { font-weight: 650; font-size: .95rem; }
.tablero__lista-detalle { grid-column: 1; font-size: .82rem; color: var(--color-texto); }
.tablero__lista-importe { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-weight: 650; font-size: .88rem; white-space: nowrap; }
.tablero__lista-importe--debe { color: var(--color-aviso); }
.tablero__lista-importe--favor { color: var(--color-exito); }
.tablero__ver-todo { display: inline-block; margin-top: .45rem; font-size: .88rem; font-weight: 600; }
@media (min-width: 1100px) { .tablero__listas { grid-template-columns: 1fr 1fr; } }

/* Informe de pagos de liquidaciones: cada operación (transferencia, depósito, efectivo) con sus liquidaciones. */
.operacion-pago { margin: 0 0 .85rem; border: 1px solid var(--color-borde); border-radius: 12px; overflow: hidden; background: var(--color-superficie);
    box-shadow: 0 1px 2px rgb(15 23 42 / .05); }
.operacion-pago__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .6rem .9rem; background: var(--color-superficie-suave);
    border-bottom: 1px solid var(--color-borde); }
.operacion-pago__forma { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-primario);
    background: var(--color-primario-fondo); border-radius: 999px; padding: .15rem .55rem; }
.operacion-pago--efectivo .operacion-pago__forma { color: var(--color-aviso); background: var(--color-aviso-fondo); }
.operacion-pago__referencia { font-size: 1rem; }
.operacion-pago__total { margin-left: auto; display: flex; gap: .6rem; font-weight: 700; }
.operacion-pago__debe { color: var(--color-aviso); }
.operacion-pago__favor { color: var(--color-exito); }
.operacion-pago .tabla { margin: 0; }
@media print {
    .solo-pantalla, .barra, .accesos-laterales, .pie { display: none !important; }
    .operacion-pago { break-inside: avoid; box-shadow: none; }
}

.operacion-pago__medio { font-size: .8rem; font-weight: 700; color: var(--color-texto); background: var(--color-superficie); border: 1px solid var(--color-borde);
    border-radius: 999px; padding: .12rem .55rem; }
.alerta--info { background: var(--color-primario-fondo); color: var(--color-texto); border-color: color-mix(in srgb, var(--color-primario) 35%, var(--color-borde)); }
.alerta--info .icono { color: var(--color-primario); }

/* Acción de cuidado como botón con borde rojo (ej. Anular hoja), para no confundirla con la acción principal. */
.boton.boton--peligro-borde { background: var(--color-superficie); color: var(--color-peligro, #b91c1c); border: 1px solid currentColor; box-shadow: none; }
.boton.boton--peligro-borde:hover { background: color-mix(in srgb, var(--color-peligro, #dc2626) 10%, var(--color-superficie)); color: var(--color-peligro, #b91c1c); }


/* ===== Tarjetas del inicio y menú lateral con el color de cada módulo (pedido de la usuaria) ===== */
.accesos .acceso { border-top: 3px solid var(--tono, var(--color-primario)); }
.accesos .acceso .acceso__icono, .accesos .acceso:first-child .acceso__icono, .accesos .acceso[href="/encomiendas"] .acceso__icono {
    background: color-mix(in srgb, var(--tono, var(--color-primario)) 14%, var(--color-superficie)); color: var(--tono, var(--color-primario));
}
.accesos .acceso:hover, .accesos .acceso:focus-visible {
    border-color: var(--tono, var(--color-primario));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--tono, var(--color-primario)) 22%, transparent);
}
.accesos .acceso:hover .acceso__icono { background: var(--tono, var(--color-primario)); color: #fff; }
.accesos-laterales a[style*="--tono"] .accesos-laterales__icono,
.accesos-laterales a[style*="--tono"]:first-child .accesos-laterales__icono,
.accesos-laterales--agencia a[style*="--tono"]:first-child + a .accesos-laterales__icono,
.accesos-laterales a[href="/encomiendas"] .accesos-laterales__icono {
    background: color-mix(in srgb, var(--tono) 14%, var(--color-superficie)); color: var(--tono);
}
.accesos-laterales a.accesos-laterales__actual[style*="--tono"] .accesos-laterales__icono { background: var(--tono); color: #fff; }
:root[data-tema="oscuro"] .accesos .acceso .acceso__icono, :root[data-tema="oscuro"] .accesos-laterales a[style*="--tono"] .accesos-laterales__icono {
    background: color-mix(in srgb, var(--tono, var(--color-primario)) 26%, var(--color-superficie));
}

/* ===== Nuevo envío con color (pedido de la usuaria): cada paso con su tono en el número, una franja a la izquierda,
   el título y el foco de sus campos. Pago ámbar, origen azul, destino verde, remitente índigo, destinatario violeta,
   bultos naranja y cargos rosa. ===== */
.carga .bloque-carga[style*="--tono"], .carga .tarjeta-persona[style*="--tono"] {
    border-left: 4px solid var(--tono);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--tono) 6%, var(--color-superficie)), var(--color-superficie) 3.2rem);
}
.cotizador--apilado .carga.formulario--denso .bloque-carga[style*="--tono"] > h2::before,
.cotizador--apilado .carga .tarjeta-persona[style*="--tono"] .tarjeta-persona__titulo::before { background: var(--tono); color: #fff; }
.cotizador--apilado .carga.formulario--denso .bloque-carga[style*="--tono"] > h2,
.cotizador--apilado .carga .tarjeta-persona[style*="--tono"] .tarjeta-persona__titulo { color: color-mix(in srgb, var(--tono) 75%, var(--color-texto)); }
.cotizador--apilado .carga.formulario--denso [style*="--tono"] input:not([type=checkbox]):not([type=radio]):focus,
.cotizador--apilado .carga.formulario--denso [style*="--tono"] select:focus {
    border-color: var(--tono); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 20%, transparent);
}
.carga .bloque-carga[style*="--tono"] input[type=checkbox]:checked { accent-color: var(--tono); }
:root[data-tema="oscuro"] .carga .bloque-carga[style*="--tono"], :root[data-tema="oscuro"] .carga .tarjeta-persona[style*="--tono"] {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--tono) 14%, var(--color-superficie)), var(--color-superficie) 3.2rem);
}

/* Inicio de una agencia: Encomiendas sola, arriba y al centro, del ancho de una tarjeta de la grilla. */
.accesos.accesos--destacada { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: .9rem; }
.accesos.accesos--destacada > .acceso { width: calc((100% - (var(--columnas-accesos, 5) - 1) * 1rem) / var(--columnas-accesos, 5)); min-width: 14rem; }
@media (max-width: 700px) { .accesos.accesos--destacada > .acceso { width: 100%; } }
/* "Nuevo envío" en el inicio: la acción principal, con el ícono ya pintado. */
.accesos .acceso.acceso--principal { border-color: color-mix(in srgb, var(--tono) 45%, var(--color-borde)); box-shadow: 0 6px 18px color-mix(in srgb, var(--tono) 18%, transparent); }
.accesos .acceso.acceso--principal .acceso__icono { background: var(--tono); color: #fff; }
.accesos .acceso.acceso--principal .acceso__texto { color: var(--tono); font-weight: 700; }

/* Nuevo envío: el número de cada paso es fijo (pedido de la usuaria): a la izquierda 1 Pago, 2 Origen, 3 Remitente;
   a la derecha 4 Destino, 5 Destinatario; después 6 Bultos y 7 Cargos. */
.cotizador--apilado .carga h2[data-paso]::before,
.cotizador--apilado .carga.formulario--denso .bloque-carga > h2[data-paso]::before,
.cotizador--apilado .carga .tarjeta-persona .tarjeta-persona__titulo[data-paso]::before,
.cotizador--apilado .carga .tarjeta-persona[style*="--tono"] .tarjeta-persona__titulo[data-paso]::before,
.cotizador--apilado .carga.formulario--denso .bloque-carga[style*="--tono"] > h2[data-paso]::before { content: attr(data-paso); counter-increment: none; }
/* Pantallas angostas (tarjetas apiladas): el mismo orden que los números, 1 Pago, 2 Origen, 3 Remitente, 4 Destino,
   5 Destinatario, y después el resto. */
@media (max-width: 900px) {
    .cotizador--apilado form.carga { display: flex; flex-direction: column; }
    .cotizador--apilado form.carga > * { order: 20; }
    .cotizador--apilado form.carga > .personas { display: contents; }
    .cotizador--apilado form.carga > .bloque-carga:has(> h2[data-paso="1"]) { order: 1; }
    .cotizador--apilado form.carga .tarjeta-persona:has(> [data-paso="2"]) { order: 2; }
    .cotizador--apilado form.carga .tarjeta-persona:has(> [data-paso="3"]) { order: 3; }
    .cotizador--apilado form.carga .tarjeta-persona:has(> [data-paso="4"]) { order: 4; }
    .cotizador--apilado form.carga .tarjeta-persona:has(> [data-paso="5"]) { order: 5; }
    .cotizador--apilado form.carga .tarjeta-persona { margin-top: .6rem; }
}
/* Campo que la agencia no tiene habilitado (ej. contrareembolso): gris, y al tocarlo avisa. */
.formulario input.campo--no-habilitado { background: var(--color-superficie-suave); color: var(--color-suave); cursor: not-allowed; border-style: dashed; }


/* ===== Comisiones de la agencia: una tabla por caso, el % en cada casillero (pedido de la usuaria) ===== */
.acuerdo-tablas { display: grid; gap: 1rem; }
.acuerdo-tabla h3 { display: flex; align-items: center; gap: .5rem; margin-top: 0; }
.acuerdo-tabla__grilla th[scope="row"] { font-weight: 600; white-space: nowrap; }
.acuerdo-tabla__grilla thead th { white-space: normal; min-width: 7rem; }
.acuerdo-tabla__campo { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.acuerdo-tabla__campo input { width: 5.5rem; text-align: right; }
.acuerdo-tabla__campo input:not(:placeholder-shown) { font-weight: 700; border-color: var(--color-primario); }
.acuerdo-tabla__linea { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.acuerdo-tabla__sub { margin: 1rem 0 .5rem; font-size: 1rem; }
.acuerdo-tabla__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .75rem; }

/* Liquidaciones adeudadas: elegir las agencias antes de generar el PDF. */
.adeudadas__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.adeudadas__cifras > div {
    display: flex; flex-direction: column; gap: .2rem; padding: .7rem .9rem;
    border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie);
}
.adeudadas__cifras span { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-suave); }
.adeudadas__cifras strong { font-size: 1.25rem; }
.adeudadas__barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.adeudadas__buscar {
    flex: 1 1 16rem; max-width: 22rem; padding: .45rem .55rem; font: inherit;
    border: 1px solid var(--color-borde); border-radius: var(--radio);
}
.adeudadas__elegidas { margin-left: auto; font-weight: 600; color: var(--color-suave); }
.adeudadas__casilla { width: 2.5rem; text-align: center; }
.adeudadas__tabla label { cursor: pointer; display: block; }
.adeudadas__tabla tr[hidden] { display: none; }
.adeudadas__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .9rem; }
.adeudadas__acciones p { margin: 0; }

/* Licencias: resumen por estado que también filtra la lista */
.licencias-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; margin: .75rem 0 1rem; }
.licencias-resumen__dato {
    display: flex; flex-direction: column; gap: .1rem; padding: .6rem .8rem; border: 1px solid var(--color-borde);
    border-radius: var(--radio); background: var(--color-fondo); color: inherit; text-decoration: none;
}
.licencias-resumen__dato strong { font-size: 1.5rem; line-height: 1.1; }
.licencias-resumen__dato span { font-size: .85rem; color: var(--color-suave); }
.licencias-resumen__dato:hover { border-color: var(--color-primario); }
.licencias-resumen__dato--actual { border-color: var(--color-primario); box-shadow: inset 0 0 0 1px var(--color-primario); }

/* Barrita de carga arriba al cambiar de pantalla o guardar (se ve que respondió mientras llega la pantalla nueva). */
.barra-carga { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999; background: var(--color-primario); opacity: 0; pointer-events: none; }
.barra-carga--activa { opacity: 1; width: 85%; transition: width 2.5s cubic-bezier(.1, .7, .2, 1), opacity .1s; }
@media (prefers-reduced-motion: reduce) { .barra-carga--activa { transition: none; width: 100%; } }

/* Campanita de notificaciones: lo pendiente agrupado, cada aviso lleva a la pantalla donde se resuelve. */
.campana { position: relative; margin-left: auto; }
.campana ~ .menu-usuario { margin-left: 0; }
.campana summary {
    position: relative; display: flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; list-style: none; cursor: pointer;
    border: 1px solid var(--color-borde); border-radius: 999px; color: var(--color-texto);
}
.campana summary::-webkit-details-marker { display: none; }
.campana summary:hover { background: var(--color-fondo); }
.campana[open] summary { border-color: var(--color-primario); }
.campana__contador { position: absolute; top: -.35rem; right: -.45rem; font-size: .7rem; line-height: 1.15rem; min-width: 1.15rem; padding: 0 .3rem; text-align: center; }
.campana__lista {
    position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; width: min(20rem, calc(100vw - 2rem));
    display: flex; flex-direction: column; padding: .4rem;
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra-alta);
}
.campana__titulo { padding: .35rem .6rem .5rem; font-size: .85rem; border-bottom: 1px solid var(--color-borde); margin-bottom: .25rem; }
.campana__vacia { margin: 0; padding: .6rem; font-size: .9rem; color: var(--color-suave); }
.campana__aviso { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 6px; color: var(--color-texto); text-decoration: none; font-size: .9rem; }
.campana__aviso:hover { background: var(--color-superficie-suave); }
.campana__icono { display: flex; color: var(--color-error); }
.campana--nueva summary { animation: campana-nueva .9s ease-in-out 2; }
@keyframes campana-nueva { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-5deg); } }
@media (prefers-reduced-motion: reduce) { .campana--nueva summary { animation: none; } }

/* Pantallas de carga: ocultas (sin dejar de ocupar su lugar) hasta que terminan de armarse; ver layouts/base.php. */
html.armando [data-ajustar-alto] { visibility: hidden; }
.campana ~ .tema { margin-left: 0; }
.campo-subdominio { display: flex; align-items: center; gap: .35rem; }
.campo-subdominio input { flex: 1; min-width: 0; }

/* Formularios: los textos de ejemplo de los campos vacíos también en negro (pedido de la usuaria). */
input::placeholder, textarea::placeholder { color: var(--color-texto); opacity: 1; }

/* Vista del comprobante en la carga (solo para mirar): la forma del documento, con la letra en su recuadro. */
.comprobante-previsto-caja { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.doc-dialogo { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: var(--radio-grande);
    box-shadow: var(--sombra-alta); background: var(--color-superficie); color: var(--color-texto); }
.doc-dialogo::backdrop { background: rgb(15 23 42 / .45); }
.doc-dialogo__pie { display: flex; justify-content: flex-end; padding: 0 1.2rem 1rem; margin: 0; }
.doc-vista { padding: 1.2rem 1.2rem .6rem; }
.doc-vista__vacio { margin: 1rem 0; }
.doc-vista__encabezado { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; padding-bottom: .7rem; border-bottom: 2px solid var(--color-texto); }
.doc-vista__empresa, .doc-vista__numero { display: flex; flex-direction: column; font-size: .88rem; line-height: 1.35; }
.doc-vista__numero { text-align: right; }
.doc-vista__letra { width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-texto);
    font-size: 2rem; font-weight: 800; border-radius: 4px; }
.doc-vista__datos { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: .8rem 0; font-size: .9rem; }
.doc-vista__datos dt { font-weight: 700; }
.doc-vista__datos dd { margin: 0; }
.doc-vista__iva { margin-top: .4rem; }
.doc-vista__cobrar { margin: .7rem 0 .2rem; font-size: 1.05rem; text-align: right; }
.doc-vista__cobrar strong { font-size: 1.3rem; }
.doc-vista__nota { margin: .4rem 0 0; font-size: .82rem; font-style: italic; }