/* public/api-mcp/css/api-mcp.css
   API, MCP y Skills. Todo con tokens: los hex sueltos los cuenta el trinquete. */

.amc, .amc * { font-family: 'Outfit', system-ui, -apple-system, sans-serif; }
/* La familia del módulo pisa Font Awesome y los iconos salen como rayitas. */
.amc i[class*="fa-"] { font-family: 'Font Awesome 6 Free' !important; }

.amc { padding: 1.5rem; max-width: 1100px; margin: 0 auto; }
.amc-cab { margin-bottom: 1.5rem; }
.amc-titulo { font-size: 1.7rem; font-weight: 800; margin: 0; color: var(--stone-950); }
.amc-nota { color: var(--stone-500); font-size: .92rem; margin: .5rem 0 0; max-width: 72ch; line-height: 1.5; }

.amc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.amc-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--stone-200);
    border-radius: 14px;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.amc-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
}
.amc-card h2 { font-size: 1.15rem; font-weight: 800; margin: .75rem 0 .35rem; color: var(--stone-950); }
.amc-card p { color: var(--stone-500); font-size: .87rem; line-height: 1.45; margin: 0; }
.amc-card-icono {
    width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.amc-card-icono--api { background: var(--color-info-light); color: var(--color-info); }
.amc-card-icono--mcp { background: var(--color-error-light); color: var(--color-primary); }
.amc-card-icono--skills { background: var(--color-success-light); color: var(--color-success); }
.amc-card-dato {
    display: inline-block; margin-top: .85rem; font-size: .8rem;
    font-weight: 700; color: var(--color-primary);
}

.amc-flujo {
    background: var(--surface);
    border: 1px solid var(--stone-200);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
}
.amc-flujo h3 { margin: 0 0 .75rem; font-size: 1rem; font-weight: 800; color: var(--stone-950); }
.amc-flujo ol { margin: 0; padding-left: 1.15rem; color: var(--stone-600); }
.amc-flujo li { margin-bottom: .6rem; line-height: 1.5; font-size: .89rem; }

/* Páginas internas */
.amc-volver { margin-bottom: 1rem; display: inline-flex; }
.amc-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.amc-tabla-wrap .dash-table { min-width: 720px; }
.amc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem; }
.amc-badge {
    display: inline-block; padding: .16rem .55rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700;
}
.amc-b-get { background: var(--color-success-light); color: var(--color-success); }
.amc-b-write { background: var(--color-warning-light); color: var(--color-warning); }
.amc-b-pub { background: var(--color-info-light); color: var(--color-info); }
.amc-vacio { text-align: center; padding: 3rem 1rem; color: var(--stone-500); }
.amc-nota-chica { color: var(--stone-500); font-size: .82rem; margin-top: .25rem; }

@media (max-width: 640px) { .amc { padding: 1rem .75rem; } }

/* KPIs de la página de API. Propios: los de TECH viven en tech.css, que aquí no se carga
   — se veían como texto suelto sin caja. */
.amc-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 1.5rem;
}
.amc-kpi {
    background: var(--surface);
    border: 1px solid var(--stone-200);
    border-radius: 12px;
    padding: 14px 16px;
}
.amc-kpi-valor { font-size: 1.6rem; font-weight: 800; color: var(--stone-950); line-height: 1.1; }
.amc-kpi-label { font-size: .8rem; color: var(--stone-500); margin-top: 2px; }

/* ── Consumir un skill: botones para lo frecuente, chat para lo demás ──────────── */
.sk-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: .75rem; }
.sk-accion { font-size: .84rem; }
.sk-respuesta {
    background: var(--stone-100);
    border-radius: 10px;
    padding: .85rem 1rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--stone-700);
    white-space: pre-wrap;
    margin-top: .5rem;
}
.sk-chat {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--stone-200);
    border-radius: 10px;
    padding: .75rem;
    margin-bottom: .6rem;
    background: var(--surface);
}
.sk-chat:empty { display: none; }
.sk-msg {
    padding: .6rem .85rem;
    border-radius: 12px;
    margin-bottom: .5rem;
    font-size: .87rem;
    line-height: 1.5;
    max-width: 85%;
    white-space: pre-wrap;
}
.sk-msg--yo { background: var(--color-primary); color: var(--crema); margin-left: auto; }
.sk-msg--el { background: var(--stone-100); color: var(--stone-700); }
.sk-entrada { display: flex; gap: .5rem; }
.sk-entrada .input-field { flex: 1; }

/* ── Credenciales de máquina ────────────────────────────────────────────────────
   Compartidas por la pantalla de la API y la del MCP: son dos flujos distintos,
   pero una credencial se ve igual en las dos. Vivían en el <style> de mcp.html;
   copiarlas a api.html habría sido dos tablas que se separan con el tiempo. */
.cred-tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cred-tab {
    padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--stone-300);
    background: var(--surface); cursor: pointer; font-weight: 600; font-size: .92rem;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}
.cred-tab.active { background: var(--primary); color: var(--crema); border-color: var(--primary); }
.cred-badge {
    display: inline-block; padding: .18rem .6rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600;
}
.b-viva { background: var(--color-success-light); color: var(--color-success); }
.b-muerta { background: var(--stone-200); color: var(--stone-600); }
.b-pendiente { background: var(--color-warning-light); color: var(--color-warning); }
.b-ok { background: var(--color-success-light); color: var(--color-success); }
.b-no { background: var(--color-error-light); color: var(--color-error); }
.cred-vacio { text-align: center; padding: 3rem 1rem; color: var(--stone-500); }
.cred-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; }
.cred-nota { color: var(--stone-500); font-size: .85rem; margin-top: .25rem; }
.cred-alerta { color: var(--color-warning); }
.cred-error { color: var(--color-error); }
.cred-comousar {
    background: var(--surface); border: 1px solid var(--stone-200);
    border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.cred-comousar summary { cursor: pointer; font-weight: 700; color: var(--stone-950); }
.cred-comousar h4 { margin: 1rem 0 .35rem; font-size: .9rem; }
.cred-comousar ol, .cred-comousar ul {
    color: var(--stone-600); font-size: .87rem; line-height: 1.6; padding-left: 1.15rem;
}
.cred-comousar pre {
    background: var(--stone-100); border-radius: 8px; padding: .75rem;
    overflow-x: auto; font-size: .78rem; margin: .5rem 0;
}
/* La tabla no cabe en un móvil: rueda dentro de su caja en vez de cortarse. Sin esto no se
   llegaba a Estado, Uso, Vence ni al botón de revocar. */
.cred-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cred-tabla-wrap .dash-table { min-width: 780px; }
@media (max-width: 640px) { .cred-tabs { overflow-x: auto; } }