/* ===== Botones superiores: Excel + Listado/Tablero ===== */
:root{
  --b-accent:  #10B981;   /* verde activo suave */
  --b-accent-2:#10B981;   /* hover verde */
  --b-border:  #E5E7EB;   /* borde gris */
  --b-primary: #2757D6;   /* azul inactivo */
}

/* Contenedor: separa Excel del toggle */
.toolbar-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

/* Base de todos los botones del bloque */
.toolbar-actions .btn{
  border-radius: 6px;
  padding: .45rem .75rem;
  font-weight: 100;
  font-size: .85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: .45rem;    /* espacio ícono-texto */
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
  transition: box-shadow .12s ease;
}
.toolbar-actions .btn:hover{
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

/* Botón Excel (sólido) */
.toolbar-actions .btn.btn-success{
  background: var(--b-accent);
  border: 1px solid var(--b-accent);
  color: #fff;
}
.toolbar-actions .btn.btn-success:hover{
  background: var(--b-accent-2);
  border-color: var(--b-accent-2);
}

/* Toggle Listado/Tablero (segmentado) */
.segmented{
  display: inline-flex;
  border: 1px solid var(--b-border);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.segmented .btn{
  border: 0;
  border-radius: 0;    /* lo da el contenedor */
  padding: .45rem .8rem;
  box-shadow: none;    /* sombra la pone el contenedor */
}
.segmented .btn + .btn{ border-left: 1px solid var(--b-border); }

/* Estado inactivo (outline) */
.segmented .btn:not(.active){
  color: var(--b-primary);
}

/* Estado activo (relleno verde suave) */
.segmented .btn.active{
  background: var(--b-accent);
  color: #fff;
}

/* Variante separada del toggle */
.segmented.segmented--separate{
  display: inline-flex;
  gap: .6rem;                     /* espacio entre “Listado” y “Tablero” */
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

/* cada uno toma su propio borde y radio */
.segmented.segmented--separate .btn{
  border: 1px solid var(--b-border) !important;
  border-radius: 6px !important;
  padding: .45rem .8rem;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

/* sin separador interno ni recortes */
.segmented.segmented--separate .btn + .btn{ border-left: 1px solid var(--b-border); }

/* estados se mantienen igual */
.segmented.segmented--separate .btn:not(.active){ color: var(--b-primary); }
.segmented.segmented--separate .btn.active{ background: var(--b-accent); color:#fff; }