/* styles.css — limpio y compatible con Tailwind CDN (sin @apply)
   Versión: --seed 002 */
:root{
  --editor-bg: #0b1220; /* fallback si no hay prefs */
  --editor-fg: #e6edf3; /* fallback */
  --editor-fs: 14px;    /* fallback */
}

/* Botones */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid #e5e7eb;border-radius:1rem;
  background:#fff;padding:.375rem .75rem;
  font-size:.875rem;font-weight:500;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition:box-shadow .2s ease, transform .05s ease;
}
.btn:hover{ box-shadow:0 12px 28px rgba(0,0,0,.12); }
.btn:active{ transform:translateY(1px); }

.btn-outline{
  display:inline-flex;align-items:center;
  border:1px solid #e5e7eb;border-radius:1rem;
  background:#fff;padding:.375rem .75rem;
  font-size:.875rem;color:#374151;
}
.btn-outline:hover{ background:#f5f5f5; }

.icon-btn{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid #e5e7eb;border-radius:.75rem;
  background:#fff;transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.icon-btn:hover{ background:#f5f5f5; }
.icon-btn.active{ background:#0a0a0a; color:#fff; border-color:#0a0a0a; }

.tab{ padding:.375rem .75rem;border-radius:.75rem;font-size:.875rem; }
.tab.active{ background:#0a0a0a;color:#fff; }

/* Editores base (fallback si no carga CodeMirror) */
.editor{
  width:100%; height: calc(100dvh - 120px);
  background: var(--editor-bg);
  color: var(--editor-fg);
  font-size: var(--editor-fs);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height:1.6; padding:1rem 1.25rem; outline:none; border:none; resize:none;
}

/* Modales */
.modal{ border:none; padding:0; }
.modal::backdrop{ background: rgba(0,0,0,.25); }
.modal-card{ background:#fff; border:1px solid #e5e7eb; border-radius:1rem; box-shadow:0 10px 25px rgba(0,0,0,.08); width: min(92vw, 760px); }
.modal-header{ padding:1rem 1.25rem; font-size:1rem; font-weight:600; border-bottom:1px solid #e5e7eb; }
.modal-body{ padding:1.25rem; }
.modal-footer{ padding:1rem 1.25rem; border-top:1px solid #e5e7eb; display:flex; gap:.5rem; align-items:center; justify-content:flex-end; }

/* Inputs */
.input{ width:100%; border:1px solid #e5e7eb; border-radius:.75rem; padding:.5rem .75rem; background:#fff; outline:none; }
.input:focus{ box-shadow:0 0 0 4px rgba(23,23,23,.08); }
.field{ display:flex; flex-direction:column; gap:.25rem; }

#fileList{ border-radius:.75rem; }
#fileList li{ display:flex; align-items:center; justify-content:space-between; padding:.5rem .75rem; }
#fileList li button{ font-size:.75rem; padding:.25rem .5rem; border:1px solid #e5e7eb; border-radius:.5rem; background:#fff; }
#fileList li button:hover{ background:#f5f5f5; }

/* Preferencias aplicadas al body (además del editor) */
body[data-theme-applied="true"]{
  background: var(--editor-bg);
  color: var(--editor-fg);
}

/* CodeMirror integración visual */
.CodeMirror{ height: calc(100dvh - 120px); background: var(--editor-bg); color: var(--editor-fg); font-size: var(--editor-fs); }
.CodeMirror-lines{ padding: 16px; }
.CodeMirror-gutters{ background: rgba(255,255,255,.04); border-right: 1px solid rgba(255,255,255,.08); }
.cm-s-default .CodeMirror-cursor{ border-left: 2px solid #93c5fd; }
.cm-s-default .CodeMirror-linenumber{ color: rgba(230,237,243,.55); }
.CodeMirror-selected{ background: rgba(147,197,253,.25) !important; }

/* Utilidades */
.hidden{ display: none; }