/* ==========================================================================
   Click Itaipu — Votación — estilos del front-end
   Módulo de votación independiente (cards de los finalistas + confirmación +
   lightbox). El resto de la página (logo, hero, imagen de fondo, premios,
   rodapé) vive en el HTML de la página que envuelve este shortcode — por eso
   este archivo no estiliza nada fuera de .civ-wrap / .civ-lightbox.
   Usamos !important en varias reglas de color para no perder contra el CSS
   del tema/Elementor del sitio (ya tuvimos botones saliendo todos azules).
   ========================================================================== */

.civ-wrap {
  --civ-primary: #002E63; /* institucional.primary */
  --civ-primary-dark: #001F45; /* institucional.dark (hover) */
  --civ-blue: #002E63;
  --civ-red: #d1382d;
  --civ-yellow: #e8a723;
  --civ-yellow-dark: #ad7a0c;
  --civ-green: #2f8f4e;
  --civ-ink: #1c2a33;
  --civ-muted: #5b6b74;
  --civ-bg-soft: #f7f2e7;
  --civ-border: #ecdfc4;
  max-width: 1040px;
  margin: 0 auto;
  padding: 44px 20px 48px;
  background: transparent; /* se funde con el fondo de la página (no queda como "card" casi blanco) */
  border-radius: 20px;
  /* Misma fuente que el resto de la página (click-itaipu-pagina.html la carga via
     @import de Google Fonts, por eso alcanza con declararla acá también) */
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--civ-ink);
  box-sizing: border-box;
}
.civ-wrap *,
.civ-wrap *::before,
.civ-wrap *::after { box-sizing: border-box; }
.civ-wrap img { max-width: 100%; }
.civ-wrap button { font-family: inherit; }

.civ-status {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #eef8f0;
  border: 1px solid #cfe9d6;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 24px;
}
.civ-status--error { background: #fdeeee; border-color: #f3c9c6; color: #9a2e26; }
.civ-status--error strong { display: block; margin-bottom: 2px; }
.civ-status-icon {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--civ-green) !important;
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  padding: 5px;
}
.civ-status-icon svg { width: 100%; height: 100%; }
.civ-status--error .civ-status-icon { background: var(--civ-red) !important; }
.civ-status p { margin: 2px 0 0; color: var(--civ-muted); font-size: 14px; }
.civ-status strong { color: var(--civ-ink); }
.civ-status--success { position: relative; }
.civ-status-deco { margin-left: auto; color: var(--civ-green); opacity: 0.25; width: 44px; height: 44px; flex: 0 0 auto; }
.civ-status-deco svg { width: 100%; height: 100%; }

/* Cards: foto | descripción | seleccionar, como en el montaje de referencia */
.civ-list { display: flex; flex-direction: column; gap: 18px; }

.civ-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--civ-border);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(260px, 50%) 1fr;
  box-shadow: 0 2px 10px rgba(15, 61, 92, 0.06);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.2s ease, border-width 0.15s ease;
}
@media (max-width: 720px) {
  .civ-card { grid-template-columns: 1fr; }
}

/* Card elegida: borde negro y más grueso (antes era verde) (7) */
.civ-card.civ-card--selected { border-color: var(--civ-primary); border-width: 3px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
.civ-card.civ-card--disabled { opacity: 0.55; pointer-events: none; }

/* Mientras haya una foto elegida, las demás quedan visualmente "apagadas" para que
   la seleccionada resalte más (7/8) — la clase .civ-list--has-selection la agrega
   civ-frontend.js apenas se elige una card. */
.civ-list.civ-list--has-selection .civ-card:not(.civ-card--selected) { opacity: 0.5; }

.civ-card-badge {
  position: absolute;
  top: 12px; left: 12px;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: #fff !important;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.civ-badge-1 { background: var(--civ-red) !important; }
.civ-badge-2 { background: var(--civ-yellow) !important; }
.civ-badge-3 { background: var(--civ-green) !important; }

/* El contenedor de la foto ahora es un <button> (dispara el lightbox).
   La imagen va en absolute/inset:0 para llenar TODO el recuadro (sin franjas de
   color alrededor, aunque el tema pinte el <button> de azul) (2) */
.civ-wrap .civ-card-media {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  min-height: 260px;
  background: #000 !important;
  overflow: hidden;
  border: none !important; padding: 0 !important; margin: 0;
  border-radius: 0 !important;
  cursor: zoom-in;
}
.civ-wrap .civ-card-media img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transition: transform 0.35s ease; }
.civ-card-media:hover img, .civ-card-media:focus-visible img { transform: scale(1.045); }
.civ-zoom-hint {
  position: absolute; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10, 30, 45, 0.72) !important; color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  z-index: 2; opacity: 0; transition: opacity 0.15s ease;
}
.civ-zoom-hint svg { width: 17px; height: 17px; }
.civ-card-media:hover .civ-zoom-hint,
.civ-card-media:focus-visible .civ-zoom-hint { opacity: 1; }
@media (max-width: 720px) {
  .civ-card-media { min-height: 220px; }
  .civ-zoom-hint { opacity: 1; } /* sin :hover útil en touch, mostramos siempre */
}

.civ-card-content {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
}
.civ-card-text { flex: 1 1 auto; min-width: 0; }
.civ-card-select { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }

.civ-card-title { font-size: 26px; font-weight: 700; margin: 0 0 6px; line-height: 1.2; }
.civ-title-1 { color: var(--civ-red) !important; }
.civ-title-2 { color: var(--civ-yellow-dark) !important; }
.civ-title-3 { color: var(--civ-green) !important; }
.civ-card-meta { font-size: 15px; color: var(--civ-muted); margin: 0 0 2px; }
.civ-card-meta--place { font-size: 17px; font-weight: 600; }
.civ-place-1 { color: var(--civ-red) !important; }
.civ-place-2 { color: var(--civ-yellow-dark) !important; }
.civ-place-3 { color: var(--civ-green) !important; }
.civ-card-desc { font-size: 14.5px; color: var(--civ-muted); margin: 10px 0 0; line-height: 1.5; }

/* Botón "Seleccionar": sin estética de botón — fondo blanco, texto negro, con el
   círculo (radio) arriba del texto (3 / pedido del cliente) */
.civ-wrap .civ-select-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.civ-select-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2.5px solid #000;
  background: #fff;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.civ-select-btn:hover { opacity: .75; }
.civ-select-btn:active { transform: scale(0.97); }
.civ-select-btn:disabled { cursor: not-allowed; opacity: 0.5; }

/* Al seleccionar: el dot se rellena de negro con anillo blanco — combina con el
   borde negro más grueso de la card elegida (.civ-card--selected) */
.civ-card--selected .civ-select-dot { background: var(--civ-primary); border-color: var(--civ-primary); box-shadow: inset 0 0 0 4px #fff; }

@media (max-width: 720px) {
  .civ-card-content { flex-direction: column; align-items: stretch; text-align: center; }
  .civ-card-select { width: 100%; }
  .civ-wrap .civ-select-btn { width: 100%; justify-content: center; }
}

/* Barra de confirmación, separada de las cards (como en el montaje) */
.civ-confirm-bar {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--civ-border);
  border-radius: 14px;
  padding: 18px 22px;
}
.civ-confirm-note { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 220px; }
.civ-confirm-note p { margin: 2px 0 0; font-size: 14px; color: var(--civ-muted); line-height: 1.4; }
.civ-confirm-note strong { color: var(--civ-ink); font-size: 15px; }
.civ-lock-icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--civ-blue); }
.civ-lock-icon svg { width: 100%; height: 100%; }

.civ-confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--civ-primary) !important;
  color: #fff !important;
  border: none;
  border-radius: 999px;
  padding: 14px 26px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.civ-confirm-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.civ-wrap .civ-confirm-btn:hover:not(:disabled) { background: var(--civ-primary-dark) !important; }
.civ-confirm-btn:active:not(:disabled) { transform: scale(0.98); }
/* Gris sólido y legible en vez de la versión semitransparente (quedaba "lavada" sobre el fondo claro) */
.civ-confirm-btn:disabled {
  background: #cdd5da !important;
  color: #6b7a82 !important;
  cursor: not-allowed;
  filter: none;
}

.civ-security-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
  margin-top: 22px;
  font-size: 13px;
  color: var(--civ-muted);
}
.civ-security-note svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--civ-muted); }

/* ───────────────────────── Lightbox ───────────────────────── */
.civ-lightbox {
  position: fixed; inset: 0;
  background: rgba(8, 18, 26, 0.94) !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px;
  z-index: 100000;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease;
}
.civ-lightbox[aria-hidden="false"] { opacity: 1; visibility: visible; }
.civ-lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 76vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.civ-lightbox-caption { color: #fff !important; margin-top: 18px; font-size: 16px; text-align: center; max-width: 800px; }
.civ-lightbox-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12) !important;
  border: none; color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.civ-lightbox-close svg { width: 19px; height: 19px; }
.civ-lightbox-close:hover { background: rgba(255, 255, 255, 0.22) !important; }
body.civ-lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .civ-card, .civ-select-btn, .civ-confirm-btn, .civ-card-media img, .civ-lightbox { transition: none; }
}