1,
h2,
h3,
h4,
h5,
h6 {
    color: #545454;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

/* 3. PARAGRAPHS */
p {
    margin-bottom: 1rem;
    color: #545454;
}

/* 4. LINKS
   - Default link color in a subtle style,
   - underline on hover
*/
a {
    color: #0056b3;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    text-decoration: none;
    color: #003d80;
}

/* 5. UTILITY CLASSES
   - Some quick spacing utilities if needed
*/
.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.ms-1 {
    margin-left: 0.25rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.ms-3 {
    margin-left: 1rem !important;
}

.ps-3 {
    padding-left: 1rem !important;
}

.ps-4 {
    padding-left: 1.5rem !important;
}

i.fa-solid.fa-wallet.me-2 {
    color: #999;
}

.section-title.d-flex.align-items-center.mb-2 i {
    color: #567ca9;
}

i.bi.bi-clock-fill.me-2.text-muted {
    color: #567ca9 !important;
}

hr:not([size]) {
    height: 3px !important;
    color: #bac6d6;
    margin-bottom: 40px;
}

.alert {
    margin-bottom: 0 !important;
}

.body-container-user-panel {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #545454;
}

.user-profile-info-area {
    background: white;
    padding: 40px 10px;
    border-radius: 4px;
}

.user-profile-info-area {
    background: white;
    padding: 40px 10px 5px 10px;
    border-radius: 4px;
    height: 100%;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
}

/* Tarjetas iniciales (Quick Info) */
.quick-info-cards .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);d
    margin-bottom: 1rem;
}

.quick-info-cards .card-header {
    background-color: #f8f9fa;
    font-weight: 600;
    display: flex;
    align-items: center;
    color: #6c757d;
    /* Menos intensidad */
}

.quick-info-cards .card-header i {
    margin-right: 8px;
    font-size: 1.1rem;
    color: #6c757d;
    /* Menos intensidad */
}

.quick-info-cards .card-body {
    padding: 1.25rem;
    text-align: center;
}

.quick-info-label {
    font-weight: 500;
    color: #666;
}

.quick-info-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
}

/* Info de cuenta, main info */
.account-info .header-area h4.title {
    font-weight: 600;
    color: #545454;
}

.account-info .main-info ul.list {
    padding-left: 0;
    list-style-type: none;
}

.user-title {
    font-weight: 500;
}

/* Balance Card */
.balance-card.super-improved {
    background: linear-gradient(135deg, #e9f2ff 0%, #ffffff 100%);
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    padding: 1rem 1.5rem;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
    margin-top: 1rem;
}

.balance-card.super-improved .balance-deco-right {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 100%;
    background: rgba(0, 123, 255, 0.1);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.balance-card.super-improved .balance-content {
    position: relative;
    z-index: 2;
}

.balance-card.super-improved .balance-icon i {
    font-size: 2.2rem;
    color: #0d6efd;
}

.balance-card.super-improved .balance-label {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 0.3rem;
}

.balance-card.super-improved .balance-amount {
    font-size: 1.8rem;
    margin: 0;
    color: #333;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.transferir-btn {
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.45rem 1rem;
    border-radius: 4px;
}

/* Tabla de órdenes recientes */
.mr-table.allproduct table thead {
    background-color: #f1f3f5;
}

.mr-table.allproduct table thead th {
    font-weight: 600;
    color: #555;
}

.mr-table.allproduct table tbody tr:hover {
    background-color: #fafafa;
}

.order-status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    margin: 0;
}

.order-status.pending {
    background-color: #ffe8a1;
    color: #856404;
}

.order-status.completed {
    background-color: #c3e6cb;
    color: #155724;
}

.order-status.declined {
    background-color: #f5c6cb;
    color: #721c24;
}

.mybtn2.sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
}

/* Vendor stats */
.vendor-stats {
    margin-bottom: 1rem;
}

.vendor-stats .stats-graph {
    min-height: 250px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}

/* Tarjeta de crédito (cliente) */
.credit-card-display {
    max-width: 340px;
    margin: 1rem auto 0;
}

.credit-card-display .cc-bg {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
    color: #fff;
    padding: 1rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
}

.credit-card-display .cc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.credit-card-display .cc-top img {
    max-height: 32px;
    width: auto;
}

.credit-card-display .card-brand {
    font-size: 1rem;
    font-weight: 600;
}

.credit-card-display .cc-number {
    margin-top: 1rem;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.credit-card-display .cc-info {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

.credit-card-display .cc-info small {
    font-size: 0.75rem;
    opacity: 0.8;
}

.credit-card-display .cc-info strong {
    font-size: 0.9rem;
}

.credit-card-display .cc-bg::after {
    content: "";
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: rotate(45deg);
}

.manage-cards-btn {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.2s;
}

.manage-cards-btn i {
    margin-right: 6px;
}

.manage-cards-btn:hover {
    text-decoration: none;
    filter: brightness(1.1);
}

.main-info.contact-info {
    padding: 40px 25px;
    background: #e5effc;
}

/* Tarjeta azul (Dinero Disponible) */
.balance-card.super-improved {
    background: linear-gradient(135deg, #e9f2ff 0%, #ffffff 100%);
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1.5rem;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
}

.balance-deco-right {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 100%;
    background: rgba(0, 123, 255, 0.1);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.balance-card.super-improved .balance-content {
    position: relative;
    z-index: 2;
}

.balance-card.super-improved .balance-icon i {
    font-size: 2rem;
    /* Ajustado para que coincida con la tarjeta roja */
    color: #0d6efd;
}

.balance-card.super-improved .balance-label {
    font-size: 1rem;
    /* Unificamos tamaño */
    color: #555;
    margin-bottom: 0.3rem;
}

.balance-card.super-improved .balance-amount {
    font-size: 1.6rem;
    /* Unificamos con la tarjeta roja */
    margin: 0;
    color: #333;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.balance-card.super-improved {
    margin-top: -1rem;
}

/* Tarjeta roja (Dinero Retenido) */
.balance-card.super-improved-retained {
    background: linear-gradient(135deg, #ffe9e9 0%, #ffffff 100%);
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    padding: 1.4rem 1.5rem;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
    margin-top: 1rem;
}

.balance-deco-right-retained {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 100%;
    background: rgba(255, 0, 0, 0.07);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.balance-card.super-improved-retained .balance-content {
    position: relative;
    z-index: 2;
}

.balance-card.super-improved-retained .balance-icon i {
    font-size: 2rem;
    color: #f79d9d;
}

.balance-card.super-improved-retained .balance-label {
    font-size: 1rem;
    /* igual que la tarjeta azul */
    margin-bottom: 0.3rem;
}

.balance-card.super-improved-retained .balance-amount {
    font-size: 1.6rem;
    /* igual que la tarjeta azul */
    margin: 0;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* Interrogación en rojo tenue */
.balance-card.super-improved-retained .balance-label .fa-question-circle {
    color: #f79d9d;
    font-size: 1rem;
    /* un poco más pequeño */
}

i.fas.fa-question-circle.ms-2.text-danger {
    color: #df8484 !important;
}

.balance-card.super-improved .balance-icon i {
    font-size: 1.8rem;
    color: #19875493;
    /* Verde Bootstrap */
}

/************************************************************
  QUICK INFO CARDS (VERSIÓN MEJORADA)
************************************************************/

.quick-stats-card {
    background: #f8faff;
    border: 1px solid #5294e2;
    border-radius: 8px;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
    position: relative;
    overflow: hidden;
}

.quick-stats-card::after {
    content: "";
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    background: rgba(0, 123, 255, 0.05);
    /* toquecito azul muy tenue */
    border-radius: 50%;
    transform: rotate(45deg);
    z-index: 0;
}

.quick-stats-body {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.quick-stats-icon {
    margin-bottom: 0.5rem;
}

.quick-stats-icon i {
    font-size: 1.8rem;
    color: #6c757d;
}

/* Título, ej. "Órdenes Abiertas" */
.quick-stats-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

/* Valor principal, ej. "0" */
.quick-stats-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.2rem;
}

/* Etiqueta descriptiva, ej. "Pendientes o en proceso" */
.quick-stats-label {
    font-size: 0.9rem;
    font-weight: 400;
    color: #666;
}

.quick-stats-card:hover {
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.header-section {
    padding: 20px 20px 15px 20px;
    background-color: #ffffff;
    border-radius: 4px;
    margin-bottom: 20px;
}

.body-container-user-panel {
    background-color: #fff;
    padding: 2rem;
    border-radius: 4px;
}

.header-section h4 {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #545454;
}

.header-section h4 i {
    color: #5294e2;
}
/* Alerta adicional para un estilo más moderno */
.alert-modern {
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    position: relative;
    margin-bottom: 10px !important;
}

/* Ícono a la izquierda */
.alert-modern .alert-icon {
    font-size: 1.4rem; /* un poco más grande que el texto */
    line-height: 1; /* ajusta la alineación vertical */
    color: inherit; /* usa el color del alert */
    display: flex;
    align-items: center;
}

/* Título dentro de la alerta */
.alert-modern .alert-title {
    font-weight: 600;
    margin-right: 0.5rem;
}

/* Mensaje de la alerta (puedes ajustarlo para que quede en línea o en bloque) */
.alert-modern .alert-message {
    margin-top: 0.2rem;
    /* si quieres, display: block; o inline dependiendo del diseño que busques */
}

/* Ajuste del botón de cerrado (si quisieras personalizarlo más) */
.alert-modern .btn-close {
    top: 10px;
    right: 10px;
    /* aumenta el tamaño si deseas */
    /* transform: scale(1.2); */
    /* etc... */
}

.alert-modern {
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    position: relative;

    /* Evita que la alerta se extienda más de lo necesario si la usas sin inline style */
    /* max-width: 650px;
     margin: 0 auto;
  */
}

.alert-modern .alert-icon {
    font-size: 1.4rem;
    color: #dc3545; /* Danger color, ajusta si deseas */
}

.alert-modern .alert-title {
    font-weight: 600;
    margin-right: 0.3rem;
}

.alert-modern .alert-message {
    margin-top: 0.15rem;
}

.alert-modern .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.header-section p {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 15px;
}

.header-stats {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

span.badge.badge-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    background: #ffc107;
    color: #000;
    border-radius: 50%;
    font-size: .7rem;
    line-height: 1;
    padding: 0;
}

.header-stats .stat-card {
    flex: 1;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #c1d4f9;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-stats .stat-card h6 {
    font-size: 1rem;
    color: #545454;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.header-stats .stat-card h6 i {
    color: #5294e2;
}

.header-stats .stat-card .value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #545454;
    margin-top: 5px;
}

.header-stats .stat-card p {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 5px;
}

.card-header {
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-hover tbody tr:hover {
    background-color: #f1f3f5;
    transition: background-color 0.2s ease-in-out;
}

.table thead th {
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: bold;
    color: #545454;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #001458;
}

.credit-card-display {
    padding: 10px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.credit-card-display img {
    height: 40px;
}

h5.card-title.text-primary.mb-3 {
    border-bottom: 1px solid #d9dbe4;
    margin-bottom: 40px !important;
    padding-bottom: 10px;
    color: #545454 !important;
    font-weight: 400;
}

h5.card-title.text-primary.mb-3 i {
    color: #567ca9 !important;
    font-size: 18px;
}

.text-primary {
    color: #001458 !important;
}

.table-hover tbody tr:hover {
    background-color: #f1f3f5;
    /* Fondo al pasar el ratón */
}

/* Custom Status Badges (Pastel Colors) */
span.badge.bg-success {
    background-color: #d1fae5 !important;
    color: #018d65 !important;
    font-weight: 400;
}

i.bi.bi-camera-fill.camara-img {
    color: #999;
}

/*span.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #92400e !important;
    font-weight: 400;
}*/

/*span.badge.bg-warning.address-badge {
    background-color: #d9dbe4 !important;
    color: #000 !important;
    font-weight: 400;
}*/
span.badge.bg-info.badge-status {
    background: #0056b3 !important;
    font-weight: 100;
    color: #fff;
}

span.badge.badge-warning.withdraw {
    font-size: 10px;
    font-weight: 100;
    background: #0056b3;
    color: white;
}

span.badge.bg-warning.address-badge {
    background-color: #d9dbe4 !important;
    color: #545454 !important;
    font-weight: 400;
}

span.badge.bg-secondary {
    background-color: #e5e7eb !important;
    color: #4b5563 !important;
    font-weight: 400;
}

/* DataTables Pagination Styling */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 10px;
    margin: 0 2px;
    border: 1px solid #e3e6f0;
    background: #fff;
    border-radius: 4px;
    color: #001458;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #001458;
    color: #fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #001458;
    color: #fff;
    border: 1px solid #001458;
}

a.btn.btn-sm.btn-info.btn-view:hover {
    color: #ffffff;
    background-color: #003399;
    border-color: #003399;
}

.container-icono-circle-2 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eef2f9;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fa-check-circle {
    color: #28a745;
}

.fa-exclamation-circle {
    color: #dc3545;
}

.no-certificaciones {
    text-align: center;
    margin: 40px 0;
    /* Mayor margen superior e inferior */
    color: #6c757d;
}

.no-certificaciones h5 {
    font-size: 1.4rem;
    /* Tamaño del título más destacado */
    font-weight: bold;
    margin-bottom: 10px;
}

.no-certificaciones p {
    font-size: 1rem;
    /* Más fácil de leer */
    margin-bottom: 20px;
    /* Espaciado adicional con el botón */
}

.btn-agregar-certificacion {
    background-color: #003399;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 1rem;
    display: inline-block;
}

.btn-agregar-certificacion:hover {
    background-color: #0056b3;
    color: white;
}

.body-container-user-panel {
    padding: 20px 15px;
    /* Espaciado interno para mayor limpieza */
}

.address-card {
    padding: 15px 20px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    margin-bottom: 15px;
    /* Espaciado entre tarjetas */
    background-color: #fff;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
}

.address-card h5 {
    font-size: 1.2rem;
    font-weight: bold;
}

.descripcion-context {
    font-size: 0.95rem;
    color: #6c757d;
}

.badge {
    font-size: 0.85rem;
}

.btn-secondary {
    color: #545454 !important;
    background-color: #eee !important;
    border-color: #ccc !important;
}

.cert-actions i:hover {
    color: #000;
    /* or any highlight color */
    transition: color 0.2s ease;
}

.alert-dismissible .btn-close {
    /* position: relative; */
    top: 3px;
    right: 5px;
    padding: 0.75rem 1rem;
    color: #460006;
}

.alert-custom-success {
    background-color: #d1e7dd;
    /* pastel green */
    color: #0f5132;
    /* darker green text */
    border: 1px solid #badbcc;
}

.alert-custom-success .btn-close {
    color: #0f5132;
}

.address-card {
    background-color: #f7f7f9;
    border: 1px solid #d9dbe4;
    border-radius: 4px;
    padding: 1.2rem;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);;
    transition: box-shadow 0.2s ease-in-out;
}

.address-card:hover {
    /* Un ligero efecto hover */
    box-shadow: 0 1px 3px rgba(36, 36, 36, 0.08);
}

.row-card-direccion {
    align-items: center;
    /* Centra el ícono y el texto verticalmente */
}

/* Contenedor principal */
.body-container-user-panel {
    background-color: #fff;
    padding: 2rem;
    border-radius: 4px;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
}

/* Sección del título */
.certificate-section-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.certificate-section-subtitle {
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

/* ====== Formularios ====== */

/* Espaciado vertical entre grupos de formularios */
.container-formulario-edit .row.mb-5.mt-5 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

/* Labels y elementos del formulario */
label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

input[type="text"],
input[type="file"],
select {
    display: block;
    width: 100%;
    margin-bottom: 0.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Para resaltar inputs requeridos (opcional) */
input[required],
select[required] {
    border-left: 3px solid #20005c;
    /* color de alerta */
}

/* ====== Certificados Requeridos ====== */

#certificados-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

/* Cada certificado */
.certificate-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    background-color: #fafafa;
}

.certificate-item .certificate-img {
    width: 50px;
    height: 50px;
    margin-right: 0.8rem;
    object-fit: contain;
    margin-bottom: 10px;
}

/* Nombre y campos de carga */
.certificate-name {
    font-weight: 600;
    margin-right: 1rem;
}

/* Botones de acción dentro de cada certificado */
.certificate-item .btn-danger {
    margin-left: auto;
}

/* ====== Certificados Adicionales ====== */

#certificados-container {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #eee;
    border-radius: 5px;
}

.certificado-item {
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.certificado-item .name-certificate {
    flex: auto;
    min-width: 220px;
}

.btn-con {
    text-align: right;
}

/* Pequeña separación entre radio-buttons y su label */
.form-check-input,
.form-check-label {
    cursor: pointer;
}

.form-check-label {
    margin-right: 1rem;
}

/* Indicar visualmente los toggles de Sí / No */
.radio-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Para “Tienes algún otro certificado relacionado” */
.radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Ajustar título de la sección de “Certificados Adicionales” */
#certificados-container h5 {
    font-weight: 600;
    margin-bottom: 1rem;
}

.tittle-certificate {
    margin-top: 35px;
}

.certificate-item {
    display: list-item;
}

.badge-warning {
    background-color: #ffc107;
    color: #212529;
    /* Ajusta si quieres un color de texto distinto */
    font-size: 0.85rem;
    /* Ajusta según tu preferencia */
    border-radius: 0.25rem;
    padding: 0.35em 0.65em;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.bg-danger {
    font-weight: 100;
    background: #ab5a5a !important;
}

.existing-file-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #eee;
    background-color: #fafafa;
    padding: 0px;
    border-radius: 4px;
    padding-left: 12px;
}

.existing-file-block a {
    text-decoration: none;
    color: #5294e2;
    font-weight: 500;
    text-decoration: underline;
}

/* Ajuste general para los badges (Approved, Rejected, etc.) */
.existing-file-block .badge {
    display: inline-block;
    font-size: 0.85rem;
    padding: 0.35em 0.65em;
    border-radius: 0.25rem;
    margin-right: 0.3rem;
}

/* Botón “Change file” */
.existing-file-block .toggle-file-upload {
    margin-top: 0.2rem;
    margin-right: 0.3rem;
}

/* Ajuste al input type="file" */
.input-file.d-none {
    display: none !important;
}

/* Contenedor general del li */
.certificate-item {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    margin-bottom: 1rem;
    position: relative;
}

/* Imagen del certificado */
.certificate-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-right: 0.5rem;
}

/* Nombre del certificado */
.certificate-name {
    font-weight: 600;
    margin-right: 1rem;
}

i.bi.bi-clock-history.me-2 {
    color: #567ca9 !important;
}

.form-control {
    height: 38px;
    /* O el valor que uses */
    /* o un padding-top/padding-bottom fijo para que no crezca */
    padding: 0.375rem 0.75rem;
}

.card-security {
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #e1e1e1;
    padding: 1.5rem;
    margin-bottom: 2rem;
    color: #545454;
}

.card-security h5 {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: #545454;
    display: flex;
    align-items: center;
}

.card-security h5 i {
    color: #80afe7 !important;
    font-size: 1.1rem;
    margin-right: 4px;
}

.title-separator {
    border: none;
    border-top: 1px solid #eee;
    margin: 0 0 1.5rem 0;
}

.devices-list .device-item {
    border-bottom: 1px solid #f1f1f1;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.devices-list .device-item:last-child {
    border-bottom: none;
}

.equal-height-container {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}

.equal-height-container > div {
    flex: 1;
    border: 1px solid #f1f1f1;
    border-radius: 6px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    background-color: #fff;
}

/* Contenedor para el input y el ícono juntos */
.input-with-icon {
    display: flex;
    align-items: center;
    position: relative;
    height: 42px;
    /* Para que no cambie cuando se escribe */
}

/* Ícono ojo */
.toggle-password-btn {
    margin-left: -2rem;
    color: #aaa;
    cursor: pointer;
    font-size: 0.95rem;
}

.password-strength {
    margin-top: 0.5rem;
    height: 6px;
    background-color: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.password-strength-bar {
    height: 100%;
    transition: width 0.3s ease;
}

.strength-weak {
    background-color: #dc3545;
}

.strength-medium {
    background-color: #ffc107;
}

.strength-strong {
    background-color: #28a745;
}

.strength-text {
    font-size: 0.85rem;
    margin-top: 0.25rem;
    color: #6c757d;
}

.password-suggestions {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.password-suggestions ul {
    padding-left: 20px;
    margin: 0;
}

.password-suggestions li {
    list-style-type: disc;
}

.field-error {
    font-size: 0.85rem;
    color: #dc3545;
    margin-top: 0.25rem;
    display: none;
}

.fa-question-circle,
.fa-circle-question {
    font-size: 0.9rem !important;
    color: #999 !important;
    margin-left: 4px;
    cursor: pointer;
}

.alert .btn-close {
    filter: invert(1);
}

.no-tasks-card {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 2rem;
    text-align: center;
}

.no-tasks-card i {
    font-size: 3rem;
    color: #76b799;
    margin-bottom: 1rem;
}

.no-tasks-card h5 {
    font-weight: 600;
}

.no-tasks-card p {
    color: #6c757d;
}

span.badge.bg-warning.badge-status {
    background-color: #ffefbe !important;
    font-weight: 100;
    color: #545454;
}

h5 {
    color: #545454 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 10px !important;
    margin: 0 2px !important;
    border: 1px solid #e3e6f0 !important;
    background: #d9dbe4 !important;
    border-radius: 4px;
    color: #001458 !important;
    margin-top: 20px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: 1px solid #e3e6f0 !important;
    background: #d9dff7 !important;
    color: #001458 !important;
    margin-top: 20px !important;
}

td.dataTables_empty {
    color: #999 !important;
}

label {
    color: #545454;
}

.text-danger {
    color: #e17983 !important;
}

.card-header i {
    color: #5179a9;
}

.card-header {
    text-decoration: none;
    color: #545454;
    font-weight: 100;
}


.categoria:hover {
    text-decoration: none;
}

.btn-c:hover {
    color: #fff;
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
}

li.nav-item.sidebar-menu a:hover {
    text-decoration: none;
}

.btn.btn-outline-primary.active:hover {
    color: #fff;
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
}

.shipping-card-header {
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #5294e2;
}

.address-card {
    background-color: #f8f9fa;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
    position: relative;
}

.address-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
    transition: 0.2s;
}

.row-card-direccion {
    display: flex;
    gap: 10px;
}

.container-div-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
}

.container-div-icono i {
    font-size: 2rem;
    color: #a6a6a6;
}

.container-context-direccion {
    flex: 1;
}

.cert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cert-header span {
    font-size: 1rem;
    font-weight: 600;
    color: #545454;
}

.cert-actions i {
    font-size: 1.1rem;
    margin-left: 10px;
    cursor: pointer;
    color: #666;
}

.bi-exclamation-circle-fill {
    color: #df8890 !important;
}

.cert-actions i:hover {
    opacity: 0.8;
}

.descripcion-context {
    font-size: 0.9rem;
    color: #555;
}

.documentos-certificados a {
    text-decoration: none;
    color: #0d6efd;
}

.documentos-certificados a:hover {
    text-decoration: underline;
}

.documentos-certificados .badge {
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
}

.documentos-certificados .badge i {
    margin-right: 4px;
}

.bi-check-circle-fill {
    color: #198754;
    /* Green */
}

.bi-exclamation-circle-fill {
    color: #dc3545;
    /* Red */
}

.bi-pencil-square,
.bi-trash {
    color: #666;
}

/* Puedes colocar aquí estilos adicionales si necesitas */

/* Clase para inputs con error */
.is-invalid {
    border: 1px solid red !important;
}

.validation-red {
    color: red;
}

.validation-input {
    font-size: 0.85rem;
    color: red;
}

.circle-plus {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background-color: #007bff;
    border-radius: 50%;
    color: white;
}

.with-border-left {
    border-left: 1px solid #e2e2e2;
}

.validation-input {
    font-size: 0.85rem;
    color: red;
    top: 0px;
    position: relative;
}

.container-form {
    background-color: #f7f7f9;
    border: 1px solid #dee2e6;
    border-radius: 0.4rem;
    padding: 1.5rem;
}

.phone-verification-form h5 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.phone-verification-form p {
    color: #666;
    margin-bottom: 1rem;
}

.phone-verification-form label {
    color: #545454;
    font-weight: 400;
}

.iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 6px;
    color: #545454;
}

#phone_number.form-control {
    min-width: 220px;
    border-radius: 0.3rem;
}

#phone_number::placeholder {
    color: #adb5bd;
}

.verification-code-inputs .verification-digit {
    width: 3rem;
    height: 3rem;
    text-align: center;
    font-size: 1.2rem;
    border-radius: 0.3rem;
    border: 1px solid #ced4da;
    transition: box-shadow 0.15s ease-in-out;
}

.verification-code-inputs .verification-digit:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.verification-code-inputs .verification-digit::placeholder {
    color: #ced4da;
    text-align: center;
}

.phone-verification-buttons {
    margin-top: 2rem;
}

.alerta-validacion .alerta-danger {
    color: #d9534f;
    font-size: 0.9rem;
}

.contador-js {
    font-weight: 500;
    color: #555;
}

.user-dashbord.mt-5 {
    min-height: 40vh;
}

.user-dashbord.mt-5 .row-task {
    min-height: 40vh;
    display: flex;
}

.user-dashbord.mt-5 .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.body-container-user-panel {
    flex: 1;
}

.table thead th {
    background-color: #ffffff !important;
}
.table tbody tr:nth-child(odd) {
    background-color: #dee4eb75 !important;
}
tr:nth-child(even) {
    background-color: #f8f9fa;
}
.text-header-section {
    width: 85%;
}

.row.no-margin {
    min-height: 10vh !important;
}

.header-section {
    margin-bottom: 1rem;
}

.header-section h4 {
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0.3rem;
}
strong.acount-link {
    color: #f8f9fa;
    margin-left: 0px;
    right: -8px;
    position: relative;
}
p.lead {
    color: #eee;
}

.header-section p {
    margin: 0;
    color: #6c757d;
    font-size: 0.95rem;
}

.address-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.icon-variant {
    color: #545454;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
}

.icon-variant:hover {
    transform: scale(1.1);
}

.table-variants thead th {
    white-space: nowrap;
}

.table-variants td,
.table-variants th {
    vertical-align: middle;
}

.product-info-section h5 {
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.product-info-section .text-muted {
    font-size: 0.9rem;
}

.actions-top-right {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
}

.icon-action i {
    transition: 0.2s;
    cursor: pointer;
    font-size: 1.25rem;
}

.icon-action i:hover {
    transform: scale(1.1);
}

.icon-control-color {
    color: #666 !important;
    margin-right: 5px;
}

.product-image-carousel {
    width: 120px;
    border-radius: 4px;
    object-fit: cover;
}

.badge {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    margin-right: 0.25rem;
}

.badge-pendiente {
    background-color: #d9d9d9;
    color: #212529;
}

.badge-revision {
    background-color: #fff3cd;
    color: #856404;
}

.badge-aprobado {
    background-color: #c8eed9;
    color: #0b5d1e;
}

.badge-pausado {
    background-color: #ffc9cc;
    color: #7c1f1f;
}

.badge-activo {
    background-color: #ccffd8;
    color: #1c7c34;
}

b,
strong {
    font-weight: bolder;
    color: #333;
}
.row.mt-3.align-items-end-elements {
    position: absolute;
    top: 4.5rem;
    right: 1rem;
}
p.lead.lend-banner {
    color: #d9dbe4;
}
/* Contenedor principal de la política */
.policy-container {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
}

/* Cabecera */
.policy-header {
    background-color: #002a60;
    /* Ajusta al color corporativo que prefieras */
    color: #fff;
    padding: 2rem;
    text-align: center;
}

.policy-header h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.policy-header small {
    font-size: 1rem;
    opacity: 0.9;
}

/* Sidebar */
.policy-sidebar {
    position: sticky;
    top: 10px;
    /* Ajusta según tu navbar */
    padding: 1rem;
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.policy-sidebar h5 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #002a60;
}

.policy-sidebar ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.policy-sidebar ul li {
    margin-bottom: 0.5rem;
}

.policy-sidebar ul li a {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.policy-sidebar ul li a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Contenido principal */
.policy-content {
    padding: 2rem 1rem;
}

.policy-section {
    margin-bottom: 2rem;
}

.policy-section h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: #333;
    border-bottom: 2px solid #eeeeee;
    padding-bottom: 0.5rem;
}

.policy-section p {
    font-size: 1rem;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 1rem;
    color: #555;
    padding: 10px;
}

/* Responsivo */
@media (max-width: 767.98px) {
    .policy-sidebar {
        position: static;
        border-right: none;
        margin-bottom: 2rem;
        border-radius: 0;
    }

    .policy-content {
        padding: 1rem;
    }
}

.hero-section {
    position: relative;
    background: url("https://picsum.photos/1600/800?random=101") center center /
        cover no-repeat;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 0 1rem;
}

.hero-content h1 {
    font-weight: 700;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.2rem;
}
.border-bottom {
    border-bottom: 1px solid #999 !important;
}

/* Títulos secciones */
h2.section-title {
    line-height: 100%;
}
/* Tarjetas */
.card-custom {
    border: none;
    border-radius: 0.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
}

.card-custom img {
    border-radius: 0.5rem 0.5rem 0 0;
}

/* Lista de valores */
.value-list li {
    margin-bottom: 0.5rem;
}

/* Ajustes a la sección del equipo */
.team-grid .card-img-top {
    height: 220px;
    object-fit: cover;
}

/* Sección CTA */
.cta-section {
    background: #f8f9fa;
    padding: 2.5rem 1rem;
    border-radius: 0.5rem;
    text-align: center;
}

.hero-getapp {
    position: relative;
    background: url("https://picsum.photos/1600/600?random=303") center center /
        cover no-repeat;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

.hero-getapp-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.hero-getapp-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    padding: 0 1rem;
}

.hero-getapp-content h1 {
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-getapp-content p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 1rem;
}

/* Sección "Why App" con fondo */
.why-app-section {
    background: #f3f6f9;
    border-radius: 0.5rem;
    padding: 3rem 1rem;
    margin-bottom: 2rem;
}

.why-app-section h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.why-app-section p {
    line-height: 1.6;
}

.why-app-section .list-unstyled li::before {
    content: "✓ ";
    color: #2ecc71;
    font-weight: bold;
}

/* Sección descarga */
.download-section {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    margin-bottom: 2rem;
}

.download-section h2 {
    margin-bottom: 1rem;
}

.download-section .qr-code {
    max-width: 200px;
    margin: 1rem auto;
}

.store-buttons img {
    max-width: 180px;
    margin: 0.5rem;
    transition: transform 0.2s;
}

.store-buttons img:hover {
    transform: scale(1.05);
}

/* Sección Funciones Clave */
.more-info-section {
    margin-bottom: 2rem;
}

.more-info-section h2 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Sección FAQ */
.faq-section {
    margin-bottom: 2rem;
}

.faq-section h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

/* Sección screenshots */
.screenshots-section img {
    max-width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
    transition: transform 0.2s;
}

.screenshots-section img:hover {
    transform: translateY(-2px);
}
.hero-sell {
    position: relative;
    background: url("https://picsum.photos/1600/800?random=101") center center /
        cover no-repeat;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

.hero-sell-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.hero-sell-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    padding: 0 1rem;
}

.hero-sell-content h1 {
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.benefits-list li {
    margin-bottom: 0.5rem;
}

.steps-section .card {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
    transition: transform 0.2s;
}

.steps-section .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.steps-section .card-body h5 {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Contenedor principal del banner */
.yp-cookie-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #20232a;
    /* Fondo oscuro, ajusta si deseas */
    color: #ffffff;
    padding: 1rem;
    z-index: 9999;
    font-size: 0.95rem;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
}

/* Contenido interno */
.yp-cookie-content {
    max-width: 1350px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.yp-cookie-text {
    margin: 0;
    flex: 1;
    line-height: 1.4;
    color: #f0f0f0;
    /* Texto un poco más claro que #fff, si gustas */
}

.yp-cookie-link {
    color: #fbb03b;
    /* Un color llamativo (YesPallet) */
    text-decoration: underline;
}

.yp-cookie-link:hover {
    text-decoration: none;
    opacity: 0.9;
    color: #5294e2;
}

/* Botonera */
.yp-cookie-buttons {
    display: flex;
    gap: 0.5rem;
}

/* Botones base */
.yp-cookie-btn {
    cursor: pointer;
    border: none;
    border-radius: 0.3rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
}

/* Botón "Primario" (Aceptar) */
.yp-cookie-btn-primary {
    background-color: #003399;
    color: #ffffff;
}

.yp-cookie-btn-primary:hover {
    background-color: #1142a3;
    /* Un tono más oscuro */
}

/* Botón "Outline" (Rechazar) */
.yp-cookie-btn-outline {
    background-color: transparent;
    color: #fbb03b;
    border: 1px solid #fbb03b;
}

.yp-cookie-btn-outline:hover {
    background-color: #fbb03b;
    color: #000;
}

p.lead.mb-4 {
    color: #545454 !important;
}

/* Fondo ligero */
.container.py-5 {
    background: none !important;
}

/* Card / contenedor principal */
.registration-container {
    background: #fff;
    border-radius: 8px;
    padding: 4rem 2rem;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10);
}
.select2-container .select2-selection--single {
    height: 38px !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #495057 !important;
    line-height: 38px !important;
}

/* Wizard Steps */
.wizard-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #6c757d;
    /* color base */
}

.wizard-step .circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #d9dbe4;
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    font-size: 1rem;
}

/* Paso activo en azul */
.wizard-step.active .circle {
    background-color: #0056b3;
    color: #fff;
}

/* Paso completado en verde */
.wizard-step.completed .circle {
    background-color: #28a745;
    color: #fff;
}

.wizard-line {
    width: 80px;
    height: 2px;
    background-color: #ccc;
}

/* Labels sin negritas, en negro */
.label-wizard {
    font-weight: 400;
    color: #000;
    margin-bottom: 0.4rem;
}

/* Validaciones */
.validation-red {
    color: red;
}

.validation-input {
    font-size: 0.85rem;
    color: red;
}

label.form-check-label.dir-factu {
    font-size: 16px !important;
    color: #003399;
    font-weight: 400;
}

/* Check icon en radios */
.check-icon {
    margin-right: 5px;
}

/* Encabezado de "Contacts" */
.contacts-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
    /* negro */
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Encabezado de cada contacto */
.contact-heading {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-bottom: 0.5rem;
    gap: 5px;
}

.contact-heading i {
    font-size: 1.1rem;
}

.btn-link {
    font-weight: 400;
    color: #003399;
    text-decoration: underline;
    margin-left: 20px;
    font-size: 16px;
}

i.bi.bi-person-lines-fill {
    color: #666;
}
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #ced4da !important;
    border-radius: 4px;
}

.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin-bottom: 4px !important;
    position: relative;
    vertical-align: middle;
}
.select-2-validate {
    top: 0px !important;
}


.container.py-5 {
    background: #0033990d;
}
.categories-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 2rem;
}
.title-categories {
    font-weight: 600;
    margin-bottom: 1rem;
    color: #222;
}
.category-col {
    border-right: 1px solid #eee;
}
.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.category-item {
    padding: 0.8rem 1rem;
    border: 1px solid #f1f1f1;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
}
.category-item i {
    margin-right: 0.5rem;
}
.category-item.active {
    background-color: #e6f0ff;
    border-color: #003399;
}
.category-item:hover {
    background-color: #f9f9f9;
}
.subcategory-box {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 1rem;
    background-color: #fcfcfc;
    min-height: 290px;
}
.subcategory-box h5 {
    margin-bottom: 1rem;
}
.card-buttons {
    margin-top: 2rem;
}
.card-buttons .btn-outline-secondary {
    border-color: #003399;
    color: #003399;
}
.card-buttons .btn-outline-secondary:hover {
    background-color: #003399;
    color: #fff;
}
.card-buttons .btn-primary {
    background-color: #003399;
    border-color: #003399;
}
.card-buttons .btn-primary:hover {
    background-color: #00236d;
}
.subcategory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.subcategory-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 10px;
}
.subcategory-item strong {
    display: block;
    margin-bottom: 0.5rem;
}


button.btn.btn-primary.btn-r {
    width: 240px;
}

.file-input {
    border: 1px solid #ced4da;
    transition: border-color 0.3s ease-in-out;
}

.file-input.success {
    border-color: #28a745;
    /* Verde */
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

.file-name {
    font-size: 0.9rem;
}

.file-name i {
    margin-right: 5px;
}

.form-control[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer;
    margin-top: 20px;
}



.registration-container {
    margin-top: 1.5rem;
}
.export-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 2rem;
}
.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 1rem;
}
.form-label-strong {
    font-weight: 400;
    color: #555;
    margin-bottom: 0.3rem;
    display: inline-block;
}
.radio-label {
    font-weight: 400;
    color: #555;
}
.form-check-label {
    font-weight: 400;
    color: #555;
}
.form-check-input[type="radio"] {
    margin-top: 2px;
}

.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}
.wizard-step {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.25rem;
}
.wizard-step .circle {
    width: 35px;
    height: 35px;
    background-color: #ccc;
    color: #fff;
    border-radius: 50%;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wizard-step.completed .circle {
    background-color: #198754;
}
.wizard-step.active .circle {
    background-color: #003399;
}
.wizard-line {
    width: 60px;
    height: 2px;
    background-color: #ccc;
}
.wizard-step.completed ~ .wizard-line {
    background-color: #ccc;
}

.border-end {
border-right: 1px solid #ccc !important;
}

.card {
    background-color: #fff;
    border-radius: 4px;
    position: relative;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10) !important;


}

.header-section {
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0.00), 0px 54px 22px 0px rgba(150, 150, 150, 0.01), 0px 31px 18px 0px rgba(150, 150, 150, 0.05), 0px 14px 14px 0px rgba(150, 150, 150, 0.09), 0px 3px 7px 0px rgba(150, 150, 150, 0.10) !important;
}
.card-body {
    flex: 1 1 auto;
    padding: 2rem 2rem !important;
}
.account-info.wallet.text-center.p-3 {
    min-height: 265px;
}