/* buttons.css */
/* Archivo para centralizar estilos de botones utilizando las variables de tu tema */

/* Base para botones */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s, box-shadow 0.3s;
  }
  
  /* Botón Primario */
  /* Fondo azul primario (#007984) y al hacer hover pasa a la versión oscura (#005e68) */
  .btn-primary {
    background-color: var(--ureta-primary);
    color: #fff;
  }
  
  .btn-primary:hover {
    background-color: var(--ureta-primary-dark);
    color: #fff;
  }
  
  /* Botón de Acento */
  /* Utiliza el color acento (#f26522) para resaltar acciones importantes */
  .btn-accent {
    background-color: var(--ureta-accent);
    color: #fff;
  }
  
  .btn-accent:hover {
    /* Tono ligeramente más oscuro, se puede ajustar */
    background-color: #da5b1f;
  }
  
  /* Botón Outline */
  /* Sin fondo, con borde en color primario; al hacer hover se invierten los colores */
  .btn-outline {
    background-color: transparent;
    border: 2px solid var(--ureta-primary);
    color: var(--ureta-primary);
  }
  
  .btn-outline:hover {
    background-color: var(--ureta-primary);
    color: #fff;
  }
  
  /* Botón Estilo Link */
  /* Para simular enlaces en vez de botones tradicionales */
  .btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--ureta-primary);
    text-decoration: underline;
    font-size: 1rem;
  }
  
  .btn-link:hover {
    color: var(--ureta-primary-dark);
    text-decoration: none;
  }
  
  /* Variantes de Tamaño */
  /* Botones más pequeños */
  .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }
  
  /* Botones más grandes */
  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
  }
  
  /* Estado Deshabilitado */
  .btn:disabled,
  .btn.disabled {
    opacity: 0.65;
    cursor: not-allowed;
  }
  
  /* Variante con Bordes Redondeados */
  /* Opcional, para lograr botones con un estilo más "rounded" */
  .btn-rounded {
    border-radius: 20px;
  }
  
  /* Botón Danger */
.btn-danger {
    background-color: #dc3545; /* Rojo danger */
    color: #fff;
    border: none;
    transition: background-color 0.3s, box-shadow 0.3s;
  }
  
  .btn-danger:hover {
    background-color: #bd2130;
  }

/* Botón de Acción - Usar en botones que representan acciones destacadas */
.btn-accion {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--ureta-accent); /* Usa el color acento definido */
    color: #fff;
}

.btn-accion:hover {
    background-color: #da5b1f; /* Un tono un poco más oscuro para el hover */
    color: #fff
}

/* Botón de Extracción - Para acciones de extraer datos */
.btn-extraer {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #3a8fb7; /* Azul medio */
    color: #fff;             /* Texto e íconos en blanco */
}

.btn-extraer:hover {
    background-color: #337fab; /* Azul un poco más oscuro en hover */
    color: #fff
}

/* Botón específico para "Validar" */
.btn-validar {
  background-color: #1E88E5;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.btn-validar:hover {
  background-color: #1a75c4;
  color: white;
}

.btn-conciliar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #1E88E5;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 4px;
  transition: background-color 0.3s;
  line-height: 1.5;                /* igual que btn de Bootstrap */
}

.btn-conciliar .bi {
  margin-right: 0.5rem;            /* separación icono/texto */
}

.btn-conciliar:hover {
  background-color: #1a75c4;
  color: white;
}

/* — Botón Contabilizar (estado contabilizado) — */
button.btn.estado-contabilizado {
  background-color: #17a2b8 !important;   /* turquesa claro */
  color:            #fff     !important;
  border:           none    !important;
  padding:          0.5rem 1rem;
  font-size:        1rem;
  font-weight:      500;
  border-radius:    4px;
  transition:       background-color 0.3s;
}

button.btn.estado-contabilizado:hover {
  background-color: #138496 !important;   /* turquesa oscuro */
  color:            #fff     !important;
}

/* Botón específico para "Conatabilizar" */
.btn-contabilizar {
  background-color: #17a2b8;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.btn-contabilizar:hover {
  background-color: #138496;
  color: white;
}