/* Piel del panel de configuración del agente (Componentes/AgenteConfigPanel.razor).
   Se sirve como  _content/IntegraIA.Agents/css/integraia-agente-config.css  y cada producto la
   linkea, igual que el JS de la voz.

   ⚠️ NO se usa CSS aislado de Blazor a propósito: el bundle `<Proyecto>.styles.css` sólo llega si
   el host lo linkea, y Domus no lo linkea ni usa CSS aislado en ninguna pantalla. Una hoja que
   depende de que el host tenga enganchado un bundle es una pantalla que aparece sin estilos en el
   producto que no lo tiene, sin un solo error en la consola.

   ⚠️ TODO cuelga de `.iag-config` — ni un selector suelto sobre `table`, `select` o `button`. Esta
   hoja entra a productos con su propio CSS ya escrito, y un selector global acá le cambia
   pantallas que nadie tocó.

   ── Cómo lo pinta un producto ────────────────────────────────────────────────────────────────
   En su propia hoja, DESPUÉS de linkear ésta:

       .iag-config { --iag-acento: #059669; --iag-acento-suave: #ecfdf5; }

   No hace falta nada más: el resto son grises que funcionan con cualquier acento. */

.iag-config {
    /* El único color del producto. El default es un azul neutro para que el que no configure
       nada vea una pantalla terminada, no una sin color. */
    --iag-acento: #2563eb;
    --iag-acento-suave: #eff6ff;

    --iag-texto: #1e293b;
    --iag-tenue: #64748b;
    --iag-borde: #e2e8f0;
    --iag-fondo: #ffffff;
    --iag-fondo-suave: #f8fafc;
    --iag-radio: 8px;

    color: var(--iag-texto);
}

/* ── Avisos ──────────────────────────────────────────────────────────────────────────────── */

.iag-config .iag-aviso {
    padding: .7rem .9rem;
    border-radius: var(--iag-radio);
    margin-bottom: 1rem;
    font-size: .92rem;
    border: 1px solid transparent;
}

.iag-config .iag-aviso-ok {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.iag-config .iag-aviso-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* ── Bloques ─────────────────────────────────────────────────────────────────────────────── */

.iag-config .iag-bloque {
    background: var(--iag-fondo);
    border: 1px solid var(--iag-borde);
    border-radius: var(--iag-radio);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
}

.iag-config .iag-bloque-titulo {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .85rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.iag-config .iag-tenue {
    color: var(--iag-tenue);
    font-size: .9rem;
    line-height: 1.5;
}

.iag-config .iag-chico { font-size: .82rem; }
.iag-config .iag-intro { margin: 0 0 1rem; }
.iag-config .iag-vacio { margin-bottom: 0; }
.iag-config .iag-sello { margin-top: .8rem; }

/* ── Campos ──────────────────────────────────────────────────────────────────────────────── */

.iag-config .iag-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.iag-config .iag-grilla-2 {
    grid-template-columns: minmax(230px, 20rem) 1fr;
    margin-top: 1rem;
}

.iag-config .iag-campo {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

/* El checkbox se alinea con los campos que tienen label arriba, no con el borde de la grilla. */
.iag-config .iag-campo-check { justify-content: flex-end; padding-bottom: .1rem; }

.iag-config .iag-label {
    font-size: .85rem;
    font-weight: 600;
}

.iag-config .iag-select,
.iag-config .iag-input,
.iag-config .iag-textarea {
    width: 100%;
    padding: .45rem .6rem;
    border: 1px solid var(--iag-borde);
    border-radius: 6px;
    background: var(--iag-fondo);
    color: var(--iag-texto);
    font-size: .92rem;
    font-family: inherit;
}

.iag-config .iag-textarea {
    resize: vertical;
    line-height: 1.5;
}

.iag-config .iag-select:focus,
.iag-config .iag-input:focus,
.iag-config .iag-textarea:focus {
    outline: none;
    border-color: var(--iag-acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--iag-acento) 18%, transparent);
}

.iag-config .iag-ayuda {
    font-size: .8rem;
    color: var(--iag-tenue);
    line-height: 1.4;
}

.iag-config .iag-check {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .9rem;
    cursor: pointer;
}

.iag-config .iag-check input { margin-top: .18rem; flex: none; }

/* ── La persona elegida ──────────────────────────────────────────────────────────────────── */

.iag-config .iag-persona {
    margin-top: 1rem;
    padding: .75rem .9rem;
    background: var(--iag-acento-suave);
    border-left: 3px solid var(--iag-acento);
    border-radius: 0 var(--iag-radio) var(--iag-radio) 0;
    font-size: .88rem;
    line-height: 1.5;
}

.iag-config .iag-persona div { color: var(--iag-tenue); }
.iag-config .iag-persona strong { color: var(--iag-texto); }

/* ── Tabla de lo aprendido ───────────────────────────────────────────────────────────────── */

/* El scroll horizontal vive acá y no en la página: una tabla que empuja el ancho del body deja
   toda la pantalla corrida, no sólo la tabla. */
.iag-config .iag-tabla-scroll { overflow-x: auto; }

.iag-config .iag-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.iag-config .iag-tabla th {
    text-align: left;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--iag-tenue);
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--iag-borde);
    white-space: nowrap;
}

.iag-config .iag-tabla td {
    padding: .6rem;
    border-bottom: 1px solid var(--iag-borde);
    vertical-align: top;
}

.iag-config .iag-tabla tr:last-child td { border-bottom: none; }
.iag-config .iag-fila-baja td { opacity: .55; }

.iag-config .iag-acciones {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

/* ── Badges ──────────────────────────────────────────────────────────────────────────────── */

.iag-config .iag-badge {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    background: var(--iag-fondo-suave);
    color: var(--iag-tenue);
    border: 1px solid var(--iag-borde);
    white-space: nowrap;
}

.iag-config .iag-badge-pendiente {
    background: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}

.iag-config .iag-badge-ok {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}

/* ── Botones ─────────────────────────────────────────────────────────────────────────────── */

.iag-config .iag-btn {
    padding: .45rem .9rem;
    border-radius: 6px;
    border: 1px solid var(--iag-borde);
    background: var(--iag-fondo);
    color: var(--iag-texto);
    font-size: .9rem;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.3;
}

.iag-config .iag-btn:hover:not(:disabled) {
    border-color: var(--iag-acento);
    color: var(--iag-acento);
}

.iag-config .iag-btn:disabled { opacity: .6; cursor: default; }

.iag-config .iag-btn-chico { padding: .25rem .6rem; font-size: .82rem; }

.iag-config .iag-btn-primario {
    background: var(--iag-acento);
    border-color: var(--iag-acento);
    color: #fff;
    font-weight: 600;
}

.iag-config .iag-btn-primario:hover:not(:disabled) {
    filter: brightness(.93);
    color: #fff;
}

.iag-config .iag-pie {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Teléfono ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .iag-config .iag-grilla-2 { grid-template-columns: 1fr; }
    .iag-config .iag-bloque { padding: .9rem; }
}