/*
 * Lander HTML Editor - estilos de la barra de herramientas, panel de estado
 * y ventana emergente de vista previa.
 */

/* ---------- Contenedor del editor (el propio wrapper de CodeMirror) ---------- */
.lhe-root[data-lhe] {
  display: flex;
  flex-direction: column;
  margin: 6px 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  max-width: 100%;
  min-width: 0;
  /* Tipografía del código: las líneas heredan del root
     (codemirror.css usa font: inherit en .CodeMirror-line). */
  font-family: Consolas, Menlo, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
  /* Crítico: CodeMirror fija min-width del sizer con la línea más larga
     (modo sin wrap). Sin esto, ese min-width se propaga como min-content
     hasta los fieldset del panel (min-width:min-content en Chromium) y
     revienta el grid entero. */
  contain: inline-size;
}

/* Reserva dentro de la altura del editor el espacio ocupado por la barra y
   el panel de validación, para que las líneas desplazadas sigan visibles. */
.lhe-root[data-lhe] > .CodeMirror-scroll {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
}

/* ---------- Barra de herramientas ---------- */
.lhe-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(#fdfdfd, #f0f2f5);
  border-bottom: 1px solid #d4d9e0;
  min-width: 0;
}

.lhe-toolbar-brand {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
}

.lhe-toolbar-brand img {
  height: 18px;
  display: block;
}

.lhe-toolbar-field {
  margin-left: auto;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8a94a3;
  font-size: 11px;
  direction: rtl; /* muestra el final del nombre */
  text-align: left;
}

.lhe-btn {
  appearance: none;
  border: 1px solid #b9c2cc;
  border-radius: 3px;
  background: linear-gradient(#ffffff, #eef1f5);
  color: #33414f;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}

.lhe-btn:hover {
  background: linear-gradient(#f4f7fb, #e3eaf3);
  border-color: #7aa7d8;
}

.lhe-btn:active { background: #dde6f0; }

.lhe-btn-mini { padding: 3px 8px; font-size: 11px; }

.lhe-validate { border-color: #79b779; color: #2c6e2c; }
.lhe-validate:hover { background: linear-gradient(#f2fbf2, #dff3df); border-color: #4d9e4d; }

.lhe-format { border-color: #d8b04c; color: #7a5c10; }
.lhe-format:hover { background: linear-gradient(#fffaf0, #faefcf); border-color: #c99a2e; }

.lhe-preview { border-color: #7aa7d8; color: #23578f; }
.lhe-preview:hover { background: linear-gradient(#f2f8ff, #dfeafa); border-color: #4a86c8; }

.lhe-fullscreen { border-color: #9a86c8; color: #5b3fa0; }
.lhe-fullscreen:hover { background: linear-gradient(#f7f4ff, #e9e2f7); border-color: #7a5fb8; }

/* ---------- Panel de estado / validación ---------- */
.lhe-status {
  display: none;
  flex: 0 0 auto;
  max-height: 180px;
  overflow: auto;
  padding: 8px 10px;
  font-size: 12px;
  border-bottom: 1px solid #d4d9e0;
}

.lhe-status--ok {
  background: #f2fbf2;
  color: #256025;
  border-bottom-color: #bfe3bf;
}

.lhe-status--warn {
  background: #fdf8e7;
  color: #7a5c10;
  border-bottom-color: #ecd9a0;
}

.lhe-status--error {
  background: #fdf2f2;
  color: #8c2020;
  border-bottom-color: #eec3c3;
}

.lhe-status--info {
  background: #f4f8fd;
  color: #23486e;
}

.lhe-status strong { font-size: 12.5px; }

.lhe-status ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.lhe-status li {
  cursor: pointer;
  list-style: disc;
  margin: 2px 0;
}

.lhe-status li:hover { text-decoration: underline; }

.lhe-status-sub { margin-top: 6px; color: #6b6b3a; }

/* ---------- Ventana emergente (modal) ---------- */
.lhe-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  background: rgba(15, 25, 40, .55);
}

.lhe-modal-overlay.open { display: flex; }

.lhe-modal {
  display: flex;
  flex-direction: column;
  width: min(1100px, 92vw);
  height: min(800px, 90vh);
  margin: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.lhe-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #1d3557;
  color: #fff;
}

.lhe-modal-logo { height: 20px; }

.lhe-modal-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.lhe-modal-close {
  appearance: none;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  margin-left: auto;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
}

.lhe-modal-close:hover { background: rgba(255, 255, 255, .15); }

.lhe-modal-body {
  flex: 1;
  min-height: 0;
  position: relative;
}

.lhe-preview-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

/* ---------- Resaltado de pares bajo el cursor ---------- */

/* Pareja de tags HTML (addon matchTags) */
.cm-matchingtag {
  background: rgba(47, 109, 181, .14);
  box-shadow: inset 0 0 0 1px rgba(47, 109, 181, .45);
  border-radius: 2px;
}

.cm-nonmatchingtag {
  background: rgba(200, 60, 60, .14);
  box-shadow: inset 0 0 0 1px rgba(200, 60, 60, .5);
  border-radius: 2px;
}

/* Pareja de shortcodes [x]…[/x] */
.lhe-match-sc {
  background: rgba(47, 109, 181, .16);
  box-shadow: inset 0 0 0 1px rgba(47, 109, 181, .5);
  border-radius: 2px;
}

/* Shortcode autocontenido (void, sin ']', sin cierre en el documento) */
.lhe-match-sc-void {
  background: rgba(90, 150, 80, .16);
  outline: 1px dashed #4d9e4d;
  border-radius: 2px;
}

/* ---------- Pantalla completa del editor ---------- */

/* Nativa (:fullscreen) y fallback con clase (.lhe-fs) si la API no está. */
.lhe-root[data-lhe]:fullscreen,
.lhe-root[data-lhe].lhe-fs {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  max-width: none;
}

/* El scroll de CodeMirror ocupa todo el espacio menos barra y panel */
.lhe-root[data-lhe]:fullscreen > .CodeMirror-scroll,
.lhe-root[data-lhe].lhe-fs > .CodeMirror-scroll {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

/* En pantalla completa el panel de validación puede crecer mucho más */
.lhe-root[data-lhe]:fullscreen .lhe-status,
.lhe-root[data-lhe].lhe-fs .lhe-status {
  max-height: 40%;
  flex: 0 0 auto;
}