/* ============================================================
   WTF PUBLICIDAD — Panel Interno
   subida-multiple.css — Zona de varios archivos (assets/js/subida-multiple.js)
   y galería de archivos de una pieza de Redes (assets/js/redes-archivos.js).
   Colores del tema (shell.css); el verde es acento: borde y barra, nunca
   texto blanco sobre verde (el texto sobre verde va en negro).
   ============================================================ */

.sm { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.sm-zona {
  position: relative; border: 2px dashed var(--brh); border-radius: var(--r2);
  padding: .85rem 1rem; text-align: center; cursor: pointer; background: transparent;
  transition: border-color .15s ease, background .15s ease; color: var(--t);
}
.sm-zona:hover, .sm-zona.sm-sobre { border-color: var(--g); background: var(--green-bg); }
.sm-zona:focus-visible { outline: 3px solid rgba(117,184,42,.45); outline-offset: 2px; border-color: var(--g); }
.sm-zona.sm-sobre { border-style: solid; }
.sm-zona.sm-deshabilitada { opacity: .5; cursor: not-allowed; }
.sm-zona.sm-deshabilitada:hover { border-color: var(--brh); background: transparent; }
.sm-zona-ico { font-size: 24px; color: var(--tm); display: block; margin-bottom: .25rem; }
.sm-zona.sm-sobre .sm-zona-ico { color: var(--g); }
.sm-zona-txt { font-size: 12px; color: var(--t); }
.sm-zona-txt b { font-weight: 600; }
.sm-zona-link { color: #3B6D11; text-decoration: underline; font-weight: 600; }
[data-theme="dark"] .sm-zona-link { color: var(--g); }
.sm-zona-sub { font-size: 10.5px; color: var(--ts); margin-top: .2rem; line-height: 1.45; }
.sm-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sm-compacto .sm-zona { padding: .55rem .75rem; display: flex; align-items: center; gap: .6rem; text-align: left; }
.sm-compacto .sm-zona-ico { margin: 0; font-size: 20px; flex-shrink: 0; }
.sm-compacto .sm-zona-textos { flex: 1; min-width: 0; }
.sm-compacto .sm-zona-sub { margin-top: .1rem; }

.sm-aviso { display: flex; gap: .45rem; align-items: flex-start; font-size: 11px; line-height: 1.5; color: var(--t);
  background: var(--yellow-bg); border: 1px solid var(--yellow-br); border-radius: var(--r); padding: .45rem .6rem; }
.sm-aviso i { font-size: 14px; color: #BA7517; flex-shrink: 0; margin-top: 1px; }
.sm-aviso-error { background: var(--red-bg); border-color: var(--red-br); }
.sm-aviso-error i { color: #C0392B; }
[data-theme="dark"] .sm-aviso i { color: #EF9F27; }
[data-theme="dark"] .sm-aviso-error i { color: #f87171; }
.sm-avisos:empty { display: none; }

.sm-lista { list-style: none; display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; }
.sm-lista:empty { display: none; }
.sm-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: .5rem; align-items: center;
  padding: .4rem .5rem; border: 1px solid var(--br); border-radius: var(--r); background: var(--c1); }
.sm-item.sm-error { border-color: var(--red-br); background: var(--red-bg); }
.sm-item.sm-listo { border-color: var(--green-br); }
.sm-item-ico { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--c2); color: var(--ts); font-size: 15px; }
.sm-listo .sm-item-ico { color: #3B6D11; background: var(--green-bg); }
[data-theme="dark"] .sm-listo .sm-item-ico { color: var(--g); }
.sm-error .sm-item-ico { color: #C0392B; }
[data-theme="dark"] .sm-error .sm-item-ico { color: #f87171; }
.sm-item-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.sm-item-nom { font-size: 12px; font-weight: 600; color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-item-meta { font-size: 10.5px; color: var(--ts); }
.sm-item-error { font-size: 11px; color: #B42318; line-height: 1.4; }
[data-theme="dark"] .sm-item-error { color: #f87171; }
.sm-barra { display: block; height: 5px; border-radius: 3px; background: var(--br); overflow: hidden; }
.sm-barra > span { display: block; height: 100%; width: 0; background: var(--g); border-radius: 3px; transition: width .2s ease; }
.sm-error .sm-barra > span { background: #E24B4A; }
.sm-espera .sm-barra { opacity: .55; }
.sm-item-acc { display: flex; gap: .2rem; }
.sm-icono { width: 30px; height: 30px; border-radius: 7px; border: 1px solid transparent; background: none; color: var(--ts);
  cursor: pointer; display: grid; place-items: center; font-size: 15px; font-family: var(--font); }
.sm-icono:hover { background: var(--c2); color: var(--t); border-color: var(--br); }
.sm-icono:focus-visible, .sm-btn:focus-visible { outline: 3px solid rgba(117,184,42,.45); outline-offset: 1px; }

.sm-pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.sm-pie[hidden] { display: none; }
.sm-cuenta { font-size: 11px; color: var(--ts); }
.sm-pie-botones { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: auto; }
.sm-btn { padding: 6px 12px; border-radius: var(--r2); font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--font);
  display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--br); }
.sm-btn[hidden] { display: none; }
.sm-btn-sec { background: var(--c2); color: var(--ts); }
.sm-btn-sec:hover { background: var(--c1); color: var(--t); }
/* Texto negro sobre el verde (regla de marca) */
.sm-btn-prim { background: var(--g); color: #000; border-color: var(--g); }
.sm-btn-prim:hover { background: var(--gd); }
.sm-btn:disabled { opacity: .45; cursor: default; }

/* ── Galería de archivos de una pieza de Redes (carrusel, reel con portada) ── */
.ra { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.ra-cab { display: flex; flex-direction: column; gap: .15rem; font-size: 11px; color: var(--ts); }
.ra-cab-n { display: flex; align-items: center; gap: .35rem; }
.ra-cab b { color: var(--t); font-weight: 700; }
.ra-cab-reglas { line-height: 1.45; }
.ra-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .45rem; }
.ra-item { position: relative; border: 1px solid var(--br); border-radius: var(--r); background: var(--c2); overflow: hidden;
  display: flex; flex-direction: column; min-width: 0; }
.ra-item.ra-arrastrando { opacity: .4; }
.ra-item.ra-destino { outline: 2px dashed var(--g); outline-offset: 1px; }
.ra-item:focus-within { border-color: var(--g); }
.ra-mini { position: relative; aspect-ratio: 1; background: var(--c2); display: grid; place-items: center; color: var(--tm); font-size: 22px; cursor: zoom-in; border: none; padding: 0; width: 100%; font-family: var(--font); }
.ra-mini img, .ra-mini video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ra-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 18px; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; }
.ra-num { position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,.66); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
/* Portada: etiqueta negra sobre verde */
.ra-portada { position: absolute; top: 4px; right: 4px; background: var(--g); color: #000; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.ra-pie { display: flex; align-items: center; justify-content: space-between; gap: .1rem; padding: .15rem .2rem; background: var(--c1); border-top: 1px solid var(--br); }
.ra-pie .sm-icono { width: 26px; height: 26px; font-size: 13px; }
.ra-pie .sm-icono:disabled { opacity: .3; cursor: default; }
.ra-nom { font-size: 9.5px; color: var(--ts); padding: .15rem .35rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--c1); }
.ra-asa { cursor: grab; }
.ra-aviso { font-size: 11px; line-height: 1.5; color: var(--t); background: var(--yellow-bg); border: 1px solid var(--yellow-br); border-radius: var(--r); padding: .45rem .6rem; display: flex; gap: .4rem; }
.ra-aviso i { color: #BA7517; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
[data-theme="dark"] .ra-aviso i { color: #EF9F27; }
.ra-vacio { font-size: 11px; color: var(--tm); }
.ra-conteo { display: inline-flex; align-items: center; gap: .2rem; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 20px; background: var(--c2); color: var(--ts); border: 1px solid var(--br); white-space: nowrap; }

.ra-conf { font-size: 10px; font-weight: 700; color: var(--t); padding-left: .2rem; }
.ra-version { display: flex; align-items: flex-start; gap: .4rem; font-size: 11px; color: var(--t); cursor: pointer; line-height: 1.45; }
.ra-version input { margin-top: 2px; accent-color: var(--g); }
.ra-opciones:empty { display: none; }
.ra-item.ra-subiendo { opacity: .5; pointer-events: none; }
.ra-item.ra-subiendo::after { content: "Subiendo…"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--t); background: rgba(0,0,0,.08); }
.ra-lista[hidden] { display: none; }
a.ra-mini { text-decoration: none; }

/* Miniatura de tabla con el número de archivos (carrusel) */
.ra-mini-caja { position: relative; width: 100%; height: 100%; }
.ra-mini-n { position: absolute; right: 2px; bottom: 2px; display: inline-flex; align-items: center; gap: 1px; background: rgba(0,0,0,.72); color: #fff;
  font-size: 9px; font-weight: 700; padding: 0 4px; border-radius: 4px; line-height: 15px; }
.ra-mini-n i { font-size: 9px; }

/* Visor de carrusel (vista previa) */
.rv { position: relative; border-radius: var(--r); overflow: hidden; background: var(--c2); outline: none; margin-bottom: .75rem; }
.rv:focus-visible { box-shadow: 0 0 0 3px rgba(117,184,42,.45); }
.rv-medio { display: flex; align-items: center; justify-content: center; min-height: 160px; max-height: 340px; }
.rv-medio img, .rv-medio video { width: 100%; max-height: 340px; object-fit: contain; display: block; background: #000; }
.rv-archivo { display: flex; align-items: center; gap: .4rem; padding: 1.25rem; font-size: 12px; color: var(--t); }
.rv-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.92); color: #111; display: grid; place-items: center; cursor: pointer; font-size: 18px; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
.rv-flecha:disabled { opacity: 0; pointer-events: none; }
.rv-flecha:focus-visible { outline: 3px solid rgba(117,184,42,.7); }
.rv-ant { left: 8px; }
.rv-sig { right: 8px; }
.rv-etq { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.rv-puntos { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; padding: 0 2.5rem; }
.rv-punto { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,.55); cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.rv-punto.on { background: #fff; transform: scale(1.25); }
.rv-vacio { height: 120px; display: grid; place-items: center; color: var(--tm); font-size: 24px; background: var(--c2); border-radius: var(--r); margin-bottom: .75rem; }

@media (max-width: 480px) {
  .sm-zona { padding: .7rem .6rem; }
  .sm-pie-botones { width: 100%; }
  .sm-pie-botones .sm-btn { flex: 1 1 auto; justify-content: center; }
  .ra-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}