/* E7: the cloud library and the community — 3D viewer, board facts and the
   community grid. Used by the public pages (layouts/pagina, which defines the
   tokens) and by /cuenta (Filament): every colour has a fallback. */

/* ---- 3D viewer: the board on the night-loft ground of the brand ---- */
.visor3d {
    position: relative;
    margin: 0;
    background: radial-gradient(120% 90% at 50% 35%, #1a3a50 0%, #0a1b28 70%);
    color: #eaf0f3;
    overflow: hidden;
    border-radius: 0;
}
.visor3d-escena { position: relative; aspect-ratio: 16 / 10; min-height: 16rem; }
.visor3d:fullscreen { width: 100vw; height: 100vh; }
.visor3d:fullscreen .visor3d-escena { aspect-ratio: auto; height: 100%; }
.visor3d-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.visor3d-lienzo:active { cursor: grabbing; }
.visor3d-miniatura {
    position: absolute; inset: 8% 6% 18%; width: 88%; height: 74%;
    object-fit: contain; opacity: 0.85; transition: opacity 0.3s;
}
.visor3d--listo .visor3d-miniatura { opacity: 0; visibility: hidden; }
.visor3d-pista, .visor3d-giro { display: none; }
.visor3d--listo .visor3d-pista {
    position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%);
    display: block; color: #eaf0f3; opacity: 0.85; pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    animation: visor3d-vaiven 2.4s ease-in-out infinite;
    transition: opacity 0.4s;
}
.visor3d--tocado .visor3d-pista { opacity: 0; animation: none; }
@keyframes visor3d-vaiven { 0%, 100% { transform: translateX(-62%); } 50% { transform: translateX(-38%); } }
.visor3d--listo .visor3d-giro {
    position: absolute; top: 0.75rem; right: 0.75rem;
    display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;
    color: #eaf0f3; background: rgba(7, 21, 31, 0.55); border: 1px solid #2a4558; border-radius: 50%; cursor: pointer;
}
.visor3d-giro:hover { background: rgba(7, 21, 31, 0.8); }
.visor3d-giro[aria-pressed="true"] { color: #0e1a22; background: #ff7a45; border-color: #ff7a45; }
.visor3d-giro:focus-visible { outline: 2px solid #ff8a5b; outline-offset: 2px; }
.visor3d .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    .visor3d--listo .visor3d-pista { animation: none; }
}
.visor3d--sin .visor3d-miniatura { opacity: 1; }
.visor3d--sin .visor3d-botones { display: none; }
.visor3d-pie {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
    padding: 0.6rem 0.75rem;
    background: linear-gradient(transparent, rgba(7, 21, 31, 0.85));
    font-size: 0.85rem;
}
.visor3d-estado { color: #c4d2da; }
.visor3d-botones { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.visor3d-botones button {
    font: inherit; font-weight: 600; color: #eaf0f3;
    background: rgba(255, 255, 255, 0.08); border: 1px solid #2a4558; border-radius: 0;
    padding: 0.35rem 0.7rem; min-height: 2.25rem; cursor: pointer;
}
.visor3d-botones button:hover { background: rgba(255, 255, 255, 0.16); }
.visor3d-botones button[aria-pressed="true"] { background: #ff7a45; border-color: #ff7a45; color: #0e1a22; }
/* Full screen: an icon only (its name in the tooltip and for screen readers). */
.visor3d-botones button.visor3d-completa { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; padding: 0; }
.visor3d-completa .i-salir, .visor3d-completa[aria-pressed="true"] .i-entrar { display: none; }
.visor3d-completa[aria-pressed="true"] .i-salir { display: block; }
.visor3d-botones button.visor3d-completa[aria-pressed="true"] { background: rgba(255, 255, 255, 0.08); border-color: #2a4558; color: #eaf0f3; }
.visor3d-botones button:focus-visible { outline: 2px solid #ff8a5b; outline-offset: 2px; }

/* ---- Board facts ---- */
.tabla-info { margin-top: 1.5rem; }
.tabla-titulo {
    font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em;
    margin: 1.75rem 0 0.6rem; padding-top: 1rem;
    border-top: 1px solid var(--rule-soft, rgba(127, 140, 150, 0.25));
}
.tabla-datos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.9rem 1.5rem; margin: 0;
}
.tabla-datos > div { min-width: 0; }
.tabla-datos-ancho { grid-column: 1 / -1; }
.ficha-lado .tabla-datos { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
/* On a phone the two columns are one: a rule between them. */
@media (max-width: 63.99rem) { .ficha-cuerpo > .ficha-lado + .ficha-lado { padding-top: 1.25rem; border-top: 1px solid var(--rule-soft, rgba(127, 140, 150, 0.25)); } }
.tabla-datos dt { font-size: 0.8rem; color: var(--ink-2, #6b7b85); margin: 0; }
.tabla-datos dd { margin: 0.1rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tabla-descripcion { white-space: pre-line; overflow-wrap: anywhere; max-width: 68ch; }

/* ---- Versions of my board (/cuenta) ---- */
.versiones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.versiones li { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(127, 140, 150, 0.2); }
.versiones-n { font-weight: 700; }
.versiones-meta { color: #6b7b85; font-variant-numeric: tabular-nums; }
.versiones a { margin-left: auto; text-decoration: underline; }

/* ---- Actions on a board's page ---- */
.tabla-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.5rem 0 0; }
.tabla-acciones p { flex-basis: 100%; margin: 0; }
.tabla-acciones form { margin: 0; }

/* ---- A board's page: viewer on the left, facts on the right (wide screens) ---- */
.sheet.ficha > * { max-width: none; }
.ficha-cabeza > * { max-width: 68ch; }
.ficha-lado .tabla-acciones { margin-top: 0; }
/* The first heading of a column has no rule above it. */
.ficha-lado .tabla-info > .tabla-titulo:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ficha-cuerpo { display: grid; gap: 1.75rem; margin-top: 1.5rem; }
.ficha-lado .tabla-info { margin-top: 0; }
.ficha-lado .tabla-acciones + .tabla-info { margin-top: 1.5rem; }
@media (min-width: 64rem) {
    /* Wide viewer: the board is long and flat, so a panoramic frame wastes less. */
    .ficha-visor .visor3d-escena { aspect-ratio: 21 / 9; max-height: 70vh; }
    .ficha-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
    .ficha-cuerpo > .ficha-lado + .ficha-lado { padding-left: 3rem; border-left: 1px solid var(--rule-soft, rgba(127, 140, 150, 0.25)); }
}
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 2.75rem;
    padding: 0.55rem 1.2rem; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
    border: 1px solid var(--naranja, #ff7a45); background: var(--naranja, #ff7a45); color: #0e1a22; border-radius: 0;
}
.boton:hover { background: #ff905f; text-decoration: none; }
.boton .icono { flex: none; margin-left: -0.15rem; }
.boton--sec { background: transparent; color: var(--ink, inherit); border-color: var(--rule, #c9d3d7); }
.boton--sec:hover { background: var(--rule-soft, rgba(127, 140, 150, 0.15)); }
.aviso {
    margin: 0 0 1.25rem; padding: 0.75rem 1rem;
    border: 1px solid var(--rule, #c9d3d7); background: var(--sheet, transparent);
    font-weight: 600;
}
.aviso--ok { border-color: #2f9e6e; }
.denuncia { margin-top: 2rem; font-size: 0.95rem; }
.denuncia summary { cursor: pointer; color: var(--link, inherit); }
.denuncia form { display: grid; gap: 0.75rem; max-width: 32rem; margin-top: 0.75rem; }
.denuncia label { display: grid; gap: 0.3rem; font-weight: 600; }
.denuncia select, .denuncia textarea, .filtros input, .filtros select {
    font: inherit; color: inherit; background: var(--sheet, transparent);
    border: 1px solid var(--rule, #c9d3d7); border-radius: 0; padding: 0.5rem 0.6rem; min-height: 2.6rem;
}

/* ---- Community grid ---- */
.filtros { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin: 1.5rem 0; }
.filtros label { display: grid; gap: 0.3rem; font-size: 0.85rem; color: var(--ink-2, inherit); }
.filtros .filtros-buscar { flex: 1 1 16rem; }
.filtros input { width: 100%; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.rejilla li { margin: 0; }
.tarjeta {
    display: grid; height: 100%; color: inherit; text-decoration: none;
    background: var(--sheet, transparent); box-shadow: 0 0 0 1px var(--rule, #c9d3d7);
}
.tarjeta:hover { box-shadow: 0 0 0 2px var(--naranja, #ff7a45); text-decoration: none; }
.tarjeta-img { aspect-ratio: 1; width: 100%; height: auto; object-fit: contain; background: radial-gradient(120% 90% at 50% 35%, #1a3a50 0%, #0a1b28 70%); }
.tarjeta-texto { padding: 0.75rem 0.9rem 0.9rem; display: grid; gap: 0.2rem; }
.tarjeta-nombre { font-weight: 700; overflow-wrap: anywhere; }
.tarjeta-meta { font-size: 0.85rem; color: var(--ink-2, #6b7b85); font-variant-numeric: tabular-nums; }
.marca {
    justify-self: start; margin-top: 0.3rem; padding: 0.1rem 0.45rem;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
    border: 1px solid var(--rule, #c9d3d7); color: var(--ink-2, #4a5a64);
}
.contacto { display: grid; gap: 0.6rem; flex-basis: 100%; }
.contacto label { display: grid; gap: 0.3rem; font-weight: 600; }
.contacto textarea {
    font: inherit; color: inherit; background: var(--sheet, transparent); width: 100%;
    border: 1px solid var(--rule, #c9d3d7); border-radius: 0; padding: 0.5rem 0.6rem;
}
.contacto-ayuda { font-size: 0.85rem; color: var(--ink-2, #6b7b85); }
.contacto .boton { justify-self: start; }
.paginas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.total { color: var(--ink-2, inherit); margin: 0 0 1rem; }

@media (max-width: 640px) {
    /* On a phone the bar goes under the board instead of over it. */
    .visor3d-escena { aspect-ratio: 4 / 3; min-height: 0; }
    .visor3d:not(:fullscreen) .visor3d-pie { position: static; background: #07151f; justify-content: flex-start; }
    .rejilla { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem; }
}