/* ============================================================
   BLACKLINE BI — tema visual compartido
   ============================================================
   Los colores y proporciones salen del CRM de servicio tecnico
   que ya esta en produccion (st.blbicicletas.cl). La central y
   todos sus modulos usan estos mismos valores para que el
   sistema se vea como uno solo, no como piezas pegadas.

   🔴 Ningun modulo define sus propios colores. Si hace falta uno
      nuevo, se agrega aca y queda disponible para todos.
   ============================================================ */

:root {
  /* --- Fondos --- */
  --fondo:            #131314;   /* el fondo de la aplicacion */
  --fondo-panel:      #1e1e20;   /* tarjetas, barra lateral */
  --fondo-campo:      #2a2a2c;   /* campos de formulario */
  --fondo-hover:      #2f2f32;

  /* --- Bordes --- */
  --borde:            #2e2e31;
  --borde-suave:      #26262a;

  /* --- Texto --- */
  --texto:            #f5f5f6;
  --texto-medio:      #a0a0a6;
  --texto-tenue:      #8b8b8f;

  /* --- Rojo Blackline: el color de la marca --- */
  --rojo:             #ee0000;
  --rojo-oscuro:      #cc0000;
  --rojo-tenue:       #d32f2f;

  /* --- Estados --- */
  --alerta-fondo:     #3a1a1a;
  --alerta-borde:     #6a2a2a;
  --alerta-texto:     #ff7b7b;

  /* --- Medidas --- */
  --radio:            8px;
  --radio-grande:     14px;
  --alto-cabecera:    52px;
  --ancho-lateral:    186px;

  /* --- Tipografia --- */
  --texto-base:       13px;
  --texto-chico:      12px;
  --texto-micro:      10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--texto-base);
  -webkit-font-smoothing: antialiased;
}

/* --- Campos de formulario --- */

label {
  display: block;
  font-size: var(--texto-micro);
  letter-spacing: .12em;
  color: var(--texto-tenue);
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 700;
}

input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--fondo-campo);
  border: 1px solid transparent;
  color: var(--texto);
  border-radius: var(--radio);
  font-size: var(--texto-base);
  font-family: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rojo);
}

input::placeholder { color: var(--texto-tenue); }

/* --- Botones --- */

.btn {
  width: 100%;
  padding: 12px 18px;
  background: var(--rojo);
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: var(--radio);
  cursor: pointer;
  font-size: var(--texto-base);
  font-family: inherit;
  transition: background .15s;
}

.btn:hover  { background: var(--rojo-oscuro); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: #4a4a4e; cursor: not-allowed; transform: none; }

.btn-secundario { background: var(--fondo-campo); color: var(--texto);
                  border: 1px solid var(--borde); }
.btn-secundario:hover { background: var(--fondo-hover); }

/* --- Avisos --- */

.error {
  background: var(--alerta-fondo);
  border: 1px solid var(--alerta-borde);
  border-radius: var(--radio);
  padding: 13px 15px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--alerta-texto);
}