.concurso-entrega { border: 1px solid #ddd; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; } .concurso-entrega h3 { margin-top: 0; } .concurso-entrega .concurso-estado-badge { display: inline-block; font-size: .75rem; font-weight: bold; text-transform: uppercase; padding: .2rem .5rem; border-radius: 4px; background: #444; color: #fff; margin-bottom: .5rem; } .concurso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; } .concurso-card { border: 1px solid #eee; border-radius: 6px; overflow: hidden; } .concurso-card img { width: 100%; height: 160px; object-fit: cover; display: block; cursor: pointer; } /* En columna, no en fila: con tarjetas de ~200px, el reparto horizontal partía el nombre del autor a mitad de palabra y aplastaba la nota. */ .concurso-card .meta { padding: .5rem; font-size: .9rem; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; } .concurso-card .autor { font-weight: bold; color: #f2f4ef; overflow-wrap: break-word; } .concurso-card .autor.sellado { color: #b9beb2; font-weight: normal; font-style: italic; } .concurso-card .votos { font-size: .95rem; color: #cfd3ca; white-space: nowrap; } .concurso-card.es-ganadora { outline: 3px solid #d4af37; } .concurso-card .titulo-foto { display: block; padding: .4rem .5rem 0; font-size: 1rem; font-style: italic; color: #e7e9e4; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); } .concurso-form-subir label { display: block; margin-top: .75rem; font-weight: bold; } .concurso-form-subir input[type=text] { width: 100%; max-width: 24rem; display: block; margin-top: .25rem; } .concurso-form-subir .concurso-titulo-ayuda { display: block; font-weight: normal; font-size: .92rem; color: #fff; margin-top: .25rem; } .concurso-form-subir button { margin-top: 1rem; } /* Puntuación de socios: cada foto se puntúa de 5 a 10 de medio en medio punto. Los 11 botones SON la puntuación (no hay campo de texto): rejilla de 6 columnas, así que caen en dos filas de 6 + 5 (ver concurso.js). */ .concurso-puntuar { padding: .5rem; border-top: 1px solid #eee; } .concurso-pts-botones { display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem; } #concurso-app .concurso-pts-btn { /* min-width:0 evita que el ancho mínimo del contenido ("5.5") desborde la columna de la rejilla en las tarjetas más estrechas. */ min-width: 0; padding: .35rem .1rem; font-size: .78rem; line-height: 1.2; background: #f2f2f2; color: #333; border: 1px solid #ccc; border-radius: 4px; } #concurso-app .concurso-pts-btn:hover { background: #e3efe3; } #concurso-app .concurso-pts-btn.is-activo { background: #2a6f2a; color: #fff; border-color: #2a6f2a; } .concurso-card.pts-puntuada { outline: 3px solid #2a6f2a; } .concurso-msg { padding: .75rem; border-radius: 6px; margin: .5rem 0; } .concurso-msg.ok { background: #e6f6e6; } .concurso-msg.error { background: #fbe6e6; } .concurso-msg.info { background: #eef3fb; } /* The site theme sets a light, near-white text color globally, which makes native form controls (white background by default) unreadable unless we pin their own colors explicitly. */ #concurso-app select, #concurso-app input, #concurso-app button { color: #111; background: #fff; border: 1px solid #ccc; border-radius: 4px; padding: .4rem .6rem; font-size: 1rem; } #concurso-app button { background: #2a6f2a; color: #fff; border: none; cursor: pointer; } #concurso-app button:disabled { background: #999; cursor: default; } .concurso-entrega, .concurso-msg { color: inherit; } .concurso-msg { color: #111; } /* Lightbox - single shared overlay, appended to so it survives whichever entrega card it was opened from being re-rendered. */ .concurso-lightbox { display: none; position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.92); align-items: center; justify-content: center; } .concurso-lightbox.is-open { display: flex; } /* Modo pantalla completa: la foto ocupa toda la ventana/pantalla (no un recuadro con márgenes), respetando su proporción. */ .concurso-lightbox-img { max-width: 100vw; max-height: 100vh; object-fit: contain; } .concurso-lightbox-caption { position: absolute; bottom: 1.5rem; left: 0; right: 0; text-align: center; color: #fff; font-size: 1rem; text-shadow: 0 1px 4px rgba(0,0,0,.8); } /* Flechas y cruz ocultas por defecto: solo se revelan cuando el ratón se acerca a los lados de la foto (.concurso-lightbox.controls-visible, ver concurso.js) - así la imagen se ve limpia el resto del tiempo. */ .concurso-lightbox-close, .concurso-lightbox-prev, .concurso-lightbox-next { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer; font-size: 1.75rem; line-height: 1; border-radius: 50%; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .concurso-lightbox.controls-visible .concurso-lightbox-close, .concurso-lightbox.controls-visible .concurso-lightbox-prev, .concurso-lightbox.controls-visible .concurso-lightbox-next { opacity: 1; pointer-events: auto; } /* Sin ratón (táctil) no hay "acercarse a los lados" posible - controles siempre visibles para que el visor siga siendo usable. */ @media (hover: none) { .concurso-lightbox-close, .concurso-lightbox-prev, .concurso-lightbox-next { opacity: 1; pointer-events: auto; } } .concurso-lightbox-close:hover, .concurso-lightbox-prev:hover, .concurso-lightbox-next:hover { background: rgba(255,255,255,.25); } .concurso-lightbox-close { top: 1rem; right: 1rem; } .concurso-lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); } .concurso-lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }