/* =========================================================================
 * refinements.css
 * Este archivo estaba referenciado en cada página pero faltaba en el
 * paquete original (causaba 404 en cada carga). Contiene:
 *  1) Un bug real de estilos que encontramos: el formulario de login del
 *     admin (.login-card/.login-form) nunca tuvo CSS, así que se veía sin
 *     el tema oscuro del resto del sitio.
 *  2) Los componentes nuevos de confianza/conversión: barra de progreso,
 *     cuenta regresiva, actividad reciente y aviso de campo honeypot.
 * ========================================================================= */

/* --- 1) Login / instalación: antes sin estilos --- */
.login-card { max-width: 480px; margin: 0 auto; overflow: hidden; }
.login-form { display: grid; gap: 14px; padding: 30px; }
.login-form label { display: block; }
.login-form label span { display: block; margin-bottom: 6px; color: #71717a; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.login-form input { width: 100%; min-height: 44px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.3); padding: 0 12px; color: #fff; outline: none; }
.login-form input:focus { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(244,114,208,.14); }
.form-error { margin: 0; padding: 10px 12px; border: 1px solid rgba(252,165,165,.45); background: #260c12; color: #fecaca; font-size: 12px; }
.install-note { margin: 0 0 16px; padding: 12px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.02); color: var(--muted); font-size: 12px; line-height: 1.6; }

/* --- 2) Barra de progreso de ocupación (catálogo y detalle) --- */
.progress-bar { position: relative; height: 6px; overflow: hidden; background: rgba(255,255,255,.08); }
.progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--pink2), var(--pink)); box-shadow: 0 0 10px rgba(244,63,194,.4); transition: width .4s ease; }
.progress-bar.large { height: 10px; margin-top: 10px; }
.raffle-card .progress-bar { margin: 14px 0 0; }

.occupancy-block { margin-top: 22px; padding: 14px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.02); }
.occupancy-head { display: flex; align-items: center; justify-content: space-between; }
.occupancy-head small { font-family: "Share Tech Mono", monospace; font-size: 9px; letter-spacing: .11em; color: #71717a; text-transform: uppercase; }
.occupancy-head b { font-family: "Share Tech Mono", monospace; color: var(--pink); }
.occupancy-note { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }

/* --- Cuenta regresiva del sorteo (antes solo texto de fecha estática) --- */
.countdown { margin-top: 18px; padding: 16px; border: 1px solid rgba(103,232,249,.25); background: rgba(103,232,249,.04); }
.countdown > small { display: block; font-family: "Share Tech Mono", monospace; font-size: 9px; letter-spacing: .12em; color: var(--cyan); text-transform: uppercase; }
.countdown-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 10px; }
.countdown-grid div { padding: 10px 4px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.25); text-align: center; }
.countdown-grid b { display: block; font-family: "Share Tech Mono", monospace; font-size: 20px; color: #cffafe; }
.countdown-grid span { display: block; margin-top: 4px; font-size: 9px; letter-spacing: .08em; color: #71717a; text-transform: uppercase; }

/* --- Vencimiento de la reserva en la página de gracias --- */
.reservation-timer { margin-top: 18px; padding: 14px; border: 1px solid rgba(252,211,77,.35); background: rgba(252,211,77,.06); text-align: center; }
.reservation-timer small { display: block; font-family: "Share Tech Mono", monospace; font-size: 9px; letter-spacing: .1em; color: #fde68a; text-transform: uppercase; }
.reservation-timer b { display: block; margin-top: 6px; font-family: "Share Tech Mono", monospace; font-size: 26px; color: #fde68a; }

/* --- Prueba social: actividad reciente en la rifa --- */
.activity-ticker { margin-top: 18px; padding: 14px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.02); }
.activity-ticker > small { display: block; font-family: "Share Tech Mono", monospace; font-size: 9px; letter-spacing: .1em; color: #71717a; text-transform: uppercase; }
.activity-ticker ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.activity-ticker li { padding: 8px 10px; border: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.18); font-size: 12px; color: #d4d4dc; }
.activity-ticker li b { color: var(--cyan); }

/* --- Nota de confianza junto al botón de compra --- */
.trust-note { margin: 10px 0 0 !important; padding: 10px; border: 1px solid rgba(134,239,172,.25); background: rgba(134,239,172,.05); color: #bbf7d0 !important; font-size: 11px !important; line-height: 1.55 !important; }

/* --- Campo honeypot: invisible para personas, visible/rellenable para bots simples --- */
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }