/*
 * Sistema de diseño común del ERP (se carga después de los estilos base de base.html).
 * Plano y legible: títulos en minúsculas normales, bordes finos en lugar de sombras, números alineados,
 * el azul de Corsal solo para lo que se puede hacer y el color de señal solo para el estado.
 */
:root {
  --tinta: #1f2a33;
  --tenue: #5b6874;
  --linea: #dce3e8;
  --linea-fuerte: #c9d3da;
  --papel: #ffffff;
  --fondo: #f1f4f7;
  --azul: #0479a1;
  --azul-hover: #036384;
  --azul-suave: #e3f1f7;
  --bien: #067647;
  --bien-suave: #ecfdf3;
  --aviso: #b54708;
  --aviso-suave: #fffaeb;
  --mal: #b42318;
  --mal-suave: #fef3f2;
  --radio: .75rem;
}

body { color: var(--tinta); background: var(--fondo); }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; box-shadow: none; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { color: var(--tinta); letter-spacing: -.01em; }
h1.h4, .h4 { font-weight: 700; }

/* Números alineados en montos, folios y tablas. */
.dato-valor, .table td, .folio-chip, .kpi .num, .kpi .valor, .num { font-variant-numeric: tabular-nums; }

/* Secciones: encabezado claro en lugar de la barra oscura en mayúsculas. */
.card-corsal { border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: none; }
.card-corsal > .card-header,
.card-corsal > summary.card-header {
  background: var(--papel); color: var(--tinta); border-bottom: 1px solid var(--linea); border-radius: var(--radio) var(--radio) 0 0;
  font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; padding: .8rem 1.1rem;
}
.card-corsal > .card-header .num { background: var(--azul-suave); color: var(--azul); font-weight: 700; }
.card-corsal > .card-header .badge.text-bg-light { background: var(--fondo) !important; color: var(--tenue) !important; font-weight: 600; }
.card-corsal > .card-header .text-white-50 { color: var(--tenue) !important; }
@media (max-width: 575.98px) {
  .card-corsal > .card-header { letter-spacing: 0; padding: .7rem .9rem; }
}

.subtitulo { font-size: .85rem; font-weight: 700; color: var(--azul); text-transform: none; letter-spacing: 0; border-bottom-color: var(--linea); }

/* Formularios: etiquetas legibles (sin mayúsculas forzadas). */
.form-label { font-size: .82rem; font-weight: 600; text-transform: none; color: var(--tinta); letter-spacing: 0; }
.form-control, .form-select { border-color: var(--linea-fuerte); }
.form-control::placeholder { color: #98a2b3; }
.form-text { color: var(--tenue); }
.invalid-feedback { font-weight: 500; }

/* Datos de solo lectura. */
.dato-label { font-size: .78rem; text-transform: none; letter-spacing: 0; color: var(--tenue); }
.dato-valor { font-weight: 500; color: var(--tinta); }

/* Botones. */
.btn { border-radius: .55rem; font-weight: 500; }
.btn-corsal { background: var(--azul); border-color: var(--azul); }
.btn-corsal:hover, .btn-corsal:focus { background: var(--azul-hover); border-color: var(--azul-hover); }
.btn-outline-dark { border-color: var(--linea-fuerte); color: var(--tinta); background: var(--papel); }
.btn-outline-dark:hover { background: #f4f6f8; border-color: #9aa8b3; color: var(--tinta); }
@media (hover: none) { .btn:not(.btn-sm) { min-height: 2.75rem; } }

/* Filtros por estatus (chips). */
.chip-estatus { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.25rem; padding: .25rem .8rem; border-color: var(--linea-fuerte);
  color: var(--tinta); font-weight: 500; }
.chip-estatus:hover { border-color: var(--azul); color: var(--azul); }
.chip-estatus.activo, .chip-estatus.activo:hover { background: var(--azul); border-color: var(--azul); color: #fff; }
@media (hover: none) { .chip-estatus { min-height: 2.6rem; } }

/* Tarjetas de lista: borde en lugar de sombra al pasar. */
.tarjeta-lista { border: 1px solid var(--linea); }
.tarjeta-lista:hover { box-shadow: none; border-color: #9aa8b3; }
.folio-chip { background: var(--azul-suave); color: var(--azul); }

/* Tablas. */
.table { --bs-table-color: var(--tinta); }
.table > thead > tr > th, .table-light th { background: #f7f9fa !important; color: var(--tenue); font-size: .8rem; font-weight: 600;
  border-bottom-color: var(--linea); white-space: nowrap; }
.table > :not(caption) > * > * { border-bottom-color: #eef1f3; }

/* Pestañas. */
.pestanas { border-bottom-color: var(--linea); }
.pestanas .nav-link { color: var(--tenue); min-height: 2.75rem; }
.pestanas .nav-link:hover { color: var(--tinta); }

/* Avance de la adjudicación: una sola fila de flechas (se desliza en el celular). */
.pasos { flex-wrap: nowrap; overflow-x: auto; gap: 0; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel);
  scrollbar-width: thin; }
.paso { flex: 1 0 auto; border-radius: 0; background: transparent; color: var(--tenue); font-size: .8rem; font-weight: 600; white-space: nowrap;
  padding: .6rem 1.1rem .6rem 1.4rem; clip-path: polygon(0 0, calc(100% - .65rem) 0, 100% 50%, calc(100% - .65rem) 100%, 0 100%, .65rem 50%); }
.paso:first-child { padding-left: 1rem; clip-path: polygon(0 0, calc(100% - .65rem) 0, 100% 50%, calc(100% - .65rem) 100%, 0 100%); }
.paso.hecho { background: var(--bien-suave); color: var(--bien); }
.paso.actual { background: var(--azul); color: #fff; }

/* Avisos. */
.alert { border-radius: .6rem; }
.alert-warning { background: var(--aviso-suave); border-color: #fedf89; color: #7a2e0e; }
.alert-danger { background: var(--mal-suave); border-color: #fecdca; color: #7a271a; }
.alert-success { background: var(--bien-suave); border-color: #abefc6; color: #054f31; }
.alert-info, .alert-primary { background: var(--azul-suave); border-color: #b9dcea; color: #064a62; }

/* Etiquetas de cifras de cada módulo, sin mayúsculas forzadas. */
body .kpi-cob .etiqueta, body .kpi-sin .etq, body .viz-root .kpi .etq, body .junta .quien {
  text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--tenue); }
body .resultados-busqueda .grupo { text-transform: none; letter-spacing: 0; font-size: .75rem; }

/* Menú «Más acciones». */
.dropdown-menu { border-color: var(--linea); border-radius: .6rem; box-shadow: 0 10px 28px rgba(16, 24, 40, .14); padding: .35rem; }
.dropdown-item { border-radius: .4rem; padding: .5rem .75rem; display: flex; align-items: center; gap: .5rem; }
.dropdown-item .bi { color: var(--tenue); }
.dropdown-item.text-danger .bi { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Títulos de sección dentro de una página (tablero, módulos). */
.seccion-titulo { font-size: 1rem; font-weight: 700; color: var(--tinta); margin: 0 0 .6rem; }

/* El número de folio nunca se parte en dos renglones. */
.folio-chip { white-space: nowrap; }
.tarjeta-lista .badge { white-space: normal; text-align: left; }

/* ───────────── Tipografía, radios y movimiento (referencias: Ramp/Mercury; principios de Emil Kowalski) ───────────── */
:root {
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-control: .5rem;    /* botones y chips cuadrados */
  --r-campo: .625rem;    /* campos */
  --r-tarjeta: .875rem;  /* tarjetas y paneles */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}
body { font-family: var(--fuente); font-feature-settings: "cv11", "ss03"; -webkit-font-smoothing: antialiased; }
.table, .num, .dato-valor, .folio-chip { font-feature-settings: "cv11", "tnum"; }
.btn { border-radius: var(--r-control); }
.form-control, .form-select { border-radius: var(--r-campo); }
.card-corsal, .tab-panel, .kpi, .area { border-radius: var(--r-tarjeta); }

/* Presionar se siente: los botones ceden un poco al tocarlos. */
.btn, .chip-estatus, .pestana-app, .lateral-link, .mosaico, .btn-regreso, .vistas-folio a {
  transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; }
.btn:active:not(:disabled):not(.disabled), .chip-estatus:active, .pestana-app:active, .lateral-link:active,
.mosaico:active, .btn-regreso:active, .vistas-folio a:active { transform: scale(.97); }
.btn.disabled, .btn:disabled { cursor: not-allowed; }

/* Hover solo con mouse (en el celular el «hover» se queda pegado al tocar). */
@media (hover: none) {
  .tarjeta-lista:hover { border-color: var(--linea); }
  .btn-outline-dark:hover { background: var(--papel); border-color: var(--linea-fuerte); }
}

/* Menús desplegables: aparecen desde su botón, rápido. */
@keyframes aparecer-menu { from { opacity: 0; transform: scale(.97) translateY(-4px); } }
.dropdown-menu.show { animation: aparecer-menu 160ms var(--ease-out); transform-origin: top left; }
.dropdown-menu-end.show { transform-origin: top right; }
.offcanvas { transition-timing-function: var(--ease-drawer) !important; transition-duration: 280ms !important; }

/* Los avisos del sistema entran suaves, sin brincar. */
main > .alert { transition: opacity 200ms ease, transform 200ms var(--ease-out); }
@starting-style { main > .alert { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .dropdown-menu.show { animation: none; }
  .btn:active, .chip-estatus:active, .pestana-app:active, .lateral-link:active { transform: none; }
}

/* ───────────── Entrada al sistema y cuenta en pausa ───────────── */
.acceso { min-height: calc(100vh - 9rem); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem 0 2rem; }
.acceso-tarjeta { width: 100%; max-width: 25rem; background: var(--papel); border: 1px solid var(--linea); border-radius: 1.1rem; padding: 2rem 1.75rem; }
@media (max-width: 575.98px) { .acceso-tarjeta { padding: 1.5rem 1.25rem; border-radius: .9rem; } }
.acceso-logo { display: block; height: 44px; margin-bottom: 1.5rem; }
.acceso h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .35rem; }
.acceso-ayuda { color: var(--tenue); margin-bottom: 1.4rem; line-height: 1.5; }
.acceso .form-control-lg { font-size: 1rem; min-height: 3rem; }
.acceso-aviso { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; }
.acceso-aviso .bi { font-size: 1.1rem; margin-top: .05rem; }
.campo-clave { position: relative; }
.campo-clave .form-control { padding-right: 3.25rem; }
.ver-clave { position: absolute; top: 0; right: 0; width: 3rem; height: 100%; border: 0; background: none; color: var(--tenue);
  border-radius: 0 var(--r-campo) var(--r-campo) 0; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.ver-clave:hover { color: var(--tinta); }
.aviso-mayus { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--aviso); margin-top: .4rem; }
.acceso .btn-lg { min-height: 3rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.acceso-pie { color: var(--tenue); font-size: .85rem; margin-top: 1.1rem; text-align: center; }
.acceso-icono { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--aviso-suave); color: var(--aviso); display: flex;
  align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1.1rem; border: 1px solid #fedf89; }
.cuenta-regresiva { border: 1px solid var(--linea); border-radius: var(--r-tarjeta); background: var(--fondo); padding: 1rem; margin-bottom: 1rem; text-align: center; }
.cuenta-regresiva .reloj { font-size: 2.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-feature-settings: "tnum"; }
.cuenta-regresiva .cuando { color: var(--tenue); font-size: .88rem; margin-top: .2rem; }
.cuenta-regresiva.listo .reloj { color: var(--bien); }
.acceso-pasos { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .75rem; font-size: .86rem; color: var(--tenue); }
.acceso-pasos li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .5rem; line-height: 1.45; }
.acceso-pasos .bi { color: var(--tenue); margin-top: .1rem; }
.acceso-logo-fuera { height: 40px; margin-bottom: 1.25rem; }
.btn-corsal:disabled, .btn-corsal.disabled { background: var(--azul); border-color: var(--azul); color: #fff; opacity: .45; }
/* Botones dentro de tablas: siempre en un renglón. */
.table .btn { white-space: nowrap; }
/* Botón secundario abierto o presionado: gris suave, no negro. */
.btn-outline-dark.show, .btn-outline-dark:active, .btn-outline-dark.active, .btn-check:checked + .btn-outline-dark {
  background: #eef2f5 !important; border-color: #9aa8b3 !important; color: var(--tinta) !important; }

/* ───────────── Ayudas (tooltips): ver static/js/ayuda.js ───────────── */
.ayuda-globo { position: fixed; left: 0; top: 0; z-index: 1090; max-width: min(18rem, calc(100vw - 16px)); padding: .45rem .65rem;
  border-radius: .5rem; background: #1b2430; color: #fff; font-size: .8rem; font-weight: 500; line-height: 1.4; white-space: pre-line;
  pointer-events: none; box-shadow: 0 6px 20px rgba(16, 24, 40, .18);
  opacity: 0; transform: scale(.97); transition: opacity 90ms ease, transform 90ms ease; }
.ayuda-globo.visible { opacity: 1; transform: none; transition-duration: 140ms; transition-timing-function: var(--ease-out); }
.ayuda-globo.sin-animacion { transition: none; }
.ayuda-globo::after { content: ""; position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
.ayuda-globo[data-lado="arriba"] { transform-origin: var(--flecha, 50%) 100%; }
.ayuda-globo[data-lado="arriba"]::after { bottom: -4px; left: calc(var(--flecha, 50%) - 4px); }
.ayuda-globo[data-lado="abajo"] { transform-origin: var(--flecha, 50%) 0; }
.ayuda-globo[data-lado="abajo"]::after { top: -4px; left: calc(var(--flecha, 50%) - 4px); }
.ayuda-globo[data-lado="derecha"] { transform-origin: 0 var(--flecha, 50%); }
.ayuda-globo[data-lado="derecha"]::after { left: -4px; top: calc(var(--flecha, 50%) - 4px); }
/* Lo que solo informa (etiquetas de estado, íconos ⓘ) avisa que tiene ayuda. */
[data-ayuda]:not(a):not(button):not(input):not(select):not(label):not(.lateral-link) { cursor: help; }
@media (prefers-reduced-motion: reduce) { .ayuda-globo, .ayuda-globo.visible { transform: none; transition: opacity 90ms ease; } }

/* ───────────── Movimiento con propósito (ver static/js/movimiento.js) ───────────── */
/* Botón guardando: el texto sigue visible, con un indicador que gira rápido (se siente más ágil). */
.btn.enviando { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.btn.enviando .spinner-border { animation-duration: .6s; }

/* Un valor que se recalculó solo se marca un instante para que se note qué cambió. */
@keyframes recalculado { from { background-color: #b9dcea; } }
.recalculado { animation: recalculado 700ms var(--ease-out); }

/* Pestañas: el contenido aparece rápido, sin deslizarse. */
.tab-pane.fade { transition: opacity 150ms var(--ease-out); }

/* Ventanas (modales): crecen un poco desde el centro en lugar de caer desde arriba. */
.modal.fade .modal-dialog { transform: scale(.97); transition: transform 220ms var(--ease-out); }
.modal.show .modal-dialog { transform: none; }
.modal-backdrop.fade { transition: opacity 200ms ease; }

/* Secciones desplegables (<details>): el contenido aparece suave al abrir. */
@keyframes desplegar { from { opacity: 0; transform: translateY(-4px); } }
details[open] > :not(summary) { animation: desplegar 180ms var(--ease-out); }
details > summary { cursor: pointer; }

/* Tarjetas de lista: ceden un poco al tocarlas (sobre todo en el celular). */
.tarjeta-lista { transition: border-color 150ms ease, transform 160ms var(--ease-out); }
.tarjeta-lista:active { transform: scale(.99); }

/* Flecha del menú lateral al contraer/expandir. */
.lateral-plegar .bi { transition: transform 200ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .recalculado, details[open] > :not(summary) { animation: none; }
  .modal.fade .modal-dialog, .tarjeta-lista:active { transform: none; }
}

/* ───────────── Movimiento visible con propósito ───────────── */
/* Gráficas: las barras crecen desde su base al abrir o al filtrar (muestra que los datos son nuevos). */
@keyframes crecer-y { from { transform: scaleY(0); } }
@keyframes crecer-x { from { transform: scaleX(0); } }
@keyframes trazar { from { stroke-dashoffset: var(--largo, 400); } }
.columnas .seg { transform-origin: bottom; animation: crecer-y 520ms var(--ease-out) both; animation-delay: var(--retraso, 0ms); }
.barra-fila .barra, .crm-barras .pista > span { transform-origin: left; animation: crecer-x 480ms var(--ease-out) both; animation-delay: var(--retraso, 0ms); }
.columnas .rotulo { animation: aparecer-rotulo 300ms ease-out 380ms both; }
@keyframes aparecer-rotulo { from { opacity: 0; } }
.kpi.heroe svg polyline { stroke-dasharray: var(--largo, 400); animation: trazar 700ms var(--ease-out) both; }
.kpi.heroe svg circle { animation: aparecer-rotulo 200ms ease-out 600ms both; }

/* Pestañas: el subrayado se desliza a la elegida. */
.pestanas { position: relative; }
.pestanas .subrayado { position: absolute; left: 0; bottom: -2px; height: 3px; width: 1px; background: var(--azul); border-radius: 3px 3px 0 0;
  transform-origin: left; pointer-events: none; transition: transform 240ms var(--ease-out); }
.pestanas.con-subrayado .nav-link.active { border-bottom-color: transparent; }

/* Tablas: el resaltado de la fila al pasar el mouse entra suave. */
.table > tbody > tr > * { transition: background-color 120ms ease, box-shadow 120ms ease; }

@media (prefers-reduced-motion: reduce) {
  .columnas .seg, .barra-fila .barra, .crm-barras .pista > span, .columnas .rotulo,
  .kpi.heroe svg polyline, .kpi.heroe svg circle { animation: none; }
  .pestanas .subrayado { transition: none; }
}

/* Tabla vacía en el celular: sin encabezados que la ensanchen, para que el mensaje se lea completo. */
@media (max-width: 767.98px) {
  .table:has(> tbody > tr:only-child > td[colspan].text-muted) > thead { display: none; }
  .table:has(> tbody > tr:only-child > td[colspan].text-muted) td[colspan] { white-space: normal; }
}

/* Pestañas en un solo renglón: en el celular se deslizan de lado en vez de partirse. */
.pestanas { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas .nav-link { white-space: nowrap; margin-bottom: 0; }
.pestanas .subrayado { bottom: 0; }

/* Estado de cuenta por año (cuentas de varios años). */
.anio-cabeza td { background: #f7f9fa; border-bottom: 1px solid var(--linea); }
.anio-boton { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .7rem 1rem; border: 0; background: none; text-align: left;
  color: var(--tinta); font-size: .92rem; min-height: 3rem; flex-wrap: wrap; }
.anio-boton:hover { background: #eef2f5; }
.anio-boton .bi-chevron-right { transition: transform 200ms var(--ease-out); color: var(--tenue); }
.anio-boton[aria-expanded="true"] .bi-chevron-right { transform: rotate(90deg); }
.anio-boton .resumen { color: var(--tenue); font-size: .84rem; }
.hito-fila td { background: var(--azul-suave); color: #064a62; font-size: .85rem; padding-top: .45rem; padding-bottom: .45rem; }
.hito-fila .bi { color: var(--azul); }
.pagos-anio { display: flex; align-items: baseline; gap: .6rem; font-size: 1rem; margin: 1rem 0 .5rem; }
.pagos-anio:first-child { margin-top: 0; }
.pagos-anio span { font-size: .84rem; color: var(--tenue); font-weight: 400; }
.etapa-pago { display: inline-block; font-size: .72rem; font-weight: 600; color: var(--tenue); background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 1rem; padding: 0 .5rem; margin-top: .2rem; }
@media (prefers-reduced-motion: reduce) { .anio-boton .bi-chevron-right { transition: none; } }

/* Filtros de lo ya cerrado (entregados, liquidados…), separados de los que siguen en proceso. */
.chips-separador { width: 1px; align-self: stretch; background: var(--linea-fuerte); margin: .2rem .25rem; }
.chip-estatus.chip-cerrado:not(.activo) { background: var(--fondo); }