:root {
    --color-white: #FFFFFF;
    --color-gray: #808080;
    --color-lightgray: #DCDCDC;
    --color-black: #000000;
    --color-yellow: #ffcc00;
    --color-orange: #ff9900;
    --font-titulo1: "Knockout", "HTF68 Full Featherweight";
    --font-titulo2: "Univers 67 Condensed", "Arial Bold Narrow";
    --font-titulo3: "Univers 57 Condensed", "Arial Narrow";
    --font-parrafo: "Times New Roman", Times, serif;
}

/* 🏷️🏷️🏷️ HEADER 🏷️🏷️🏷️*/
.header {
    background-color: var(--color-black) !important;
    color: var(--color-white);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #000000 !important;
}

body > .sapUiBody {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/*.pageWrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}*/

/*.gridWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}*/

/*Logo 🎨*/
.logoFINNINGHeader {
    padding-left: 50px;
    padding-right: 50px;
}


/*Lenguaje 🌍*/
.languageList {
    padding-left: 50px;
    padding-right: 50px;
}

.languageList .linkLang {
    margin: 0 5px;
    color: var(--color-yellow) !important;
}


/* 📑 Menu */
.toolHeaderMenu {
    flex-wrap: wrap;
    min-width: 200px;
}

.menu {
    background-color: transparent !important;
    color: var(--color-white) !important;
    box-shadow: none !important;
}

.menu * {
    background-color: transparent !important;
    color: var(--color-white) !important;
    box-shadow: none !important;
}

.menu span,
.menu select {
    /*Botones del menu*/
    text-transform: uppercase;
    font-family: var(--font-titulo1);
    letter-spacing: 1.5px;
    color: var(--color-white) !important;
}

.sapTntToolHeader .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
    /*Icono desplegable botones del menu*/
    color: var(--color-white) !important;
}

/*Animacion*/
.hoverMenu:hover {
    background-color: var(--color-gray) !important;
    transition: background-color 0.3s ease;
}

.sapMMenu {
    background-color: var(--color-white) !important;
    border: 2px solid var(--color-black) !important;
    border-radius: 2px !important;
    padding: 7px !important;
    margin: 20px !important;
}

.sapUiMnuItm {
    background-color: var(--color-white) !important;
}

.sapUiMnuItmIco,
.sapUiMnuItmTxt {
    color: var(--color-black) !important;
}

.sapUiMnuItm:hover {
    background-color: var(--color-lightgray) !important;
}

.sapUiMnuItm:hover .sapUiMnuItmIco,
.sapUiMnuItm:hover .sapUiMnuItmTxt {
    color: var(--color-black) !important;
}

.sapUiMnuItm:focus,
.sapUiMnuItm:active,
.sapUiMnuItm:hover,
.sapUiMnuItm:visited,
.sapUiMnuItm:focus-within,
.sapUiMnuItm:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}


.logoMargin { 
    padding-left: 15px;
}

/* 🏷️ END HEADER 🏷️*/

/* CONTENT */
.mainContainer {
    display: flex;
    flex-direction: column;
    height: auto;
}

.appWrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: auto;
}

.appContainer {
    flex-grow: 1;
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

/*.videoBanner {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 600px !important;
    min-width: 600px !important;
    width: auto !important;
    height: auto !important;
    max-height: 100vh !important;
    object-fit: cover;
    background-color: var(--color-white);
    width: 100% !important;
}*/
.videoBanner {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flex-grow {
    flex: 1 1 auto;
    overflow: hidden;
}

/* END CONTENT */

/* FOOTER */

.portalFooter {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.footer {
    background-color: var(--color-black) !important;
    margin-top: auto;
}

.footerColumnTitle {
    color: var(--color-yellow);
    padding-bottom: 10px;
}

.footerLink {
    color: var(--color-white) !important;
    margin-bottom: 4px;
}

.footerLink:hover {
    color: var(--color-yellow) !important;
}

.imgLogo {
    margin: 2rem auto 1rem auto;
    width: 50%;
    height: auto;
    display: block;
}

.imgLogoFooter {
    vertical-align: middle;
    width: 130%;
    max-width: 200px;
}

.imgLogoEmpresa {
    margin-bottom: 3rem;
    max-width: 80px;
    float: right;
}
/* END FOOTER */

/*Estilos controles*/

.customButton .sapMBtnInner .sapMDialogEndButton  {
    /*background-color: var(--color-yellow) !important;*/
    color: var(--color-black) !important;
    /*border: solid 1px !important;*/
    --sapContent_FocusColor: var(--color-black) !important;
}

.customButton .sapMDialogEndButton .sapMBtnInner:hover {
    filter: brightness(0.9) !important;
}

.customButton .sapMDialogEndButton .sapMBtnInner .sapUiIcon {
    color: var(--color-black) !important;
}

.sapMDialogEndButton  {
    /*background-color: var(--color-yellow) !important;*/
    color: var(--color-black) !important;
    /*border: solid 1px !important;*/
    --sapContent_FocusColor: var(--color-black) !important;
}

.sapMDialogEndButton:hover {
    filter: brightness(0.9) !important;
}

.sapMITH .sapMITBSelected .sapMITBContentArrow::after {
    background: var(--color-yellow) !important;
}

.sapMITBFilter .sapMITBText .sapMITHTextContent {
    color: var(--color-black) !important;
}

.sapMFeedListItemFigure .sapFAvatarS {
    color: var(--color-gray) !important;
    background: var(--color-lightgray) !important;
}

/* Para botón común */
.customButtonDefault .sapMBtnInner {
    background-color: var(--color-yellow) !important;
    color: var(--color-black) !important;
    border: solid 1px !important;
    --sapContent_FocusColor: var(--color-black) !important;
}

.customButtonDefault .sapMBtnInner:hover {
    filter: brightness(0.9) !important;
}

/* Para botón emphasized */
.customButtonEmphasized .sapMBtnInner {
    background-color: var(--color-orange) !important;
    color: var(--color-black) !important;
    border: solid 1px var(--color-black) !important;
    --sapContent_FocusColor: var(--color-lightgray) !important;
}

.customButtonEmphasized .sapMBtnInner:hover {
    filter: brightness(0.95) !important;
}

.sapMITBFilter .sapMITBText .sapMITHTextContent {
    font-weight: bolder !important;
}

.sapMGT.OneByOne .sapMTileCnt.News, .sapMGT.TwoByOne .sapMTileCnt.News{
    background: var(--color-gray) !important;
    text-shadow: 0 0 black !important;
}

.customToolbar.sapMTB {
    background-color: white !important;
    color: black !important; /* Si necesitás texto visible sobre blanco */
    border: none;
    box-shadow: none;
}

.customToolbar .sapMTitle, .customLabel {
    font-weight: bolder !important;
}

.cuerpoPortal {
    background: var(--color-black) !important;
    width: 100% !important;
}
.portalFooter {
    background-color: black;
    padding: 2rem 1rem;
    color: white;
    box-sizing: border-box;
}

.footerColumnTitle {
    color: #ffcc00;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.footerLink {
    color: white;
    text-decoration: none;
    display: block;
    margin-bottom: 0.3rem;
    white-space: nowrap;
}

.footerLink:hover {
    text-decoration: underline;
}