/* =====================================================================
   Plataforma de Votación · Comité de Convivencia Laboral · Providencia
   Sistema visual basado en el tarjetón impreso (verde + navy).
   ===================================================================== */

:root{
  --verde:        #5bb02e;   /* verde Providencia (acento principal) */
  --verde-osc:    #1f6b2f;   /* verde oscuro (títulos)               */
  --verde-claro:  #eaf5e3;   /* relleno suave seleccionado           */
  --navy:         #1c2c4c;   /* azul institucional (nombres/títulos) */
  --navy-soft:    #38476a;
  --tinta:        #2b2f33;   /* texto cuerpo                          */
  --tinta-suave:  #5c6470;
  --bg:           #eceee9;   /* fondo de página                       */
  --surface:      #ffffff;
  --linea:        #e2e5df;
  --linea-fuerte: #cfd4ca;
  --rojo:         #c0392b;
  --sombra:       0 1px 2px rgba(28,44,76,.05), 0 6px 22px rgba(28,44,76,.07);
  --radio:        16px;
  --maxw:         660px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:"Barlow", system-ui, -apple-system, sans-serif;
  color:var(--tinta);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }

.display{ font-family:"Archivo", system-ui, sans-serif; }

/* ---------- Layout general ---------- */
.app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:22px 16px 60px;
}
.hoja{
  width:100%;
  max-width:var(--maxw);
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ---------- Banda modo demo ---------- */
.demo-band{
  width:100%;
  background:repeating-linear-gradient(135deg,#ffe9b8,#ffe9b8 14px,#ffe1a0 14px,#ffe1a0 28px);
  color:#7a5a12;
  font-weight:600;
  font-size:13px;
  text-align:center;
  padding:7px 12px;
  border-radius:10px;
  border:1px solid #f0d28a;
}
.demo-band b{ color:#5e4506; }

/* ---------- Encabezado / logo ---------- */
.marca{
  display:flex;
  justify-content:center;
  padding:4px 0 2px;
}
.marca img{ height:56px; width:auto; }

.cabecera{
  text-align:center;
  padding:6px 4px 2px;
}
.cabecera .sup{
  font-family:"Archivo", sans-serif;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--navy);
  font-size:clamp(14px,3.4vw,18px);
  margin:0;
}
.cabecera .ppal{
  font-family:"Archivo", sans-serif;
  font-weight:800;
  color:var(--verde-osc);
  font-size:clamp(22px,5.6vw,33px);
  line-height:1.02;
  margin:3px 0 0;
  letter-spacing:-.01em;
}
.cabecera .periodo{
  display:flex; align-items:center; justify-content:center; gap:12px;
  color:var(--navy);
  font-family:"Archivo", sans-serif;
  font-weight:700;
  letter-spacing:.1em;
  font-size:clamp(12px,2.8vw,15px);
  margin-top:8px;
}
.cabecera .periodo::before,
.cabecera .periodo::after{
  content:""; height:2px; width:46px; background:var(--navy); opacity:.55; border-radius:2px;
}

/* ---------- Tarjeta info (fecha + confidencial) ---------- */
.info-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  background:var(--surface);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  overflow:hidden;
}
.info-cell{
  display:flex; gap:12px; align-items:flex-start;
  padding:16px 18px;
}
.info-cell + .info-cell{ border-left:1px solid var(--linea); }
.info-cell .ico{
  flex:none; width:30px; height:30px; color:var(--verde-osc);
}
.info-cell h4{
  margin:0 0 2px; font-family:"Archivo",sans-serif; font-weight:700;
  color:var(--navy); font-size:13px; letter-spacing:.02em; line-height:1.12;
}
.info-cell .destacado{ color:var(--verde-osc); font-weight:700; font-size:15px; }
.info-cell p{ margin:2px 0 0; font-size:13px; color:var(--tinta-suave); line-height:1.3; }

/* ---------- Cinta instrucción ---------- */
.cinta{
  background:var(--verde-osc);
  color:#fff;
  text-align:center;
  font-family:"Archivo",sans-serif;
  font-weight:700;
  letter-spacing:.04em;
  font-size:clamp(15px,3.6vw,19px);
  padding:14px 16px;
  border-radius:999px;
  box-shadow:var(--sombra);
}

/* ---------- Bloque ficha ---------- */
.bloque{
  background:var(--surface);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:22px 20px;
}
.ficha-form label{
  display:block; font-family:"Archivo",sans-serif; font-weight:700;
  color:var(--navy); font-size:18px; margin-bottom:6px;
}
.ficha-form .ayuda{
  font-size:13.5px; color:var(--tinta-suave); margin:0 0 16px; line-height:1.4;
}
.ficha-row{ display:flex; gap:10px; }
.ficha-input{
  flex:1; min-width:0;
  font-size:20px; font-weight:600; letter-spacing:.06em;
  padding:14px 16px;
  border:2px solid var(--linea-fuerte);
  border-radius:12px;
  color:var(--navy);
  background:#fbfcfa;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.ficha-input:focus{ border-color:var(--verde); box-shadow:0 0 0 4px rgba(91,176,46,.16); }
.ficha-input::placeholder{ color:#b3bac0; font-weight:500; letter-spacing:normal; }

/* ---------- Botones ---------- */
.btn{
  border:none; border-radius:12px;
  font-family:"Archivo",sans-serif; font-weight:700;
  font-size:17px; letter-spacing:.01em;
  padding:14px 22px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .08s, background .15s, opacity .15s;
}
.btn:active{ transform:translateY(1px); }
.btn-primario{ background:var(--verde); color:#fff; }
.btn-primario:hover{ background:#52a329; }
.btn-primario:disabled{ background:#c2cbbb; cursor:not-allowed; }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:#15233f; }
.btn-ghost{ background:#eef1ec; color:var(--navy); }
.btn-ghost:hover{ background:#e3e7df; }
.btn-block{ width:100%; }
.btn-lg{ padding:17px 24px; font-size:18px; }

/* ---------- Lista de candidatos ---------- */
.lista{ display:flex; flex-direction:column; gap:12px; }

.candidato{
  position:relative;
  display:grid;
  grid-template-columns:34px 96px 1fr;
  align-items:center;
  gap:16px;
  width:100%;
  text-align:left;
  background:var(--surface);
  border:2px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:14px 18px 14px 14px;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.candidato:hover{ border-color:var(--linea-fuerte); }
.candidato.sel{ border-color:var(--verde); background:var(--verde-claro); }

.radio{
  width:28px; height:28px; border-radius:50%;
  border:2.5px solid var(--linea-fuerte);
  display:flex; align-items:center; justify-content:center;
  flex:none; transition:border-color .15s;
}
.candidato:hover .radio{ border-color:var(--verde); }
.candidato.sel .radio{ border-color:var(--verde); }
.radio::after{
  content:""; width:15px; height:15px; border-radius:50%;
  background:var(--verde); transform:scale(0); transition:transform .15s;
}
.candidato.sel .radio::after{ transform:scale(1); }

.foto{
  width:96px; height:96px; border-radius:12px; object-fit:cover; object-position:center top;
  background:#dfe3db; border:1px solid var(--linea);
}
.foto.blanco{
  display:flex; align-items:center; justify-content:center;
  background:var(--verde-claro); border:1px solid #cfe4c2; color:var(--verde-osc);
}
.foto.blanco span{ width:34px; height:5px; background:var(--verde-osc); border-radius:3px; display:block; }

.cand-info .nombre{
  font-family:"Archivo",sans-serif; font-weight:800;
  color:var(--navy); font-size:clamp(17px,4.2vw,21px); line-height:1.05; margin:0;
  text-transform:uppercase; letter-spacing:-.01em;
}
.cand-info .gerencia{
  color:var(--verde-osc); font-weight:700; font-size:14px; margin:3px 0 5px;
}
.cand-info .frase{
  color:var(--tinta); font-size:14px; line-height:1.34; margin:0; text-wrap:pretty;
}

/* ---------- Pie ---------- */
.pie{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:var(--surface);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:16px 20px;
}
.pie .legal{ display:flex; gap:11px; align-items:flex-start; font-size:12.5px; color:var(--tinta-suave); line-height:1.32; }
.pie .legal svg{ flex:none; width:26px; height:26px; color:var(--verde-osc); }
.pie .gracias{ text-align:right; flex:none; }
.pie .gracias .g1{ font-family:"Archivo",sans-serif; font-style:italic; font-weight:700; color:var(--verde-osc); font-size:18px; line-height:1; }
.pie .gracias .g2{ font-family:"Archivo",sans-serif; font-weight:700; color:var(--navy); font-size:11.5px; letter-spacing:.04em; margin-top:4px; }

/* ---------- Barra fija confirmar ---------- */
.barra-fija{
  position:sticky; bottom:0; z-index:20;
  width:100%; max-width:var(--maxw);
  margin-top:4px;
  background:linear-gradient(to top, var(--bg) 70%, rgba(236,238,233,0));
  padding:12px 0 6px;
}

/* ---------- Modal ---------- */
.overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(20,30,52,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.overlay.open{ opacity:1; pointer-events:auto; }
.modal{
  background:var(--surface); border-radius:20px;
  width:100%; max-width:440px;
  padding:26px 24px 24px;
  box-shadow:0 24px 70px rgba(15,25,45,.4);
  transform:translateY(10px) scale(.98); transition:transform .2s;
  text-align:center;
}
.overlay.open .modal{ transform:none; }
.modal h3{ font-family:"Archivo",sans-serif; font-weight:800; color:var(--navy); font-size:22px; margin:0 0 6px; }
.modal p{ color:var(--tinta-suave); font-size:15px; margin:0 0 18px; line-height:1.4; }
.modal .acciones{ display:flex; flex-direction:column; gap:10px; }

.modal-foto{
  width:104px; height:104px; border-radius:50%; object-fit:cover; object-position:center top;
  margin:0 auto 14px; border:4px solid var(--verde-claro); background:#dfe3db;
}
.modal .persona{ font-family:"Archivo",sans-serif; font-weight:800; color:var(--navy); font-size:22px; line-height:1.1; }
.modal .persona-sub{ color:var(--tinta-suave); font-size:14px; margin-top:2px; }

/* ---------- Spinner ---------- */
.spinner{
  width:30px; height:30px; border-radius:50%;
  border:3.5px solid rgba(255,255,255,.45); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.spinner.verde{ border:3.5px solid #d7e7cb; border-top-color:var(--verde); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Mensajes inline ---------- */
.aviso{
  margin-top:12px; padding:12px 14px; border-radius:11px;
  font-size:14px; font-weight:500; display:flex; gap:9px; align-items:flex-start;
}
.aviso.err{ background:#fbe9e7; color:#9c2b1d; border:1px solid #f3c8c1; }
.aviso.ok{ background:var(--verde-claro); color:var(--verde-osc); border:1px solid #cfe4c2; }
.aviso svg{ flex:none; width:18px; height:18px; margin-top:1px; }
.hidden{ display:none !important; }

/* ---------- Pantallas de estado (cerrada / gracias / ganador) ---------- */
.estado{
  background:var(--surface); border:1px solid var(--linea); border-radius:24px;
  box-shadow:var(--sombra); padding:40px 30px; text-align:center;
  width:100%; max-width:var(--maxw);
}
.estado .icono-grande{
  width:78px; height:78px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
  background:var(--verde-claro); color:var(--verde-osc);
}
.estado .icono-grande svg{ width:42px; height:42px; }
.estado h2{ font-family:"Archivo",sans-serif; font-weight:800; color:var(--navy); font-size:clamp(24px,5vw,30px); margin:0 0 8px; }
.estado p{ color:var(--tinta-suave); font-size:16px; margin:0 auto; max-width:42ch; line-height:1.45; }
.estado .sub-dato{ margin-top:18px; font-family:"Archivo",sans-serif; font-weight:700; color:var(--verde-osc); font-size:17px; }

/* ---------- Ganador ---------- */
.ganador-card{ margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.ganador-card .gfoto{
  width:160px; height:160px; border-radius:50%; object-fit:cover; object-position:center top;
  border:6px solid var(--verde); box-shadow:0 10px 30px rgba(91,176,46,.3); background:#dfe3db;
}
.ganador-card .gnombre{ font-family:"Archivo",sans-serif; font-weight:800; color:var(--navy); font-size:26px; margin-top:16px; text-transform:uppercase; line-height:1.05; }
.ganador-card .ggerencia{ color:var(--verde-osc); font-weight:700; font-size:16px; }
.ganador-card .gfrase{ color:var(--tinta); font-size:15px; max-width:46ch; margin-top:12px; line-height:1.4; text-wrap:pretty; }
.ganador-badge{
  display:inline-block; background:var(--verde); color:#fff;
  font-family:"Archivo",sans-serif; font-weight:700; letter-spacing:.08em; font-size:13px;
  padding:7px 18px; border-radius:999px; margin-bottom:6px;
}

/* confeti canvas */
#confeti{ position:fixed; inset:0; pointer-events:none; z-index:40; }

/* ---------- Responsive ---------- */
@media (max-width:560px){
  .info-cards{ grid-template-columns:1fr; }
  .info-cell + .info-cell{ border-left:none; border-top:1px solid var(--linea); }
  .candidato{ grid-template-columns:26px 74px 1fr; gap:12px; padding:12px 14px 12px 12px; }
  .foto{ width:74px; height:74px; }
  .pie{ flex-direction:column; align-items:flex-start; gap:12px; }
  .pie .gracias{ text-align:left; }
  .marca img{ height:36px; }
}