/* Alta guiada (minegocio24.com/empezar). Se apoya en panel.css (tokens,
   formularios, botones) y sólo agrega lo propio: el avance arriba, una
   columna angosta y las piezas de cada paso. Marca de Mi Negocio 24. */

body.alta { background: var(--superficie-2); min-height: 100vh; display: flex; flex-direction: column; }
.alta-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px max(16px, env(safe-area-inset-left)); background: var(--superficie); border-bottom: 1px solid var(--borde); }
.alta-barra .logo-mn24 img { display: block; }
.alta-guardado { display: flex; align-items: center; gap: 12px; margin: 0; font-size: .9rem; }
.alta-guardado .icono { width: 16px; height: 16px; vertical-align: -3px; color: var(--exito); }

.avance { max-width: 880px; width: 100%; margin: 24px auto 0; padding: 0 16px; }
.avance-texto { margin: 0 0 8px; font-size: .9rem; color: var(--tenue); }
.avance-texto span { color: var(--texto); font-weight: 600; }
.avance-barra { height: 6px; border-radius: 999px; background: var(--relleno); overflow: hidden; }
.avance-barra span { display: block; height: 100%; background: var(--acento); border-radius: inherit; min-width: 6px; }
.avance ol { display: none; }
@media (min-width: 760px) {
    .avance-texto, .avance-barra { display: none; }
    .avance ol { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; counter-reset: paso; }
    .avance li { flex: 1; font-size: .85rem; color: var(--tenue); }
    .avance .paso-alta { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; padding: 8px 0; border-top: 3px solid var(--relleno); min-height: 44px; }
    .avance li.hecho .paso-alta { border-top-color: var(--acento); }
    .avance li.actual { color: var(--texto); font-weight: 600; }
    .avance li.actual .paso-alta { border-top-color: var(--acento); }
    .avance li a:hover .nombre { text-decoration: underline; }
    .avance .numero { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--relleno); font-size: .78rem; font-weight: 600; }
    .avance li.actual .numero { background: var(--acento); color: var(--acento-texto); }
    .avance li.hecho .numero { background: var(--acento-suave); color: var(--acento-tinta); }
    .avance .numero .icono { width: 14px; height: 14px; }
}
/* En el teléfono los pasos no caben: la barra y «Paso 2 de 6» dicen lo mismo. */
.avance li { position: relative; }

.alta-main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
.alta-main.ancha { max-width: 1040px; }
.alta-cabeza { margin: 8px 0 20px; }
.alta-cabeza h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 8px; }
.alta-cabeza p { color: var(--cuerpo); margin: 0; }
.alta-main .tarjeta { margin-bottom: 16px; }
/* El token CSRF va antes del título: sin esto el h2 deja 32 px de aire arriba. */
.alta-main .tarjeta > input[type=hidden] + h2, .alta-main .tarjeta > h2:first-of-type { margin-top: 0; }
.alta-main fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.alta-main legend { font-weight: 600; font-size: 1.05rem; margin-bottom: 8px; padding: 0; }
button.ancho { width: 100%; }
.centrado { text-align: center; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alta-pie { text-align: center; color: var(--tenue); font-size: .9rem; padding: 16px 16px 32px; }
.alta-pie p { margin: 0; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.alta-beneficios { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; color: var(--cuerpo); font-size: .92rem; }
.alta-beneficios .icono { width: 16px; height: 16px; vertical-align: -3px; color: var(--exito); }

input.codigo { font-size: 1.6rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.error-campo { display: block; color: var(--error); font-size: .88rem; margin-top: 4px; }
[aria-invalid="true"] { border-color: var(--error) !important; }

/* Paso 2: la dirección con su sufijo y su estado en vivo. */
.campo-slug { display: flex; align-items: stretch; margin-top: 8px; }
.campo-slug input:not([type=hidden]) { margin-top: 0 !important; }
.campo-slug input { flex: 1; min-width: 0; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.campo-slug .sufijo { display: flex; align-items: center; padding: 0 12px; background: var(--relleno); border: 1px solid var(--borde-campo); border-left: 0; border-radius: 0 var(--radio-chico) var(--radio-chico) 0; color: var(--tenue); font-size: .92rem; white-space: nowrap; }
.estado-slug { display: block; min-height: 1.4em; font-size: .88rem; margin-top: 4px; }
.estado-slug.libre { color: var(--exito); }
.estado-slug.ocupado { color: var(--error); }
.ficha-sugerencia { min-height: 36px; padding: 4px 12px; border-radius: 999px; background: var(--relleno); color: var(--texto); border: 0; font: inherit; font-size: .9rem; cursor: pointer; margin: 2px; }
@media (max-width: 420px) { .campo-slug .sufijo { font-size: .8rem; padding: 0 8px; } }

/* Paso 3: logo, color y letra. */
.logo-alta { display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: start; }
@media (max-width: 480px) { .logo-alta { grid-template-columns: 1fr; } }
.logo-cuadro { position: relative; width: 140px; height: 140px; border-radius: 28px; overflow: hidden; background: var(--marca, var(--acento)); display: grid; place-items: center; touch-action: none; border: 1px solid var(--borde); }
.logo-cuadro.con-imagen { background: repeating-conic-gradient(#e9eaee 0 25%, #fff 0 50%) 0 0 / 16px 16px; cursor: grab; }
.logo-cuadro img, .logo-cuadro canvas { width: 100%; height: 100%; object-fit: contain; }
.logo-inicial { font-size: 4rem; font-weight: 700; color: #fff; line-height: 1; }
.zoom-logo input { width: 100%; }
.color-alta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.color-alta input[type=color] { width: 64px !important; height: 64px; min-height: 64px; margin: 0 !important; flex: none; padding: 4px; border-radius: var(--radio-chico); border: 1px solid var(--borde-campo); background: var(--superficie); cursor: pointer; }
.revision-color { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; }
.muestra-boton { align-self: flex-start; padding: 10px 20px; border-radius: 999px; font-weight: 600; }
.pares-alta { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.par-alta { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--borde); border-radius: var(--radio-chico); cursor: pointer; margin: 0; }
.par-alta:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.par-alta > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .88rem; }
.par-muestra { font-size: 1.35rem; line-height: 1.2; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Paso 4: las tres formas de empezar y la tabla de revisión. */
.opciones-menu { display: grid; gap: 16px; }
.opcion-menu > .icono { width: 28px; height: 28px; color: var(--acento-tinta); margin-bottom: 8px; }
.opcion-menu h2 { margin-top: 0; }
label.archivo { font-size: .92rem; }
.tabla-menu input { width: 100%; min-width: 120px; margin-top: 0 !important; }
.tabla-menu input.precio, .tabla-menu input.minutos { min-width: 80px; max-width: 110px; text-align: right; }
.tabla-menu input[type=checkbox] { width: 22px; min-width: 22px; height: 22px; }
.tabla-menu td { vertical-align: middle; padding: 6px 4px; }
.tabla-menu tr.con-error td { background: var(--error-suave); }
.tabla-menu tr.sin-precio input.precio { border-color: var(--alerta) !important; }
.acciones-alta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.acciones-alta form { margin: 0; }

/* Paso 5: horario y equipo. */
.horario-alta { width: auto; }
.horario-alta th[scope=row] { text-align: left; font-weight: 500; padding-right: 16px; }
.horario-alta th, .horario-alta td { vertical-align: middle; }
.horario-alta input { min-width: 120px; margin-top: 0 !important; }
.fila-equipo { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 8px; }
@media (max-width: 600px) { .fila-equipo { grid-template-columns: 1fr; padding-bottom: 12px; border-bottom: 1px solid var(--borde); margin-bottom: 12px; } }
.mapa-alta summary { cursor: pointer; color: var(--acento-tinta); min-height: 44px; display: flex; align-items: center; }

/* Paso 6. */
.alta-cabeza.listo { text-align: center; }
.sello-listo { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--exito-suave); color: var(--exito); margin-bottom: 12px; }
.sello-listo .icono { width: 32px; height: 32px; }
.listo-pasos { display: grid; gap: 16px; margin-bottom: 16px; }
.listo-pasos .tarjeta { margin: 0; }
.listo-pasos .tarjeta > .icono { width: 26px; height: 26px; color: var(--acento-tinta); }
.listo-pasos h2 { margin: 8px 0; }
.listo-pasos a { word-break: break-all; }

/* Áreas táctiles: los enlaces y botones de texto sueltos miden 44 px de alto,
   como cualquier botón; dentro de un párrafo se ve igual, pero el dedo atina. */
body.alta button.enlace, .enlace-tocable { display: inline-flex; align-items: center; min-height: 44px; }
.ficha-sugerencia { min-height: 44px; }
.tabla-menu input[type=checkbox] { width: 28px; min-width: 28px; height: 28px; }
@media (max-width: 600px) {
    .horario-alta { width: 100%; table-layout: fixed; }
    .horario-alta th[scope=row] { padding: 6px 4px 6px 0; width: 24%; font-size: .85rem; }
    .horario-alta td, .horario-alta thead th { padding: 6px 3px; }
    .horario-alta input { min-width: 0; width: 100%; padding: 6px 6px !important; font-size: .95rem !important; }
}
/* La muestra de cada letra es una ilustración (el nombre del negocio con ese par),
   no texto de la página: va en ::before, como en el editor del sitio. */
.par-muestra::before { content: attr(data-muestra); }