/* ==========================================================================
   ORBEX — Sistema de diseño unificado
   Fuente de verdad: orbex neuronal/cliente/src/estilos/variables.css
   Cambiar un valor aquí lo cambia en TODOS los profesionales y herramientas.
   No redefinir estas variables dentro de cada herramienta.
   ========================================================================== */

:root {
  /* --- Fondos --- */
  --fondo-principal: #050707;
  --fondo-lateral:   #090d0d;
  --panel:           #0e1414;
  --panel-elevado:   #131b1b;

  /* --- Turquesa Orbex --- */
  --turquesa:        #00d6c9;
  --turquesa-oscuro: #009e96;
  --turquesa-suave:  #5ff4ea;
  --sobre-turquesa:  #00201d;   /* texto sobre superficie turquesa */

  /* --- Texto --- */
  --texto-principal:  #ffffff;
  --texto-secundario: #aab7b7;

  /* --- Bordes --- */
  --borde:        #233030;
  --borde-fuerte: #2f4141;      /* zonas punteadas, manijas, énfasis */

  /* --- Estados (nunca reemplazan la identidad) --- */
  --exito:              #4ade80;
  --exito-fondo:        #12301f;
  --advertencia:        #facc15;
  --advertencia-fondo:  #3a2f0d;
  --error:              #f87171;
  --error-fondo:        #2b1518;
  --error-borde:        #6b2f33;
  --error-texto:        #ffd9d9;

  /* --- Tipografía --- */
  --fuente-base: "Segoe UI", "Segoe UI Variable", system-ui, sans-serif;
  --fuente-mono: "Cascadia Code", "Consolas", monospace;

  /* --- Radios --- */
  --radio-chico:  6px;
  --radio-medio:  10px;
  --radio-grande: 14px;

  --sombra-panel: 0 1px 0 rgba(255, 255, 255, 0.02), 0 8px 24px -16px rgba(0, 0, 0, 0.6);

  /* ----------------------------------------------------------------------
     Alias cortos — nombres que ya usaban las herramientas por separado.
     Se mantienen para no reescribir su CSS, pero ahora todos apuntan
     al mismo sistema.
     ---------------------------------------------------------------------- */
  /* en inglés — herramientas del cortador/transiciones/motion */
  --bg:     var(--fondo-principal);
  --panel2: var(--panel-elevado);
  --line:   var(--borde);
  --text:   var(--texto-principal);
  --muted:  var(--texto-secundario);
  --teal:   var(--turquesa);
  --amber:  var(--advertencia);
  --red:    var(--error);
  --green:  var(--exito);

  /* en español — ObsyEdit, Subtítulos, Quitar Fondo */
  --fondo:        var(--fondo-principal);
  --panel-2:      var(--panel-elevado);
  --texto:        var(--texto-principal);
  --texto-sec:    var(--texto-secundario);
  --texto-suave:  var(--texto-secundario);
  --acento:       var(--turquesa);
  --acento-2:     var(--turquesa-suave);
  --acento-glow:  rgba(0, 214, 201, 0.16);
  --ok:           var(--exito);
  --aviso:        var(--advertencia);
}

/* --- Base compartida ------------------------------------------------------ */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(850px 500px at 82% -12%, rgba(0, 214, 201, 0.11), transparent 62%),
    var(--fondo-principal);
  color: var(--texto-principal);
  font: 15px/1.5 var(--fuente-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -0.3px; }
h1 { font-size: 28px; margin: 0; }

.muted, .texto-secundario { color: var(--texto-secundario); }

code, pre, .mono { font-family: var(--fuente-mono); }

/* --- Selección y foco: idénticos en toda la plataforma --- */

::selection {
  background: var(--turquesa);
  color: var(--sobre-turquesa);
}

:focus-visible {
  outline: 2px solid var(--turquesa);
  outline-offset: 2px;
}

/* --- Barras de desplazamiento --- */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--borde-fuerte) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background-clip: padding-box; }

/* --- Controles base -------------------------------------------------------
   Cada herramienta puede seguir afinando lo suyo; esto define el punto de
   partida común (radios, altura, tipografía) para que todo se sienta igual.
   -------------------------------------------------------------------------- */

button, .button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  border-radius: var(--radio-medio);
  border: 1px solid var(--borde);
  background: var(--panel-elevado);
  color: var(--texto-principal);
}

button, .button {
  min-height: 40px;
  padding: 10px 16px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}

button:hover, .button:hover { border-color: var(--borde-fuerte); }

button.primary, .button.primary, .primary {
  border-color: transparent;
  background: var(--turquesa);
  color: var(--sobre-turquesa);
  font-weight: 750;
}
button.primary:hover, .button.primary:hover { opacity: 0.9; }

button:disabled, .button:disabled { opacity: 0.4; cursor: not-allowed; }

input, select, textarea { padding: 10px 13px; }
input::placeholder, textarea::placeholder { color: var(--texto-secundario); opacity: 0.65; }

/* --- Superficies --- */

.panel, .card, .tarjeta {
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  background: var(--panel);
  box-shadow: var(--sombra-panel);
}

.drop, .dropzone {
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-grande);
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.15s;
}
.drop:hover, .drop.drag, .dropzone:hover { border-color: var(--turquesa); }

/* --- Mensajería de estado --- */

.error {
  padding: 13px;
  border: 1px solid var(--error-borde);
  border-radius: var(--radio-medio);
  background: var(--error-fondo);
  color: var(--error-texto);
}

.hidden { display: none; }