/* =========================================================
   UTILITÁRIOS DE COR E ESTILO
   Arquivo para evitar !important e padronizar estilos
   ========================================================= */

/* CORES DO BOOTSTRAP 3 */
:root {
    --color-danger: #d9534f;
    --color-success: #5cb85c;
    --color-warning: #f0ad4e;
    --color-info: #5bc0de;
    --color-primary: #337ab7;
    --color-light-gray: #f5f5f5;
    --color-border: #ddd;
}

/* =========================================================
   CLASSES UTILITÁRIAS DE TEXTO
   ========================================================= */
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-primary { color: var(--color-primary); }
.text-muted { color: #999; }

/* =========================================================
   CLASSES UTILITÁRIAS DE BORDA
   ========================================================= */
.border-danger { border-color: var(--color-danger); }
.border-success { border-color: var(--color-success); }
.border-warning { border-color: var(--color-warning); }
.border-info { border-color: var(--color-info); }
.border-primary { border-color: var(--color-primary); }

.border-1px { border: 1px solid; }
.border-2px { border: 2px solid; }
.border-3px { border: 3px solid; }

/* =========================================================
   CLASSES UTILITÁRIAS DE FUNDO
   ========================================================= */
.bg-danger { background-color: var(--color-danger); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-info { background-color: var(--color-info); }
.bg-primary { background-color: var(--color-primary); }

.bg-danger-light { background-color: #f2dede; }
.bg-success-light { background-color: #dff0d8; }
.bg-warning-light { background-color: #fcf8e3; }
.bg-info-light { background-color: #d9edf7; }

/* =========================================================
   BOX SHADOW (não existe em Bootstrap 3)
   ========================================================= */
.box-shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.box-shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.box-shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.box-shadow-danger {
    box-shadow: 0 0 5px rgba(217, 83, 79, 0.5);
}

.box-shadow-success {
    box-shadow: 0 0 5px rgba(92, 184, 92, 0.5);
}

.btn-hover-danger:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.btn-hover-success:hover {
    border-color: var(--color-success);
    color: var(--color-success);
}

/* =========================================================
   ESTILO PARA BLOCOS INVÁLIDOS (Formulário em Etapas)
   ========================================================= */
.bloco-invalido {
    border: 2px solid var(--color-danger);
    border-radius: 4px;
    padding: 10px;
    background-color: #f2dede;
    transition: all 0.3s ease;
}

.bloco-invalido .label,
.bloco-invalido .br-input,
.bloco-invalido .br-radio,
.bloco-invalido .br-checkbox,
.bloco-invalido .br-textarea,
.bloco-invalido .br-select {
    border-color: var(--color-danger);
}

.bloco-invalido .label {
    color: #a94442;
    font-weight: 600;
}

/* =========================================================
   ESTILO PARA BLOCOS VÁLIDOS
   ========================================================= */
.bloco-valido {
    border: 2px solid var(--color-success);
    border-radius: 4px;
    padding: 10px;
    background-color: #dff0d8;
}

/* =========================================================
   INPUTS INVÁLIDOS / VÁLIDOS
   ========================================================= */
.is-invalid {
    border-color: var(--color-danger);
    color: #a94442;
}

.is-valid {
    border-color: var(--color-success);
    color: #3c763d;
}

/* =========================================================
   ESPAÇAMENTO UTILITÁRIO
   ========================================================= */
.p-5px { padding: 5px; }
.p-10px { padding: 10px; }
.m-5px { margin: 5px; }
.m-10px { margin: 10px; }
.mb-10px { margin-bottom: 10px; }
.mt-10px { margin-top: 10px; }

/* =========================================================
   ROUNDED
   ========================================================= */
.rounded-sm { border-radius: 2px; }
.rounded { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }

/* =========================================================
  ESTADOS DE HOVER PARA ELEMENTOS
   ========================================================= */
.btn-hover-danger:hover {
    border-color: #d9534f;
    color: #d9534f;
}

.btn-hover-success:hover {
    border-color: #5cb85c;
    color: #5cb85c;
}

/* =========================================================
   FONTE E TEXTO
   ========================================================= */
.font-weight-bold { font-weight: 700; }
.font-weight-normal { font-weight: 400; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }

/* =========================================================
   DISPLAY
   ========================================================= */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }

/* =========================================================
   OPACITY
   ========================================================= */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }