/* ==========================================================================
   Qubits UI · v0.1
   Base de diseño moderna para los sistemas de Qubits Technologies.
   Independiente de la plantilla BITA/AdminLTE: todas las clases usan el
   prefijo `q-` y las variables `--q-`, así conviven sin choques.
   ========================================================================== */

:root {
  /* Marca */
  --q-azul-900: #0b1b3f;
  --q-azul-800: #0f2a5f;
  --q-azul-700: #0b5cad;
  --q-azul-600: #1e88e5;
  --q-azul-400: #74b9ff;
  --q-azul-100: #e8f2fd;

  /* Neutros */
  --q-texto: #1c2434;
  --q-texto-suave: #5f6b7e;
  --q-texto-tenue: #8a94a6;
  --q-borde: #dde3eb;
  --q-fondo: #f3f6fa;
  --q-superficie: #ffffff;

  /* Estados */
  --q-ok: #1b9c5a;       --q-ok-suave: #e3f6ec;
  --q-aviso: #b87400;    --q-aviso-suave: #fff3dc;
  --q-error: #d9362b;    --q-error-suave: #fde8e6;
  --q-info: #1e88e5;     --q-info-suave: #e8f2fd;

  /* Forma */
  --q-radio-s: 8px;
  --q-radio: 12px;
  --q-radio-l: 18px;
  --q-sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px rgba(16, 24, 40, .06);
  --q-sombra-l: 0 12px 40px rgba(11, 27, 63, .14);
  --q-foco: 0 0 0 4px rgba(30, 136, 229, .18);

  /* Tipografía */
  --q-fuente: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* ---------- Componentes ---------- */

.q-card {
  background: var(--q-superficie);
  border: 1px solid var(--q-borde);
  border-radius: var(--q-radio);
  box-shadow: var(--q-sombra);
}

.q-titulo { font-family: var(--q-fuente); font-weight: 600; color: var(--q-texto); margin: 0; line-height: 1.25; }
.q-subtitulo { font-family: var(--q-fuente); color: var(--q-texto-suave); margin: 6px 0 0; font-size: 14px; }

/* Campo con etiqueta, ícono y ayuda */
.q-campo { margin-bottom: 18px; }
.q-campo label { display: block; font: 500 13px/1.4 var(--q-fuente); color: var(--q-texto); margin-bottom: 6px; }
.q-control { position: relative; }
.q-control .q-icono {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--q-texto-tenue); font-size: 16px; pointer-events: none;
}
.q-input {
  width: 100%; height: 46px; padding: 0 44px 0 42px;
  font: 400 15px var(--q-fuente); color: var(--q-texto);
  background: var(--q-superficie); border: 1px solid var(--q-borde); border-radius: var(--q-radio-s);
  transition: border-color .15s, box-shadow .15s; outline: none; box-sizing: border-box;
}
.q-input::placeholder { color: var(--q-texto-tenue); }
.q-input:focus { border-color: var(--q-azul-600); box-shadow: var(--q-foco); }
.q-control .q-accion {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--q-texto-tenue); width: 34px; height: 34px;
  border-radius: 6px; cursor: pointer; font-size: 16px;
}
.q-control .q-accion:hover { color: var(--q-texto); background: var(--q-fondo); }
.q-ayuda { font: 400 12.5px var(--q-fuente); color: var(--q-aviso); margin-top: 6px; }

/* Botones */
.q-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: var(--q-radio-s); border: 1px solid transparent;
  font: 600 15px var(--q-fuente); cursor: pointer; text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.q-btn:active { transform: translateY(1px); }
.q-btn:focus-visible { outline: none; box-shadow: var(--q-foco); }
.q-btn-primario { background: var(--q-azul-600); color: #fff; }
.q-btn-primario:hover { background: var(--q-azul-700); color: #fff; }
.q-btn-bloque { width: 100%; }
.q-btn[disabled] { opacity: .7; cursor: progress; }
.q-girando { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: q-girar .7s linear infinite; }
@keyframes q-girar { to { transform: rotate(360deg); } }

/* Mensajes */
.q-alerta {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--q-radio-s); border: 1px solid transparent;
  font: 400 14px/1.45 var(--q-fuente); margin-bottom: 18px;
}
.q-alerta-error { background: var(--q-error-suave); border-color: #f6c9c4; color: #8f231b; }
.q-alerta-info { background: var(--q-info-suave); border-color: #c6ddf7; color: #0f4c8a; }
.q-alerta-ok { background: var(--q-ok-suave); border-color: #bfe6cf; color: #146c40; }
.q-alerta-aviso { background: var(--q-aviso-suave); border-color: #f3dcae; color: #7a4d00; }

/* Marca */
.q-marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.q-marca img { height: 40px; width: auto; }
.q-marca span { font: 600 26px/1 var(--q-fuente); letter-spacing: .01em; }