/* La pantalla del colaborador de /mundo (D-121). Encima de mundo.css. Tope 4 480 B (D-136). */
/* `.casilla` lleva display con !important: sin esto, una casilla oculta se ve. */
[hidden], .casilla[hidden] { display: none !important; }
.nota { font-size: 1rem; }
.btn-ancho { width: 100%; box-sizing: border-box; }
.f { display: grid; gap: var(--s-3); }
.f label { display: grid; gap: var(--s-1); font-size: 1rem; }
.f input, .f textarea, .f select { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.05rem; padding: var(--s-3); border: 1.5px solid var(--linea); border-radius: 8px; background: var(--papel); color: var(--tinta); }
.f textarea { resize: vertical; }
#solo-cuadro, #solo-cancion { display: grid; gap: var(--s-3); }
.casilla { display: flex !important; gap: var(--s-2); align-items: flex-start; }
.f .casilla { flex-direction: row; }
.con-credito { display: grid; gap: var(--s-3); padding: var(--s-3); border-left: 4px solid var(--casa); background: var(--casa-suave); }
.casilla input { width: 44px; height: 44px; margin: 0; flex: none; accent-color: var(--casa); }
.cuenta { margin: 0; justify-self: end; font-size: 1rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.cuenta.pasado { color: var(--brasa); font-weight: 700; }
.error { color: var(--brasa); font-size: 1rem; margin: 0; }
.mias { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.mias li { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: center; padding: var(--s-3); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); }
.mias .cuando { flex-basis: 100%; font-size: 1rem; color: var(--tinta-suave); }
.mias b { flex-basis: 100%; font-size: 1.1rem; }
.marca { font-size: 1rem; font-weight: 700; padding: 0 var(--s-2); border-radius: 999px; background: var(--casa-suave); color: var(--casa); }
.marca.preparada { background: var(--ambar-suave); color: var(--ambar-tinta); }
.marca.archivo { background: var(--linea); color: var(--tinta-suave); }
/* «Ver cómo quedará» (plan 3): la tarjeta real de /mundo, que trae el servidor. */
.previa { display: grid; gap: var(--s-2); }
.previa .nota { margin: 0; }
/* La cabecera de su sección, la de /mundo/<sección> (plan 3). */
#parte { margin-bottom: var(--s-4); }
.cab-colabora h1 { margin: 0; font-size: 1.5rem; }
.ayuda-lunes { margin: calc(-1 * var(--s-2)) 0 0; color: var(--tinta-suave); }
/* Varias claves en un móvil: quién eres y a quién puedes pasar. */
.soy { display: grid; gap: var(--s-2); padding: var(--s-3); background: var(--casa-suave); border-radius: var(--r-md); }
.soy p { margin: 0; font-size: 1.05rem; color: var(--tinta); }
#borrador { margin-block: var(--s-3); }
.cambia { display: grid; gap: var(--s-2); }
.cambia .btn { text-align: left; }
/* La foto de la semana (D-124). */
.fs-previa { display: block; max-width: 100%; max-height: 50vh; border-radius: var(--r-md); }
/* Todas las fotos (D-135). */
.fs-revisar{background:var(--ambar-suave);padding:12px;border-radius:10px}
.fs-rejilla{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.fs-celda{all:unset;display:block;width:100%;cursor:pointer}
.fs-celda:focus-visible{outline:3px solid var(--casa);outline-offset:2px}
.fs-cuadro{position:relative;display:block;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--linea)}
.fs-cuadro img{width:100%;height:100%;object-fit:cover}
.fs-cuadro.oculta img{filter:grayscale(1) opacity(.5)}
.fs-sello{position:absolute;left:4px;top:4px;font-size:1rem;font-weight:700;padding:0 6px;border-radius:999px;background:var(--ambar);color:var(--ambar-tinta)}
.fs-sello.gris{background:var(--tinta);color:var(--papel)}
.fs-pie{display:block;font-size:1rem;color:var(--tinta-suave);overflow-wrap:break-word}
.fs-ficha{width:min(100%,36rem);max-height:100%;overflow-y:auto;display:grid;gap:12px;padding:16px;background:var(--papel);border-radius:14px}
.dialogo.fs-dialogo{padding-bottom:76px}
.fs-ficha p{margin:0}
.fs-grande{width:100%;max-height:55vh;object-fit:contain;background:var(--tinta);border-radius:6px}
.fs-pasar,.fs-acciones{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}

/* Varias fotos (spec 2026-10-06): las de más, bajo la principal. */
.mas-lista { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.mas-lista li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mas-lista img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }