/* ==========================================================
    Transportes Aguska · sistema visual (rediseño UX/UI)

   Se carga después de base.css. Las clases nuevas no pisan las
   anteriores: los módulos aún no rediseñados siguen usando
   .panel, .boton, .estado, etc. y solo heredan el nuevo marco
   (menú, tipografía y fondo).
   ========================================================== */

:root {
    --primario: #1d4063;
    --primario-hover: #163350;
    --primario-suave: #e9f0f8;
    --primario-borde: #c5d5e8;
    --fondo: #f4f6f9;
    --superficie: #ffffff;
    --superficie-2: #f8fafc;
    --borde: #e2e7ee;
    --borde-fuerte: #cfd6e0;
    --texto: #18222f;
    --texto-2: #475467;
    --texto-3: #5f6b7c;
    --foco: #2f7bd8;

    --exito: #17693f;       --exito-fondo: #e6f4ec;
    --alerta: #8a4b00;      --alerta-fondo: #fdf1dc;
    --peligro: #b42318;     --peligro-fondo: #fdecea;
    --info: #1c5aa6;        --info-fondo: #e7f0fb;
    --morado: #5b3cb0;      --morado-fondo: #efeafb;
    --neutro: #475467;      --neutro-fondo: #eef1f5;

    --radio: 12px;
    --radio-chico: 8px;
    --sombra: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
    --sombra-elevada: 0 10px 24px rgba(16, 24, 40, 0.12);
    --ancho-nav: 252px;
    --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body {
    font-family: var(--fuente);
    font-size: 15px;
    line-height: 1.5;
    background: var(--fondo);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Accesibilidad ---------- */

:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
}

.saltar-contenido {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    background: var(--primario);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radio-chico);
}

.saltar-contenido:focus {
    top: 12px;
}

.solo-lectores {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.icono {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ---------- Marco: menú lateral + contenido ---------- */

.app {
    display: flex;
    min-height: 100vh;
}

.app-nav {
    width: var(--ancho-nav);
    min-width: 0;
    flex-shrink: 0;
    background: var(--superficie);
    border-right: 1px solid var(--borde);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-marca {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 20px 16px;
    text-decoration: none;
    color: var(--texto);
}

.nav-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primario);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.nav-logo-img {
    width: 56px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
}

.nav-marca-texto {
    min-width: 0;
    overflow-wrap: anywhere;
}

.nav-marca strong {
    display: block;
    font-size: 15.5px;
    line-height: 1.2;
}

.nav-marca-texto span {
    display: block;
    font-size: 12.5px;
    color: var(--texto-3);
}

.nav-secciones {
    padding: 4px 12px 16px;
    flex: 1;
    min-width: 0;
}

.app-nav .nav-item {
    min-width: 0;
    max-width: 100%;
}

.app-nav .nav-item > span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.nav-seccion {
    margin-top: 6px;
}

.nav-seccion > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-3);
    cursor: pointer;
    border-radius: 6px;
    user-select: none;
}

.nav-seccion > summary::-webkit-details-marker {
    display: none;
}

.nav-seccion > summary:hover {
    color: var(--texto);
}

.nav-seccion > summary .icono {
    width: 14px;
    height: 14px;
    transition: transform 0.15s;
}

.nav-seccion:not([open]) > summary .icono {
    transform: rotate(-90deg);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 7px 10px;
    margin: 1px 0;
    border-radius: var(--radio-chico);
    color: var(--texto-2);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
}

.nav-subitem {
    min-height: 34px;
    padding-left: 38px;
    margin: 2px 0;
    font-size: 13.5px;
}

.nav-grupo {
    margin: 1px 0 5px;
}

.nav-grupo > summary {
    list-style: none;
    cursor: pointer;
}

.nav-grupo > summary::-webkit-details-marker {
    display: none;
}

.nav-grupo-resumen > .icono:last-child {
    width: 14px;
    height: 14px;
    margin-left: auto;
    transition: transform 0.15s;
}

.nav-grupo:not([open]) > .nav-grupo-resumen > .icono:last-child {
    transform: rotate(-90deg);
}

.nav-grupo > .nav-subitems {
    margin-left: 12px;
    padding-left: 4px;
    border-left: 1px solid var(--borde);
}

.filtros-rapidos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.filtros-rapidos .activo {
    border-color: var(--primario-borde);
    background: var(--primario-suave);
    color: var(--primario);
}

.nav-item:hover {
    background: var(--superficie-2);
    color: var(--texto);
}

.nav-item.activo {
    background: var(--primario-suave);
    color: var(--primario);
    font-weight: 650;
    box-shadow: inset 3px 0 0 var(--primario);
}

.nav-usuario {
    border-top: 1px solid var(--borde);
    padding: 14px 16px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nav-usuario form {
    flex-shrink: 0;
}

.nav-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primario-suave);
    color: var(--primario);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.nav-usuario-datos {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--texto-3);
}

.nav-usuario-datos strong {
    display: block;
    color: var(--texto);
    font-size: 14px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.app-cuerpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-barra {
    display: none;
}

.app-main {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 32px 48px;
}

.nav-fondo {
    display: none;
}

.aviso-revision-global {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 10px 12px;
    margin-bottom: 16px;
    border: 1px solid #e6cf9f;
    border-radius: 4px;
    background: #fff6e6;
    color: #70551e;
    white-space: normal;
    overflow-wrap: anywhere;
}
.aviso-revision-global > span { min-width: 0; }
.aviso-revision-movil { display: none; }
.aviso-revision-global > a { flex-shrink: 0; }

/* ---------- Botones ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: var(--radio-chico);
    border: 1px solid var(--primario);
    background: var(--primario);
    color: #fff;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover {
    background: var(--primario-hover);
    border-color: var(--primario-hover);
}

.btn-sec {
    background: var(--superficie);
    color: var(--texto);
    border-color: var(--borde-fuerte);
}

.btn-sec:hover {
    background: var(--superficie-2);
    border-color: var(--texto-3);
}

.btn-ghost {
    background: transparent;
    color: var(--primario);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--primario-suave);
    border-color: transparent;
}

.btn-peligro {
    background: var(--superficie);
    color: var(--peligro);
    border-color: #f1c4bf;
}

.btn-peligro:hover {
    background: var(--peligro-fondo);
    border-color: var(--peligro);
}

.btn-sm {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 13.5px;
}

.btn-icono {
    min-width: 40px;
    padding: 8px;
}

.btn-sm.btn-icono {
    min-width: 34px;
    padding: 6px;
}

.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---------- Encabezado de página ---------- */

.pagina-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.pagina-cabecera h1 {
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pagina-cabecera p {
    margin-top: 4px;
    color: var(--texto-2);
}

.pagina-miga {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--texto-3);
    text-decoration: none;
    margin-bottom: 6px;
}

.pagina-miga:hover {
    color: var(--primario);
}

.pagina-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.pagina-acciones form {
    display: inline;
}

/* ---------- Tarjetas ---------- */

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.tarjeta-cuerpo {
    padding: 20px 22px;
}

.tarjeta-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--borde);
}

.tarjeta-cabecera h2,
.tarjeta-cabecera h3 {
    font-size: 16px;
    font-weight: 650;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tarjeta-cabecera p {
    font-size: 13.5px;
    color: var(--texto-3);
}

.tarjeta + .tarjeta,
.bloque + .bloque {
    margin-top: 20px;
}

.tarjeta-interna {
    border-left: 4px solid #e0a43a;
}

.privado {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--alerta-fondo);
    color: var(--alerta);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Dashboard ---------- */

.bloque {
    margin-bottom: 28px;
}

.bloque-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 12px;
}

.bloque-titulo h2 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-2);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bloque-titulo a {
    font-size: 14px;
    color: var(--primario);
    font-weight: 600;
    text-decoration: none;
}

.bloque-titulo a:hover {
    text-decoration: underline;
}

.bloque-nota {
    font-size: 13px;
    color: var(--texto-3);
    margin: -6px 0 12px;
}

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    color: var(--texto);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

a.kpi:hover {
    border-color: var(--primario-borde);
    box-shadow: var(--sombra-elevada);
    transform: translateY(-1px);
}

.kpi-etiqueta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--texto-2);
}

.kpi-etiqueta .icono {
    color: var(--primario);
}

.kpi-valor {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.kpi-valor.kpi-monto {
    font-size: 24px;
}

.kpi-detalle {
    font-size: 13px;
    color: var(--texto-3);
}

.kpi-ir {
    position: absolute;
    right: 14px;
    top: 16px;
    color: var(--texto-3);
    opacity: 0;
    transition: opacity 0.15s;
}

a.kpi:hover .kpi-ir,
a.kpi:focus-visible .kpi-ir {
    opacity: 1;
}

.kpi-alerta {
    border-color: #f0d19c;
    background: linear-gradient(0deg, var(--superficie), var(--superficie)) padding-box;
    box-shadow: inset 4px 0 0 #e0a43a, var(--sombra);
}

.kpi-alerta .kpi-etiqueta .icono {
    color: var(--alerta);
}

.kpi-peligro {
    border-color: #f1c4bf;
    box-shadow: inset 4px 0 0 var(--peligro), var(--sombra);
}

.kpi-peligro .kpi-valor,
.kpi-peligro .kpi-etiqueta .icono {
    color: var(--peligro);
}

.recursos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--texto-2);
}

.recursos a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--texto-2);
    text-decoration: none;
    min-height: 32px;
}

.recursos a:hover {
    color: var(--primario);
}

.recursos strong {
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.alertas {
    list-style: none;
}

.alertas > li + li {
    border-top: 1px solid var(--borde);
}

.alerta-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    min-height: 56px;
    color: var(--texto);
    text-decoration: none;
}

a.alerta-fila:hover {
    background: var(--superficie-2);
}

.alerta-icono {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--alerta-fondo);
    color: var(--alerta);
}

.alerta-peligro .alerta-icono {
    background: var(--peligro-fondo);
    color: var(--peligro);
}

.alerta-texto {
    flex: 1;
    min-width: 0;
}

.alerta-texto strong {
    display: block;
    font-weight: 600;
}

.alerta-texto span {
    font-size: 13.5px;
    color: var(--texto-3);
}

.alerta-cantidad {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.alerta-fila > .icono:last-child {
    color: var(--texto-3);
}

.todo-al-dia {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    color: var(--exito);
    font-weight: 600;
}

.rejilla-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.rejilla-2 > .tarjeta + .tarjeta {
    margin-top: 0;
}

.lista-simple {
    list-style: none;
    max-height: 360px;
    overflow-y: auto;
}

.lista-simple li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 11px 22px;
    border-top: 1px solid var(--borde);
    font-size: 14px;
}

.lista-simple li:first-child {
    border-top: none;
}

.lista-simple a {
    color: var(--primario);
    font-weight: 600;
    text-decoration: none;
}

.lista-simple a:hover {
    text-decoration: underline;
}

.vacio {
    padding: 18px 22px;
    color: var(--texto-3);
}

.linea-tiempo {
    list-style: none;
    padding: 6px 22px 12px;
}

.linea-tiempo li {
    position: relative;
    padding: 10px 0 10px 20px;
    border-left: 2px solid var(--borde);
    font-size: 14px;
}

.linea-tiempo li::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 15px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--superficie);
    border: 2px solid var(--primario);
}

.linea-tiempo-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 12px;
}

.linea-tiempo a {
    color: var(--primario);
    font-weight: 600;
    text-decoration: none;
}

.linea-tiempo p {
    margin-top: 2px;
    color: var(--texto-2);
}

.suave {
    color: var(--texto-3);
    font-size: 13.5px;
}

/* ---------- Badges de estado ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--neutro-fondo);
    color: var(--neutro);
}

.badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

.badge-sin-punto::before {
    display: none;
}

.badge-grande {
    font-size: 14px;
    padding: 6px 14px;
}

.badge-exito   { background: var(--exito-fondo);   color: var(--exito); }
.badge-alerta  { background: var(--alerta-fondo);  color: var(--alerta); }
.badge-peligro { background: var(--peligro-fondo); color: var(--peligro); }
.badge-info    { background: var(--info-fondo);    color: var(--info); }
.badge-morado  { background: var(--morado-fondo);  color: var(--morado); }
.badge-neutro  { background: var(--neutro-fondo);  color: var(--neutro); }

/* Estados operacionales del servicio: un color por etapa. */
.badge-estado-solicitud    { background: var(--info-fondo);    color: var(--info); }
.badge-estado-revision     { background: var(--alerta-fondo);  color: var(--alerta); }
.badge-estado-aprobada     { background: #e3f4f4;              color: #106565; }
.badge-estado-asignacion   { background: var(--morado-fondo);  color: var(--morado); }
.badge-estado-en_ejecucion { background: #dfeafe;              color: #1845a0; }
.badge-estado-finalizada   { background: var(--exito-fondo);   color: var(--exito); }
.badge-estado-rechazada    { background: var(--peligro-fondo); color: var(--peligro); }
.badge-estado-cancelada    { background: var(--neutro-fondo);  color: var(--neutro); }

/* ---------- Filtros ---------- */

.barra-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--borde);
}

.barra-filtros .filtro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 180px;
    min-width: 0;
}

.barra-filtros .filtro-busqueda {
    flex: 2 1 260px;
}

.barra-filtros .filtro-fecha-ui {
    flex: 1 1 140px;
}

.barra-filtros label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto-2);
}

.barra-filtros input,
.barra-filtros select,
.form-ui input:not([type="checkbox"]):not([type="radio"]),
.form-ui select,
.form-ui textarea {
    min-height: 40px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: 14.5px;
    padding: 8px 12px;
    width: 100%;
}

.barra-filtros input:focus,
.barra-filtros select:focus,
.form-ui input:focus,
.form-ui select:focus,
.form-ui textarea:focus {
    outline: 3px solid rgba(47, 123, 216, 0.35);
    outline-offset: 0;
    border-color: var(--foco);
}

.filtro-botones {
    display: flex;
    gap: 8px;
}

.campo-busqueda {
    position: relative;
}

.campo-busqueda .icono {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texto-3);
    pointer-events: none;
}

.barra-filtros .campo-busqueda input {
    padding-left: 36px;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 22px 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid var(--borde-fuerte);
    background: var(--superficie);
    color: var(--texto-2);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.chip:hover {
    border-color: var(--primario);
    color: var(--primario);
}

.chip.activo {
    background: var(--primario);
    border-color: var(--primario);
    color: #fff;
}

.chip-cuenta {
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.resumen-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 22px;
    font-size: 13.5px;
    color: var(--texto-3);
}

.boton-filtros {
    display: none !important;
}

.errores-filtro {
    margin: 12px 22px 0;
}

/* ---------- Tablas ---------- */

.tabla-envoltura {
    position: relative;
    overflow-x: auto;
}

/* Ficha de cliente: tablas operativas fluidas, sin scroll horizontal en desktop. */
.cliente-ficha-seccion {
    width: 100%;
    min-width: 0;
    margin-bottom: 18px;
}

.cliente-ficha-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cliente-ficha-cabecera h2 {
    min-width: 0;
}

.cliente-datos-generales {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cliente-tabla-ancha {
    overflow-x: clip;
}

.cliente-tabla-config {
    table-layout: fixed;
    font-size: 14px;
}

.cliente-tabla-config th,
.cliente-tabla-config td {
    padding: 10px 12px;
    overflow-wrap: anywhere;
}

.centros-costo-tabla th:nth-child(1) { width: 42%; }
.centros-costo-tabla th:nth-child(2) { width: 18%; }
.centros-costo-tabla th:nth-child(3) { width: 15%; }
.centros-costo-tabla th:nth-child(4) { width: 25%; }

.contactos-cliente-tabla th:nth-child(1) { width: 18%; }
.contactos-cliente-tabla th:nth-child(2) { width: 11%; }
.contactos-cliente-tabla th:nth-child(3) { width: 17%; }
.contactos-cliente-tabla th:nth-child(4) { width: 16%; }
.contactos-cliente-tabla th:nth-child(5) { width: 12%; }
.contactos-cliente-tabla th:nth-child(6) { width: 10%; }
.contactos-cliente-tabla th:nth-child(7) { width: 16%; }

.cliente-acciones-celda,
.cliente-fila-accion {
    white-space: nowrap;
}

.cliente-acciones-celda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.cliente-fila-accion {
    display: inline-flex;
    margin: 0;
}

.cliente-centros-resumen {
    position: relative;
    width: fit-content;
    max-width: 100%;
}

.cliente-centros-resumen summary {
    cursor: pointer;
    color: var(--enlace, var(--primario));
    font-weight: 650;
    white-space: nowrap;
}

.cliente-centros-detalle {
    position: absolute;
    z-index: 5;
    top: calc(100% + 6px);
    left: 0;
    display: grid;
    gap: 4px;
    min-width: 190px;
    padding: 10px 12px;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 6px;
    box-shadow: var(--sombra-elevada);
}

.solicitud-aguska {
    max-width: 920px;
    margin-right: auto;
    margin-left: auto;
}

.solicitud-aguska .tarjeta-cabecera {
    padding-top: 14px;
    padding-bottom: 10px;
}

.solicitud-aguska .tarjeta-cuerpo {
    padding-top: 14px;
    padding-bottom: 16px;
}

.solicitud-aguska .campo-ayuda,
.solicitud-aguska .solicitud-ayuda {
    margin-top: -8px;
}

.servicio-relevo-nota:not([hidden]),
.taxi-capacidad-aviso:not([hidden]) {
    display: block;
    margin: 0;
    padding: 9px 12px;
    border-radius: var(--radio-chico);
    background: var(--color-info-fondo);
    color: var(--color-texto);
}

.taxi-capacidad-aviso:not([hidden]) {
    background: var(--color-alerta-fondo);
    color: var(--color-alerta);
}

.tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14.5px;
}

.tabla th,
.tabla td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--borde);
}

.tabla th {
    background: var(--superficie-2);
    color: var(--texto-3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tabla th:first-child,
.tabla td:first-child {
    padding-left: 22px;
}

.tabla th:last-child,
.tabla td:last-child {
    padding-right: 22px;
}

.tabla tbody tr:hover td {
    background: #fafbfd;
}

.tabla tbody tr:last-child td {
    border-bottom: none;
}

.tabla .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tabla .celda-acciones {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.tabla .fila-inactiva td {
    color: var(--texto-3);
}

.celda-principal {
    font-weight: 600;
    color: var(--texto);
    text-decoration: none;
}

a.celda-principal:hover {
    color: var(--primario);
    text-decoration: underline;
}

.celda-secundaria {
    display: block;
    font-size: 13px;
    color: var(--texto-3);
    font-weight: 400;
}

.fecha-hora strong {
    display: block;
    font-variant-numeric: tabular-nums;
}

.ruta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
}

.ruta {
    flex-direction: column;
    align-items: flex-start;
}

.ruta-destino {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
}

.ruta-destino .icono {
    margin-top: 3px;
}

.fecha-hora .celda-secundaria {
    white-space: nowrap;
}

.hora {
    font-weight: 600;
    color: var(--texto-2);
}

.fecha-hora strong,
.sin-asignar {
    white-space: nowrap;
}

.ruta .icono {
    width: 15px;
    height: 15px;
    color: var(--texto-3);
}

.sin-asignar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--alerta);
    font-size: 13.5px;
    font-weight: 600;
}

.acciones-fila {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.acciones-fila form {
    display: inline;
}

.tabla-vacia {
    text-align: center;
    padding: 40px 22px !important;
    color: var(--texto-3);
}

/* ---------- Menús desplegables (Más, Exportar) ---------- */

.desplegable {
    position: relative;
    display: inline-block;
}

.desplegable > summary {
    list-style: none;
}

.desplegable > summary::-webkit-details-marker {
    display: none;
}

.desplegable > summary .icono-chevron {
    width: 16px;
    height: 16px;
}

.desplegable-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 220px;
    padding: 6px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    box-shadow: var(--sombra-elevada);
    text-align: left;
}

.desplegable-menu a,
.desplegable-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--texto);
    font: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.desplegable-menu a:hover,
.desplegable-menu button:hover {
    background: var(--superficie-2);
}

.desplegable-menu .peligro {
    color: var(--peligro);
}

.desplegable-menu form {
    display: block;
}

.desplegable-menu hr {
    border: none;
    border-top: 1px solid var(--borde);
    margin: 6px 0;
}

.desplegable-menu .menu-titulo {
    padding: 6px 12px 2px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texto-3);
}

.desplegable-menu small {
    display: block;
    color: var(--texto-3);
    font-size: 12px;
}

/* ---------- Paginación ---------- */

.paginas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--borde);
    font-size: 14px;
    color: var(--texto-3);
}

.paginas-botones {
    display: flex;
    gap: 6px;
}

/* ---------- Detalle ---------- */

.detalle {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.detalle-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.detalle-col > .tarjeta + .tarjeta {
    margin-top: 0;
}

.datos-ui {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px 24px;
}

.datos-ui div {
    min-width: 0;
}

.datos-ui dt {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto-3);
    margin-bottom: 2px;
}

.datos-ui dd {
    word-break: break-word;
}

.datos-ui .completo {
    grid-column: 1 / -1;
}

.viaje-destacado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    border: 1px solid var(--borde);
}

.viaje-destacado span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texto-3);
}

.viaje-destacado strong {
    font-size: 16px;
    word-break: break-word;
}

.viaje-destacado > .icono {
    width: 22px;
    height: 22px;
    color: var(--primario);
}

.texto-libre-ui {
    white-space: normal;
    line-height: 1.55;
    color: var(--texto);
}

.aviso {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radio);
    border: 1px solid #f0d19c;
    background: var(--alerta-fondo);
    color: #5c3500;
    margin-bottom: 20px;
}

.aviso .icono {
    margin-top: 2px;
    color: var(--alerta);
}

.aviso-info {
    border-color: var(--primario-borde);
    background: var(--primario-suave);
    color: var(--primario);
}

.aviso-info .icono {
    color: var(--primario);
}

.aviso textarea {
    margin-top: 10px;
}

.acciones-estado {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 6px;
}

.ayuda {
    font-size: 13px;
    color: var(--texto-3);
    margin-top: 6px;
}

.pie-tarjeta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--borde);
    background: var(--superficie-2);
    border-radius: 0 0 var(--radio) var(--radio);
}

.pie-tarjeta form {
    display: inline;
}

/* ---------- Formularios por secciones ---------- */

.form-ui {
    max-width: 1080px;
}

.form-ui .tarjeta + .tarjeta {
    margin-top: 18px;
}

.form-ui .tarjeta-cabecera {
    align-items: flex-start;
}

.seccion-numero {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primario-suave);
    color: var(--primario);
    font-size: 13px;
    font-weight: 700;
}

.campos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 20px;
}

.campos-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.campos .span-2 {
    grid-column: span 2;
}

.campos .span-3 {
    grid-column: span 3;
}

.campos .span-todo {
    grid-column: 1 / -1;
}

.form-ui .campo label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--texto);
    margin-bottom: 6px;
}

.form-ui .campo-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    align-self: end;
}

.form-ui .campo-checkbox label {
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

.form-ui .campo-checkbox input {
    width: 20px;
    height: 20px;
    accent-color: var(--primario);
    cursor: pointer;
}

.form-ui .campo-ayuda {
    font-size: 12.5px;
    color: var(--texto-3);
    margin-top: 5px;
}

.form-ui .campo-con-error input,
.form-ui .campo-con-error select,
.form-ui .campo-con-error textarea {
    border-color: var(--peligro);
}

.form-ui .campo-errores {
    color: var(--peligro);
}

.form-ui .form-errores {
    border-radius: var(--radio);
    border: 1px solid #f1c4bf;
    margin-bottom: 18px;
}

.form-barra {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 0;
    background: linear-gradient(to top, var(--fondo) 75%, rgba(244, 246, 249, 0));
}

.form-barra .suave {
    margin-left: auto;
}

.nota-seccion {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--texto-2);
}

.nota-seccion .icono {
    color: var(--primario);
    margin-top: 2px;
}

/* ---------- Mensajes ---------- */

.app-main .mensajes {
    margin-bottom: 20px;
}

.app-main .mensaje {
    border-radius: var(--radio-chico);
    border: 1px solid transparent;
    font-size: 14.5px;
}

.app-main .mensaje-success { border-color: #b9e0c9; }
.app-main .mensaje-warning { border-color: #f0d19c; }
.app-main .mensaje-error   { border-color: #f1c4bf; }

/* ---------- Página de impresión / reporte HTML ---------- */

.reporte-impresion {
    background: #fff;
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.reporte-marca {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primario);
}

.reporte-logo {
    display: block;
    max-width: 190px;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.reporte-impresion h1 {
    font-size: 22px;
    margin: 2px 0 6px;
}

.reporte-meta {
    font-size: 13px;
    color: var(--texto-2);
    margin-bottom: 16px;
}

.reporte-impresion .tabla {
    font-size: 12.5px;
    border: 1px solid var(--borde);
}

.reporte-impresion .tabla th,
.reporte-impresion .tabla td {
    padding: 7px 9px;
}

.reporte-impresion .fila-total td {
    font-weight: 700;
    background: var(--superficie-2);
    border-top: 2px solid var(--primario);
}

.reporte-pie {
    margin-top: 16px;
    font-size: 12px;
    color: var(--texto-3);
}

.reporte-barra {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
    .campos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .campos-3 .span-3,
    .campos .span-3 {
        grid-column: 1 / -1;
    }

    .detalle {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1180px) {
    body.nav-abierta {
        position: fixed;
        width: 100%;
        overflow: hidden;
    }
    .app, .app-cuerpo, .app-main {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .app-main { overflow-x: hidden; }
    .app-main > *, .tarjeta, .tarjeta-cuerpo, .tabla-envoltura { min-width: 0; max-width: 100%; }
    .tabla-envoltura { box-sizing: border-box; width: 100%; overflow-x: auto; }
    .app-nav {
        position: fixed;
        z-index: 60;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--sombra-elevada);
        width: min(var(--ancho-nav), calc(100vw - 48px));
        max-width: calc(100vw - 48px);
        height: 100dvh;
        overscroll-behavior: contain;
    }

    .nav-abierta .app-nav {
        transform: none;
    }

    .nav-abierta .nav-fondo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(16, 24, 40, 0.4);
        touch-action: none;
    }

    .app-barra {
        display: flex;
        align-items: center;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 40;
        padding: 10px 16px;
        background: var(--superficie);
        border-bottom: 1px solid var(--borde);
    }

    .app-barra .nav-marca {
        padding: 0;
    }

    .app-main {
        padding: 22px 20px 40px;
    }

    .rejilla-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .aviso-revision-escritorio { display: none; }
    .aviso-revision-movil { display: flex; align-items: center; gap: 8px; flex: 1 1 190px; }
    .aviso-revision-global { font-size: 14px; }
    body {
        font-size: 15.5px;
    }

    .app-main {
        padding: 18px 14px 36px;
    }

    .pagina-cabecera {
        align-items: stretch;
    }

    .pagina-cabecera h1 {
        font-size: 22px;
    }

    .pagina-acciones > .btn,
    .pagina-acciones > .desplegable,
    .pagina-acciones > form {
        flex: 1 1 auto;
    }

    .pagina-acciones > .desplegable > summary {
        width: 100%;
    }

    .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .kpi {
        padding: 14px;
    }

    .kpi-valor {
        font-size: 26px;
    }

    .kpi-valor.kpi-monto {
        font-size: 18px;
    }

    .campos,
    .campos-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .campos .span-2,
    .campos .span-3 {
        grid-column: auto;
    }

    .barra-filtros {
        padding: 14px 16px;
    }

    .barra-filtros .filtro,
    .barra-filtros .filtro-busqueda {
        flex: 1 1 100%;
    }

    .barra-filtros .filtro-fecha-ui {
        flex: 1 1 calc(50% - 6px);
    }

    .filtro-botones {
        flex: 1 1 100%;
    }

    .boton-filtros {
        display: inline-flex !important;
    }

    .js .barra-filtros:not(.abierta) .filtro:not(.filtro-busqueda) {
        display: none;
    }


    .filtro-botones .btn {
        flex: 1;
    }

    .chips {
        padding: 12px 16px 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .chip {
        flex-shrink: 0;
    }

    .viaje-destacado {
        grid-template-columns: minmax(0, 1fr);
    }

    .viaje-destacado > .icono {
        transform: rotate(90deg);
    }

    .tarjeta-cuerpo,
    .tarjeta-cabecera,
    .resumen-lista,
    .paginas,
    .pie-tarjeta,
    .alerta-fila,
    .lista-simple li {
        padding-left: 16px;
        padding-right: 16px;
    }

    .desplegable-menu {
        min-width: 200px;
    }

}

@media (max-width: 980px) {
    /* Tablas → tarjetas apiladas (una tarjeta por fila). */
    .tabla-cards thead {
        display: none;
    }

    .tabla-cards,
    .tabla-cards tbody,
    .tabla-cards tr,
    .tabla-cards td {
        display: block;
        width: 100%;
    }

    .tabla-cards tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--borde);
    }

    .tabla-cards tbody tr:last-child {
        border-bottom: none;
    }

    .tabla-cards tbody tr:hover td {
        background: none;
    }

    .tabla-cards td,
    .tabla-cards td:first-child,
    .tabla-cards td:last-child {
        border: none;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-right: 0;
    }

    .tabla-cards td.celda-titulo,
    .tabla-cards td.celda-acciones {
        padding-left: 0;
    }

    .tabla-cards td[data-label]:not(.celda-titulo) {
        position: relative;
        padding-left: 104px;
        min-height: 26px;
    }

    .tabla-cards td[data-label]:not(.celda-titulo)::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 4px;
        width: 96px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--texto-3);
    }

    .tabla-cards td.celda-titulo {
        font-size: 16px;
        padding-bottom: 6px;
    }

    .tabla-cards .num {
        text-align: left;
    }

    .tabla-cards .celda-acciones {
        width: 100%;
        text-align: left;
        padding-top: 10px;
    }

    .tabla-cards .acciones-fila {
        display: flex;
        flex-wrap: wrap;
    }

    .tabla-cards .acciones-fila .btn {
        flex: 1 1 auto;
        min-height: 40px;
    }

    .tabla-cards .desplegable-menu {
        right: auto;
        left: 0;
    }

    .tabla-cards .tabla-vacia {
        text-align: center;
    }
}

@media (min-width: 981px) {
    .cliente-ficha-seccion .cliente-tabla-ancha {
        overflow-x: clip;
    }
}

@media (max-width: 980px) {
    .cliente-datos-generales {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cliente-tabla-config thead {
        display: none;
    }

    .cliente-tabla-config,
    .cliente-tabla-config tbody,
    .cliente-tabla-config tr,
    .cliente-tabla-config td {
        display: block;
        width: 100%;
    }

    .cliente-tabla-config tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 18px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--borde);
    }

    .cliente-tabla-config td,
    .cliente-tabla-config td:first-child,
    .cliente-tabla-config td:last-child {
        min-width: 0;
        padding: 5px 0;
        border: 0;
    }

    .cliente-tabla-config td[data-label]::before {
        display: block;
        margin-bottom: 3px;
        color: var(--texto-3);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        content: attr(data-label);
    }

    .cliente-tabla-config .cliente-acciones-celda {
        grid-column: 1 / -1;
        padding-top: 8px;
    }

    .cliente-centros-detalle {
        position: static;
        margin-top: 6px;
        box-shadow: none;
    }
}

@media (max-width: 600px) {
    .cliente-ficha-cabecera {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .cliente-ficha-cabecera .btn {
        max-width: 100%;
    }

    .cliente-datos-generales {
        grid-template-columns: minmax(0, 1fr);
    }

    .cliente-tabla-config tbody tr {
        grid-template-columns: minmax(0, 1fr);
        padding-right: 16px;
        padding-left: 16px;
    }

    .cliente-tabla-config .cliente-acciones-celda {
        grid-column: 1;
        flex-wrap: wrap;
    }
}

@media (min-width: 981px) and (max-width: 1500px) {
    /* Notebook: acciones de fila solo con ícono para evitar scroll horizontal. */
    .acciones-fila .btn-texto {
        display: none;
    }

    .acciones-fila .btn-sm {
        min-width: 34px;
        padding: 6px;
    }

    .tabla th,
    .tabla td {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (pointer: coarse) {
    .btn,
    .nav-item,
    .desplegable-menu a,
    .desplegable-menu button {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}

/* ---------- Impresión ---------- */

@media print {
    @page {
        size: A4;
        margin: 14mm 12mm;
    }

    body {
        background: #fff;
        font-size: 11pt;
        color: #000;
    }

    .app-nav,
    .app-barra,
    .nav-fondo,
    .saltar-contenido,
    .mensajes,
    .no-imprimir,
    .barra-filtros,
    .chips,
    .paginas,
    .pagina-acciones,
    .desplegable,
    .celda-acciones,
    .pie-tarjeta,
    .form-barra,
    .kpi-ir,
    .reporte-barra,
    .sidebar,
    .filtros,
    .paginacion,
    .header-acciones,
    .form-acciones,
    .cambio-estado,
    .btn,
    .boton {
        display: none !important;
    }

    .app,
    .app-cuerpo {
        display: block;
    }

    .app-main,
    .main {
        max-width: none;
        padding: 0;
        margin: 0;
    }

    .solo-impresion {
        display: block !important;
    }

    .tarjeta,
    .kpi,
    .panel,
    .card {
        box-shadow: none !important;
        border: 1px solid #bbb;
        break-inside: avoid;
    }

    .tabla-envoltura,
    .tabla-contenedor {
        overflow: visible;
    }

    .tabla {
        font-size: 9.5pt;
    }

    .tabla th {
        background: #eee !important;
        color: #000;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .tabla th,
    .tabla td {
        padding: 5px 7px;
    }

    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }

    tr,
    .fila-total {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    h1, h2, h3 {
        break-after: avoid;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .badge {
        border: 1px solid currentColor;
        background: none !important;
    }

    .detalle,
    .rejilla-2,
    .detalle-grid {
        display: block;
    }

    .detalle-col > .tarjeta,
    .rejilla-2 > .tarjeta {
        margin-bottom: 12px;
    }

    .reporte-impresion {
        padding: 0;
        max-width: none;
    }
}

.solo-impresion {
    display: none;
}

/* ---------- Distintivos de estado de los modelos (.estado-<css>) ----------
   Los modelos entregan una clase según su estado (pendiente, en-curso, ok,
   cobro, alerta, anulado, activo, inactivo). Se dibujan igual que .badge. */

.estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--neutro-fondo);
    color: var(--neutro);
}

.estado::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

.estado-grande { font-size: 14px; padding: 6px 14px; }
.estado-pendiente { background: var(--alerta-fondo); color: var(--alerta); }
.estado-en-curso  { background: var(--info-fondo); color: var(--info); }
.estado-ok,
.estado-activo    { background: var(--exito-fondo); color: var(--exito); }
.estado-cobro     { background: var(--morado-fondo); color: var(--morado); }
.estado-alerta    { background: #fdebdc; color: #9a3d0a; }
.estado-anulado   { background: var(--peligro-fondo); color: var(--peligro); }
.estado-inactivo  { background: var(--neutro-fondo); color: var(--neutro); }

/* ---------- Filtros genéricos (grilla) ---------- */

.barra-filtros-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px 12px;
    padding: 10px 22px 12px;
    align-items: end;
}

.barra-filtros-auto .filtro-busqueda {
    grid-column: span 2;
}

.barra-filtros-auto .filtro {
    gap: 3px;
}

.barra-filtros-auto label {
    font-size: 12px;
    line-height: 1.25;
}

.barra-filtros-auto input:not([type="checkbox"]),
.barra-filtros-auto select {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.barra-filtros-auto .filtro-botones {
    flex-wrap: wrap;
}

.barra-filtros-auto .filtro-botones .btn {
    min-height: 36px;
    padding-left: 12px;
    padding-right: 12px;
}

.filtro-casilla {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    font-size: 14px;
    font-weight: 600;
    color: var(--texto-2);
    cursor: pointer;
}

.filtro-casilla input {
    width: 18px;
    height: 18px;
    accent-color: var(--primario);
}

@media (max-width: 760px) {
    .barra-filtros-auto {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px 16px 14px;
    }

    .barra-filtros-auto .filtro-busqueda {
        grid-column: auto;
    }
}

/* ---------- Totales y montos ---------- */

.fila-total td {
    font-weight: 700;
    background: var(--superficie-2);
    border-top: 2px solid var(--primario);
}

.tabla tfoot td {
    border-bottom: none;
}

.monto-grande {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.negativo {
    color: var(--peligro);
}

/* ---------- Filtros de Servicios (compactos) ---------- */

.barra-filtros-servicios {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, 1fr);
    gap: 8px 12px;
    padding: 10px 22px 12px;
    align-items: end;
}

.barra-filtros-servicios .filtro-busqueda {
    grid-column: span 2;
}

.barra-filtros-servicios .filtro {
    gap: 3px;
}

.barra-filtros-servicios label {
    font-size: 12px;
    line-height: 1.25;
}

.barra-filtros-servicios input,
.barra-filtros-servicios select {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.barra-filtros-servicios .filtro-botones {
    flex-wrap: wrap;
    min-width: 0;
}

.barra-filtros-servicios .filtro-botones .btn {
    padding-left: 12px;
    padding-right: 12px;
    min-height: 36px;
}

@media (min-width: 1600px) {
    .barra-filtros-servicios {
        grid-template-columns: minmax(180px, 2fr) minmax(170px, 1.4fr) minmax(150px, 1.2fr) minmax(165px, 1.2fr) 140px 140px auto;
    }

    .barra-filtros-servicios .filtro-busqueda {
        grid-column: auto;
    }
}

.chips + .barra-filtros-servicios {
    padding-top: 10px;
}

.badge-extra {
    display: flex;
    width: fit-content;
    margin-top: 4px;
    font-size: 11.5px;
    padding: 2px 8px;
}

.badge-extra .icono {
    width: 13px;
    height: 13px;
}

@media (max-width: 760px) {
    .barra-filtros-servicios {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px 16px 14px;
    }

    .barra-filtros-servicios .filtro,
    .barra-filtros-servicios .filtro-busqueda,
    .barra-filtros-servicios .filtro-botones {
        grid-column: 1 / -1;
    }

    .barra-filtros-servicios .filtro-mitad {
        grid-column: auto;
    }
}

/* ---------- Estado vacío ---------- */

.estado-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 44px 22px 48px;
    text-align: center;
    color: var(--texto-2);
}

.estado-vacio-icono {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--primario-suave);
    color: var(--primario);
    margin-bottom: 6px;
}

.estado-vacio-icono .icono {
    width: 24px;
    height: 24px;
}

.estado-vacio-titulo {
    font-size: 17px;
    font-weight: 650;
    color: var(--texto);
}

.estado-vacio .btn {
    margin-top: 10px;
}

/* ---------- Fechas dd/mm/aaaa ---------- */

.campo-fecha {
    position: relative;
    display: block;
}

.campo-fecha > input[type="text"] {
    padding-right: 40px !important;
    font-variant-numeric: tabular-nums;
}

.campo-fecha-boton {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--texto-3);
    cursor: pointer;
}

.campo-fecha-boton:hover {
    background: var(--primario-suave);
    color: var(--primario);
}

/* El control nativo solo se usa como selector: invisible, bajo el campo. */
.campo-fecha-nativo {
    position: absolute !important;
    left: 0;
    bottom: 0;
    width: 100% !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.campo-fecha input[aria-invalid="true"] {
    border-color: var(--peligro) !important;
}

/* ---------- Utilidades ---------- */

.mt { margin-top: 14px; }
.mb { margin-bottom: 20px; }
.ayuda-pie { padding: 0 22px 16px; }
.lista-avisos { margin: 6px 0 10px 18px; }
.motivos-completo { flex-basis: 100%; }
.campo-interno { padding-left: 12px; border-radius: 0; }
.desplegable-menu .menu-ayuda { padding: 2px 12px 8px; white-space: normal; font-size: 13px; color: var(--texto-3); }
.desplegable-menu a span { white-space: normal; }
.empujar-derecha { margin-left: auto; }
.rejilla-2 .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .rejilla-2 .campos { grid-template-columns: minmax(0, 1fr); } }

.proyeccion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin-top: 14px;
    padding: 14px 20px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--superficie);
}

.proyeccion p {
    margin-top: 2px;
}

/* ---------- Pantallas de detalle con muchas acciones (finanzas) ---------- */

.rejilla-detalle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.rejilla-detalle > .tarjeta + .tarjeta {
    margin-top: 0;
}

.span-completo {
    grid-column: 1 / -1;
}

@media (max-width: 1180px) {
    .rejilla-detalle {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tarjeta-cuerpo > .tabla-envoltura,
.tarjeta-cuerpo > form > .tabla-envoltura {
    margin-left: -22px;
    margin-right: -22px;
}

.tarjeta-cuerpo .lista-simple li {
    padding-left: 0;
    padding-right: 0;
}

.tarjeta-cuerpo .linea-tiempo {
    padding: 0;
}

.tarjeta-cuerpo > p + p,
.tarjeta-cuerpo > p + form,
.tarjeta-cuerpo > dl + form,
.tarjeta-cuerpo > dl + p,
.tarjeta-cuerpo > ul + p,
.tarjeta-cuerpo > ul + form {
    margin-top: 12px;
}

.kpi > h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--texto-2);
}

.kpi > strong {
    font-size: 22px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.kpi > div,
.kpi > .suave {
    font-size: 13px;
    color: var(--texto-3);
}

.tarjeta-cuerpo .kpis {
    margin-top: 12px;
}

.tarjeta-cuerpo .kpi {
    box-shadow: none;
    background: var(--superficie-2);
}

.aviso.aviso-bloque {
    display: block;
}

.aviso-bloque ul {
    margin: 6px 0 4px 18px;
}

.acciones-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.form-accion {
    max-width: none;
}

.form-accion + .form-accion {
    margin-top: 16px;
}

.form-accion label:not(.filtro-casilla) {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin: 10px 0 6px;
}

.form-accion .campo-checkbox label {
    margin: 0;
}

td .form-accion,
td form {
    display: inline;
}

.barra-estados-ui {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin-bottom: 18px;
    color: var(--texto-2);
    font-size: 14px;
}

.estado-actual-ui {
    margin-bottom: 12px;
}

.tabla-cobro td {
    vertical-align: top;
}

.tabla-cobro .fila-subtotal td {
    font-weight: 700;
    background: var(--superficie-2);
}

.tabla-cobro .fila-total td {
    font-size: 16px;
    font-weight: 700;
    border-top: 2px solid var(--primario);
}

.tabla-cobro .fila-aprobado td {
    color: var(--exito);
    background: var(--exito-fondo);
}

.tabla .monto {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.barra-seleccion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 22px;
    border-top: 1px solid var(--borde);
    background: var(--superficie-2);
}

.celda-casilla input {
    width: 20px;
    height: 20px;
    accent-color: var(--primario);
}

.tabla .celda-casilla {
    width: 1%;
}

.barra-seleccion .btn,
.pie-tarjeta .btn,
.acciones-form .btn {
    white-space: normal;
    text-align: left;
}

.kpi-etiqueta .estado {
    white-space: normal;
}

@media (max-width: 760px) {
    .tabla-cobro th,
    .tabla-cobro td {
        padding: 8px 10px;
    }

    .tabla-cobro th:first-child,
    .tabla-cobro td:first-child {
        padding-left: 12px;
    }
}

.tabla .badge-extra {
    white-space: normal;
}

.barra-filtros-auto .filtro-botones {
    grid-column: span 2;
}

@media (max-width: 760px) {
    .barra-filtros-auto .filtro-botones {
        grid-column: auto;
    }
}

.tabla td.col-ancha {
    min-width: 120px;
}

@media (min-width: 981px) and (max-width: 1500px) {
    .tabla {
        font-size: 14px;
    }
}

@media (max-width: 760px) {
    .tabla-cobro {
        font-size: 13.5px;
    }

    .tabla-cobro td {
        overflow-wrap: anywhere;
    }
}

@media (min-width: 900px) {
    .kpis-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.rejilla-detalle .campos,
.rejilla-detalle .campos-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rejilla-detalle .span-completo .campos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 760px) {
    .rejilla-detalle .campos,
    .rejilla-detalle .campos-3,
    .rejilla-detalle .span-completo .campos {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    .tabla-cards td:empty {
        display: none;
    }
}

/* Ficha de servicio: jerarquía operativa y columnas estables. */
.ficha-servicio-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 24px;
    align-items: center;
}

.ficha-servicio-cabecera > div:first-child { min-width: 0; }
.ficha-servicio-cabecera h1 { margin-bottom: 4px; }
.ficha-servicio-cliente { margin: 0; font-size: 17px; font-weight: 650; }
.ficha-servicio-recorrido { margin-top: 4px; color: var(--texto-2); font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }

.ficha-servicio-cabecera-estado {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.ficha-servicio-cabecera .pagina-acciones {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.ficha-servicio-conciliacion,
.ficha-servicio-meta { color: var(--texto-3); font-size: 13px; }

.ficha-servicio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.ficha-servicio-principal,
.ficha-servicio-secundaria {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.ficha-servicio-tarjeta { min-width: 0; }
.ficha-servicio-tarjeta .tarjeta-cabecera,
.ficha-servicio-tarjeta .tarjeta-cuerpo { padding-top: 13px; padding-bottom: 13px; }
.ficha-servicio-tarifa { border-top: 3px solid var(--primario); }

.ficha-servicio-datos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
}

.ficha-servicio-datos dt { margin-bottom: 2px; }
.ficha-servicio-datos dd { overflow-wrap: anywhere; }

.ficha-servicio-acciones,
.ficha-servicio-asignacion-card .pie-tarjeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ficha-servicio-acciones form,
.ficha-servicio-asignacion-card .pie-tarjeta form { margin: 0; }
.ficha-servicio-asignacion p { margin: 0 0 6px; overflow-wrap: anywhere; }

.ficha-servicio-observaciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ficha-servicio-observaciones h3 { margin: 0 0 5px; font-size: 14px; }
.ficha-servicio-observaciones p { margin: 0; }
.ficha-servicio-observaciones .tarjeta-interna { padding: 10px 12px; border-radius: var(--radio-chico); }

.ficha-servicio-procedencia { margin-top: 12px; color: var(--texto-3); font-size: 13px; }
.ficha-servicio-procedencia summary,
.ficha-servicio-datos-reales details summary { cursor: pointer; font-weight: 600; }
.ficha-servicio-costos { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ficha-servicio-historial { margin-top: 18px; }
.ficha-servicio-historial .linea-tiempo-compacta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.ficha-servicio-historial .linea-tiempo-compacta li { padding-bottom: 8px; }
.ficha-servicio-datos-reales-pendientes { margin: 0; padding: 5px 0; }

@media (max-width: 980px) {
    .ficha-servicio-layout { grid-template-columns: minmax(0, 1fr); }
    .ficha-servicio-layout > .ficha-servicio-principal,
    .ficha-servicio-layout > .ficha-servicio-secundaria { display: contents; }
}

@media (max-width: 600px) {
    .ficha-servicio-cabecera { grid-template-columns: minmax(0, 1fr); }
    .ficha-servicio-cabecera-estado { justify-content: flex-start; }
    .ficha-servicio-cabecera .pagina-acciones { grid-column: 1; justify-content: flex-start; }
    .ficha-servicio-datos,
    .ficha-servicio-observaciones,
    .ficha-servicio-historial .linea-tiempo-compacta { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Tramos y tarifas ---------- */

.tabla-tramos .celda-titulo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 280px;
}

.tramo-link {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-decoration: none;
    color: inherit;
}

.tramo-link:hover .tramo-nombre {
    color: var(--primario);
    text-decoration: underline;
}

.tramo-nombre {
    font-weight: 600;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tramo-cliente {
    font-size: 12.5px;
    color: var(--texto-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tramo-recorrido {
    font-size: 12.5px;
    color: var(--texto-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tramo-tipo-vehiculo {
    font-size: 12px;
    color: var(--texto-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabla-tramos .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .tabla-tramos .celda-titulo {
        min-width: 0;
    }

    .tramo-nombre,
    .tramo-cliente,
    .tramo-recorrido,
    .tramo-tipo-vehiculo {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 760px) {
    .tabla-tramos .celda-acciones {
        width: 100%;
        text-align: left;
        padding-top: 10px;
    }

    .tabla-tramos .acciones-fila {
        display: flex;
        flex-wrap: wrap;
    }

    .tabla-tramos .acciones-fila .btn {
        flex: 1 1 auto;
        min-height: 40px;
    }
}

/* Contador pequeño del menú (solicitudes por atender) */
.app-nav .nav-item > .nav-cuenta {
    margin-left: auto;
    flex: none;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fdf1dc;
    color: #8a4b00;
    box-shadow: inset 0 0 0 1px #f5d9a8;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}