/* =========================================
   APIs & INTEGRACIONES - ESTILOS ESPECÍFICOS
   Fondo: Blanco Puro (#FFFFFF)
   ========================================= */

/* --- ENDPOINT CARD --- */
.endpoint-card {
    background: #FFFFFF; /* BLANCO PURO */
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    font-family: var(--font-mono);
    margin-bottom: 10px;
    transition: transform 0.2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.endpoint-card:hover {
    transform: translateX(5px);
    border-color: var(--brand-yellow);
}

/* Métodos HTTP (Fondos muy suaves mantenidos para legibilidad) */
.method-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.8rem;
    margin-right: 15px;
    min-width: 60px;
    text-align: center;
}
.method-get { background: #FFFFFF; border: 1px solid #61affe; color: #61affe; }
.method-post { background: #FFFFFF; border: 1px solid #49cc90; color: #49cc90; }
.method-delete { background: #FFFFFF; border: 1px solid #f93e3e; color: #f93e3e; }

.endpoint-url { color: var(--text-muted); font-size: 0.9rem; }

/* --- CONNECTION NODES --- */
.connection-line {
    border-left: 2px dashed #cbd5e1;
    height: 50px;
    margin-left: 24px;
}

/* --- JSON PREVIEW --- */
.json-block {
    background: #FFFFFF; /* BLANCO PURO (Antes era gris claro) */
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: #334155;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04); /* Sombra para dar volumen sobre blanco */
}
.key { color: var(--brand-yellow); }
.string { color: var(--brand-red); }
.number { color: #059669; }