/* Brand Colors */
:root {
    --brand-primary: #444b22;
    --brand-accent: #fdd9b7;
}

body {
    padding-top: 80px; /* Ajusta el valor según la altura de tu navbar */
    padding-bottom: 80px; /* Espacio para evitar que el contenido quede oculto detrás del footer */
  }

.body-sign-up {
    padding-top: 15px; /* Ajusta el valor según la altura de tu navbar */
    padding-bottom: 80px; /* Espacio para evitar que el contenido quede oculto detrás del footer */
}


.login-wrapper {
    min-height: calc(100vh - 160px); /* 80px navbar + 80px footer */
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 576px) {
    .card {
      margin: 20px;
    }
  
    .form-control, .form-select {
      width: 100%;
    }
  }
  
  .step-indicator {
    background-color: #444b22;
    color: white;
  }

/* General Button Styling */
.btn-custom {
    background-color: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-custom:hover {
    background-color: #333918;
    color: #fff;
}

.btn-custom:disabled {
    background-color: #6c757d !important;
    color: white !important;
    opacity: 0.65;
    cursor: not-allowed;
}

/* Accent Button (optional) */
.btn-accent {
    background-color: var(--brand-accent);
    color: #444b22;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-accent:hover {
    background-color: #fcd0a3;
    color: #222;
}

/* Danger Button Styling */
.btn-custom-danger {
    background-color: #dc3545; /* rojo tipo "danger" */
    color: white;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-custom-danger:hover {
    background-color: #bb2d3b; /* un rojo más oscuro para hover */
    color: #fff;
}

/* Botón estilo outline personalizado */
.btn-outline-custom {
    background-color: transparent;
    color: var(--brand-primary, #444b22);
    border: 2px solid var(--brand-primary, #444b22);
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline-custom:hover {
    background-color: var(--brand-primary, #444b22);
    color: #fff;
    border-color: var(--brand-primary, #444b22);
}

.btn-table {
    background-color: var(--brand-primary, #444b22);
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}
.btn-table-danger {
    background-color: #dc3545;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-table {
    background-color: var(--brand-primary, #444b22);
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-right: 10px; /* Espacio a la derecha */
    margin-bottom: 10px; /* Espacio inferior para mobile */
}

.btn-table-danger {
    background-color: #dc3545;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-bottom: 10px; /* Espacio inferior para evitar que se pegue si cae debajo */
}

/* Contenedor para alinear y espaciar botones en tablas */
.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 576px) {
    .table-actions a {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* Rounded Borders for Form Inputs */
input.form-control,
select.form-select,
textarea.form-control {
    border-radius: 30px;
}
@media (max-width: 576px) {
    .login-wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }
}