/* ============================================================
   PETRORAC Corporate Theme
   Compatible con osTicket 1.18.x
=============================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{

--rojo:#b53030;
--naranja:#f5a623;
--gris:#3f3f3f;
--grisClaro:#f5f7fa;
--blanco:#ffffff;

}

*{

box-sizing:border-box;

}

body{

margin:0;

padding:0;

font-family:'Inter',sans-serif;

background:#eef2f7;

color:#333;

}

/**************** HEADER ****************/

#header{

background:#fff;

padding:20px 35px;

border-bottom:5px solid var(--naranja);

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

/**************** LOGO ****************/

#logo{

display:flex;

align-items:center;

text-decoration:none;

}

#logo img{

height:78px;

transition:.25s;

}

#logo img:hover{

transform:scale(1.03);

}

/**************** LOGIN ****************/

.pull-right p{

margin:4px 0;

}

.pull-right a{

color:var(--rojo);

font-weight:600;

text-decoration:none;

margin-left:12px;

}

.pull-right a:hover{

color:var(--naranja);

}

/**************** MENU ****************/

#nav{

display:flex;

justify-content:center;

gap:20px;

background:#fff;

margin:0;

padding:15px 25px;

list-style:none;

border-bottom:1px solid #ececec;

box-shadow:0 3px 10px rgba(0,0,0,.04);

}

#nav li{

margin:0;

padding:0;

}

#nav a{

display:block;

padding:12px 22px;

border-radius:8px;

font-weight:600;

color:#555;

text-decoration:none;

transition:.25s;

}

#nav a:hover{

background:var(--rojo);

color:white;

}

#nav a.active{

background:var(--rojo);

color:white;

}

/**************** CONTENIDO ****************/

#content{

background:white;

margin:35px auto;

max-width:1200px;

border-radius:15px;

padding:40px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/**************** TITULOS ****************/

h1{

font-size:38px;

font-weight:700;

color:var(--rojo);

margin-bottom:20px;

}

h2{

color:var(--rojo);

}

/**************** BOTONES ****************/

.button,
.btn,
input[type=submit]{

background:var(--rojo)!important;

border:none!important;

color:white!important;

padding:12px 26px;

border-radius:8px;

font-weight:600;

transition:.25s;

cursor:pointer;

}

.button:hover,
.btn:hover,
input[type=submit]:hover{

background:#912727!important;

transform:translateY(-2px);

}

/**************** FOOTER ****************/

#footer{

margin-top:40px;

padding:25px;

text-align:center;

color:#777;

font-size:13px;

}
/* Eliminar completamente el estilo viejo del menú */

#nav li a {

    background: none !important;
    background-image: none !important;
    text-indent: 0 !important;
    padding-left: 20px !important;

}

#nav li a::before {

    display: none !important;
    content: none !important;

}
#nav li a{

    min-height:42px;

    line-height:42px;

}
/* ===========================
   MENU
=========================== */

#nav{

    display:flex;

    align-items:center;

    gap:12px;

    margin:0;

    padding:15px 35px;

    background:#f8f9fb !important;

    border:none;

    box-shadow:none;

    height:auto;

}

#nav li{

    list-style:none;

}

#nav li a{

    background:none !important;

    padding:12px 22px !important;

    line-height:normal !important;

    height:auto !important;

    border-radius:10px;

    font-weight:600;

    color:#444;

    transition:.25s;

}

#nav li a:hover{

    background:#f4a300 !important;

    color:white;

}

#nav li a.active{

    background:#b62b2b !important;

    color:white;

}
#nav li a.home,
#nav li a.kb,
#nav li a.new,
#nav li a.status,
#nav li a.tickets{

    background-image:none !important;

    padding-left:22px !important;

}
#content{

    padding:45px;

    margin:0;

}
.button,
.blue.button,
.green.button{

    border-radius:12px;

    border:none;

    font-weight:600;

    padding:15px 28px;

    box-shadow:0 8px 18px rgba(0,0,0,.12);

    transition:.25s;

}

.button:hover,
.blue.button:hover,
.green.button:hover{

    transform:translateY(-2px);

}
body{

    background:#eef3f8 !important;

}
.button{
    border:1px solid transparent;
}

.button:hover{
    border:1px solid #d32f2f;
}
.button:hover,
#landing_page a:hover{

    border-bottom:none !important;
    margin-bottom:0 !important;

}
.button:hover{
    transform:none;
}
/* Evitar que tiemble el menú */

#nav li a,
#nav li a:hover,
#nav li a.active{

    border-bottom:none !important;
    margin-bottom:0 !important;
    text-decoration:none !important;

}
/* ==========================
   HEADER PETRORAC
========================== */

#header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 35px;

    height:auto !important;

    min-height:90px;

    background:#ffffff;

    border-bottom:4px solid #c62828;

}
#logo{

    display:flex;

    align-items:center;

}

#logo img{

    max-height:65px;

    width:auto;

}
/*área del usuario para que no este flotando*/
.pull-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-end;

    height:100%;

}
/*Los textos*/
#header p{

    margin:4px 0 !important;

    width:auto !important;

}
/*Enlaces*/
#header a{

    color:#555;

    font-weight:600;

}

#header a:hover{

    color:#c62828;

}
/*Para que el menu no se vea separado */
#nav{

    margin:0 !important;

}
/* Dar espacio vertical y padding interno al contenedor blanco */
#content {
  padding: 40px 30px; /* Aumenta el padding inferior para los botones derechos */
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

/* Espaciado para el bloque de botones laterales */
.front-page-button, 
.action-button {
  margin-bottom: 15px;
}
/* Mejorar el subtítulo dorado/naranja */
.welcome-lead {
  color: #d97706; /* Un tono un poco más oscuro para mejor contraste */
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 5px;
  margin-bottom: 15px;
}
/*Para hacerlo responsivo */
/* =====================================================
   LANDING PAGE RESPONSIVE
===================================================== */

/* Elimina los float originales de osTicket */
#landing_page .sidebar,
#landing_page .main-content{
    float:none !important;
}

/* Escritorio */
#landing_page{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:45px;

}

#landing_page .main-content{

    flex:1;
    min-width:0;

}

#landing_page .sidebar{

    width:320px;
    flex-shrink:0;

}
/*Mejora los botones en responsivo */
#landing_page .front-page-button{

    display:flex;
    flex-direction:column;
    gap:18px;

}

#landing_page .front-page-button p{

    margin:0;

}

#landing_page .front-page-button a{

    display:flex !important;
    justify-content:center;
    align-items:center;

    min-height:95px;

    border-radius:18px;

    font-size:18px;
    font-weight:700;

    text-align:center;

}/*Tamaño tableta*/
@media (max-width:992px){

    #landing_page{

        gap:25px;

    }

    #landing_page .sidebar{

        width:280px;

    }

}
/*tamaño celular*/
@media (max-width:768px){

    #nav{

        display:flex;
        flex-direction:column;
        gap:10px;
        padding:15px;

    }

    #nav li{

        width:100%;

    }

    #nav li a{

        display:block;
        width:100%;
        text-align:center;
        padding:15px !important;

    }

}
@media (max-width:768px){

    #landing_page .sidebar{

        width:100%;
        display:flex;
        justify-content:center;

    }

    #landing_page .front-page-button{

        width:100%;
        max-width:420px;

    }

    #landing_page .front-page-button a{

        width:100%;

    }

}
@media (max-width:768px){

    #header{

        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align:center;

    }

    #logo{

        margin-bottom:15px;

    }

    #logo img{

        width:220px;
        max-width:90%;

    }

}
/*ocultar los botones en la pagina principal*/
#landing_page .sidebar .content{

    display:none;

}
/* ===========================
   LANDING PAGE
=========================== */

#landing_page .pull-right{
    float:none !important;
}
/*Convertir la portada en Flexbox*/
#landing_page{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:40px;

}

#landing_page .main-content{

    flex:1;
    min-width:0;

}

#landing_page .sidebar{

    width:320px;
}
/*Hacer los botones iguales*/
#landing_page .front-page-button{

    display:flex;
    flex-direction:column;
    gap:18px;

}

#landing_page .front-page-button p{

    margin:0;

}

#landing_page .front-page-button a{

    display:flex !important;

    justify-content:center;
    align-items:center;

    min-height:90px;

    border-radius:16px;

    font-size:18px;
    font-weight:700;

}
/*Responsive*/
@media (max-width:900px){

    #landing_page{

        flex-direction:column;

    }

    #landing_page .sidebar{

        width:100%;

    }

    #landing_page .front-page-button a{

        width:100%;

    }

}
html,
body,
#container,
#wrapper,
#content{
    max-width:100% !important;
    min-width:0 !important;
}