/* components/requerimientos/requerimientos.css
   Sección "Formato de requerimientos" (Operaciones): zonas de subida
   por arrastre + tabla dinámica + detalle de ofertas. Usa las variables
   de tema de base.css para heredar modo claro/oscuro. */

/* Centrado: con la barra lateral colapsada el área de contenido se
   vuelve muy ancha y el bloque quedaba pegado a la izquierda. */
.req-wrap { padding: 1.5rem 1.75rem; max-width: 82rem; margin-inline: auto; }

/* Las vistas de tabla usan TODO el ancho disponible: los volcados traen
   9-10 columnas y con el tope de 82rem la última quedaba cortada. */
.req-wrap-full { max-width: none; }

.req-title { font-size: 1.375rem; font-weight: 600; color: var(--text); margin-bottom: 0.25rem; }
.req-sub { color: var(--muted); font-size: 0.875rem; margin-bottom: 1.25rem; }

/* ── Zonas de subida ───────────────────────────────────────── */
.req-zonas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 56rem) {
  .req-zonas { grid-template-columns: 1fr; }
}

.req-zona-card {
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 0.75rem; padding: 1.125rem 1.25rem;
}
.req-zona-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.req-zona-titulo { font-size: 0.9375rem; font-weight: 600; color: var(--text); }
.req-zona-ayuda { font-size: 0.75rem; color: var(--muted); margin: 0.25rem 0 0.875rem; line-height: 1.45; }

.req-badge {
  font-size: 0.6875rem; font-weight: 500; padding: 0.125rem 0.5rem;
  border-radius: 62.5rem; background: var(--border-md); color: var(--muted);
  white-space: nowrap;
}
.req-badge-ok { background: var(--success-bg); color: var(--success); }

/* La zona de arrastre. Toda la caja es clickeable y enfocable con
   teclado (role=button + tabindex), no solo un botón escondido. */
.req-zona {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.375rem; min-height: 9rem; padding: 1rem;
  border: 0.125rem dashed var(--border-md); border-radius: 0.625rem;
  cursor: pointer; text-align: center;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.req-zona:hover { border-color: var(--accent); background: var(--bg); }
.req-zona:focus-visible { outline: 0.125rem solid var(--accent); outline-offset: 0.125rem; }

/* Reacción al arrastrar un archivo encima: la zona "se abre" y se
   remarca — es la única señal de que va a aceptar el archivo. */
.req-zona-activa {
  border-color: var(--accent); border-style: solid;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transform: scale(1.01);
}
.req-zona-lista { border-style: solid; border-color: color-mix(in srgb, var(--success) 55%, transparent); }
.req-zona-error { border-style: solid; border-color: var(--danger); }
.req-zona-ocupada { cursor: progress; border-style: solid; }

.req-zona-icono { color: var(--muted); display: flex; }
.req-zona-icono .icon-svg { width: 1.5rem; height: 1.5rem; }
.req-zona-lista .req-zona-icono { color: var(--success); }
.req-zona-error .req-zona-icono { color: var(--danger); }

.req-zona-accion { font-size: 0.8125rem; color: var(--text); font-weight: 500; }
.req-zona-formatos { font-size: 0.6875rem; color: var(--muted); letter-spacing: 0.02em; }

.req-zona-barra {
  width: 100%; height: 0.375rem; border-radius: 62.5rem;
  background: var(--border-md); overflow: hidden;
}
.req-zona-barra-fill {
  height: 100%; width: 0; background: var(--accent);
  border-radius: 62.5rem; transition: width 120ms linear;
}
.req-zona-pct { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; }

.req-zona-msg { font-size: 0.75rem; margin-top: 0.625rem; line-height: 1.45; }
.req-msg-ok { color: var(--success); display: flex; align-items: center; gap: 0.25rem; }
.req-msg-ok .icon-svg { width: 0.875rem; height: 0.875rem; }
.req-msg-error { color: var(--danger); }

.req-zona-meta {
  margin-top: 0.75rem; padding-top: 0.75rem; border-top: 0.5px solid var(--border);
  font-size: 0.75rem; color: var(--text); display: grid; gap: 0.1875rem;
}
.req-meta-label { color: var(--muted); }
.req-meta-vacio { color: var(--muted); }

/* ── Resumen + Avanzar ─────────────────────────────────────── */
.req-resumen {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 0.75rem; padding: 1rem 1.25rem;
}
.req-resumen-txt { color: var(--muted); font-size: 0.8125rem; }
.req-resumen-datos { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.req-dato { display: flex; flex-direction: column; gap: 0.125rem; }
.req-dato-num { font-size: 1.25rem; font-weight: 600; color: var(--text); line-height: 1.1; }
.req-dato-fecha { font-size: 1rem; }
.req-dato-ok { color: var(--success); }
.req-dato-mal { color: var(--danger); }
.req-dato-lbl { font-size: 0.6875rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

.req-avanzar { display: inline-flex; align-items: center; gap: 0.375rem; }
.req-avanzar[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Tablas ────────────────────────────────────────────────
   Las dos tablas de esta sección se montan con el DataGrid
   (components/datagrid/), así que aquí ya no hay estilos de <table>:
   solo el layout que le da altura al grid. Ver estado_proyecto_v11.md §9. */

/* El grid se dimensiona solo y scrollea por dentro: la vista que lo
   hospeda tiene que ser una columna flexible de altura completa, y el
   hueco del grid el que crece. Sin esto el grid colapsa a 0 de alto. */
.req-root-grid { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.req-wrap-grid {
  position: relative;   /* ancla de .req-selbar */
  /* OJO con margin-inline: auto (lo hereda de .req-wrap): dentro de un
     contenedor flex en columna, un margen automático deja de estirar el
     item y lo encoge a su contenido — por eso la tabla salía angosta y
     centrada en vez de usar la pantalla. Se anula aquí. */
  margin-inline: 0; max-width: none; width: 100%; align-self: stretch;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 1.25rem 1.5rem 0;
}
.req-wrap-grid .req-sub { margin-bottom: 0.5rem; }

/* El datagrid trae su propio padding lateral (1.25rem): se compensa para
   que su toolbar quede alineada con el título de la vista y la tabla
   llegue al borde, igual que en Clientes o Proveedores. */
.req-grid-host { flex: 1; min-height: 0; margin-inline: -1.25rem; }

.req-toolbar {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.req-buscador { max-width: 34rem; flex: 1 1 auto; min-width: 0; }

/* Botón que enciende el modo selección. Al estar activo se vuelve el
   botón de "salir": mismo lugar, misma tecla mental, sin un segundo
   control que aprenderse. */
.req-btn-cotizar { flex: 0 0 auto; white-space: nowrap; }
.req-btn-cotizar.activo {
  color: var(--accent); border-color: var(--accent);
  background: var(--accent-bg);
}

/* ── Barra del modo selección ────────────────────────────────────────
   Flota sobre la tabla, pegada al fondo del área de contenido. Siempre
   está en el DOM y solo cambia de clase: así entra y sale con una
   transición continua y el grid nunca se remonta (remontarlo tiraría
   lo que el usuario lleva marcado). */
.req-selbar {
  /* Absoluta respecto a .req-wrap-grid (que ya es un flex en columna que
     ocupa todo el alto): sticky no sirve aquí porque el que scrollea es
     el viewport del grid, no esta caja — la barra quedaría empujada
     debajo del fondo de la pantalla. */
  position: absolute; bottom: 3.5rem; left: 50%;   /* libre del pie y el paginador del grid */
  z-index: 20;
  display: flex; align-items: center; gap: 0.75rem;
  max-width: calc(100% - 3rem);
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  background: var(--surface);
  border: 0.5px solid var(--border-md);
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.18);
  /* Oculta: fuera de foco, sin ocupar espacio ni recibir clics. */
  opacity: 0; transform: translate(-50%, 0.75rem) scale(0.98);
  pointer-events: none; visibility: hidden;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 200ms;
}
.req-selbar.visible {
  opacity: 1; transform: translate(-50%, 0);
  pointer-events: auto; visibility: visible;
  transition-delay: 0s;
}
.req-selbar-info { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.req-selbar-info strong { font-size: 0.875rem; color: var(--text); }
.req-selbar-deleg { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.req-selbar-deleg-activa { color: var(--accent); font-weight: 600; }
.req-selbar-link {
  padding: 0.25rem 0.375rem;
  font-family: inherit; font-size: 0.75rem; color: var(--muted);
  background: none; border: 0; border-radius: 0.375rem; cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.req-selbar-link:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.req-selbar-ok { white-space: nowrap; }
.req-selbar-ok:disabled { opacity: 0.45; cursor: not-allowed; }
.req-selbar-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  color: var(--muted); background: none; cursor: pointer;
  border: 0; border-radius: 0.5rem;
  transition: color 120ms ease, background 120ms ease;
}
.req-selbar-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .req-selbar,
  .req-selbar.visible { transition: opacity 1ms linear; transform: translate(-50%, 0); }
}

/* Clave sin cruce en el catálogo de productos: es un hueco real, se dice
   en gris cursiva en vez de dejar la celda vacía. */
.req-dg-muted { color: var(--muted); font-style: italic; }

/* ── Encabezado de la vista de ofertas ─────────────────────
   La clave y sus dos descripciones (catálogo y portal), para no tener
   que volver a la tabla a leerlas. */
.req-clave-head { margin-top: 0.875rem; }

.req-clave-linea { display: flex; align-items: center; gap: 0.625rem; }
.req-clave-txt {
  margin-bottom: 0;
  /* La clave se lee dígito por dígito para cotejarla contra el portal:
     ancho fijo y un poco de aire entre grupos. */
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}

.req-copiar {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  padding: 0.25rem 0.5rem;
  font-family: inherit; font-size: 0.75rem; font-weight: 500;
  color: var(--muted); background: none; cursor: pointer;
  border: 0.5px solid var(--border-md); border-radius: 0.4375rem;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.req-copiar:hover { color: var(--text); border-color: var(--text); }
.req-copiar-ok  { color: var(--success); border-color: var(--success); }
.req-copiar-mal { color: var(--danger);  border-color: var(--danger); }

.req-desc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 0.25rem 1.5rem; margin: 0.5rem 0 0.625rem;
}
.req-desc-item { min-width: 0; }
.req-desc-item dt {
  font-size: 0.6875rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.req-desc-item dd { margin: 0.0625rem 0 0; color: var(--text); font-size: 0.875rem; line-height: 1.35; }
.req-desc-sub { color: var(--muted); }


/* -- Color por valor en "Por confirmar" -----------------------------
   La misma clave (paleta fria) y la misma delegacion (paleta calida)
   se pintan siempre del mismo tono, asi los renglones repetidos se
   agrupan a la vista sin tener que ordenar. Son colores apagados de
   sistema empresarial: el tono fuerte va en el TEXTO y en una barra
   lateral de 3 px, y el fondo es apenas un velo del 11 % sobre --surface
   (opaco a proposito: la columna de clave va congelada y un fondo
   translucido dejaria ver los renglones que pasan por debajo). Con
   eso hay contraste para distinguirlos sin que la tabla grite. Las dos
   familias no se cruzan (frias vs calidas): a un vistazo se ve cual
   columna es cual. El indice lo elige claseColor() en el JS. */
:root {
  --req-c0: #2E5FA3; --req-c1: #0E6E70; --req-c2: #4B4FA8; --req-c3: #1E6B4C; --req-c4: #37718F; --req-c5: #6B4E9E; --req-c6: #55606E; --req-c7: #2C7A6B;
  --req-d0: #A65418; --req-d1: #9B3B57; --req-d2: #8A6A16; --req-d3: #A8442F; --req-d4: #6F5B3E; --req-d5: #7E4E8C; --req-d6: #5F6B2A; --req-d7: #B07A12;
}
@media (prefers-color-scheme: dark) {
  :root {
    --req-c0: #7FA9E8; --req-c1: #4FBDBD; --req-c2: #9AA0F0; --req-c3: #5FC08D; --req-c4: #8FBEDC; --req-c5: #B79AEB; --req-c6: #A6B2C2; --req-c7: #62C4AE;
    --req-d0: #E8A05F; --req-d1: #E0808C; --req-d2: #D6B24F; --req-d3: #E8917A; --req-d4: #C6A784; --req-d5: #CF9BD8; --req-d6: #B0C067; --req-d7: #E0BE5A;
  }
}
[data-theme="light"] {
  --req-c0: #2E5FA3; --req-c1: #0E6E70; --req-c2: #4B4FA8; --req-c3: #1E6B4C; --req-c4: #37718F; --req-c5: #6B4E9E; --req-c6: #55606E; --req-c7: #2C7A6B;
  --req-d0: #A65418; --req-d1: #9B3B57; --req-d2: #8A6A16; --req-d3: #A8442F; --req-d4: #6F5B3E; --req-d5: #7E4E8C; --req-d6: #5F6B2A; --req-d7: #B07A12;
}
[data-theme="dark"] {
  --req-c0: #7FA9E8; --req-c1: #4FBDBD; --req-c2: #9AA0F0; --req-c3: #5FC08D; --req-c4: #8FBEDC; --req-c5: #B79AEB; --req-c6: #A6B2C2; --req-c7: #62C4AE;
  --req-d0: #E8A05F; --req-d1: #E0808C; --req-d2: #D6B24F; --req-d3: #E8917A; --req-d4: #C6A784; --req-d5: #CF9BD8; --req-d6: #B0C067; --req-d7: #E0BE5A;
}

.dg-td.req-c-0 { color: var(--req-c0); background: color-mix(in srgb, var(--req-c0) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-c0); }
.dg-td.req-c-1 { color: var(--req-c1); background: color-mix(in srgb, var(--req-c1) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-c1); }
.dg-td.req-c-2 { color: var(--req-c2); background: color-mix(in srgb, var(--req-c2) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-c2); }
.dg-td.req-c-3 { color: var(--req-c3); background: color-mix(in srgb, var(--req-c3) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-c3); }
.dg-td.req-c-4 { color: var(--req-c4); background: color-mix(in srgb, var(--req-c4) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-c4); }
.dg-td.req-c-5 { color: var(--req-c5); background: color-mix(in srgb, var(--req-c5) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-c5); }
.dg-td.req-c-6 { color: var(--req-c6); background: color-mix(in srgb, var(--req-c6) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-c6); }
.dg-td.req-c-7 { color: var(--req-c7); background: color-mix(in srgb, var(--req-c7) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-c7); }
.dg-td.req-d-0 { color: var(--req-d0); background: color-mix(in srgb, var(--req-d0) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-d0); }
.dg-td.req-d-1 { color: var(--req-d1); background: color-mix(in srgb, var(--req-d1) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-d1); }
.dg-td.req-d-2 { color: var(--req-d2); background: color-mix(in srgb, var(--req-d2) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-d2); }
.dg-td.req-d-3 { color: var(--req-d3); background: color-mix(in srgb, var(--req-d3) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-d3); }
.dg-td.req-d-4 { color: var(--req-d4); background: color-mix(in srgb, var(--req-d4) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-d4); }
.dg-td.req-d-5 { color: var(--req-d5); background: color-mix(in srgb, var(--req-d5) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-d5); }
.dg-td.req-d-6 { color: var(--req-d6); background: color-mix(in srgb, var(--req-d6) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-d6); }
.dg-td.req-d-7 { color: var(--req-d7); background: color-mix(in srgb, var(--req-d7) 11%, var(--surface)); box-shadow: inset 0.1875rem 0 0 var(--req-d7); }