/* =========================
   BUTTON SYSTEM (btn-ac)
   ========================= */

/* Base: aplica a Bootstrap .btn y a btn-ac */
.btn,
.btn-ac{
  text-decoration: none !important;
  border-radius: 10px;
  font-weight: 200;
  letter-spacing: -0.01em;
  padding: .48rem .85rem;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease;
  display: inline-flex;              /* alinea icono + texto */
  align-items: center;
  gap: .45rem;
}

/* Evitar underline en anchors sí o sí */
a.btn, a.btn-ac, a.btn:hover, a.btn-ac:hover{
  text-decoration: none !important;
}

/* Tamaños */
.btn-sm, .btn-ac.btn-sm{ padding: .35rem .65rem; border-radius: 10px; }
.btn-lg, .btn-ac.btn-lg{ padding: .62rem 1rem; border-radius: 12px; }

/* Focus ring consistente */
.btn:focus,
.btn-ac:focus{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Click feel sutil */
.btn:active,
.btn-ac:active{
  transform: translateY(1px);
}

/* Disabled */
.btn:disabled,
.btn.disabled,
.btn-ac:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   VARIANTES btn-ac (esto es lo importante)
   ========================================================= */

/* PRIMARY */
.btn-ac-primary,
.btn-primary,
.btn-nuevo,
.btn-guardar{
  background: color-mix(in srgb, var(--primary) 85%, white);
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
  color: #0b1b12;
}

.btn-ac-primary:hover,
.btn-primary:hover,
.btn-nuevo:hover,
.btn-guardar:hover{
  background: color-mix(in srgb, var(--primary) 92%, white);
  border-color: var(--primary);
}

/* SECONDARY */
.btn-ac-secondary,
.btn-secondary,
.btn-outline-secondary,
.btn-limpiar,
.btn-volver{
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.btn-ac-secondary:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-limpiar:hover,
.btn-volver:hover{
  background: var(--surface-2);
}

/* GHOST */
.btn-ac-ghost {
  background: transparent;
  color: var(--muted);        /* #6b7280 */
  border: 1px solid;
}

.btn-ac-ghost:hover {
  background: var(--border);
}

/* DANGER */
.btn-ac-danger,
.btn-danger,
.btn-eliminar{
  background: color-mix(in srgb, #ff96a1 10%, var(--surface));
  border-color: color-mix(in srgb, #ff96a1 35%, var(--border));
  color: rgb(255, 102, 102);
}

.btn-ac-danger:hover,
.btn-danger:hover,
.btn-eliminar:hover{
  background: color-mix(in srgb, #dc3545 14%, var(--surface));
  border-color: color-mix(in srgb, #dc3545 55%, var(--border));
}

/* DANGER */
.btn-ac-danger,
.btn-danger,
.btn-eliminar{
  background: color-mix(in srgb, #ff96a1 10%, var(--surface));
  border-color: color-mix(in srgb, #ff96a1 35%, var(--border));
  color: rgb(255, 102, 102);
}

.btn-ac-danger:hover,
.btn-danger:hover,
.btn-eliminar:hover{
  background: color-mix(in srgb, #dc3545 14%, var(--surface));
  border-color: color-mix(in srgb, #dc3545 55%, var(--border));
}

/* Iconos */
.btn i, .btn svg, .btn-ac i, .btn-ac svg{
  vertical-align: -2px;
}

/* Separación entre botones contiguos (no afecta layout flex con gap) */
.btn + .btn,
.btn-ac + .btn-ac{
  margin-left: .35rem;
}


.toolbar-actions{
  gap: 12px;
}

.toolbar-left{
  gap: 10px;
}

/* Responsive */
@media (max-width: 768px){
  .toolbar-actions{
    flex-direction: column;
    align-items: stretch !important;
  }
  .toolbar-right .btn{
    width: 100%;
    justify-content: center;
  }
}

.btn-ac-secondary.is-active{
  background: color-mix(in srgb, var(--primary) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  color: #0b1b12;
}

.toolbar-actions{
  gap: 12px;
}

.toolbar-left{
  gap: 10px;
}

.toolbar-left .btn-ac{
  white-space: nowrap;
}

.btn-ac-excel{
  border-color: color-mix(in srgb, #198754 30%, var(--border));
}
.btn-ac-excel i{ color: #198754; }


.actions-cell{
  text-align: right;          /* o center si preferís */
  vertical-align: middle;
  width: 1%;
  white-space: nowrap;
}

.btn-actions{
  appearance: none;
  border: 1px solid transparent;
  /*background: white;*/
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 10px;        /* cuadradito redondeado, no círculo */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  opacity: .75;
}

.btn-actions:hover{
  background: var(--primary);  /* queda bien sobre el celeste */
  border-color: var(--primary);
  opacity: 1;
}

.btn-actions:focus{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Que el ícono se vea “con peso” */
.btn-actions i{
  font-size: 16px;
}