/*!
    
 =========================================================
 * WebEngine CMS
 * https://webenginecms.org/
 =========================================================
 
 * Author Lautaro Angelico (https://lautaroangelico.com/)
 * Copyright (c) 2013-2020 Lautaro Angelico, All Rights Reserved
 
 * Licensed under the MIT license
 * http://opensource.org/licenses/MIT
 
 =========================================================
 
*/
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: none !important;
}

a:focus, a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

.form-control {
	background: #fafafa;
	border: 1px solid #e3e3e3;
	color: #666;
}
.form-control:focus {
	border: 1px solid #ccc;
}

/* http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3 */
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

/* http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 */
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.thumbnail {
    background-color: #f1f1f1;
    border: 1px solid #e3e3e3;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #ff0000;
}

/* =======================================================
   REEMPLAZO TOTAL DE COLORES CELESTES A NEGRO Y FUEGO MÍSTICO
   ======================================================= */

/* 1. BARRA SUPERIOR DE ANUNCIOS Y CAJA DE INGRESAR DERECHA (ESTILO FUEGO) */
.mu-marquee,
.mu-track,
.mu-shine,
.global-top-bar,
.card,
.panel,
.card-header,
[class*="login"] {
    background-image: linear-gradient(to right, #2a080c, #601015, #902010, #601015, #2a080c) !important;
    background-color: #601015 !important;
    border: 2px solid #ff3300 !important;
    border-color: #ff3300 !important;
    box-shadow: 0 0 15px rgba(255, 51, 0, 0.4) !important;
}

/* 2. MENÚ DE NAVEGACIÓN Y BORDE CELESTE DE LA IZQUIERDA -> NEGRO CRISTAL */
.navbar,
.navbar-nav,
nav,
.bg-info,
[class*="bg-info"],
.right-sidebar,
[class*="sidebar"],
div[style*="13, 202, 240"],
div[style*="0dcaf0"] {
    background-image: none !important;
    background-color: rgba(15, 15, 15, 0.95) !important;
    background: rgba(15, 15, 15, 0.95) !important;
    border: 2px solid #252525 !important;
    border-color: #252525 !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7) !important;
}

/* REGLA DE PROTECCIÓN: Mantiene la barra de noticias de arriba en fuego */
.mu-marquee, .mu-track, .mu-shine, .global-top-bar {
    background-image: linear-gradient(to right, #2a080c, #601015, #902010, #601015, #2a080c) !important;
    border-bottom: 2px solid #ff3300 !important;
}

/* 3. BOTONES DE SOPORTE DIRECTO Y COMPRAR VIP */
.right-sidebar a,
.right-sidebar button,
.btn-primary, 
[class*="btn"], 
#btn,
div[style*="0dcaf0"] a,
.nav-link {
    background-color: rgba(0, 0, 0, 0.7) !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

  /* Forzar que las letras de los anuncios de arriba se mantengan blancas legibles con relieve negro profundo */
    .bg-info *,
    [class*="bg-info"] *,
    marquee,
    marquee * {
        color: #ffffff !important;
        font-family: 'Arial Black', Arial, Helvetica, sans-serif !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        text-shadow: 2px 2px 2px #000000, -1.5px -1.5px 0 #000000, 1.5px -1.5px 0 #000000, -1.5px 1.5px 0 #000000, 1.5px 1.5px 0 #000000 !important;
    }

/* 5. TEXTOS EN ALTA DEFINICIÓN BLANCOS CON DELINEADO NEGRO PROFUNDO */
.nav-link, 
.navbar-nav a, 
.btn-primary, 
#btn,
.mu-text,
.mu-marquee *,
.card-header h3,
.content p,
.content div,
.right-sidebar a,
.navbar-nav .nav-item a {
    color: #ffffff !important;
    font-family: 'Arial Black', Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-shadow: 2px 2px 3px #000000, -1.5px -1.5px 0 #000000, 1.5px -1.5px 0 #000000, -1.5px 1.5px 0 #000000, 1.5px 1.5px 0 #000000 !important;
    transition: all 0.3s ease-in-out !important;
}

/* 6. BOTONES CHICOS DE LOGIN (INICIAR SESIÓN Y RECUPERAR CLAVE) */
.card input[type="submit"], 
.card button, 
.btn-block,
[class*="login"] button,
[class*="login"] a,
.form-group a {
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: bold !important;
    font-size: 12px !important;
    text-shadow: 1.5px 1.5px 0 #000000, -1.5px -1.5px 0 #000000, 1.5px -1.5px 0 #000000, -1.5px 1.5px 0 #000000 !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
    border: 1px solid #ffffff !important;
    padding: 5px 10px !important;
    display: inline-block !important;
    width: auto !important;
    float: none !important;
}

/* 7. HOVER INTERACTIVO (BRILLO DORADO AL PASAR EL MOUSE) */
.nav-link:hover, 
.btn-primary:hover, 
button:hover,
input[type="submit"]:hover,
.right-sidebar a:hover {
    transform: scale(1.03) !important;
    color: #ffcc00 !important;
    text-shadow: 2px 2px 3px #000000, -1.5px -1.5px 0 #000000, 1.5px -1.5px 0 #000000, -1.5px 1.5px 0 #000000, 1.5px 1.5px 0 #000000 !important;
}

/* =======================================================
   WEBSHOP CATALOG - Luci template
   Diseño tipo catálogo con tarjetas, tabs, alertas y hover.
   ======================================================= */
.webshop-balancebar,
.webshop-tabs,
.webshop-grid,
.webshop-card,
.webshop-card *,
.webshop-modal,
.webshop-modal * {
    box-sizing: border-box !important;
}

.webshop-balancebar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.webshop-balancebar > div {
    flex: 1 1 210px !important;
    padding: 12px 14px !important;
    background: linear-gradient(180deg, rgba(38, 43, 60, .96), rgba(14, 16, 22, .96)) !important;
    border: 1px solid rgba(255, 198, 0, .35) !important;
    border-radius: 10px !important;
    color: #dfe6f4 !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .30) !important;
    text-transform: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

.webshop-balancebar span {
    display: block !important;
    margin-bottom: 4px !important;
    color: #9aa6bd !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    text-shadow: none !important;
}

.webshop-balancebar strong,
.webshop-ok,
.webshop-danger {
    display: block !important;
    color: #ffd55a !important;
    font-size: 16px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.65) !important;
    text-transform: none !important;
}

.webshop-danger { color: #ff6868 !important; }
.webshop-ok { color: #72ef9d !important; }

.webshop-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin: 4px 0 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.webshop-tabs a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 8px 13px !important;
    background: rgba(8, 10, 16, .84) !important;
    border: 1px solid rgba(255, 198, 0, .45) !important;
    border-radius: 999px !important;
    color: #ffd23d !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .35px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 5px #000 !important;
    box-shadow: none !important;
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.webshop-tabs a:hover,
.webshop-tabs a.active {
    transform: translateY(-2px) !important;
    background: linear-gradient(90deg, #ffb300, #ff5b10) !important;
    border-color: #ffd54f !important;
    color: #171008 !important;
    text-shadow: none !important;
    box-shadow: 0 0 18px rgba(255, 160, 0, .38) !important;
}

.webshop-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.webshop-card {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
    padding: 15px !important;
    background: linear-gradient(180deg, rgba(40, 45, 64, .98), rgba(18, 20, 29, .98)) !important;
    border: 1px solid rgba(255, 198, 0, .38) !important;
    border-radius: 14px !important;
    color: #f4f6ff !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.42) !important;
    transform: translateY(0) scale(1) !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease !important;
}

.webshop-card:hover {
    transform: translateY(-9px) scale(1.015) !important;
    border-color: #ffc400 !important;
    box-shadow: 0 24px 54px rgba(0,0,0,.58), 0 0 28px rgba(255, 188, 0, .28) !important;
    filter: brightness(1.08) !important;
    z-index: 2 !important;
}

.webshop-card-image {
    width: 100% !important;
    height: 250px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 14px !important;
    padding: 8px !important;
    background: rgba(0,0,0,.46) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    box-shadow: inset 0 0 22px rgba(0,0,0,.45) !important;
}

.webshop-card-image img {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border: 0 !important;
    box-shadow: none !important;
}

.webshop-card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-transform: none !important;
}

.webshop-category {
    align-self: center !important;
    display: inline-flex !important;
    margin: 0 0 8px !important;
    padding: 4px 10px !important;
    background: rgba(255, 198, 0, .12) !important;
    border: 1px solid rgba(255, 198, 0, .38) !important;
    border-radius: 999px !important;
    color: #ffd34f !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 5px #000 !important;
}

.webshop-card h3 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: Arial Black, Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    text-transform: none !important;
    text-shadow: 0 3px 10px rgba(0,0,0,.85) !important;
}

.webshop-card p,
.webshop-contains {
    margin: 0 0 10px !important;
    color: #e9edf8 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    text-shadow: 0 2px 4px #000 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.webshop-contains {
    min-height: 42px !important;
    color: #cbd3e7 !important;
    font-size: 12px !important;
}

.webshop-price {
    margin: auto 0 13px !important;
    padding-top: 6px !important;
    color: #ffe06a !important;
    font-family: Arial Black, Arial, Helvetica, sans-serif !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    text-shadow: 0 3px 9px rgba(0,0,0,.9) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.webshop-buy-form {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.webshop-buy-btn {
    display: block !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    background: linear-gradient(180deg, #ffc85a, #ff7b16 58%, #f04b0a) !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #1b0c04 !important;
    cursor: pointer !important;
    font-family: Arial Black, Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .35px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-shadow: 0 9px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45) !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

.webshop-buy-btn:hover {
    transform: translateY(-2px) !important;
    color: #1b0c04 !important;
    filter: brightness(1.08) !important;
    box-shadow: 0 13px 22px rgba(0,0,0,.48), 0 0 18px rgba(255, 168, 0, .34) !important;
}

.webshop-ribbon {
    position: absolute !important;
    right: -26px !important;
    top: 18px !important;
    z-index: 3 !important;
    min-width: 118px !important;
    padding: 7px 28px !important;
    background: linear-gradient(90deg, #ffb000, #ff4e00) !important;
    color: #ffffff !important;
    font-family: Arial Black, Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 4px #000 !important;
    transform: rotate(35deg) !important;
    box-shadow: 0 5px 12px rgba(0,0,0,.4) !important;
}

.webshop-card-low {
    opacity: .92 !important;
}

.webshop-modal {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(0, 0, 0, .76) !important;
}

.webshop-modal.is-visible {
    display: flex !important;
}

.webshop-modal-box {
    width: min(390px, 100%) !important;
    padding: 30px 28px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #555555 !important;
    text-align: center !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.48) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-transform: none !important;
}

.webshop-modal-icon {
    width: 66px !important;
    height: 66px !important;
    margin: 0 auto 18px !important;
    border: 3px solid #f5bd86 !important;
    border-radius: 50% !important;
    color: #f5a85e !important;
    font-size: 42px !important;
    line-height: 60px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
    text-shadow: none !important;
}

.webshop-modal h3 {
    margin: 0 0 12px !important;
    color: #555555 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-shadow: none !important;
}

.webshop-modal p {
    margin: 0 !important;
    color: #666666 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    text-transform: none !important;
    text-shadow: none !important;
}

.webshop-modal button {
    margin: 20px 0 0 !important;
    padding: 10px 17px !important;
    background: #e53935 !important;
    border: 0 !important;
    border-radius: 5px !important;
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: 0 3px 8px rgba(0,0,0,.2) !important;
}

@media (max-width: 767px) {
    .webshop-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .webshop-card-image {
        height: 220px !important;
    }
}

/* Webshop success modal */
.webshop-modal-success .webshop-modal-icon {
    border-color: #34d27b !important;
    color: #24b967 !important;
}

.webshop-modal-success h3 {
    color: #1f8d52 !important;
}

.webshop-modal-success button {
    background: #24b967 !important;
}