.rejilla-rendimiento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espacio-pequeno);
    margin-bottom: var(--espacio-normal);
}

@media (max-width: 800px) {
    .rejilla-rendimiento { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
    .rejilla-rendimiento { grid-template-columns: repeat(1, 1fr); }
}

.tarjeta-rendimiento {
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: var(--radio-medio);
    padding: var(--espacio-normal);
    text-align: center;
    transition: box-shadow var(--transicion-base), transform var(--transicion-base);
}

.tarjeta-rendimiento:hover {
    box-shadow: var(--sombra-flotante);
    transform: translateY(-1px);
}

.rend-valor {
    display: block;
    font-size: 1.5rem;
    font-weight: var(--grosor-negrita);
    line-height: 1.2;
    color: var(--texto-base);
    font-variant-numeric: tabular-nums;
}

.rend-etiqueta {
    display: block;
    font-size: var(--tamano-xs);
    color: var(--texto-suave);
    margin-top: var(--espacio-minimo);
}

.rend-sub {
    display: block;
    font-size: var(--tamano-xs);
    color: var(--texto-suave);
    margin-top: 2px;
    cursor: help;
}

.tarjeta-rendimiento[data-metrica="lentos"] .rend-valor {
    color: var(--color-peligro);
}

.tarjeta-rendimiento[data-metrica="promedio"] .rend-valor {
    color: var(--color-exito);
}

.tarjeta-rendimiento[data-metrica="p95"] .rend-valor,
.tarjeta-rendimiento[data-metrica="p99"] .rend-valor,
.tarjeta-rendimiento[data-metrica="maximo"] .rend-valor {
    color: var(--color-advertencia);
}

.tarjeta-rendimiento[data-metrica="mediana"] .rend-valor {
    color: var(--color-info);
}

.tarjeta-rendimiento[data-metrica="memoria"] .rend-valor {
    color: var(--color-marca);
}

/* Estado de salud */
.rend-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radio-pildora);
    font-size: var(--tamano-xs);
    font-weight: var(--grosor-titulos);
}

.rend-estado-exito {
    background: color-mix(in srgb, var(--color-exito) 20%, transparent);
    color: var(--color-exito);
}

.rend-estado-advertencia {
    background: color-mix(in srgb, var(--color-advertencia) 20%, transparent);
    color: var(--color-advertencia);
}

.rend-estado-peligro {
    background: color-mix(in srgb, var(--color-peligro) 20%, transparent);
    color: var(--color-peligro);
}

.rend-estado-neutral {
    background: var(--fondo-alterno);
    color: var(--texto-suave);
}

/* Distribution bars */
.rend-barras {
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: var(--radio-medio);
    padding: var(--espacio-normal);
}

.rend-barra-etiquetas {
    display: flex;
    justify-content: space-between;
    font-size: var(--tamano-xs);
    color: var(--texto-suave);
    margin-bottom: var(--espacio-minimo);
}

.rend-barra-contenedor {
    display: flex;
    height: 24px;
    border-radius: var(--radio-pequeno);
    overflow: hidden;
    background: var(--fondo-alterno);
}

.rend-barra {
    height: 100%;
    transition: width var(--transicion-base);
    background: var(--color-marca);
    min-width: 2px;
}

.rend-barra[data-rango="50-100"] { background: var(--color-exito); }
.rend-barra[data-rango="100-200"] { background: var(--color-info); }
.rend-barra[data-rango="200-500"] { background: var(--color-advertencia); }
.rend-barra-lenta { background: var(--color-peligro); }

.rend-barra-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-normal);
    margin-top: var(--espacio-normal);
    font-size: var(--tamano-xs);
    color: var(--texto-suave);
}

.rend-leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rend-leyenda-color {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radio-redondeado);
}

/* Recent requests table */
.rend-tabla-scroll {
    max-height: 400px;
    overflow-y: auto;
}

.rend-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tamano-xs);
}

.rend-tabla thead th {
    text-align: left;
    padding: var(--espacio-pequeno) var(--espacio-minimo);
    border-bottom: var(--grosor-trazo) solid var(--trazo-suave);
    color: var(--texto-suave);
    font-weight: var(--grosor-titulos);
    position: sticky;
    top: 0;
    background: var(--fondo-elemento);
}

.rend-tabla tbody td {
    padding: var(--espacio-pequeno) var(--espacio-minimo);
    border-bottom: var(--grosor-trazo) solid var(--trazo-suave);
    white-space: nowrap;
}

.rend-tabla tbody tr:hover {
    background: var(--fondo-alterno);
}

.rend-metodo {
    display: inline-block;
    padding: 1px 5px;
    border-radius: var(--radio-redondeado);
    font-size: var(--tamano-xs);
    font-weight: var(--grosor-negrita);
    font-family: monospace;
}

.rend-metodo-get {
    background: color-mix(in srgb, var(--color-exito) 20%, transparent);
    color: var(--color-exito);
}

.rend-metodo-post {
    background: color-mix(in srgb, var(--color-info) 20%, transparent);
    color: var(--color-info);
}

.rend-uri {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
    font-size: var(--tamano-xs);
}

.rend-verde { color: var(--color-exito); }
.rend-amarillo { color: var(--color-advertencia); }
.rend-rojo { color: var(--color-peligro); }

/* Loading indicator */
.indicador-cargando {
    display: inline-block;
    animation: rotar 0.8s linear infinite;
    font-size: var(--tamano-sm);
}

@keyframes rotar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.texto-peligro { color: var(--color-peligro); }
.texto-advertencia { color: var(--color-advertencia); }