/* Identidad de canchas y espacios. El dibujo es orientativo: no expresa disponibilidad. */
.recurso-visual {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
}
.recurso-visual-medio {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--accent-soft);
    color: var(--accent);
}
.recurso-visual-foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.recurso-visual-dibujo {
    display: block;
    width: 100%;
    height: 100%;
    padding: var(--space-3) var(--space-3) var(--space-6);
}
.recurso-visual-trazo {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.recurso-visual-superficie { fill: var(--panel); }
.recurso-visual-punto { fill: currentColor; stroke: none; }
.recurso-visual-red { stroke-width: 1; stroke-dasharray: 3 3; }
.recurso-visual-nota {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-3);
    right: var(--space-3);
    color: var(--text-2);
    font-size: var(--text-xs);
    text-align: center;
    line-height: 1.3;
}
.recurso-visual-descripcion {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    overflow-wrap: anywhere;
}
.recurso-visual-nombre { margin: 0; color: var(--text); font-size: var(--text-lg); line-height: 1.3; }
.recurso-visual-tipo { color: var(--muted); font-size: var(--text-sm); }
.recurso-visual[data-tipo="QUINCHO"] .recurso-visual-medio,
.recurso-visual[data-tipo="PARRILLA"] .recurso-visual-medio,
.recurso-visual[data-tipo="OTRO"] .recurso-visual-medio { background: var(--panel-3); color: var(--text-2); }
/* Miniaturas de identificación en la agenda: el estado pertenece a cada horario. */
.grilla-recurso { display: flex; align-items: center; gap: var(--space-2); text-align: left; }
.grilla-recurso-miniatura {
    flex: 0 0 72px;
    width: 72px;
    height: 46px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    overflow: hidden;
}
.grilla-recurso-miniatura .recurso-visual-dibujo { padding: 2px; }
.grilla-recurso-texto { min-width: 0; max-width: 200px; overflow-wrap: anywhere; }
.grilla-recurso-texto small { white-space: normal; }
@media (max-width: 760px) {
    .grilla-recurso { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
    .grilla-recurso-miniatura { flex-basis: auto; width: 64px; height: 40px; }
}
@media (forced-colors: active) {
    .recurso-visual-medio { color: CanvasText; }
    .grilla-recurso-miniatura { color: CanvasText; }
    .recurso-visual-superficie { fill: Canvas; }
}