/* Auth pages custom styles - uses CSS variables from database */

/* Breadcrumb styles */
body .tramites-breadcrumb,
body .tramite-admin-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

body .tramites-breadcrumb .breadcrumb-link,
body .tramite-admin-breadcrumb .breadcrumb-link {
    color: var(--color-secundario);
    text-decoration: none;
    transition: color 0.3s ease;
}

body .tramites-breadcrumb .breadcrumb-link:hover,
body .tramite-admin-breadcrumb .breadcrumb-link:hover {
    color: var(--color-primario);
}

body .tramites-breadcrumb .breadcrumb-separator,
body .tramite-admin-breadcrumb .breadcrumb-separator {
    color: #6c757d;
}

body .tramites-breadcrumb .breadcrumb-current,
body .tramite-admin-breadcrumb .breadcrumb-current {
    color: var(--color-secundario);
    font-weight: 600;
}

/* Botón principal de login */
body .btn-login,
body .sufee-login .btn-login {
    background-color: var(--color-secundario);
    border-color: var(--color-secundario);
    color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

body .btn-login:hover,
body .sufee-login .btn-login:hover {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
}

/* Links de registro y recuperación */
body .register-link a,
body .forgot-link a,
body .sufee-login .register-link a,
body .sufee-login .forgot-link a {
    color: var(--color-secundario);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

body .register-link a:hover,
body .forgot-link a:hover,
body .sufee-login .register-link a:hover,
body .sufee-login .forgot-link a:hover {
    color: var(--color-primario);
    text-decoration: underline;
}

/* Fondo de la página */
body .full-page-background-2,
body .sufee-login .full-page-background-2 {
    background-color: var(--color-fondo-claro);
}

/* Botones de continuar y registrar */
body .btn-continuar,
body .btn-registrar,
body .sufee-login .btn-continuar,
body .sufee-login .btn-registrar {
    background-color: var(--color-secundario);
    border-color: var(--color-secundario);
    color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

body .btn-continuar:hover,
body .btn-registrar:hover,
body .sufee-login .btn-continuar:hover,
body .sufee-login .btn-registrar:hover {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
}

/* Botones de cancelar */
body .btn-cancelar,
body .sufee-login .btn-cancelar {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

body .btn-cancelar:hover,
body .sufee-login .btn-cancelar:hover {
    background-color: #5a6268;
    border-color: #5a6268;
    color: #fff;
}

/* Botón continuar en mensaje de éxito */
body .btn-continuar-exito,
body .sufee-login .btn-continuar-exito {
    background-color: var(--color-secundario);
    border-color: var(--color-secundario);
    color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

body .btn-continuar-exito:hover,
body .sufee-login .btn-continuar-exito:hover {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
}



body .btn-secondary-color:hover,
body .search-btn.btn-secondary-color{
    background: var(--color-secundario);
    border-color: var(--color-secundario) ;
    color: #fff;
}

/* ================================
   ESTILOS DE TRÁMITES - Cards con secondary
   ================================ */

/* Ancho centrado similar a consulta_publico - solo para páginas de trámites */
body .tramites-page-wrapper,
body .tramites-container {
    max-width: 90%;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 768px) {
    body .tramites-page-wrapper,
    body .tramites-container {
        max-width: 100%;
    }
}

/* Cards de trámites - solo color secondary */
body .tramite-card,
body .tramites-grid .tramite-card {
    border-top: 3px solid var(--color-secundario);
}

body .tramite-card-header {
    background: var(--color-secundario);
}

body .tramite-card-header .tramite-icon {
    color: #fff;
}

body .tramite-nombre {
    color: var(--color-secundario);
    font-weight: 700;
}

/* Texto en header con blanco para contrastar */
body .tramite-card-header .tramite-icon,
body .tramite-card-header .tramite-nombre,
body .tramite-card-header .tramite-chip {
    color: #fff;
}