/* ==========================================================================
   PALETA INSTITUCIONAL GOBIERNO DE NUEVO LAREDO
   ========================================================================== */
:root {
  --color-guindo-primary: #611232;
  --color-guindo-dark: #4A0E17;
  --color-guindo-light: #800020;
  --color-dorado-primary: #ddc9a3; /* Dorado claro aplicado */
  --color-dorado-light: #f0e2ca;
  --color-dorado-dark: #b8a37e;
  --bg-light-gray: #F8F9FA;
  --text-dark: #2D3748;
}

body {
font-family: 'Inter', sans-serif;
background-color: #f3f4f6;
color: var(--text-dark);
min-height: 100vh;
display: flex;
flex-direction: column;
}

h1, h2, h3, h4, h5, h6, .font-heading {
font-family: 'Montserrat', sans-serif;
}

.header-step-title {
color: var(--color-guindo-primary) !important;
}

/* Header */
.header-top {
background-color: var(--color-guindo-dark);
color: #ffffff;
border-bottom: 4px solid var(--color-dorado-primary);
}

.header-logo-box {
background: #ffffff;
padding: 8px 16px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.badge-folio {
background-color: #FEF3C7;
color: #92400E;
border: 1px solid #FCD34D;
font-weight: 600;
font-size: 0.85rem;
padding: 0.5rem 1rem;
border-radius: 20px;
}

/* Stepper Component */
.stepper-wrapper {
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 2rem;
}

.stepper-wrapper::before {
content: "";
position: absolute;
top: 22px;
left: 0;
width: 100%;
height: 3px;
background-color: #e5e7eb;
z-index: 1;
}

.stepper-progress-bar {
position: absolute;
top: 22px;
left: 0;
height: 3px;
background-color: var(--color-guindo-primary);
z-index: 1;
transition: width 0.4s ease;
width: 0%;
}

.step-item {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}

.step-counter {
width: 45px;
height: 45px;
border-radius: 50%;
background-color: #ffffff;
border: 3px solid #d1d5db;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #6b7280;
font-size: 0.9rem;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.step-item.active .step-counter {
background-color: var(--color-guindo-primary);
border-color: var(--color-dorado-primary);
color: #ffffff;
transform: scale(1.1);
box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.25);
}

.step-item.completed .step-counter {
background-color: var(--color-dorado-primary);
border-color: var(--color-dorado-dark);
color: #ffffff;
}

.step-name {
margin-top: 8px;
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
text-align: center;
transition: color 0.3s ease;
}

.step-item.active .step-name {
color: var(--color-guindo-primary);
font-weight: 700;
}

/* Card */
.wizard-card {
background: #ffffff;
border-radius: 16px;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

.wizard-step {
display: none;
animation: fadeIn 0.4s ease-in-out;
}

.wizard-step.active {
display: block;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}

/* Controls */
.form-label {
font-weight: 600;
color: #374151;
font-size: 0.88rem;
margin-bottom: 0.3rem;
}

.form-control, .form-select {
border-radius: 8px;
padding: 0.6rem 0.85rem;
border: 1px solid #d1d5db;
font-size: 0.92rem;
}

.form-control:focus, .form-select:focus {
border-color: var(--color-guindo-primary);
box-shadow: 0 0 0 0.25rem rgba(97, 18, 50, 0.15);
}

.btn-guindo {
background-color: var(--color-guindo-primary);
color: #ffffff;
border: none;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
}

.btn-guindo:hover {
background-color: var(--color-guindo-dark);
color: #ffffff;
}

/* Tables & File Uploads */
.table-doc th {
background-color: #f9fafb;
color: var(--color-guindo-dark);
font-weight: 700;
}

.badge-status-pending {
background-color: #FFFBEB;
color: #B45309;
border: 1px solid #FCD34D;
}

.badge-status-uploaded {
background-color: #ECFDF5;
color: #047857;
border: 1px solid #6EE7B7;
}

.file-upload-btn {
position: relative;
overflow: hidden;
display: inline-block;
}

.file-upload-btn input[type=file] {
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}

.check-circle-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #D1E7DD;
display: flex;
align-items: center;
justify-content: center;
}

.extra-small {
font-size: 0.75rem;
}

/* --- Footer --- */
footer {
    background: var(--color-guindo-primary) !important;
    color: #ffffff;
    padding: 60px 0 30px;
}

/* Borde vertical dorado en la sección de contacto */
.contact-info-box {
    border-left: 2px solid var(--color-dorado-primary);
    padding-left: 20px;
}

/* Enlaces del footer */
footer a,
.link-footer {
    color: #ffffff !important; 
    transition: all 0.3s ease-in-out;
    border-bottom: 2px solid transparent;
    text-decoration: none !important;
}

.link-footer:hover {
    color: var(--color-dorado-primary) !important;
    border-bottom: 2px solid var(--color-dorado-primary) !important;
    padding-bottom: 2px;
}

/* Iconos de redes sociales y elementos circulares/redondeados */
.bg-white.rounded, .bg-white.rounded-circle {
    border: 2px solid var(--color-dorado-primary);
}

/* Estilo para los iconos de Facebook / Instagram */
footer .bi, footer .fab, footer .fas {
    transition: all 0.3s ease-in-out;
}

footer a:hover .bi, 
footer a:hover .fab {
    color: var(--color-dorado-primary) !important;
}

@media (max-width: 768px) {
.step-name { display: none; }
.step-counter { width: 35px; height: 35px; font-size: 0.8rem; }
.stepper-wrapper::before, .stepper-progress-bar { top: 17px; }
}

/* ==========================================================================
   SOBREESCRITURA DE COLORES BLUE BOOTSTRAP POR GUINDO INSTITUCIONAL
   ========================================================================== */

/* Radio Buttons y Checkboxes seleccionados */
.form-check-input:checked {
  background-color: var(--color-guindo-primary) !important;
  border-color: var(--color-guindo-primary) !important;
}

/* Anillo de enfoque (Focus) en Radio Buttons y Checkboxes */
.form-check-input:focus {
  border-color: var(--color-guindo-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(97, 18, 50, 0.25) !important;
}

/* Anillo de enfoque (Focus) en Inputs de Texto y Selects */
.form-control:focus, .form-select:focus {
  border-color: var(--color-guindo-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(97, 18, 50, 0.20) !important;
}

/* Ajuste de selección de texto dentro del formulario */
::selection {
  background-color: var(--color-guindo-primary);
  color: #ffffff;
}
/* Color dorado claro para iconos de encabezados/secciones */
.section-title i, 
h2 i.fa-user, 
h3 i.fa-user,
.header-step-title i {
    color: var(--color-dorado-primary) !important;
}
.text-primary,
div[id^="name-doc"],
small[id^="name-doc"] {
    color: var(--color-guindo-primary) !important; /* O usa #800020 / #581225 */
    font-weight: 600;
}
.fa-circle-info, 
.fa-circle-exclamation, 
.fa-info-circle {
    color: var(--color-dorado-dark) !important; /* O usa directamente el código hexadecimal #b39b6a */
}