/* ===========================
   theme.css — ADIMUR (móvil-first)
   Fondo BLANCO puro + logo visible + bloques un poco más altos
   Radios HIPER-visibles (aro muy ancho + relleno azul al marcar)
   =========================== */

/* -------- Base -------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
:root{ --pico-background-color: transparent !important; }
body{ background:#ffffff !important; color:#0a0a0a; }

/* -------- Fondo: blanco puro + imagen corporativa sin velo -------- */
/* La imagen se pinta SIN capa blanquecina encima */
html::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image: url("fondo.jpg"), url("/fondo.jpg"); /* fallback doble ruta */
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translateZ(0); will-change: transform;
  pointer-events: none;
}

/* -------- Contenedores legibles -------- */
main, article, section, form{
  background:rgba(255,255,255,.96) !important;
  backdrop-filter: blur(2px);
  border-radius:14px;
  padding:1rem;
  box-shadow:0 18px 48px rgba(0,0,0,.18);
}

/* -------- Posicionamiento (subido ligeramente) -------- */
/* Index (formulario) */
body.vote main{
  width:94vw !important; max-width:480px !important;
  margin:20vh auto 7vh !important;          /* antes 22vh -> sube 2vh */
}
@media (min-width:600px){
  body.vote main{ width:min(88vw,520px) !important; margin-top:24vh !important; } /* antes 26vh */
}
@media (min-width:1024px){
  body.vote main{ width:560px !important; margin-top:28vh !important; }           /* antes 30vh */
}

/* Resultados (ancho + espacio para botonera inferior si la hay) */
body.results main{
  width:98vw !important; max-width:1280px !important;
  margin:18vh auto 18vh !important; padding:1.25rem !important;  /* subido 2vh */
}
@media (min-width:1400px){
  body.results main{ width:1360px !important; margin-top:22vh !important; }
}

/* Progreso */
body.results-progress main{
  width:96vw !important; max-width:1080px !important;
  margin:18vh auto 8vh !important; padding:1.25rem !important;   /* subido 2vh */
}
@media (min-width:1280px){
  body.results-progress main{ width:1200px !important; margin-top:22vh !important; }
}

/* -------- Tipografía y controles -------- */
h1,h2,h3,h4{ color:#0a0a0a; margin:.25rem 0 .75rem; }
label{ color:#0a0a0a; font-weight:600; }
p,small,li,td,th{ color:#111; }

input,select,textarea{
  color:#111 !important; background:#fff !important;
  border:1px solid rgba(0,0,0,.22) !important;
  border-radius:10px; padding:.85rem 1rem; font-size:1rem;
}
input::placeholder,textarea::placeholder{ color:#666; }

button,[type="submit"]{
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  font-weight:700; padding:.9rem 1rem; font-size:1rem; border-radius:12px;
}

/* -------- Radios HIPER-visibles (móvil) -------- */
/* Objetivo: aro azul MUY ancho y, al marcar, relleno azul sólido */
section.cat{ margin:.9rem 0; }
section.cat label{
  display:flex; align-items:center; gap:.85rem;
  padding:.6rem .4rem; border-radius:10px; cursor:pointer; line-height:1.25;
  -webkit-tap-highlight-color:transparent;
}

/* Botón circular: tamaño grande + aro ultra-ancho */
section.cat label input[type="radio"]{
  -webkit-appearance:none !important; appearance:none !important;
  width:30px !important; height:30px !important; flex:0 0 30px !important;
  margin:0 !important; padding:0 !important;
  border:12px solid #0a66c2 !important;         /* ARO MUY ANCHO */
  border-radius:50% !important;
  background:#ffffff !important;               /* blanco cuando NO está marcado */
  background-repeat:no-repeat; background-position:center; background-size:0 0;
  box-shadow:none !important;
  transition:background-color 120ms, box-shadow 120ms, border-color 120ms, transform 60ms;
}

/* Seleccionado: relleno AZUL sólido muy visible + aro profundo + halo */
section.cat label input[type="radio"]:checked{
  background-color:#0a66c2 !important;         /* interior azul sólido */
  border-color:#053266 !important;             /* aro aún más oscuro */
  box-shadow:
    0 0 0 12px rgba(10,102,194,.30),            /* halo exterior proporcional */
    0 8px 18px rgba(0,0,0,.18) !important;
}

/* Alternativa NEGRA (si se desea): descomentar para usar negro en lugar de azul */
/*
section.cat label input[type="radio"]:checked{
  background-color:#000 !important;
  border-color:#000 !important;
  box-shadow:
    0 0 0 5px rgba(0,0,0,.28),
    0 8px 18px rgba(0,0,0,.20) !important;
}
*/

section.cat label input[type="radio"]:active{ transform:scale(.98); }

/* Foco accesible muy visible */
section.cat label input[type="radio"]:focus-visible{
  outline:none !important;
  box-shadow:
    0 0 0 5px rgba(74,163,255,.45),
    0 0 0 9px rgba(10,102,194,.25) !important;
  border-color:#0a66c2 !important;
}

/* Resalte de la fila seleccionada si el navegador soporta :has */
section.cat label:has(input[type="radio"]:checked){
  background:rgba(10,102,194,.10);
  font-weight:700;
}

/* -------- Componentes auxiliares -------- */
article>header, section>header{
  background:rgba(255,255,255,.92); color:#0a0a0a;
  border:1px solid rgba(0,0,0,.08); border-radius:10px;
  padding:.6rem .9rem; margin-bottom:.6rem;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
code{ background:rgba(0,0,0,.06) !important; color:#111 !important; border-radius:6px; padding:.15rem .45rem; }

table{ width:100%; border-radius:12px; overflow:hidden; }
table thead th{ background:rgba(0,0,0,.06); color:#0a0a0a; }

mark{ background:#fff3cd; color:#0a0a0a; }

summary, header.contrast, article>header.contrast{
  background:rgba(0,0,0,.75) !important; color:#fff !important;
}

/* Cartas y barras (results / progress) */
.card{
  padding:1rem; border-radius:14px; background:rgba(255,255,255,.96);
  box-shadow:0 18px 48px rgba(0,0,0,.18); margin:1rem 0;
}
.row{ display:flex; align-items:center; gap:.8rem; margin:.4rem 0; }
.name{ flex:1 1 45%; font-weight:600; color:#0a0a0a; word-break:break-word; }
.count{ flex:0 0 120px; text-align:right; }
.barwrap{ flex:1 1 auto; background:#eef1f4; border-radius:10px; height:16px; overflow:hidden; }
.bar{ height:100%; background:linear-gradient(90deg,#0a66c2,#4aa3ff); transition:width .3s ease; }

/* KPIs */
.kpis{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
@media (min-width:768px){ .kpis{ grid-template-columns:repeat(4,1fr); } }
.kpi{ text-align:center; padding:.8rem; border-radius:12px; background:rgba(0,0,0,.04); }
.kpi .num{ font-size:1.6rem; font-weight:800; color:#0a0a0a; }
.kpi .lbl{ font-size:.9rem; color:#333; }

/* Utilidades admin */
.btn-sm{ padding:.35rem .6rem !important; font-size:.9rem !important; line-height:1 !important; border-radius:8px !important; }
.actions{ display:flex; gap:.4rem; flex-wrap:wrap; }

/* ==== RADIOS A PRUEBA DE FRAMEWORKS (anillo grueso + relleno sólido) ==== */
/* Aplica GLOBALMENTE por si tu HTML no usa .cat */
form input[type="radio"],
label input[type="radio"],
input[type="radio"]{
  -webkit-appearance: none !important;
  appearance: none !important;
  accent-color: initial !important;       /* desactiva tinte nativo */
  width: 30px !important;                  /* DIÁMETRO del círculo */
  height: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 7px solid #0a66c2 !important;    /* ← GROSOR DEL ARO AZUL */
  border-radius: 50% !important;
  background: #ffffff !important;          /* fondo cuando NO está marcado */
  background-clip: padding-box !important; /* evita sangrado del borde */
  display: inline-block !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  transition: background-color 120ms, border-color 120ms, box-shadow 120ms;
}

/* Seleccionado: círculo COMPLETO relleno (AZUL) + halo visible */
form input[type="radio"]:checked,
label input[type="radio"]:checked,
input[type="radio"]:checked{
  background: #0a66c2 !important;          /* relleno sólido */
  border-color: #042e5c !important;        /* aro más oscuro */
  box-shadow: 0 0 0 6px rgba(10,102,194,.30) !important; /* halo */
}

/* Alternativa: relleno NEGRO. Sustituye el bloque anterior por este si lo prefieres. */
/*
form input[type="radio"]:checked,
label input[type="radio"]:checked,
input[type="radio"]:checked{
  background: #000 !important;
  border-color: #000 !important;
  box-shadow: 0 0 0 6px rgba(0,0,0,.28) !important;
}
*/

/* Accesibilidad (teclado/lector) */
input[type="radio"]:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(74,163,255,.45),
    0 0 0 9px rgba(10,102,194,.25) !important;
}