/* ==========================================================
   Formulario de inscripción · tarjeta con pasos laterales
   ========================================================== */

.pagina {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 24px 40px;
}

.tarjeta {
    width: 100%;
    max-width: 1180px;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--sombra);
    display: grid;
    grid-template-columns: 280px 1fr;
    overflow: hidden;
}

/* ---------------- Columna de pasos ---------------- */
.lateral {
    background: #FBFAF7;
    border-right: 1px solid var(--linea);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
}

.marca-evento { margin-bottom: 28px; }
.marca-evento .nombre {
    font-family: 'ClashDisplay', Georgia, serif;
    font-size: 15px; font-weight: 600; letter-spacing: .5px;
    color: var(--azul); line-height: 1.3;
}
.marca-evento .lema { font-size: 12.5px; color: var(--oro); font-weight: 600; margin-top: 2px; }

.lateral h1 { font-size: 24px; margin-bottom: 26px; }

.pasos { list-style: none; margin: 0; padding: 0; flex: 1; }
.paso-item { position: relative; padding-left: 40px; padding-bottom: 22px; }
.paso-item:last-child { padding-bottom: 0; }

.paso-item .indice {
    position: absolute; left: 0; top: -2px;
    width: 27px; height: 27px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: #fff; color: var(--tenue);
    border: 1.5px solid var(--linea-fuerte);
    transition: all .25s ease;
}
/* Línea que une los pasos */
.paso-item::before {
    content: ''; position: absolute;
    left: 13px; top: 29px; bottom: 4px; width: 1.5px;
    background: var(--linea-fuerte);
}
.paso-item:last-child::before { display: none; }

.paso-item .rotulo {
    font-size: 15px; font-weight: 600; color: var(--tenue);
    transition: color .25s ease; line-height: 1.35;
}

.paso-item.activo .indice { background: var(--azul); border-color: var(--azul); color: #fff; }
.paso-item.activo .rotulo { color: var(--azul); font-weight: 700; }

.paso-item.hecho .indice { background: var(--verde); border-color: var(--verde); color: #fff; font-size: 0; }
.paso-item.hecho .indice::after {
    content: ''; width: 9px; height: 5px; margin-top: -2px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}
.paso-item.hecho .rotulo { color: var(--azul); }
.paso-item.hecho::before { background: var(--verde); }

.lateral-pie { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linea); }
.lateral-pie .dato { font-size: 12.5px; color: var(--tenue); line-height: 1.6; margin-bottom: 14px; }
.lateral-pie .dato strong { color: var(--azul); display: block; font-weight: 600; }

.lateral-enlaces { display: flex; flex-direction: column; gap: 8px; }

/* Los tres accesos que no son el formulario: tarifas, editar con
   folio y la entrada del equipo. Con forma de botón porque antes
   eran texto suelto y en el teléfono no se encontraban. */
.acceso-chip {
	align-items: center;
	background: #fff;
	border: 1px solid var(--linea-fuerte);
	border-radius: 20px;
	color: var(--azul);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	gap: 7px;
	padding: 8px 14px;
	text-align: left;
	transition: background .15s, border-color .15s, color .15s;
}
.acceso-chip i { font-size: 13px; opacity: .75; }
.acceso-chip:hover { background: var(--azul); border-color: var(--azul); color: #fff; }
.acceso-chip:hover i { opacity: 1; }
.acceso-chip.discreto { color: var(--tenue); }
.acceso-chip.discreto:hover { color: #fff; }
.rotulo-corto { display: none; }

/* ---------------- Columna de contenido ---------------- */
.contenido { padding: 32px 40px 28px; display: flex; flex-direction: column; }

.cabecera-paso { margin-bottom: 22px; }
.cabecera-paso .contador {
    font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--oro); margin-bottom: 6px; display: block;
}
.cabecera-paso h2 { font-size: 24px; margin-bottom: 6px; }
.cabecera-paso p { font-size: 14.5px; color: var(--tenue); margin: 0; }

.vista { display: none; flex: 1; flex-direction: column; }
.vista.activa { display: flex; animation: entrar .25s ease; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.cuerpo-vista { flex: 1; }

.bloque { margin-bottom: 24px; }
.bloque:last-child { margin-bottom: 0; }
.bloque-titulo {
    font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--tenue);
    margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--linea);
}

.acciones {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linea);
}

/* ---------------- Integrantes ---------------- */
.persona {
    border: 1px solid var(--linea);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 14px;
    background: #fff;
    transition: border-color .2s ease;
}
.persona.plegada { padding: 0; }
.persona:hover { border-color: var(--linea-fuerte); }

.persona-resumen {
    display: none; align-items: center; gap: 12px; width: 100%;
    background: none; border: none; padding: 15px 20px;
    font-family: inherit; text-align: left; cursor: pointer;
}
.persona.plegada .persona-resumen { display: flex; }
.persona.plegada .persona-cab, .persona.plegada .persona-cuerpo { display: none; }
.persona-resumen .n {
    width: 25px; height: 25px; min-width: 25px; border-radius: 50%;
    background: var(--oro-suave); color: #8A6D12;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.persona-resumen .nom { font-weight: 700; color: var(--azul); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-resumen .det { font-size: 13px; color: var(--tenue); }
.persona-resumen .editar { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--azul-medio); white-space: nowrap; }

.persona-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
    padding-bottom: 14px; border-bottom: 1px solid var(--linea);
}
.persona-cab h4 { font-size: 16px; display: flex; align-items: center; gap: 10px; }
.persona-cab .n {
    width: 25px; height: 25px; border-radius: 50%;
    background: var(--oro-suave); color: #8A6D12;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.quitar {
    background: none; border: 1px solid var(--linea-fuerte); color: var(--tenue);
    border-radius: 30px; font-size: 12.5px; font-weight: 600; padding: 5px 13px;
    cursor: pointer; transition: all .2s ease; font-family: inherit;
}
.quitar:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.incompleto { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--rojo); }
.copiado { font-size: 13px; color: var(--verde); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; }

/* ---------------- Días de comida ---------------- */
.dia {
    border: 1px solid var(--linea); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 9px; background: #fff;
    transition: all .2s ease;
}
.dia.activo { border-color: var(--azul-medio); background: #FCFCFE; }
.dia-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.dia-nombre { font-weight: 700; color: var(--azul); font-size: 15px; }
.dia-fecha { font-size: 12.5px; color: var(--tenue); font-weight: 400; margin-left: 6px; }
.comidas { display: flex; flex-wrap: wrap; gap: 8px; }
.comida { position: relative; flex: 1 1 auto; min-width: 105px; }
.comida input { position: absolute; opacity: 0; pointer-events: none; }
.comida-caja {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    cursor: pointer; border: 1px solid var(--linea); border-radius: 30px;
    padding: 8px 12px; background: #fff; font-size: 14px; font-weight: 600;
    color: var(--azul); transition: all .18s ease; text-align: center;
}
.comida-caja .precio { font-weight: 400; font-size: 11.5px; color: var(--tenue); }
.comida-caja:hover { border-color: var(--azul-medio); }
.comida input:checked + .comida-caja { background: var(--azul); border-color: var(--azul); color: #fff; }
.comida input:checked + .comida-caja .precio { color: rgba(255, 255, 255, .7); }
.comida input:focus-visible + .comida-caja { box-shadow: 0 0 0 3px rgba(38, 64, 127, .28); }

.atajos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.atajo {
    border: 1px solid var(--linea); background: #fff; color: var(--azul);
    border-radius: 30px; font-size: 13px; font-weight: 600; padding: 7px 14px;
    cursor: pointer; transition: all .18s ease; font-family: inherit;
}
.atajo:hover { background: var(--azul); border-color: var(--azul); color: #fff; }
.atajo.chico { font-size: 12px; padding: 5px 11px; }
.atajo.tenue { color: var(--tenue); font-weight: 500; }

/* ---------------- Montos ---------------- */
.linea-monto { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 5px 0; font-size: 14.5px; }
.linea-monto .rot { color: var(--tenue); }
.linea-monto .val { font-weight: 700; color: var(--azul); white-space: nowrap; font-variant-numeric: tabular-nums; }
.linea-monto .val.ahorro { color: var(--verde); }
.linea-monto.total { border-top: 1px solid var(--linea); margin-top: 9px; padding-top: 12px; font-size: 16px; }
.linea-monto.total .val { font-size: 20px; }

.caja-monto { background: #FBFAF7; border-radius: 12px; padding: 16px 18px; margin-top: 16px; }

.persona-pago {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea);
}
.persona-pago:last-child { border-bottom: none; }
.persona-pago .quien { font-weight: 700; color: var(--azul); font-size: 15px; }
.persona-pago .desc { font-size: 13px; color: var(--tenue); line-height: 1.5; margin-top: 2px; }
.persona-pago .monto { font-weight: 700; color: var(--azul); font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.persona-pago .monto small { display: block; font-size: 11.5px; font-weight: 500; color: var(--verde); }

.total-final {
    background: var(--azul); color: rgba(255, 255, 255, .8);
    border-radius: 14px; padding: 22px 24px; margin-top: 18px;
}
.total-final .linea-monto .rot { color: rgba(255, 255, 255, .62); }
.total-final .linea-monto .val { color: #fff; }
.total-final .linea-monto .val.ahorro { color: var(--oro); }
.total-final .linea-monto.total { border-top-color: rgba(255, 255, 255, .18); }
.total-final .grande { font-size: 34px; font-weight: 700; color: var(--oro); line-height: 1.1; font-variant-numeric: tabular-nums; }
.nota-subsidio {
    background: rgba(201, 162, 39, .14); border: 1px dashed rgba(201, 162, 39, .5);
    border-radius: 10px; padding: 13px 15px; margin-top: 15px; font-size: 13.5px; line-height: 1.55;
}
.nota-subsidio strong { color: var(--oro); }

/* ---------------- Comprobante ---------------- */
.listo { text-align: center; padding: 6px 0 4px; }
.listo .icono {
    width: 66px; height: 66px; border-radius: 50%;
    background: var(--verde-suave); color: var(--verde);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; margin: 0 auto 18px;
}
.folio-caja { background: var(--azul); border-radius: 14px; padding: 22px; margin: 20px 0; text-align: center; }
.folio-caja .rot { font-size: 11.5px; color: rgba(255, 255, 255, .6); letter-spacing: 1.6px; text-transform: uppercase; }
.folio-caja .codigo {
    font-size: 30px; font-weight: 700; color: var(--oro); letter-spacing: 3px;
    margin: 5px 0 4px; font-family: 'ClashDisplay', monospace;
}
.folio-caja .pista { font-size: 12.5px; color: rgba(255, 255, 255, .55); margin: 0; }

/* ==========================================================
   Pantallas anchas
   -------------------------------------------------------
   En un monitor sobra ancho y falta alto: los pasos con varios
   bloques se reparten en dos columnas para que quepan sin tener
   que bajar con la rueda.
   ========================================================== */
@media (min-width: 1100px) {
    .cuerpo-vista.dos-columnas {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 36px;
        align-items: start;
    }
    .cuerpo-vista.dos-columnas > .bloque { margin-bottom: 22px; }
    /* Un bloque puede pedir la fila entera cuando lo necesita */
    .cuerpo-vista.dos-columnas > .ancho-completo { grid-column: 1 / -1; }
}

/* En móvil las columnas desaparecen y todo vuelve a fluir en vertical */
.columna > .bloque:last-child { margin-bottom: 0; }
@media (max-width: 1099px) {
    .columna > .bloque:last-child { margin-bottom: 24px; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
    .pagina { padding: 0; }
    .tarjeta { grid-template-columns: 1fr; border-radius: 0; min-height: 100vh; max-width: none; }
    .lateral {
        border-right: none; border-bottom: 1px solid var(--linea);
        padding: 22px 20px 18px;
    }
    .marca-evento { margin-bottom: 16px; }
    .lateral h1 { font-size: 20px; margin-bottom: 16px; }

    /* Estaban ocultos y no había manera de llegar a las tarifas,
       a editar con el folio ni al acceso del equipo. Ahora van en
       una fila que se desliza, justo debajo de los pasos. */
    .lateral-pie { border-top: 0; margin-top: 18px; padding-top: 0; }
    .lateral-pie .dato { display: none; }
    .lateral-enlaces { flex-direction: row; flex-wrap: wrap; gap: 8px; }

    /* Con el texto completo el tercero se salía de la pantalla y
       había que adivinar que estaba ahí. Con el corto caben los
       tres de una vez, y si la pantalla es muy angosta bajan a
       una segunda línea en vez de esconderse. */
    .rotulo-largo { display: none; }
    .rotulo-corto { display: inline; }
    .acceso-chip { padding: 9px 13px; white-space: nowrap; }

    /* En móvil los pasos van en fila, sin rótulos */
    .pasos { display: flex; gap: 0; }
    .paso-item { padding: 0; flex: 1; display: flex; justify-content: center; }
    .paso-item .indice { position: static; }
    .paso-item .rotulo { display: none; }
    .paso-item::before {
        left: 50%; right: -50%; top: 13px; bottom: auto;
        width: auto; height: 1.5px;
    }
    .paso-item:last-child::before { display: none; }

    .contenido { padding: 26px 20px 28px; }
    .cabecera-paso h2 { font-size: 20px; }
    .acciones .boton { flex: 1; }
    .comida { min-width: 0; flex: 1 1 30%; }
    .comida-caja { padding: 8px 4px; font-size: 12.5px; }
    .persona { padding: 18px 15px; }
    .total-final .grande { font-size: 28px; }
    .folio-caja .codigo { font-size: 24px; letter-spacing: 2px; }
}

/* ==========================================================
   Comprobante final
   -------------------------------------------------------
   El comprobante trae sus propios estilos en línea (los comparte
   con el correo). Aquí solo se le da sitio y se prepara la
   impresión, sin tocar su diseño.
   ========================================================== */
.hoja-comprobante { display: flex; justify-content: center; }
.hoja-comprobante > table { box-shadow: 0 1px 3px rgba(22, 34, 74, .05); }

@media (max-width: 720px) {
    /* El comprobante está pensado a 600 px; en móvil se deja fluir */
    .hoja-comprobante > table { width: 100% !important; }
}

@media print {
    /* Al imprimir queda solo el comprobante, sin la tarjeta ni los pasos */
    body { background: #fff; }
    .pagina { padding: 0; }
    .tarjeta { box-shadow: none; border-radius: 0; display: block; min-height: 0; }
    .lateral, .cabecera-paso, .acciones, .no-imprimir { display: none !important; }
    .contenido { padding: 0; }
    .hoja-comprobante > table { border: none !important; box-shadow: none !important; }
}

/* ==========================================================
   Acceso del equipo
   ========================================================== */
.enlace-equipo { color: var(--tenue); }
.enlace-equipo:hover { color: var(--azul-medio); }

.tarjeta-acceso {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; margin-bottom: 12px;
    border: 1px solid var(--linea); border-radius: 12px;
    background: #fff; text-decoration: none;
    transition: all .2s ease;
}
.tarjeta-acceso:hover { border-color: var(--azul-medio); background: var(--azul-suave); }
.tarjeta-acceso .ico {
    width: 42px; height: 42px; min-width: 42px; border-radius: 11px;
    background: var(--azul-suave); color: var(--azul-medio);
    display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.tarjeta-acceso:hover .ico { background: #fff; }
.tarjeta-acceso .tx { flex: 1; }
.tarjeta-acceso .nom { display: block; font-weight: 700; color: var(--azul); font-size: 15.5px; }
.tarjeta-acceso .des { display: block; font-size: 13px; color: var(--tenue); line-height: 1.5; margin-top: 2px; }
.tarjeta-acceso > .bi-arrow-right { color: var(--linea-fuerte); font-size: 17px; }
.tarjeta-acceso:hover > .bi-arrow-right { color: var(--azul-medio); }