/* =============================================================
   ANEXA · Estilo de paneles (radio, cliente, admin)
   Paleta OFICIAL, la misma del ANEXA Local Studio:
     Azul Streaming  #249CD3   (marca, acciones)
     Verde Enlace    #75B43F   (al aire, confirmaciones)
     Charcoal Serio  #343E43   (texto y barra lateral)
   Sobrio, tipo panel de administración clásico: fondo gris claro,
   tarjetas blancas de borde fino y barra lateral oscura.
   ============================================================= */

:root {
  --anexa-azul: #249CD3;
  --anexa-azul-h: #35A7DF;
  --anexa-azul-p: #1A7EAB;
  --anexa-verde: #75B43F;
  --anexa-charcoal: #343E43;

  --anexa-lateral: #1B2022;
  --anexa-lateral-item: #9CA3AF;
  --anexa-lateral-hover: #272E31;
  --anexa-lateral-grupo: #5B666C;

  --anexa-fondo: #F3F4F6;
  --anexa-tarjeta: #FFFFFF;
  --anexa-borde: #E3E6E8;
  --anexa-texto: #343E43;
  --anexa-suave: #6B7280;

  /* Bootstrap toma estos: así botones, enlaces y badges salen con la marca */
  --bs-primary: #249CD3;
  --bs-primary-rgb: 36, 156, 211;
  --bs-link-color: #1A7EAB;
  --bs-link-hover-color: #14607f;
  --bs-body-bg: var(--anexa-fondo);
  --bs-body-color: var(--anexa-texto);
  --bs-border-color: var(--anexa-borde);
}

[data-bs-theme="dark"] {
  --anexa-fondo: #14181A;
  --anexa-tarjeta: #1E2427;
  --anexa-borde: #2E383D;
  --anexa-texto: #E9ECEF;
  --anexa-suave: #9CA3AF;
  --bs-body-bg: var(--anexa-fondo);
  --bs-body-color: var(--anexa-texto);
  --bs-border-color: var(--anexa-borde);
  --bs-link-color: #6FC0E8;
  --bs-link-hover-color: #8FD0EF;
}

body {
  background: var(--anexa-fondo);
  color: var(--anexa-texto);
  font-size: 14px;
}

/* ---------- Botones y controles con la marca ---------- */
.btn-primary {
  --bs-btn-bg: var(--anexa-azul);
  --bs-btn-border-color: var(--anexa-azul);
  --bs-btn-hover-bg: var(--anexa-azul-h);
  --bs-btn-hover-border-color: var(--anexa-azul-h);
  --bs-btn-active-bg: var(--anexa-azul-p);
  --bs-btn-active-border-color: var(--anexa-azul-p);
}
.btn-outline-primary {
  --bs-btn-color: var(--anexa-azul-p);
  --bs-btn-border-color: var(--anexa-azul);
  --bs-btn-hover-bg: var(--anexa-azul);
  --bs-btn-hover-border-color: var(--anexa-azul);
}
.btn-success { --bs-btn-bg: var(--anexa-verde); --bs-btn-border-color: var(--anexa-verde); --bs-btn-hover-bg: #689f38; --bs-btn-hover-border-color: #689f38; }
.bg-success { background-color: var(--anexa-verde) !important; }
.text-primary { color: var(--anexa-azul) !important; }
.bg-primary { background-color: var(--anexa-azul) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--anexa-azul);
  box-shadow: 0 0 0 .2rem rgba(36, 156, 211, .18);
}

/* ---------- Estructura ---------- */
.anexa-layout { display: flex; min-height: 100vh; }

.anexa-lateral {
  width: 236px;
  flex: 0 0 236px;
  background: var(--anexa-lateral);
  display: flex;
  flex-direction: column;
}

.anexa-marca {
  padding: 14px 16px;
  border-bottom: 1px solid #2A3236;
  display: flex;
  align-items: center;
  gap: 10px;
}
.anexa-marca .logo { font-size: 1.35rem; color: var(--anexa-azul); line-height: 1; }
.anexa-marca .nombre { font-weight: 800; letter-spacing: .5px; color: #FAFAFA; font-size: 1.05rem; }
.anexa-marca .nombre span { color: var(--anexa-verde); }
.anexa-marca .area {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--anexa-lateral-grupo); display: block; margin-top: 1px;
}

.anexa-radio {
  padding: 12px 16px;
  border-bottom: 1px solid #2A3236;
  color: #D7DEE2;
}
.anexa-radio .nom { font-weight: 600; font-size: .9rem; }

.anexa-menu { padding: 6px 0 16px; overflow-y: auto; flex: 1; }
.anexa-menu .grupo {
  font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--anexa-lateral-grupo); padding: 14px 16px 5px; font-weight: 600;
}
.anexa-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; font-size: .875rem; text-decoration: none;
  color: var(--anexa-lateral-item); border-left: 3px solid transparent;
}
.anexa-menu a i { font-size: 1rem; width: 18px; text-align: center; }
.anexa-menu a:hover { background: var(--anexa-lateral-hover); color: #FAFAFA; }
.anexa-menu a.activo {
  background: var(--anexa-lateral-hover);
  color: #FFFFFF; font-weight: 600;
  border-left-color: var(--anexa-azul);
}
.anexa-pie { padding: 12px 16px; border-top: 1px solid #2A3236; color: #6B7280; font-size: 11px; }

.anexa-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.anexa-barra {
  background: var(--anexa-tarjeta);
  border-bottom: 1px solid var(--anexa-borde);
  padding: 12px 20px;
  display: flex; align-items: center; gap: 12px;
}
.anexa-barra h1 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--anexa-texto); }
.anexa-contenido { padding: 20px; flex: 1; }

/* ---------- Tarjetas sobrias ---------- */
.card {
  background: var(--anexa-tarjeta);
  border: 1px solid var(--anexa-borde);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--anexa-borde);
  font-weight: 600;
  color: var(--anexa-texto);
}
.card-footer { background: transparent; border-top: 1px solid var(--anexa-borde); }
.table > :not(caption) > * > * { background-color: transparent; }
/* Código: en línea con un toque de marca; en bloque, legible sobre gris claro */
code { color: var(--anexa-azul-p); background: rgba(36, 156, 211, .08); padding: .1rem .3rem; border-radius: 3px; }
[data-bs-theme="dark"] code { color: #6FC0E8; background: rgba(36, 156, 211, .14); }
pre {
  background: var(--anexa-fondo);
  border: 1px solid var(--anexa-borde);
  border-radius: 6px;
  padding: .85rem 1rem;
  margin-bottom: 0;
}
pre code { color: var(--anexa-texto); background: transparent; padding: 0; }
textarea.form-control[readonly] { background: var(--anexa-fondo); }

/* ---------- Estado al aire ---------- */
.punto-aire {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--anexa-verde); margin-right: 6px;
  box-shadow: 0 0 0 rgba(117, 180, 63, .6); animation: latido 2s infinite;
}
.punto-off { background: #6B7280; animation: none; box-shadow: none; }
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(117, 180, 63, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(117, 180, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(117, 180, 63, 0); }
}

/* ---------- Móvil ----------
   La barra lateral usa el "offcanvas" de Bootstrap (el mismo componente que el
   panel de administración): en pantallas chicas se desliza desde la izquierda. */
.anexa-abrir { display: none; }
@media (max-width: 991.98px) {
  .anexa-lateral { width: 260px; flex: 0 0 260px; }
  .anexa-abrir { display: inline-flex; }
}