/* Etapa 5: páginas del embudo (venta, oferta posterior, alternativa y gracias). */

/* ---------- Crear ---------- */
.crear-pagina__tarjeta { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.crear-pagina__textos h3 { margin: 0 0 4px; font-size: var(--mp-font-size-xl); }
.crear-pagina__textos p { margin: 0 0 4px; }
.crear-pagina { display: grid; gap: 16px; }
@media (min-width: 1200px) { .crear-pagina { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.crear-pagina .segmentado { flex-wrap: wrap; }

/* ---------- Comprobaciones ---------- */
.paginas-avisos:empty { display: none; }
.comprobaciones { padding: 0; border-color: var(--mp-color-warning); background: var(--mp-color-warning-soft); box-shadow: none; }
.comprobaciones__resumen { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; color: var(--mp-color-warning-text); }
.comprobaciones__resumen::-webkit-details-marker { display: none; }
.comprobaciones[open] .comprobaciones__resumen > :last-child { transform: rotate(180deg); }
.comprobaciones .lista-icono { padding: 0 14px 12px; margin: 0; }

/* ---------- Editor: secciones + vista previa ---------- */
.editor-pagina { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1200px) { .editor-pagina { grid-template-columns: 270px minmax(0, 1fr); } }
.secciones-pagina { padding: 0; overflow: hidden; }
@media (min-width: 1200px) { .secciones-pagina { position: sticky; top: calc(var(--mp-topbar-height) + 12px); max-height: calc(100vh - var(--mp-topbar-height) - 24px); overflow-y: auto; } }
.secciones-pagina__cabecera { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; border-bottom: 1px solid var(--mp-color-border); }
.secciones-pagina__cabecera::-webkit-details-marker { display: none; }
.secciones-pagina__ayuda { font-size: 11.5px; }
.secciones-pagina__flecha { display: inline-flex; transition: transform var(--mp-duration-fast); }
.secciones-pagina__plegable[open] .secciones-pagina__flecha { transform: rotate(180deg); }
@media (min-width: 1200px) { .secciones-pagina__flecha { display: none; } .secciones-pagina__cabecera { cursor: default; } }
.secciones-pagina__pie { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-top: 1px solid var(--mp-color-border); }

.lista-secciones { list-style: none; margin: 0; padding: 4px; }
.lista-secciones__fila { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 6px; border-radius: var(--mp-radius-md); border: 1px solid transparent; }
@media (hover: hover) { .lista-secciones__fila:hover { background: var(--mp-color-surface-hover); } }
.lista-secciones__fila.is-oculta .lista-secciones__nombre { opacity: 0.5; }
.lista-secciones__fila.is-oculta .lista-secciones__titulo { text-decoration: line-through; }
.lista-secciones__fila.is-arrastrando { opacity: 0.5; }
.lista-secciones__fila.is-destino { border-color: var(--mp-color-primary); background: var(--mp-color-primary-soft); }
.lista-secciones__asa { color: var(--mp-color-text-tertiary); cursor: grab; display: inline-flex; }
.lista-secciones__num { width: 18px; text-align: right; font-size: 11.5px; color: var(--mp-color-text-tertiary); flex: none; }
.lista-secciones__nombre { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 6px; background: none; border: 0; border-radius: var(--mp-radius-sm); color: inherit; text-align: left; cursor: pointer; font: inherit; }
.lista-secciones__nombre:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); }
.lista-secciones__titulo { font-size: 13.5px; font-weight: var(--mp-font-weight-semibold); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-secciones__tipo { font-size: 11.5px; color: var(--mp-color-text-tertiary); }
.lista-secciones__aviso { color: var(--mp-color-warning); display: inline-flex; flex: none; }
.lista-secciones__fila .btn-icono { width: 30px; height: 30px; flex: none; }
/* Las flechas solo se ven en pantallas táctiles o al pasar el ratón (el arrastre no funciona con el dedo). */
@media (hover: hover) and (pointer: fine) { .lista-secciones__flecha { display: none; } .lista-secciones__fila:hover .lista-secciones__flecha, .lista-secciones__fila:focus-within .lista-secciones__flecha { display: inline-flex; } }
@media (max-width: 767px) { .lista-secciones__fila .btn-icono { width: 40px; height: 40px; } .lista-secciones__asa { display: none; } }

.vista-pagina { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.barra-vista { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.barra-vista__grupo { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.barra-vista__grupo .segmentado { flex: 0 1 auto; min-width: 0; }
.barra-vista__etiqueta { font-size: 12.5px; font-weight: var(--mp-font-weight-semibold); color: var(--mp-color-text-secondary); }
.barra-vista .segmentado { max-width: 100%; overflow-x: auto; }
.vista-pagina__caja { container-type: inline-size; background: var(--mp-color-surface-sunken); border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-lg); padding: 0; overflow: hidden; display: flex; justify-content: center; }
.vista-pagina__marco { display: block; width: 100%; height: min(78vh, 820px); border: 0; background: #FFFFFF; }
.vista-pagina__caja.is-movil { padding: 16px 0; }
.vista-pagina__caja.is-movil .vista-pagina__marco { width: 375px; max-width: 100%; height: min(78vh, 760px); border-radius: 22px; box-shadow: var(--mp-shadow-2); border: 6px solid var(--mp-color-text); }
@media (max-width: 767px) { .vista-pagina__caja.is-movil { padding: 0; } .vista-pagina__caja.is-movil .vista-pagina__marco { width: 100%; border: 0; border-radius: 0; box-shadow: none; height: 70vh; } }

/* ---------- Paneles ---------- */
.paneles-pagina { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.panel-pagina { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0; }
.panel-pagina--ancho { grid-column: 1 / -1; }
@media (min-width: 1200px) { .panel-pagina--alto { grid-row: span 2; } }
.panel-pagina__cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; }
.panel-pagina__titulo { margin: 0; font-size: var(--mp-font-size-lg); font-weight: var(--mp-font-weight-semibold); }
.panel-pagina__ayuda { margin: 0; font-size: 13px; }
.panel-pagina .interruptor { align-items: center; }
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px; }

/* Titulares 4U */
.titulares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.titular { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 12px; align-items: center; padding: 6px 8px; border-radius: var(--mp-radius-md); border: 1px solid transparent; }
.titular.is-elegido { background: var(--mp-color-primary-soft); border-color: var(--mp-color-primary); }
.titular.is-b { border-color: var(--mp-color-info); border-style: dashed; }
@media (hover: hover) { .titular:not(.is-elegido):hover { background: var(--mp-color-surface-hover); } }
.titular__elegir { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; background: none; border: 0; padding: 4px 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--mp-radius-sm); }
.titular__elegir:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); }
.titular__radio { flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--mp-color-border-field); }
.titular.is-elegido .titular__radio { border: 5px solid var(--mp-color-primary); }
.titular__texto { font-size: 14.5px; font-weight: var(--mp-font-weight-medium); line-height: 1.4; text-wrap: pretty; }
.titular__tipo { padding-left: 26px; font-size: 12px; color: var(--mp-color-text-tertiary); }
.titular__4u { display: inline-flex; gap: 6px; align-items: flex-end; }
.titular__barra { position: relative; width: 26px; height: 20px; display: inline-flex; flex-direction: column; justify-content: flex-end; border-radius: 3px; background: var(--mp-color-surface-sunken); overflow: hidden; }
.titular__barra::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v, 0) * 25%); background: var(--mp-color-primary); opacity: 0.55; }
.titular__barra-letra { position: relative; font-size: 9.5px; font-weight: var(--mp-font-weight-semibold); text-align: center; line-height: 12px; color: var(--mp-color-text); }
.titular__total { font-size: 13px; font-weight: var(--mp-font-weight-semibold); min-width: 42px; text-align: right; }
.titular__total--verde { color: var(--mp-color-success-text); }
.titular__total--ambar { color: var(--mp-color-warning-text); }
.titular__total--rojo { color: var(--mp-color-error-text); }
.titular .btn-icono { width: 32px; height: 32px; }
@media (max-width: 767px) { .titular { grid-template-columns: minmax(0, 1fr) auto auto; } .titular__tipo { grid-column: 1 / -1; } .titular .btn-icono { width: 44px; height: 44px; } }
.leyenda-4u { margin: 0; font-size: 12px; }

/* Llamadas a la acción */
.llamadas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.llamada { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--mp-radius-md); background: var(--mp-color-surface-sunken); font-size: 14px; }
.llamada span:nth-child(2) { flex: 1; }
.llamada.is-ok > svg { color: var(--mp-color-success); }
.llamada.is-falta > svg { color: var(--mp-color-warning); }

/* Oferta */
.recibe { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--mp-color-border); padding-top: 12px; }
.recibe__cabecera { display: flex; align-items: center; gap: 8px; }
.recibe__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.recibe__lista li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.recibe__lista li > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.recibe p { margin: 0; font-size: 12.5px; }

/* Urgencia */
.urgencia-panel { display: flex; flex-direction: column; gap: 12px; }
.urgencia-panel p { margin: 0; }
.urgencia-panel__tipos { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--mp-radius-md); background: var(--mp-color-surface-sunken); }
.urgencia-panel__sub { padding-left: 28px; display: flex; flex-direction: column; gap: 6px; }
.urgencia-panel__textos ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--mp-color-text-secondary); }
.urgencia-panel .segmentado { flex-wrap: wrap; }

/* Quiz */
.quiz-panel { display: flex; flex-direction: column; gap: 12px; }
.quiz-panel__preguntas { margin: 0; padding-left: 22px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.quiz-pregunta { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-md); }
.quiz-pregunta__cabecera { display: flex; gap: 6px; align-items: center; }
.quiz-pregunta__cabecera input { font-weight: var(--mp-font-weight-semibold); }
.quiz-pregunta__opciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.quiz-pregunta__opciones li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px) auto; gap: 6px; align-items: center; }
.quiz-panel__perfil { height: var(--mp-control-height-md); }
.quiz-panel__subtitulo { margin: 4px 0 0; font-size: var(--mp-font-size-md); }
.quiz-panel__resultados { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.quiz-resultado { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--mp-radius-md); background: var(--mp-color-surface-sunken); }
.quiz-resultado .etiqueta-borde { align-self: flex-start; }
.captacion { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--mp-color-border); padding-top: 12px; }
@media (max-width: 767px) { .quiz-pregunta__opciones li { grid-template-columns: minmax(0, 1fr) auto; } .quiz-pregunta__opciones li select { grid-column: 1 / 2; } }

/* Originalidad */
.tramos { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.tramos q { font-style: italic; }
.originalidad-panel { display: flex; flex-direction: column; gap: 8px; }
.originalidad-panel p { margin: 0; }
.subtitulo-modal { font-size: var(--mp-font-size-md); margin: 16px 0 6px; }

/* Análisis previo */
.referencias-pagina { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.referencia-pagina { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-md); }
.referencia-pagina__capturas { position: relative; display: flex; align-items: flex-end; gap: 6px; }
.referencia-pagina__capturas img { width: 78%; border-radius: 6px; border: 1px solid var(--mp-color-border); background: var(--mp-color-surface-sunken); }
.referencia-pagina__capturas .referencia-pagina__movil { width: 20%; }
.ficha-pagina { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 6px 0 0; font-size: 12.5px; }
.ficha-pagina dt { color: var(--mp-color-text-tertiary); }
.ficha-pagina dd { margin: 0; }
.informe-paginas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.informe-paginas h4, .estructura-recomendada h4 { margin: 0 0 6px; font-size: var(--mp-font-size-md); }
.estructura-recomendada ol { margin: 0; padding-left: 20px; font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; }

/* ---------- Editor de sección (modal) ---------- */
.editor-seccion { display: flex; flex-direction: column; gap: 14px; }
.editor-seccion__area { min-height: 220px; resize: vertical; font-family: var(--mp-font-mono); font-size: 13.5px; line-height: 1.55; }
.editor-seccion__formato { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-bottom: 6px; }
.editor-seccion__ayuda { font-size: 12px; margin-left: 8px; }
.editor-seccion__repetidas { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--mp-color-warning-text); }
.editor-seccion__repetidas[hidden] { display: none; }
.editor-seccion__ia { flex-wrap: wrap; }
.editor-seccion__versiones { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.conectores summary { cursor: pointer; font-size: 13px; font-weight: var(--mp-font-weight-semibold); display: inline-flex; align-items: center; gap: 6px; color: var(--mp-color-text-secondary); }
.conectores__grupos { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.conectores__grupo { display: flex; flex-direction: column; gap: 4px; }
.conectores__nombre { font-size: 12px; color: var(--mp-color-text-tertiary); }
.conectores__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 28px; padding: 0 10px; border-radius: var(--mp-radius-full); border: 1px solid var(--mp-color-border); background: var(--mp-color-surface); color: var(--mp-color-text); font: inherit; font-size: 13px; cursor: pointer; }
@media (hover: hover) { .chip:hover { background: var(--mp-color-primary-soft); border-color: var(--mp-color-primary); } }
.chip:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); }
@media (max-width: 767px) { .chip { height: 40px; } }
.revision-copy { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--mp-radius-md); background: var(--mp-color-info-soft); }
.revision-copy p { margin: 0; }
.revision-copy__cabecera { display: flex; align-items: center; }
.mejora { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: var(--mp-radius-md); background: var(--mp-color-surface); }
.mejora .btn { align-self: flex-start; }
.mejora__antes { text-decoration: line-through; text-decoration-color: var(--mp-color-text-tertiary); color: var(--mp-color-text-secondary); }