:root {
  --morado: #7c3aed;
  --rosa: #ec4899;
  --naranja: #f97316;
  --amarillo: #facc15;
  --verde: #10b981;
  --azul: #3b82f6;
  --cian: #06b6d4;
  --rojo: #ef4444;
  --tinta: #1e1b4b;
  --gris: #64748b;
  --fondo: #f6f3ff;
  --tarjeta: #ffffff;
  --borde: #e7e3f5;
  --radio: 18px;
  --sombra: 0 10px 30px -12px rgba(76, 29, 149, 0.25);
  --degradado: linear-gradient(120deg, #7c3aed 0%, #ec4899 55%, #f97316 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  background-image:
    radial-gradient(circle at 8% 12%, rgba(236, 72, 153, 0.12) 0, transparent 35%),
    radial-gradient(circle at 92% 8%, rgba(124, 58, 237, 0.14) 0, transparent 35%),
    radial-gradient(circle at 80% 90%, rgba(249, 115, 22, 0.10) 0, transparent 35%);
  min-height: 100vh;
}
h1, h2, h3 { margin: 0 0 0.4em; line-height: 1.2; }
a { color: var(--morado); }
.oculto { display: none !important; }

/* ---------- Botones ---------- */
.btn {
  border: 0; border-radius: 999px; padding: 0.7em 1.4em; font: inherit; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.5em; transition: transform .15s, box-shadow .15s, opacity .15s;
  background: #efeafd; color: var(--morado);
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primario { background: var(--degradado); color: white; box-shadow: 0 8px 20px -8px rgba(236, 72, 153, .7); }
.btn-verde { background: linear-gradient(120deg, #10b981, #06b6d4); color: white; box-shadow: 0 8px 20px -8px rgba(16, 185, 129, .7); }
.btn-blanco { background: white; color: var(--tinta); border: 1px solid var(--borde); }
.btn-peligro { background: #fee2e2; color: #b91c1c; }
.btn-chico { padding: 0.4em 0.9em; font-size: 0.85em; }
.btn-grande { padding: 1em 1.8em; font-size: 1.05em; }

/* ---------- Acceso ---------- */
#acceso {
  min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr;
}
.acceso-arte {
  background: var(--degradado); color: white; padding: 60px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
}
.acceso-arte::before, .acceso-arte::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.12);
}
.acceso-arte::before { width: 420px; height: 420px; right: -120px; top: -120px; }
.acceso-arte::after { width: 260px; height: 260px; left: -80px; bottom: -60px; }
.acceso-arte h1 { font-size: 2.6em; position: relative; z-index: 1; }
.acceso-arte p { font-size: 1.1em; opacity: .92; max-width: 460px; position: relative; z-index: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; position: relative; z-index: 1; }
.chips span { background: rgba(255,255,255,.2); padding: 8px 14px; border-radius: 999px; font-size: .9em; backdrop-filter: blur(4px); }
.acceso-form { display: flex; align-items: center; justify-content: center; padding: 40px; }
.caja-acceso { width: 100%; max-width: 400px; background: white; padding: 36px; border-radius: 26px; box-shadow: var(--sombra); }
.pestanas { display: flex; background: #f1edfd; border-radius: 999px; padding: 4px; margin-bottom: 22px; }
.pestanas button { flex: 1; border: 0; background: transparent; padding: 10px; border-radius: 999px; font: inherit; font-weight: 600; color: var(--gris); cursor: pointer; }
.pestanas button.activa { background: white; color: var(--morado); box-shadow: 0 4px 10px -4px rgba(0,0,0,.15); }

/* ---------- Barra superior ---------- */
.barra {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 28px;
  background: rgba(255,255,255,.75); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 20;
}
.marca { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.marca .logo { width: 40px; height: 40px; border-radius: 12px; background: var(--degradado); display: grid; place-items: center; color: white; font-size: 1.3em; }
.marca small { display: block; font-weight: 500; color: var(--gris); font-size: .75em; }
.usuario { display: flex; align-items: center; gap: 12px; color: var(--gris); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--cian), var(--morado)); color: white; display: grid; place-items: center; font-weight: 700; }

/* ---------- Panel ---------- */
.contenedor { max-width: 1180px; margin: 0 auto; padding: 28px; }
.heroe {
  background: var(--degradado); color: white; border-radius: 28px; padding: 34px 38px; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  box-shadow: var(--sombra); position: relative; overflow: hidden;
}
.heroe::after { content: '📂'; position: absolute; right: 30px; bottom: -30px; font-size: 160px; opacity: .15; }
.heroe h1 { font-size: 1.9em; }
.heroe p { opacity: .9; margin: 0; }
.heroe .acciones { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.heroe .btn-blanco { border: 0; }
.estadisticas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0; }
.estadistica { background: white; border-radius: var(--radio); padding: 20px 22px; box-shadow: var(--sombra); display: flex; gap: 16px; align-items: center; }
.estadistica .icono { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5em; }
.estadistica b { font-size: 1.6em; display: block; }
.estadistica span { color: var(--gris); font-size: .9em; }
.lista-exp { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.tarjeta-exp { background: white; border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); border-top: 6px solid var(--morado); display: flex; flex-direction: column; gap: 10px; }
.tarjeta-exp.pagado { border-top-color: var(--verde); }
.tarjeta-exp h3 { font-size: 1.05em; }
.tarjeta-exp .meta { color: var(--gris); font-size: .85em; }
.tarjeta-exp .pie { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-top: auto; }
.seleccion { display: flex; align-items: center; gap: 8px; font-size: .85em; font-weight: 600; color: #065f46; background: #ecfdf5; padding: 8px 12px; border-radius: 12px; cursor: pointer; }
.seleccion input { accent-color: var(--verde); width: 17px; height: 17px; }
.etiqueta { white-space: nowrap; display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .75em; font-weight: 700; }
.etiqueta.borrador { background: #fef3c7; color: #92400e; }
.etiqueta.autorizado { background: #dbeafe; color: #1e40af; }
.etiqueta.listo { background: #d1fae5; color: #065f46; }
.vacio { text-align: center; padding: 50px; background: white; border-radius: var(--radio); border: 2px dashed var(--borde); color: var(--gris); }
.vacio .grande { font-size: 3em; }

/* ---------- Revisión y autorización ---------- */
.banda-revision { margin: 22px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--radio); background: linear-gradient(120deg, #eff6ff, #f5f3ff); border: 2px solid #c7d2fe; }
.banda-revision span { display: block; color: var(--gris); font-size: .88em; }
.rev-barra { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 18px; padding: 16px 22px; background: white; border-radius: var(--radio); box-shadow: var(--sombra); position: sticky; top: 76px; z-index: 10; }
.rev-tarjeta { background: white; border-radius: 22px; box-shadow: var(--sombra); padding: 22px 24px; margin-bottom: 18px; border-left: 7px solid #f59e0b; }
.rev-tarjeta.ok { border-left-color: var(--verde); }
.rev-cab { display: flex; gap: 16px; align-items: center; }
.rev-cab h3 { margin: 0 0 2px; }
.rev-cab .meta { color: var(--gris); font-size: .85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-foto { width: 58px; height: 58px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.rev-foto.vacia { background: #f1edfd; display: grid; place-items: center; font-size: 1.6em; }
.rev-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; margin: 16px 0 8px; padding: 14px 16px; background: #fbfaff; border-radius: 14px; }
.rev-datos span { display: block; font-size: .72em; color: var(--gris); }
.rev-datos b { font-size: .88em; font-weight: 600; }
.rev-juicio { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-weight: 600; font-size: .9em; }
.rev-juicio .pildora { padding: 7px 14px; font-size: .9em; }
.rev-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde); }
.autorizar { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #065f46; background: #ecfdf5; padding: 10px 16px; border-radius: 14px; cursor: pointer; }
.autorizar input { width: 20px; height: 20px; accent-color: var(--verde); }
.autorizar.bloq { color: var(--gris); background: #f1f5f9; cursor: not-allowed; }
.lote-lista { list-style: none; padding: 0; margin: 0; max-height: 50vh; overflow: auto; }
.lote-lista li { display: grid; grid-template-columns: 28px 1fr; gap: 2px 8px; padding: 10px 4px; border-bottom: 1px solid var(--borde); font-size: .88em; }
.lote-lista .estado { grid-row: span 2; font-size: 1.1em; }
.lote-lista .nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-lista .det { color: var(--gris); font-size: .9em; }

/* ---------- Editor ---------- */
#editor { display: grid; grid-template-columns: 270px 1fr; gap: 24px; max-width: 1280px; margin: 0 auto; padding: 24px 28px 80px; }
.pasos { position: sticky; top: 90px; align-self: start; background: white; border-radius: 24px; padding: 18px; box-shadow: var(--sombra); }
.pasos .cand { padding: 6px 8px 14px; border-bottom: 1px solid var(--borde); margin-bottom: 10px; }
.pasos .cand b { display: block; }
.pasos .cand span { color: var(--gris); font-size: .8em; }
.paso { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; cursor: pointer; color: var(--gris); font-weight: 500; transition: background .15s; }
.paso:hover { background: #f6f3ff; }
.paso .num { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1em; flex-shrink: 0; background: var(--c-suave); }
.paso.activo { background: var(--c-suave); color: var(--tinta); font-weight: 700; }
.paso.activo .num { background: var(--c); color: white; box-shadow: 0 6px 14px -6px var(--c); }
.paso .ok { margin-left: auto; color: var(--verde); font-weight: 700; }
.barra-avance { height: 8px; background: #f1edfd; border-radius: 999px; overflow: hidden; margin: 14px 4px 4px; }
.barra-avance div { height: 100%; background: var(--degradado); transition: width .3s; }
.avance-txt { font-size: .8em; color: var(--gris); padding: 0 4px; }

.panel-paso { background: white; border-radius: 26px; box-shadow: var(--sombra); overflow: hidden; }
.cabecera-paso { padding: 26px 32px; background: linear-gradient(120deg, var(--c), var(--c2)); color: white; display: flex; align-items: center; gap: 18px; }
.cabecera-paso .icono { font-size: 2.2em; width: 66px; height: 66px; border-radius: 20px; background: rgba(255,255,255,.22); display: grid; place-items: center; }
.cabecera-paso p { margin: 0; opacity: .9; }
.cuerpo-paso { padding: 28px 32px; }
.navegacion { display: flex; justify-content: space-between; padding: 18px 32px 28px; }

.grupo { margin-bottom: 26px; }
.grupo > h3 { font-size: 1em; color: var(--c, var(--morado)); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 16px; }
.campo { grid-column: span 6; display: flex; flex-direction: column; gap: 6px; }
.campo.c3 { grid-column: span 3; } .campo.c4 { grid-column: span 4; } .campo.c8 { grid-column: span 8; } .campo.c12 { grid-column: span 12; }
.campo label { font-size: .82em; font-weight: 600; color: #4c4672; }
.campo label .req { color: var(--rosa); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: .95em; padding: 11px 14px; border: 1.5px solid var(--borde); border-radius: 12px; background: #fcfbff; color: var(--tinta); transition: border .15s, box-shadow .15s;
}
.campo textarea { resize: vertical; min-height: 90px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--c, var(--morado)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--morado)) 15%, transparent); background: white; }
.campo .ayuda { font-size: .75em; color: var(--gris); }
.campo.auto input, .campo.auto select { border-color: #34d399; background: #ecfdf5; }
.campo.auto label::after { content: ' · autollenado'; color: #059669; font-weight: 500; }

/* Imágenes */
.imagenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.caja-img {
  border: 2px dashed #d8d0f5; border-radius: 16px; padding: 12px; text-align: center; cursor: pointer; background: #fbfaff; position: relative;
  min-height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; transition: border .15s, background .15s;
}
.caja-img:hover { border-color: var(--c, var(--morado)); background: white; }
.caja-img img { max-width: 100%; max-height: 120px; border-radius: 8px; object-fit: contain; }
.caja-img .t { font-size: .82em; font-weight: 600; }
.caja-img .s { font-size: .72em; color: var(--gris); }
.caja-img .quitar { position: absolute; top: 6px; right: 6px; border: 0; background: #fee2e2; color: #b91c1c; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; }
.caja-img .ico { font-size: 2em; }

/* Importar ficha */
.importar {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 20px; margin-bottom: 26px;
  background: linear-gradient(120deg, #ecfeff, #f5f3ff); border: 2px dashed #a5b4fc;
}
.importar .ico { font-size: 2.4em; }
.importar p { margin: 2px 0 0; color: var(--gris); font-size: .88em; }
.importar .btn { margin-left: auto; flex-shrink: 0; }

/* Diagnóstico */
.diag-resumen { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.marcador { font-size: 2em; font-weight: 800; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.diag-lista { border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; }
.diag-sec { background: #f5f3ff; padding: 10px 16px; font-weight: 700; font-size: .85em; color: #5b21b6; }
.diag-item { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-top: 1px solid var(--borde); font-size: .9em; }
.diag-item .n { width: 28px; color: var(--gris); font-weight: 600; }
.diag-item .tx { flex: 1; }
.interruptor { display: flex; background: #f1f5f9; border-radius: 999px; padding: 3px; }
.interruptor button { border: 0; background: transparent; padding: 5px 13px; border-radius: 999px; font: inherit; font-size: .8em; font-weight: 700; cursor: pointer; color: var(--gris); }
.interruptor button.si.activo { background: var(--verde); color: white; }
.interruptor button.no.activo { background: var(--rojo); color: white; }

/* Opciones tipo píldora */
.pildoras { display: flex; gap: 10px; flex-wrap: wrap; }
.pildora { border: 2px solid var(--borde); background: white; padding: 10px 18px; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 600; color: var(--gris); }
.pildora.activa { border-color: var(--c, var(--morado)); background: color-mix(in srgb, var(--c, var(--morado)) 10%, white); color: var(--tinta); }
.pildora.comp.activa { border-color: var(--verde); background: #ecfdf5; color: #065f46; }
.pildora.nocomp.activa { border-color: var(--rojo); background: #fef2f2; color: #991b1b; }

.filas-dinamicas .fila { display: grid; grid-template-columns: 180px 1fr 40px; gap: 10px; margin-bottom: 10px; }
.filas-dinamicas input { font: inherit; padding: 10px 12px; border: 1.5px solid var(--borde); border-radius: 12px; background: #fcfbff; }
.filas-dinamicas .x { border: 0; background: #fee2e2; color: #b91c1c; border-radius: 10px; cursor: pointer; }

.encuesta { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: .88em; }
.encuesta th { font-size: .78em; color: var(--gris); font-weight: 600; padding: 4px; }
.encuesta td { background: #fbfaff; padding: 8px; }
.encuesta td:first-child { border-radius: 12px 0 0 12px; }
.encuesta td:last-child { border-radius: 0 12px 12px 0; }
.encuesta input { accent-color: var(--c); width: 18px; height: 18px; }
.encuesta td.c { text-align: center; }

details.plegable { border: 1px solid var(--borde); border-radius: 16px; padding: 4px 18px; margin-bottom: 16px; background: #fdfcff; }
details.plegable summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: #4c4672; }

.aviso { padding: 12px 16px; border-radius: 14px; font-size: .88em; margin: 10px 0; line-height: 1.5; }
.aviso.info { background: #eff6ff; color: #1e40af; }
.aviso.alerta { background: #fffbeb; color: #92400e; }
.aviso.bien { background: #ecfdf5; color: #065f46; }
.aviso.mal { background: #fef2f2; color: #991b1b; }

/* Firma */
.firma-caja { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.firma-vista { width: 240px; height: 100px; border: 2px dashed #d8d0f5; border-radius: 14px; display: grid; place-items: center; background: #fbfaff; color: var(--gris); font-size: .85em; }
.firma-vista img { max-width: 220px; max-height: 88px; }
.lienzo-firma { width: 100%; height: 220px; border: 2px dashed var(--morado); border-radius: 16px; background: white; touch-action: none; cursor: crosshair; }

/* Generar */
.generar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.doc-tarjeta { border-radius: 22px; padding: 24px; color: white; position: relative; overflow: hidden; }
.doc-tarjeta.a { background: linear-gradient(135deg, #7c3aed, #3b82f6); }
.doc-tarjeta.b { background: linear-gradient(135deg, #ec4899, #f97316); }
.doc-tarjeta .grande { font-size: 2.6em; }
.doc-tarjeta p { opacity: .9; font-size: .9em; }
.doc-tarjeta .acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.doc-tarjeta .btn { background: rgba(255,255,255,.95); color: var(--tinta); }
.lista-revision { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.lista-revision li { display: flex; gap: 8px; font-size: .9em; padding: 6px 0; }
.lista-revision li.falta { color: #b91c1c; }
.lista-revision li.opc { color: #92400e; }
.lista-revision li.ok { color: #065f46; }
.caja-pago { margin-top: 22px; border-radius: 22px; padding: 24px 28px; background: #1e1b4b; color: white; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.caja-pago .precio { font-size: 2.2em; font-weight: 800; }
.caja-pago .precio small { font-size: .4em; opacity: .7; font-weight: 500; }

/* Modales */
.modal { position: fixed; inset: 0; background: rgba(30, 27, 75, .55); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal-caja { background: white; border-radius: 26px; padding: 28px; width: 100%; max-width: 520px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); max-height: 92vh; overflow: auto; }
.modal-caja.ancha { max-width: 1000px; height: 92vh; display: flex; flex-direction: column; }
.modal-caja iframe { flex: 1; border: 0; border-radius: 14px; background: #eee; margin-top: 12px; }
.modal-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cerrar { border: 0; background: #f1f5f9; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1.1em; }
.tarjeta-credito { background: linear-gradient(135deg, #7c3aed, #ec4899); color: white; border-radius: 18px; padding: 20px; margin: 16px 0; font-family: ui-monospace, monospace; }
.tarjeta-credito .num { font-size: 1.3em; letter-spacing: 2px; margin: 18px 0 10px; }
.giro { width: 46px; height: 46px; border: 5px solid #ede9fe; border-top-color: var(--morado); border-radius: 50%; animation: giro 1s linear infinite; margin: 20px auto; }
@keyframes giro { to { transform: rotate(360deg); } }
.exito { text-align: center; }
.exito .grande { font-size: 4em; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--tinta); color: white; padding: 12px 22px; border-radius: 999px; z-index: 200; box-shadow: var(--sombra); font-size: .9em; }

@media (max-width: 900px) {
  #acceso { grid-template-columns: 1fr; }
  .acceso-arte { padding: 40px 28px; }
  #editor { grid-template-columns: 1fr; padding: 16px; }
  .pasos { position: static; }
  .campo, .campo.c3, .campo.c4, .campo.c8 { grid-column: span 12; }
  .estadisticas, .generar, .lista-revision { grid-template-columns: 1fr; }
  .heroe { flex-direction: column; align-items: flex-start; }
  .filas-dinamicas .fila { grid-template-columns: 1fr; }
  .rev-datos { grid-template-columns: 1fr; }
}

/* Bienvenida: cómo funciona */
.como-funciona { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; max-width: 520px; position: relative; z-index: 1; counter-reset: paso; }
.como-funciona li { background: rgba(255,255,255,.14); border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.como-funciona b { font-size: 1em; }
.como-funciona span { font-size: .88em; opacity: .9; }

/* Importación masiva: zona para soltar */
.zona-soltar { border: 2px dashed var(--borde); transition: background .15s, border-color .15s; }
.zona-soltar.encima { background: #ede9fe; border-color: #7c3aed; }
.lote-lista { max-height: 340px; overflow: auto; }

/* Revisión: filtros y páginas */
.rev-filtros { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.rev-filtros input[type=search] { flex: 1; min-width: 240px; max-width: 380px; padding: 10px 14px; border: 1px solid var(--borde); border-radius: 12px; font: inherit; }
.paginador { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 10px 0 16px; color: var(--gris); font-size: .9em; }
.nota-vigencia { text-align: center; color: var(--gris); font-size: .85em; margin: 26px 0 8px; }

/* Tutorial guiado */
.tour { position: fixed; inset: 0; z-index: 1000; }
.tour-luz { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .62); transition: all .25s ease; pointer-events: none; }
.tour-globo { position: fixed; width: 360px; max-width: calc(100vw - 24px); background: white; border-radius: 18px; padding: 18px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.tour-globo h3 { margin: 4px 0 6px; }
.tour-globo p { margin: 0 0 14px; color: #334155; font-size: .93em; line-height: 1.5; }
.tour-cuenta { font-size: .75em; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
.tour-botones { display: flex; gap: 8px; align-items: center; }

/* Resumen del estándar leído del PDF */
.resumen-est { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; font-size: .92em; }
.resumen-est li { background: #f8fafc; border-radius: 10px; padding: 8px 12px; }

/* Guía de pasos del panel */
.guia { margin: 22px 0 0; background: white; border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px 24px; }
.guia h2 { margin: 0 0 12px; font-size: 1.15em; display: flex; justify-content: space-between; align-items: baseline; }
.guia h2 span { font-size: .75em; color: var(--gris); font-weight: 500; }
.guia ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.guia li { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--borde); }
.guia li.actual { border: 2px solid #7c3aed; background: #faf5ff; }
.guia li.hecho { opacity: .6; }
.guia-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #f1f5f9; color: #475569; }
.guia li.actual .guia-num { background: #7c3aed; color: white; }
.guia li.hecho .guia-num { background: #10b981; color: white; }
.guia-txt { flex: 1; min-width: 0; }
.guia-txt b { display: block; }
.guia-txt span { display: block; color: var(--gris); font-size: .86em; }
.guia li:not(.actual) .guia-txt span { display: none; }
.guia li.actual .guia-txt span, .guia li:not(.hecho) .guia-txt span { display: block; }

/* Ayuda en pantalla */
.ayuda-pasos { margin: 8px 0 4px; padding-left: 20px; color: var(--gris); font-size: .88em; display: grid; gap: 4px; }
.a-la-mano { background: #f8fafc; border-radius: 14px; padding: 12px 14px; font-size: .85em; margin-bottom: 18px; }
.a-la-mano ul { margin: 6px 0 0; padding-left: 18px; color: #334155; display: grid; gap: 3px; }
.piloto { display: inline-block; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: 999px; padding: 3px 10px; font-size: .72em; font-weight: 600; }
.barra .marca .piloto { margin-left: 10px; }