/*
navbar personalizada en:
http://work.smarchal.com/twbscolor/
https://work.smarchal.com/twbscolor/
*/

html {
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
  font-size:30px;
    box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
    margin-top:16px;
}

/* Color de Datable Serverside */
table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_disabled, 
table.dataTable thead .sorting_desc {
    background : black;
    color: white;
}

table.dataTable tbody tr.selected .text-primary {
    color: white !important;
}
/* fin de Color de Datable Serverside */
.dataTables_wrapper .dataTables_filter input {
    margin-left: 0px;
}

.dataTables_wrapper .dataTables_filter label {
    margin-right: 10px;
}

.dataTables_wrapper .dataTables_length label {
    margin-left: 8px;
}

.dataTables_wrapper .dataTables_info {
    margin-left: 8px;
}
/* Posición de los elementos (botones) del Datatable */
.top > .left-col {
    float: left;
    width: 50%;
    margin-left: 10px;  
} 
.top > .center-col {
    float: left;
    width: 30%;}
 
.top > .right-col {
    float: right;
    width: 20%;
    margin-bottom: 10px;
}
.bottom > .left-col {
    float: left;
    width: 35%;  
} 
.bottom > .center-col {
    float: left;
    width: 45%;
    margin-top: 10px;
}
.bottom > .right-col {
    float: right;
    width: 20%;
}
/*--------------- fin posición -----------*/


.navbar {
    background: #4f4f4f;
}
.navbar .navbar-brand {
    color: #ecf0f1;
    padding: 0 15px;
}
.navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
    color: #ffffff;
}
.navbar .navbar-text {
    color: #ecf0f1;
}
.navbar .navbar-nav {
    padding: 0 15px;
    line-height: 30px;
}
.navbar-nav>li {
    padding-left: 5px;
    padding-right: 5px;
}
.navbar .navbar-nav>li>a {
    color: #ecf0f1;
}
.navbar .navbar-nav>li>a:hover, .navbar .navbar-nav>li>a:focus {
    color: #ffffff;
}
.navbar .navbar-nav .dropdown-menu>a {
    background-color: #169db2;
    color: #fff;
}
.navbar .navbar-nav .dropdown-menu>a:hover {
    color: #ffffff;
    background-color: #c32f2f;
}
.navbar .navbar-nav>li>.dropdown-menu {
    background-color: #169db2;
}
.navbar .navbar-nav>li>.dropdown-menu>li>a {
    color: #ecf0f1;
}
.navbar .navbar-nav>li>.dropdown-menu>li>a:hover, .navbar .navbar-nav>li>.dropdown-menu>li>a:focus {
    color: #ffffff;
    background-color: #c32f2f;
}
.navbar .navbar-nav>li>.dropdown-menu>li.divider {
    background-color: #c32f2f;
}
.navbar .navbar-nav>.active>a, .navbar .navbar-nav>.active>a:hover, .navbar .navbar-nav>.active>a:focus {
    color: #ffffff;
    background-color: #c32f2f;
}
.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover, .navbar .navbar-nav>.open>a:focus {
    color: #ffffff;
    background-color: #c32f2f;
}
.navbar .navbar-toggle {
    border-color: #c32f2f;
}
.navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus {
    background-color: #c32f2f;
}
.navbar .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar .navbar-collapse, .navbar .navbar-form {
    border-color: #ecf0f1;
}
.navbar .navbar-link {
    color: #ecf0f1;
}
.navbar .navbar-link:hover {
    color: #ffffff;
}
.navbar .logo-wrapper {
    height: 100%;
    float: left;
    margin-right: 15px;
}
.form-group {
    margin-bottom: 5px
}
.card-info>.panel-heading {
    color: #fff;
    background-color: #498ec1;
    border-color: #dbdad5;
}
.card-body {
    padding: 15px;
    background: #f2f1e9;
}
.table .title {
    color: #fff;
    background: #4881ac;
}
.table .title2 {
    color: #fff;
    background: #98b5cf;
}
.table>tbody>tr.info>td, .table>tbody>tr.info>th, .table>tbody>tr>td.info, .table>tbody>tr>th.info, .table>tfoot>tr.info>td, .table>tfoot>tr.info>th, .table>tfoot>tr>td.info, .table>tfoot>tr>th.info, .table>thead>tr.info>td, .table>thead>tr.info>th, .table>thead>tr>td.info, .table>thead>tr>th.info {
    background-color: #98b5cf;
}
.btn {
    line-height: 14px;
}
.btn-info {
    color: #fff;
    background-color: #ec886c;
    border-color: #fa7854;
    padding-top: 4px;
}
.h4, .h5, .h6, h4, h5, h6 {
    margin-top: 3px;
    margin-bottom: 3px
}
.input-serie {
    height: 32px;
    padding: 5px 5px;
    font-size: 12px;
    line-height: 2;
    border-radius: 3px;
}
.badge-info {
    color: #fff;
    background-color: #61a1d0;
}

/* Estilo unificado para Inputs de texto y Selects */
.form-control {
    border: 1px solid #0d6efd; /* Azul institucional */
    border-radius: 5px;
    padding: 7px 10px;
    transition: all 0.3s ease;
}

/* Estilo para los Checkboxes y Radios */
.form-check-input {
    width: 1.5em;
    height: 1.5em;
    border: 2px solid #0d6efd; /* Mismo grosor y color */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Efecto cuando el usuario hace clic o escribe (Focus) */
.form-control:focus {
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25 margin rgba(13, 110, 253, 0.25);
    background-color: #fff;
}

/* Ajuste para que los labels de los inputs se vean firmes */
.col-form-label {
    font-weight: 600;
    color: #495057;
}

/* Efecto hover general para mejorar la experiencia táctil */
.form-control:hover, .form-check-input:hover {
    border-color: #0a58ca;
    background-color: #f8f9ff;
}

/* Espaciado para que el dedo no tape el texto */
.form-check-label {
    padding-left: 10px;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Efecto al pasar el mouse o tocar */
.form-check-input:hover {
    box-shadow: 0 0 8px rgba(13, 110, 253, 0.5);
}

@media (max-width: 576px) {
    h2 { font-size: 1.4rem; }
            .p-4 { padding: 1rem !important; }
            .form-check-label { font-size: 0.9rem; }
}


@media (max-width: 767px) {
    .navbar .navbar-nav .open .dropdown-menu>li>a {
        color: #ecf0f1;
    }
    .navbar .navbar-nav .open .dropdown-menu>li>a:hover, .navbar .navbar-nav .open .dropdown-menu>li>a:focus {
        color: #ffffff;
    }
    .navbar .navbar-nav .open .dropdown-menu>.active>a, .navbar .navbar-nav .open .dropdown-menu>.active>a:hover, .navbar .navbar-nav .open .dropdown-menu>.active>a:focus {
        color: #ffffff;
        background-color: #c32f2f;
    }
    .navbar-nav>li {
        padding-left: 0px;
        padding-right: 0px;
    }
}
@media (max-width: 768px) {
    .fixed-top-sm {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
    }
    body {
        padding-top: 0px;
    }
}