/* ══════════════════════════════════════════════════════════════════
   ALYX v2.21 — CLARITY PASS
   ─────────────────────────────────────────────────────────────────
   Single goal: rescatar los contenedores de la sensación amorfa.
   El codebase tiene ~95 reglas con bordes/fondos a 4–8% de blanco
   sobre fondo oscuro — por debajo del umbral de contraste útil en
   monitores no calibrados. El efecto acumulado es que NADA tiene
   borde aparente; las cajas "se funden con el background".
   
   Esta pasada NO toca esas 95 reglas. En su lugar:
     1) Define tokens semánticos para "edge" / "input bg" / "focus".
     2) Re-pinta selectores específicos (los que más se ven).
     3) Añade un sistema de :focus consistente con acento dorado.
     4) Homologa los tokens de Simple Mode a la misma escala.
   
   Carga LAST en index.html. No usa !important salvo donde una hoja
   anterior ya lo usa con la misma propiedad.
══════════════════════════════════════════════════════════════════ */


/* ── 1. SEMANTIC EDGE TOKENS ──────────────────────────────────────
   Los porcentajes son sobre blanco puro a alpha. La escala:
     soft   = 7%  → separadores internos, scrollbar, fines decorativos
     edge   = 14% → bordes de contenedor "encontrable"  ←  el suelo
     strong = 22% → contenedor activo / hover / drop-zone
   Si una caja existe como entidad, mínimo edge. Si es decoración,
   soft. Esto es la única decisión global; lo demás se deriva.
─────────────────────────────────────────────────────────────────── */
:root {
  --clarity-edge-soft:    rgba(255,255,255,.07);
  --clarity-edge:         rgba(255,255,255,.14);
  --clarity-edge-strong:  rgba(255,255,255,.22);

  /* Inputs: caja hundida en negro semitransparente, no aclarada en
     blanco — preserva el ambiente oscuro y diferencia "área editable"
     de "panel". */
  --clarity-input-bg:       rgba(0,0,0,.28);
  --clarity-input-bg-hover: rgba(0,0,0,.36);

  /* Foco: acento dorado de marca + halo suave. Si por alguna razón
     --gold2 no estuviera definido, fallback razonable. */
  --clarity-focus:       var(--gold2, #e8c360);
  --clarity-focus-glow:  rgba(232,184,75,.18);

  /* Acento secundario (selecciones, no-foco) */
  --clarity-accent:      var(--ehdm-purple-2, var(--gold2, #a78bfa));
}


/* ══════════════════════════════════════════════════════════════════
   2. INPUTS Y TEXTAREAS NOMBRADOS
   El selector .ctx-prompt-ta es el del screenshot. Los demás
   reciben el mismo tratamiento porque comparten patrón.
══════════════════════════════════════════════════════════════════ */

/* The inspector prompt textarea — quejas en review v2.20 */
.ctx-prompt-ta {
  background: var(--clarity-input-bg);
  border: 1px solid var(--clarity-edge);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.ctx-prompt-ta:hover  { background: var(--clarity-input-bg-hover); }
.ctx-prompt-ta:focus  {
  border-color: var(--clarity-focus);
  box-shadow: 0 0 0 3px var(--clarity-focus-glow);
}
.ctx-prompt-ta::placeholder { color: rgba(255,255,255,.32); font-style: italic; }

/* Project name (topbar): borde transparente por defecto = invisible.
   Le damos un soft edge permanente para que el ojo encuentre el campo. */
.proj-input {
  border-color: var(--clarity-edge-soft);
  background: transparent;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.proj-input:hover {
  border-color: var(--clarity-edge);
  background: var(--clarity-input-bg);
}
.proj-input:focus {
  border-color: var(--clarity-focus);
  background: var(--clarity-input-bg);
  box-shadow: 0 0 0 2px var(--clarity-focus-glow);
}

/* Reference input — "In the style of…"  
   Antes: sin background, borde inferior-only transparente.
   Ahora: caja completa con suelo de input. */
.ref-input {
  background: var(--clarity-input-bg);
  border: 1px solid var(--clarity-edge-soft);
  border-radius: 5px;
  padding: 5px 9px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ref-input:hover  { border-color: var(--clarity-edge); }
.ref-input:focus  {
  border-color: var(--clarity-focus);
  background: var(--clarity-input-bg-hover);
  box-shadow: 0 0 0 2px var(--clarity-focus-glow);
}

/* OpenAI API key modal */
.asst-key-input {
  background: var(--clarity-input-bg);
  border: 1px solid var(--clarity-edge);
}
.asst-key-input:focus {
  border-color: var(--clarity-focus);
  box-shadow: 0 0 0 2px var(--clarity-focus-glow);
}

/* The big cell-edit floating modal textarea — `.cedit-ta`
   Es transparent + border:none porque el contenedor `.cedit-box`
   ya hace de caja. Pero al usuario le ayuda saber dónde acaba el
   área de escritura. Añadimos un divider sutil. */
.cedit-ta {
  border-top: 1px solid var(--clarity-edge-soft) !important;
  border-bottom: 1px solid var(--clarity-edge-soft) !important;
}


/* ══════════════════════════════════════════════════════════════════
   3. INPUTS GENÉRICOS SIN CLASE
   Defensa contra cualquier <input>/<textarea> que se haya añadido
   sin pensar en estilos — quedan con un mínimo decente.
══════════════════════════════════════════════════════════════════ */
input[type="text"]:not([class]),
input[type="number"]:not([class]),
input[type="email"]:not([class]),
input[type="password"]:not([class]),
input[type="search"]:not([class]),
textarea:not([class]),
select:not([class]) {
  background: var(--clarity-input-bg);
  border: 1px solid var(--clarity-edge);
  border-radius: 4px;
  padding: 6px 9px;
  color: var(--text, #f0ead8);
  font-family: var(--ff-crimson, Georgia, serif);
  outline: none;
}
input[type="text"]:not([class]):focus,
input[type="number"]:not([class]):focus,
input[type="email"]:not([class]):focus,
input[type="password"]:not([class]):focus,
input[type="search"]:not([class]):focus,
textarea:not([class]):focus,
select:not([class]):focus {
  border-color: var(--clarity-focus);
  box-shadow: 0 0 0 2px var(--clarity-focus-glow);
}


/* ══════════════════════════════════════════════════════════════════
   4. CARDS Y PANELES — bordes encontrables
══════════════════════════════════════════════════════════════════ */

/* Alyx card del panel derecho — antes a 20% sobre purple, casi
   no se distinguía del fondo. Subimos sin gritar. */
.alyx-card {
  border-color: rgba(167,139,250,.36);
}

.alyx-extra-item {
  border-color: var(--clarity-edge) !important;
}

/* EHDM preset cards (Palette panel) */
.ehdm-preset-card { border-color: var(--clarity-edge-soft); }
.ehdm-preset-card:hover { border-color: var(--clarity-edge); }
.ehdm-preset-card.active {
  border-color: rgba(139,92,246,.7);
  box-shadow: 0 0 0 1px rgba(139,92,246,.3);
}

/* Inspector context panel — borde izquierdo más visible */
.ctx-panel { border-left-color: var(--clarity-edge); }

/* Section dividers internos del inspector — eran .04, casi invisibles */
.ctx-section { border-bottom-color: var(--clarity-edge-soft); }

/* Buttons que estaban en .08 */
.ctx-collapse-btn {
  background: rgba(255,255,255,.06);
  border-color: var(--clarity-edge);
}
.ctx-collapse-btn:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--clarity-edge-strong);
}

/* Sequencer cell hover — antes inset .08, ahora inset edge */
.seq-cell:hover:not(.selected) {
  box-shadow: inset 0 0 0 1px var(--clarity-edge);
}

/* Drop target — más obvio */
.seq-cell.drag-over {
  outline: 2px dashed var(--clarity-focus) !important;
  background: rgba(232,184,75,.10) !important;
}


/* ══════════════════════════════════════════════════════════════════
   5. FOCUS GLOBAL — accesibilidad y consistencia
   Aplicar :focus-visible (no :focus) para que el halo solo aparezca
   con teclado / navegación deliberada, no con mouse click.
══════════════════════════════════════════════════════════════════ */
.btn:focus-visible,
.btn-icon:focus-visible,
.plat-btn:focus-visible,
.btn-tap:focus-visible,
.inspector-tab-btn:focus-visible,
.asst-toggle-btn:focus-visible {
  border-color: var(--clarity-focus);
  box-shadow: 0 0 0 2px var(--clarity-focus-glow);
  outline: none;
}


/* ══════════════════════════════════════════════════════════════════
   6. SIMPLE MODE — homologación a la misma escala
   El root de Simple Mode tiene sus propios tokens; los subimos al
   mismo suelo. La estructura no cambia, sólo los valores.
══════════════════════════════════════════════════════════════════ */
.sr-root {
  --sr-border:   var(--clarity-edge);
  --sr-border-2: var(--clarity-edge-strong);
}

/* Simple Mode prompt textarea — el contenedor .sr-prompt ya tenía
   un borde decente, pero el textarea interior no marcaba dónde se
   puede escribir. Le damos pista sin pisar el card. */
.sr-prompt-textarea {
  border-top: 1px solid var(--clarity-edge-soft);
  padding-top: 10px;
  transition: border-color .15s;
}
.sr-prompt-textarea:focus {
  border-top-color: var(--sr-purple-2, #a78bfa);
}

/* Simple Mode inputs (select + text input) */
.sr-input,
.sr-select {
  background: var(--clarity-input-bg);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.sr-input:hover,
.sr-select:hover {
  background: var(--clarity-input-bg-hover);
}
.sr-input:focus,
.sr-select:focus {
  border-color: var(--sr-purple-2, #a78bfa) !important;
  box-shadow: 0 0 0 2px rgba(167,139,250,.18);
}


/* ══════════════════════════════════════════════════════════════════
   7. PROMPT OUTPUT (read-only) — `.prompt-out` / `.rp-prompt-box`
   Ya usaba --bg3 + --border2, visible. Sólo añadimos un detalle:
   un highlight sutil cuando "● live" está activo (el JS pone
   opacity:1 a #promptLive cuando hay regeneración).
══════════════════════════════════════════════════════════════════ */
.rp-prompt-box {
  border-color: var(--clarity-edge);
}


/* ══════════════════════════════════════════════════════════════════
   8. EDGE-CASE PATCHES — selectores con !important previo
   Donde otra hoja usa !important con bordes invisibles, lo igualamos.
══════════════════════════════════════════════════════════════════ */
.alyx-extra-item[style*="rgba(255,255,255,.05)"] {
  border-color: var(--clarity-edge) !important;
}

/* fin v2.21 — clarity pass */