es HERMANO mayor de .kctp-cuest, y las variables CSS solo bajan. Si se declararan mas abajo, el lienzo no podria calcular su ancho a partir del ancho de la tarjeta. */ body.kctp-portal.pantalla-triaje, body.kctp-portal.pantalla-nueva, body.kctp-portal.pantalla-antecedentes { /* Medida de lectura, no el ancho del contenedor. 34rem = 544px, que a 17px son ~62 caracteres: la columna de texto de la vara. */ --cq-medida: 34rem; /* Padding lateral de la tarjeta de pregunta. Es UNA variable y no dos numeros sueltos justamente para poder calcular el ancho de la tarjeta a partir de ella y que el aire quede simetrico por construccion. */ --cq-pad: var(--kctp-e5); /* 24 en telefono */ /* Ancho de la tarjeta = medida + los dos paddings. De aqui sale el borde izquierdo y el derecho de TODA la pantalla: tarjeta, botonera y rotulos comparten este ancho. */ --cq-caja: calc(var(--cq-medida) + 2 * var(--cq-pad)); /* El radio del control del paciente ya existe en la base (--kctp-radio-ch, 12px). Aqui habia un 14px propio, y con el la pantalla corria cuatro peldanos de radio -10, 12, 14 y 20- con dos de ellos indistinguibles. Con este alias la escalera vuelve a ser la del sistema: 10 / 12 / 20. */ --cq-radio-op: var(--kctp-radio-ch); /* Anchos del escenario de escritorio. Cambiar la composicion es cambiar estos dos numeros, no doce reglas. */ --cq-carril: 17rem; --cq-calle: 5.5rem; /* VUELTA 3. El enunciado deja de heredar --kctp-t-display (28 -> 40) y tiene escala propia (32 -> 46). Motivo medido: en el telefono el titular ocupaba el 8,2% del ancho de la tarjeta y en escritorio solo el 6,25%, o sea que la tipografia se ENCOGIA al ganar sitio. La vara hace lo contrario: 28-36px en movil y 44-48px en escritorio, siempre en peso 400. El token global no se toca porque lo usan otras diez pantallas. */ --cq-pregunta: clamp(2rem, 1.1rem + 3vw, 2.875rem); /* 32 -> 46 */ /* Interlineado sub-1,1 en el display: es la palanca mas barata de las dos referencias y la que mas se nota. Con 1,0 los acentos de dos renglones seguidos se tocaban; 1,04 conserva el efecto sin que se rocen. */ --cq-lh-pregunta: 1.04; --cq-ls-pregunta: -.032em; } /* -------------------------------------------------------------------------- 0. EL LIENZO El hueso plano era lo que hacia que 600px de fondo por lado se leyeran como sobra y no como aire. Un lavado de vino entrando por la esquina superior izquierda -del lado del carril- le da profundidad y direccion a la pagina. Es atmosfera, no una forma: al 7% no se ve como un rectangulo, se ve como material. (El oro nunca va de fondo; regla 8 de kctp.css.) -------------------------------------------------------------------------- */ body.kctp-portal.pantalla-triaje, body.kctp-portal.pantalla-nueva, body.kctp-portal.pantalla-antecedentes { background-color: var(--kctp-fondo); /* El foco del lavado se ancla en PIXELES y no en un porcentaje del ancho. Con porcentajes pasaban las dos cosas malas a la vez: en 1920 el centro se iba tan a la derecha que la atmosfera se diluia y la pagina volvia a verse plana, y en 1440 quedaba medio tapado por el riel de navegacion, que ocupa los primeros 268px. Con min(24rem, 38%) el foco cae siempre justo donde empieza el contenido -384px en escritorio- y en el telefono el 38% lo devuelve dentro de la pantalla. */ /* Tres capas, de arriba abajo: GRANO ... el hueso plano se lee como un #fbf7f5 y no como papel. Un ruido fractal de 140px al 4% le da material: no se ve como textura, se ve como que la pagina esta impresa en algo. Es la unica manera honesta de meter "profundidad" en una pantalla clinica donde no cabe una fotografia. LAVADO .. el vino entrando por la esquina del carril. POSO .... el tinto en la esquina opuesta, para que la pagina tenga una diagonal y no un centro. */ --cq-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.07'/%3E%3C/svg%3E"); --cq-lavado: radial-gradient(120rem 90rem at min(24rem, 38%) -12rem, rgba(91, 12, 47, .11), rgba(91, 12, 47, 0) 78%); --cq-poso: radial-gradient(60rem 44rem at 100% 106%, rgba(38, 5, 20, .055), rgba(38, 5, 20, 0) 64%); background-image: var(--cq-grano), var(--cq-lavado), var(--cq-poso); background-repeat: repeat, no-repeat, no-repeat; background-size: 140px 140px, auto, auto; } /* OJO, ESTO PISA UNA REGLA DE OTRA HOJA A PROPOSITO. En escritorio v2/inicio.css pinta en el FONDO DEL CUERPO una columna blanca falsa (la variable --v2-columna) para que el riel de navegacion, que va en position:fixed, no se corte a mitad de una pagina larga. Su selector -body.kctp-portal:has(.kctp-riel)- pesa exactamente lo mismo que el mio (0,2,1) y su hoja se carga DESPUES por orden alfabetico, asi que ganaba y se llevaba por delante el grano y los dos lavados: medido, el fondo salia con desviacion 0.0, o sea liso del todo. La salida no es subir el volumen sino APILAR: aqui se repite su columna como primera capa -la de mas arriba, que es donde ella tiene que ir- y debajo van las tres mias. Si algun dia inicio.css deja de definir --v2-columna, el respaldo es `none` y lo unico que se pierde es la columna por debajo del pliegue en ESTAS tres pantallas; el grano y los lavados siguen. El :has(.kctp-riel) esta por dos motivos: sube la especificidad a (0,3,1) y ademas asegura que la columna solo se dibuje cuando el riel existe de verdad. */ @media (min-width: 1080px) { body.kctp-portal.pantalla-triaje:has(.kctp-riel), body.kctp-portal.pantalla-nueva:has(.kctp-riel), body.kctp-portal.pantalla-antecedentes:has(.kctp-riel) { background-image: var(--v2-columna, none), var(--cq-grano), var(--cq-lavado), var(--cq-poso); background-repeat: no-repeat, repeat, no-repeat, no-repeat; background-size: auto, 140px 140px, auto, auto; /* Las cuatro van CON la pagina, no con la ventana. Se probaron las dos formas: con background-attachment:fixed los lavados se leen mejor al hacer scroll -parecen luz de la sala y no una mancha pegada al papel-, pero basta con que UNA capa sea fija para que el fondo entero se ancle a la ventana, y entonces en una pagina larga (antecedentes mide 2.830px) todo lo que queda por debajo del pliegue sale liso. Medido en la captura de pagina completa: desviacion 1,9 arriba y 0,0 abajo. Con las cuatro en scroll el papel llega hasta el pie (1,9 / 0,9 / 2,4 arriba, en medio y abajo). El papel completo vale mas que el efecto de luz. */ background-attachment: scroll, scroll, scroll, scroll; } } /* -------------------------------------------------------------------------- 1. EL CARRIL: progreso, mapa de secciones y promesa -------------------------------------------------------------------------- */ .kctp-cuest .kctp-progreso { margin-bottom: var(--kctp-e5); } .kctp-cuest .kctp-progreso-texto { font-size: var(--kctp-t-meta); margin-bottom: 10px; } .kctp-cuest .kctp-progreso-barra { height: 3px; } /* Los ocho chips con borde eran la senal "te faltan ocho secciones", que es justo la sensacion de cuestionario largo que hay que quitar. Se conservan TODOS los nombres: lo que se va es el marco. Queda un rail de texto donde solo la seccion actual esta subrayada. */ .kctp-cuest .kctp-pasos { gap: 2px 18px; margin-bottom: var(--kctp-e7); align-items: baseline; } .kctp-cuest .kctp-paso { background: none; border: 0; padding: 3px 0; font-size: var(--kctp-t-meta); /* En --kctp-tenue y no en --kctp-tenue-2. El token de la base lo dice sin rodeos: el segundo escalon es "solo iconos y adornos, nunca texto". Medido, el #a9989f sobre el hueso da 2,57:1 y el minimo para texto es 4,5:1; el #7e6a73 da 4,7:1. Mientras el mapa estuvo apagado en el cuestionario esto pasaba desapercibido; ahora son ocho renglones en la pantalla principal, asi que hay que arreglarlo. La jerarquia entre "pendiente", "hecha" y "actual" no la pierde: la llevan la FORMA del punto (hueco / palomita / lleno con halo) y el peso de la actual, que es lo que pide WCAG 1.4.1. */ color: var(--kctp-tenue); border-radius: 0; letter-spacing: 0; } .kctp-cuest .kctp-paso.hecho { background: none; border: 0; color: var(--kctp-tenue); } .kctp-cuest .kctp-paso.actual { background: none; border: 0; color: var(--kctp-tinto); font-weight: var(--kctp-peso-medio); box-shadow: inset 0 -2px 0 0 var(--kctp-acento); } /* La "tarjeta" que envolvia todo deja de ser una caja: pasa a ser la columna de la pantalla. Las cajas ahora son las preguntas. */ .kctp-cuest .kctp-tarjeta { background: none; box-shadow: none; border: 0; padding: 0; margin-bottom: 0; } /* Titulo del bloque, sobre el fondo hueso. */ .kctp-cuest .kctp-tarjeta > h2 { font-size: var(--kctp-t-display); line-height: var(--kctp-lh-display); letter-spacing: var(--kctp-ls-display); margin: 0 0 var(--kctp-e2); max-width: 20ch; text-wrap: balance; } .kctp-cuest .kctp-tarjeta > p.kctp-sub { font-size: var(--kctp-t-cuerpo); line-height: 1.5; max-width: 46ch; margin-bottom: var(--kctp-e6); } .kctp-cuest .kctp-aviso { margin-bottom: var(--kctp-e6); } /* --- Modo "una pregunta por pantalla" ------------------------------------- Aqui el titular de la pantalla ES la pregunta, asi que el nombre del bloque se retira a rotulo de apoyo y se lleva el contador a su misma linea: "Sobre ti - Pregunta 1 de 2". Dos rotulos de meta apilados eran dos lineas diciendo lo mismo. */ .kctp-modo-uno .kctp-cuest .kctp-tarjeta > h2 { font-family: var(--kctp-sans); font-size: var(--kctp-t-meta); font-weight: var(--kctp-peso-medio); line-height: 1.4; letter-spacing: 0; color: var(--kctp-tenue); max-width: none; margin-bottom: var(--kctp-e4); } .kctp-modo-uno .kctp-cuest .kctp-tarjeta > p.kctp-sub { display: none; } /* Y con una pregunta por pantalla el mapa de secciones se va del telefono: no es navegable (son , no enlaces) y lo unico que hace ahi es enumerar las ocho secciones que faltan, que es la sensacion que veniamos a quitar. En escritorio vuelve, porque alli tiene columna propia y deja de robarle sitio a la pregunta (seccion 6). */ .kctp-modo-uno .kctp-cuest .kctp-pasos { display: none; } .kctp-cuest .kctp-paso-cuenta { display: inline; font-size: inherit; color: var(--kctp-tenue-2); font-weight: var(--kctp-peso-normal); font-variant-numeric: tabular-nums; margin: 0; } .kctp-cuest .kctp-paso-cuenta::before { content: "\00B7"; margin: 0 .45em; color: var(--kctp-tenue-2); } /* "2 respuestas ya las teniamos de antes - Ver y corregir". Es informacion de servicio, no un estado de exito: fuera el panel verde. */ .kctp-cuest .kctp-ya-contestadas { background: none; padding: 0; margin: 0 0 var(--kctp-e4); font-size: var(--kctp-t-meta); color: var(--kctp-tenue); gap: .1rem .6rem; } .kctp-cuest .kctp-ya-contestadas .kctp-legal-mas { font-size: var(--kctp-t-meta); font-weight: var(--kctp-peso-normal); } /* --- La promesa ("puedes cerrar y volver") -------------------------------- Tiene que estar siempre, pero en voz baja. Y es el UNICO oro de la pantalla: mismo significado que las otras tres apariciones de oro del sistema -"de esto nos ocupamos nosotros"- y, al ser un icono con su texto al lado, la informacion no depende del color (WCAG 1.4.1). Sobre hueso el #9c7433 da 4.1:1, por encima del 3:1 que pide un grafico. */ .kctp-cuest .cq-promesa { display: flex; align-items: flex-start; gap: 10px; margin: var(--kctp-e5) 0 0; font-size: var(--kctp-t-meta); line-height: 1.5; /* En --kctp-tenue y no en --kctp-tenue-2: la base reserva ese segundo escalon para iconos y adornos, nunca para texto. */ color: var(--kctp-tenue); max-width: 46ch; } .kctp-cuest .cq-promesa i { color: var(--kctp-oro); font-size: 1.05rem; line-height: 1.25; flex: 0 0 auto; } /* -------------------------------------------------------------------------- 2. LA TARJETA DE PREGUNTA -------------------------------------------------------------------------- */ .kctp-cuest .kctp-pregunta, .kctp-cuest .kctp-uno .kctp-pregunta { background: var(--kctp-blanco); border: 0; border-bottom: 0; border-radius: var(--kctp-radio); box-shadow: var(--kctp-sombra); /* Padding IGUAL por los cuatro costados en el eje horizontal. El aire de abajo es un peldano mas que el de arriba porque el ojo lee un bloque como centrado cuando su base pesa un poco mas. */ padding: var(--cq-pad) var(--cq-pad) calc(var(--cq-pad) + 8px); margin: 0 0 var(--kctp-e4); max-width: var(--cq-caja); } /* Todo lo que va dentro respeta la medida de lectura. Y como la tarjeta mide exactamente medida + 2 x padding, "respetar la medida" y "llenar el ancho" son lo mismo: el aire queda simetrico sin que nadie tenga que cuadrarlo. */ .kctp-cuest .kctp-pregunta > * { max-width: var(--cq-medida); } /* El enunciado. En pila (varias preguntas a la vez) manda --kctp-t-titulo; cuando hay UNA sola en pantalla sube a display, porque es el titular. */ .kctp-cuest .kctp-pregunta > .kctp-etiqueta, .kctp-cuest .kctp-pregunta > label.kctp-etiqueta { font-family: var(--kctp-serif); font-weight: var(--kctp-peso-normal); font-size: var(--kctp-t-titulo); line-height: var(--kctp-lh-titulo); letter-spacing: var(--kctp-ls-titulo); color: var(--kctp-tinto); margin-bottom: var(--kctp-e3); text-wrap: balance; } .kctp-cuest .kctp-uno .kctp-pregunta > .kctp-etiqueta, .kctp-cuest .kctp-uno .kctp-pregunta > label.kctp-etiqueta { font-size: var(--cq-pregunta); line-height: var(--cq-lh-pregunta); letter-spacing: var(--cq-ls-pregunta); margin-bottom: var(--kctp-e3); } /* El asterisco de obligatoria pegado a un display de 40px se leia como parte del texto: se despega y se baja de tono. Pero NO en --kctp-tenue-2: ese escalon da 2.9:1 sobre blanco y el asterisco no es un adorno, es la unica marca visual de "esta hace falta". Con --kctp-tenue son 4.9:1 y pasa AA. (En la vuelta anterior salia rosa palido justamente por eso.) */ .kctp-cuest .kctp-obligatoria::after { content: " *"; color: var(--kctp-tenue); font-size: .55em; vertical-align: .5em; } .kctp-cuest .kctp-ayuda, .kctp-cuest .kctp-uno .kctp-ayuda { font-size: var(--kctp-t-cuerpo); line-height: 1.45; color: var(--kctp-tenue); margin: 0 0 var(--kctp-e5); max-width: 42ch; } /* -------------------------------------------------------------------------- 3. CONTROLES -------------------------------------------------------------------------- */ .kctp-cuest .kctp-opciones, .kctp-cuest .kctp-uno .kctp-opciones { gap: 10px; } .kctp-cuest .kctp-sino, .kctp-cuest .kctp-uno .kctp-sino { gap: 10px; grid-template-columns: 1fr 1fr; max-width: min(var(--cq-medida), 26rem); } .kctp-cuest .kctp-opcion, .kctp-cuest .kctp-uno .kctp-opcion { align-items: center; gap: var(--kctp-e3); padding: 16px 18px; min-height: 58px; /* --kctp-borde nace para separar del hueso; ahora la pregunta vive dentro de una tarjeta BLANCA y ahi se vuelve invisible: el control se lee como un hueco. La base ya tiene el token para este caso exacto. */ border: 1px solid var(--kctp-borde-c); border-radius: var(--cq-radio-op); font-size: var(--kctp-t-cuerpo); line-height: 1.35; color: var(--kctp-tinta); } .kctp-cuest .kctp-opcion:hover { border-color: var(--kctp-borde-f); background: var(--kctp-crema); } /* Lo elegido: borde vino de 2px (1px + anillo interior), fondo blanco. */ .kctp-cuest .kctp-opcion.elegida, .kctp-cuest .kctp-opcion:has(input:checked) { border-color: var(--kctp-acento); background: var(--kctp-blanco); box-shadow: inset 0 0 0 1px var(--kctp-acento); } .kctp-cuest .kctp-opcion input:checked + span { color: var(--kctp-tinto); font-weight: var(--kctp-peso-medio); } /* El control de serie del navegador es el detalle que mas delata una plantilla: se dibuja a mano, del tamano de la tipografia y en vino. Sigue siendo un de verdad, asi que teclado y lector de pantalla no se enteran del cambio. */ .kctp-cuest .kctp-opcion input[type="radio"], .kctp-cuest .kctp-opcion input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: 0 0 auto; /* El aro va en la tinta de apoyo y no en el borde de marca: un control necesita 3:1 contra el fondo (WCAG 2.2, no-texto) y el #dbc9d0 del borde se queda en 1.6:1. Con --kctp-tenue son 4.9:1. */ border: 1.5px solid var(--kctp-tenue); background: var(--kctp-blanco); transition: border-color var(--kctp-mov-hover), background var(--kctp-mov-hover), box-shadow var(--kctp-mov-hover); } .kctp-cuest .kctp-opcion input[type="radio"] { border-radius: 50%; } .kctp-cuest .kctp-opcion input[type="checkbox"] { border-radius: 7px; } .kctp-cuest .kctp-opcion input[type="radio"]:checked { border-color: var(--kctp-acento); background: var(--kctp-acento); box-shadow: inset 0 0 0 4px var(--kctp-blanco); } .kctp-cuest .kctp-opcion input[type="checkbox"]:checked { border-color: var(--kctp-acento); background: var(--kctp-acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 8.4l3 3 6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat; } /* Campos de escribir. */ .kctp-cuest .kctp-pregunta input[type="text"], .kctp-cuest .kctp-pregunta input[type="number"], .kctp-cuest .kctp-pregunta input[type="date"], .kctp-cuest .kctp-pregunta input[type="email"], .kctp-cuest .kctp-pregunta textarea, .kctp-cuest .kctp-pregunta select { border-radius: var(--cq-radio-op); border-color: var(--kctp-borde-c); /* mismo motivo que en .kctp-opcion */ padding: 14px 16px; min-height: 56px; font-size: var(--kctp-t-cuerpo); max-width: var(--cq-medida); } .kctp-cuest .kctp-pregunta textarea { min-height: 132px; line-height: 1.5; } /* Las flechitas de serie del campo numerico. Son el mismo caso que el circulo del radio: dibujo del navegador dentro de una tarjeta que ya esta hecha a mano, y se ven como lo que son. No se pierde ninguna forma de contestar -se escribe el numero, y las flechas del teclado siguen subiendo y bajando- y en el telefono nunca existieron. */ .kctp-cuest .kctp-pregunta input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .kctp-cuest .kctp-pregunta input[type="number"]::-webkit-outer-spin-button, .kctp-cuest .kctp-pregunta input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* El numero y su unidad son un solo control, no dos cosas sueltas. */ .kctp-cuest .kctp-campo-fila { display: flex; align-items: center; gap: var(--kctp-e3); } /* Con el nombre de la clase en el selector del campo: la regla de la base (.kctp-pregunta input[type="number"]) pone width:100% y pesa mas que una clase suelta. */ .kctp-cuest .kctp-pregunta input.kctp-campo-corto { width: 7.5rem; min-width: 0; } .kctp-cuest .kctp-pregunta input.kctp-campo-medio { width: 14rem; min-width: 0; } .kctp-cuest .kctp-sufijo { font-size: var(--kctp-t-cuerpo); color: var(--kctp-tenue); } /* Error: el aro se lo lleva la tarjeta entera, no solo el campo. */ .kctp-cuest .kctp-pregunta.con-error { box-shadow: inset 0 0 0 1px var(--kctp-alerta-bd), var(--kctp-sombra); } .kctp-cuest .kctp-error { margin-top: var(--kctp-e3); } /* -------------------------------------------------------------------------- 4. PIE DE LA PANTALLA Una sola rejilla para las DOS botoneras -la que arma el guion (.kctp-paso-botones) y la del servidor (.kctp-acciones)-, anclada a los mismos dos bordes que la tarjeta. Que se comportaran distinto era lo que hacia que la pantalla pareciera cambiar los botones de sitio al llegar a la ultima pregunta del bloque. VUELTA 3: LAS TRES PIEZAS VUELVEN A UNA SOLA LINEA. Hasta ahora "Seguir despues" caia en una segunda fila, y medido a 1440 quedaba solo, a 68px por debajo de "Atras" y contra el borde izquierdo: una linea con dos cosas y otra con una, que es exactamente la forma de un pie sin terminar. Las dos salidas son hermanas -las dos sacan de aqui- asi que van juntas a la izquierda, y el unico primario cierra por la derecha. columna 1 ......... "Atras": izquierda, pegado al borde de la tarjeta columna 2 ......... "Seguir despues", a su lado, en voz mas baja columna 4 ......... el primario: derecha, terminando en el borde derecho Tres piezas, UNA linea, dos bordes. Ni uno flotando en medio. (En el telefono manda el pulgar y la seccion 5 vuelve a partirla en dos filas: alli el primario se lleva la linea entera, que es lo unico que la critica dio por bueno.) -------------------------------------------------------------------------- */ .kctp-cuest .kctp-acciones, .kctp-cuest .kctp-paso-botones { /* Fuera la raya: del lado del paciente separa la sombra, no una linea. */ border-top: 0; padding-top: 0; margin-top: var(--kctp-e6); max-width: var(--cq-caja); display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; column-gap: var(--kctp-e3); row-gap: var(--kctp-e4); } .kctp-cuest .kctp-paso-botones button.kctp-btn-suave { grid-area: 1 / 1; justify-self: start; } .kctp-cuest .kctp-paso-botones > a { grid-area: 1 / 2; justify-self: start; } .kctp-cuest .kctp-paso-botones .kctp-btn-primario { grid-area: 1 / 4; justify-self: end; } /* En la fila del servidor "Atras" es un y solo existe a partir del segundo bloque; cuando no esta, el que queda es "Seguir despues", que nunca es el primer hijo (el boton va antes). Por eso :first-child es un selector seguro aqui y no hace falta una clase nueva. */ .kctp-cuest .kctp-acciones > a:first-child { grid-area: 1 / 1; justify-self: start; } .kctp-cuest .kctp-acciones > a:last-child { grid-area: 1 / 2; justify-self: start; } .kctp-cuest .kctp-acciones > button { grid-area: 1 / 4; justify-self: end; } .kctp-cuest .kctp-paso-botones .kctp-btn-primario, .kctp-cuest .kctp-acciones .kctp-btn-primario { min-height: 54px; font-size: var(--kctp-t-cuerpo); } /* Una sola cosa con pinta de boton por pantalla. "Atras" es una salida, no una propuesta: se queda en texto para que el ojo vaya directo a "Siguiente". Se apunta al