/*  --------------------------------------------------------------------
    HOJA DE ESTILOS FmTkdApps
    (c)2023 - sime.tech                   <https://comarcalagunera.com>
              Diseño: Ing. Javier Vélez   <soporte@comarcalagunera.com>
    --------------------------------------------------------------------
    Prohibida su reproducción parcial o total sin plena
    autorización por escrito de su autor.
    -------------------------------------------------------------------- */

/* ++++++++++++++++++++++++++++++++++++++++++++ GOOGLE FONTS ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,600,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600,700&display=swap');

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ BODY ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body {
    font-family: 'Open Sans', Tahoma, 'Arial', sans-serif;
    font-size:1em;
    -webkit-touch-callout:none;
    -webkit-text-size-adjust:none;
    -webkit-user-select:none;
    background: #f7f7f9;
    color: #515156;
    font-weight: 400;
    padding:0;
    margin:0;
}
body.no-sess {  margin-top: 69px; }

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
.btn, .btn:active, .btn:focus, .btn:hover, .btn:visited {outline:0 !important; box-shadow: none !important; }

::placeholder { color:#e0e0e1 !important; opacity: 1; text-transform: none; }
:-ms-input-placeholder { color:#e0e0e1 !important; text-transform: none; }
::-ms-input-placeholder { color:#e0e0e1 !important;text-transform: none; }

h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', serif; font-weight: 400; margin-bottom:0; }

a, a:visited { color: var(--mdb-info); font-weight: 400; }
a:hover, a:active { color: #870110; text-decoration: none; }

/*        Widths            */
.w50 { width:50px !important; }
.w60 { width:60px !important; }
.w70 { width:70px !important; }
.w80 { width:80px !important; }
.w90 { width:90px !important; }
.w100 { width:100px !important; }
.w110 { width:110px !important; }
.w120 { width:120px !important; }
.w130 { width:130px !important; }
.w140 { width:140px !important; }
.w150 { width:150px !important; }
.w160 { width:160px !important; }
.w170 { width:170px !important; }
.w180 { width:180px !important; }
.w200 { width:200px !important; }
.wmin { inline-size:min-content !important; }

.weight400 { font-weight: 400; }
.weight600 { font-weight: 600; }

.invalid { background-color: rgba(255,0,0,0.12) !important; }
.valid { background-color: rgba(4,101,70,0.12) !important; }

.btn-blue, .btn-blue:visited { background-color: var(--mdb-info); color:#f4f4f4; }
.btn-blue:hover, .btn-blue:active { background-color: rgba(28,54,77,0.9); ; color:#f4f4f4;}

/* ++++++++++++++++++++++++++++++++++++++++++++++ LOGIN +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#main-100vh { height:100vh; padding:0 0.2rem; }
#footer-login { font-size:0.9em; line-height: 1em; padding:0.4em 1em; position: fixed; bottom: 0; width:100%; color:rgba(255,255,255,0.35); background: rgba(255,255,255,0.1); }
#footer-login a { color:rgba(255,255,255,0.30); }

/*  +++++++++++++++++++++++++++++++++++++++++++ LOADER CSS  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#loader { height: 4px; width: 100%; position: fixed; overflow: hidden; background-color:transparent; top:0; z-index:11000; }
#loader:before{ display: block; position: absolute; content: ""; left: -200px; width: 200px; height: 4px; background-color: rgba(255,255,255,0.60); animation: loading 1.5s linear infinite; }
@keyframes loading { from {left: -200px; width: 30%;} 50% {width: 30%;} 70% {width: 70%;} 80% { left: 50%;} 95% {left: 120%;} to {left: 100%;}}

/* ++++++++++++++++++++++++++++++++++++++++++++ MODALES +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#modal-frame .modal-content { color:#e6e6e6; border-bottom:1px solid #e6e6e6; }
#modal-preview { font-size: 0.95em; }
#modal-preview .modal-body { padding: 1rem; }
.modal-header h5 { font-family: 'Open Sans'; font-weight: 600; }
.modal .modal-frame { position: absolute; max-width: 100%; width: 100%; margin: 0; }
.modal .modal-dialog.modal-top { top: 0; }

/* +++++++++++++++++++++++++++++++++++++++++++++ CARDS ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.card .card-title {  text-align: center;  font-weight: 400; font-size:1em; padding: 0.4rem 0; margin: 0;}
.card-dash .card-body { padding: 0.3rem; }
.card-dash .card-footer { border-top: 0; text-align: center; padding: 0.5rem 0.3rem; }
.num-records { font-size: 2.2em; text-align: center; font-weight: 500; }

#card-login { min-height: 250px; min-width: 360px; }
#card-login .card-body { min-height: 230px; }


/* +++++++++++++++++++++++++++++++++++++++++ SIDE / NAVBAR ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#wrapper { display: flex; width: 100%; align-items: stretch; }
#sidebar { min-width: 220px; max-width: 220px; min-height: calc(100vh - 40px); margin-top: 40px; background: #1e1e20; color: #f0f0f6;  }
#sidebar-caret { height: calc(100vh - 40px); font-size:16px; width:10px; float: right; background: rgba(0,0,0,0.2); cursor: pointer; display: flex;}
#sidebar-email { font-size:0.65em; text-overflow: ellipsis; max-width: 100%; overflow: hidden; color:#909096; }
#sidebar.active { margin-left: -210px; }
#sidebar ul p { color: #f0f0f0; padding: 10px; }
#sidebar ul li a { color:#f0f0f0; font-size:0.92em; padding:5px 0 5px 1em; display: block; font-weight: normal; }
#sidebar > ul > li > ul > li > a { padding-left:2.6em; font-size: 0.85em; }
#sidebar ul li a:hover { color: #f0f0f0; background: #35363a; transition: 0.3s ease-in; opacity: 1; text-decoration: none; }
#sidebar > ul > li > ul  { background: #25252a; }
#sidebar > ul > li { border-bottom:1px solid rgba(255,255,255,0.1); }
#sidebar > ul > li > ul >li { border-bottom:1px solid rgba(255,255,255,0.03); }

#sidebar a[data-toggle="collapse"] { position: relative; }

.navbar { box-shadow: none; background-color: #35363a; min-height: 40px; padding: 0; }
.navbar .nav-link { padding:0 8px; }
.navbar .dropdown-menu { left: inherit; right: 0; background-color: #1e1e20; border-radius: 0.15rem; transition:0.3s; }
.navbar .nav-link, .navbar .nav-link:visited { color: var(--mdb-nav-link-color); }
.navbar .dropdown-menu a, .navbar .dropdown-menu a:visited { color:#f0f0f0; }
.dropdown-item { border-bottom:1px solid rgba(255,255,255,0.1); font-size: 0.95em; }
.dropdown-item:hover, .dropdown-item:focus { background-color:#35363a; }

/* +++++++++++++++++++++++++++++++++++++++++++++++ BREADCRUMB +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.breadcrumb-item+.breadcrumb-item::before { content:""; padding-right: 0; }
.breadcrumb-item+.breadcrumb-item { padding-left:0; }

/* ++++++++++++++++++++++++++++++++++++++++++++++++ MAIN ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
main { width:100%; max-width: 100%; overflow: hidden; padding:0.4rem 0.6rem; margin-top:42px; }
.card-body { padding: 0.5rem;}
.fmCardNumber { font-size:2.4em; font-weight: 600; }

/*  +++++++++++++++++++++++++++++++++++++++++++++ DATATABLES  +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#tDatos { width:100%; margin: 0 auto !important; clear: both; border-collapse: collapse;  word-wrap:break-word; color:#212529;}

#tDatos th { font-size:0.85em; padding-top:0.4rem; padding-bottom:0.3rem; padding-left:0.4rem; background-color: #35363a ; color:#f2f2f2; font-weight: 500; }
#tDatos td { font-size:0.8em; vertical-align: middle; padding:0.15rem 0.3rem; font-weight: 500; font-family: 'IBM Plex Sans', Tahoma, 'Arial', sans-serif; }

#tDatos .sorting_1 { background-color: rgba(var(--mdb-info-rgb), 0.05); }
#tDatos tbody tr:hover { background-color: rgba(var(--mdb-primary-rgb),0.20); }

.dataTables_info { font-size:0.9em; }
.dataTables_filter label { margin-bottom:0; padding-bottom:2px !important; padding-top:6px; font-size:0.9em; }

.pagination .page-link { color: #4A4A4F; padding: 3px 12px; margin-left: 0.2rem !important; background-color: transparent; font-weight: 500; font-size:0.8em; box-shadow: none; -moz-box-shadow: none; border:1px solid #e3e3e3; }
.pagination .page-link:hover, .pagination .page-link:focus {
    background-color: rgba(0,0,0,0.06);
}
div.dataTables_wrapper div.dataTables_info { font-size:0.8em; }
div.dataTables_wrapper div.dataTables_paginate { padding-top: 0.5rem !important; padding-bottom: 0 !important; }
div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin-bottom:0; }
.dataTables_length { padding-top:0.3rem; font-size:0.8em; }
#tDatos .dataTables_empty { padding: 0.75rem 0; font-size:0.9em; color: #4A4A4F;}

#fm-table-preview td { font-size:0.9em; vertical-align: middle; padding:0.1rem 0.3rem; font-weight: 500; }
#fm-table-preview th { font-size:0.9em; vertical-align: middle; padding:0.1rem 0.3rem; font-weight: 600; }


/* -------- hover botones ----- */
.btns-export { padding:6px 12px !important;  margin:4px 3px 0 0; }
.btn-table, .btn-table2 { margin:0; padding:3px 8px !important; border-radius: 0; }
.btn-table:hover, .btns-export:hover, .btn-table:focus, .btns-export:focus { background-color: rgba(0,0,0,0.06); }
.fm-btn-del:hover, .fm-btn-yt:hover, .fm-btn-rechazar:hover { color: var(--mdb-danger); }
.fm-btn-edit:hover { color: var(--mdb-warning); }
.fm-btn-st:hover, .fm-btn-link:hover { color: var(--mdb-info); }
.fm-btn-img:hover { color: var(--mdb-indigo); }
.fm-btn-email:hover { color: var(--mdb-green); }
.fm-btn-tk:hover { color: #000000; }
#fm-btn-pdf:hover { color: var(--mdb-danger); }
#fm-btn-xlsx:hover, .fm-btn-autorizar:hover, .fm-btn-qr:hover { color: var(--mdb-success); }
#fm-btn-print:hover, .fm-btn-evto:hover, .fm-btn-info:hover { color: var(--mdb-info); }
.fm-btn-evto { font-weight: 600; }

/* --------- Colores de celdas ------------ */
.cell-red { background-color: rgba(255,0,0,0.12) !important; color: var(--mdb-danger) !important; font-weight: 600 !important; }
.cell-green { background-color: rgba(4,101,70,0.12) !important; color: var(--mdb-success) !important; font-weight: 600 !important; }
.cell-yellow { background-color: rgba(228,161,27,0.12) !important; color: var(--mdb-warning) !important; font-weight: 600 !important; }

/* --------- Imagenes ---------------- */
.fm-img-modal { animation: FmfadeIn 1.2s; animation-delay: 0.25s; opacity: 0; animation-fill-mode: forwards; }
@keyframes FmfadeIn {
    0% { opacity: 0; }
    100% { opacity: 100; }
}
/* +++++++++++++++++++++++++++++++++++++++++++++ TOOLTIP ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tooltip-inner { max-width: 330px; width: 330px; background-color: var(--mdb-info); font-size: 0.85em;}

/* +++++++++++++++++++++++++++++++++++++++++++++ FORM CONTAINER +++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.form-outline .trailing { opacity: 75%; }

#form-container { background-color: #f2f2f4; padding:0 0.5rem; margin-bottom: 1rem; }

#form-container .form-label { margin-bottom: 0; font-size: 0.9em; }
#form-container .form-group label, .form-group small{ color: #909092; }

#form-container .input-group-text { min-width: 41px; }
#form-container h4, #form-container h5 { background: #e3e3e6; padding: 0.3em; }

#form-container .col-md-2, #form-container .col-lg-2, #form-container .col-md-1 { padding-left: 6px; padding-right: 6px; }
#form-container .col-12, #form-container .col-md-6, #form-container .col-lg-4 { margin-top:1.2rem; }

.form-buttons-bar { border-top:1px solid #e3e3e6; }
#btn-save-top { font-family: 'Open Sans', Tahoma; color:#f2f2f2; float: right !important; margin:0; padding:3px 8px; border-radius: 0; background-color: var(--mdb-success); }
#btn-save-top:hover { background-color: rgba(var(--mdb-success-rgb),0.85); }

.fm-btn-select { padding: 5px 12px 5px 12px; font-size:1rem; font-weight: 400; }
.fm-btn-select, .fm-btn-select:hover { box-shadow: none; border:1px solid #bdbdbd; background-color: #ffffff; }
.fm-btn-select:focus, .fm-btn-select:active { transition:all .1s linear; border:1px solid #5f4b8b; box-shadow: inset 0 0 0 1px #5f4b8b; }
.fm-btn-select-group, .fm-btn-select-group:hover { box-shadow: none; border:none}
.fm-btn-select-group .btn.show { background-color: #ffffff; border:1px solid #5f4b8b; box-shadow: inset 0 0 0 1px #5f4b8b;}

.fm-select { padding: 4.5px 12px 3.68px 12px; }

input[type=number] { text-align: right; }

/* +++++++++++++++++++++++++++++++++++++++++++++ NAV PILLS AND NAV TABS +++++++++++++++++++++++++++++++++++++++++++++ */
.nav-tabs .nav-link { margin-bottom: 0; }
.tab-content .tab-pane { padding:0 1em 1em 1em; border:1px solid #e3e3e6; border-radius: 0.2em; }

section:not(#fm-search-single) { border: 1px solid #e3e3e6; background-color: #fbfbfc; margin-top:1.5em; padding-bottom: 0.5rem; }
section:not(#fm-search-single) .row { padding:0 0.5rem; }
section .col-lg-2 { padding-right: 12px !important; }
#form-container h6 { margin: 0 0 0.5rem 0; background-color: #e6e6e9; padding: 0.3em 0.5em; border-radius: 0.1em;}

.evt-label { font-weight: 600; margin-right: 0.7rem; }
.evt-icon { margin-right: 0.7rem; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ BREAKPOINTS +++++++++++++++++++++++++++++++++++++++++++++++++++++ */

@media all and (max-width: 767px) {
    .navbar .container-fluid { padding-left:0; padding-right: 0; }
    .navbar-collapse { background-color:  #1e1e20; padding-top: 8px; }
    .navbar .navbar-brand { padding-left: 8px; }
    .navbar-collapse li { padding:0.5em 0; border-bottom:1px solid rgba(255,255,255,0.1); }

    .form-buttons-bar .btn { width:100%; }

}