/* ==========================================================================
   styles.css
   - Paleta (CSS variables)
   - Estructura y layout
   - Componentes (botones, header)
   - Estilos de tabla (imitando tu script Python)
   - Utilidades (transiciones, mensajes de error)
   ======================================================================= */

/* --- Paleta con variables globales (algunas cambian dinámicamente vía JS) --- */
:root {
  --bg: #fff;
  --fg: #333;
  --muted: #777;
  --border: #bbb;
  --soft: #f4f4f4;      /* Fondo suave de celdas/cabeceras (cambia con tema) */
  --headline: #e0e0e0;  /* Fondo de etiquetas/títulos (cambia con tema) */
  --accent: #3b82f6;    /* Color de énfasis (hover, etc.) */
}

/* --- Tipografía y base --- */
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
}

/* --- Layout principal (cabecera + área central) --- */
.app {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* --- Cabecera con controles --- */
header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: lightblue; /* Mantener el encabezado visible (pedido por ti) */
}

header h1 {
  font-size: 16px;
  margin: 0;
  padding: 6px 10px;
  background: var(--headline);
  border-radius: 6px;
  display: inline-block;
}

/* --- Controles (botones, selects) --- */
.controls {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.label-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.btn {
  border: 1px solid var(--border);
  background: white;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- Split de dos paneles con separador central --- */
.split {
  display: grid;
  grid-template-columns: 1fr 8px 1fr; /* izquierda | separador | derecha */
  min-height: 0; /* evita desbordes verticales */
}

.pane {
  min-width: 0;   /* permite encoger correctamente */
  overflow: auto; /* scroll interno cuando hace falta */
}

.left  { border-right: 1px solid var(--border); }
.right { border-left: 1px solid var(--border); }

/* Separador arrastrable (drag) */
.handle {
  cursor: col-resize;
  background: repeating-linear-gradient(90deg, #ddd, #ddd 2px, #eee 2px, #eee 4px);
}

/* --- Editor de texto --- */
textarea {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: none;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
  resize: none; /* la redimensión se hace moviendo el separador */
}

/* --- Estilos de tabla --- */
table { border-collapse: collapse; margin: 12px; width: auto; }
td, th { border: 1px solid var(--border); padding: 5px 8px; vertical-align: top; font-size: 12px; }
th { background: var(--soft); font-weight: bold; text-align: left; }
td.key { background: var(--soft); font-weight: bold; white-space: nowrap; min-width: 100px; }

/* --- Utilidades de tema y transiciones --- */
.themed        { background: var(--soft); }
.themed-strong { background: var(--headline); }
.themed-transition { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }

/* --- Vista previa / título de salida --- */
.doc-title {
  font-size: 14px;
  background: var(--headline);
  padding: 6px 10px;
  border-radius: 4px;
  margin: 12px;
  display: inline-block;
}
.preview { padding-bottom: 24px; }

/* --- Mensajes de error --- */
.error {
  margin: 10px 12px;
  padding: 8px 10px;
  border: 1px solid #f0b7b7;
  background: #ffecec;
  color: #a40000;
  border-radius: 6px;
  display: none;
  white-space: pre-wrap;
  font-size: 12px;
}

/* --- Pie --- */
.footer {
  padding: 8px 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  font-size: 12px;
}