/* Pantalla «IA»: un bloque por proveedor, con sus claves en orden y sus modelos. Mismo sistema que el resto (tokens.css): tarjetas con borde y radio de tarjeta, color solo para el estado, y el estado
   siempre con texto. Sin colores sueltos: todo sale de los tokens, así el acento que elija el cliente y el tema claro u oscuro también se aplican acá. */

#v-ia { max-width: var(--ancho-lista); }
#v-ia .section-head .btn-group { flex-wrap: nowrap; }
.ia-resumen { margin: -12px 0 18px; font-size: 13px; font-variant-numeric: tabular-nums; }
.ia-aviso:not(:empty) { margin-bottom: 18px; }
.ia-aviso .test-result { margin-top: 0; }
.ia-reserva { display: none; }

/* Formularios (proveedor nuevo, modelos, clave): el de un bloque aparece dentro de ese bloque */
.ia-form { margin-bottom: 24px; }
.ia-hueco .ia-form { margin: 12px 0 0; background: var(--soft); box-shadow: none; }
.ia-form .test-result { margin: 0 0 16px; }
.ia-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ia-form-grid .ia-ancho { grid-column: 1 / -1; }
.ia-form .btn-group { margin-top: 4px; }
.ia-form input[readonly] { background: var(--soft); color: var(--muted); }

/* Un bloque por proveedor, uno debajo del otro en el orden en que entran */
.ia-bloques { display: flex; flex-direction: column; gap: 18px; }
.ia-proveedor { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.ia-proveedor[data-estado='ok'] { border-left-color: var(--em); }
.ia-proveedor[data-estado='enfriado'] { border-left-color: var(--am); }
.ia-proveedor[data-estado='error'] { border-left-color: var(--ro); }
.ia-proveedor[data-estado='pendiente'] { border-left-color: var(--sky); }
.ia-prov-cabeza { display: flex; align-items: center; gap: 12px; }
.ia-posicion { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-soft-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.ia-titulo { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.ia-titulo strong, .ia-titulo h3 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ia-titulo .muted { font-size: 12.5px; overflow-wrap: anywhere; }
.ia-estado { flex: none; gap: 7px; }
.ia-estado::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.ia-orden { display: flex; gap: 6px; flex: none; }
.ia-flecha { padding: 0; width: 34px; font-size: 12px; }
.ia-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 14px; margin: 0; font-size: 13px; }
.ia-datos dt { color: var(--muted); }
.ia-datos dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ia-subtitulo { margin: 4px 0 0; font-size: 12.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* Modelos del bloque (resumen) y claves en orden */
.ia-modelos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ia-modelo { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 12px; background: var(--soft); border-radius: var(--r-pill); font-size: 13px; }
.ia-claves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ia-clave { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r-md); }
.ia-clave[data-estado='ok'] { border-left-color: var(--em); }
.ia-clave[data-estado='enfriado'] { border-left-color: var(--am); }
.ia-clave[data-estado='error'] { border-left-color: var(--ro); }
.ia-clave[data-estado='pendiente'] { border-left-color: var(--sky); }
.ia-clave-linea { display: flex; align-items: center; gap: 12px; }
.ia-clave-orden { flex: none; min-width: 22px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.ia-clave-modelos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.ia-clave-modelo { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.ia-error-corto { color: var(--ro); overflow-wrap: anywhere; }
.ia-nota, .ia-error, .ia-prueba { margin: 0; padding: 8px 12px; border-radius: var(--r-sm); font-size: 12.5px; overflow-wrap: anywhere; }
.ia-nota { background: var(--sky-bg); color: var(--sky); }
.ia-error { background: var(--ro-bg); color: var(--ro); }
.ia-prueba { background: var(--soft); color: var(--ink); }

/* Botones del bloque y de cada clave; la confirmación de borrado va en el mismo lugar */
.ia-acciones { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.ia-acciones .btn-group, .ia-clave-acciones, .ia-confirmar .btn-group { margin-top: 0; gap: 6px; }
.ia-confirmar { margin-top: auto; padding: 12px; background: var(--ro-bg); border-radius: var(--r-md); }
.ia-confirmar p { margin: 0 0 10px; font-size: 13.5px; color: var(--ro); font-weight: 600; }
.ia-borrar-ya { background: var(--ro); border-color: var(--ro); color: var(--on-ro); }
.ia-borrar-ya:hover:not(:disabled) { background: var(--ro); opacity: .9; }

/* Selector de modelos con etiquetas: un cuadro con los elegidos, el buscador y la flecha que abre la lista */
.ia-selector-modelos { min-width: 0; }
.ia-chips { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 6px 40px 6px 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: text; transition: border-color .15s, box-shadow .15s; }
.ia-chips:hover { border-color: var(--muted); }
.ia-chips:focus-within { border-color: var(--focus); box-shadow: 0 0 0 4px var(--ring); }
.ia-chips-elegidos { list-style: none; margin: 0; padding: 0; display: contents; }
.ia-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 10px; background: var(--brand-soft); color: var(--brand-soft-ink); border-radius: var(--r-pill); font-size: 13px; }
.ia-chip .mono { overflow-wrap: anywhere; }
.ia-chip-quitar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.ia-chip-quitar:hover { background: var(--ring); }
.ia-chips-entrada { flex: 1 1 140px; min-width: 120px; min-height: 32px; padding: 4px 4px; border: 0; outline: none; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 16px; }
.ia-chips-entrada::placeholder { color: var(--muted); }
.ia-chips-flecha { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.ia-chips-flecha:hover { background: var(--soft); }
.ia-chips.abierta .ia-chips-flecha { transform: rotate(180deg); }
.ia-chips-lista { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; max-height: 260px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.ia-opcion { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; cursor: pointer; overflow-wrap: anywhere; }
.ia-opcion:hover, .ia-opcion.activa { background: var(--soft); }
.ia-opcion.activa { outline: 2px solid var(--focus); outline-offset: -2px; }
.ia-opcion[aria-selected='true'] { color: var(--brand-soft-ink); font-weight: 600; }
.ia-opcion-marca { flex: none; color: var(--em); }
.ia-opcion-vacia { padding: 10px; font-size: 13px; color: var(--muted); }

/* Límites y precios de cada modelo elegido */
.ia-limites { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ia-limite { margin: 0; padding: 10px 14px 4px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ia-limite legend { padding: 0 6px; font-size: 13px; overflow-wrap: anywhere; }
.ia-limite-grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
.ia-limite-campo label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.ia-limite-campo { margin-bottom: 10px; }
.ia-limite-campo .form-input { min-height: 40px; padding: 6px 10px; font-size: 14px; }

@media (max-width: 720px) {
  #v-ia .section-head .btn-group { flex-wrap: wrap; }
  .ia-resumen { margin-top: -6px; }
  .ia-form-grid { grid-template-columns: minmax(0, 1fr); }
  .ia-limite-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-proveedor { padding: 14px 16px; border-radius: 18px; border-left-width: 4px; }
  .ia-prov-cabeza, .ia-clave-linea { flex-wrap: wrap; }
  .ia-acciones .btn-group .btn, .ia-clave-acciones .btn, .ia-confirmar .btn-group .btn { flex: 1 1 calc(50% - 6px); }
  .ia-flecha { width: 44px; }
}