/* ============================================================
   INSULARIUS SIGNATURE — EDITOR EXTENSIONS v1.0
   Headings, alignment, lists, color, highlight, undo, etc
   v3.1.8f
   ============================================================ */

/* Headings — en el editor docx */
#sig-docx-editor h1, .doc-content h1 {
  font-size: 2em;       /* 28px */
  font-weight: 700;
  line-height: 1.2;
  margin: 0.67em 0;
}
#sig-docx-editor h2, .doc-content h2 {
  font-size: 1.5em;     /* 21px */
  font-weight: 600;
  line-height: 1.3;
  margin: 0.75em 0;
}
#sig-docx-editor h3, .doc-content h3 {
  font-size: 1.25em;    /* 17.5px */
  font-weight: 600;
  line-height: 1.4;
  margin: 0.83em 0;
}
#sig-docx-editor h4, .doc-content h4 {
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.5;
  margin: 1em 0;
}
#sig-docx-editor p, .doc-content p {
  margin: 0.5em 0;
  line-height: 1.6;
}

/* Blockquote (estilo legal) */
#sig-docx-editor blockquote, .doc-content blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.5em 1em;
  margin: 1em 0;
  color: var(--ink2);
  font-style: italic;
  background: var(--neutral-50);
}

/* Code (mono) */
#sig-docx-editor code, .doc-content code {
  font-family: var(--font-mono);
  background: var(--neutral-100);
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  font-size: 0.9em;
}

/* Lists */
#sig-docx-editor ul, .doc-content ul,
#sig-docx-editor ol, .doc-content ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}
#sig-docx-editor ul li, .doc-content ul li {
  list-style: disc;
}
#sig-docx-editor ol li, .doc-content ol li {
  list-style: decimal;
}

/* Alignment */
#sig-docx-editor .align-left, .doc-content .align-left { text-align: left; }
#sig-docx-editor .align-center, .doc-content .align-center { text-align: center; }
#sig-docx-editor .align-right, .doc-content .align-right { text-align: right; }
#sig-docx-editor .align-justify, .doc-content .align-justify { text-align: justify; }

/* ============================================================
   RIBBON v2.0 — additions for font/size/color/undo
   ============================================================ */

/* Font dropdown */
.ribbon-font-select, .ribbon-size-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 24px 4px 8px;
  font: 500 var(--text-xs) var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  min-width: 110px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.ribbon-font-select:hover, .ribbon-size-select:hover {
  border-color: var(--ink3);
}
.ribbon-font-select:focus, .ribbon-size-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

/* Color swatches (paleta estándar de editor de texto) */
.ribbon-color-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.ribbon-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring);
}
.ribbon-color-swatch:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-sm);
}

/* Toolbar dropdown wrapper */
.ribbon-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--z-modal);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  min-width: 240px;
  animation: ribbonDropIn var(--duration-fast) var(--ease-spring);
}
@keyframes ribbonDropIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   HEADING PICKER (paragraph style)
   ============================================================ */
.ribbon-heading-picker {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 24px 4px 8px;
  font: 500 var(--text-xs) var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  min-width: 120px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.ribbon-heading-picker:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }

/* ============================================================
   RICH-TEXT FEEDBACK
   ============================================================ */
#sig-docx-editor[data-empty='true']:before {
  content: attr(data-placeholder);
  color: var(--ink3);
  pointer-events: none;
  position: absolute;
  font-style: italic;
}

/* Selection highlight (para que se vea cuando el user selecciona) */
#sig-docx-editor ::selection {
  background: rgba(94, 106, 210, 0.2);
}

/* ============================================================
   TOOLBAR ENHANCEMENTS — divider visual entre secciones
   ============================================================ */
.ribbon-section-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 4px var(--space-2);
}


/* ============================================================
   v3.1.10 (Andry): wizard footer responsive.
   Bug: en el modal "Nueva plantilla" -> tab Campos, los botones
   "← Documento" y "Guardar plantilla" no se ajustaban al tamano
   de pantalla — se salian o no cabian en mobile/tablet.
   Fix: flexWrap inline en el div + media query que reduce padding
   y estira los botones a ancho completo bajo 640px.
   ============================================================ */
.wizard-footer { box-sizing: border-box; }
.wizard-footer > button { min-width: 0; }
.wizard-footer-right > button { min-width: 0; }
@media (max-width: 640px) {
  .wizard-footer {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .wizard-footer > button,
  .wizard-footer-right > button {
    flex: 1 1 auto;
    justify-content: center;
  }
  .wizard-footer-right {
    width: 100%;
    justify-content: space-between;
  }
}