/* ============================================================
   TECSYCOM · Paleta y branding global
   ============================================================
   Variables CSS basadas en la paleta oficial.
   Para usar:
       color: var(--tec-azul);
       background: var(--tec-azul-oscuro);
   ============================================================ */

:root {
  /* === Paleta oficial TECSYCOM === */
  --tec-celeste-suave: #D6F0F5;  /* fondo muy claro */
  --tec-celeste-claro: #85D4F7;  /* acento claro */
  --tec-azul:          #03A6E8;  /* azul principal (logo) */
  --tec-azul-medio:    #075978;  /* intermedio */
  --tec-azul-oscuro:   #0A2F3E;  /* navy del logo */

  /* === Aliases semánticos === */
  --tec-primary:        var(--tec-azul);
  --tec-primary-dark:   var(--tec-azul-oscuro);
  --tec-primary-light:  var(--tec-celeste-claro);
  --tec-bg-soft:        var(--tec-celeste-suave);

  /* === Gradientes listos === */
  --tec-gradient:       linear-gradient(135deg, var(--tec-azul), var(--tec-azul-oscuro));
  --tec-gradient-light: linear-gradient(135deg, var(--tec-celeste-claro), var(--tec-azul));
  --tec-gradient-soft:  linear-gradient(135deg, var(--tec-celeste-suave), var(--tec-celeste-claro));
}

/* === Helpers de color === */
.tec-bg-primary  { background-color: var(--tec-azul) !important; color: white !important; }
.tec-bg-dark     { background-color: var(--tec-azul-oscuro) !important; color: white !important; }
.tec-bg-light    { background-color: var(--tec-celeste-suave) !important; color: var(--tec-azul-oscuro) !important; }
.tec-bg-medium   { background-color: var(--tec-azul-medio) !important; color: white !important; }

.tec-text-primary { color: var(--tec-azul) !important; }
.tec-text-dark    { color: var(--tec-azul-oscuro) !important; }
.tec-text-medium  { color: var(--tec-azul-medio) !important; }

.tec-border-primary { border-color: var(--tec-azul) !important; }

/* === Botón TECSYCOM === */
.btn-tec {
  background: var(--tec-gradient);
  color: white;
  border: none;
  font-weight: 600;
  transition: all .15s ease;
  box-shadow: 0 2px 6px rgba(3, 166, 232, 0.25);
}
.btn-tec:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: white;
  box-shadow: 0 4px 10px rgba(3, 166, 232, 0.35);
}
.btn-tec-outline {
  background: white;
  color: var(--tec-azul);
  border: 1.5px solid var(--tec-azul);
  font-weight: 600;
}
.btn-tec-outline:hover {
  background: var(--tec-azul);
  color: white;
}

/* === Badges TECSYCOM === */
.badge-tec {
  background: var(--tec-azul);
  color: white;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 700;
}
.badge-tec-soft {
  background: var(--tec-celeste-suave);
  color: var(--tec-azul-oscuro);
  padding: 3px 10px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 700;
}

/* === Sidebar override para que el logo respire bien === */
.layout-menu .app-brand-link img {
  transition: transform .2s ease;
}
.layout-menu .app-brand-link:hover img {
  transform: scale(1.05);
}