/* ==========================================================================
   Componentes del panel (rediseño, oct 2026)

   Lo que comparten las pantallas del panel: encabezado de página, pestañas,
   panel de filtros con etiquetas de filtros activos, tarjeta de resultados
   con su barra (que cambia a barra de selección), tabla de datos,
   insignias, puntos de estado y menús desplegables. Usa las variables del
   tema y las del marco (--fondo-app, --borde-suave).
   ========================================================================== */

/* Texto solo para lectores de pantalla (lo usan el panel y el portal). */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Valores por omisión fuera del panel (el portal del proveedor): salen del
   tema de cada empresa. El panel (.marco) los fija a su propia paleta. */
:root { --fondo-app: var(--concreto); --borde-suave: var(--borde); }

/* --- menú de la persona (panel y portal del proveedor) -------------------- */
.menu-usuario { margin-left: auto; position: relative; }
.menu-usuario__boton {
  list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.menu-usuario__boton::-webkit-details-marker { display: none; }
.menu-usuario__boton:hover { background: var(--fondo-app); }
.menu-usuario__boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.menu-usuario__iniciales {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: var(--acento-claro); color: var(--acento);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .8rem;
}
.menu-usuario__quien { display: flex; flex-direction: column; line-height: 1.2; }
.menu-usuario__nombre { font-weight: 500; font-size: .9rem; }
.menu-usuario__area { font-size: .76rem; color: var(--tinta-suave); }
.menu-usuario__flecha { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-usuario[open] .menu-usuario__flecha { transform: rotate(180deg); }
.menu-usuario__panel {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; z-index: 30;
  background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(28, 37, 35, .14);
  padding: 6px; display: flex; flex-direction: column;
}
.menu-usuario__correo { margin: 4px 10px 8px; font-size: .8rem; color: var(--tinta-suave); word-break: break-all; }
.menu-usuario__opcion {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 9px 10px; border: 0; border-radius: 5px; background: none;
  font: inherit; font-size: .9rem; color: var(--tinta); text-decoration: none; cursor: pointer;
}
.menu-usuario__opcion:hover { background: var(--fondo-app); text-decoration: none; color: var(--tinta); }
.menu-usuario__opcion--salir { color: var(--alerta); }

/* --- encabezado de página ------------------------------------------------- */
.encabezado-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.encabezado-pagina__texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.encabezado-pagina h1 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.encabezado-pagina__desc { margin: 0; color: var(--tinta-suave); }
.encabezado-pagina__acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- botones del panel (alto y peso uniformes) ---------------------------- */
/* Todos los botones del panel miden lo mismo (40 px), tengan texto o solo
   un ícono: así quedan alineados en cualquier fila. */
.marco .boton { min-height: 40px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; }
.marco .boton--chico { min-height: 32px; }

/* --- avisos en franja ----------------------------------------------------- */
.franja { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-radius: 8px; border: 1px solid; margin-bottom: 14px; }
.franja svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.franja__texto { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.franja__titulo { font-weight: 600; }
.franja ul { margin: 2px 0 0; padding-left: 18px; }
.franja--alerta { background: var(--alerta-bg); border-color: #f0c9c5; color: #7d241c; }
.franja--alerta a { color: #7d241c; font-weight: 600; }
.franja--pendiente { background: var(--pendiente-bg); border-color: #f1dfa8; color: #5c4610; }
.franja--pendiente a { color: #5c4610; font-weight: 600; }

/* --- pestañas por estado -------------------------------------------------- */
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pestana {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie);
  color: var(--tinta); text-decoration: none; font-size: .92rem;
}
.pestana:hover { border-color: var(--acento); color: var(--tinta); text-decoration: none; }
.pestana__num { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.pestana--activa, .pestana--activa:hover { border-color: var(--acento); background: var(--acento-claro); color: var(--acento); font-weight: 600; }
.pestana--activa .pestana__num { color: var(--acento); font-weight: 400; }

/* --- panel de filtros ----------------------------------------------------- */
.panel-filtros { background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: 8px; padding: 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.panel-filtros__fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.panel-filtros__mas { padding-top: 12px; border-top: 1px solid var(--borde-suave); }
.panel-filtros__mas[hidden] { display: none; }
.filtro-busqueda {
  flex: 2 1 280px; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px;
  border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); color: var(--tinta-suave); box-sizing: border-box;
}
.filtro-busqueda:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro); }
.filtro-busqueda svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.filtro-busqueda input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; color: var(--tinta); background: transparent; }
.filtro { flex: 1 1 160px; display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--tinta-suave); min-width: 0; }
.filtro select, .filtro .desplegable__resumen {
  min-height: 38px; border: 1px solid var(--borde); border-radius: 6px; padding: 0 8px; box-sizing: border-box;
  font: inherit; font-size: .92rem; color: var(--tinta); background: var(--superficie); width: 100%;
}
/* "Cuáles documentos" (padrón) es un <summary>, no un <select>: el navegador
   no le centra el texto y se veía cargado hacia arriba. Con la altura de
   renglón igual al alto interior del campo (38 px menos 2 px de borde) queda
   centrado como en los demás filtros (oct 2026). */
.filtro .desplegable__resumen { line-height: 36px; }
/* Y una flecha como la de los demás filtros, para que se vea desplegable
   (oct 2026). Se dibuja con dos bordes, sin imagen, en el color del texto;
   al abrir apunta hacia arriba. */
.filtro .desplegable__resumen { position: relative; padding-right: 30px; }
.filtro .desplegable__resumen::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.filtro .desplegable[open] .desplegable__resumen::after { transform: translateY(-20%) rotate(-135deg); }
.boton-filtros { flex: 0 0 auto; }
.boton-filtros svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.boton-filtros__num { background: var(--acento); color: #fff; border-radius: 999px; font-size: .74rem; padding: 0 7px; line-height: 18px; }

/* --- filtros activos (etiquetas que se quitan con un clic) ----------------- */
.filtros-activos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--borde-suave); }
.filtros-activos__rotulo { font-size: .78rem; color: var(--tinta-suave); }
.chip-filtro {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--fondo-app);
  font-size: .84rem; color: var(--tinta); text-decoration: none;
}
.chip-filtro:hover { border-color: var(--alerta); color: var(--tinta); text-decoration: none; }
.chip-filtro__x { font-size: 1rem; line-height: 1; color: var(--tinta-suave); }
.filtros-activos__limpiar { font-size: .84rem; font-weight: 500; }

/* --- tarjeta de resultados ------------------------------------------------ */
.resultados { background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: 8px; overflow: hidden; }
.resultados__barra { min-height: 54px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--borde-suave); box-sizing: border-box; }
.resultados__cuenta { font-weight: 600; }
.resultados__dato { color: var(--tinta-suave); }
.resultados__dato strong { color: var(--tinta); font-weight: 500; }
.resultados__pie { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--borde-suave); color: var(--tinta-suave); font-size: .84rem; }
.resultados__vacio { padding: 40px 16px; text-align: center; color: var(--tinta-suave); }
.resultados__vacio strong { display: block; color: var(--tinta); font-weight: 600; margin-bottom: 4px; }

.barra-seleccion { min-height: 54px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px 8px 16px; background: var(--acento); color: #fff; box-sizing: border-box; }
.barra-seleccion[hidden], .resultados__barra[hidden] { display: none; }
.barra-seleccion__cuenta { font-weight: 600; margin-right: auto; }
.barra-seleccion .boton { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.barra-seleccion .boton:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.barra-seleccion__cancelar { background: none; border: 0; color: #fff; font: inherit; cursor: pointer; padding: 0 10px; min-height: 36px; }

/* --- tabla de datos ------------------------------------------------------- */
.tabla-datos { width: 100%; border-collapse: collapse; }
.tabla-datos th {
  text-align: left; font-size: .76rem; font-weight: 500; color: var(--tinta-suave);
  background: #f7f9f8; padding: 10px 12px; white-space: nowrap;
}
.tabla-datos td { padding: 12px; border-top: 1px solid var(--borde-suave); vertical-align: top; }
.tabla-datos th:first-child, .tabla-datos td:first-child { padding-left: 16px; }
.tabla-datos tbody tr[data-href] { cursor: pointer; }
.tabla-datos tbody tr:hover td { background: #f8faf9; }
.tabla-datos tbody tr.fila--elegida td { background: var(--acento-claro); }
.tabla-datos .cifra { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-datos .sin-corte { white-space: nowrap; }
.tabla-datos .seleccion { width: 1%; padding-right: 0; }
.tabla-datos .seleccion input { width: 16px; height: 16px; cursor: pointer; }
.tabla-datos__principal { font-weight: 600; color: var(--tinta); text-decoration: none; }
.tabla-datos__principal:hover { color: var(--acento); }
.tabla-datos__sub { display: block; font-size: .78rem; color: var(--tinta-suave); margin-top: 2px; }
.tabla-datos__ir { width: 1%; padding-right: 14px; color: #9aa6a2; }
.tabla-datos__ir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; display: block; }
.tabla-datos tfoot td { background: #f7f9f8; font-weight: 600; border-top: 1px solid var(--borde); }
.tabla-datos .mono { font-size: .84rem; }

/* --- estados: punto con texto e insignias -------------------------------- */
.punto { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.punto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9aa6a2; flex: 0 0 auto; }
.punto--ok { color: var(--listo); }        .punto--ok::before { background: var(--listo); }
.punto--pendiente { color: #6b5210; }      .punto--pendiente::before { background: #c99a1e; }
.punto--alerta { color: #8f2c23; }         .punto--alerta::before { background: #c0392b; }
.punto--neutro { color: #3b4744; }

.insignia { display: inline-flex; align-items: center; font-size: .78rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: #eef1f0; color: #3b4744; }
.insignia--ok { background: var(--listo-bg); color: var(--listo); }
.insignia--pendiente { background: #fbf1d6; color: #6b5210; }
.insignia--alerta { background: var(--alerta-bg); color: #8f2c23; }
.insignia--oscura { background: #2c3633; color: #fff; }

.marcas-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.marca-chip { font-size: .76rem; padding: 2px 8px; border-radius: 4px; background: #eef1f0; color: #3b4744; white-space: nowrap; }
.marca-chip--pendiente { background: #fbf1d6; color: #6b5210; }
.marca-chip--alerta { background: var(--alerta-bg); color: #8f2c23; }

/* --- menú desplegable de acciones (details/summary) ---------------------- */
.menu-acciones { position: relative; }
.menu-acciones > summary { list-style: none; cursor: pointer; }
.menu-acciones > summary::-webkit-details-marker { display: none; }
.menu-acciones > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-acciones__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; min-width: 220px;
  background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(28, 37, 35, .14); padding: 6px; display: flex; flex-direction: column;
}
.menu-acciones__opcion {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 5px; border: 0; background: none;
  font: inherit; font-size: .9rem; text-align: left; color: var(--tinta); text-decoration: none; cursor: pointer;
}
.menu-acciones__opcion:hover { background: var(--fondo-app); color: var(--tinta); text-decoration: none; }
.menu-acciones__ayuda { font-size: .76rem; color: var(--tinta-suave); }

@media (max-width: 700px) {
  .encabezado-pagina { align-items: flex-start; }
  .filtro, .filtro-busqueda { flex-basis: 100%; }
}
/* El concentrado tiene muchas columnas: un poco menos de aire para que
   quepa entero en una laptop de 1366 px sin desplazarse de lado. */
.tabla--facturas th, .tabla--facturas td { padding-left: 8px; padding-right: 8px; }
.tabla--facturas .tabla__emisor { min-width: 150px; max-width: 280px; }
.tabla--facturas .marcas-chips { min-width: 118px; max-width: 260px; }
/* Oct 2026: las marcas parten su texto en renglones en vez de ensanchar la
   columna, para que el concentrado quepa en 1366 px aun con notas,
   complementos y dólares. Lo que va después de « · » (EX-00001, TC 17.25)
   nunca se corta: lo protege el filtro marca_sin_corte. */
.tabla--facturas .marca-chip { white-space: normal; line-height: 1.35; }
/* Y para que quepa aun en 1280 px (una laptop de 1920 con la escala de
   Windows al 150 %) con la vista más pesada (todos los meses y tipos,
   dólares y retenciones): cuando falta espacio, la moneda baja debajo del
   importe y "Pago parcial" se parte. Los importes nunca se cortan (no tienen
   espacios). Con espacio de sobra todo sigue en una línea. */
.tabla--facturas td.cifra, .tabla--facturas .celda-estado .punto { white-space: normal; }

/* Pagos en el detalle de una factura (oct 2026): cuatro columnas con poco
   aire, para que quepan en la columna principal desde 1181 px aunque traigan
   la CLABE completa y la etiqueta "Otra cuenta". Desde 1024 px hacia abajo,
   tarjetas (tabla-tarjetas). */
.tabla--pagos th, .tabla--pagos td { padding-left: 9px; padding-right: 9px; }
.tabla--pagos .etiqueta { margin-top: 3px; }
/* La clave de rastreo (hasta 30 caracteres, sin espacios) baja de renglón
   en vez de ensanchar la tabla de pagos. */
.tabla--pagos .pago__rastreo { overflow-wrap: anywhere; }

/* Zona para adjuntar archivos en el celular (oct 2026): estilos.css ya
   oculta el botón «Elegir archivo» abajo de 620 px (toda la zona se puede
   tocar), pero en el panel «.marco .boton» lo volvía a mostrar y el texto
   quedaba de 17 px de ancho o encimado con el botón. */
@media (max-width: 620px) { .marco .archivo__boton { display: none; } }

/* ==========================================================================
   Pantallas de detalle (ficha de proveedor y detalle de factura)
   Estructura de la propuesta final: regreso con filtros, encabezado con
   acciones agrupadas, tarjetas de resumen, columna principal y columna de
   detalles a la derecha.
   ========================================================================== */
.volver { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; margin-bottom: 12px; text-decoration: none; }
.volver svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.volver:hover { text-decoration: underline; }

.detalle-encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.detalle-encabezado__texto { display: flex; flex-direction: column; gap: 6px; min-width: 260px; flex: 1; }
.detalle-encabezado__tipo { font-size: .8rem; color: var(--tinta-suave); }
.detalle-encabezado__titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detalle-encabezado__titulo h1 { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; }
.detalle-encabezado__sub { color: #3b4744; }
.detalle-encabezado__acciones { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.detalle-encabezado__nota { flex-basis: 100%; text-align: right; font-size: .8rem; color: var(--tinta-suave); margin: 2px 0 0; }
.boton-icono { width: 40px; padding: 0; }
.boton-icono svg { width: 18px; height: 18px; fill: currentColor; }

.tarjetas-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tarjeta-resumen { background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tarjeta-resumen__rotulo { font-size: .78rem; color: var(--tinta-suave); }
.tarjeta-resumen__valor { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tarjeta-resumen__nota { font-size: .8rem; color: var(--tinta-suave); }
.tarjeta-resumen--pendiente { background: #fdf8e8; border-color: #f1dfa8; }
.tarjeta-resumen--pendiente .tarjeta-resumen__rotulo, .tarjeta-resumen--pendiente .tarjeta-resumen__valor,
.tarjeta-resumen--pendiente .tarjeta-resumen__nota { color: #6b5210; }
.tarjeta-resumen--alerta { background: var(--alerta-bg); border-color: #f0c9c5; }
.tarjeta-resumen--alerta .tarjeta-resumen__rotulo, .tarjeta-resumen--alerta .tarjeta-resumen__valor,
.tarjeta-resumen--alerta .tarjeta-resumen__nota { color: #8f2c23; }
.barra-avance { height: 6px; border-radius: 999px; background: #edf0ef; overflow: hidden; margin-top: 4px; }
.barra-avance__lleno { display: block; height: 100%; background: var(--acento); }

.bloque { background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: 8px; margin-bottom: 16px; min-width: 0; }
.bloque__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--borde-suave); }
.bloque__cabeza h2 { margin: 0; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.bloque__cuerpo { padding: 16px 18px; }
.bloque__cuerpo > :first-child { margin-top: 0; }
.bloque__cuerpo > :last-child { margin-bottom: 0; }
.bloque--sin-relleno .bloque__cuerpo { padding: 0; }
.etiqueta-direccion { font-size: .74rem; font-weight: 500; color: var(--tinta-suave); border: 1px solid var(--borde-suave); border-radius: 999px; padding: 1px 8px; }

.detalle-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.detalle-columnas__lateral .bloque__cabeza h2 { font-size: .92rem; }
@media (max-width: 1180px) { .detalle-columnas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .tarjetas-resumen { grid-template-columns: minmax(0, 1fr); } }

.propiedades { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.propiedades dt { font-size: .76rem; color: var(--tinta-suave); margin-bottom: 2px; }
.propiedades dd { margin: 0; overflow-wrap: anywhere; }
.propiedades .mono { font-size: .86rem; }
.pares-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
@media (max-width: 760px) { .pares-2 { grid-template-columns: minmax(0, 1fr); } }

.lista-empresas { list-style: none; margin: 0; padding: 0; }
.lista-empresas li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--borde-suave); }
.lista-empresas li:first-child { border-top: 0; padding-top: 0; }
.lista-empresas__esta { font-size: .76rem; color: var(--tinta-suave); font-weight: 400; }

.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--borde-suave); display: flex; flex-direction: column; gap: 10px; }
.linea-tiempo__fecha { font-size: .8rem; color: var(--tinta-suave); margin-right: 6px; font-variant-numeric: tabular-nums; }
.linea-tiempo__quien { color: var(--tinta-suave); }

.copiar { border: 0; background: none; color: var(--acento); cursor: pointer; padding: 2px 4px; vertical-align: middle; }
.copiar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* --- revisión de documentos: lista a la izquierda, visor a la derecha ----- */
.revision-documentos { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.revision-documentos__lista { padding: 16px 18px; border-right: 1px solid var(--borde-suave); min-width: 0; }
.revision-documentos__visor { min-width: 0; }
.revision-documentos__visor .visor { border: 0; box-shadow: none; margin: 0; border-radius: 0 0 8px 0; }
@media (max-width: 1000px) {
  .revision-documentos { grid-template-columns: minmax(0, 1fr); }
  .revision-documentos__lista { border-right: 0; border-bottom: 1px solid var(--borde-suave); }
}

/* --- diálogos (rechazar, bloquear) --------------------------------------- */
.dialogo { border: 0; border-radius: 10px; padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 50px rgba(28, 37, 35, .3); color: var(--tinta); }
.dialogo::backdrop { background: rgba(28, 37, 35, .4); }
.dialogo__cuerpo { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.dialogo__cuerpo h2 { margin: 0; font-size: 1.1rem; }
.dialogo__cuerpo p { margin: 0; color: var(--tinta-suave); }
.dialogo textarea { width: 100%; box-sizing: border-box; min-height: 90px; resize: vertical; }
.dialogo__acciones { display: flex; justify-content: flex-end; gap: 8px; }
.boton--peligro { background: var(--alerta); border-color: var(--alerta); color: #fff; }
.boton--peligro:hover { background: #8a2a21; border-color: #8a2a21; color: #fff; }
.detalle-encabezado .resolucion { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; margin-top: 0; }
.resolucion form { margin: 0; }
.copiar--hecho { color: var(--listo); }
.importes-resumen { margin: 14px 18px 16px auto; width: min(320px, calc(100% - 36px)); display: grid; grid-template-columns: 1fr auto; row-gap: 6px; font-variant-numeric: tabular-nums; }
.importes-resumen dt { color: var(--tinta-suave); }
.importes-resumen dd { margin: 0; text-align: right; }
.importes-resumen__total { font-weight: 600; color: var(--tinta) !important; padding-top: 6px; border-top: 1px solid var(--borde-suave); }
.pago-desplegable { border-top: 1px solid var(--borde-suave); }
.pago-desplegable__resumen { padding: 12px 18px; cursor: pointer; font-weight: 600; color: var(--acento); list-style: none; }
.pago-desplegable__resumen::-webkit-details-marker { display: none; }
.pago-desplegable__resumen::before { content: "+ "; }
.pago-desplegable[open] .pago-desplegable__resumen::before { content: "− "; }
.pago-desplegable .pago-nuevo { margin: 0; padding: 0 18px 18px; border-top: 0; }
.detalle-encabezado h1.mono { font-size: 1.6rem; }

/* ==========================================================================
   Armonía con lo que ya existía (R4, oct 2026): las pantallas del panel que
   conservan tarjetas, tablas y avisos de antes los ven con la misma forma
   que los componentes nuevos (esquinas, bordes y encabezados de tabla).
   ========================================================================== */
.marco .tarjeta { border-radius: 8px; border-color: var(--borde-suave); box-shadow: none; }
.marco .tabla th { background: #f7f9f8; font-size: .76rem; font-weight: 500; color: var(--tinta-suave); text-transform: none; letter-spacing: 0; }
.marco .tabla td { border-top-color: var(--borde-suave); }
.marco .aviso { border-radius: 8px; }
.resultados-busqueda { margin-bottom: 16px; }
.bitacora__datos { max-width: 420px; overflow-wrap: anywhere; font-family: 'IBM Plex Mono', monospace; font-size: .72rem; }

/* ==========================================================================
   Portal del proveedor (R4b, oct 2026): las secciones como pestañas en la
   barra de la empresa, el menú de la persona y las tarjetas con la misma
   forma que el panel. Colores y letra siguen siendo los de cada empresa.
   ========================================================================== */
.barra__secciones { display: flex; gap: 4px; align-items: center; }
.barra__sesion .menu-usuario { margin-left: 8px; }
.barra__sesion .menu-usuario__panel { text-align: left; }
.lienzo .tarjeta { border-radius: 8px; }
.lienzo .resultados, .lienzo .panel-filtros { border-color: var(--borde); }
.lienzo .encabezado-pagina h1 { font-size: 1.6rem; }
/* En el celular: la marca arriba (sin el rótulo, para que quepa) y debajo
   las pestañas a la izquierda y el menú de la persona a la derecha. */
@media (max-width: 700px) {
  .barra__interior { flex-wrap: wrap; row-gap: 10px; }
  .barra__rotulo { display: none; }
  .barra__marca { min-width: 0; max-width: 100%; }
  .barra__sesion { flex: 1 1 100%; justify-content: space-between; flex-wrap: nowrap; min-width: 0; }
  .barra__secciones { min-width: 0; overflow-x: auto; }
  .barra__secciones .barra__enlace { white-space: nowrap; }
  .barra__sesion .menu-usuario { margin-left: auto; }
  .barra__sesion .menu-usuario__quien, .barra__sesion .menu-usuario__flecha { display: none; }
}
/* El área de contenido del portal toma el ancho de lo que trae adentro; con
   una tabla ancha se estiraba más que la pantalla del celular. Las páginas
   con tablas o filtros ocupan el ancho disponible (hasta su máximo), y la
   tabla se desplaza dentro de su caja. */
.lienzo:has(.tabla-contenedor), .lienzo:has(.panel-filtros), .lienzo:has(.encabezado-pagina) { width: 100%; box-sizing: border-box; min-width: 0; }

/* --- botones de descarga (XML, PDF, comprobante) -------------------------- */
.descargas { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.boton-descarga {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px;
  border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie);
  color: var(--acento); font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.boton-descarga:hover { border-color: var(--acento); background: var(--acento-claro); color: var(--acento); text-decoration: none; }
.boton-descarga svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.boton-descarga--mini { min-height: 24px; padding: 0 7px; font-size: .74rem; margin-left: 4px; }
.pago-linea { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-top: 4px; }

/* ==========================================================================
   Registro por pasos y expediente del proveedor (R4c, oct 2026)
   ========================================================================== */
.registro { grid-template-columns: 260px minmax(0, 1fr); gap: 28px; }
.indice { background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 8px; top: 24px; }
.indice__paso { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-bottom: 0; border-radius: 6px; }
.indice__paso + .indice__paso::before { content: ""; position: absolute; left: 23px; top: -8px; width: 2px; height: 16px; background: var(--borde); }
.indice__num {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--borde); background: var(--superficie); color: var(--tinta-suave); font-size: .82rem; font-weight: 600;
}
.indice__paso--listo .indice__num { background: var(--acento); border-color: var(--acento); color: #fff; }
.indice__paso--actual { background: var(--acento-claro); }
.indice__paso--actual .indice__num { border-color: var(--acento); color: var(--acento); background: var(--superficie); }
.indice__texto { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.registro__cabeza { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--borde); }
.registro__paso { margin: 0 0 4px; font-size: .8rem; font-weight: 600; color: var(--acento); }
.registro__cabeza h1 { margin: 0 0 4px; }
.registro__resumen { margin: 0; color: var(--tinta-suave); }
.registro__avance { height: 6px; margin-top: 12px; border-radius: 999px; background: var(--concreto); overflow: hidden; }
.registro__avance span { display: block; height: 100%; background: var(--acento); border-radius: 999px; }
@media (max-width: 860px) {
  .registro { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .indice { position: static; display: flex; overflow-x: auto; gap: 4px; padding: 6px; }
  .indice__paso { flex: 0 0 auto; padding: 6px 10px; }
  .indice__paso + .indice__paso::before, .indice__resumen { display: none; }
}

.expediente-estado { margin-bottom: 16px; }
.expediente-estado > .aviso:last-child, .expediente-estado > .grupo__ayuda:last-child { margin-bottom: 0; }
.bloque .seccion-lista { margin: 0; }
.bloque .seccion-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.bloque .seccion-item:first-child { padding-top: 0; }
.bloque .seccion-item:last-child { border-bottom: 0; padding-bottom: 0; }
.bloque .seccion-item__titulo { font-weight: 600; }
.bloque .seccion-item__valor { color: var(--tinta-suave); font-size: .92rem; margin-top: 2px; }
.lienzo .tarjetas-resumen { margin-bottom: 16px; }
.lienzo .bloque { border-color: var(--borde); }

/* ==========================================================================
   Tableta y celular (R4d, oct 2026)
   - Hasta 1024 px las listas se vuelven tarjetas: un renglón por tarjeta,
     el dato principal arriba y cada dato con su etiqueta (la pone marco.js
     a partir del encabezado de la columna). Mismo HTML que en escritorio.
   - Hasta 760 px los filtros se pliegan detrás del botón "Filtros".
   ========================================================================== */
.panel-filtros__alternar { display: none; }
.panel-filtros__alternar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 1024px) {
  .tabla-contenedor:has(> table.tabla-tarjetas) { overflow: visible; }
  table.tabla-tarjetas, table.tabla-tarjetas > tbody, table.tabla-tarjetas > tbody > tr,
  table.tabla-tarjetas > tbody > tr > td, table.tabla-tarjetas > tfoot, table.tabla-tarjetas > tfoot > tr { display: block; width: auto; }
  table.tabla-tarjetas > thead { display: none; }
  table.tabla-tarjetas > tbody > tr {
    position: relative; margin: 10px 12px; padding: 12px 14px;
    border: 1px solid var(--borde-suave); border-radius: 8px; background: var(--superficie);
  }
  table.tabla-tarjetas > tbody > tr:hover > td { background: transparent; }
  table.tabla-tarjetas > tbody > tr > td {
    position: relative; padding: 5px 0 5px 38%; min-height: 20px; border: 0; text-align: right; white-space: normal;
  }
  table.tabla-tarjetas > tbody > tr > td::before {
    content: attr(data-label); position: absolute; left: 0; top: 6px; width: 36%;
    text-align: left; font-size: .76rem; font-weight: 400; color: var(--tinta-suave); text-transform: none; letter-spacing: 0;
  }
  table.tabla-tarjetas > tbody > tr > td[data-label=""]::before { content: none; }
  table.tabla-tarjetas > tbody > tr > td.celda-titulo {
    padding: 0 36px 8px 0; margin-bottom: 4px; border-bottom: 1px solid var(--borde-suave);
    text-align: left; font-size: 1rem; font-weight: 600;
  }
  table.tabla-tarjetas > tbody > tr > td.celda-titulo::before { content: none; }
  table.tabla-tarjetas > tbody > tr > td.celda-oculta { display: none; }
  table.tabla-tarjetas > tbody > tr > td.seleccion { position: absolute; top: 10px; right: 10px; padding: 0; min-height: 0; }
  table.tabla-tarjetas > tbody > tr > td.seleccion::before { content: none; }
  table.tabla-tarjetas .tabla-datos__sub, table.tabla-tarjetas .tabla__sub { display: block; }
  table.tabla-tarjetas .marcas-chips, table.tabla-tarjetas .descargas { justify-content: flex-end; }
  table.tabla-tarjetas > tbody > tr > td[colspan] { padding-left: 0; text-align: left; }
  table.tabla-tarjetas > tbody > tr > td[colspan]::before { content: none; }
  table.tabla-tarjetas > tfoot > tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 14px; margin: 0 12px 10px; border-top: 1px solid var(--borde-suave); }
  table.tabla-tarjetas > tfoot > tr > td { padding: 0; border: 0; }
  table.tabla-tarjetas > tfoot > tr > td:empty { display: none; }
  table.tabla-tarjetas > tfoot > tr > td:first-child { flex: 1 1 100%; font-weight: 600; }
}

@media (max-width: 760px) {
  .panel-filtros__fila { flex-direction: column; align-items: stretch; }
  .panel-filtros__alternar { display: inline-flex; align-self: flex-start; }
  .panel-filtros:not(.panel-filtros--abierto) .filtro,
  .panel-filtros:not(.panel-filtros--abierto) .boton-filtros,
  .panel-filtros:not(.panel-filtros--abierto) .panel-filtros__mas { display: none !important; }
  .panel-filtros .filtro select { width: 100%; }
  .encabezado-pagina__acciones { width: 100%; }
  .resultados__barra { flex-wrap: wrap; }
}


/* En el panel, abajo de 960 px (menú como cajón) solo se ven las iniciales
   de la persona: con el nombre, la barra superior se salía de la pantalla.
   Va aquí y no en marco.css porque el menú de la persona se define en esta
   hoja, que carga después. */
@media (max-width: 959px) {
  .marco .menu-usuario__quien, .marco .menu-usuario__flecha { display: none; }
}
/* El dato principal va siempre arriba de la tarjeta, sea la columna que sea
   (en el concentrado es la cuarta), con la casilla de selección a su lado. */
@media (max-width: 1024px) {
  table.tabla-tarjetas > tbody > tr { display: flex; flex-direction: column; }
  table.tabla-tarjetas > tbody > tr > td.celda-titulo { order: -1; }
  table.tabla-tarjetas > tbody > tr > td.celda-titulo .tabla-datos__sub,
  table.tabla-tarjetas > tbody > tr > td.celda-titulo .tabla__sub { font-weight: 400; }
}
/* Encabezado del proveedor en tableta: hasta 1024 px solo las iniciales de
   la persona, y hasta 900 px sin el rótulo junto al logotipo (con logotipos
   anchos, como el de ADOMSA, la barra se salía de la pantalla a 768 px). */
@media (max-width: 1024px) {
  .barra__sesion .menu-usuario__quien, .barra__sesion .menu-usuario__flecha { display: none; }
}
@media (max-width: 900px) {
  .barra__rotulo { display: none; }
}

/* ==========================================================================
   Cierre del rediseño (R4e, oct 2026)
   ========================================================================== */

/* Enlaces de la interfaz: sin subrayado; se subrayan al pasar el mouse o
   con el teclado. Dentro de textos largos (el aviso de privacidad) siguen
   subrayados: ahí el color solo no basta para distinguirlos. */
a { text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
.documento a { text-decoration: underline; }
.tarjeta-resumen__nota a, .franja a, .aviso a, .grupo__ayuda a, .pie a,
.tabla-datos__sub a, .filtros-activos__limpiar, .lista-empresas a { font-weight: 600; }
/* El enlace de cada tarjeta de resumen va solo, en su renglón, abajo y a la
   izquierda (oct 2026): pegado a los datos se leía como parte del dato. */
.tarjeta-resumen__enlace { margin-top: auto; padding-top: 10px; align-self: flex-start; font-size: .86rem; font-weight: 600; }
.tarjeta-resumen__enlace::after { content: "\00a0›"; }

/* Avisos que se pueden cerrar. */
.aviso--cerrable { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.aviso__cerrar { flex: 0 0 auto; border: 0; background: none; color: inherit; cursor: pointer; padding: 2px; border-radius: 4px; opacity: .7; }
.aviso__cerrar:hover { opacity: 1; }
.aviso__cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; display: block; }

/* Pantallas de una sola tarea del proveedor (editar datos, subir factura,
   subir varias, documentos): una columna centrada con el regreso, el título
   y la tarjeta alineados entre sí. A todo lo ancho, un formulario se lee y
   se llena peor. */
.columna-tarea { max-width: 760px; margin: 0 auto; }
.columna-tarea--ancha { max-width: 860px; }

/* La casilla de selección dentro de la tarjeta, a la izquierda del título y
   alineada con su primera línea. Toda su área se puede tocar (es una
   etiqueta): no abre la factura por accidente. */
.seleccion__area { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 1024px) {
  table.tabla-tarjetas > tbody > tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
  table.tabla-tarjetas > tbody > tr > td { grid-column: 1 / -1; }
  table.tabla-tarjetas > tbody > tr > td.celda-titulo { grid-row: 1; padding: 0 0 8px; }
  table.tabla-tarjetas > tbody > tr:has(> td.seleccion) > td.celda-titulo { grid-column: 2; }
  table.tabla-tarjetas > tbody > tr > td.seleccion {
    position: static; grid-column: 1; grid-row: 1; align-self: stretch;
    padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--borde-suave);
  }
  table.tabla-tarjetas .seleccion__area { width: 32px; height: 26px; margin-left: -6px; align-items: flex-start; padding-top: 2px; }
  table.tabla-tarjetas .seleccion__area input { width: 18px; height: 18px; margin: 0; }
}

/* Tarjeta elegida en tableta y celular: borde del color de la empresa, sin
   pintar toda la tarjeta. Y en pantallas táctiles no hay "pasar el mouse":
   el sombreado de la fila se quedaba pegado después de tocarla. */
@media (max-width: 1024px) {
  table.tabla-tarjetas > tbody > tr > td,
  table.tabla-tarjetas > tbody > tr:hover > td,
  table.tabla-tarjetas > tbody > tr.fila--elegida > td { background: transparent; }
  table.tabla-tarjetas > tbody > tr.fila--elegida { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
}
@media (hover: none) {
  .tabla-datos tbody tr:hover td { background: transparent; }
  .tabla-datos tbody tr.fila--elegida td { background: var(--acento-claro); }
}

/* ==========================================================================
   Revisión visual de todo el portal (oct 2026), de 1440 a 320 px
   ========================================================================== */

/* Tarjetas en tableta y celular: una palabra muy larga (un correo, un folio
   fiscal) baja de renglón en lugar de salirse de la tarjeta. */
@media (max-width: 1024px) {
  table.tabla-tarjetas > tbody > tr > td { overflow-wrap: anywhere; }
}

/* Avisos por correo como tarjetas: la empresa junto a su casilla, en
   cuadrícula (dos columnas en el celular, una sola a 320 px). Los nombres no
   se parten. En escritorio el nombre lo da el encabezado de la columna. */
.aviso-casilla__empresa { display: none; }
@media (max-width: 1024px) {
  table.tabla-tarjetas.tabla--avisos > tbody > tr {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); column-gap: 8px;
  }
  table.tabla-tarjetas.tabla--avisos > tbody > tr > td { grid-column: auto; padding: 2px 0; text-align: left; overflow-wrap: normal; }
  table.tabla-tarjetas.tabla--avisos > tbody > tr > td.celda-titulo { grid-column: 1 / -1; padding: 0 0 8px; }
  table.tabla-tarjetas.tabla--avisos > tbody > tr > td::before { content: none; }
  .tabla--avisos .aviso-casilla { display: flex; align-items: center; gap: 8px; min-height: 34px; cursor: pointer; }
  .tabla--avisos .aviso-casilla input { flex: 0 0 auto; }
  .tabla--avisos .aviso-casilla__empresa { display: inline; font-size: .9rem; white-space: nowrap; }
}

/* Índice del registro en tableta y celular: el paso actual con su nombre y
   los demás solo con su número, repartidos a lo ancho. Antes iban todos con
   nombre y la tira se cortaba a la derecha. Abajo de 390 px, solo números
   (el nombre del paso ya está en el título de la página). */
@media (max-width: 860px) {
  .indice { overflow-x: visible; justify-content: space-between; }
  .indice__paso:not(.indice__paso--actual) { padding: 4px; }
  .indice__paso:not(.indice__paso--actual) .indice__texto { display: none; }
}
@media (max-width: 389px) {
  .indice__paso .indice__texto { display: none; }
  .indice__paso--actual { padding: 4px; }
}

/* Pestañas del portal del proveedor en celulares chicos: un poco menos de
   aire para que "Mi expediente" y "Mis facturas" quepan junto al menú. */
@media (max-width: 360px) {
  .barra__secciones { gap: 2px; }
  .barra__secciones .barra__enlace { padding: .35rem .45rem; }
}

/* El área de contenido en el celular ocupa el ancho de la pantalla y no el
   de lo que trae adentro (en el registro de PACH se salía 2 px a 320). */
@media (max-width: 480px) {
  .lienzo { width: 100%; box-sizing: border-box; min-width: 0; }
}