/* MODIFICACIÓN CLAVE: Estilo para .card y .detail */
.card{
    display:grid;
    /* Define 3 columnas para los elementos superiores y una fila implícita para el detalle */
    grid-template-columns:80px 1fr 190px;
    gap:1rem; /* Espacio entre filas y columnas */
    padding:.8rem;
    border:1px solid #ddd;
    border-radius:6px;
    background:#fff;
    /* Alinea los elementos al inicio de su celda */
    align-items:start;
}

.card img.thumb{width:80px;height:80px;border-radius:4px;object-fit:cover;}
.card .info .name{font-weight:bold;font-size:1rem;}
.card .info .meta{color:#555;font-size:.8rem;line-height:1.15rem;}
.eval{display:flex;flex-direction:column;align-items:center;}
.eval-top{display:flex;gap:.4rem;font-size:.9rem;margin-bottom:.25rem;}
.eval-top .avg{font-weight:bold;color:#333;}
.stars{display:flex;gap:2px;}
.star{font-size:1.4rem;color:#ccc;position:relative;}
.star .fill{position:absolute;left:0;top:0;color:#f5a623;overflow:hidden;width:0%;}
.links a{margin:0 .3rem;font-size:.85rem;color:#0077cc;text-decoration:none;}
.links a:hover{text-decoration:underline;}

/* MODIFICACIÓN CLAVE: Posicionamiento de .detail para ocupar todo el ancho */
.detail{
    /* Hace que el div ocupe todas las columnas de la grilla */
    grid-column: 1 / -1;
    /* Asegura que se coloque en la siguiente fila disponible */
    /* grid-row-start: 2; /* No siempre necesario, pero puede ayudar a ser explícito */
    background:#f7f7f7;
    padding:.5rem 1rem;
    border-left:4px solid #0077cc;
    margin-top:.5rem; /* Mantiene el margen superior para separación visual */
    display:none; /* Inicialmente oculto */
}

#partipa{
	color:#444;
	font-size:.7rem;
	line-height:1.35rem;
	text-align:center;
}