/*
 * Chasqui QR — panel del biker y formularios de registro/acceso.
 * Branding tomado del kit global de Elementor del sitio:
 *   primary #080808 · secondary #FFFFFF · text #CFCFCF · accent #FF6D01
 *   display Onest · texto Roboto
 * Todo va prefijado .cqr- para no pisar nada del tema.
 * La tipografía se sirve desde el propio plugin: cero dominios externos.
 */

@font-face{
	font-family:'Onest';
	src:url('fonts/onest-latin-var.woff2') format('woff2');
	font-weight:100 900;
	font-style:normal;
	font-display:swap;
}

:root{
	--cqr-ink:#080808;
	--cqr-surface:#131313;
	--cqr-surface-2:#1A1A1A;
	--cqr-line:rgba(255,255,255,.13);
	--cqr-line-soft:rgba(255,255,255,.07);
	--cqr-white:#FFFFFF;
	--cqr-text:#CFCFCF;
	--cqr-muted:#8F8F8F;
	--cqr-orange:#FF6D01;
	--cqr-orange-dk:#E45F00;
	--cqr-red:#FF4D4D;
	--cqr-font-d:'Onest',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	--cqr-font-t:Roboto,system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}

/* ==================================================================
   1 · Páginas del tema que montan nuestros shortcodes
   El tema pinta body en blanco (reset.css) y además imprime un h1 de
   128 px que repite el título de la tarjeta. Sobre blanco ese título
   era invisible; en cuanto el fondo es oscuro, canta.
   ================================================================== */

body.cqr-page{background:var(--cqr-ink)}
body.cqr-page .page-header{display:none}
body.cqr-page main#content,
body.cqr-page .site-main{
	min-height:55vh;display:flex;align-items:center;justify-content:center;
	padding:56px 16px;
}
body.cqr-page .page-content{width:100%}

/* ==================================================================
   2 · Shell del panel (documento autónomo, sin tema)
   ================================================================== */

body.cqr-panel-body{
	margin:0;background:var(--cqr-ink);color:var(--cqr-white);
	font:400 16px/1.55 var(--cqr-font-t);
	-webkit-font-smoothing:antialiased;
}
/* La barra cruza la pantalla (su filete inferior es de borde a borde) pero su
   CONTENIDO se alinea con la misma columna que las tarjetas. Sin esto, en
   pantalla ancha el logo queda pegado al filo izquierdo y "Salir" al derecho,
   desalineados de todo lo demás. */
.cqr-topbar{
	display:block;padding:0;
	border-bottom:1px solid var(--cqr-line-soft);
}
.cqr-topbar-inner{
	max-width:760px;margin:0 auto;padding:12px 16px;
	display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.cqr-brand{display:flex;align-items:center;gap:11px;
	font-family:var(--cqr-font-d);font-weight:800;letter-spacing:.14em;font-size:.8rem}
.cqr-brand img{width:34px;height:34px;object-fit:contain;display:block}
.cqr-brand span{color:var(--cqr-orange)}
.cqr-topbar nav{display:flex;gap:18px}
.cqr-topbar a{color:var(--cqr-text);text-decoration:none;font-size:.83rem}
.cqr-topbar a:hover{color:var(--cqr-orange)}

.cqr-panel{max-width:760px;margin:0 auto;padding:24px 16px 80px}

/* Blindaje: con la columna centrada por `margin:0 auto`, cualquier hijo más
   ancho que la pantalla empuja el borde izquierdo fuera de vista y ya no hay
   forma de desplazarse hasta él. Esto lo hace imposible. */
.cqr-panel *{min-width:0}
.cqr-panel img,
.cqr-panel canvas,
.cqr-panel input,
.cqr-panel textarea,
.cqr-panel select{max-width:100%}
.cqr-h1{margin:0 0 22px;font-family:var(--cqr-font-d);font-size:1.85rem;
	line-height:1.1;letter-spacing:-.028em;font-weight:800}

.cqr-welcome{
	background:var(--cqr-surface);border-left:4px solid var(--cqr-orange);
	padding:22px 24px;margin:0 0 24px;border-radius:0 6px 6px 0;
}
.cqr-welcome h1{margin:0 0 8px;font-family:var(--cqr-font-d);font-size:1.6rem;
	line-height:1.12;letter-spacing:-.028em;font-weight:800}
.cqr-welcome p{margin:0;color:var(--cqr-text);font-size:.98rem}
.cqr-welcome strong{color:var(--cqr-white)}

/* ==================================================================
   3 · Avisos
   ================================================================== */

.cqr-ok,.cqr-errors,.cqr-admin{padding:13px 16px;margin:0 0 18px;font-size:.95rem;border-radius:0 5px 5px 0}
.cqr-ok{background:var(--cqr-surface);border-left:4px solid var(--cqr-orange);color:var(--cqr-white)}
.cqr-errors{background:rgba(255,77,77,.1);border-left:4px solid var(--cqr-red);color:#FFB3B3}
.cqr-errors ul{margin:0;padding-left:18px}
.cqr-errors li+li{margin-top:4px}
.cqr-admin{background:var(--cqr-surface-2);border-left:4px solid var(--cqr-muted);color:var(--cqr-text)}
.cqr-admin strong{color:var(--cqr-white)}

/* ==================================================================
   4 · Bloque del QR
   ================================================================== */

.cqr-qr-block{
	display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;
	background:var(--cqr-surface);border:1px solid var(--cqr-line-soft);
	border-radius:8px;padding:22px;margin:0 0 28px;
}
.cqr-qr-visual{flex:none;width:190px;height:190px;background:#fff;
	border-radius:6px;padding:8px;display:grid;place-items:center}
.cqr-qr-visual canvas,.cqr-qr-visual img{width:174px!important;height:174px!important;
	display:block;image-rendering:pixelated}
.cqr-qr-side{flex:1 1 300px;min-width:0}
.cqr-qr-side h2{margin:0 0 9px;font-family:var(--cqr-font-d);font-size:1.15rem;
	letter-spacing:-.02em;font-weight:800}
.cqr-qr-note{margin:0 0 13px;font-size:.92rem;color:var(--cqr-text)}
.cqr-qr-note strong{color:var(--cqr-orange)}
.cqr-url{margin:0 0 16px;font-size:.78rem;word-break:break-all}
.cqr-url a{color:var(--cqr-muted)}
.cqr-dl{display:flex;flex-wrap:wrap;gap:9px}
.cqr-hint{margin:12px 0 0;font-size:.82rem;color:var(--cqr-muted)}

/* ==================================================================
   5 · Botones
   ================================================================== */

.cqr-btn{
	display:inline-block;border:1px solid var(--cqr-line);background:transparent;
	color:var(--cqr-white);padding:11px 18px;border-radius:4px;
	font-family:var(--cqr-font-d);font-size:.92rem;font-weight:700;letter-spacing:-.01em;
	cursor:pointer;text-decoration:none;line-height:1.3;
	transition:background .15s,border-color .15s,color .15s;
}
.cqr-btn:hover{border-color:var(--cqr-white)}
.cqr-btn-primary{background:var(--cqr-orange);border-color:var(--cqr-orange);color:#080808}
.cqr-btn-primary:hover{background:var(--cqr-orange-dk);border-color:var(--cqr-orange-dk);color:#080808}
.cqr-btn-lg{padding:15px 30px;font-size:1rem}
.cqr-btn-ghost{background:transparent}
.cqr-btn-danger{background:transparent;border-color:var(--cqr-red);color:var(--cqr-red)}
.cqr-btn-danger:hover{background:var(--cqr-red);color:#080808}
.cqr-btn:disabled{opacity:.45;cursor:not-allowed}
.cqr-btn:focus-visible,.cqr-form input:focus-visible,.cqr-form textarea:focus-visible,
.cqr-form select:focus-visible,.cqr-profile input:focus-visible,.cqr-profile textarea:focus-visible,
.cqr-profile select:focus-visible{outline:3px solid var(--cqr-orange);outline-offset:2px}

/* ==================================================================
   6 · Leyenda de visibilidad
   ================================================================== */

.cqr-legend{
	display:flex;flex-direction:column;gap:4px;margin:0 0 18px;padding:14px 17px;
	background:var(--cqr-surface);border-left:4px solid var(--cqr-orange);
	border-radius:0 5px 5px 0;font-size:.9rem;
}
.cqr-legend-eye{font-family:var(--cqr-font-d);font-weight:700;color:var(--cqr-orange)}
.cqr-legend-off{color:var(--cqr-text)}

/* ==================================================================
   7 · Bloques de campos
   Sin borde superior: un <legend> dentro de un fieldset CON borde deja
   una muesca y parte el filete izquierdo. Aquí el legend va oculto
   (sigue existiendo para lectores de pantalla) y el título visible es
   un span normal dentro de la caja.
   ================================================================== */

.cqr-item{
	border:0;border-left:4px solid var(--cqr-line);
	background:var(--cqr-surface);border-radius:0 7px 7px 0;
	margin:0 0 14px;padding:18px 20px;min-width:0;
}
.cqr-item.is-public{border-left-color:var(--cqr-orange)}

.cqr-item legend{
	position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.cqr-item-title{
	display:block;font-family:var(--cqr-font-d);font-weight:800;font-size:1rem;
	letter-spacing:-.015em;color:var(--cqr-white);margin:0 0 5px;
}
/* El naranja significa UNA cosa: "esto es público". Lo sensible se marca
   con una etiqueta, no con color, para no competir con esa señal. */
.cqr-item.is-critical .cqr-item-title::after{
	content:"dato sensible";display:inline-block;margin-left:9px;vertical-align:middle;
	font-family:var(--cqr-font-t);font-size:.62rem;font-weight:600;letter-spacing:.1em;
	text-transform:uppercase;color:var(--cqr-muted);
	border:1px solid rgba(255,255,255,.18);padding:2px 7px;border-radius:3px;
}

.cqr-vis{display:flex;align-items:center;gap:10px;margin:0 0 13px;
	font-size:.88rem;color:var(--cqr-muted);cursor:pointer}
.cqr-item.is-public .cqr-vis{color:var(--cqr-orange);font-weight:600}

/* Casilla propia: apagada discreta, encendida naranja.
   La nativa sobre fondo oscuro se pinta como un cuadro blanco que grita
   más que la marcada, e invierte la jerarquía. */
.cqr-vis input[type=checkbox],
.cqr-consent input[type=checkbox],
.cqr-check-inline input[type=checkbox]{
	appearance:none;-webkit-appearance:none;
	width:22px;height:22px;flex:none;margin:0;
	border:2px solid rgba(255,255,255,.26);border-radius:5px;
	background:transparent;cursor:pointer;position:relative;
	transition:background .12s,border-color .12s;
}
.cqr-vis input[type=checkbox]:hover,
.cqr-consent input[type=checkbox]:hover{border-color:rgba(255,255,255,.5)}
.cqr-vis input[type=checkbox]:checked,
.cqr-consent input[type=checkbox]:checked,
.cqr-check-inline input[type=checkbox]:checked{
	background:var(--cqr-orange);border-color:var(--cqr-orange);
}
.cqr-vis input[type=checkbox]:checked::after,
.cqr-consent input[type=checkbox]:checked::after,
.cqr-check-inline input[type=checkbox]:checked::after{
	content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
	border:solid #080808;border-width:0 3px 3px 0;transform:rotate(45deg);
}
.cqr-vis input[type=checkbox]:focus-visible,
.cqr-consent input[type=checkbox]:focus-visible{outline:3px solid var(--cqr-orange);outline-offset:2px}

.cqr-note{margin:0 0 11px;font-size:.85rem;color:var(--cqr-muted)}
.cqr-item-fields{display:flex;flex-wrap:wrap;gap:0 16px}
.cqr-item-fields .cqr-field{flex:1 1 210px;min-width:0}

.cqr-field{margin:0 0 14px;display:flex;flex-direction:column;gap:6px}
.cqr-field label{font-family:var(--cqr-font-d);font-size:.78rem;font-weight:700;
	letter-spacing:.05em;text-transform:uppercase;color:var(--cqr-muted)}
.cqr-field input[type=text],.cqr-field input[type=tel],.cqr-field input[type=email],
.cqr-field input[type=password],.cqr-field textarea,.cqr-field select{
	width:100%;padding:11px 13px;border:1px solid var(--cqr-line);border-radius:4px;
	font:inherit;font-size:1rem;background:var(--cqr-surface-2);color:var(--cqr-white);
}
.cqr-field input::placeholder,.cqr-field textarea::placeholder{color:#6B6B6B}
.cqr-field textarea{resize:vertical;min-height:76px}

/* Selector de archivo: el nativo es un botón blanco que rompe la marca. */
.cqr-photo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0;max-width:100%}
.cqr-photo img{width:96px;height:96px;object-fit:cover;border-radius:50%;
	background:var(--cqr-surface-2);border:2px solid var(--cqr-orange)}
.cqr-photo input[type=file]{color:var(--cqr-muted);font-size:.86rem;max-width:100%}
.cqr-photo input[type=file]::file-selector-button{
	background:transparent;border:1px solid var(--cqr-line);color:var(--cqr-white);
	padding:9px 15px;border-radius:4px;font-family:var(--cqr-font-d);font-size:.86rem;
	font-weight:700;cursor:pointer;margin-right:12px;
}
.cqr-photo input[type=file]::file-selector-button:hover{
	border-color:var(--cqr-orange);color:var(--cqr-orange);
}
.cqr-check-inline{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--cqr-text)}

.cqr-save{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin:24px 0 0}

/* ==================================================================
   8 · Zona de borrado
   ================================================================== */

.cqr-danger{
	margin:44px 0 0;padding:22px;border:1px solid rgba(255,77,77,.28);
	border-radius:7px;background:rgba(255,77,77,.05);
}
.cqr-danger h2{margin:0 0 8px;font-family:var(--cqr-font-d);font-size:1.1rem;
	font-weight:800;color:var(--cqr-red)}
.cqr-danger p{margin:0 0 15px;font-size:.92rem;color:var(--cqr-text)}
.cqr-danger strong{color:var(--cqr-white)}
.cqr-danger code{background:var(--cqr-ink);padding:2px 7px;border-radius:3px;
	border:1px solid rgba(255,77,77,.28);font-size:.9em;font-weight:700;color:var(--cqr-red)}
.cqr-danger .cqr-field{max-width:260px}

/* ==================================================================
   9 · Tarjetas de registro y acceso (dentro del tema)
   ================================================================== */

.cqr-card{
	max-width:520px;margin:0 auto;background:var(--cqr-surface);
	border:1px solid var(--cqr-line-soft);border-top:3px solid var(--cqr-orange);
	border-radius:2px 2px 9px 9px;padding:32px 30px 28px;
	box-shadow:0 18px 60px rgba(0,0,0,.55);
	font:400 16px/1.55 var(--cqr-font-t);color:var(--cqr-white);
}
.cqr-card .cqr-logo{display:block;width:52px;height:52px;object-fit:contain;margin:0 0 16px}
.cqr-card .cqr-h{margin:0 0 7px;font-family:var(--cqr-font-d);font-size:1.7rem;
	line-height:1.08;letter-spacing:-.03em;font-weight:800;color:var(--cqr-white)}
.cqr-card .cqr-sub{margin:0 0 22px;color:var(--cqr-text);font-size:.95rem}
.cqr-row{display:flex;flex-wrap:wrap;gap:0 14px}
.cqr-row .cqr-field{flex:1 1 180px;min-width:0}
.cqr-consent{display:block;margin:6px 0 20px;font-size:.87rem;line-height:1.6;color:var(--cqr-text)}
.cqr-consent label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.cqr-consent input{margin-top:2px}
.cqr-card .cqr-btn-primary{width:100%;text-align:center;padding:14px}
.cqr-alt{margin:18px 0 0;text-align:center;font-size:.88rem;color:var(--cqr-muted);line-height:1.9}

/* Los enlaces necesitan DOS clases de especificidad.
   El kit de Elementor trae `.elementor-kit-38 a{color:var(--e-global-color-primary)}`,
   que es #080808 y empata con `.cqr-consent a`; como su hoja carga después de la
   nuestra, ganaba el empate y los enlaces quedaban negro sobre negro (1,08:1). */
.cqr-card .cqr-consent a,
.cqr-card .cqr-alt a,
.cqr-card .cqr-errors a,
.cqr-card .cqr-sub a{color:var(--cqr-orange);text-decoration:underline;
	text-underline-offset:2px;text-decoration-thickness:1px}
.cqr-card .cqr-alt a{text-decoration:none}
.cqr-card .cqr-alt a:hover,
.cqr-card .cqr-consent a:hover{color:var(--cqr-orange-dk);text-decoration:underline}

/* Honeypot: invisible para personas, presente para bots.
   El style también va inline en el HTML, por si este archivo no llega a cargar. */
.cqr-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

@media (max-width:520px){
	.cqr-card{padding:28px 22px 24px}
	.cqr-qr-block{flex-direction:column;align-items:center}
	.cqr-qr-side{width:100%}
	.cqr-dl .cqr-btn{flex:1 1 auto;text-align:center}
}