/* ===================================================================== Subida de imágenes en el composer de quejas + galería en la vista. ===================================================================== */ /* ---------------- Composer: bloque de subida ---------------- */ .ComposerMedia { margin-top: 4px; pointer-events: auto; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 14px; } .ComposerMedia-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; align-self: center; } .ComposerMedia-label { color: var(--control-color); font-size: 14px; font-weight: 500; } .ComposerMedia-hint { color: var(--muted-more-color); font-size: 13px; } .ComposerMedia-btn { min-height: 34px; } .ComposerMedia-btn[disabled] { opacity: 0.6; cursor: not-allowed; } /* Tira de miniaturas: tamaño FIJO, con tope de alto y scroll propio, para que nunca empuje el título ni el editor del composer. */ .ComposerMedia-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; flex: 1 1 240px; /* se coloca a la derecha del botón "Subir imágenes" */ padding: 2px; } .ComposerMedia-grid:empty { margin-top: 0; } .ComposerMedia-thumb { position: relative; flex: 0 0 auto; width: 72px; display: flex; flex-direction: column; gap: 3px; } .ComposerMedia-thumbImg { position: relative; width: 72px; height: 54px; background: var(--control-bg) center / cover no-repeat; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--border-radius); } .ComposerMedia-thumb.is-uploading .ComposerMedia-thumbImg { opacity: 0.7; } .ComposerMedia-thumb.is-error .ComposerMedia-thumbImg { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color); } /* Barra de progreso */ .ComposerMedia-progress { position: absolute; left: 3px; right: 3px; top: 43px; height: 4px; background: rgba(0, 0, 0, 0.45); border-radius: 3px; overflow: hidden; } .ComposerMedia-progressBar { height: 100%; width: 0; background: var(--primary-color, #e53935); transition: width 0.15s ease; } .ComposerMedia-errBadge { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--primary-color, #e53935); color: #fff; font-weight: 700; border-radius: 50%; font-size: 13px; } /* Botón quitar (×) */ .ComposerMedia-remove { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; } .ComposerMedia-remove:hover { background: var(--primary-color, #e53935); } .ComposerMedia-caption { width: 72px; font-size: 11px; min-height: 24px; padding: 2px 5px; } /* ===================================================================== SCROLL DENTRO DEL FORMULARIO DE CREAR QUEJA Antes, cuando el contenido (título + imágenes + empresa/depto/municipio + editor) superaba la altura del composer, se salía y quien scrolleaba era la PÁGINA (el composer está fijo) -> campos inalcanzables, ni con Tab. Aquí hacemos que el cuerpo del composer scrollee POR DENTRO. Los desplegables de empresa/depto/municipio se renderizan en (dropdownParent en empresa_id.js) para que este overflow no los recorte. ===================================================================== */ @media (min-width: 768px) { /* En pantallas grandes el "Crear queja" pasa a ser un MODAL flotante, centrado en la pantalla y con alto FIJO -> el cuerpo scrollea por dentro. Flarum por defecto lo pega abajo y lo corre con margin-left:220px (por eso NO salía centrado); aquí forzamos position:fixed + margin:auto. Solo estado normal (no minimizado, no pantalla completa). */ .Composer.normal:not(.minimized):not(.fullScreen) { position: fixed !important; top: auto !important; bottom: 4vh !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; /* anula el margin-left:220px de Flarum -> centrado real */ width: min(64vw, 940px) !important; height: 82vh !important; max-height: 82vh !important; background: var(--body-bg) !important; /* OPACO (Flarum lo deja translúcido a 93%) */ border-radius: 10px !important; box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6); pointer-events: auto !important; display: flex !important; flex-direction: column !important; } /* Fondo oscuro detrás del modal: lo separa de la página y bloquea clics. */ .Composer.normal:not(.minimized):not(.fullScreen)::before { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: -1; pointer-events: auto; } /* Bloquea el scroll de la página mientras el modal está abierto (no minimizado). Con :has(): si lo minimizas, el candado se suelta solo. */ html:has(.Composer.normal:not(.minimized):not(.fullScreen)) { overflow: hidden; } /* Sin avatar y sin sangrías -> el form y el botón "Publicar" quedan alineados a la izquierda. Arregla el botón "muy a la izquierda": Flarum le mete margin-left:-105px a los controles del editor. */ .Composer.normal:not(.minimized):not(.fullScreen) .ComposerBody-avatar { display: none !important; } .Composer.normal:not(.minimized):not(.fullScreen) .ComposerBody-content { margin-left: 0 !important; } .Composer.normal:not(.minimized):not(.fullScreen) .TextEditor-controls { margin-left: 0 !important; margin-right: 0 !important; } /* Ocultamos el "handle" de redimensionar (no aplica con alto fijo). */ .Composer.normal:not(.minimized):not(.fullScreen) .Composer-handle { display: none !important; } /* El scroll va en .Composer-content (contiene el cuerpo + editor + botón). */ .Composer.normal:not(.minimized):not(.fullScreen) .Composer-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } } /* Desplegables de empresa/depto/municipio ahora viven en (fuera del composer), así que se estilan por su clase propia, no por .ComposerUbicacion-field. */ .ts-dropdown.ComposerUbic-dd { background: var(--body-bg) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: var(--border-radius); color: var(--text-color) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55); margin-top: 4px; z-index: 100000; /* por encima del composer */ } .ts-dropdown.ComposerUbic-dd .ts-dropdown-content { max-height: 220px; overflow-y: auto; } .ts-dropdown.ComposerUbic-dd .option { color: var(--text-color); padding: 7px 10px; font-size: 14px; } .ts-dropdown.ComposerUbic-dd .active { background: var(--body-bg-light) !important; color: var(--text-color) !important; } .ts-dropdown.ComposerUbic-dd .no-results, .ts-dropdown.ComposerUbic-dd .spinner { color: var(--muted-more-color); padding: 7px 10px; } .ts-dropdown.ComposerUbic-dd .dropdown-input-wrap { position: relative; padding: 6px 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .ts-dropdown.ComposerUbic-dd .dropdown-input-wrap::before { content: ''; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; opacity: 0.55; pointer-events: none; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); } .ts-dropdown.ComposerUbic-dd .dropdown-input { background: var(--control-bg); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--border-radius); color: var(--text-color); padding: 7px 10px 7px 32px; width: 100%; box-sizing: border-box; } .ts-dropdown.ComposerUbic-dd .dropdown-input::placeholder { color: var(--control-color); opacity: 1; } /* ===== Logo de la empresa (listado y vista de la queja) ===== Fondo blanco + object-fit:contain para que ningún logo se recorte. Si el archivo no existe, el onerror del JS lo oculta (sin imagen rota). */ .EmpresaLogo { display: inline-block; vertical-align: middle; object-fit: contain; background: #fff; border-radius: 4px; flex: 0 0 auto; } /* Logo GRANDE: ocupa el lugar del avatar del autor en el listado. OJO: el avatar es float:left y Flarum reserva 45px. Si el logo + su margen pasan de 45px, el título se empuja hacia abajo (deja una "línea de más"). Por eso logo + margen SIEMPRE debe sumar <= 45px. */ .EmpresaLogoBig { display: block; width: 38px; height: 38px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; margin-right: 7px; /* 38 + 7 = 45px exactos */ } @media (max-width: 767.98px) { .EmpresaLogoBig { width: 32px; height: 32px; margin-right: 10px; /* 32 + 10 = 42px, dentro de los 45 */ } } /* Logo en la vista de la queja: cuadro propio a la IZQUIERDA de los badges, ya no metido dentro del badge verde de la empresa. */ /* ===================== HERO de la queja (AGRUPADO) ===================== Todo el contenido va dentro de UN contenedor (.QuejaHero) que armamos en JS: [logo] [ contenido: fila de etiquetas / título / subline ]. Así las etiquetas (siempre en fila) y el título (abajo) son INDEPENDIENTES: el largo del título ya no encoge ni separa las etiquetas. */ .DiscussionHero .DiscussionHero-items { display: block !important; width: 100%; max-width: 100%; margin: 0 !important; padding: 0; overflow: visible; } .DiscussionHero .DiscussionHero-items > li.item-quejaHero { display: block; margin: 0; } .QuejaHero { display: flex; gap: 20px; align-items: stretch; justify-content: center; /* el bloque (logo + contenido) centrado en la franja */ width: 100%; } /* Logo a la izquierda. Se estira al alto del contenido. Sin logo (o imagen rota) -> mismo tamaño pero vacío: reserva el espacio para que el contenido quede en la MISMA posición con o sin logo. */ .QuejaHero-logo { flex: none; width: 132px; align-self: stretch; min-height: 118px; object-fit: contain; background: #fff; border-radius: 10px; padding: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); } .QuejaHero-logo--empty { background: transparent; box-shadow: none; } .QuejaHero-content { display: flex; flex-direction: column; justify-content: center; gap: 9px; min-width: 0; } /* Fila de etiquetas: nombre de empresa + tags, SIEMPRE horizontal, pegados. */ .QuejaHero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .QuejaHero-badges .TagsLabel, .QuejaHero-badges .badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } /* Título de la queja: grande, blanco, debajo de las etiquetas. */ .DiscussionHero .DiscussionHero-title { display: block !important; text-align: left !important; color: #fff !important; font-weight: 800 !important; font-size: clamp(28px, 3.4vw, 44px) !important; line-height: 1.05 !important; letter-spacing: -0.01em; margin: 0 !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } /* Subline: ubicación · fecha · respuestas · contador. */ .QuejaHeroSub { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); } .QuejaHeroSub-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .QuejaHeroSub-count { font-weight: 800; color: #241a00; background: #ffc53d; padding: 3px 10px; border-radius: 999px; text-shadow: none; } .QuejaHeroSub-count.is-link { cursor: pointer; transition: background 0.15s, transform 0.05s; } .QuejaHeroSub-count.is-link:hover { background: #ffd257; } .QuejaHeroSub-count.is-link:active { transform: translateY(1px); } /* Chip contador junto al nombre de la empresa: SOLO móvil (en web va al subline). */ .QuejaHero-countMobile { display: none; } /* Móvil: logo más chico, sin logo NO reserva hueco, subline oculto (en móvil solo va el like). Etiquetas y título se mantienen. */ @media (max-width: 767.98px) { .QuejaHero { gap: 12px; justify-content: flex-start; } .QuejaHero-logo { width: 88px; min-height: 92px; } .QuejaHero-logo--empty { display: none !important; } .DiscussionHero .DiscussionHero-title { font-size: 21px !important; line-height: 1.2 !important; } .QuejaHeroSub { display: none; } /* En móvil el chip de "N quejas sobre esta empresa" va en la fila de etiquetas. */ .QuejaHero-countMobile { display: inline-flex; align-items: center; font-size: 12px; padding: 5px 11px; } } .EmpresaLogo--hero { width: 22px; height: 22px; padding: 1px; margin-right: 7px; } /* Al GUARDAR, Flarum atenúa el composer con un overlay (.ComposerBody-loading). Los selectores TomSelect (empresa/depto/municipio) quedaban POR ENCIMA y no se atenuaban (se veían brillantes). Subimos el overlay por encima de ellos. */ .ComposerBody-loading { z-index: 50 !important; } /* ---------------- VIDEO (Fase 2) ---------------- */ /* Miniatura de video en el composer: mismo tamaño que la de imagen. */ .ComposerMedia-thumbVideo { width: 72px; height: 54px; object-fit: cover; background: #000; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--border-radius); display: block; } /* Separación entre el bloque de imágenes y el de video. */ .ComposerMedia--video { margin-top: 10px; } /* Reproductor en la vista de la queja. */ .QuejaVideos { display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 14px 0 4px; } .QuejaVideos-player { width: 100%; max-height: 460px; background: #000; border-radius: var(--border-radius); display: block; } @media (max-width: 767.98px) { .ComposerMedia-thumbVideo { width: 68px; height: 50px; } .QuejaVideos-player { max-height: 300px; } } /* Solo un botón "Ver todas las quejas" cuando el listado está filtrado. */ .QuejaFilterBtn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; background: var(--control-bg); color: var(--text-color); border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 9px; padding: 9px 14px; margin-bottom: 14px; } .QuejaFilterBtn:hover { border-color: var(--primary-color); color: var(--primary-color); } /* ---------------- Botón "Me gusta" de la queja ---------------- */ .QuejaLike { margin-top: 18px; } .QuejaLike-btn { display: inline-flex; align-items: center; gap: 9px; padding: 9px 17px 9px 13px; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; color: var(--text-color); background: var(--control-bg); border: 1px solid rgba(127, 127, 127, 0.25); transition: background 0.15s, border-color 0.15s, transform 0.05s; } .QuejaLike-btn:hover { border-color: var(--primary-color); } .QuejaLike-btn:active { transform: translateY(1px); } .QuejaLike-btn[disabled] { cursor: default; opacity: 0.75; } .QuejaLike-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } .QuejaLike-icon { width: 20px; height: 20px; fill: var(--muted-color); transition: fill 0.15s, transform 0.15s; } .QuejaLike-count { font-variant-numeric: tabular-nums; } .QuejaLike-label { font-weight: 600; } .QuejaLike-btn.is-on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; } .QuejaLike-btn.is-on .QuejaLike-icon { fill: #fff; transform: translateY(-1px) rotate(-6deg); } /* Ocultamos el "Me gusta" nativo (chiquito) y su lista SOLO en el post original (la queja), porque ahí ya ponemos nuestra barra grande. En las respuestas se conserva el like nativo. */ .PostStream-item:first-child .Post-actions .item-like, .PostStream-item:first-child .Post-footer .item-likes { display: none !important; } /* ---------------- Vista de la queja: galería ---------------- */ .QuejaGallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; width: 100%; margin: 14px 0 4px; } .QuejaGallery-item { display: block; border-radius: var(--border-radius); overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.12); background: var(--body-bg-light, rgba(0, 0, 0, 0.05)); aspect-ratio: 4 / 3; } .QuejaGallery-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; } .QuejaGallery-item:hover .QuejaGallery-img { transform: scale(1.04); } /* ---------------- Responsive (móvil) ---------------- */ @media (max-width: 767.98px) { .ComposerMedia-grid { gap: 6px; } .ComposerMedia-thumb, .ComposerMedia-thumbImg, .ComposerMedia-caption { width: 68px; } .ComposerMedia-thumbImg { height: 50px; } .ComposerMedia-head { gap: 6px; } .QuejaGallery { grid-template-columns: 1fr; /* móvil: una imagen grande por fila */ } }