/* LicitaScan · componentes propios: botones, campos, filtros, chips, píldoras, estado, tabla
   de oportunidades, paginación y estados vacíos. Sin frameworks. */

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

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
    height: var(--alto-control); padding: 0 var(--e4);
    border: 1px solid transparent; border-radius: var(--radio);
    font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.boton--primario { background: var(--acento); border-color: var(--acento); color: var(--superficie); }
.boton--primario:hover { filter: brightness(.92); }
.boton--secundario { background: var(--superficie); border-color: var(--borde-fuerte); color: var(--tinta); }
.boton--secundario:hover { background: var(--hover); }
.boton--ancho { width: 100%; }

/* ---------- Campos ---------- */

.campo { position: relative; }
.campo--busqueda { flex: 1 1 18rem; min-width: 0; }
.campo__icono {
    position: absolute; left: var(--e3); top: 50%; transform: translateY(-50%);
    width: 1.25rem; height: 1.25rem; color: var(--texto-2); pointer-events: none;
}
.campo__control {
    width: 100%; height: var(--alto-control); padding: 0 var(--e3);
    background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
}
.campo--busqueda .campo__control { padding-left: 2.5rem; }
.campo__control::placeholder { color: var(--texto-2); opacity: 1; }
.campo__control:hover { border-color: var(--texto-2); }

.campo-etiquetado { display: flex; flex-direction: column; gap: var(--e1); }
.campo-etiquetado label { font-size: var(--t-meta); font-weight: 600; color: var(--texto-2); }

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

.filtros { position: relative; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borde); }
.filtros__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }

.mas-filtros { flex: none; }
.mas-filtros__resumen { display: inline-flex; list-style: none; }
.mas-filtros__resumen::-webkit-details-marker { display: none; }
.mas-filtros[open] > .mas-filtros__resumen { background: var(--acento-tenue); border-color: var(--acento); }
/* El panel se superpone a los resultados (anclado a .filtros): abrirlo no desplaza nada. */
.mas-filtros__panel {
    position: absolute; z-index: 8; left: var(--e4); right: var(--e4); top: calc(100% - var(--e1));
    display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--e3) var(--e4);
    padding: var(--e4);
    background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-grande);
    box-shadow: 0 12px 32px rgba(27, 39, 51, .16);
}

.contador {
    display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 var(--e1);
    background: var(--acento-tenue); color: var(--tinta); border-radius: 999px; font-size: var(--t-pildora);
}

/* ---------- Resultados ---------- */

.resultados { transition: opacity .15s; }
.resultados.htmx-request { opacity: .5; }

.chips { display: flex; flex-wrap: wrap; gap: var(--e2); padding: var(--e3) var(--e4) 0; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 1.75rem; padding: 0 var(--e2) 0 var(--e3);
    background: var(--acento-tenue); color: var(--tinta); border: 1px solid transparent; border-radius: 999px;
    font-size: var(--t-meta); text-decoration: none;
}
.chip:hover { border-color: var(--acento); text-decoration: none; }
.chip__etiqueta { color: var(--texto-2); }

.aviso { margin: var(--e3) var(--e4) 0; padding: var(--e2) var(--e3); background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); }
.aviso summary { display: flex; align-items: center; gap: var(--e2); font-weight: 600; cursor: pointer; }
.aviso summary .icono { color: var(--texto-2); }
.aviso p { margin-top: var(--e2); color: var(--texto-2); max-width: 60ch; }

.resultados__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); padding: 0 var(--e4); }
.resumen { padding: var(--e2) 0; color: var(--texto-2); }
.resumen strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

.densidad { display: inline-flex; align-items: center; gap: var(--e1); font-size: var(--t-meta); color: var(--texto-2); }
.densidad__etiqueta { margin-right: var(--e1); }
.densidad__opcion { padding: 2px var(--e3); border: 1px solid transparent; border-radius: 999px; color: var(--tinta); text-decoration: none; }
.densidad__opcion:hover { border-color: var(--borde-fuerte); }
.densidad__opcion[aria-current="true"] { background: var(--acento-tenue); border-color: var(--acento); font-weight: 600; }

/* ---------- Tabla de oportunidades ---------- */

.tabla-contenedor { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
    padding: var(--e2) var(--e4); background: var(--papel); text-align: left;
    border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
    font-size: var(--t-meta); font-weight: 600; color: var(--texto-2);
}
.tabla td { padding: 0.625rem var(--e4); border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tbody tr:hover td { background: var(--hover); }
.tabla th.num, .tabla th.cierre { text-align: right; }

.num, .cierre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.num { width: 10rem; }
.cierre { width: 10.5rem; }
.sin-dato { color: var(--texto-2); }

.fila__linea { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--e3); align-items: baseline; }
.fila__nombre {
    font-size: var(--t-fila); font-weight: 600; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
a.fila__nombre { color: var(--tinta); text-decoration: none; }
a.fila__nombre:hover { color: var(--acento); text-decoration: underline; }

.fila__meta, .item, .fila__sin-items { margin-left: calc(6.5rem + var(--e3)); }
.fila__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e3);
    margin-top: var(--e1); color: var(--texto-2); font-size: var(--t-meta);
}

/* Estado: punto + palabra, nunca solo color */
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-pildora); font-weight: 600; white-space: nowrap; }
.estado::before {
    content: ""; width: .5rem; height: .5rem; flex: none; border-radius: 50%;
    border: 2px solid var(--texto-2); background: transparent; box-sizing: border-box;
}
.estado--publicada::before { background: var(--verde); border-color: var(--verde); }
.estado--adjudicada::before { background: var(--tinta); border-color: var(--tinta); }

.pildora {
    display: inline-block; padding: 0 var(--e2); border: 1px solid var(--borde-fuerte); border-radius: 999px;
    background: var(--superficie); color: var(--tinta); font-size: var(--t-pildora); font-weight: 600; line-height: 1.5;
}

/* Ítem: primero el nombre del catálogo (roman), debajo lo que escribió el comprador (cursiva y comillas) */
.item { display: grid; gap: 1px; margin-top: 6px; }
.item__nombre { font-weight: 500; }
.item__comprador {
    quotes: "\201C" "\201D"; font-style: italic; color: var(--texto-2);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.item__comprador--principal { color: var(--tinta); font-weight: 500; }
.item__mas { color: var(--texto-2); font-size: var(--t-meta); }

.fila__sin-items { display: flex; align-items: center; gap: 6px; margin-top: var(--e2); color: var(--texto-2); font-size: var(--t-meta); }

.cierre__fecha { display: block; }
.cierre__resto { display: inline-flex; align-items: center; gap: var(--e1); color: var(--texto-2); font-size: var(--t-meta); }

.leyenda { padding: var(--e3) var(--e4); color: var(--texto-2); font-size: var(--t-meta); }
.leyenda q { quotes: "\201C" "\201D"; font-style: italic; }

/* ---------- Densidad compacta (por defecto): ~70 px por fila ----------
   Interlineado 1,3 (1,45 es para texto corrido, no para filas de tabla), menos relleno vertical,
   el título en una línea, la meta en una línea y el ítem en una línea: primero el nombre del
   catálogo y, a continuación en la misma línea, lo que escribió el comprador (cursiva y comillas).
   El texto completo queda en el tooltip y en el detalle. */

/* Layout fijo: el ancho de las columnas de monto y cierre no depende del texto. Sin esto, el texto del
   comprador (sin saltos de línea) ensancharía la tabla y empujaría esas columnas fuera de la pantalla. */
:is(.oportunidades--compacta, .oportunidades--media) { table-layout: fixed; line-height: 1.3; }
:is(.oportunidades--compacta, .oportunidades--media) td.fila__principal { overflow: hidden; }
:is(.oportunidades--compacta, .oportunidades--media) th { padding: 6px var(--e4); }
:is(.oportunidades--compacta, .oportunidades--media) td { padding: 8px var(--e4); }
:is(.oportunidades--compacta, .oportunidades--media) .fila__nombre { font-size: var(--t-cuerpo); line-height: 1.3; -webkit-line-clamp: 1; }
:is(.oportunidades--compacta, .oportunidades--media) .fila__meta { flex-wrap: nowrap; gap: 0 var(--e3); margin-top: 2px; overflow: hidden; white-space: nowrap; }
:is(.oportunidades--compacta, .oportunidades--media) .fila__organismo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:is(.oportunidades--compacta, .oportunidades--media) .fila__region { flex: 0 0 auto; }
:is(.oportunidades--compacta, .oportunidades--media) .pildora { padding: 0 6px; line-height: 1.25; }
:is(.oportunidades--compacta, .oportunidades--media) .item { display: flex; align-items: baseline; gap: var(--e2); margin-top: 3px; overflow: hidden; white-space: nowrap; }
:is(.oportunidades--compacta, .oportunidades--media) .item__nombre { flex: 0 1 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
:is(.oportunidades--compacta, .oportunidades--media) .item__comprador { flex: 1 1 0; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; }
:is(.oportunidades--compacta, .oportunidades--media) .item__mas { flex: none; }
:is(.oportunidades--compacta, .oportunidades--media) .fila__sin-items { margin-top: 3px; }

/* Densidad media (por defecto): las mismas reglas de la compacta pero con más aire ENTRE las tres líneas
   de la fila (título, meta e ítem), no más relleno en los bordes: el relleno vertical de las celdas
   queda igual. Se apoya en el mismo bloque de arriba (:is) y solo cambia el ritmo vertical. */
.oportunidades--media { line-height: 1.4; }
.oportunidades--media .fila__meta { margin-top: 12px; }
.oportunidades--media .item { margin-top: 14px; }
.oportunidades--media .fila__sin-items { margin-top: 14px; }

/* ---------- Paginación y vacío ---------- */

.paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e1); padding: var(--e4); }
.paginacion__enlace {
    display: grid; place-items: center; min-width: var(--alto-control); height: var(--alto-control); padding: 0 var(--e2);
    border: 1px solid transparent; border-radius: var(--radio); color: var(--tinta); text-decoration: none; font-variant-numeric: tabular-nums;
}
.paginacion__enlace:hover { border-color: var(--borde-fuerte); }
.paginacion__enlace--actual { background: var(--acento); color: var(--superficie); font-weight: 600; }
.paginacion__hueco { display: grid; place-items: center; min-width: 1.5rem; color: var(--texto-2); }

.vacio { padding: var(--e6) var(--e4); text-align: center; color: var(--texto-2); display: grid; gap: var(--e2); justify-items: center; }
.vacio__titulo { color: var(--tinta); font-size: var(--t-seccion); font-weight: 600; }

/* ---------- Detalle de convocatoria ---------- */

.volver { display: inline-flex; align-items: center; gap: var(--e1); margin-bottom: var(--e3); color: var(--texto-2); font-size: var(--t-meta); text-decoration: none; }
.volver:hover { color: var(--acento); text-decoration: underline; }

.detalle__cabecera { margin-bottom: var(--e4); }
.detalle__etiquetas { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e2); }
.detalle__titulo { font-size: var(--t-pagina); font-weight: 650; line-height: 1.25; max-width: 60ch; }
.detalle__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e3); margin-top: var(--e2); color: var(--texto-2); }

.detalle__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--e5); align-items: start; }

.bloque { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: var(--e4) var(--e5); margin-bottom: var(--e4); scroll-margin-top: var(--e4); }
.bloque__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); font-size: var(--t-seccion); font-weight: 650; margin-bottom: var(--e3); }
.bloque__cuenta { font-size: var(--t-meta); font-weight: 400; color: var(--texto-2); }
.descripcion { white-space: pre-line; max-width: 75ch; line-height: 1.5; }

/* Datos clave */
.datos { display: grid; gap: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); }
.datos__fila { padding: var(--e3) var(--e4); border-top: 1px solid var(--borde); }
.datos__fila:first-child { border-top: 0; }
.datos dt { font-size: var(--t-meta); color: var(--texto-2); }
.datos dd { margin: 2px 0 0; }
.datos__monto { font-size: var(--t-seccion); font-weight: 650; font-variant-numeric: tabular-nums; }
.datos__sec { display: block; color: var(--texto-2); font-size: var(--t-meta); }

/* Cronograma: pasada, próxima (borde grueso de tinta: presión de tiempo, sin color) y pendiente. El texto va siempre en tinta. */
.cronograma { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e3); }
.hito { display: grid; gap: 2px; padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.hito__estado { display: inline-flex; align-items: center; gap: var(--e1); font-size: var(--t-pildora); font-weight: 600; color: var(--texto-2); }
.hito__nombre { font-weight: 600; }
.hito__fecha { font-variant-numeric: tabular-nums; }
.hito--proxima { padding: calc(var(--e3) - 1px); background: var(--hover); border: 2px solid var(--tinta); }
.hito--proxima .hito__estado { color: var(--tinta); }
.hito--proxima .hito__estado .icono { color: var(--tinta); }
.hito--proxima .hito__resto { font-weight: 700; }
.hito--pendiente { border-style: dashed; }
.hito__resto { font-size: var(--t-meta); font-variant-numeric: tabular-nums; }

/* Ítems */
.items-detalle { display: grid; }
.item-detalle { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--e4); padding: var(--e3) 0; border-top: 1px solid var(--borde); }
.item-detalle:first-child { border-top: 0; padding-top: 0; }
.item-detalle__textos { display: grid; gap: 2px; min-width: 0; }
.item-detalle .item__nombre { font-weight: 600; }
.item-detalle__comprador { quotes: "\201C" "\201D"; font-style: italic; color: var(--texto-2); max-width: 75ch; }
.item-detalle__comprador--principal { color: var(--tinta); font-weight: 500; }
.item-detalle__meta { display: flex; flex-wrap: wrap; gap: 0 var(--e3); color: var(--texto-2); font-size: var(--t-meta); font-variant-numeric: tabular-nums; }

.adj { display: grid; gap: 1px; align-content: start; font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.adj__proveedor { font-weight: 600; font-size: var(--t-cuerpo); }
.adj__rut { font-weight: 400; color: var(--texto-2); font-family: var(--mono); font-size: var(--t-pildora); }
.adj__fecha { color: var(--texto-2); }
.adj--sin { color: var(--texto-2); }

.documentos { display: grid; gap: var(--e2); }
.documentos li { display: flex; align-items: center; gap: var(--e2); }

@media (max-width: 1100px) {
    .detalle__cuerpo { grid-template-columns: minmax(0, 1fr); }
    .detalle__datos { order: -1; }
}

@media (max-width: 760px) {
    .bloque { padding: var(--e3) var(--e4); }
    .item-detalle { grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
}

/* ---------- Palabras clave: alcance de la vista, resaltado y configuración ---------- */

/* Qué se está viendo respecto de las palabras clave. Filtro activo = acento tenue (igual que los chips);
   el texto va en tinta. "Ver todas" siempre a un clic. */
.alcance {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3);
    margin: var(--e3) var(--e4) 0; padding: var(--e2) var(--e3);
    background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio);
}
.alcance .icono { color: var(--texto-2); }
.alcance--filtrado { background: var(--acento-tenue); border-color: var(--acento); }
.alcance--filtrado .icono { color: var(--acento); }
.alcance__texto { flex: 1 1 22rem; min-width: 0; }
.alcance__palabras { color: var(--texto-2); }
.alcance__ver-todas { flex: none; }
.alcance__enlace { flex: none; font-size: var(--t-meta); }

/* Resaltado de la coincidencia: fondo acento tenue y texto en tinta (nunca color sobre color) */
mark.coincidencia { background: var(--acento-tenue); color: var(--tinta); border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--acento); }

.item__n { flex: none; color: var(--texto-2); font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
:is(.oportunidades--compacta, .oportunidades--media) .item__n { flex: none; }

/* Pantalla de configuración */
.panel__nota { color: var(--texto-2); }
.mensajes { display: grid; gap: var(--e2); margin-bottom: var(--e3); }
.mensaje { padding: var(--e2) var(--e3); background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--tinta); border-radius: var(--radio); }
.mensaje--error { border-left-width: 6px; }
.mensaje--error::before { content: "⚠ "; font-weight: 700; }

.palabras { padding: var(--e4) var(--e5); }
.palabras__intro { max-width: 70ch; margin-bottom: var(--e4); }
.palabras__reglas { margin-top: var(--e2); display: grid; gap: var(--e1); color: var(--texto-2); list-style: disc; padding-left: var(--e5); }
.palabras__alta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e3); margin-bottom: var(--e4); padding-bottom: var(--e4); border-bottom: 1px solid var(--borde); }
.palabras__campo { flex: 1 1 18rem; max-width: 32rem; }
.palabras__error { color: var(--tinta); font-weight: 600; }
/* Con los campos arriba, el botón se alinea con el CAMPO (no con la etiqueta ni con el error que pueda tener debajo). */
.palabras__alta > .boton { margin-top: calc(var(--e1) + 1.05rem + var(--e1)); }
.palabras__error::before { content: "⚠ "; }
.palabras__editar { display: flex; gap: var(--e2); max-width: 32rem; }
.palabras__editar .campo__control { flex: 1; min-width: 0; }
.palabras__autor { color: var(--texto-2); font-size: var(--t-meta); }
.palabras__acciones { text-align: right; white-space: nowrap; }
.palabras__pie { margin-top: var(--e4); }
.palabras__tabla td { vertical-align: middle; }

.confirmar { position: relative; display: inline-block; }
.confirmar > summary { list-style: none; }
.confirmar > summary::-webkit-details-marker { display: none; }
.confirmar__panel {
    position: absolute; z-index: 5; right: 0; top: calc(100% + var(--e1)); width: 18rem; padding: var(--e3); text-align: left;
    display: grid; gap: var(--e2); background: var(--superficie); border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-grande); box-shadow: 0 12px 32px rgba(27, 39, 51, .16); white-space: normal;
}

@media (max-width: 760px) {
    .alcance { margin-left: var(--e3); margin-right: var(--e3); }
    .palabras { padding: var(--e3); }
    .palabras__editar { flex-direction: column; }
}

/* ---------- Ingreso ---------- */

.ingreso { min-height: 100vh; display: grid; place-items: center; padding: var(--e4); }
.ingreso__tarjeta { width: 100%; max-width: 22rem; padding: var(--e6); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); }
.ingreso__marca { display: flex; align-items: center; gap: var(--e2); color: var(--acento); font-weight: 700; font-size: var(--t-seccion); }
.ingreso__titulo { margin: var(--e4) 0; font-size: var(--t-pagina); font-weight: 650; }
.ingreso .campo-etiquetado { margin-bottom: var(--e3); }
.ingreso .boton--ancho { margin-top: var(--e4); }
.ingreso__error { margin-bottom: var(--e3); padding: var(--e2) var(--e3); background: var(--papel); border-left: 4px solid var(--tinta); border-radius: var(--radio); }

/* ---------- Responsive de la tabla: cada fila pasa a ser una tarjeta ---------- */

@media (max-width: 760px) {
    .filtros, .resultados__barra { padding-left: var(--e3); padding-right: var(--e3); }
    .mas-filtros__panel { left: var(--e3); right: var(--e3); }
    .densidad__etiqueta { display: none; }
    .chips, .aviso { margin-left: var(--e3); margin-right: var(--e3); padding-left: 0; padding-right: 0; }
    .aviso { padding: var(--e2) var(--e3); }

    .oportunidades thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .oportunidades, .oportunidades tbody { display: block; }
    .oportunidades tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--borde); padding: var(--e3); }
    .oportunidades td { border: 0; padding: 0; }
    .oportunidades td.fila__principal { grid-column: 1 / -1; }
    .oportunidades td.num, .oportunidades td.cierre { text-align: left; width: auto; margin-top: var(--e2); }
    .oportunidades td[data-titulo]::before {
        content: attr(data-titulo); display: block; font-size: var(--t-pildora); font-weight: 600; color: var(--texto-2);
    }
    .fila__linea { grid-template-columns: 1fr; row-gap: var(--e1); }
    .fila__meta, .item, .fila__sin-items { margin-left: 0; }
    .tabla tbody tr:hover td { background: none; }

    /* En pantallas angostas la fila compacta pasa a tarjeta y el texto puede ocupar más líneas. */
    :is(.oportunidades--compacta, .oportunidades--media) { line-height: 1.4; }
    :is(.oportunidades--compacta, .oportunidades--media) td { padding: 0; }
    :is(.oportunidades--compacta, .oportunidades--media) .fila__nombre { -webkit-line-clamp: 2; }
    :is(.oportunidades--compacta, .oportunidades--media) .fila__meta { flex-wrap: wrap; white-space: normal; overflow: visible; gap: var(--e1) var(--e3); }
    :is(.oportunidades--compacta, .oportunidades--media) .item { display: grid; white-space: normal; }
    :is(.oportunidades--compacta, .oportunidades--media) .item__nombre { max-width: none; white-space: normal; }
    :is(.oportunidades--compacta, .oportunidades--media) .item__comprador { display: -webkit-box; -webkit-line-clamp: 2; white-space: normal; }
}

/* ---------- Histórico de precios ---------- */

.panel__notas { display: grid; gap: var(--e3); color: var(--texto-2); font-size: var(--t-meta); line-height: 1.45; }
.panel__notas strong { color: var(--tinta); }
@media (max-width: 1100px) { .panel__notas { display: none; } }  /* el panel pasa a ser una franja de enlaces */

/* Período y unidad: selectores en píldoras. La opción activa va en acento sólido: es el control que más cambia
   lo que significa un precio, y tiene que verse. */
.periodo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); padding: var(--e3) var(--e4) 0; }
.periodo__control, .unidades { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); }
.unidades { padding: var(--e3) var(--e4) 0; }
.periodo__etiqueta { margin-right: var(--e2); font-weight: 600; }
.periodo__opcion {
    padding: var(--e1) var(--e3); border: 1px solid var(--borde-fuerte); border-radius: 999px;
    background: var(--superficie); color: var(--tinta); font-size: var(--t-cuerpo); text-decoration: none;
}
a.periodo__opcion:hover { border-color: var(--acento); text-decoration: none; }
.periodo__opcion[aria-current="true"] { background: var(--acento); border-color: var(--acento); color: var(--superficie); font-weight: 600; }
.periodo__cantidad { font-variant-numeric: tabular-nums; font-weight: 400; }
.periodo__rango, .periodo__nota { color: var(--texto-2); font-size: var(--t-meta); }
.periodo__rango strong { color: var(--tinta); }

/* Participación (ofertas leídas de las actas) y pestañas del listado del proveedor */
.participacion { padding-bottom: var(--e3); }
.participacion .nota-comparabilidad { margin: var(--e3) var(--e4) 0; }
.indicador__valor--vacio { color: var(--texto-2); }
.indicador__marca {
    display: inline-block; padding: 0 var(--e2); border: 1px solid var(--borde-fuerte); border-radius: 999px;
    font-size: var(--t-pildora); font-weight: 600; vertical-align: middle;
}
.pestanas { display: flex; flex-wrap: wrap; gap: var(--e1); padding: var(--e3) var(--e4) 0; }
.pestana {
    display: inline-flex; align-items: center; gap: var(--e2); padding: var(--e1) var(--e3); border: 1px solid var(--borde-fuerte);
    border-radius: 999px; background: var(--superficie); color: var(--tinta); text-decoration: none;
}
a.pestana:hover { border-color: var(--acento); text-decoration: none; }
.pestana[aria-current="true"] { background: var(--acento); border-color: var(--acento); color: var(--superficie); font-weight: 600; }
.pestana__cuenta { font-variant-numeric: tabular-nums; font-weight: 400; }
.pildora--ganada { border-color: var(--tinta); font-weight: 650; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e3); padding: var(--e3) var(--e4) 0; }
.indicador { display: grid; gap: 2px; align-content: start; padding: var(--e3) var(--e4); background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-grande); }
.indicador dd { margin: 0; }
.indicador dt { color: var(--texto-2); font-size: var(--t-meta); font-weight: 600; }
.indicador__valor { font-size: 1.5rem; font-weight: 650; line-height: 1.2; }
.indicador__valor--rango { font-size: 1.125rem; padding: 0.2rem 0; }
.indicador__nota { color: var(--texto-2); font-size: var(--t-meta); }

/* Tabla del histórico: columnas fijas para que el precio y su unidad siempre se vean. */
.historico { table-layout: fixed; line-height: 1.35; }
.historico th, .historico td { padding-left: var(--e3); padding-right: var(--e3); }
.historico th:nth-child(1) { width: 7.5rem; }
.historico th:nth-child(2) { width: 17%; }
.historico th:nth-child(4) { width: 5.5rem; }
.historico th:nth-child(5) { width: 11rem; }
.historico th:nth-child(6) { width: 16%; }
.historico td { overflow: hidden; padding-top: 8px; padding-bottom: 8px; }
.historico .num { width: auto; }
.h-principal, .h-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-sub { margin-top: 2px; color: var(--texto-2); font-size: var(--t-meta); }
.h-fecha time { font-weight: 600; font-variant-numeric: tabular-nums; }
.h-item__texto { color: var(--tinta); text-decoration: none; }
a.h-item__texto:hover { color: var(--acento); text-decoration: underline; }
.h-item__texto q { quotes: "\201C" "\201D"; font-style: italic; }
.h-item .h-sub { display: flex; align-items: center; gap: var(--e2); }
.h-precio strong { font-size: var(--t-fila); }

/* Densidades: la misma idea que en oportunidades (compacta / media / cómoda), con las filas del histórico. */
.historico--compacta td { padding-top: 6px; padding-bottom: 6px; }
.historico--compacta .h-comprador .h-sub, .historico--compacta .h-item .h-sub,
.historico--compacta .h-proveedor .h-sub, .historico--compacta .h-fecha .h-sub { display: none; }
/* La unidad es lo que da sentido al precio: se ve en todas las densidades. */
.historico--compacta .h-precio .h-sub { display: inline; margin-left: var(--e1); }
.historico--media td { padding-top: 10px; padding-bottom: 10px; }
.historico--comoda td { padding-top: 16px; padding-bottom: 16px; line-height: 1.5; }
.historico--comoda .h-sub { margin-top: 6px; }
.historico--comoda .h-item__texto {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal;
}

@media (max-width: 760px) {
    .periodo, .unidades, .indicadores { padding-left: var(--e3); padding-right: var(--e3); }

    .historico thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .historico, .historico tbody { display: block; }
    .historico tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2) var(--e3); border-bottom: 1px solid var(--borde); padding: var(--e3); }
    .historico td { border: 0; padding: 0 !important; }
    .historico td.h-item { grid-column: 1 / -1; order: -1; }
    .historico td.num { text-align: left; }
    .historico td[data-titulo]::before { content: attr(data-titulo); display: block; font-size: var(--t-pildora); font-weight: 600; color: var(--texto-2); }
    .historico .h-principal, .historico .h-sub { white-space: normal; }
    .historico .h-sub { display: block !important; margin-left: 0 !important; }
    .tabla tbody tr:hover td { background: none; }
}

/* Enlace desde un ítem del detalle al histórico de precios de ese producto */
.enlace-historial { display: inline-flex; align-items: center; gap: var(--e1); margin-top: var(--e1); width: fit-content; font-size: var(--t-meta); font-weight: 600; }

/* Aviso discreto pero siempre visible: la unidad no dice cuántas unidades trae. */
.nota-comparabilidad { display: flex; align-items: flex-start; gap: var(--e2); margin: var(--e3) var(--e4) 0; color: var(--texto-2); font-size: var(--t-meta); line-height: 1.4; }
.nota-comparabilidad .icono { flex: none; margin-top: 2px; }
@media (max-width: 760px) { .nota-comparabilidad { margin-left: var(--e3); margin-right: var(--e3); } }

/* Enlace externo a Mercado Público en la cabecera del detalle */
.detalle__externo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-top: var(--e3); }
.detalle__externo .boton { gap: var(--e2); }
.detalle__externo-nota { color: var(--texto-2); font-size: var(--t-meta); }

/* Marca en el listado: la empresa ya sigue esta oportunidad (texto + ícono, no solo color) */
.siguiendo { display: inline-flex; align-items: center; gap: var(--e1); flex: none; color: var(--tinta); font-weight: 600; white-space: nowrap; }
.siguiendo .icono { color: var(--acento); }

/* ---------- Mis Negocios ---------- */

/* Nuestra gestión: punto + palabra (nunca solo color). En curso = punto hueco; con desenlace = punto lleno. */
.gestion { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-cuerpo); font-weight: 600; white-space: nowrap; }
.gestion::before { content: ""; width: .5rem; height: .5rem; flex: none; border-radius: 50%; border: 2px solid var(--tinta); box-sizing: border-box; }
.gestion--cerrada::before { background: var(--tinta); }

.negocios th.gestion-col, .negocios td.gestion-col { width: 9.5rem; }
.negocios th.responsable-col, .negocios td.responsable-col { width: 10rem; }
.negocios td.responsable-col span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota-fila, .atencion-fila { min-width: 0; color: var(--texto-2); }
.atencion-fila { display: inline-flex; align-items: center; gap: var(--e1); color: var(--tinta); font-weight: 600; }
:is(.oportunidades--compacta, .oportunidades--media) :is(.nota-fila, .atencion-fila) { flex: 1 1 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.oportunidades--compacta, .oportunidades--media) .atencion-fila .icono { display: inline; vertical-align: -2px; margin-right: var(--e1); }

.panel__enlace--con-cantidad { display: flex; justify-content: space-between; gap: var(--e2); }
.panel__cantidad { color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* Detalle: seguir y el bloque de seguimiento */
.detalle__externo form { display: contents; }
.siguiendo--detalle { padding: 0 var(--e3); min-height: var(--alto-control); border: 1px solid var(--acento); border-radius: var(--radio); background: var(--acento-tenue); text-decoration: none; }
.siguiendo--detalle:hover { text-decoration: none; filter: brightness(.97); }
.bloque__nota { margin-left: var(--e2); color: var(--texto-2); font-size: var(--t-meta); font-weight: 400; }
.seguimiento__resumen { max-width: 75ch; margin-bottom: var(--e3); color: var(--texto-2); font-size: var(--t-meta); }
.seguimiento__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--e3); margin-bottom: var(--e3); }
.seguimiento__notas { min-height: 6rem; resize: vertical; font-family: inherit; line-height: 1.45; }
.seguimiento__acciones { margin-top: var(--e3); }
.seguimiento__dejar { display: block; margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--borde); }
.seguimiento__dejar .confirmar__panel { left: 0; right: auto; }

@media (max-width: 760px) {
    .negocios td.responsable-col, .negocios td.gestion-col { width: auto; }
}


/* ---------- Reportes de proveedores ---------- */

.proveedor__cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e3) var(--e4); margin: var(--e2) 0 var(--e4); }
.proveedor__cabecera .cabecera__titulo { overflow-wrap: anywhere; }
.proveedor__rut { margin-top: var(--e1); color: var(--texto-2); }
.nota-cobertura { margin-top: var(--e3); }

.bloque-lista { padding-top: var(--e4); }
.bloque-lista__titulo { padding: 0 var(--e4); margin-bottom: var(--e2); font-size: var(--t-seccion); font-weight: 650; }
.proveedores-tabla .fila__meta { margin-left: 0; }
.h-proveedor__enlace { color: var(--tinta); text-decoration: none; }
a.h-proveedor__enlace:hover { color: var(--acento); text-decoration: underline; }

/* Evolución mensual: UNA serie, columnas de <= 24 px con la punta redondeada de 4 px, base única en cero, 2 px entre
   columnas, sin leyenda (una serie), etiquetas de texto en tinta (no en el color de la serie). */
.evolucion { padding: var(--e4) var(--e4) 0; }
.evolucion .bloque-lista__titulo { padding: 0; }
.columnas { margin: 0; }
.columnas__lista { display: flex; gap: 2px; align-items: stretch; padding-bottom: 0; border-bottom: 1px solid var(--borde-fuerte); }
.columna { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: 8rem auto; }
.columna__zona { display: flex; align-items: flex-end; justify-content: center; height: 8rem; }
.columna__barra { display: block; width: min(100%, 24px); background: var(--acento); border-radius: 4px 4px 0 0; }
.columna:hover .columna__barra { filter: brightness(.9); }
.columna__mes { padding-top: var(--e1); text-align: center; color: var(--texto-2); font-size: var(--t-pildora); white-space: nowrap; min-height: 1.4em; }
.columnas__pie { margin-top: var(--e2); color: var(--texto-2); font-size: var(--t-meta); }
.columnas__pie strong { color: var(--tinta); }
.tabla-alterna { margin-top: var(--e2); }
.tabla-alterna summary { cursor: pointer; color: var(--acento); font-size: var(--t-meta); font-weight: 600; }
.tabla-alterna .tabla { margin-top: var(--e2); }

/* Rankings: nombre, cifra y una barra fina proporcional al porcentaje del total */
.rankings { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--e4); padding: var(--e4) var(--e4) 0; }
.rankings .bloque-lista__titulo { padding: 0; }
.ranking { display: grid; gap: 2px; }
.ranking__fila { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3); padding: var(--e2) 0 calc(var(--e2) + 4px); border-bottom: 1px solid var(--borde); }
.ranking__texto, .ranking__cifra { display: grid; min-width: 0; }
.ranking__cifra { text-align: right; flex: none; }
.ranking__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ranking__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); font-size: var(--t-meta); }
.ranking__barra { position: absolute; left: 0; bottom: 0; height: 3px; min-width: 2px; background: var(--acento); border-radius: 0 3px 0 0; }

.proveedor-tabla .num .h-sub { display: block; }
.proveedor-tabla th.num, .proveedor-tabla td.num { width: 8.5rem; }
.proveedor-tabla th.resultado-col, .proveedor-tabla td.resultado-col { width: 9.5rem; }
.sin-corte { white-space: nowrap; }
.exportar { margin-left: var(--e3); font-size: var(--t-meta); font-weight: 600; white-space: nowrap; }
.participacion__como { margin: var(--e3) var(--e4) 0; }
.participacion__lista { margin: var(--e2) 0 0; padding-left: var(--e4); color: var(--texto-2); font-size: var(--t-meta); line-height: 1.5; }
.participacion__lista li + li { margin-top: var(--e2); }
.participacion__lista strong { color: var(--tinta); }

@media (max-width: 760px) {
    .evolucion, .rankings, .bloque-lista__titulo { padding-left: var(--e3); padding-right: var(--e3); }
    .columna__zona { height: 6rem; }
    .columna { grid-template-rows: 6rem auto; }
}

.documentos__nota { margin-top: var(--e3); color: var(--texto-2); font-size: var(--t-meta); }
.documentos__nota a { display: inline-flex; align-items: center; gap: var(--e1); }
.indicador__nota--aviso { color: var(--tinta); }
.adjs { display: grid; gap: var(--e2); align-content: start; }
.ingreso__ayuda { margin: 0 0 var(--e4); color: var(--texto-2); font-size: var(--t-meta); line-height: 1.5; }
.ingreso__pie { margin: var(--e4) 0 0; font-size: var(--t-meta); text-align: center; }
.ingreso__error + .campo__control, .campo-etiquetado .ingreso__error { margin: var(--e1) 0 0; }

/* ---------- Panel de administración ---------- */
.tarjetas-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--e3); padding: var(--e3) var(--e4) 0; }
.tarjeta-panel {
    display: grid; gap: var(--e1); align-content: start; height: 100%; padding: var(--e3) var(--e4);
    background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-grande); color: var(--tinta); text-decoration: none;
}
.tarjeta-panel:hover { border-color: var(--acento); text-decoration: none; }
.tarjeta-panel__titulo { font-size: var(--t-fila); font-weight: 650; }
.tarjeta-panel__texto { color: var(--texto-2); font-size: var(--t-meta); line-height: 1.4; }
.palabras .empresa__titulo { margin: 1.5rem 0 0; padding: 0; }
.palabras .nota-comparabilidad { margin-left: 0; margin-right: 0; }

/* Usuarios e invitaciones: el estado va con punto y PALABRA (nunca solo color); sin colores nuevos. */
.estado-cuenta { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--e2) 0 6px; border: 1px solid var(--borde-fuerte); border-radius: 999px; background: var(--superficie); font-weight: 600; white-space: nowrap; }
.estado-cuenta::before { content: ""; width: .5rem; height: .5rem; flex: none; border-radius: 50%; border: 2px solid var(--tinta); box-sizing: border-box; }
.estado-cuenta--activo::before { background: var(--tinta); }
.estado-cuenta--invitado::before { background: transparent; }
.estado-cuenta--invitacion_vencida::before { background: transparent; border-style: dashed; }
.estado-cuenta--desactivado { color: var(--texto-2); }
.estado-cuenta--desactivado::before { border-color: var(--texto-2); background: transparent; }
.usuarios .pildora { margin-left: var(--e1); vertical-align: middle; }
.usuarios__rol { display: flex; gap: var(--e2); align-items: center; }
.usuarios__rol .campo__control { width: auto; min-width: 8.5rem; }
.usuarios__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: flex-end; }
.enlace-invitacion__campo { width: 100%; font-family: var(--fuente-mono, monospace); font-size: var(--t-meta); }

.usuarios__fecha { white-space: nowrap; }
/* Las tablas de administración (palabras clave, RUT de la empresa, usuarios) se apilan en pantallas angostas: cada fila es una tarjeta. */
@media (max-width: 760px) {
    .palabras__tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .palabras__tabla, .palabras__tabla tbody, .palabras__tabla tr, .palabras__tabla td { display: block; width: auto; }
    .palabras__tabla tr { padding: var(--e3) var(--e1); border-bottom: 1px solid var(--borde); }
    .palabras__tabla td { border: 0; padding: var(--e1) 0; }
    .palabras__tabla td[data-titulo]::before { content: attr(data-titulo); display: block; color: var(--texto-2); font-size: var(--t-meta); font-weight: 600; }
    .palabras__tabla .palabras__editar { flex-wrap: wrap; }
    .usuarios__acciones { justify-content: flex-start; }
}

/* ---------- Rendimiento de la empresa ---------- */
.rendimiento__columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); padding: var(--e3) var(--e4) 0; align-items: start; }
.rendimiento__fuente { min-width: 0; padding: var(--e3) var(--e4) var(--e4); background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-grande); }
.rendimiento__fuente > .bloque-lista__titulo, .conciliacion > .bloque-lista__titulo { padding: 0; }
.rendimiento__sub { margin: var(--e1) 0 var(--e3); color: var(--texto-2); font-size: var(--t-meta); }
.rendimiento__subtitulo { font-size: var(--t-cuerpo); font-weight: 650; margin: var(--e3) 0 var(--e1); }
.rendimiento__nota { margin: var(--e2) 0 0; color: var(--texto-2); font-size: var(--t-meta); line-height: 1.4; }
.rendimiento__tabla { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.rendimiento__tabla th, .rendimiento__tabla td { padding: var(--e2) var(--e3); white-space: nowrap; }
.rendimiento__tabla tbody th { text-align: left; font-weight: 500; color: var(--tinta); white-space: normal; background: transparent; border-top: 0; }
.rendimiento__tabla .num { width: auto; }
.rendimiento__total th, .rendimiento__total td { font-weight: 650; border-top: 1px solid var(--borde-fuerte); }
.rendimiento__motivos { margin: var(--e2) 0 0; padding-left: var(--e4); color: var(--texto-2); font-size: var(--t-meta); line-height: 1.45; }
.rendimiento__motivos strong { color: var(--tinta); }
.rendimiento__indicadores { padding: var(--e3) 0 0; grid-template-columns: 1fr; }
.rendimiento__fuente .nota-comparabilidad, .rendimiento__fuente .participacion__como { margin-left: 0; margin-right: 0; }
.rendimiento__fuente .evolucion { padding: var(--e3) 0 0; }
.rendimiento__fuente .indicador { background: var(--superficie); }
.leyenda-grafico { display: flex; gap: var(--e4); margin: var(--e1) 0 var(--e2); padding: 0; list-style: none; color: var(--tinta); font-size: var(--t-meta); }
.muestra { display: inline-block; width: .9rem; height: .9rem; vertical-align: -2px; margin-right: var(--e1); border-radius: 3px; box-sizing: border-box; }
.muestra--ganadas { background: var(--acento); }
.muestra--perdidas { background: var(--superficie); border: 2px solid var(--acento); }
/* Apilado: ganó (sólido) abajo y perdió (solo contorno) arriba, con 2 px de superficie entre las dos. */
.columna__zona--apilada { flex-direction: column-reverse; align-items: center; gap: 2px; }
.columna__zona--apilada .columna__barra { flex: none; }
.columna__barra--perdidas { background: var(--superficie); border: 2px solid var(--acento); border-bottom-width: 2px; box-sizing: border-box; }
.conciliacion { padding: var(--e4) var(--e4) var(--e4); }
.conciliacion__resumen { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5, 1.5rem); margin: var(--e3) 0; padding: 0; list-style: none; }
.conciliacion__categoria { margin-top: var(--e3); padding: var(--e3) var(--e4); background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-grande); }
.conciliacion__lista { margin: var(--e2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e1); }
.conciliacion__lista li { display: flex; flex-wrap: wrap; gap: 0 var(--e3); align-items: baseline; }
@media (max-width: 1100px) { .rendimiento__columnas { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .rendimiento__columnas { padding-left: var(--e3); padding-right: var(--e3); }
    .conciliacion { padding-left: var(--e3); padding-right: var(--e3); }
}
@media (max-width: 760px) {
    .rendimiento__fuente { padding-left: var(--e3); padding-right: var(--e3); }
    .rendimiento__tabla th, .rendimiento__tabla td { padding: var(--e2) var(--e1); }
    .rendimiento__tabla .num { white-space: normal; }
    .rendimiento__tabla .indicador__marca { display: block; margin-top: 2px; }
}

/* ---------- Sistema visual (pasada estética, aprobada el 21-09-2026) ----------
   Tres cambios sobre los componentes compartidos: (1) insignias con identidad, (2) jerarquía de tamaño y peso, (3) acento cálido propio.
   Se conservan: un color un significado, el estado nunca solo en color, contrastes AA y las tres densidades. */

/* 1. Insignias. TIPO = rectángulo de esquina corta con RELLENO sólido y texto blanco: una etiqueta de clase, un ancla para el ojo.
   ESTADO = píldora redonda SIN relleno (borde + punto + palabra): dice en qué momento está. Forma y relleno distintos, así no se
   confunden aunque compartan la fila. El color de una familia nunca se reutiliza para un estado. */
.tipo {
    display: inline-flex; align-items: center; gap: 3px; flex: none;
    padding: 0 6px; min-width: 2rem; justify-content: center;
    border-radius: 4px; background: var(--tipo-otra); color: #FFFFFF;
    font-size: var(--t-pildora); font-weight: 700; line-height: 1.55; letter-spacing: .02em; white-space: nowrap;
}
.tipo .icono { width: .8rem; height: .8rem; fill: currentColor; stroke: none; }
.tipo--publica { background: var(--tipo-publica); }
.tipo--privada { background: var(--tipo-privada); }
.tipo--obras { background: var(--tipo-obras); }
.tipo--agil { background: var(--tipo-agil); }

.estado {
    padding: 0 var(--e2) 0 6px; border: 1px solid var(--borde-fuerte); border-radius: 999px; background: var(--superficie);
    line-height: 1.5; justify-self: start;
}
.estado--publicada { border-color: var(--verde); }

.fila__titular { display: flex; align-items: baseline; gap: var(--e2); min-width: 0; }
.fila__titular .tipo { align-self: baseline; transform: translateY(-1px); }
.detalle__etiquetas .tipo { align-self: center; }
.h-sub .tipo { font-size: .6875rem; line-height: 1.4; min-width: 0; }

/* 2. Jerarquía: título > monto y cierre > ítem > metadatos. */
.oportunidades .fila__nombre { font-size: 1.0625rem; font-weight: 650; line-height: 1.3; letter-spacing: -.005em; }   /* 17 px */
.oportunidades td.num { font-size: 1.0625rem; font-weight: 700; }                                                    /* 17 px */
.oportunidades .cierre__fecha { font-size: var(--t-fila); font-weight: 600; }                                        /* 15 px */
.oportunidades .cierre__resto { font-size: var(--t-pildora); }
.oportunidades .fila__meta, .oportunidades .fila__meta .id { font-size: var(--t-pildora); }                           /* 12 px */
.oportunidades .fila__meta .id { color: var(--texto-2); }
.oportunidades .item { font-size: var(--t-cuerpo); }                                                                 /* 14 px */
.oportunidades .item__nombre { font-weight: 600; }
.oportunidades .sin-dato { font-size: var(--t-cuerpo); font-weight: 400; }

/* En las densidades compacta y media el título baja un escalón para conservar el número de filas por pantalla. */
:is(.oportunidades--compacta, .oportunidades--media) .fila__nombre { font-size: 1rem; line-height: 1.3; }              /* 16 px */
.oportunidades--compacta .fila__nombre { font-size: .9375rem; }                                                        /* 15 px */
.oportunidades--compacta td.num { font-size: 1rem; }
.oportunidades--compacta .item { font-size: var(--t-meta); }

/* Urgencia: no es un color (el ámbar chocaba con un acento cálido) sino una forma: píldora con contorno de tinta, reloj y peso. */
.cierre__resto--pronto {
    padding: 0 var(--e2) 0 6px; border: 1.5px solid var(--tinta); border-radius: 999px;
    color: var(--tinta); font-weight: 700; margin-top: 2px;
}

/* En anchos medios (panel lateral recogido) el estado pasa encima del título: así este no queda en ~15 caracteres. */
@media (min-width: 761px) and (max-width: 1100px) {
    .fila__linea { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
    .fila__meta, .item, .fila__sin-items { margin-left: 0; }
}

@media (max-width: 760px) {
    .fila__titular { flex-wrap: wrap; row-gap: 2px; }
    .oportunidades .fila__nombre { font-size: 1rem; }
    .oportunidades td.num { font-size: 1rem; }
}

/* ---------- Preparar oferta ---------- */

/* Pestañas de un negocio (la convocatoria / su oferta). */
.pestanas { display: flex; gap: var(--e1); border-bottom: 1px solid var(--borde); margin: var(--e4) 0; }
.pestanas__tab { padding: var(--e2) var(--e4); color: var(--texto-2); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pestanas__tab:hover { color: var(--tinta); }
.pestanas__tab[aria-current="true"] { color: var(--tinta); border-bottom-color: var(--acento); }

/* Estado de la oferta: la misma píldora de los demás estados; el punto dice en qué paso va. */
.estado--oferta-lista::before { border-color: var(--tinta); }
.estado--oferta-cargada::before { background: var(--tinta); border-color: var(--tinta); }
.oferta-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e4); margin-bottom: var(--e4); }
.oferta-estado > .estado { font-size: var(--t-cuerpo); }
.oferta-pasos { color: var(--texto-2); font-size: var(--t-meta); }
.oferta-pasos__actual { color: var(--tinta); font-weight: 700; }
.oferta-acciones { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.oferta-falta { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); font-size: var(--t-meta); }
.oferta-confirmar { position: relative; }
.panel__notas { margin-top: var(--e4); }
.oferta-confirmar .confirmar__panel { max-width: 28rem; }
.oferta-nota { display: flex; align-items: flex-start; gap: var(--e2); margin-bottom: var(--e4); color: var(--texto-2); }
.oferta-moneda { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e3); }

/* Totales. */
.oferta-totales { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e3); margin-bottom: var(--e3); }
.oferta-totales .indicador__valor { font-size: 1.375rem; }
.indicador__nota { color: var(--texto-2); font-size: var(--t-meta); }
.oferta-exceso { display: flex; gap: var(--e2); padding: var(--e2) var(--e3); background: var(--superficie); border: 1px solid var(--borde); border-left: 6px solid var(--tinta); border-radius: var(--radio); margin-bottom: var(--e4); }
.oferta-exceso::before { content: "⚠"; font-weight: 700; }

/* Tabla de líneas. */
.oferta-bloque { padding: var(--e4) 0 0; }
.oferta-bloque__titulo { padding: 0 var(--e5); }
.oferta-tabla td, .oferta-tabla th { vertical-align: top; }
.oferta-tabla td.n, .oferta-tabla th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oferta-tabla tr.oferta-fuera td { background: var(--hover); color: var(--texto-2); }
.oferta__nombre { display: block; font-weight: 600; }
.oferta__comprador { quotes: "\201C" "\201D"; font-style: italic; color: var(--texto-2); display: block; max-width: 62ch; }
.oferta__comprador--principal { color: var(--tinta); }
.oferta__sub { color: var(--texto-2); font-size: var(--t-meta); }
.oferta-tabla th:first-child { width: 34%; }
.oferta__ref { min-width: 12rem; }
.oferta__buscar { margin-top: var(--e1); }
.oferta__buscar summary { cursor: pointer; }
.oferta__buscar[open] summary { margin-bottom: var(--e1); }
.oferta__num { width: 8.5rem; height: 2rem; padding: 0 var(--e2); text-align: right; font-variant-numeric: tabular-nums; }
.oferta__num--chico { width: 5.5rem; }
.oferta__unidad { width: 6.5rem; margin-top: var(--e1); text-align: left; }
.oferta__texto { width: 100%; max-width: 22rem; height: 2rem; padding: 0 var(--e2); }
.oferta__texto--chico { max-width: 12rem; font-size: var(--t-meta); }
.oferta__quitar { margin-top: var(--e1); min-height: 1.75rem; padding: 0 var(--e2); font-size: var(--t-meta); }
.oferta__ofertar { text-align: center; }
.oferta__guardar { min-height: 1.75rem; padding: 0 var(--e2); font-size: var(--t-meta); }
.oferta__aviso { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 0 var(--e2) 0 6px; border: 1.5px solid var(--tinta); border-radius: 999px; font-size: var(--t-pildora); font-weight: 700; white-space: normal; text-align: left; }
.oferta__aviso--suave { border: 1px solid var(--borde-fuerte); font-weight: 600; color: var(--texto-2); }
.oferta__error { display: block; margin-top: var(--e1); font-size: var(--t-meta); font-weight: 600; text-align: right; white-space: normal; }
/* Otra persona cambió la línea mientras se editaba: el aviso va en la celda del ítem (la más ancha), con borde grueso de tinta como los demás avisos fuertes. */
.oferta__conflicto { margin-top: var(--e2); padding: var(--e2) var(--e3); border: 1px solid var(--borde-fuerte); border-left: 4px solid var(--tinta); border-radius: var(--radio-chico, 4px); background: var(--superficie); font-size: var(--t-meta); font-weight: 600; line-height: 1.4; }
.oferta__conflicto .icono { vertical-align: -2px; margin-right: var(--e1); }
.oferta-vacio { padding: 0 var(--e5) var(--e3); }
.oferta-agregar { padding: var(--e4) var(--e5); border-top: 1px solid var(--borde); }
.oferta-agregar__titulo { font-size: var(--t-cuerpo); font-weight: 650; margin-bottom: var(--e2); }
.oferta-agregar__campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3); }
.oferta-agregar__texto { flex: 1 1 20rem; }

@media (max-width: 1100px) {
    /* Cada línea pasa a tarjeta: nombre y referencia a todo el ancho, y los números de a dos. */
    .oferta-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .oferta-tabla, .oferta-tabla tbody { display: block; }
    .oferta-tabla tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--e2) var(--e3); padding: var(--e3); border-bottom: 1px solid var(--borde); }
    .oferta-tabla td { display: block; padding: 0; border: 0; }
    .oferta-tabla td:first-child, .oferta-tabla td.oferta__ref { grid-column: 1 / -1; }
    .oferta-tabla td.n { text-align: left; white-space: normal; }
    .oferta-tabla td[data-titulo]::before { content: attr(data-titulo); display: block; font-size: var(--t-pildora); font-weight: 600; color: var(--texto-2); }
    .oferta-tabla td.oferta__ofertar { text-align: left; }
    .oferta__num, .oferta__texto { width: 100%; max-width: none; }
    .oferta__num--chico, .oferta__unidad { width: 48%; }
    .oferta__error { text-align: left; }
    .oferta-acciones { margin-left: 0; }
    .oferta-bloque__titulo, .oferta-vacio, .oferta-agregar { padding-left: var(--e3); padding-right: var(--e3); }
}

/* Líneas a mano: la descripción necesita ancho y la cantidad y la unidad van una bajo la otra. */
.oferta-tabla td:first-child .oferta__texto { min-width: 15rem; }
.oferta__num--chico, .oferta__unidad { display: block; }
.oferta__num--chico { width: 6.5rem; }
.oferta__unidad { width: 6.5rem; margin-top: var(--e1); }
@media (max-width: 1100px) {
    .oferta-tabla td:first-child .oferta__texto { min-width: 0; }
    .oferta__num--chico, .oferta__unidad { width: 100%; }
}
/* Ajuste de anchos para que las siete columnas quepan en 1440 px sin desplazamiento horizontal. */
.oferta-tabla th, .oferta-tabla td { padding-left: var(--e2); padding-right: var(--e2); }
.oferta-tabla th:first-child, .oferta-tabla td:first-child { padding-left: var(--e5); }
.oferta-tabla th:last-child, .oferta-tabla td:last-child { padding-right: var(--e4); }
.oferta__num { width: 7.25rem; }
.oferta__ref { min-width: 11rem; }
.oferta-tabla td:first-child .oferta__texto { min-width: 12rem; }
@media (max-width: 1100px) {
    .oferta-tabla th, .oferta-tabla td, .oferta-tabla th:first-child, .oferta-tabla td:first-child, .oferta-tabla th:last-child, .oferta-tabla td:last-child { padding-left: 0; padding-right: 0; }
    .oferta__num { width: 100%; }
}

/* Un campo de solo lectura se ve distinto de uno editable (por ejemplo el monto ofertado que viene de la oferta cargada). */
.campo__control[readonly] { background: var(--hover); color: var(--texto-2); cursor: default; }

/* Aviso de desincronización: lo que cambió en la convocatoria. Borde grueso de tinta y texto (sin color): no es un error, pide revisar. */
.oferta-cambios { background: var(--superficie); border: 1px solid var(--borde); border-left: 6px solid var(--tinta); border-radius: var(--radio); padding: var(--e3) var(--e4); margin-bottom: var(--e4); }
.oferta-cambios__titulo { font-size: var(--t-seccion); font-weight: 650; }
.oferta-cambios__titulo::before { content: "\26A0  "; }
.oferta-cambios__intro { color: var(--texto-2); margin: var(--e1) 0 var(--e3); max-width: 75ch; }
.oferta-cambios__lista { list-style: none; padding: 0; display: grid; gap: var(--e2); }
.oferta-cambios__lista li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); padding: var(--e2) 0; border-top: 1px solid var(--borde); }
.oferta-cambios__lista li:first-child { border-top: 0; }
.oferta-cambios__texto { flex: 1 1 32rem; }
.oferta-cambios__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e3); }
.oferta-cambios__ojo { font-weight: 600; }

/* Indicador de la oferta en la lista de Mis Negocios: es un enlace a la preparación. */
.oferta-fila { flex: none; font-weight: 600; color: var(--tinta); white-space: nowrap; }

/* Documentos a presentar y resumen para cargar. */
.oferta-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); align-items: start; }
.oferta-caja { margin-bottom: 0; }
.oferta-chk { list-style: none; padding: 0; display: grid; gap: var(--e2); margin-bottom: var(--e3); }
.oferta-chk li { display: flex; align-items: center; gap: var(--e2); }
.oferta-chk label { flex: 1; }
.oferta-chk__hecho { color: var(--texto-2); text-decoration: line-through; }
.oferta-chk__quitar { background: none; border: 0; padding: 0 var(--e1); color: var(--texto-2); font-size: var(--t-meta); text-decoration: underline; cursor: pointer; min-height: 1.75rem; }
.oferta-chk__quitar:hover { color: var(--acento); }
.oferta-chk__agregar { display: flex; flex-wrap: wrap; gap: var(--e2); }
.oferta-chk__agregar .campo__control { flex: 1 1 14rem; }
.oferta-nota-chica { color: var(--texto-2); font-size: var(--t-meta); margin-top: var(--e2); }
.oferta-res { width: 100%; font-family: var(--mono); font-size: var(--t-pildora); line-height: 1.5; padding: var(--e2); border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--papel); color: var(--tinta); resize: vertical; }
.oferta-res__acciones { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e2); }
@media (max-width: 1100px) { .oferta-2 { grid-template-columns: minmax(0, 1fr); } }

/* Comparación con lo adjudicado. */
.oferta-comp__mensaje { padding: 0 var(--e5) var(--e3); color: var(--tinta); font-weight: 600; }
.oferta-comp__total { padding: 0 var(--e5) var(--e3); }
.oferta-comp__obs { padding: 0 var(--e5) var(--e2); }
.oferta-comp__pie { padding: var(--e2) var(--e5) var(--e3); }
.oferta-comp td .oferta__aviso { margin: 0 var(--e1) var(--e1) 0; }
@media (max-width: 1100px) { .oferta-comp__mensaje, .oferta-comp__total, .oferta-comp__obs, .oferta-comp__pie { padding-left: var(--e3); padding-right: var(--e3); } }

/* La tabla de comparación tiene columnas de texto más largo que la de líneas. */
.oferta-comp th:first-child { width: 22%; }
.oferta-comp td:last-child { min-width: 16rem; }
.oferta-comp .oferta__sub { display: block; }
.oferta-comp td .oferta__aviso { display: flex; border-radius: var(--radio); margin: 0 0 var(--e1); }

/* ---------- Productos seguidos ---------- */
.pr-nota { color: var(--texto-2); font-size: var(--t-meta); }
.pr-pie { margin-top: var(--e4); }
.pr-alta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: var(--e3) var(--e4); margin-bottom: var(--e4); }
.pr-alta__nombre { flex: 1 1 16rem; }
.pr-alta__terminos { flex: 2 1 24rem; }
.pr-alta__codigo { width: 9rem; }
.pr-alta__ayuda, .pr-alta__error { flex: 1 1 100%; margin: 0; }
.pr-alta__error { font-weight: 600; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--e3); }
.pr-card { display: block; text-decoration: none; color: var(--tinta); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: var(--e4); }
.pr-card:hover { border-color: var(--acento); }
.pr-card__nombre { font-size: var(--t-seccion); font-weight: 650; margin-bottom: 2px; }
.pr-card__terminos { color: var(--texto-2); font-size: var(--t-meta); margin-bottom: var(--e3); }
.pr-card__cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); border-top: 1px solid var(--borde); padding-top: var(--e3); }
.pr-card__cifras b { display: block; font-size: 1.375rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pr-card__cifras span { color: var(--texto-2); font-size: var(--t-pildora); }
.pr-card__pie { margin-top: var(--e3); font-size: var(--t-meta); color: var(--texto-2); }
.pr-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.pr-cab__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.pr-terminos { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e2) 0; }
.pr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--borde-fuerte); border-radius: 999px; background: var(--superficie); font-size: var(--t-meta); }
.pr-chip--cod { font-family: var(--mono); background: var(--papel); }
.pr-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); margin: var(--e4) 0; }
.pr-tab { display: block; text-decoration: none; color: var(--tinta); background: var(--superficie); border: 1px solid var(--borde); border-top: 4px solid var(--borde); border-radius: var(--radio-grande); padding: var(--e3) var(--e4); }
.pr-tab:hover { border-color: var(--borde-fuerte); }
.pr-tab[aria-current="true"] { border-color: var(--acento); border-top-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.pr-tab__n { display: block; font-size: 1.75rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pr-tab__t { display: block; font-weight: 600; }
.pr-tab__s { display: block; color: var(--texto-2); font-size: var(--t-meta); }
.pr-aviso { display: flex; gap: var(--e2); align-items: flex-start; padding: var(--e2) var(--e3); background: var(--superficie); border: 1px solid var(--borde); border-left: 6px solid var(--tinta); border-radius: var(--radio); margin-bottom: var(--e3); }
.pr-aviso .icono { margin-top: 3px; flex: none; }
.oportunidades td.pr-accion, .oportunidades th.pr-accion { width: 11.5rem; text-align: right; }
.pr-tabla .oferta-fila { white-space: normal; font-weight: 500; font-size: var(--t-meta); }
.pr-por-termino { list-style: none; padding: 0; display: grid; gap: var(--e2); margin-bottom: var(--e3); }
.pr-por-termino li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.pr-editar { display: grid; gap: var(--e3); max-width: 40rem; }
.pr-editar textarea.campo__control { height: auto; min-height: 7.5rem; line-height: 1.5; }
@media (min-width: 761px) and (max-width: 1100px) {
    .oportunidades td.pr-accion, .oportunidades th.pr-accion { width: 8rem; }
}
@media (max-width: 760px) {
    .pr-tabs { grid-template-columns: minmax(0, 1fr); }
    .oportunidades td.pr-accion { width: auto; text-align: left; grid-column: 1 / -1; }
}

/* «Seguir este producto»: un botón con la forma de un enlace, junto a «Ver historial de precios». */
.seguir-producto { display: contents; }
.enlace-historial--boton { background: none; border: 0; padding: 0; color: var(--acento); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.enlace-historial--boton:hover { text-decoration-thickness: 2px; }
.item-detalle__acciones { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); }
.seguir-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e4); margin: var(--e2) var(--e4) var(--e1); color: var(--texto-2); font-size: var(--t-meta); }
.seguir-barra .enlace-historial { margin-top: 0; }
@media (max-width: 760px) { .seguir-barra { margin-left: var(--e3); margin-right: var(--e3); } }
.pr-boton { height: auto; padding: var(--e1) var(--e3); min-height: 2rem; font-size: var(--t-meta); font-weight: 600; white-space: normal; text-align: center; line-height: 1.25; }
.pr-oferta-estado { display: block; margin-top: var(--e1); color: var(--texto-2); font-weight: 400; }

/* Tarjeta de producto pendiente: qué texto se ve depende del estado que le pone static/js/tarjetas.js (sin-js → cargando → error). */
.pr-card--pendiente[data-estado="sin-js"] [data-cuando]:not([data-cuando="sin-js"]),
.pr-card--pendiente[data-estado="cargando"] [data-cuando]:not([data-cuando="cargando"]),
.pr-card--pendiente[data-estado="error"] [data-cuando]:not([data-cuando="error"]) { display: none; }
.pr-card--pendiente .pr-card__nombre a { color: inherit; text-decoration: none; }
.pr-card--pendiente .pr-card__nombre a:hover { text-decoration: underline; }
.pr-card__falla { border-left: 4px solid var(--tinta); padding-left: var(--e2); color: var(--tinta); }
.pr-card__reintentar { background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio); padding: 2px var(--e3); font-weight: 600; margin: 0 var(--e2); }
.pr-card__reintentar:hover { background: var(--hover); }