/* Button colors with darker borders */
.btn-atenti {
    background-color: #027cff;
    color: #fefefe !important;
    border-color: #0266d4; /* Slightly darker */
}
.btn-atenti:hover {
    background-color: #005bcc;
    border-color: #0049a3;
}

.btn-exito {
    background-color: #38a851;
    color: #fefefe !important;
    border-color: #2f8e45; /* Slightly darker */
}
.btn-exito:hover {
    background-color: #2a7d3c;
    border-color: #236b32;
}

.btn-epa {
    background-color: #ffc108;
    color: #fefefe !important;
    border-color: #e6ad07; /* Slightly darker */
}
.btn-epa:hover {
    background-color: #d89a06;
    border-color: #b38305;
}

.btn-errr {
    background-color: #d73343;
    color: #fefefe !important;
    border-color: #b62b39; /* Slightly darker */
}
.btn-errr:hover {
    background-color: #a1242f;
    border-color: #851d26;
}

/*
.btn-defol {
    background-color: #393e43;
    color: #fefefe !important;
    border-color: #2f3337; 
}
.btn-defol:hover {
    background-color: #2e3236;
    border-color: #24272b;
}
*/

.form-wrapper {
  max-width: 80%;
  margin: 2rem auto;
}

@media (max-width: 768px) {
  .form-wrapper {
    max-width: 95%;
  }
}

.form-group {
  margin-bottom: 0.75rem;
}

.label-col {
  background-color: #f5f7fa;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

label {
  font-weight: 500;
  margin-bottom: 0.25rem;
  display: inline-block;
}

.btn-row {
  margin-top: 1.5rem;
  text-align: right;
}
pre,
code {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}
/***
.view th {
    width: 120px;
    text-align: left;
    padding-left: 10px;
}

tr th {
    background-color: #087DCC;
    font-variant: small-caps;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-align: left;
}
***/

/* --- CUSTOM BUTTON STYLES (Spectre.css Compatible) --- */
/* Base styles are inherited from Spectre's .btn class */

/* --- DESTRUCTIVE / CANCEL --- */
/* Use for: Delete, Cancel, Back */
.btn.btn-danger {
  color: #fff;
  background-color: #d9534f; /* Red */
  border-color: #d43f3a;
}

/* --- DEFAULT / NEUTRAL --- */
/* Use for: Default actions, Next, Continue */
.btn.btn-defol {
  color: #fff;
  background-color: #4a5568; /* Dark Gray / Metal Blue */
  border-color: #2d3748;
}

/* --- SEARCH / PRIMARY ACTION --- */
/* Use for: Search, Login, Primary "Go" button */
.btn.btn-search {
  color: #fff;
  background-color: #3498db; /* Light Blue */
  border-color: #2980b9;
}

/* --- VIEW / INFO --- */
/* Use for: View, Info, Details */
.btn.btn-view {
  color: #fff;
  background-color: #117a65; /* Darker Teal */
  border-color: #0e6251;
}

/* --- SUCCESS --- */
/* Use for: Save, Confirm, Approve */
.btn.btn-success {
  color: #fff;
  background-color: #2ecc71; /* Green */
  border-color: #27ae60;
}

/* --- WARNING --- */
/* Use for: Actions that require user caution */
.btn.btn-warning {
  color: #fff;
  background-color: #f39c12; /* Orange */
  border-color: #e67e22;
}

/* --- SECONDARY / GHOST BUTTON --- */
/* Use for less important actions */
.btn.btn-secondary {
  color: #4a5568;
  background-color: transparent;
  border-color: #cbd5e0;
}
.btn.btn-secondary:hover, .btn.btn-secondary:focus {
  background-color: #e2e8f0;
  color: #2d3748;
}

/* Spectre's .btn:focus uses box-shadow, so we add it to our custom buttons too */
.btn.btn-defol:focus, .btn.btn-search:focus, .btn.btn-view:focus, .btn.btn-warning:focus {
    box-shadow: 0 0 0 0.1rem rgba(74, 85, 104, .2);
}
/* Override for danger and success to have color-matched focus rings */
 .btn.btn-danger:focus {
    box-shadow: 0 0 0 0.1rem rgba(217, 83, 79, .2);
}
 .btn.btn-success:focus {
    box-shadow: 0 0 0 0.1rem rgba(46, 204, 113, .2);
}