/* CO IA Solutions — estilos compartidos */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --noche: #050a18;
  --noche-2: #0a1530;
  --noche-3: #12204a;
  --azul: #1e9bff;
  --azul-claro: #6cc4ff;
  --oro: #f2b632;
  --oro-osc: #c98d12;
  --plata: #d9dee8;
  --fondo: #f3f5fa;
  --tarjeta: #ffffff;
  --texto: #18213a;
  --suave: #64708a;
  --borde: #e2e6f0;
  --ok: #16a36a;
  --alerta: #e5484d;
  --aviso: #e8a20c;
  --radio: 14px;
  --sombra: 0 6px 24px rgba(10, 21, 48, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Inter, system-ui, sans-serif; color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .marca { font-family: Montserrat, Inter, sans-serif; }
a { color: var(--azul); }
button { font: inherit; cursor: pointer; }

.btn { border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 600; background: var(--azul); color: #fff; transition: transform .1s, filter .15s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.oro { background: linear-gradient(135deg, var(--oro), var(--oro-osc)); color: #1b1300; }
.btn.claro { background: #fff; color: var(--texto); border: 1px solid var(--borde); }
.btn.peq { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: default; }

/* Barra superior de marca */
.barra { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: linear-gradient(90deg, var(--noche), var(--noche-3)); color: #fff; border-bottom: 2px solid var(--oro); }
.barra img { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2px var(--azul), 0 0 16px rgba(30, 155, 255, .5); }
.barra .marca { font-weight: 800; letter-spacing: .5px; line-height: 1.1; }
.barra .marca small { display: block; font-weight: 500; font-size: 11px; letter-spacing: 2px; color: var(--azul-claro); text-transform: uppercase; }
.barra .espacio { flex: 1; }
.barra nav a { color: var(--plata); text-decoration: none; font-size: 14px; margin-left: 16px; }
.barra nav a:hover, .barra nav a.activo { color: var(--oro); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.chip.ok { background: rgba(22, 163, 106, .15); color: #0d8a57; }
.chip.off { background: rgba(100, 112, 138, .15); color: var(--suave); }
.barra .chip.ok { background: rgba(22, 163, 106, .25); color: #6ff0b6; }
.barra .chip.off { background: rgba(255, 255, 255, .1); color: var(--plata); }

.pie { text-align: center; font-size: 12px; color: var(--suave); padding: 24px 16px; }
.pie b { color: var(--oro-osc); }

@media (max-width: 640px) {
  .barra { padding: 10px 16px; flex-wrap: wrap; }
  .barra nav a { margin: 0 12px 0 0; }
}