/*
 * portal-theme.css
 * Overrides visuales mínimos para alinear el portal con la identidad
 * de swissmex.mx — solo colores, tipografía y detalles superficiales.
 * NO modifica layout, posicionamiento ni estructura funcional.
 */

/* --- Variables de marca --------------------------------------------------- */
:root {
    --sw-red:        #c8102e;   /* Rojo Swissmex (tomado del logo) */
    --sw-red-dark:   #a00d24;   /* Hover / bordes activos */
    --sw-dark:       #1a1a1a;   /* Texto principal */
    --sw-gray:       #f5f5f5;   /* Fondos suaves */
    --sw-border:     #e0e0e0;   /* Separadores */
    --sw-font:       'Open Sans', 'ProximaNova-Regular', sans-serif;
}

/* --- Tipografía base ------------------------------------------------------ */
body {
    font-family: var(--sw-font);
    color: var(--sw-dark);
    background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', 'ProximaNova-Bold', sans-serif;
    font-weight: 700;
    color: var(--sw-dark);
    letter-spacing: -0.01em;
}

/* --- Navbar / Header ------------------------------------------------------ */
.solid-menus .navbar-default {
    background-color: #ffffff;
    border-bottom: 3px solid var(--sw-red);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.solid-menus .navbar-default .navbar-nav > li > a {
    color: var(--sw-dark);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.solid-menus .navbar-default .navbar-nav > li > a:hover,
.solid-menus .navbar-default .navbar-nav > li.active > a {
    color: var(--sw-red);
}

/* Borde inferior rojo en ítem activo */
.solid-menus .navbar-default .navbar-nav > li > a:after {
    content: '';
    display: block;
    height: 2px;
    background: var(--sw-red);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}
.solid-menus .navbar-default .navbar-nav > li > a:hover:after {
    transform: scaleX(1);
}

/* --- Botones principales -------------------------------------------------- */
.btn-primary,
input[type="submit"].btn-primary,
button.btn-primary {
    background-color: var(--sw-red);
    border-color: var(--sw-red);
    color: #ffffff;
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--sw-red-dark);
    border-color: var(--sw-red-dark);
    color: #ffffff;
}

/* Botón de acción en formularios (Guardar, Entrar, etc.) */
.btn-default:not(.close):not([data-dismiss]) {
    border-color: var(--sw-border);
    color: var(--sw-dark);
}

.btn-default:not(.close):not([data-dismiss]):hover {
    border-color: var(--sw-red);
    color: var(--sw-red);
}

/* --- Links ---------------------------------------------------------------- */
a {
    color: var(--sw-red);
}
a:hover,
a:focus {
    color: var(--sw-red-dark);
}

/* Excepción: links de menú usuario, footer, banderas — no cambiar a rojo */
#footer a,
#footer-Movil a,
.flags a,
.mobile-flags a,
.dropdown-menu a {
    color: inherit;
}

/* --- Contenedor de contenido ---------------------------------------------- */
#page-wrapper {
    background-color: #ffffff;
}

/* Secciones de contenido con fondo gris suave */
.section-bg,
.content-section {
    background-color: var(--sw-gray);
}

/* --- Formularios ---------------------------------------------------------- */
.form-control:focus {
    border-color: var(--sw-red);
    box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.12);
    outline: none;
}

label {
    font-weight: 600;
    color: var(--sw-dark);
    font-size: 13px;
}

/* --- Kendo UI — color de acento mínimo ----------------------------------- */
.k-button.k-primary,
.k-state-selected {
    background-color: var(--sw-red) !important;
    border-color: var(--sw-red) !important;
    color: #ffffff !important;
}

/* --- Tablas / paneles de datos -------------------------------------------- */
.table > thead > tr > th {
    background-color: var(--sw-red);
    color: #ffffff;
    border-color: var(--sw-red-dark);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--sw-gray);
}

/* --- Garantías — botón de acción rojo ------------------------------------- */
.garantia-action,
a[href*="garantia"].btn,
a[href*="tramita"].btn {
    background-color: var(--sw-red);
    border-color: var(--sw-red);
    color: #ffffff;
}

/* --- Footer --------------------------------------------------------------- */
/* swissmex.mx usa fondo gris medio — aprox. #c8c8c8 */
#footer,
#footer-Movil {
    background-color: #cacaca;
    color: #333333;
    border-top: 3px solid var(--sw-red);
}

#footer a,
#footer-Movil a {
    color: #555555;
}

#footer a:hover,
#footer-Movil a:hover {
    color: var(--sw-red);
}

/* Logo de footer: en swissmex.mx el texto/logo es rojo */
#footer #swiss-logo-footer,
#footer-Movil #swiss-logo-footer {
    filter: none;
}

/* Texto de copyright y links del footer */
#copyright li,
#e-process-watermark a,
#footer .menu li {
    color: #555555;
}

/* --- Botón ENTRAR / login ------------------------------------------------- */
/* Estilo "outlined" similar al de swissmex.mx */
#button-login,
a#button-login {
    display: inline-block;
    padding: 5px 14px;
    border: 2px solid var(--sw-red);
    border-radius: 3px;
    color: var(--sw-red);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

#button-login:hover,
a#button-login:hover {
    background-color: var(--sw-red);
    color: #ffffff;
    text-decoration: none;
}

/* --- Página de login ------------------------------------------------------- */
.login-form h2,
.login-form h3 {
    color: var(--sw-red);
}

/* Título "ENTRAR" en página de login */
#page-wrapper h2:first-of-type,
.entrar-titulo {
    color: var(--sw-dark);
    border-bottom: 3px solid var(--sw-red);
    display: inline-block;
    padding-bottom: 6px;
}