@font-face {
  font-family: "Midad Uthman";
  src: url("/fonts/KFGQPC-Uthmanic-Script-HAFS.woff2") format("woff2"),
       local("KFGQPC Uthmanic Script HAFS"),
       local("KFGQPC HAFS Uthmanic Script Regular");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Midad Tanseek";
  src: local("Tanseek Modern Pro Arabic"), local("Tanseek Modern Pro");
  font-display: swap;
}
@font-face {
  font-family: "KFGQPC Alphabet Dotted";
  src: url("/fonts/kfgqpc-alphabet-dotted.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Midad Dotted";
  src: url("/fonts/kfgqpc-alphabet-dotted.ttf") format("truetype"),
       local("KFGQPC Alphabet Dotted");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --arabic-ui: "Midad Tanseek", "Segoe UI", Arial, sans-serif;
  --arabic-text: "Midad Uthman", "Traditional Arabic", serif;
  --arabic-dotted: "Midad Dotted", "Midad Uthman", serif;
}

.page-canvas {
  position: relative;
  width: 210mm;
  height: 297mm;
  min-height: 297mm;
  padding: 14mm 13mm 12mm;
  overflow: hidden;
  color: #173b57;
  background: var(--paper, #fffefa);
  font-family: var(--arabic-text);
}
.page-canvas::before { display: none !important; content: none !important; }
.page-canvas.page-letter { width: 215.9mm; height: 279.4mm; min-height: 279.4mm; }
.page-canvas.page-shamail { width: 240mm; height: 340mm; min-height: 340mm; }
.page-canvas.page-mushaf { width: 190mm; height: 270mm; min-height: 270mm; }
.page-canvas.page-landscape { width: 297mm; height: 210mm; min-height: 210mm; }
.page-canvas.page-letter.page-landscape { width: 279.4mm; height: 215.9mm; min-height: 215.9mm; }
.page-canvas.page-shamail.page-landscape { width: 340mm; height: 240mm; min-height: 240mm; }
.page-canvas.page-mushaf.page-landscape { width: 270mm; height: 190mm; min-height: 190mm; }
.sheet-heading { display: flex; align-items: start; justify-content: space-between; gap: 8mm; margin-bottom: 8mm; }
.sheet-heading .eyebrow {
  color: var(--page-eyebrow-color, var(--style-eyebrow-color, var(--coral, #ed7464)));
  font-family: var(--page-eyebrow-font, var(--style-eyebrow-font, var(--arabic-ui)));
  font-size: var(--page-eyebrow-size, var(--style-eyebrow-size, 10pt));
  font-weight: var(--page-eyebrow-weight, var(--style-eyebrow-weight, 600));
  line-height: var(--page-eyebrow-line, var(--style-eyebrow-line, 1.2));
  text-align: var(--page-eyebrow-align, var(--style-eyebrow-align, start));
}
.sheet-heading h1 {
  margin: 2mm 0 0;
  white-space: pre-line;
  color: var(--page-title-color, var(--style-page-title-color, #173b57));
  font-family: var(--page-title-font, var(--style-page-title-font, var(--arabic-ui)));
  font-size: var(--page-title-size, var(--style-page-title-size, 27pt));
  font-weight: var(--page-title-weight, var(--style-page-title-weight, 700));
  line-height: var(--page-title-line, var(--style-page-title-line, 1.15));
  text-align: var(--page-title-align, var(--style-page-title-align, start));
}
.instruction-title,
.theory-title { white-space: pre-line; }
.lesson-number {
  display: grid; width: 12mm; height: 12mm; place-items: center; border-radius: 3mm;
  color: #fff; background: #173b57; font: 13pt var(--arabic-ui);
}
.page-block {
  margin: 0 0 5mm;
  text-align: var(--direct-text-align, var(--block-text-align, start));
}
.native-canvas .direct-editable {
  border-radius: 1.2mm;
  cursor: text;
  outline: .35mm solid transparent;
  outline-offset: 1mm;
  transition: outline-color .15s ease, background-color .15s ease;
}
.native-canvas .direct-editable:hover { outline-color: rgba(31, 92, 77, .28); }
.native-canvas .direct-editable:focus {
  outline-color: #2f806d;
  background-color: rgba(255, 255, 255, .72);
}
.native-canvas .direct-selectable {
  border-radius: 1.2mm;
  cursor: pointer;
  outline: .35mm solid transparent;
  outline-offset: 1mm;
  transition: outline-color .15s ease, background-color .15s ease;
}
.native-canvas .direct-selectable:hover { outline-color: rgba(31, 92, 77, .28); }
.native-canvas .direct-selectable:focus {
  outline-color: #2f806d;
  background-color: rgba(255, 255, 255, .72);
}
.native-canvas .page-block.is-editable { cursor: default; }
.native-canvas .page-block.is-selected {
  outline: .5mm solid #2f806d;
  outline-offset: 1mm;
}
.native-canvas .syllable-cell.is-part-selected {
  position: relative;
  z-index: 1;
  outline: .5mm solid #2f806d;
  outline-offset: -.5mm;
  background-color: rgba(47, 128, 109, .1);
}
.native-canvas .inline-value-trigger {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: 2mm;
  cursor: text;
  outline: .35mm solid transparent;
  outline-offset: .6mm;
}
.native-canvas .inline-value-trigger:hover,
.native-canvas .inline-value-trigger:focus { outline-color: rgba(47, 128, 109, .42); }
.native-canvas .inline-value-editor {
  display: inline-grid;
  min-width: 70%;
  min-height: 10mm;
  place-items: center;
  padding: 0 2mm;
  border-radius: 2mm;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 .5mm #2f806d, 0 2mm 5mm rgba(23,59,87,.12);
  color: #173b57;
  caret-color: #173b57;
  cursor: text;
  text-align: var(--block-text-align, center);
  white-space: nowrap;
}
.native-canvas .exercise-item-editor {
  color: var(--direct-color, var(--block-color, var(--style-exercise-text-color, #183c57)));
  font-family: var(--direct-font, var(--block-font, var(--style-exercise-text-font, var(--arabic-text))));
  font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 22pt)));
  font-weight: var(--direct-weight, var(--block-weight, var(--style-exercise-text-weight, 400)));
  line-height: var(--direct-line, var(--block-line, var(--style-exercise-text-line, 1.35)));
}
.native-canvas .syllable-cell .exercise-item-editor {
  font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 36pt)));
}
.native-canvas .visual-inline-value-editor {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: 1.2mm;
  background: rgba(255, 255, 255, .96);
  box-shadow: inset 0 0 0 .45mm #2f806d;
}
.native-canvas .visual-inline-value-preview {
  display: grid;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  place-items: center;
  pointer-events: none;
}
.native-canvas .visual-inline-value-input {
  z-index: 1;
  display: block;
  grid-area: 1 / 1;
  width: calc(100% - 4mm);
  height: auto;
  max-height: calc(100% - 2mm);
  min-width: 0;
  min-height: 0;
  align-self: center;
  padding: 0 2mm;
  overflow-y: hidden;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--direct-color, var(--block-color, var(--style-exercise-text-color, #183c57))) !important;
  font-family: var(--direct-font, var(--block-font, var(--style-exercise-text-font, var(--arabic-text))));
  font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 28pt)));
  font-weight: var(--direct-weight, var(--block-weight, var(--style-exercise-text-weight, 400)));
  line-height: var(--direct-line, var(--block-line, 1.15));
  caret-color: #173b57;
  cursor: text;
  text-align: center;
  white-space: pre-wrap;
  resize: none;
}
.native-canvas .visual-inline-value-input.is-multiline { overflow-y: auto; }
.native-canvas .visual-inline-value-input::selection {
  background: rgba(47, 128, 109, .22);
  color: transparent;
}
.native-canvas .trace-item-editor {
  width: 90%;
  font: inherit;
  color: var(--coral, #ed7464);
}
.native-canvas .theory-expression-editor {
  width: 95%;
  color: var(--direct-color, var(--block-color, var(--style-exercise-text-color, #183c57)));
  font-family: var(--direct-font, var(--block-font, var(--style-exercise-text-font, var(--arabic-text))));
  font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 20pt)));
  font-weight: var(--direct-weight, var(--block-weight, var(--style-exercise-text-weight, 400)));
  line-height: var(--direct-line, var(--block-line, var(--style-exercise-text-line, 1.35)));
}
.instruction-block {
  padding: 3.5mm 5mm;
  border: var(--block-border-width, .35mm) solid var(--block-border-color, var(--legacy-border-color, #d7e2e7));
  border-radius: 4mm;
  background-color: var(--block-surface, var(--legacy-block-surface, var(--block-background, var(--style-instruction-text-background, #fff))));
}
.instruction-block strong {
  color: var(--direct-color, var(--block-color, var(--style-instruction-title-color, #173b57)));
  font-family: var(--direct-font, var(--block-font, var(--style-instruction-title-font, var(--arabic-ui))));
  font-size: var(--direct-size, var(--block-size, var(--style-instruction-title-size, 15pt)));
  font-weight: var(--direct-weight, var(--block-weight, var(--style-instruction-title-weight, 700)));
  line-height: var(--direct-line, var(--block-line, var(--style-instruction-title-line, 1.25)));
  text-align: var(--direct-text-align, var(--block-text-align, var(--style-instruction-title-align, inherit)));
}
.instruction-block p {
  margin: 2mm 0 0;
  color: var(--direct-color, var(--block-color, var(--style-instruction-text-color, #496478)));
  font-family: var(--direct-font, var(--block-font, var(--style-instruction-text-font, var(--arabic-ui))));
  font-size: var(--direct-size, var(--block-size, var(--style-instruction-text-size, 12pt)));
  font-weight: var(--direct-weight, var(--block-weight, var(--style-instruction-text-weight, 400)));
  line-height: var(--direct-line, var(--block-line, var(--style-instruction-text-line, 1.65)));
  text-align: var(--direct-text-align, var(--block-text-align, var(--style-instruction-text-align, inherit)));
  white-space: pre-wrap;
}
.instruction-block strong:empty + p { margin-top: 0; }
.theory-block {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.theory-copy {
  margin: 0 0 3mm;
  padding: 4.5mm 5mm;
  border: var(--block-border-width, .4mm) solid var(--block-border-color, #d7c18d);
  border-radius: 4mm;
  background-color: var(--block-surface, var(--block-background, var(--style-instruction-text-background, #fff9e9)));
  text-align: var(--direct-text-align, var(--block-text-align, center));
}
.theory-copy strong {
  color: var(--direct-color, var(--block-color, #1f5c4d));
  font-family: var(--direct-font, var(--block-font, var(--style-instruction-title-font, var(--arabic-ui))));
  font-size: var(--direct-size, var(--block-size, var(--style-instruction-title-size, 14pt)));
  font-weight: var(--direct-weight, var(--block-weight, var(--style-instruction-title-weight, 700)));
  line-height: var(--direct-line, var(--block-line, var(--style-instruction-title-line, 1.25)));
}
.theory-copy p {
  margin: 1mm 0 0;
  color: var(--direct-color, var(--block-color, var(--style-instruction-text-color, #496478)));
  font-family: var(--direct-font, var(--block-font, var(--arabic-ui)));
  font-size: var(--direct-size, var(--block-size, 11pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: var(--direct-line, var(--block-line, var(--style-instruction-text-line, 1.45)));
  white-space: pre-wrap;
}
.native-canvas .theory-element.is-part-selected,
.native-canvas .instruction-block .is-part-selected {
  outline-color: #2f806d;
}
.theory-element {
  letter-spacing: var(--direct-tracking, inherit);
  text-align: var(--direct-text-align, var(--block-text-align, inherit));
}
.theory-element.has-direct-space-before { margin-block-start: var(--direct-space-before); }
.theory-element.has-direct-space-after { margin-block-end: var(--direct-space-after); }
.theory-text.has-direct-indent { text-indent: var(--direct-indent); }
.theory-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3mm;
}
.theory-examples:has(> .theory-example:only-child) {
  grid-template-columns: minmax(0, 56mm);
  justify-content: center;
}
.theory-examples:has(> .theory-example:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 52mm));
  justify-content: center;
}
.theory-example {
  display: grid;
  place-items: center;
  padding: 2.8mm 2.4mm 3mm;
  border: var(--example-border-width, .1mm) solid var(--example-border-color, #c7d9de);
  border-radius: 3mm;
  background: var(--example-surface, #cfeaff);
  box-shadow: none;
}
.theory-example.has-custom-background {
  background-color: var(--example-surface);
}
.theory-example.has-custom-border {
  border: var(--example-border-width) solid var(--example-border-color);
  border-radius: 3mm;
}
.theory-example.has-custom-background.has-pattern:not(.is-white-background) {
  background-image: var(--block-pattern-image);
  background-position: center;
  background-size: var(--block-pattern-size, 18mm) var(--block-pattern-size, 18mm);
}
.theory-example.has-custom-background.is-white-background {
  background-image: none;
}
.theory-example:not(.is-sideways) > .inline-value-trigger {
  grid-template-rows: minmax(12mm, auto) auto minmax(12mm, auto);
  row-gap: 1.5mm;
}
.theory-example.is-sideways > .inline-value-trigger {
  display: grid;
  width: 100%;
  grid-template: auto / minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 2mm;
}
.print-sheet .theory-example.is-sideways {
  width: 100%;
  grid-template: auto / minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 2mm;
}
.theory-example.is-sideways .theory-parts,
.theory-example.is-sideways .theory-result {
  display: flex;
  min-width: 0;
  min-height: 13mm;
  align-items: center;
  justify-content: center;
  transform: translateY(-1.5mm);
}
.theory-example.is-sideways :is(.theory-parts, .theory-result) .marked-svg {
  display: block;
  height: 48px;
}
.theory-example.is-sideways:dir(rtl) .theory-arrow { transform: scaleX(-1); }
.theory-parts {
  display: flex;
  min-height: 13mm;
  align-items: center;
  justify-content: center;
  gap: 1.2mm;
  color: var(--direct-color, var(--block-color, var(--style-exercise-text-color, #1f5c4d)));
  font-family: var(--direct-font, var(--block-font, var(--style-exercise-text-font, var(--arabic-text))));
  font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 23pt)));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: var(--direct-line, var(--block-line, var(--style-exercise-text-line, 1.25)));
}
.theory-parts span { display: inline-flex; align-items: center; gap: 1.2mm; }
.theory-parts span { flex: 1 1 0; min-width: 0; justify-content: center; }
.theory-parts .marked-svg { width: min(22mm, 100%); height: 44px; }
.theory-result .marked-svg { width: min(48mm, calc(100% - 2mm)); height: 48px; }
.theory-parts i {
  color: color-mix(in srgb, currentColor 62%, white);
  font-family: inherit;
  font-size: .62em;
  font-style: normal;
  line-height: inherit;
}
.theory-arrow {
  margin: 0;
  color: var(--coral, #ed7464);
  font-family: var(--direct-font, var(--block-font, var(--style-exercise-text-font, var(--arabic-ui))));
  font-size: calc(var(--direct-size, var(--block-size, var(--style-exercise-text-size, 22pt))) * .62);
  font-weight: 700;
  line-height: 1;
}
.print-sheet[data-page-id^="shadda-"] .theory-example,
.page-canvas[data-page-id^="shadda-"] .theory-example {
  padding-block: 1.5mm 1.7mm;
}
.print-sheet[data-page-id^="shadda-"] .theory-arrow,
.page-canvas[data-page-id^="shadda-"] .theory-arrow {
  margin-block: 1.6mm;
}
.print-sheet[data-page-id="shadda-complete-assimilation"] .theory-examples,
.page-canvas[data-page-id="shadda-complete-assimilation"] .theory-examples {
  grid-template-columns: minmax(0, 118mm);
}
.print-sheet[data-page-id="shadda-complete-assimilation"] .theory-example {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 3mm;
  direction: rtl;
}
.print-sheet[data-page-id="shadda-complete-assimilation"] .theory-example > .inline-value-trigger,
.page-canvas[data-page-id="shadda-complete-assimilation"] .theory-example > .inline-value-trigger {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 3mm;
  direction: rtl;
}
.print-sheet[data-page-id="shadda-complete-assimilation"] .theory-parts,
.print-sheet[data-page-id="shadda-complete-assimilation"] .theory-result,
.page-canvas[data-page-id="shadda-complete-assimilation"] .theory-parts,
.page-canvas[data-page-id="shadda-complete-assimilation"] .theory-result {
  min-height: 13mm;
  display: flex;
  align-items: center;
  justify-content: center;
  direction: rtl;
}
.print-sheet[data-page-id="shadda-complete-assimilation"] .theory-arrow,
.page-canvas[data-page-id="shadda-complete-assimilation"] .theory-arrow {
  margin: 0;
  font-size: 0;
}
.print-sheet[data-page-id="shadda-complete-assimilation"] .theory-arrow::before,
.page-canvas[data-page-id="shadda-complete-assimilation"] .theory-arrow::before {
  content: "\2190";
  font-size: calc(var(--direct-size, var(--block-size, var(--style-exercise-text-size, 22pt))) * .62);
}
.print-sheet[data-page-id="feminine-taa-open"] .page-block,
.page-canvas[data-page-id="feminine-taa-open"] .page-block {
  margin-bottom: 1.5mm;
}
.print-sheet[data-page-id="lam-allah-rule"] .page-block,
.page-canvas[data-page-id="lam-allah-rule"] .page-block {
  margin-bottom: 2mm;
}
.theory-result {
  min-height: 13mm;
  color: var(--direct-color, var(--block-color, var(--style-exercise-text-color, #173b57)));
  font-family: var(--direct-font, var(--block-font, var(--style-exercise-text-font, var(--arabic-text))));
  font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 27pt)));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: var(--direct-line, var(--block-line, var(--style-exercise-text-line, 1.25)));
}
.theory-example.has-direct-font :is(.theory-parts, .theory-result, .theory-expression-editor) {
  font-family: var(--direct-font, var(--arabic-text));
}
.theory-example.has-direct-size :is(.theory-parts, .theory-result, .theory-expression-editor) {
  font-size: var(--direct-size);
}
.theory-example.has-direct-color :is(.theory-parts, .theory-result, .theory-expression-editor) {
  color: var(--direct-color);
}
.theory-example.has-direct-line :is(.theory-parts, .theory-result, .theory-expression-editor) {
  line-height: var(--direct-line);
}
.emphasis-soft { --legacy-block-surface: #f4faf8; }
.emphasis-strong { --legacy-block-surface: #fff7de; --legacy-border-color: #efbd55; }
.syllable-grid {
  display: grid;
  grid-template-columns: repeat(var(--block-columns, 5), minmax(0, 1fr));
  gap: 2.3mm;
}
.syllable-grid.center-last-row {
  grid-template-columns: repeat(var(--center-tail-columns), minmax(0, 1fr));
}
.syllable-grid.center-last-row > .syllable-cell {
  grid-column: span 2;
}
.syllable-grid.center-last-row > .syllable-cell.is-center-tail-start {
  grid-column: var(--center-tail-start) / span 2;
}
.syllable-cell {
  display: grid; min-height: var(--responsive-reading-cell-height, 24mm); place-items: center;
  border: var(--block-border-width, .35mm) solid var(--block-border-color, var(--legacy-border-color, #cfe0e6));
  border-radius: 3mm;
  background-color: var(--block-surface, var(--legacy-block-surface, var(--block-background, var(--style-exercise-text-background, #edf6f8))));
  color: var(--block-color, var(--style-exercise-text-color, #183c57));
  container-type: inline-size;
}
.syllable-cell > :is(.marked-svg, .inline-value-trigger, .visual-inline-value-editor) {
  transform: translate(var(--item-offset-x, 0mm), var(--item-offset-y, 0mm));
}
.marked-svg { width: min(24mm, calc(100% - 4mm)); height: 56px; overflow: visible; }
/* Las palabras de ejercicio van dentro de un <svg>, y estas reglas se quedaron sin el escalón del
   formato directo: obedecían al estilo de párrafo pero NO a la barra de formato, así que cambiar
   la tipografía o el cuerpo con la barra no hacía nada en las casillas. El orden es el mismo que
   en el resto del archivo: formato directo > estilo asignado > rol > valor del diseño. */
.marked-svg text {
  font-family: var(--direct-font, var(--block-font, var(--style-exercise-text-font, var(--arabic-text))));
  font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 22pt)));
  font-weight: var(--direct-weight, var(--block-weight, var(--style-exercise-text-weight, 400)));
}
.syllable-cell .marked-svg text {
  /* El cuerpo visible debe coincidir con el estilo asignado. Los presets pueden compactar la
     altura y los espacios de la cuadrícula, pero no reducir silenciosamente este valor. */
  font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 36pt)));
}
.syllable-cell.has-direct-size .marked-svg text,
.syllable-grid.has-direct-size .syllable-cell .marked-svg text { font-size: var(--direct-size); }
.marked-svg-accent { fill: var(--coral, #d4554d); }
.marked-svg-base { fill: currentColor; }
.marked-vector-metrics { visibility: hidden; pointer-events: none; }
.manual-marked-svg > text { font-family: var(--direct-font, var(--block-font, var(--style-exercise-text-font, var(--arabic-text)))); }
.manual-sukun-svg { overflow: visible; pointer-events: none; }
.quranic-marked-svg text {
  font-family: var(--arabic-text);
}
.has-direct-font .quranic-marked-svg text { font-family: var(--direct-font, var(--block-font)); }
.trace-sheet.has-direct-font .trace-row span { font-family: var(--direct-font, var(--block-font)); }
.search-field-sheet {
  position: relative; height: 76mm; min-height: 0;
  border: var(--block-border-width, .4mm) dashed var(--block-border-color, var(--legacy-border-color, #cbdde1));
  border-radius: 4mm;
  color: var(--block-color, var(--style-exercise-text-color, #183c57));
  background-color: var(--block-surface, var(--legacy-block-surface, var(--block-background, var(--style-exercise-text-background, #fff))));
}
.search-token { position: absolute; display: inline-grid; width: 19mm; height: 15mm; place-items: center; }
.trace-sheet {
  display: grid; min-height: 0; grid-template-columns: none; gap: 1.2mm;
  padding: 1.5mm 3mm 2mm;
  border: .16mm solid rgba(126, 148, 159, .28);
  border-radius: 2.5mm;
  background-color: var(--block-surface, var(--legacy-block-surface, var(--block-background, var(--style-trace-text-background, #fff))));
}
.trace-row {
  position: relative; display: grid; height: 16mm; min-height: 0; grid-template-columns: repeat(var(--trace-columns, 3), minmax(0, 1fr));
  align-items: center; padding: 0 2mm 2mm;
  border: 0; gap: 0; border-radius: 0; background: transparent;
  font-size: var(--direct-size, var(--block-size, var(--style-trace-text-size, 20pt)));
  --trace-guide-offset: .31em;
}
.trace-row::after {
  position: absolute; right: 2mm; bottom: calc(50% - var(--trace-guide-offset)); left: 2mm; height: .14mm;
  background: rgba(91, 118, 132, .42); content: "";
}
.trace-row span {
  position: relative; z-index: 1; text-align: var(--direct-text-align, center);
  color: var(--direct-color, var(--block-color, var(--style-trace-text-color, #173b57)));
  font-family: var(--direct-font, var(--block-font, var(--style-trace-text-font, var(--arabic-text))));
  font-size: inherit;
  font-weight: var(--direct-weight, var(--block-weight, var(--style-trace-text-weight, 400)));
  line-height: var(--direct-line, var(--block-line, var(--style-trace-text-line, 1.4)));
  letter-spacing: var(--direct-tracking, normal);
}
.trace-row .trace-model { color: var(--direct-color, var(--block-color, var(--coral, #ed7464))); }
.trace-row .trace-dotted {
  color: var(--direct-color, var(--block-color, #9db0b8));
  font-family: var(--direct-font, var(--block-font, "KFGQPC Alphabet Dotted", var(--arabic-dotted)));
}
.trace-row .trace-hafs-dotted-slot {
  color: var(--direct-color, var(--block-color, #8ba1aa));
  font-family: var(--direct-font, var(--block-font, "KFGQPC Alphabet Dotted", var(--arabic-dotted)));
}
.trace-row .trace-blank { color: transparent; }
.trace-hafs-dotted-slot > .inline-value-trigger { color: inherit; }
.trace-quranic-dotted-word {
  position: relative;
  display: inline-block;
  direction: rtl;
  color: inherit;
  font-family: "KFGQPC Alphabet Dotted", var(--arabic-dotted);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.05;
  white-space: nowrap;
}
.trace-quranic-dotted-base { font: inherit; }
.trace-positioned-mark {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  color: inherit;
  opacity: .52;
  pointer-events: none;
  transform: translateX(-50%);
}
.trace-positioned-mark text {
  fill: currentColor;
  font-family: var(--arabic-text);
  font-weight: 400;
}
.trace-sukun-mark {
  top: -.31em;
  width: .72em;
  height: .55em;
}
.trace-sukun-mark text {
  font-size: 22px;
  font-weight: 400;
}
.trace-wasla-mark {
  top: -.23em;
  width: 1em;
  height: .5em;
}
.trace-wasla-mark text {
  fill: currentColor;
  font-family: var(--arabic-text);
  font-size: 22px;
  font-weight: 400;
}
.reading-block {
  min-height: 30mm;
  padding: 10mm;
  border: var(--block-border-width, 0) solid var(--block-border-color, var(--legacy-border-color, #c7d9de));
  border-radius: 4mm;
  color: var(--block-color, var(--style-reading-text-color, #173b57));
  background-color: var(--block-surface, var(--legacy-block-surface, var(--block-background, var(--style-reading-text-background, #fff))));
  font-family: var(--direct-font, var(--block-font, var(--style-reading-text-font, var(--arabic-text))));
  font-size: var(--direct-size, var(--block-size, var(--style-reading-text-size, 18pt)));
  font-weight: var(--direct-weight, var(--block-weight, var(--style-reading-text-weight, 400)));
  line-height: var(--direct-line, var(--block-line, var(--style-reading-text-line, 2)));
  white-space: pre-line;
}
.quran-marked-flow {
  direction: rtl;
  unicode-bidi: isolate;
  white-space: pre-wrap;
}
.quran-flow-word {
  display: inline-block;
  max-width: none;
  overflow: visible;
  vertical-align: -.3em;
}
.quran-flow-word-fallback {
  display: inline;
}
.native-canvas .reading-block > .visual-block-text-trigger {
  display: block;
  width: 100%;
  height: auto;
  min-height: 1.35em;
  border-radius: 1.2mm;
  cursor: text;
  outline: .35mm solid transparent;
  outline-offset: 1mm;
  text-align: inherit;
}
.native-canvas .reading-block > .visual-block-text-trigger:hover,
.native-canvas .reading-block > .visual-block-text-trigger:focus {
  outline-color: rgba(47, 128, 109, .42);
}
.native-canvas .reading-block > .visual-block-text-editor {
  display: block;
  width: 100%;
  height: auto;
  min-height: 1.35em;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  border: 0;
  border-radius: 1.2mm;
  outline: .45mm solid #2f806d;
  outline-offset: 1mm;
  background: rgba(255, 255, 255, .82);
  color: var(--direct-color, var(--block-color, var(--style-reading-text-color, #173b57))) !important;
  font: inherit;
  line-height: inherit;
  caret-color: #173b57;
  cursor: text;
  text-align: inherit;
  white-space: pre-wrap;
}
.note-block {
  padding: 3.5mm 5mm;
  border: var(--block-border-width, 0) solid var(--block-border-color, var(--legacy-border-color, #efbd55));
  border-right-width: var(--block-border-width, 1.2mm);
  border-radius: 3mm;
  color: var(--block-color, var(--style-guide-text-color, #173b57));
  background-color: var(--block-surface, var(--legacy-block-surface, var(--block-background, var(--style-guide-text-background, #fff7dd))));
  font-family: var(--direct-font, var(--block-font, var(--style-guide-text-font, var(--arabic-ui))));
  font-size: var(--direct-size, var(--block-size, var(--style-guide-text-size, 13pt)));
  font-weight: var(--direct-weight, var(--block-weight, var(--style-guide-text-weight, 400)));
  line-height: var(--direct-line, var(--block-line, var(--style-guide-text-line, 1.65)));
  white-space: pre-wrap;
}
.image-block {
  margin: 0 0 5mm; padding: 0;
  border: var(--block-border-width, 0) solid var(--block-border-color, var(--legacy-border-color, #c7d9de));
  border-radius: 3mm;
  background-color: var(--block-surface, transparent);
  text-align: var(--direct-text-align, center);
}
.image-block img { max-width: 100%; max-height: 105mm; object-fit: contain; }
.image-block figcaption {
  margin-top: 2mm;
  color: var(--block-color, #657c88);
  font-family: var(--direct-font, var(--block-font, var(--arabic-ui)));
  font-size: var(--direct-size, var(--block-size, 10pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: var(--direct-line, var(--block-line, normal));
}
.image-block.free-image {
  position: absolute;
  z-index: 6;
  margin: 0;
  padding: 0;
  overflow: visible;
  transform-origin: center;
  touch-action: none;
}
.image-block.free-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.image-block.free-image figcaption { display: none; }
.image-block.free-image.is-editable { cursor: grab; }
.image-block.free-image.is-editable:active { cursor: grabbing; }
.image-block.free-image.is-selected {
  outline: .55mm solid var(--coral, #ed7464);
  outline-offset: 1mm;
}
.image-scale-handle {
  position: absolute;
  z-index: 2;
  width: 4.2mm;
  height: 4.2mm;
  padding: 0;
  border: .65mm solid #fff;
  border-radius: 50%;
  outline: .28mm solid rgba(31, 92, 77, .55);
  background: var(--coral, #ed7464);
  touch-action: none;
}
.image-scale-handle.is-nw { top: -3.1mm; left: -3.1mm; cursor: nwse-resize; }
.image-scale-handle.is-ne { top: -3.1mm; right: -3.1mm; cursor: nesw-resize; }
.image-scale-handle.is-sw { bottom: -3.1mm; left: -3.1mm; cursor: nesw-resize; }
.image-scale-handle.is-se { right: -3.1mm; bottom: -3.1mm; cursor: nwse-resize; }
.image-drag-handle {
  position: absolute;
  right: 50%;
  bottom: -7mm;
  padding: 1mm 2.8mm;
  border-radius: 4mm;
  color: #fff;
  background: var(--coral, #ed7464);
  font: 600 7.5pt var(--arabic-ui);
  line-height: 1;
  pointer-events: none;
  transform: translateX(50%);
}
.image-block.character-illustration {
  position: absolute;
  z-index: 2;
  top: 12mm;
  left: 6mm;
  width: 29mm;
  height: 32mm;
  margin: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 1.2mm 1.4mm rgba(23, 59, 87, .14));
}
.image-block.character-illustration img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}
.image-block.character-illustration figcaption { display: none; }
.page-canvas:has(.character-illustration) .lesson-number { margin-left: 31mm; }
.has-pattern:not(.syllable-grid):not(.trace-sheet):not(.theory-block),
.syllable-grid.has-pattern .syllable-cell,
.trace-sheet.has-pattern {
  background-image: var(--block-pattern-image);
  background-position: center;
  background-size: var(--block-pattern-size, 18mm) var(--block-pattern-size, 18mm);
}
.theory-block.has-pattern .theory-copy {
  background-image: var(--block-pattern-image);
  background-position: center;
  background-size: var(--block-pattern-size, 18mm) var(--block-pattern-size, 18mm);
}
.pattern-andalusi {
  --block-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23245c55' stroke-width='1' opacity='.075'%3E%3Cpath d='M36 4 44 28 68 36 44 44 36 68 28 44 4 36 28 28Z'/%3E%3Cpath d='M20 20h32v32H20z' transform='rotate(45 36 36)'/%3E%3Cpath d='M20 20h32v32H20z'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-zellige {
  --block-pattern-size: 16mm;
  --block-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23245c55' stroke-width='1' opacity='.075'%3E%3Cpath d='M32 2 42 22 62 32 42 42 32 62 22 42 2 32 22 22Z'/%3E%3Cpath d='M2 2 22 2 32 22 42 2 62 2 62 22 42 32 62 42 62 62 42 62 32 42 22 62 2 62 2 42 22 32 2 22Z'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-stars {
  --block-pattern-size: 14mm;
  --block-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23245c55' stroke-width='1' opacity='.08'%3E%3Cpath d='M28 4 33 17 46 10 39 23 52 28 39 33 46 46 33 39 28 52 23 39 10 46 17 33 4 28 17 23 10 10 23 17Z'/%3E%3Ccircle cx='28' cy='28' r='9'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-lattice {
  --block-pattern-size: 13mm;
  --block-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cg fill='none' stroke='%23245c55' stroke-width='1' opacity='.065'%3E%3Cpath d='M-13 13 13-13M-13 39 39-13M-13 65 65-13M13 65 65 13M39 65 65 39'/%3E%3Cpath d='M-13 39 13 65M-13 13 39 65M13-13 65 39M39-13 65 13'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-arches {
  --block-pattern-size: 20mm;
  --block-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23245c55' stroke-width='1.1' opacity='.075'%3E%3Cpath d='M0 40V20C0 9 9 0 20 0s20 9 20 20v20M40 40V20C40 9 49 0 60 0s20 9 20 20v20'/%3E%3Cpath d='M0 80V60c0-11 9-20 20-20s20 9 20 20v20M40 80V60c0-11 9-20 20-20s20 9 20 20v20'/%3E%3Cpath d='M9 40V23c0-6 5-11 11-11s11 5 11 11v17M49 40V23c0-6 5-11 11-11s11 5 11 11v17'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-diamonds {
  --block-pattern-size: 17mm;
  --block-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' viewBox='0 0 68 68'%3E%3Cg fill='none' stroke='%23245c55' stroke-linejoin='round' opacity='.09'%3E%3Cpath d='M17 1 33 17 17 33 1 17ZM51 1 67 17 51 33 35 17ZM17 35 33 51 17 67 1 51ZM51 35 67 51 51 67 35 51Z'/%3E%3Ccircle cx='17' cy='17' r='2' fill='%23ed7464' stroke='none'/%3E%3Ccircle cx='51' cy='51' r='2' fill='%23ed7464' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-honeycomb {
  --block-pattern-size: 18mm;
  --block-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='64' viewBox='0 0 72 64'%3E%3Cg fill='none' stroke='%23245c55' stroke-linejoin='round' opacity='.085'%3E%3Cpath d='M18 1 35 10v20l-17 9L1 30V10ZM54 1l17 9v20l-17 9-17-9V10ZM36 32l17 9v20l-17 9-17-9V41Z'/%3E%3Ccircle cx='18' cy='20' r='2' fill='%23e6aa3b' stroke='none'/%3E%3Ccircle cx='54' cy='20' r='2' fill='%23e6aa3b' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-confetti {
  --block-pattern-size: 18mm;
  --block-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 16 7-5M55 11l6 7M13 55l7 5M55 57l7-4' stroke='%23245c55' stroke-width='1.5' opacity='.13'/%3E%3Cpath d='m35 8 4 7h-8ZM35 54l5 9H30Z' stroke='%23ed7464' opacity='.13'/%3E%3Crect x='8' y='33' width='8' height='8' rx='2' transform='rotate(20 12 37)' stroke='%23e6aa3b' opacity='.16'/%3E%3Crect x='55' y='33' width='8' height='8' rx='2' transform='rotate(-20 59 37)' stroke='%23e6aa3b' opacity='.16'/%3E%3Ccircle cx='36' cy='36' r='3' fill='%23245c55' opacity='.1'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-semicircles {
  --block-pattern-size: 16mm;
  --block-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23245c55' stroke-linecap='round' opacity='.085'%3E%3Cpath d='M0 16a16 16 0 0 1 32 0M32 16a16 16 0 0 1 32 0M16 48a16 16 0 0 1 32 0'/%3E%3Cpath d='M8 16a8 8 0 0 1 16 0M40 16a8 8 0 0 1 16 0M24 48a8 8 0 0 1 16 0' stroke='%23ed7464'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-rosette {
  --block-pattern-size: 18mm;
  --block-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23245c55' stroke-width='1' stroke-linejoin='round' opacity='.1'%3E%3Cpath d='M36 5C44 14 44 27 36 36C28 27 28 14 36 5ZM67 36C58 44 45 44 36 36C45 28 58 28 67 36ZM36 67C28 58 28 45 36 36C44 45 44 58 36 67ZM5 36C14 28 27 28 36 36C27 44 14 44 5 36Z'/%3E%3Cpath d='M58 14C57 26 48 35 36 36C37 24 46 15 58 14ZM58 58C46 57 37 48 36 36C48 37 57 46 58 58ZM14 58C15 46 24 37 36 36C35 48 26 57 14 58ZM14 14C26 15 35 24 36 36C24 35 15 26 14 14Z' stroke='%23ed7464'/%3E%3Ccircle cx='36' cy='36' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-girih {
  --block-pattern-size: 19mm;
  --block-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76' viewBox='0 0 76 76'%3E%3Cg fill='none' stroke='%23245c55' stroke-width='1' stroke-linejoin='round' opacity='.1'%3E%3Cpath d='M38 6 45 24 62 14 52 31 70 38 52 45 62 62 45 52 38 70 31 52 14 62 24 45 6 38 24 31 14 14 31 24Z'/%3E%3Cpath d='M24 24h28v28H24zM18 38l20-20 20 20-20 20Z' stroke='%23ed7464'/%3E%3Cpath d='M0 0 14 14M76 0 62 14M0 76 14 62M76 76 62 62'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-mashrabiya {
  --block-pattern-size: 18mm;
  --block-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23245c55' stroke-width='1' stroke-linejoin='round' opacity='.09'%3E%3Cpath d='M18 1 27 10 36 1 45 10 54 1 63 10 72 1M1 18l9-9 8 9-8 9 8 9-8 9 8 9-8 9 9 9M18 71l9-9 9 9 9-9 9 9 9-9 9 9M71 18l-9-9-8 9 8 9-8 9 8 9-8 9 8 9-9 9'/%3E%3Cpath d='M18 18 27 9l9 9-9 9 9 9-9 9 9 9-9 9-9-9 9-9-9-9 9-9ZM54 18l9-9 9 9-9 9 9 9-9 9 9 9-9 9-9-9 9-9-9-9 9-9Z'/%3E%3Ccircle cx='36' cy='36' r='4' stroke='%23ed7464'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-hex-rosette {
  --block-pattern-size: 17mm;
  --block-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' viewBox='0 0 68 68'%3E%3Cg fill='none' stroke='%23245c55' stroke-width='1' stroke-linejoin='round' opacity='.1'%3E%3Cpath d='M34 4 47 12 47 27 34 34 21 27 21 12ZM34 34 47 41 47 56 34 64 21 56 21 41ZM8 19 21 27 21 41 8 49-5 41-5 27ZM60 19 73 27 73 41 60 49 47 41 47 27Z'/%3E%3Cpath d='M34 12 40 23 34 34 28 23ZM34 34 40 45 34 56 28 45ZM8 27 14 34 8 41 2 34ZM60 27 66 34 60 41 54 34Z' stroke='%23ed7464'/%3E%3C/g%3E%3C/svg%3E");
}
.sheet-footer {
  position: absolute; right: 13mm; bottom: 8mm; left: 13mm; display: flex;
  justify-content: space-between; padding-top: 2.5mm; border-top: .25mm solid #d3dedb;
  color: var(--style-guide-text-color, #738984);
  font-family: var(--style-guide-text-font, var(--arabic-ui));
  font-size: max(8pt, calc(var(--style-guide-text-size, 13pt) * .62));
}

/* La numeración queda siempre en el borde exterior: cambia de lado en las páginas pares. */
.page-canvas.is-verso > .sheet-footer {
  flex-direction: row-reverse;
}
.toc-list { margin: 10mm 0 0; padding: 0; list-style: none; font: 15pt var(--arabic-ui); }
.toc-list li { display: flex; align-items: end; gap: 3mm; margin: 0 0 4mm; }
.toc-list li::after { order: 2; height: 1px; flex: 1; border-bottom: .35mm dotted #b8c3bf; content: ""; }
.toc-list .toc-page { order: 3; color: var(--coral, #ed7464); }
.toc-list.toc-list-dense {
  columns: 2;
  column-gap: 9mm;
  margin-top: 6mm;
  font-size: 11.5pt;
}
.toc-list.toc-list-dense li {
  break-inside: avoid;
  margin-bottom: 2.2mm;
}
.toc-list.toc-list-very-dense {
  columns: 3;
  column-gap: 6mm;
  font-size: 9.5pt;
  line-height: 1.15;
}
.toc-list.toc-list-very-dense li {
  gap: 1.2mm;
  margin-bottom: 1.4mm;
}

/* =============================================================================
   TIPOGRAFÍA BASE DE LOS BLOQUES EDITORIALES
   Los 16 roles semánticos (matn, isnad, cita coránica, número de hadiz…) son todo el contenido
   de los libros importados, y hasta ahora solo recibían tipografía dentro del pliego de los
   Shamāʾil. En cualquier otra maqueta no había NINGUNA regla: heredaban del contenedor, y por eso
   el estilo de párrafo que se les asignaba no se veía. Medido el 7 de agosto de 2026: el estilo
   asignado llegaba en 44 de 161 combinaciones de rol y maqueta.

   El último recurso es `inherit` justamente para no cambiar nada: sin estilo asignado y sin
   formato directo, la propiedad resuelve a la heredada, que es lo que ocurría al no existir la
   regla. Y va ANTES de los bloques de cada maqueta para que una maqueta que sí declare
   tipografía siga ganando: los valores que el diseño fija a propósito se respetan.
   ============================================================================= */
.page-canvas .editorial-block {
  font-family: var(--direct-font, var(--block-font, inherit));
  font-size: var(--direct-size, var(--block-size, inherit));
  font-weight: var(--direct-weight, var(--block-weight, inherit));
  line-height: var(--direct-line, var(--block-line, inherit));
  color: var(--block-color, inherit);
  white-space: pre-wrap;
}

.preset-search-trace .search-field-sheet,
.preset-search-trace-v2 .search-field-sheet {
  display: grid;
  height: 132mm;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 5mm;
  padding: 10mm 8mm;
  overflow: hidden;
  border: .45mm solid color-mix(in srgb, var(--coral, #ed7464) 35%, #b9ced1);
  border-radius: 5mm;
  outline: .25mm dashed color-mix(in srgb, var(--coral, #ed7464) 24%, #b9ced1);
  outline-offset: -2.4mm;
  background-color: #f7fbfa;
}
.preset-search-trace .search-field-sheet .search-token,
.preset-search-trace-v2 .search-field-sheet .search-token {
  position: relative;
  right: auto !important;
  top: auto !important;
  display: grid;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  place-items: center;
  border: .28mm solid rgba(96, 135, 139, .24);
  border-bottom-style: dashed;
  border-radius: 4mm;
  background: rgba(255, 255, 255, .8);
}
.preset-search-trace .search-field-sheet .search-token:nth-child(3n + 1),
.preset-search-trace-v2 .search-field-sheet .search-token:nth-child(3n + 1) { background: rgba(255, 247, 231, .86); }
.preset-search-trace .search-field-sheet .search-token:nth-child(3n + 2),
.preset-search-trace-v2 .search-field-sheet .search-token:nth-child(3n + 2) { background: rgba(238, 247, 244, .9); }
.preset-search-trace .search-field-sheet .search-token:nth-child(3n),
.preset-search-trace-v2 .search-field-sheet .search-token:nth-child(3n) { background: rgba(244, 241, 249, .86); }
.preset-search-trace .search-field-sheet .search-token .marked-svg,
.preset-search-trace-v2 .search-field-sheet .search-token .marked-svg {
  width: min(30mm, calc(100% - 5mm));
  height: 21mm;
}
.preset-search-trace .search-field-sheet .search-token .marked-svg text,
.preset-search-trace-v2 .search-field-sheet .search-token .marked-svg text {
  font-size: var(--direct-size, var(--block-size, 29pt));
}
.preset-search-trace .sheet-heading,
.preset-search-trace-v2 .sheet-heading { margin-bottom: 6mm; }
.preset-search-trace .page-block,
.preset-search-trace-v2 .page-block { margin-bottom: 3mm; }
.preset-search-trace:has(.search-field-sheet) .instruction-block,
.preset-search-trace-v2:has(.search-field-sheet) .instruction-block {
  position: relative;
  min-height: 25mm;
  padding: 4.5mm 7mm 4mm 25mm;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--coral, #ed7464) 28%, #cbdde1);
  background: linear-gradient(100deg, rgba(255, 247, 232, .92), rgba(255, 255, 255, .98) 55%);
}
.preset-search-trace:has(.search-field-sheet) .instruction-block::before,
.preset-search-trace-v2:has(.search-field-sheet) .instruction-block::before {
  position: absolute;
  top: 5mm;
  left: 7mm;
  width: 9mm;
  height: 9mm;
  border: .8mm solid var(--coral, #ed7464);
  border-radius: 50%;
  content: "";
}
.preset-search-trace:has(.search-field-sheet) .instruction-block::after,
.preset-search-trace-v2:has(.search-field-sheet) .instruction-block::after {
  position: absolute;
  top: 14mm;
  left: 15mm;
  width: 5mm;
  border-top: .8mm solid var(--coral, #ed7464);
  border-radius: 2mm;
  content: "";
  transform: rotate(45deg);
  transform-origin: left center;
}
.preset-search-trace:has(.search-field-sheet) .instruction-block strong,
.preset-search-trace-v2:has(.search-field-sheet) .instruction-block strong {
  color: var(--direct-color, var(--block-color, #1f5c4d));
  font-size: var(--direct-size, var(--block-size, 16pt));
}
.preset-search-trace:has(.search-field-sheet) .instruction-block p,
.preset-search-trace-v2:has(.search-field-sheet) .instruction-block p {
  margin-top: 1mm;
  line-height: var(--direct-line, var(--block-line, 1.45));
}
.preset-search-trace .trace-sheet,
.preset-search-trace-v2 .trace-sheet { gap: 1.5mm; }
.preset-search-trace .trace-row,
.preset-search-trace-v2 .trace-row {
  height: 14mm;
  padding-bottom: 1.5mm;
}
.preset-trace-full .sheet-heading { margin-bottom: 5mm; }
.preset-trace-full .page-block { margin-bottom: 2mm; }
.preset-trace-full .instruction-block { padding: 3mm 5mm; }
.preset-trace-full .instruction-block p { margin-top: 1mm; line-height: var(--direct-line, var(--block-line, 1.35)); }
.preset-trace-full .trace-sheet { gap: 1.8mm; }
.preset-trace-full .trace-row { height: 15mm; padding: 0 3mm 1mm; }
.preset-trace-full .trace-row span { line-height: var(--direct-line, var(--block-line, 1.05)); }
.preset-shadda-tanween .sheet-heading { margin-bottom: 5mm; }
.preset-shadda-tanween .page-block { margin-bottom: 2.2mm; }
.preset-shadda-tanween .instruction-block { padding: 3mm 5mm; }
.preset-shadda-tanween .instruction-block p { margin-top: 1mm; line-height: var(--direct-line, var(--block-line, 1.35)); }
.preset-shadda-tanween .theory-copy { padding: 3mm 4mm; }
.preset-shadda-tanween .theory-copy p { margin: .7mm 0 0; line-height: var(--direct-line, var(--block-line, 1.3)); }
.preset-shadda-tanween .theory-examples { gap: 2mm; }
.preset-shadda-tanween .theory-example { padding: 1.5mm 1.2mm 1.7mm; }
.preset-shadda-tanween .theory-parts,
.preset-shadda-tanween .theory-result { min-height: 10mm; font-size: var(--direct-size, var(--block-size, 21pt)); }
.preset-shadda-tanween .syllable-grid { gap: 1.8mm; }
.preset-shadda-tanween .syllable-cell { min-height: var(--responsive-reading-cell-height, 19mm); }
.preset-shadda-tanween .syllable-cell .marked-svg { height: 56px; }
.preset-shadda-tanween .syllable-cell .marked-svg text { font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 26pt))); }
.preset-shadda-madd .sheet-heading { margin-bottom: 5mm; }
.preset-shadda-madd .page-block { margin-bottom: 2.2mm; }
.preset-shadda-madd .instruction-block { padding: 3mm 5mm; }
.preset-shadda-madd .instruction-block p { margin-top: 1mm; line-height: var(--direct-line, var(--block-line, 1.35)); }
.preset-shadda-madd .theory-copy { padding: 3mm 4mm; }
.preset-shadda-madd .theory-copy p { margin: .7mm 0 0; line-height: var(--direct-line, var(--block-line, 1.3)); }
.preset-shadda-madd .theory-examples { gap: 2mm; }
.preset-shadda-madd .theory-example { padding: 1.5mm 1.2mm 1.7mm; }
.preset-shadda-madd .theory-parts,
.preset-shadda-madd .theory-result { min-height: 10mm; font-size: var(--direct-size, var(--block-size, 21pt)); }
.preset-shadda-madd .syllable-grid { gap: 1.8mm; }
.preset-shadda-madd .syllable-cell { min-height: var(--responsive-reading-cell-height, 20mm); }
.preset-shadda-madd .syllable-cell .marked-svg { width: min(48mm, calc(100% - 4mm)); height: 56px; }
.preset-shadda-madd .syllable-cell .marked-svg text { font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 26pt))); }
.preset-shadda-madd .note-block { padding: 3mm 5mm; }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .sheet-heading { margin-bottom: 5mm; }
.has-lesson-heading .sheet-heading {
  display: flex;
  align-items: baseline;
  direction: inherit;
  gap: 0;
  margin-bottom: 6mm;
  padding: 0;
  border: 0;
}
.has-lesson-heading .sheet-heading > div {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 3mm;
  min-width: 0;
}
.has-lesson-heading .sheet-heading h1 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: min(var(--page-title-size, var(--style-page-title-size, 27pt)), 16pt);
  line-height: 1.15;
  white-space: nowrap;
}
.has-lesson-heading .sheet-heading .eyebrow {
  flex: 0 0 auto;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
  white-space: nowrap;
}
.has-lesson-heading .lesson-number { display: none; }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .page-block { margin-bottom: 2.5mm; }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .instruction-block { padding: 3.5mm 5mm; }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .instruction-block p { margin-top: 1mm; line-height: var(--direct-line, var(--block-line, 1.4)); }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .theory-copy { padding: 3.5mm 4mm; }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .theory-copy p { margin: 1mm 0 0; line-height: var(--direct-line, var(--block-line, 1.35)); }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .theory-parts,
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .theory-result { line-height: var(--direct-line, var(--block-line, 1.4)); }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .theory-examples { gap: 2mm; }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .theory-example { padding: 1.7mm 1.4mm 1.9mm; }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .theory-parts,
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .theory-result { min-height: 10mm; font-size: var(--direct-size, var(--block-size, 21pt)); }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .syllable-grid { gap: 1.8mm; }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .syllable-cell { min-height: var(--responsive-reading-cell-height, 20mm); }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .syllable-cell .marked-svg { width: min(48mm, calc(100% - 4mm)); height: 56px; }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .syllable-cell .marked-svg text { font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 24pt))); }
.syllable-grid.has-direct-size .syllable-cell .marked-svg text { font-size: var(--direct-size, var(--block-size)); }
:is(.preset-lam-qamariyya, .preset-lam-shamsiyya, .preset-lam-allah, .preset-wasl-lesson) .note-block { padding: 3.5mm 5mm; }

.preset-lam-allah .syllable-cell { min-height: var(--responsive-reading-cell-height, 17.5mm); }
.preset-lam-allah .syllable-cell .marked-svg { height: 56px; }
.page-canvas.preset-lam-allah-surah { padding: 10mm 9mm 9mm; }
.preset-lam-allah-surah .sheet-heading { gap: 5mm; margin-bottom: 4mm; }
.preset-lam-allah-surah .page-block { margin-bottom: 3mm; }
.preset-lam-allah-surah .instruction-block { padding: 3mm 4mm; }
.preset-lam-allah-surah .reading-block { padding: 5mm 6mm; }
.preset-wasl-lesson .reading-block { padding: 4mm 5mm; line-height: var(--direct-line, var(--block-line, 1.75)); }

/* إدغام كامل: conserva la secuencia visual de la lección de shádda y deja espacio para
   comparar la forma desarrollada con la escritura compacta del muṣḥaf. */
.preset-shadda-idgham .sheet-heading { margin-bottom: 5mm; }
.preset-shadda-idgham .page-block { margin-bottom: 2.5mm; }
.preset-shadda-idgham .instruction-block { padding: 3.5mm 5mm; }
.preset-shadda-idgham .instruction-block p { margin-top: 1mm; line-height: var(--direct-line, var(--block-line, 1.4)); }
.preset-shadda-idgham .theory-copy { padding: 3.5mm 4mm; }
.preset-shadda-idgham .theory-copy p { margin: 1mm 0 0; line-height: var(--direct-line, var(--block-line, 1.35)); }
.preset-shadda-idgham .theory-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2mm; }
.preset-shadda-idgham .theory-example { padding: 1.7mm 1.4mm 1.9mm; }
.preset-shadda-idgham .theory-parts,
.preset-shadda-idgham .theory-result { min-height: 10mm; font-size: var(--direct-size, var(--block-size, 21pt)); line-height: var(--direct-line, var(--block-line, 1.35)); }
.preset-shadda-idgham .syllable-grid { gap: 1.8mm; }
.preset-shadda-idgham .syllable-cell { min-height: var(--responsive-reading-cell-height, 24mm); padding: 1.5mm 1.8mm; }
.preset-shadda-idgham .syllable-cell .marked-svg { width: min(86mm, calc(100% - 3mm)); height: 56px; }
.preset-shadda-idgham .syllable-cell .marked-svg text { font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 22pt))); }
.preset-shadda-idgham .note-block { padding: 3mm 5mm; }
.print-sheet[data-page-id="shadda-complete-assimilation-quran-reading"] .preset-shadda-idgham .theory-examples,
.preset-shadda-idgham.page-canvas[data-page-id="shadda-complete-assimilation-quran-reading"] .theory-examples {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.print-sheet[data-page-id="shadda-complete-assimilation-quran-reading"] .preset-shadda-idgham .theory-example,
.preset-shadda-idgham.page-canvas[data-page-id="shadda-complete-assimilation-quran-reading"] .theory-example {
  min-width: 0;
  padding: 1.2mm 1mm;
}

/* Repaso preliminar: muchas formas breves, pero con aire suficiente para los signos vocálicos. */
.preset-preliminary-review .sheet-heading { margin-bottom: 5mm; }
.preset-preliminary-review .page-block { margin-bottom: 2.5mm; }
.preset-preliminary-review .instruction-block { padding: 3.5mm 5mm; }
.preset-preliminary-review .instruction-block p { margin-top: 1mm; line-height: var(--direct-line, var(--block-line, 1.4)); }
.preset-preliminary-review .theory-copy { margin-bottom: 2.5mm; padding: 3.5mm 5mm; }
.preset-preliminary-review .theory-examples { gap: 2.5mm; }
.preset-preliminary-review .theory-example { padding: 2mm 3mm; }
.preset-preliminary-review .syllable-grid { gap: 2mm; }
.preset-preliminary-review .syllable-cell { min-height: var(--responsive-reading-cell-height, 19mm); }
.preset-preliminary-review .syllable-cell .marked-svg { width: min(56mm, calc(100% - 4mm)); height: 52px; }
.preset-preliminary-review .note-block { padding: 3mm 5mm; }

/* Variante reutilizable del repaso preliminar con el lenguaje editorial de Nivel 1.
   Se activa con un preset propio para que ningún otro proyecto cambie por accidente. */
.preset-nivel1-preliminary-review {
  display: flex;
  flex-direction: column;
  background: #fff;
  --preliminary-nivel1-green: #41ad49;
  --preliminary-nivel1-blue: #00aeef;
  --preliminary-nivel1-ink: #173b57;
}
.preset-nivel1-preliminary-review .sheet-heading {
  margin-bottom: 5mm;
  padding-bottom: 3.5mm;
  border-bottom: .7mm solid var(--preliminary-nivel1-green);
}
.preset-nivel1-preliminary-review .sheet-heading h1 { margin-top: 1.5mm; }
.preset-nivel1-preliminary-review .lesson-number { background: var(--preliminary-nivel1-green); }
.preset-nivel1-preliminary-review .page-block { margin-bottom: 2.5mm; }
.preset-nivel1-preliminary-review .instruction-block {
  padding: 3mm 4.5mm;
  border: var(--block-border-width, .35mm) solid var(--block-border-color, var(--preliminary-nivel1-green));
  border-radius: 4mm;
  background: var(--block-surface, #fff);
}
.preset-nivel1-preliminary-review .instruction-block p {
  margin-top: 1.2mm;
  line-height: var(--direct-line, var(--block-line, var(--style-instruction-text-line, 1.15)));
}
.preset-nivel1-preliminary-review .syllable-grid {
  flex: 1 1 auto;
  grid-auto-rows: minmax(0, 1fr);
  gap: 1.7mm;
}
.preset-nivel1-preliminary-review .syllable-cell {
  min-height: var(--responsive-reading-cell-height, 18mm);
  border-color: var(--block-border-color, #cbd8df);
  border-radius: 1.2mm;
  background: var(--block-surface, #fff);
}
.preset-nivel1-preliminary-review .syllable-cell .marked-svg {
  width: min(56mm, calc(100% - 3mm));
  /* El viewBox mide 56 unidades de alto. Mantener también 56 px evita que Chromium reduzca
     silenciosamente el cuerpo del estilo (28 pt terminaban viéndose como unos 17 pt). */
  height: 56px;
}
.preset-nivel1-preliminary-review[data-page-id="prelim-letters-joined"] .syllable-grid {
  grid-auto-rows: minmax(20mm, 1fr);
  gap: 2mm;
}
.preset-nivel1-preliminary-review[data-page-id="prelim-letters-joined"] .theory-examples:has(> .theory-example),
.print-sheet[data-page-id="prelim-letters-joined"] .preset-nivel1-preliminary-review .theory-examples {
  grid-template-columns: minmax(0, 1fr);
}
.preset-nivel1-preliminary-review:is(
  [data-page-id="prelim-sukun"],
  [data-page-id="prelim-natural-madd"]
) .theory-examples:has(> .theory-example),
.print-sheet:is(
  [data-page-id="prelim-sukun"],
  [data-page-id="prelim-natural-madd"]
) .preset-nivel1-preliminary-review .theory-examples {
  grid-template-columns: minmax(0, 1fr);
}
.preset-nivel1-preliminary-review .note-block {
  padding: 2.5mm 4.5mm;
  border: var(--block-border-width, .35mm) solid var(--block-border-color, var(--preliminary-nivel1-blue));
  border-radius: 3mm;
  background: var(--block-surface, #fff);
}
.preset-nivel1-preliminary-review:is(
  [data-page-id="prelim-short-vowels"],
  [data-page-id="prelim-sukun"],
  [data-page-id="prelim-natural-madd"]
) .theory-block,
.print-sheet:is(
  [data-page-id="prelim-short-vowels"],
  [data-page-id="prelim-sukun"],
  [data-page-id="prelim-natural-madd"]
) .preset-nivel1-preliminary-review .theory-block {
  display: block;
  flex: 0 0 auto;
}
.preset-nivel1-preliminary-review:is(
  [data-page-id="prelim-short-vowels"],
  [data-page-id="prelim-sukun"],
  [data-page-id="prelim-natural-madd"]
) .theory-examples,
.print-sheet:is(
  [data-page-id="prelim-short-vowels"],
  [data-page-id="prelim-sukun"],
  [data-page-id="prelim-natural-madd"]
) .preset-nivel1-preliminary-review .theory-examples {
  align-items: center;
}
.preset-nivel1-preliminary-review:is(
  [data-page-id="prelim-short-vowels"],
  [data-page-id="prelim-sukun"],
  [data-page-id="prelim-natural-madd"]
) .note-block,
.print-sheet:is(
  [data-page-id="prelim-short-vowels"],
  [data-page-id="prelim-sukun"],
  [data-page-id="prelim-natural-madd"]
) .preset-nivel1-preliminary-review .note-block {
  margin-top: auto;
}
.preset-nivel1-preliminary-review:is(
  [data-page-id="prelim-joining-breaks"],
  [data-page-id="page-69a296f2-d120-4b96-aaf7-e1050e103fe0"]
) .syllable-cell,
.print-sheet:is(
  [data-page-id="prelim-joining-breaks"],
  [data-page-id="page-69a296f2-d120-4b96-aaf7-e1050e103fe0"]
) .preset-nivel1-preliminary-review .syllable-cell {
  min-height: 0;
  padding: 0;
}
.preset-nivel1-preliminary-review:is(
  [data-page-id="prelim-joining-breaks"],
  [data-page-id="page-69a296f2-d120-4b96-aaf7-e1050e103fe0"]
) .syllable-cell .marked-svg,
.print-sheet:is(
  [data-page-id="prelim-joining-breaks"],
  [data-page-id="page-69a296f2-d120-4b96-aaf7-e1050e103fe0"]
) .preset-nivel1-preliminary-review .syllable-cell .marked-svg {
  height: 34px;
}
.preset-nivel1-preliminary-review:is(
  [data-page-id="prelim-joining-breaks"],
  [data-page-id="page-69a296f2-d120-4b96-aaf7-e1050e103fe0"]
) .syllable-cell .marked-svg text,
.print-sheet:is(
  [data-page-id="prelim-joining-breaks"],
  [data-page-id="page-69a296f2-d120-4b96-aaf7-e1050e103fe0"]
) .preset-nivel1-preliminary-review .syllable-cell .marked-svg text {
  /* Estas tablas necesitan un viewport compacto para que quepan quince filas. El viewBox de
     56 unidades lo reduce a 34 px; compensamos exactamente esa escala (56 / 34) para que el
     cuerpo visible siga siendo el 28 pt elegido en el estilo. */
  font-size: calc(var(--direct-size, var(--block-size, var(--style-exercise-text-size, 36pt))) * 1.6470588235);
}

/* Lección 4: pausa al final de la palabra. Mantiene el lenguaje visual de las lecciones de
   waṣlah y lām, pero compacta las tablas comparativas para que "en discurso = en pausa" se
   lea de un vistazo y las seis hojas no queden apretadas. */
.preset-waqf-lesson .sheet-heading { margin-bottom: 4mm; }
.preset-waqf-lesson .page-block { margin-bottom: 2mm; }
.preset-waqf-lesson .instruction-block { padding: 3mm 5mm; }
.preset-waqf-lesson .instruction-block p { margin-top: .8mm; line-height: var(--direct-line, var(--block-line, 1.35)); }
.preset-waqf-lesson .theory-copy { padding: 2.7mm 3.5mm; }
.preset-waqf-lesson .theory-copy p { margin: .7mm 0 0; line-height: var(--direct-line, var(--block-line, 1.3)); }
.preset-waqf-lesson .theory-examples { gap: 1.4mm; }
.preset-waqf-lesson .theory-example { padding: 1.2mm 1mm 1.4mm; }
.preset-waqf-lesson .theory-parts,
.preset-waqf-lesson .theory-result { min-height: 9mm; font-size: var(--direct-size, var(--block-size, 18pt)); line-height: var(--direct-line, var(--block-line, 1.25)); }
.preset-waqf-lesson .syllable-grid { gap: 1.4mm; }
.preset-waqf-lesson .syllable-cell { min-height: var(--responsive-reading-cell-height, 16mm); padding: 1.2mm 1.5mm; }
.preset-waqf-lesson .syllable-cell .marked-svg { width: min(52mm, calc(100% - 2mm)); height: 56px; }
.preset-waqf-lesson .syllable-cell .marked-svg text { font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 20pt))); }
.preset-waqf-lesson .note-block { padding: 2.7mm 4mm; }
.print-sheet[data-page-id="waqf-short-vowels"] .preset-waqf-lesson .syllable-cell,
.preset-waqf-lesson.page-canvas[data-page-id="waqf-short-vowels"] .syllable-cell {
  min-height: 14mm;
  padding: .5mm 1mm;
}
.print-sheet[data-page-id="waqf-short-vowels"] .preset-waqf-lesson .syllable-cell .marked-svg,
.preset-waqf-lesson.page-canvas[data-page-id="waqf-short-vowels"] .syllable-cell .marked-svg {
  height: 50px;
}
.preset-waqf-lesson .reading-block { padding: 5mm; line-height: var(--direct-line, var(--block-line, 1.9)); white-space: pre-line; }
.preset-waqf-lesson .reading-block.role-quran-quote {
  min-height: 0;
  padding: 2.4mm 4mm 2.8mm;
  border: var(--block-border-width, .3mm) solid var(--block-border-color, #d8dedb);
  border-radius: 3mm;
  text-align: center;
  line-height: var(--direct-line, var(--block-line, 1.5));
}
/* El glifo compuesto del encabezado «الْوَصْلُ أَوْلَىٰ» altera el origen vertical de esta
   hoja en el motor PDF de Chromium. La hoja es breve: compensamos solo en impresión y sin
   fijar la altura de ninguno de sus bloques editables. */
@media print {
  .print-sheet[data-page-id="waqf-sign-continue-preferred"] .page-canvas {
    padding-top: 31mm;
  }
}
.preset-reading .reading-block { min-height: 130mm; }

/* Edición espejo académica: reproduce el pliego original de 340 × 240 mm. */
.preset-shamail-spread {
  padding: 0;
  color: #202020;
  background: #fff;
}
.preset-shamail-spread > .sheet-heading { display: none; }
.preset-shamail-spread .shamail-spread-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.preset-shamail-spread .shamail-column {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.preset-shamail-spread .shamail-arabic-column {
  display: flex;
  flex-direction: column;
  padding: 13.5mm 22.5mm 18mm;
  background: #fff;
  font-family: "Noto Naskh Arabic", "Midad Uthman", serif;
  direction: rtl;
}
.preset-shamail-spread .shamail-arabic-column:has(> .page-block:nth-child(10)) {
  justify-content: space-between;
}
.preset-shamail-spread .shamail-spanish-column {
  padding: 11mm 8mm 15mm;
  background: #fff;
  font-family: "Noto Serif", Georgia, "Times New Roman", serif;
}
.preset-shamail-spread .page-block { margin: 0 0 1.05mm; }
.preset-shamail-spread .shamail-arabic-column .page-block { margin: 0; }
.preset-shamail-spread .shamail-arabic-column .editorial-block {
  text-align: var(--direct-text-align, var(--block-text-align, justify));
  text-justify: inter-word;
}
.preset-shamail-spread .shamail-arabic-column .role-subtitle {
  margin-bottom: 5.5mm;
  padding-bottom: 1.4mm;
  border-bottom: .18mm solid color-mix(in srgb, var(--coral, #8d1723) 52%, white);
  text-align: var(--direct-text-align, center);
}
.preset-shamail-spread .shamail-arabic-column .role-subtitle:has(+ .role-chapter-title) {
  margin-bottom: 9mm;
}
.preset-shamail-spread .shamail-arabic-column .role-chapter-title {
  margin: 0 0 4.2mm;
  padding: 1.1mm 4mm 1.5mm;
  background: #f7d8ce;
  text-align: var(--direct-text-align, center);
}
.preset-shamail-spread .shamail-arabic-column .role-isnad {
  margin-top: 2.4mm;
  padding: 0;
  text-align: var(--direct-text-align, justify);
}
.preset-shamail-spread .shamail-arabic-column .role-footnote {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  text-align: var(--direct-text-align, right);
}
.preset-shamail-spread .shamail-arabic-column .role-footnote:not(.role-footnote + .role-footnote) {
  margin-top: 4mm;
  padding-top: 0;
  border: 0;
}
.preset-shamail-spread .shamail-arabic-column .role-quran-quote {
  margin: 2.2mm 0;
  text-align: var(--direct-text-align, center);
}
.preset-shamail-spread .shamail-arabic-column .role-section-separator {
  color: var(--coral, #7d1724);
  text-align: var(--direct-text-align, center);
}
.preset-shamail-spread .editorial-block {
  color: var(--block-color, #202020);
  background: transparent;
  font-family: var(--direct-font, var(--block-font, "Noto Serif", Georgia, "Times New Roman", serif));
  font-size: var(--direct-size, var(--block-size, 9.5pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: var(--block-line, 1.28);
  text-align: var(--direct-text-align, var(--block-text-align, justify));
  white-space: pre-wrap;
  orphans: 2;
  widows: 2;
}
.preset-shamail-spread .role-section-title,
.preset-shamail-spread .role-chapter-title {
  margin: 0 4mm 3.2mm;
  color: var(--block-color, var(--coral, #7d1724));
  text-align: var(--direct-text-align, center);
  text-wrap: balance;
  break-after: avoid;
}
.preset-shamail-spread .role-subtitle { break-after: avoid; }
.preset-shamail-spread .role-hadith-number {
  margin-top: 2.4mm;
  margin-bottom: .8mm;
  color: var(--block-color, var(--coral, #7d1724));
  break-after: avoid;
}
.preset-shamail-spread .role-isnad {
  padding-left: 0;
  color: var(--block-color, #3c3c3c);
}
.preset-shamail-spread .role-matn { color: var(--block-color, #202020); }
.preset-shamail-spread .role-footnote,
.preset-shamail-spread .role-bibliographic-reference {
  margin-bottom: .55mm;
  color: var(--block-color, #3c3c3c);
  text-align: var(--direct-text-align, left);
}
.preset-shamail-spread .role-footnote:not(.role-footnote + .role-footnote),
.preset-shamail-spread .role-bibliographic-reference:not(.role-bibliographic-reference + .role-bibliographic-reference) {
  margin-top: 2.2mm;
  padding-top: 1.5mm;
  border-top: .18mm solid color-mix(in srgb, var(--coral, #8d1723) 45%, transparent);
}
.preset-shamail-spread .editorial-separator {
  width: 18mm;
  height: .25mm;
  margin: 2.2mm auto;
  background: var(--coral, #7d1724);
  opacity: .8;
}
.preset-shamail-spread .image-block.source-fragment {
  margin: -5.5mm -6mm -6.5mm;
  width: calc(100% + 12mm);
  height: calc(100% + 12mm);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
}
.preset-shamail-spread .image-block.source-fragment img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
.preset-shamail-spread .image-block.source-fragment figcaption { display: none; }
.preset-shamail-spread > .sheet-footer {
  z-index: 4;
  right: 0;
  bottom: 5mm;
  left: 50%;
  justify-content: center;
  padding: 0;
  border: 0;
  color: #8d6a6a;
  font-family: var(--direct-font, var(--block-font, "Noto Serif", Georgia, "Times New Roman", serif));
  font-size: var(--direct-size, var(--block-size, 6.8pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: var(--direct-line, var(--block-line, normal));
  direction: ltr;
}
.preset-shamail-spread > .sheet-footer span:first-child { display: none; }
.preset-shamail-spread .review-required { outline: .3mm dashed #b36a24; outline-offset: .6mm; }
@media print {
  .preset-shamail-spread .review-required { outline: 0; }
}
.preset-shamail-blank {
  padding: 0;
  background: #fff;
}
.preset-shamail-blank > .sheet-heading,
.preset-shamail-blank > .sheet-footer { display: none; }

/* Importación facsimilar nativa: los marcos conservan las coordenadas físicas del PDF, pero
   cada texto y cada casilla siguen siendo elementos HTML editables del proyecto. */
.preset-source-layout {
  padding: 0;
  background: #fff;
}
.preset-source-layout > .sheet-heading,
.preset-source-layout > .sheet-footer { display: none; }
.preset-source-layout[data-page-id^="prelim-"] > .sheet-heading {
  position: absolute;
  z-index: 20;
  inset: 10mm 10mm auto;
  display: flex;
  min-height: 23mm;
  margin: 0;
  padding: 1.5mm 2mm 2mm;
  border-bottom: .35mm solid var(--coral, #ed7464);
  background: #fff;
}
.preset-source-layout:is(
  [data-page-id="prelim-joining-breaks"],
  [data-page-id="page-69a296f2-d120-4b96-aaf7-e1050e103fe0"]
) > .sheet-heading {
  position: absolute;
  z-index: 20;
  inset: 10mm 10mm auto;
  display: flex;
  min-height: 23mm;
  margin: 0;
  padding: 1.5mm 2mm 2mm;
  border-bottom: .35mm solid var(--coral, #ed7464);
  background: #fff;
}
.preset-source-layout .page-block.is-positioned-frame {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0;
}
.preset-source-layout .editorial-block.is-positioned-frame {
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  border: var(--block-border-width, 0) solid var(--block-border-color, transparent);
  border-radius: 0;
  background: var(--block-surface, transparent);
  white-space: pre-wrap;
}
.preset-source-layout .editorial-block.is-positioned-frame.emphasis-soft {
  padding: 1.5mm 2.5mm;
  border-radius: 2mm;
}
.preset-source-layout .theory-block.is-positioned-frame {
  display: block;
  overflow: hidden;
}
.preset-source-layout .theory-block.is-positioned-frame .theory-copy {
  margin: 0 0 3mm;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.preset-source-layout .theory-block.is-positioned-frame .theory-copy strong {
  color: #696bb1;
  font-size: 16pt;
}
.preset-source-layout .theory-block.is-positioned-frame .theory-copy p {
  margin-top: .8mm;
  color: #496478;
  font: 10pt/1.25 Roboto, sans-serif;
}
.preset-source-layout .theory-block.is-positioned-frame .theory-examples { gap: 4mm; }
.preset-source-layout .theory-block.is-positioned-frame .theory-example { padding: 2mm; }
.preset-source-layout .syllable-grid.is-positioned-frame {
  gap: 0;
  overflow: hidden;
}
.preset-source-layout .syllable-grid.is-positioned-frame .syllable-cell {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-width: 0;
  border-radius: 0;
  background: transparent;
}
.preset-source-layout .syllable-grid.is-positioned-frame .syllable-cell > .inline-value-trigger {
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.preset-source-layout:is([data-page-id="prelim-joining-breaks"], [data-page-id="page-69a296f2-d120-4b96-aaf7-e1050e103fe0"]) .syllable-grid.is-positioned-frame {
  border-top: .2mm solid #c9d0d3;
  border-left: .2mm solid #c9d0d3;
  background: #fff;
}
.preset-source-layout:is([data-page-id="prelim-joining-breaks"], [data-page-id="page-69a296f2-d120-4b96-aaf7-e1050e103fe0"]) .syllable-grid.is-positioned-frame .syllable-cell {
  border: 0;
  border-right: .2mm solid #c9d0d3;
  border-bottom: .2mm solid #c9d0d3;
  background: #fff;
}
.preset-source-layout .syllable-grid.is-positioned-frame .marked-svg {
  width: calc(100% - 1mm);
  height: calc(100% - .5mm);
  min-height: 0;
  max-height: calc(100% - .5mm);
}
.preset-source-layout .editorial-separator.is-positioned-frame {
  margin: 0;
  border: var(--block-border-width, 0) solid var(--block-border-color, transparent);
  background: var(--block-surface, transparent);
}
.preset-source-layout .native-vector-layer.is-positioned-frame {
  display: block;
  overflow: hidden;
  pointer-events: none;
}

/* Edición coránica didáctica: páginas enfrentadas Medina 582–604. */
.preset-quran-title,
[class*="preset-quran-arabic-"],
[class*="preset-quran-spanish-"] {
  color: #1f302b;
  background:
    linear-gradient(90deg, transparent 0 4mm, rgba(176,139,62,.13) 4mm 4.25mm, transparent 4.25mm),
    var(--paper, #fffdf7);
  font-family: "Noto Serif", Georgia, serif;
}
.preset-quran-title::after,
[class*="preset-quran-arabic-"]::after,
[class*="preset-quran-spanish-"]::after {
  position: absolute;
  inset: 7mm;
  border: .25mm solid rgba(176,139,62,.36);
  content: "";
  pointer-events: none;
}
.preset-quran-title { padding: 36mm 25mm 24mm; text-align: center; }
.preset-quran-title .sheet-heading { display: block; margin: 0 0 27mm; text-align: center; }
.preset-quran-title .lesson-number,
.preset-quran-title > .sheet-footer { display: none; }
.preset-quran-title .editorial-block { margin: 0 0 12mm; white-space: pre-wrap; }
.preset-quran-title .editorial-separator { width: 36mm; height: .35mm; margin: 0 auto 12mm; background: #b08b3e; }

[class*="preset-quran-arabic-"],
[class*="preset-quran-spanish-"] { padding: 11mm 14mm 12mm; }
[class*="preset-quran-arabic-"] .sheet-heading,
[class*="preset-quran-spanish-"] .sheet-heading {
  position: relative;
  z-index: 1;
  align-items: center;
  margin: 0 0 3.4mm;
  padding: 0 1mm 2.8mm;
  border-bottom: .25mm solid rgba(176,139,62,.6);
}
[class*="preset-quran-arabic-"] .lesson-number,
[class*="preset-quran-spanish-"] .lesson-number {
  width: 10mm;
  height: 10mm;
  border: .25mm solid #b08b3e;
  border-radius: 50%;
  color: #174b3b;
  background: transparent;
  font: 8pt "Noto Serif", Georgia, serif;
}
[class*="preset-quran-arabic-"] .editorial-block,
[class*="preset-quran-spanish-"] .editorial-block {
  position: relative;
  z-index: 1;
  background: transparent;
  white-space: pre-wrap;
}
[class*="preset-quran-arabic-"] .role-chapter-title {
  margin: 1mm 0 .6mm;
  padding: .7mm 3mm 1mm;
  border: .22mm solid rgba(176,139,62,.45);
  color: #174b3b;
  background: rgba(176,139,62,.07);
  font-family: var(--direct-font, var(--block-font, "Midad Uthman", "Traditional Arabic", serif));
  text-align: var(--direct-text-align, center);
}
[class*="preset-quran-arabic-"] .role-chapter-title + .role-subtitle {
  margin: 0 0 .8mm;
  color: #174b3b;
  font-family: var(--direct-font, var(--block-font, "Midad Uthman", "Traditional Arabic", serif));
  text-align: var(--direct-text-align, center);
}
[class*="preset-quran-arabic-"] .role-quran-quote {
  margin: 0;
  color: #142b25;
  font-family: var(--direct-font, var(--block-font, "Midad Uthman", "Traditional Arabic", serif));
  text-align: var(--direct-text-align, right);
}
[class*="preset-quran-arabic-"] .role-quran-quote + .role-subtitle {
  margin: 0;
  padding: 0 1.5mm .45mm;
  color: #63736d;
  font-family: var(--direct-font, var(--block-font, "Noto Serif", Georgia, serif));
  font-style: italic;
  text-align: var(--direct-text-align, left);
}
.preset-quran-arabic-airy .role-quran-quote { font-size: var(--direct-size, var(--block-size, 14.5pt)); line-height: 1.3; }
.preset-quran-arabic-airy .role-quran-quote + .role-subtitle { font-size: var(--direct-size, var(--block-size, 8.1pt)); line-height: 1.17; padding-bottom: .8mm; }
.preset-quran-arabic-compact .role-quran-quote { font-size: var(--direct-size, var(--block-size, 10.5pt)); line-height: 1.2; }
.preset-quran-arabic-compact .role-quran-quote + .role-subtitle { font-size: var(--direct-size, var(--block-size, 6.7pt)); line-height: 1.08; padding-bottom: .3mm; }
.preset-quran-arabic-dense .sheet-heading { margin-bottom: 1.7mm; padding-bottom: 1.8mm; }
.preset-quran-arabic-dense .role-chapter-title { margin-top: .3mm; padding: .25mm 2mm .45mm; font-size: var(--direct-size, var(--block-size, 10pt)); line-height: 1.05; }
.preset-quran-arabic-dense .role-chapter-title + .role-subtitle { margin-bottom: .2mm; font-size: var(--direct-size, var(--block-size, 8.3pt)); line-height: 1; }
.preset-quran-arabic-dense .role-quran-quote { font-size: var(--direct-size, var(--block-size, 8.7pt)); line-height: 1.08; }
.preset-quran-arabic-dense .role-quran-quote + .role-subtitle { padding-bottom: 0; font-size: var(--direct-size, var(--block-size, 5.7pt)); line-height: 1.02; }

[class*="preset-quran-spanish-"] .role-quote-translation {
  margin: 0 0 .7mm;
  padding-left: 4.6mm;
  color: #20312b;
  font-family: var(--direct-font, var(--block-font, "Noto Serif", Georgia, serif));
  text-align: var(--direct-text-align, left);
}
[class*="preset-quran-spanish-"] .editorial-separator {
  width: 100%;
  height: .25mm;
  margin: 2mm 0 2.2mm;
  background: rgba(176,139,62,.62);
}
[class*="preset-quran-spanish-"] .role-explanation {
  margin: 0 0 1.6mm;
  padding: 1.4mm 2.3mm 1.5mm;
  border-left: .8mm solid #b08b3e;
  color: #39534a;
  background: rgba(176,139,62,.065);
  font-family: var(--direct-font, var(--block-font, "Noto Serif", Georgia, serif));
  text-align: var(--direct-text-align, left);
}
.preset-quran-spanish-airy .role-quote-translation { font-size: var(--direct-size, var(--block-size, 8.8pt)); line-height: 1.24; }
.preset-quran-spanish-airy .role-explanation { font-size: var(--direct-size, var(--block-size, 8pt)); line-height: 1.25; }
.preset-quran-spanish-compact .role-quote-translation { margin-bottom: .35mm; font-size: var(--direct-size, var(--block-size, 7.4pt)); line-height: 1.15; }
.preset-quran-spanish-compact .role-explanation { margin-bottom: .8mm; padding-top: .8mm; padding-bottom: .9mm; font-size: var(--direct-size, var(--block-size, 7pt)); line-height: 1.15; }
.preset-quran-spanish-dense .sheet-heading { margin-bottom: 1.8mm; padding-bottom: 1.8mm; }
.preset-quran-spanish-dense .role-quote-translation { margin-bottom: .1mm; padding-left: 3.7mm; font-size: var(--direct-size, var(--block-size, 6.15pt)); line-height: 1.05; }
.preset-quran-spanish-dense .editorial-separator { margin: .8mm 0 1mm; }
.preset-quran-spanish-dense .role-explanation { margin-bottom: .45mm; padding: .5mm 1.7mm .6mm; font-size: var(--direct-size, var(--block-size, 6.2pt)); line-height: 1.07; }

[class*="preset-quran-arabic-"] > .sheet-footer,
[class*="preset-quran-spanish-"] > .sheet-footer {
  z-index: 2;
  right: 14mm;
  bottom: 7.5mm;
  left: 14mm;
  padding-top: 1.6mm;
  border-color: rgba(176,139,62,.45);
  color: #6f7f79;
  font-family: "Noto Serif", Georgia, serif;
  font-size: 6.8pt;
}

/* Prototipo Muṣḥaf interlineal · formato 190 × 270 mm. */
.preset-mushaf-prototype-title,
.preset-mushaf-interlinear-arabic,
.preset-mushaf-interlinear-spanish {
  padding: 13mm 14mm 15mm;
  color: #172723;
  background-color: #fffef8;
  background-image:
    radial-gradient(circle at 7mm 7mm, rgba(45,116,103,.16) 0 1.4mm, transparent 1.5mm),
    radial-gradient(circle at calc(100% - 7mm) 7mm, rgba(45,116,103,.16) 0 1.4mm, transparent 1.5mm),
    radial-gradient(circle at 7mm calc(100% - 7mm), rgba(45,116,103,.16) 0 1.4mm, transparent 1.5mm),
    radial-gradient(circle at calc(100% - 7mm) calc(100% - 7mm), rgba(45,116,103,.16) 0 1.4mm, transparent 1.5mm);
  font-family: "Noto Serif", Georgia, serif;
}
.preset-mushaf-prototype-title::before,
.preset-mushaf-interlinear-arabic::before,
.preset-mushaf-interlinear-spanish::before {
  display: block !important;
  position: absolute;
  z-index: 0;
  inset: 4mm;
  border: 1.1mm double #2d7467;
  box-shadow: inset 0 0 0 .35mm #a8c4b8, inset 0 0 0 1.8mm rgba(45,116,103,.07);
  content: "";
  pointer-events: none;
}
.preset-mushaf-prototype-title::after,
.preset-mushaf-interlinear-arabic::after,
.preset-mushaf-interlinear-spanish::after {
  position: absolute;
  z-index: 0;
  inset: 7mm;
  border: .25mm solid #89ab9d;
  content: "";
  pointer-events: none;
}
.preset-mushaf-prototype-title > *,
.preset-mushaf-interlinear-arabic > *,
.preset-mushaf-interlinear-spanish > * { position: relative; z-index: 1; }
.preset-mushaf-prototype-title > .sheet-heading,
.preset-mushaf-interlinear-arabic > .sheet-heading,
.preset-mushaf-interlinear-spanish > .sheet-heading { display: none; }
.preset-mushaf-prototype-title > .sheet-footer { display: none; }
.preset-mushaf-prototype-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 25mm;
  padding-left: 25mm;
  text-align: center;
}
.preset-mushaf-prototype-title .role-chapter-title {
  margin: 0 0 12mm;
  color: #164c42;
  font-family: var(--direct-font, var(--block-font, "Midad Uthman", "Traditional Arabic", serif));
  font-size: var(--direct-size, var(--block-size, 30pt));
  line-height: 1.2;
}
.preset-mushaf-prototype-title .role-editorial-text {
  color: var(--block-color, #52635e);
  font-family: var(--direct-font, var(--block-font, "Noto Serif", Georgia, serif));
  font-size: var(--direct-size, var(--block-size, 10pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: var(--direct-line, var(--block-line, 1.5));
}

.preset-mushaf-interlinear-arabic {
  display: block;
  padding: 13mm 15mm 14mm;
  color: #16140d;
  background-color: #fffdf4;
}
.preset-mushaf-interlinear-arabic .page-block {
  box-sizing: border-box;
  margin: 0;
  background: transparent;
}
.preset-mushaf-interlinear-arabic .role-quran-quote {
  height: 9mm;
  padding: 0 1mm;
  color: #15130d;
  font-family: var(--direct-font, var(--block-font, "Midad Uthman", "Traditional Arabic", serif));
  font-size: var(--direct-size, var(--block-size, 18pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: 9mm;
  text-align: var(--direct-text-align, center);
  white-space: nowrap;
}
.preset-mushaf-interlinear-arabic .role-quran-quote + .role-subtitle {
  height: 5.9mm;
  margin: 0;
  padding: 0 2mm 1.5mm;
  color: #4c5e58;
  font-family: var(--direct-font, var(--block-font, "Noto Serif", Georgia, serif));
  font-size: var(--direct-size, var(--block-size, 8pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: 4mm;
  letter-spacing: .01em;
  text-align: var(--direct-text-align, center);
  white-space: nowrap;
}
.preset-mushaf-interlinear-arabic .role-chapter-title {
  position: relative;
  display: grid;
  height: 14mm;
  place-items: center;
  overflow: hidden;
  border: .4mm solid #47694f;
  border-radius: 5mm 5mm 4mm 4mm / 3mm;
  color: #17140d;
  background:
    radial-gradient(circle at 6mm 50%, #d6b447 0 .75mm, #345f49 .8mm 1.5mm, transparent 1.6mm),
    radial-gradient(circle at calc(100% - 6mm) 50%, #d6b447 0 .75mm, #345f49 .8mm 1.5mm, transparent 1.6mm),
    repeating-linear-gradient(45deg, rgba(215,181,70,.9) 0 .6mm, rgba(49,100,75,.9) .65mm 1.2mm, rgba(250,244,206,.9) 1.25mm 1.8mm);
  box-shadow: inset 0 0 0 .45mm #d5bc62, inset 0 0 0 1mm rgba(255,255,255,.72);
  font-family: var(--direct-font, var(--block-font, "Midad Uthman", "Traditional Arabic", serif));
  font-size: var(--direct-size, var(--block-size, 18pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: 1;
  text-align: var(--direct-text-align, center);
  white-space: nowrap;
}
.preset-mushaf-interlinear-arabic .role-chapter-title::before,
.preset-mushaf-interlinear-arabic .role-chapter-title::after {
  position: absolute;
  top: 50%;
  display: grid;
  width: 8mm;
  height: 8mm;
  transform: translateY(-50%);
  place-items: center;
  border: .35mm solid #345f49;
  border-radius: 50%;
  color: #1e4937;
  background: #fffdf4;
  box-shadow: 0 0 0 .45mm #d5bc62;
  content: attr(data-sura-number);
  font: 7.4pt/1 "Midad Uthman", serif;
}
.preset-mushaf-interlinear-arabic .role-chapter-title::before { left: 3.2mm; }
.preset-mushaf-interlinear-arabic .role-chapter-title::after { right: 3.2mm; }
.preset-mushaf-interlinear-arabic .mushaf-sura-title-text {
  position: relative;
  z-index: 1;
  display: inline-grid;
  min-width: 78mm;
  height: 9.2mm;
  place-items: center;
  padding: 0 8mm;
  border: .35mm solid #345f49;
  border-radius: 50% / 70%;
  background: #fffdf4;
  box-shadow: 0 0 0 .45mm #d5bc62;
}
.preset-mushaf-interlinear-arabic .role-chapter-title + .role-subtitle {
  height: 4.9mm;
  margin: 0;
  padding-top: .4mm;
  color: #52635e;
  font-family: var(--direct-font, var(--block-font, "Noto Serif", Georgia, serif));
  font-size: var(--direct-size, var(--block-size, 7.2pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: var(--direct-line, var(--block-line, 3.5mm));
  text-align: var(--direct-text-align, center);
}
.preset-mushaf-interlinear-arabic .role-section-title {
  height: 9mm;
  margin: 0;
  color: #17140d;
  font-family: var(--direct-font, var(--block-font, "Midad Uthman", "Traditional Arabic", serif));
  font-size: var(--direct-size, var(--block-size, 17pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: 9mm;
  text-align: var(--direct-text-align, center);
  white-space: nowrap;
}
.preset-mushaf-interlinear-arabic .role-section-title + .role-subtitle {
  height: 5mm;
  margin: 0;
  padding-bottom: 1.1mm;
  color: #52635e;
  font-family: var(--direct-font, var(--block-font, "Noto Serif", Georgia, serif));
  font-size: var(--direct-size, var(--block-size, 7.4pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: var(--direct-line, var(--block-line, 3.5mm));
  text-align: var(--direct-text-align, center);
}
.preset-mushaf-interlinear-arabic .mushaf-ayah-medallion {
  position: relative;
  top: .08em;
  display: inline-grid;
  width: 1.42em;
  height: 1.42em;
  margin: 0 .12em;
  vertical-align: middle;
  place-items: center;
  border: .08em solid #315f49;
  border-radius: 42% 58% 45% 55% / 55% 43% 57% 45%;
  color: #183e30;
  background: #f5d84c;
  box-shadow: inset 0 0 0 .08em #fff7a4, 0 0 0 .055em #c09523;
  font: 400 .48em/1 "Midad Uthman", "Traditional Arabic", serif;
}
.preset-mushaf-interlinear-arabic .mushaf-search-text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: #fffdf4;
  font: 1pt/1 "DejaVu Sans", sans-serif;
  font-feature-settings: "init" 0, "medi" 0, "fina" 0, "isol" 0, "rlig" 0, "liga" 0;
  direction: rtl;
  unicode-bidi: plaintext;
  white-space: nowrap;
}
.preset-mushaf-interlinear-arabic.phonetic-hidden .role-subtitle { visibility: hidden; }
.preset-mushaf-interlinear-arabic > .sheet-footer,
.preset-mushaf-interlinear-spanish > .sheet-footer {
  position: absolute;
  right: 50%;
  bottom: 6.2mm;
  left: auto;
  width: 18mm;
  transform: translateX(50%);
  justify-content: center;
  padding: .6mm 0 .8mm;
  border: .25mm solid #2d7467;
  border-radius: 50%;
  color: #164c42;
  background: #fffef8;
  font: 7pt/1 "Noto Serif", Georgia, serif;
}
.preset-mushaf-interlinear-arabic > .sheet-footer span:first-child,
.preset-mushaf-interlinear-spanish > .sheet-footer span:first-child { display: none; }

.preset-mushaf-interlinear-spanish {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14mm 17mm 16mm 19mm;
}
.preset-mushaf-interlinear-spanish .page-block { position: relative; margin: 0 0 1mm; background: transparent; }
.preset-mushaf-interlinear-spanish .role-guide-text {
  margin: 0 0 3.2mm;
  padding: 2.4mm 3mm;
  border: .25mm solid #b59c58;
  border-radius: 1.2mm;
  color: #304a42;
  background: rgba(213,188,98,.11);
  font-family: var(--direct-font, var(--block-font, "Noto Serif", Georgia, serif));
  font-size: var(--direct-size, var(--block-size, 10.5pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: var(--direct-line, var(--block-line, 1.3));
  text-align: var(--direct-text-align, left);
}
.preset-mushaf-interlinear-spanish .role-chapter-title {
  margin: 2.4mm 0 1mm;
  padding: 1.1mm 3mm;
  border: .25mm solid #89ab9d;
  border-radius: 50% / 70%;
  color: #164c42;
  background: rgba(45,116,103,.07);
  font-family: var(--direct-font, var(--block-font, "Noto Serif", Georgia, serif));
  font-size: var(--direct-size, var(--block-size, 14.5pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: var(--direct-line, var(--block-line, 1.1));
  text-align: var(--direct-text-align, center);
}
.preset-mushaf-interlinear-spanish .role-quote-translation {
  padding-left: 4.5mm;
  color: #1d302b;
  font-family: var(--direct-font, var(--block-font, "Noto Serif", Georgia, serif));
  font-size: var(--direct-size, var(--block-size, 12pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: var(--direct-line, var(--block-line, 1.25));
  text-align: var(--direct-text-align, left);
}
.preset-mushaf-interlinear-spanish .editorial-separator {
  display: none;
}
.preset-mushaf-interlinear-spanish .role-explanation {
  margin: 1mm 0;
  padding: 1.6mm 2.2mm;
  border-left: .8mm solid #b59c58;
  color: #36534a;
  background: rgba(45,116,103,.045);
  font-family: var(--direct-font, var(--block-font, "Noto Serif", Georgia, serif));
  font-size: var(--direct-size, var(--block-size, 10.75pt));
  font-weight: var(--direct-weight, var(--block-weight, 400));
  line-height: var(--direct-line, var(--block-line, 1.28));
  text-align: var(--direct-text-align, left);
}

/* Muṣḥaf 604 · marco iluminado azul y coral, revisión elegante. */
.preset-mushaf-interlinear-arabic,
.preset-mushaf-interlinear-spanish {
  background: #fbf6e8 url("/api/projects/dos-ultimos-ahzab-prototipo-interlineal/assets/mushaf-frame-blue-coral-v2.png") center / 100% 100% no-repeat;
}
.preset-mushaf-interlinear-arabic::before,
.preset-mushaf-interlinear-arabic::after,
.preset-mushaf-interlinear-spanish::before,
.preset-mushaf-interlinear-spanish::after { display: none !important; }

.preset-mushaf-interlinear-arabic { padding: 21mm 17.5mm 16mm; }
.preset-mushaf-interlinear-spanish { padding: 22mm 20mm 18mm 22mm; }

.preset-mushaf-interlinear-arabic > .sheet-heading,
.preset-mushaf-interlinear-spanish > .sheet-heading {
  position: absolute;
  top: 4.4mm;
  right: 22mm;
  left: 22mm;
  z-index: 3;
  display: block;
  height: 10mm;
  margin: 0;
}
.preset-mushaf-interlinear-arabic > .sheet-heading > div,
.preset-mushaf-interlinear-spanish > .sheet-heading > div { display: contents; }
.preset-mushaf-interlinear-arabic > .sheet-heading .eyebrow,
.preset-mushaf-interlinear-spanish > .sheet-heading .eyebrow,
.preset-mushaf-interlinear-arabic > .sheet-heading h1,
.preset-mushaf-interlinear-spanish > .sheet-heading h1 {
  position: absolute;
  top: 0;
  display: grid;
  width: 51mm;
  height: 9mm;
  place-items: center;
  margin: 0;
  padding: 0;
  color: #183d57;
  background: transparent;
  font-family: "Noto Serif", "Midad Uthman", serif;
  font-size: 8.4pt;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
.preset-mushaf-interlinear-arabic > .sheet-heading .eyebrow,
.preset-mushaf-interlinear-spanish > .sheet-heading .eyebrow { right: 0; }
.preset-mushaf-interlinear-arabic > .sheet-heading h1,
.preset-mushaf-interlinear-spanish > .sheet-heading h1 { left: 0; }
.preset-mushaf-interlinear-arabic > .sheet-heading .eyebrow,
.preset-mushaf-interlinear-arabic > .sheet-heading h1 {
  font-family: "Midad Uthman", "Traditional Arabic", serif;
  font-size: 11pt;
}
.preset-mushaf-interlinear-arabic > .sheet-heading .lesson-number,
.preset-mushaf-interlinear-spanish > .sheet-heading .lesson-number { display: none; }

.preset-mushaf-interlinear-arabic .role-chapter-title {
  height: 14mm;
  overflow: hidden;
  border: .28mm solid #2b6e91;
  border-radius: 1.4mm;
  background:
    linear-gradient(90deg, rgba(43,110,145,.96) 0 1.2mm, transparent 1.2mm calc(100% - 1.2mm), rgba(43,110,145,.96) calc(100% - 1.2mm)),
    repeating-linear-gradient(135deg, rgba(43,110,145,.18) 0 1.2mm, rgba(210,139,142,.22) 1.2mm 2.4mm),
    #fbf6e8;
  box-shadow: inset 0 0 0 .35mm #f4d6c7, inset 0 0 0 .7mm rgba(213,182,111,.55);
}
.preset-mushaf-interlinear-arabic .mushaf-sura-title-text {
  min-width: 66mm;
  height: 8.7mm;
  padding: 0 8mm;
  border: .28mm solid #2b6e91;
  border-radius: 48% / 68%;
  background: #fbf6e8;
  box-shadow: 0 0 0 .22mm #d28b8e, 0 0 0 .46mm #f4d6c7;
}
.preset-mushaf-interlinear-arabic .role-chapter-title::before,
.preset-mushaf-interlinear-arabic .role-chapter-title::after {
  top: 50%;
  width: 34mm;
  height: 8mm;
  border: 0;
  border-radius: 0;
  color: #295f7d;
  background: transparent;
  box-shadow: none;
  font: 7.6pt/1 "Midad Uthman", serif;
}
.preset-mushaf-interlinear-arabic .role-chapter-title::before { left: 2mm; }
.preset-mushaf-interlinear-arabic .role-chapter-title::after { right: 2mm; }

.preset-mushaf-interlinear-arabic .mushaf-ayah-medallion {
  border-color: #2d6e91;
  color: #1d506d;
  background:
    radial-gradient(circle at 50% 10%, #cf6e78 0 .11em, transparent .12em),
    radial-gradient(circle at 90% 50%, #cf6e78 0 .11em, transparent .12em),
    radial-gradient(circle at 50% 90%, #cf6e78 0 .11em, transparent .12em),
    radial-gradient(circle at 10% 50%, #cf6e78 0 .11em, transparent .12em),
    #f7efdd;
  box-shadow: inset 0 0 0 .055em #d5b66f, 0 0 0 .045em #cf7b83;
}
.preset-mushaf-interlinear-arabic .role-quran-quote + .role-subtitle,
.preset-mushaf-interlinear-arabic .role-chapter-title + .role-subtitle,
.preset-mushaf-interlinear-arabic .role-section-title + .role-subtitle { color: #526876; }

.preset-mushaf-interlinear-arabic > .sheet-footer,
.preset-mushaf-interlinear-spanish > .sheet-footer {
  bottom: 4.2mm;
  width: 14mm;
  height: 9mm;
  padding: 0;
  border: 0;
  color: #265d7b;
  background: transparent;
  font-size: 7.8pt;
}

/* =============================================================================
   Formato de párrafo por bloque (panel de carácter y párrafo)
   Añadido el 2026-08-06.

   El cuerpo, la familia y el grosor se resuelven con var(--direct-*) dentro de las reglas de
   cada diseño de página. El interlineado, el tracking y los márgenes NO: están fijados en
   decenas de reglas y transformarlas todas era arriesgado, así que se aplican aquí mediante
   una clase marcadora que el renderizador añade SOLO cuando el bloque tiene ese valor. Un
   documento que no toca nada no ve ninguna de estas reglas, y por tanto sale idéntico.

   Van al final del archivo a propósito: con `.page-canvas` delante suman tres clases de
   especificidad y, al ir últimas, ganan a las reglas de los diseños de página sin necesidad
   de recurrir a !important.
   ============================================================================= */

.page-canvas .page-block.has-direct-line { line-height: var(--direct-line); }
.page-canvas .page-block.has-direct-tracking { letter-spacing: var(--direct-tracking); }
.page-canvas .page-block.has-direct-indent { text-indent: var(--direct-indent); }
.page-canvas .page-block.has-direct-space-before { margin-block-start: var(--direct-space-before); }
.page-canvas .page-block.has-direct-space-after { margin-block-end: var(--direct-space-after); }
.page-canvas .page-block.has-direct-align { text-align: var(--direct-text-align); }

/* El interlineado y el tracking se heredan al texto interior de los bloques compuestos
   (enunciados, teoría, lectura), que es lo que se espera de un panel de párrafo. */
.page-canvas .page-block.has-direct-line > p,
.page-canvas .page-block.has-direct-line > strong,
.page-canvas .page-block.has-direct-line > header > p { line-height: var(--direct-line); }
.page-canvas .page-block.has-direct-tracking > p,
.page-canvas .page-block.has-direct-tracking > strong,
.page-canvas .page-block.has-direct-tracking > header > p { letter-spacing: var(--direct-tracking); }

/* La sangría de primera línea solo tiene sentido en texto corrido, no en cuadrículas ni en
   listas de palabras: en esos bloques el texto va en celdas y una sangría los descuadra. */
.page-canvas .syllable-grid-block.has-direct-indent,
.page-canvas .search-cloud-block.has-direct-indent,
.page-canvas .trace-block.has-direct-indent,
.page-canvas .image-block.has-direct-indent { text-indent: 0; }

/* Maqueta de la lección «shadda seguida de sukūn».
   Es exactamente la de shadda + tanwīn y shadda + madd: esos dos bloques de reglas, más arriba en
   este archivo, ya son idénticos entre sí salvo el nombre del preset. Queda apuntado que los tres
   piden agruparse en un solo `:is(...)`; no lo hago en el mismo cambio que añade la lección para
   no mezclar una reorganización con una función nueva. */
.preset-shadda-sukun .sheet-heading { margin-bottom: 5mm; }
.preset-shadda-sukun .page-block { margin-bottom: 2.2mm; }
.preset-shadda-sukun .instruction-block { padding: 3mm 5mm; }
.preset-shadda-sukun .instruction-block p { margin-top: 1mm; line-height: var(--direct-line, var(--block-line, 1.35)); }
.preset-shadda-sukun .theory-copy { padding: 3mm 4mm; }
.preset-shadda-sukun .theory-copy p { margin: .7mm 0 0; line-height: var(--direct-line, var(--block-line, 1.3)); }
.preset-shadda-sukun .theory-examples { gap: 2mm; }
.preset-shadda-sukun .theory-example { padding: 1.5mm 1.2mm 1.7mm; }
.preset-shadda-sukun .theory-parts,
.preset-shadda-sukun .theory-result { min-height: 10mm; font-size: var(--direct-size, var(--block-size, 21pt)); }
.preset-shadda-sukun .syllable-grid { gap: 1.8mm; }
.preset-shadda-sukun .syllable-cell { min-height: var(--responsive-reading-cell-height, 19mm); }
.preset-shadda-sukun .syllable-cell .marked-svg { height: 56px; }
.preset-shadda-sukun .syllable-cell .marked-svg text { font-size: var(--direct-size, var(--block-size, var(--style-exercise-text-size, 18pt))); }

/* Color del texto y de las علامات, puestos desde la barra de formato.
   El de las marcas gana al acento del proyecto, que es lo único que había hasta ahora: un color
   para todo el libro que además teñía otras cosas de la página. */
.page-canvas .page-block.has-direct-color,
.page-canvas .page-block.has-direct-color > p,
.page-canvas .page-block.has-direct-color > strong,
.page-canvas .page-block.has-direct-color > header > p { color: var(--direct-color); }
/* `:not(.marked-svg-accent)` no es un adorno: la capa de las marcas TAMBIÉN es un <text> dentro
   de .marked-svg, así que sin esta exclusión el color de la letra le ganaba por especificidad y
   las marcas salían del color de la letra. Medido: pedía verde y salía azul. */
.page-canvas .has-direct-color .marked-svg text:not(.marked-svg-accent) { fill: var(--direct-color); }
.page-canvas .has-direct-color .marked-svg-base { fill: var(--direct-color); }
.page-canvas .has-direct-mark-color .marked-svg-accent { fill: var(--direct-mark-color); }

/* El fondo elegido expresamente en Apariencia debe ganar al fondo decorativo de cualquier
   maqueta. `background-image: none` elimina también los degradados fijos que hacían que algunos
   ejercicios no llegaran a verse blancos. Si se eligió un patrón, la segunda regla lo repone. */
.page-canvas .page-block.has-custom-background {
  background-color: var(--block-surface);
  background-image: none;
}
.page-canvas .page-block.has-custom-background.has-pattern {
  background-image: var(--block-pattern-image);
}
.page-block.has-custom-background.has-pattern.is-white-background {
  background-image: none;
}
.page-canvas .theory-block.has-custom-background .theory-copy {
  background-color: var(--block-surface);
  background-image: none;
}
.page-canvas .theory-block.has-custom-background.has-pattern:not(.is-white-background) .theory-copy {
  background-image: var(--block-pattern-image);
}

/* Las fichas del ejercicio de búsqueda son parte visual del fondo del bloque. Cuando el usuario
   configura el fondo, siguen la misma elección en vez de conservar sus colores pastel fijos. */
.page-canvas .search-field-sheet.has-custom-background .search-token {
  background-color: var(--block-surface);
}