/* Etapa Producto y oferta: Producto principal (documento), Estilo y portada, vista del documento e impresión en PDF. */

/* ---------- Comunes ---------- */
.pila-avisos { display: flex; flex-direction: column; gap: 10px; }
.pila-avisos:empty { display: none; }
.panel__titulo { font-size: 15px; font-weight: var(--mp-font-weight-semibold); }
.panel__hueco { flex: 1; }
.fila-botones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.resumen-producto { margin-top: -12px; }
.etiqueta-borde--mini { height: 20px; padding: 0 6px; font-size: 11.5px; }
.muestras { display: inline-flex; gap: 4px; align-items: center; }
.muestra { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--mp-color-border-strong); flex: none; }
.muestra--grande { width: 22px; height: 22px; border-radius: 6px; }

/* ---------- Producto principal ---------- */
.fila-tipo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rejilla-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; }

.ajustes-doc { padding: 0; }
.ajustes-doc__resumen { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; min-height: 48px; border-radius: var(--mp-radius-lg); }
.ajustes-doc__resumen::-webkit-details-marker { display: none; }
@media (hover: hover) { .ajustes-doc__resumen:hover { background: var(--mp-color-surface-hover); } }
.ajustes-doc__resumen:focus-visible { outline: 2px solid var(--mp-color-focus); outline-offset: 2px; }
.ajustes-doc__titulo { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--mp-font-weight-semibold); }
.ajustes-doc__sumario { flex: 1; color: var(--mp-color-text-secondary); font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ajustes-doc__flecha { display: flex; transition: transform var(--mp-duration-base) var(--mp-ease-standard); color: var(--mp-color-text-secondary); }
.ajustes-doc[open] .ajustes-doc__flecha { transform: rotate(180deg); }
.ajustes-doc__cuerpo { display: flex; flex-direction: column; gap: 16px; padding: 4px 16px 18px; border-top: 1px solid var(--mp-color-border); padding-top: 16px; }

.doc-trabajo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1200px) { .doc-trabajo { grid-template-columns: 360px minmax(0, 1fr); } }
@media (min-width: 768px) and (max-width: 1199px) { .doc-trabajo { grid-template-columns: 300px minmax(0, 1fr); } }

/* Índice */
.panel-indice { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
@media (min-width: 768px) { .panel-indice { position: sticky; top: calc(var(--mp-topbar-height) + 12px); max-height: calc(100vh - var(--mp-topbar-height) - 24px); overflow: auto; } }
.panel-indice .vacio--seccion { padding: 28px 8px; }
.panel-indice__cabecera { display: flex; align-items: center; gap: 8px; }
.panel-indice__pie { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--mp-color-border); padding-top: 10px; font-size: 12px; }
.lista-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fila-cap { display: grid; grid-template-columns: 16px 22px minmax(0, 1fr) auto; grid-template-areas: "asa num titulo estado" ". . acciones acciones"; align-items: center; gap: 2px 8px; padding: 6px 6px 4px; border-radius: var(--mp-radius-md); border: 1px solid transparent; }
.fila-cap.is-seleccionada { background: var(--mp-color-primary-soft); }
.fila-cap.is-destino { border-color: var(--mp-color-primary); border-style: dashed; }
.fila-cap.is-arrastrando { opacity: .5; }
@media (hover: hover) { .fila-cap:not(.is-seleccionada):hover { background: var(--mp-color-surface-hover); } }
.fila-cap__asa { grid-area: asa; color: var(--mp-color-text-tertiary); cursor: grab; display: flex; }
.fila-cap__num { grid-area: num; width: 22px; height: 22px; border-radius: 50%; background: var(--mp-color-surface-sunken); color: var(--mp-color-text-secondary); font-size: 11.5px; display: flex; align-items: center; justify-content: center; }
.fila-cap__titulo { grid-area: titulo; min-width: 0; border: none; background: none; text-align: left; padding: 2px 0; cursor: pointer; color: inherit; display: flex; flex-direction: column; gap: 3px; border-radius: var(--mp-radius-sm); }
.fila-cap__titulo:focus-visible { outline: 2px solid var(--mp-color-focus); outline-offset: 2px; }
.fila-cap__nombre { font-size: 14px; font-weight: var(--mp-font-weight-medium); line-height: 1.35; }
.fila-cap.is-seleccionada .fila-cap__nombre { font-weight: var(--mp-font-weight-semibold); }
.fila-cap__sub { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--mp-color-text-tertiary); flex-wrap: wrap; }
.fila-cap__estado { grid-area: estado; display: flex; gap: 6px; align-items: center; }
.fila-cap__aviso { display: inline-flex; gap: 2px; align-items: center; color: var(--mp-color-warning-text); font-size: 11.5px; }
.fila-cap__acciones { grid-area: acciones; display: none; justify-content: flex-end; gap: 0; }
/* Las flechas y el menú se ven en el capítulo elegido y al llegar con el teclado (en el móvil, siempre). */
.fila-cap.is-seleccionada .fila-cap__acciones, .fila-cap:focus-within .fila-cap__acciones { display: flex; }
.panel-indice__todo { width: 100%; justify-content: center; }
.fila-cap__acciones .btn-icono { width: 32px; height: 32px; }
.pildora--boton { border: none; cursor: pointer; gap: 4px; font: inherit; font-size: 12px; font-weight: 600; }
.fila-cap .pildora .spinner { border-width: 1.5px; }

/* Capítulo */
.panel-capitulo { display: flex; flex-direction: column; gap: 14px; padding: 16px; min-height: 320px; }
.panel-capitulo__vacio { margin: auto; text-align: center; max-width: 340px; }
.panel-capitulo__cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel-capitulo__titulos { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.panel-capitulo__titulo { font-size: var(--mp-font-size-xl); line-height: var(--mp-line-height-xl); font-weight: var(--mp-font-weight-semibold); letter-spacing: -0.01em; }
.panel-capitulo__herramientas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel-capitulo__sin-texto { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 24px 0; }
.panel-capitulo__cargando { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; }
.panel-capitulo__previa { border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-md); background: #FFFFFF; color: #1B1B1B; padding: 28px clamp(16px, 5%, 48px); max-height: 70vh; overflow: auto; }

.editor-cap { display: flex; flex-direction: column; border: 1px solid var(--mp-color-border-field); border-radius: var(--mp-radius-md); overflow: hidden; }
.editor-cap:focus-within { border-color: var(--mp-color-primary); box-shadow: 0 0 0 3px var(--mp-color-focus-ring); }
.editor-cap__barra { display: flex; gap: 2px; flex-wrap: wrap; padding: 4px; background: var(--mp-color-surface-sunken); border-bottom: 1px solid var(--mp-color-border); }
.editor-cap__herramienta { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: none; background: transparent; border-radius: var(--mp-radius-sm); color: var(--mp-color-text-secondary); font-size: 13px; cursor: pointer; }
@media (hover: hover) { .editor-cap__herramienta:hover { background: var(--mp-color-surface); color: var(--mp-color-text); } }
.editor-cap__herramienta:focus-visible { outline: 2px solid var(--mp-color-focus); outline-offset: -2px; }
.editor-cap__area.campo__input { border: none; border-radius: 0; box-shadow: none; min-height: 420px; height: 55vh; padding: 14px 16px; font-family: var(--mp-font-mono); font-size: 13.5px; line-height: 1.6; resize: vertical; }
.editor-cap__area.campo__input:focus { box-shadow: none; }

.regenerar { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--mp-color-border); }
.regenerar > .fila-campo-boton { flex: 1 1 360px; }

.comprobacion { display: flex; flex-direction: column; gap: 8px; }
.comprobacion:empty { display: none; }
.comprobacion__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.comprobacion__frase { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--mp-radius-md); background: var(--mp-color-surface-sunken); font-size: 13.5px; line-height: 1.45; }
.comprobacion__frase > span:first-child { flex: 1 1 280px; }
.comprobacion__acciones { display: flex; gap: 6px; flex-wrap: wrap; }

.fuentes-cap { display: flex; flex-direction: column; gap: 8px; }
.fuentes-cap__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fuentes-cap__cabecera h4 { font-size: 14px; font-weight: var(--mp-font-weight-semibold); }
.fuentes-cap__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fuentes-cap__lista li { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* ---------- Documento (vista previa e impresión) ---------- */
.md { font-family: var(--imp-texto, var(--mp-font-sans)); font-size: 15px; line-height: 1.65; }
.md > * + * { margin-top: .8em; }
.md h1, .md h2, .md h3 { font-family: var(--imp-titulos, var(--mp-font-sans)); line-height: 1.2; color: var(--imp-principal, inherit); margin-top: 1.4em; }
.md h1 { font-size: 1.9em; } .md h2 { font-size: 1.4em; } .md h3 { font-size: 1.15em; }
.md > :first-child { margin-top: 0; }
.md ul, .md ol { padding-left: 1.4em; }
.md li + li { margin-top: .3em; }
.md a { color: var(--imp-principal, var(--mp-color-primary-text)); }
.md blockquote { border-left: 3px solid var(--imp-acento, var(--mp-color-border-strong)); padding: .2em 0 .2em 1em; font-style: italic; }
.md hr { border: none; border-top: 1px solid #DDD; }
.md-consejo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: color-mix(in srgb, var(--imp-acento, #E07A3F) 14%, #FFFFFF); border-left: 4px solid var(--imp-acento, #E07A3F); }
.md-consejo__icono { display: flex; color: var(--imp-acento, #E07A3F); margin-top: 3px; }
.md-consejo p { margin: 0; }
.md-tabla { overflow-x: auto; }
.md table { border-collapse: collapse; width: 100%; font-size: .93em; }
.md th, .md td { border: 1px solid #D9D6CF; padding: 6px 10px; text-align: left; vertical-align: top; }
.md th { background: color-mix(in srgb, var(--imp-principal, #2F6B4F) 12%, #FFFFFF); font-weight: 600; }
.vista-doc { font-family: var(--imp-texto, var(--mp-font-sans)); }
.imp-capitulo__numero { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--imp-acento, #E07A3F); font-weight: 600; font-family: var(--imp-texto, var(--mp-font-sans)); }
.imp-capitulo__titulo { font-family: var(--imp-titulos, Georgia, serif); font-size: 30px; line-height: 1.15; color: var(--imp-principal, #2F6B4F); margin: 6px 0 18px; }
.imp-fuentes { margin-top: 28px; padding-top: 12px; border-top: 1px solid #DDD; font-size: 12.5px; color: #555; }
.imp-fuentes h3 { font-size: 13px; margin-bottom: 6px; color: #333; }
.imp-fuentes ol { padding-left: 1.4em; }
.imp-fuentes__url { word-break: break-all; color: #777; }

/* ---------- Estilo y portada ---------- */
.bloque-portada { display: flex; flex-direction: column; gap: 14px; }
.bloque-portada[hidden] { display: none; }
.bloque-portada__cabecera { display: flex; gap: 12px 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.bloque-portada__cabecera > div:first-child { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; }
.bloque-portada__titulo { font-size: 16px; font-weight: var(--mp-font-weight-semibold); }

.rejilla-refs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ref-portada { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ref-portada__imagen { aspect-ratio: 2 / 3; border-radius: var(--mp-radius-sm); overflow: hidden; background: var(--mp-color-surface-sunken); border: 1px solid var(--mp-color-border); }
.ref-portada__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-portada__textos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ref-portada__titulo { font-size: 13px; font-weight: var(--mp-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-portada__origen { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ref-portada__quitar { position: absolute; top: 6px; right: 6px; background: var(--mp-color-surface-raised); box-shadow: var(--mp-shadow-1); width: 32px; height: 32px; }
.ficha-portada { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 11.5px; margin: 0; }
.ficha-portada dt { color: var(--mp-color-text-tertiary); }
.ficha-portada dd { margin: 0; color: var(--mp-color-text-secondary); }

.informe-portadas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.informe-portadas__columna { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--mp-radius-md); background: var(--mp-color-surface-sunken); }
.informe-portadas__columna h4 { display: flex; gap: 6px; align-items: center; font-size: 13.5px; font-weight: var(--mp-font-weight-semibold); }

.rejilla-estilos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.estilo-tarjeta { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-lg); background: var(--mp-color-surface); }
.estilo-tarjeta.is-elegido { border-color: var(--mp-color-primary); box-shadow: 0 0 0 3px var(--mp-color-focus-ring); }
.estilo-tarjeta__muestra { height: 96px; border-radius: var(--mp-radius-md); display: flex; align-items: flex-end; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--mp-color-border); }
.estilo-tarjeta__aa { font-size: 40px; line-height: 1; font-weight: 700; }
.estilo-tarjeta__textos { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.45; flex: 1; }
.estilo-tarjeta__mejora { display: flex; gap: 6px; align-items: flex-start; color: var(--mp-color-success-text); font-size: 13px; }
.estilo-tarjeta__mejora .icono { flex: none; margin-top: 2px; }
.estilo-tarjeta > .btn { align-self: flex-start; }

.editor-estilo summary { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: 13.5px; font-weight: var(--mp-font-weight-semibold); color: var(--mp-color-primary-text); min-height: 32px; }
.editor-estilo__cuerpo { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.colores-estilo { display: flex; gap: 14px; flex-wrap: wrap; }
.colores-estilo__color { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 12px; color: var(--mp-color-text-secondary); cursor: pointer; }
.colores-estilo__input { width: 48px; height: 48px; padding: 0; border: 1px solid var(--mp-color-border-strong); border-radius: var(--mp-radius-md); background: none; cursor: pointer; }

.editor-portada { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 768px) { .editor-portada { grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); } }
.editor-portada__vista { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.editor-portada__lienzo { width: 100%; max-width: 340px; aspect-ratio: 2 / 3; height: auto; border-radius: 4px; box-shadow: var(--mp-shadow-2); touch-action: none; cursor: ns-resize; background: var(--mp-color-surface-sunken); }
.editor-portada__lienzo.is-arrastrando { cursor: grabbing; }
.editor-portada__controles { display: flex; flex-direction: column; gap: 18px; }
.editor-portada__imagen { padding-top: 16px; border-top: 1px solid var(--mp-color-border); }
.deslizador { width: 100%; accent-color: var(--mp-color-primary); height: 32px; }

.control-portada { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--mp-color-border); }
.control-portada__cabecera { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.control-portada__detalle { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; }
.control-portada__detalle--columna { flex-direction: column; }
.control-portada__mini { width: 56px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; border: 1px solid var(--mp-color-border); }

.tienda { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; background: var(--mp-color-surface-sunken); border-radius: var(--mp-radius-md); }
.tienda__producto { display: flex; flex-direction: column; gap: 6px; }
.tienda__imagen { aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--mp-color-border); }
.tienda__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tienda__producto.is-mia .tienda__imagen { outline: 2px solid var(--mp-color-primary); outline-offset: 2px; }
.tienda__nombre { font-size: 12px; color: var(--mp-color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tienda__producto.is-mia .tienda__nombre { color: var(--mp-color-primary-text); font-weight: var(--mp-font-weight-semibold); }

.descargas-portada { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.descargas-portada li { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
  .editor-cap__herramienta span { display: none; }
  .editor-cap__herramienta { width: 44px; height: 44px; justify-content: center; padding: 0; }
  .editor-cap__area.campo__input { font-size: 16px; min-height: 320px; height: 60vh; }
  .fila-cap__acciones { display: flex; }
  .fila-cap__acciones .btn-icono { width: 44px; height: 44px; }
  .fila-cap__asa { display: none; }
  .fila-cap { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "num titulo estado" ". acciones acciones"; }
  .panel-capitulo__previa { padding: 18px 14px; }
  .resumen-producto { margin-top: -8px; }
  .descargas-portada .btn { width: 100%; justify-content: center; }
  .descargas-portada li { align-items: stretch; }
}

/* ---------- Impresión (PDF) ---------- */
.impresion { display: none; }
/* Para medir cada capítulo con el ancho real del papel antes de imprimir. */
.impresion.is-midiendo { display: block; position: absolute; left: -10000px; top: 0; width: var(--imp-ancho, 170mm); background: #FFFFFF; color: #1B1B1B; }
.impresion.is-midiendo > section:not(.imp-capitulo) { display: none; }
.impresion { font-family: var(--imp-texto, system-ui, sans-serif); color: #1B1B1B; }
.impresion .md { font-size: 11pt; line-height: 1.55; }
.impresion .imp-capitulo__titulo { font-size: 24pt; }

@media print {
  body.imprimiendo > *:not(#impresion) { display: none !important; }
  html[data-theme], html, body.imprimiendo { background: #FFFFFF !important; color-scheme: light !important; }
  .impresion { display: block; }
  .imp-portada { page: portada; break-after: page; height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; }
  .imp-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Alto fijo del área de la página (lo pone pdf.js): los créditos nunca se parten en dos páginas. */
  .imp-creditos { page: creditos; break-after: page; break-inside: avoid; box-sizing: border-box; height: calc(var(--imp-alto, 250mm) - 4mm); display: flex; flex-direction: column; justify-content: flex-end; gap: 8pt; font-size: 9.5pt; color: #444; }
  .imp-creditos__titulo { font-family: var(--imp-titulos, Georgia, serif); font-size: 16pt; color: #1B1B1B; }
  .imp-creditos__aviso { padding: 8pt 10pt; border: 1px solid #CCC; border-radius: 4pt; }
  /* Un poco de aire arriba: si no, los acentos del título asoman en el pie de la página anterior. */
  .imp-indice { break-after: page; padding-top: 4pt; }
  .imp-indice h1 { margin-top: 0; line-height: 1.25; }
  .imp-indice h1 { font-family: var(--imp-titulos, Georgia, serif); font-size: 24pt; color: var(--imp-principal, #2F6B4F); margin-bottom: 18pt; }
  .imp-indice ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9pt; font-size: 11.5pt; }
  .imp-indice li { display: flex; align-items: baseline; gap: 6pt; }
  .imp-indice__puntos { flex: 1; border-bottom: 1px dotted #999; transform: translateY(-3pt); }
  .imp-capitulo { break-before: page; padding-top: 4pt; }
  .impresion h1, .impresion h2, .impresion h3, .imp-capitulo__numero { break-after: avoid; break-inside: avoid; }
  .impresion table, .impresion tr, .impresion .md-consejo, .impresion blockquote, .impresion li, .impresion img { break-inside: avoid; }
  .impresion p { orphans: 3; widows: 3; }
  .impresion .md-tabla { overflow: visible; }
  .impresion a { color: inherit; text-decoration: none; }
  .impresion * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}