/* GLOBAL */
html             { -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; line-height: 28px; scroll-behavior: smooth; }
.row             { margin:0 auto!important; max-width:110rem!important;   }
.grid-container  { max-width:90rem; }
figure           { margin:0;}
.center          { text-align:center; }
.btnPrimary      { background:#2c7be5; border-radius:5px!important; color:#fff!important; font:600 20px var(--header-fonts); line-height: 1em; margin:15px 0; padding:.6rem 3rem; text-transform: none; width:100%; }
.btnPrimary:hover{ background: var(--azul-medio); opacity: 1; }
a:hover          { opacity:1; text-decoration: none; }
.right           { float:right; }
.left            { float:left; }
.center          { text-align: center!important; }
p                { font:400 18px var(--text-fonts); }
ul li            { font:400 18px var(--text-fonts); }
ul li strong     { font:600 18px var(--text-fonts); }
ul li:last-child { border:none!important; margin:0; }
li::marker       { content: ""; }

#nav ul li       { padding:0 10px; text-align: center; width: auto; }
.menu > li > a   { padding:0.7rem 0.7rem; }
#nav ul li.active a { background: none!important; color:#2469C3!important; }
.formWrapper     { background: #fff; border-radius:5px; box-shadow: 0 7px 14px 0 rgba(65,69,88,0.1); }
.formWrapper select { background-position: right 0rem center; }
.box             { background: #fff; border-radius:5px; box-shadow: 0 7px 14px 0 rgba(65,69,88,0.1); margin:0; max-width: none; padding:40px 0; width: 100%;}

ul.dropdown li:last-child   { width: 100%; }
ul.dropdown li:last-child a { display:inline-block; width: auto; }



/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
/* PROJECTE FLC · LLAMADAS */
/* ------------------------------------------------------------------------------------------------------------------------------------------------ */

/* COLORES BASE */
:root {
    --azul-oscuro: #010047;
    --azul-medio: #010047;
    --gris-claro: #f4f4f4;
    --gris-medio: #757575;
    --texto: #1a1a1a;
    --naranja: #f28b30;
    --header-fonts: 'Genos', sans-serif;
    --text-fonts: 'Quicksand', sans-serif;

}

/* LAYOUT GENERAL */
/* -------------- */

body                 { background:#fff; color: var(--texto); font-family: var(--text-fonts); padding:40px 0; }

/* SIDEBAR */
.bg-sidebar          { background: var(--azul-oscuro); border-radius:15px; color: #fff; min-height: 100vh; margin-bottom: 40px; padding: 2rem 1rem; }
.logo                { max-width: 160px; margin-bottom: 2rem; }
.menu-item           { color: #fff; font-size: 1rem;padding: 0.6rem 0; }
.menu-item:hover     { color: var(--naranja); }
.menu-item.salir     { color: #fff; }


/* ÁREA DE CONTENIDO */
.content-area        { padding: 2rem; }

/* TITULAR */
.titulo              { margin: 0; font-size: 2rem; font-weight: bold; }
.subtitulo           { color: var(--azul-medio); margin-bottom: 2rem; }

/* CARDS DE RESUMEN */
.resume-card         { background: var(--azul-medio); border-radius: 8px; color: #fff; padding: 1.2rem; text-align: left; }
.resume-card p       { font-weight:600; margin-bottom:5px; }
.resume-num          { font-size: 2.4rem; margin-bottom: 0.2rem; }
.resume-date         { font-size: 0.85rem; opacity: 0.8; }


/* SECCIONES */
.section-block       { margin-top: 2.5rem; }
.section-title       { color: var(--azul-oscuro); font:600 22px var(--text-fonts); margin-bottom: 1rem; }


/* TABLAS */
table                { background: #fff; border: 1px solid var(--gris-medio); border-radius: 12px; box-shadow: 0 2px 4px 0 rgba(1,0,71,.04); }
table thead          { background: var(--gris-medio); }
table tbody tr:hover { background: #fafafa; }

.btn-icon            { color: var(--azul-medio); font-size: 1.2rem; font-weight: bold; }
.button.secondary    { background: var(--gris-medio); color: #fff; font:600 18px var(--text-fonts); margin-top: 1rem; padding:10px 40px; }


/* GLOBAL STYLES */
.sidebar-content h2  { font:400 42px var(--header-fonts); line-height: 1.3em; margin:0 0 40px; text-align: center; }
.sidebar-content p   { border-top:1px dotted #ffffff50; margin-top: 1rem; padding-top:1rem; }
nav a                { color:#fff; font:500 18px var(--text-fonts); line-height: 1.2em; }
nav a:hover          { color:#2469C3!important; }
nav img              { margin:-2px 5px 0 0; width: 20px; }
nav ul li:first-child{ width:100%; }
.menu .active > a    { background: none; font-weight:800; }
.dropdown.menu > li.is-dropdown-submenu-parent > a::after { border-color:#fff transparent transparent; }
.dropdown.menu > li.opens-right > .is-dropdown-submenu { background:var(--azul-medio) ; border:none; left:30px; padding:0 20px;   }
.dropdown.menu > li.opens-right > .is-dropdown-submenu a { cursor:pointer; padding:5px 0;  }
table thead tr,
table tfoot tr,
table thead th       { background: var(--azul-medio); color:#fff; font:700 18px "Quicksand", sans-serif!important; padding:12px 20px; text-align: center!important; }
table tbody tr td    { color: var(--azul-medio); font:500 16px "Quicksand", sans-serif!important; text-align: center!important; }
.resume-card         { position:relative; }
.resume-card h3      { font:400 42px var(--header-fonts); }
.resume-card img     { position: absolute; right:10px; top:10px; width:42px; }

/* TOP HEADER */
.top-header          { border-bottom:1px dotted var(--azul-medio) ; margin:0 0 20px; }
.top-header h2       { color: var(--azul-medio); font:500 42px var(--header-fonts); margin:0 0 20px; }
.top-header h2 span  { color: var(--azul-medio); display: block; font:500 26px var(--text-fonts); margin:-5px 0 0 0; line-height: 1em; }
h3                   { display: inline-block; font:400 42px var(--header-fonts); margin: 0 0 20px; }
 h3.title            { color: var(--azul-medio); display: block; font:500 26px var(--text-fonts); }
.username            { color: var(--azul-medio); font:500 24px var(--header-fonts); margin:0; }
.username img        { background: var(--azul-medio); padding:5px; border-radius:25px; }
.updates h3          { font:500 20px var(--text-fonts); margin:0;  }
.updates small       { display: block; font:500 14px var(--text-fonts); margin:0 0 10px;  }
.company             { display: inline-block; font:500 16px var(--text-fonts); text-align: right; width: 100%; }

/* PAGINATION */
.pagination          { display: inline-block; margin:20px auto; text-align: center; width: 100%; }
.pagination-centered { text-align: center;  }
.pagination-centered ul { margin:0 auto; text-align: center;}
.pagination .current { background: var(--azul-medio)!important; border-radius:25px; display: inline-block; font:500 20px var(--text-fonts); min-width: 32px; text-align:center; }
.pagination a        { border-radius:25px; display: inline-block; font:400 20px var(--text-fonts); min-width: 32px; text-align:center; width:auto; }

/* FILTERS */
.filters-area        { background:#f0f2f5!important; border:none!important; border-radius: 12px; box-shadow: 0 2px 4px 0 rgba(1,0,71,.04); padding:40px; }
.filters-area p,
.filters-area a,
.filters-area input,
.filters-area select { margin:0; }
.filters-area .button{ background:var(--azul-oscuro); border:none; color:#fff; font:500 18px var(--text-fonts); line-height: 1em; padding:10px 25px; text-align: center; }

.callout-panel {background:var(--azul-oscuro)!important; border:none; color:#fff!important; }
.section-block h3 { color: var(--azul-oscuro); font:600 22px var(--text-fonts); margin-bottom: 1rem; }

#gestiones label     { color: var(--azul-oscuro); font:600 18px var(--text-fonts)!important; margin-bottom: .5rem!important; text-align: left!important; }
#gestiones form      { margin-top:2rem; }

.header-box      { background: #000a43; border-radius: 8px; /* Blau fosc de la imatge */ color: white; padding: 2rem; }
.return-call-btn { background: #74A730; color: white; font:600 22px var(--text-fonts)!important; width: auto; padding: 1rem; border-radius: 6px; margin: 1.5rem 0; }
.btn-save        { background: #000a43; color: white; width: 100%; padding: 0.9rem; margin-top: 1rem; }
.btn-cancel      { background: #8a8a8a; color: white; width: 100%; padding: 0.9rem; margin-top: 1rem; }
.btn-end         { background: #ff4338; color: white; width: 50%; padding: 1rem; font:500 18px var(--text-fonts); text-align: center; margin: 2rem auto 0; border-radius: 6px; }
.divider         { margin: 1.6rem 0 .5rem; border-bottom: 1px solid var(--azul-oscuro); }
.icon            { font-size: 1.4rem; margin-right: 0.5rem; }

#finalizar       { text-align: center; }
#usersTable      { display: inline; width:100%; }



 /* FOOTER */
footer               { background: var(--azul-oscuro); border-radius:15px; width:100%; color:#fff; margin:0; padding:40px; text-align: center; }
footer p             { font:400 18px var(--text-fonts); text-align: center; }



/* FORMS */

.forms label         { color: var(--azul-oscuro); font:600 16px var(--text-fonts)!important; margin-bottom:7px; }