/* here you can put your own css to customize and override the theme */

#tblTableAlerts {
    border: none;
}

#tblTableAlerts thead {
    border: none;
}

#tblTableAlerts tbody:before {
    content: "-";
    display: block;
    line-height: 1em;
    color: transparent;
}

#tblTableAlerts tbody tr {
    border-bottom: 7px solid #FFF;
}

#tblTableAlerts td {
    border: none;
    padding: 0px 5px 0px 5px;
    vertical-align: middle;
    background-color: #FAFAFA;
}

#tblTableAlerts td:first-child {
    padding: 0px 0px 0px 0px;
}


#tblTableAlerts_wrapper .table-scrollable {
    border: none;
}

.tblTableAlertIcon {
    width: 50px;
    height: 27px;
    display: block;
    padding-top: 7px;
}

.table tfoot th {
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom: 0px !important;
}

.printLinesDataCommentsCalculator,
.printLinesDataProductCalculator {
    width: 617px;
    overflow: hidden;
    font-size: 8.5px;
    font-family: 'Roboto', sans-serif;
}

.printLinesDataCommentsCalculator {
    color: #777;
    font-style: italic;
}

.printLinesDataCommentsCalculator div,
.printLinesDataProductCalculator div {
    padding-left: 0px;
    padding-right: 0px;
}

.printLinesDataCommentsCalculator blockquote,
.printLinesDataProductCalculator blockquote {
    padding-top: 6px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    border-left: 0px solid;
    font-size: 9px;
    margin: 0px;
}

.printLinesDataCommentsCalculator ul,
.printLinesDataProductCalculator ul {
    margin: 6px 0px;
    padding: 0px 9px;
}

.printLinesDataCommentsCalculator ol,
.printLinesDataProductCalculator ol {
    margin: 6px 0px;
    padding: 0px 10px;
}

.printLinesDataCalculator {
    font-size: 7.8pt;
    line-height: 10px;
    visibility: hidden;
    position: fixed;
    bottom: -10000px;
    max-width: 100%;
}

.printLinesDataCalculator>div {
    padding-top: 3px;
    padding-bottom: 3px;
}

/*Modals*/
.modal-xlg {
    width: 60%;
    margin: 2rem auto;
}

.modal-xxlg {
    width: 80%;
    margin: 2rem auto;
}

.custom-modal-title {
    margin: 0;
    line-height: 1.42857143;
    font-weight: 600;
    font-size: 20px
}

.custom-modal-subtitle {
    margin: 0;
    line-height: 1.42857143;
    font-weight: 300;
    font-size: 18px
}

.form-description {
    color: #666;
    font-size: 10px;
    font-style: italic;
    margin-left: 10px;
    width: fit-content;
}

.form-description p {
    margin: 0;
}

.required:after {
    content: " *";
    color: red;
}

/* Hide date title only inside .time-picker */
/*.time-picker .datetimepicker .switch {
    display: none !important;
    background-color: red !important;
}*/

/* Hide navigation arrows only for time pickers */
/*.time-picker .datetimepicker .prev,
.time-picker .datetimepicker .next {
    display: none !important;
}*/

.color-table-preview {
    height: 20px;
    border: 1px solid #dddddd;
}

/* Submenu headers */
.page-sidebar .page-sidebar-menu .sub-menu li.nav-item-header {
    background: none;
    margin-top: 5px !important;
    padding: 0 !important;
    border: none;
}

.page-sidebar .page-sidebar-menu .sub-menu li.nav-item-header>span.nav-item-header-title {
    padding: 10px 15px;
    /* Match parent li > a padding */
    font-size: 14px;
    /* Match parent font size */
    font-weight: 300;
    /* Match parent font weight */
    text-transform: none;
    /* Remove uppercase */
    color: #b4bcc8;
    /* Match parent text color */
    display: block;
}

.page-sidebar .page-sidebar-menu .sub-menu li.nav-item-header>span.nav-item-header-title>i {
    font-size: 16px;
    /* Match parent icon size */
    margin-right: 5px;
    color: #606C7D;
    /* Match parent icon color */
    text-shadow: none;
}

/* Dashboard Summary */
.dashboard-summary-row {
    margin-bottom: 18px;
}

.dashboard-summary-panel {
    min-height: 205px;
    margin-bottom: 20px;
    padding: 22px 24px;
    background: #fff;
    /*    border-left: 4px solid #578ebe;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);*/
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e1e1e1 !important;
}

/*.dashboard-summary-documents {
    border-left-color: #26a69a;
}*/

.dashboard-entries-row .dashboard-summary-panel {
    min-height: 145px;
}

.dashboard-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.dashboard-summary-header h4 {
    margin: 4px 0 0 0;
    color: #34495e;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-summary-eyebrow {
    color: #8a9aa8;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
}

.dashboard-summary-eyebrow:hover,
.dashboard-summary-eyebrow:focus {
    color: #337ab7;
    text-decoration: none;
}

.dashboard-summary-icon {
    width: 44px;
    height: 44px;
    color: #578ebe;
    /*background: #eef5ff;*/
    text-align: center;
}

/*.dashboard-summary-documents .dashboard-summary-icon {
    color: #26a69a;
    background: #eaf8f6;
}*/

.dashboard-summary-icon i {
    line-height: 44px;
    font-size: 20px;
}

.dashboard-summary-total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}

.dashboard-summary-number {
    color: #2f353b;
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
}

.dashboard-summary-label {
    color: #6b7785;
    font-size: 13px;
}

.dashboard-summary-stats {
    display: flex;
    gap: 12px;
}

.dashboard-summary-stat {
    flex: 1;
    min-width: 0;
    padding: 12px 10px;
    /*    background: #f8fafc;*/
    background: #fafafa;
    border: 1px solid #edf1f5;
    text-align: center;
}

.dashboard-summary-total-link {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid transparent;
}

.dashboard-summary-entry-count {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.dashboard-summary-entry-separator {
    color: #a8b3bf;
    font-size: 24px;
    line-height: 1;
}

.dashboard-summary-date {
    color: #8a96a3;
    font-size: 13px;
    font-weight: 400;
}

.dashboard-summary-link {
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-summary-link:hover {
    background-color: #f3f7fb;
    border-color: #dbe5ef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.dashboard-summary-stat-number {
    display: block;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
}

.dashboard-summary-stat-label {
    display: block;
    margin-top: 5px;
    color: #6b7785;
    font-size: 12px;
    line-height: 1.25;
}

@media (max-width: 767px) {
    .dashboard-summary-panel {
        padding: 18px;
    }

    .dashboard-summary-stats {
        display: block;
    }

    .dashboard-summary-stat {
        margin-top: 10px;
    }
}
/* Punch Portlet Dashboard */
.punch-portlet {
    margin-bottom: 30px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    background-color: #eef5ff !important;
    /* Blue light background */
    border-radius: 0px !important;
    padding: 10px !important;
}

.punch-portlet .portlet-title {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 15px 20px 10px 20px !important;
}

.punch-portlet .portlet-body {
    background: transparent !important;
    padding: 25px 20px !important;
    /* No left padding to align with title */
}

.punch-portlet .btn-punch {
    width: 280px;
    height: 70px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.punch-lopd-notice {
    margin-top: 25px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 15px;
}

.punch-lopd-text {
    font-size: 11px;
    line-height: 1.5;
    text-align: justify;
    margin-bottom: 0;
    color: #666;
}

/* Dashboard daterangepicker dropdown */
.daterangepicker.dropdown-menu.opensleft,
.daterangepicker.dropdown-menu.opensright {
    border: 1px solid #efefef;
    border-radius: 0;
    box-shadow: 5px 5px rgba(102, 102, 102, 0.1);
    color: #333;
    font-family: 'Open Sans', sans-serif !important;
    min-height: 355px;
    padding: 5px;
}

.daterangepicker.dropdown-menu.opensleft .calendar-table,
.daterangepicker.dropdown-menu.opensright .calendar-table {
    border: 0;
    padding: 0;
}

.daterangepicker.dropdown-menu.opensleft .calendar-table table,
.daterangepicker.dropdown-menu.opensright .calendar-table table {
    margin: 0;
}

.daterangepicker.dropdown-menu.opensleft table th,
.daterangepicker.dropdown-menu.opensleft table td,
.daterangepicker.dropdown-menu.opensright table th,
.daterangepicker.dropdown-menu.opensright table td {
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif !important;
    text-shadow: none;
}

.daterangepicker.dropdown-menu.opensleft table th,
.daterangepicker.dropdown-menu.opensright table th {
    color: #333;
    font-size: 14px;
    font-weight: 400 !important;
}

.daterangepicker.dropdown-menu.opensleft table td,
.daterangepicker.dropdown-menu.opensright table td {
    color: #000;
    font-weight: 300 !important;
}

.daterangepicker.dropdown-menu.opensleft thead tr:first-child th,
.daterangepicker.dropdown-menu.opensleft .calendar th.prev,
.daterangepicker.dropdown-menu.opensleft .calendar th.next,
.daterangepicker.dropdown-menu.opensright thead tr:first-child th,
.daterangepicker.dropdown-menu.opensright .calendar th.prev,
.daterangepicker.dropdown-menu.opensright .calendar th.next {
    cursor: pointer;
}

.daterangepicker.dropdown-menu.opensleft thead tr:first-child th:hover,
.daterangepicker.dropdown-menu.opensleft .calendar th.prev:hover,
.daterangepicker.dropdown-menu.opensleft .calendar th.next:hover,
.daterangepicker.dropdown-menu.opensleft td.available:hover,
.daterangepicker.dropdown-menu.opensleft th.available:hover,
.daterangepicker.dropdown-menu.opensright thead tr:first-child th:hover,
.daterangepicker.dropdown-menu.opensright .calendar th.prev:hover,
.daterangepicker.dropdown-menu.opensright .calendar th.next:hover,
.daterangepicker.dropdown-menu.opensright td.available:hover,
.daterangepicker.dropdown-menu.opensright th.available:hover {
    background: #eee;
}

.daterangepicker.dropdown-menu.opensleft th.month,
.daterangepicker.dropdown-menu.opensright th.month {
    min-width: 145px;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.daterangepicker.dropdown-menu.opensleft select.monthselect,
.daterangepicker.dropdown-menu.opensleft select.yearselect,
.daterangepicker.dropdown-menu.opensright select.monthselect,
.daterangepicker.dropdown-menu.opensright select.yearselect {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    height: 22px;
    line-height: 22px;
    margin: 0 1px;
    outline: 0;
    padding: 0 4px;
    text-align: center;
    vertical-align: middle;
    width: auto;
}

.daterangepicker.dropdown-menu.opensleft select.monthselect:hover,
.daterangepicker.dropdown-menu.opensleft select.yearselect:hover,
.daterangepicker.dropdown-menu.opensleft select.monthselect:focus,
.daterangepicker.dropdown-menu.opensleft select.yearselect:focus,
.daterangepicker.dropdown-menu.opensright select.monthselect:hover,
.daterangepicker.dropdown-menu.opensright select.yearselect:hover,
.daterangepicker.dropdown-menu.opensright select.monthselect:focus,
.daterangepicker.dropdown-menu.opensright select.yearselect:focus {
    background: #eee !important;
}

.daterangepicker.dropdown-menu.opensleft td.in-range,
.daterangepicker.dropdown-menu.opensright td.in-range {
    background-color: #eef5ff;
}

.daterangepicker.dropdown-menu.opensleft td.active,
.daterangepicker.dropdown-menu.opensleft td.active:hover,
.daterangepicker.dropdown-menu.opensright td.active,
.daterangepicker.dropdown-menu.opensright td.active:hover {
    background-color: #428bca !important;
    background-image: none !important;
    border-color: #357ebd !important;
    color: #fff !important;
    filter: none !important;
}

.daterangepicker.dropdown-menu.opensleft .ranges,
.daterangepicker.dropdown-menu.opensright .ranges {
    box-sizing: border-box;
    min-height: 330px;
    padding: 5px 0 0 0;
    width: 180px;
}

.daterangepicker.dropdown-menu.opensleft .ranges ul,
.daterangepicker.dropdown-menu.opensright .ranges ul {
    display: block;
    margin: 0 0 10px 0;
    padding: 0;
    width: 100%;
}

.daterangepicker.dropdown-menu.opensleft .ranges li,
.daterangepicker.dropdown-menu.opensright .ranges li {
    background-color: #e5e5e5 !important;
    background-image: none !important;
/*    border: 1px solid #ccc !important;*/
/*    border-left: 4px solid #ccc !important;*/
    border-radius: 0 !important;
    box-sizing: border-box;
    color: #333 !important;
    cursor: pointer;
    display: block;
    float: none !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.42857143;
    margin: 0 0 8px 0;
    padding: 6px 12px;
    text-align: left;
    text-shadow: none;
    width: 100% !important;
}

.daterangepicker.dropdown-menu.opensleft .ranges li:hover,
.daterangepicker.dropdown-menu.opensleft .ranges li:focus,
.daterangepicker.dropdown-menu.opensright .ranges li:hover,
.daterangepicker.dropdown-menu.opensright .ranges li:focus {
    background-color: #d8d8d8 !important;
    border-color: white !important;
    color: #333 !important;
}

.daterangepicker.dropdown-menu.opensleft .ranges li.active,
.daterangepicker.dropdown-menu.opensright .ranges li.active {
    background-color: #5e7edb !important;
/*        border-color: #357ebd !important;*/
    /*    border-left-color: #1f4f99 !important;*/
    color: #fff !important;
/*    font-weight: 600;*/
}

.daterangepicker.dropdown-menu.opensleft .range_inputs,
.daterangepicker.dropdown-menu.opensright .range_inputs {
    clear: both;
    display: block;
    float: none !important;
    margin: 0;
    padding-top: 2px;
    white-space: normal;
    width: 100%;
}

.daterangepicker.dropdown-menu.opensleft .range_inputs:before,
.daterangepicker.dropdown-menu.opensleft .range_inputs:after,
.daterangepicker.dropdown-menu.opensright .range_inputs:before,
.daterangepicker.dropdown-menu.opensright .range_inputs:after {
    content: " ";
    display: table;
}

.daterangepicker.dropdown-menu.opensleft .range_inputs:after,
.daterangepicker.dropdown-menu.opensright .range_inputs:after {
    clear: both;
}

.daterangepicker.dropdown-menu.opensleft .ranges .range_inputs > div,
.daterangepicker.dropdown-menu.opensright .ranges .range_inputs > div {
/*    float: none !important;
    padding-left: 0 !important;*/
}

.daterangepicker.dropdown-menu.opensleft .range_inputs .btn,
.daterangepicker.dropdown-menu.opensright .range_inputs .btn {
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block;
    float: none !important;
    font-size: 13px;
    height: auto !important;
    line-height: 1.42857143;
    margin: 0 0 8px 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    width: 100% !important;
}

.daterangepicker.dropdown-menu.opensleft .range_inputs .applyBtn,
.daterangepicker.dropdown-menu.opensleft .range_inputs .btn.green,
.daterangepicker.dropdown-menu.opensright .range_inputs .applyBtn,
.daterangepicker.dropdown-menu.opensright .range_inputs .btn.green {
    background-color: #50CD89 !important;
    background-image: none !important;
/*    border-color: #26a69a !important;*/
    color: #fff !important;
}

    .daterangepicker.dropdown-menu.opensleft .range_inputs .applyBtn:hover,
    .daterangepicker.dropdown-menu.opensleft .range_inputs .btn.green:hover,
    .daterangepicker.dropdown-menu.opensleft .range_inputs .applyBtn:focus,
    .daterangepicker.dropdown-menu.opensleft .range_inputs .btn.green:focus,
    .daterangepicker.dropdown-menu.opensright .range_inputs .applyBtn:hover,
    .daterangepicker.dropdown-menu.opensright .range_inputs .btn.green:hover,
    .daterangepicker.dropdown-menu.opensright .range_inputs .applyBtn:focus,
    .daterangepicker.dropdown-menu.opensright .range_inputs .btn.green:focus {
        background-color: #8ddeb1 !important;
/*        border-color: #1f897f !important;*/
        color: #fff !important;
    }

.daterangepicker.dropdown-menu.opensleft .range_inputs .cancelBtn,
.daterangepicker.dropdown-menu.opensleft .range_inputs .btn.default,
.daterangepicker.dropdown-menu.opensright .range_inputs .cancelBtn,
.daterangepicker.dropdown-menu.opensright .range_inputs .btn.default {
    background-color: #e5e5e5 !important;
    background-image: none !important;
/*    border-color: #ccc !important;*/
    color: #333 !important;
    margin-top: -18px;
}

.daterangepicker.dropdown-menu.opensleft .range_inputs .cancelBtn:hover,
.daterangepicker.dropdown-menu.opensleft .range_inputs .btn.default:hover,
.daterangepicker.dropdown-menu.opensleft .range_inputs .cancelBtn:focus,
.daterangepicker.dropdown-menu.opensleft .range_inputs .btn.default:focus,
.daterangepicker.dropdown-menu.opensright .range_inputs .cancelBtn:hover,
.daterangepicker.dropdown-menu.opensright .range_inputs .btn.default:hover,
.daterangepicker.dropdown-menu.opensright .range_inputs .cancelBtn:focus,
.daterangepicker.dropdown-menu.opensright .range_inputs .btn.default:focus {
    background-color: #d8d8d8 !important;
/*    border-color: #bbb !important;*/
    color: #333 !important;
}

.daterangepicker .ranges input[type="text"],
.daterangepicker.dropdown-menu.opensright .range_inputs .input-mini {
    width: 84px !important;
    margin-bottom: 15px !important;
}
/* Repair order tabs Horas and Reparaciones: white cards like the agenda (agenda.css). The template squares every element
   (components.css, border-radius 0 !important): the radii need !important. Section colors = agenda section colors */
.ro-card { min-width: 0; background-color: #FFFFFF; border: 1px solid #E3E6EB; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -14px rgba(16, 24, 40, .14); }
.ro-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px; border-bottom: 1px solid #EEF0F3; }
.ro-card-title { font-size: 14px; font-weight: 600; color: #1F2430; }
.ro-card-sub { font-size: 12px; color: #8A90A0; }
.ro-card-foot { padding: 12px 16px; border-top: 1px solid #EEF0F3; }
.ro-card-empty { padding: 28px 16px; color: #8A90A0; text-align: center; }
.ro-empty { max-width: 460px; margin: 30px auto; padding: 28px; color: #6B7280; text-align: center; background-color: #F8F9FB; border: 1px dashed #D5DAE1; border-radius: 12px !important; }
.ro-empty > i { font-size: 30px; color: #B6BDC8; }
.ro-empty-title { margin: 8px 0 4px 0; font-size: 16px; font-weight: 600; color: #1F2430; }
.ro-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; background-color: var(--ro-color); border-radius: 50% !important; }
.ro-text-danger { color: #D92D20; }
.ro-strong { font-weight: 600; color: #1F2430; }

.ro-hours-steel, .ro-pill-steel { --ro-color: #FF6A59; --ro-cell: #FF9D90; }
.ro-hours-paint, .ro-pill-paint { --ro-color: #00D99A; --ro-cell: #5FE8BF; }
.ro-hours-mechanic, .ro-pill-mechanic { --ro-color: #B48AB4; --ro-cell: #CFAEDB; }
.ro-hours-assembly, .ro-pill-assembly { --ro-color: #FF9615; --ro-cell: #FFB55C; }
.ro-hours-total { --ro-color: #FFFFFF; }

/* Bars: rounded track, fill in the section color (red when over the estimate) */
.ro-bar { height: 8px; overflow: hidden; background-color: #EEF0F3; border-radius: 99px !important; }
.ro-bar > span { display: block; height: 100%; background-color: var(--ro-color, #4E79F6); border-radius: 99px !important; transition: width .4s; }
.ro-bar-thin { height: 5px; }
.ro-over-budget .ro-bar > span { background-color: #F04438; }

/* Pills, chips, live status, avatars */
.ro-pill { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 600; line-height: 18px; color: #1F2430; background-color: var(--ro-cell, #E4E7EC); border-radius: 4px !important; white-space: nowrap; }
.ro-chip { padding: 1px 8px; font-size: 11.5px; font-weight: 600; color: #475467; background-color: #F2F4F7; border-radius: 99px !important; white-space: nowrap; }
.ro-chip-danger { color: #B42318; background-color: #FEE4E2; }
.ro-live { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; font-size: 12px; font-weight: 600; color: #067647; background-color: #DCFAE6; border-radius: 99px !important; white-space: nowrap; }
.ro-live:before { content: ""; width: 7px; height: 7px; background-color: #17B26A; border-radius: 50% !important; animation: ro-pulse 1.6s infinite; }
@keyframes ro-pulse { 0% { box-shadow: 0 0 0 0 rgba(23, 178, 106, .55); } 70% { box-shadow: 0 0 0 7px rgba(23, 178, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(23, 178, 106, 0); } }
.ro-avatar { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 13px; font-weight: 700; color: #FFFFFF; border-radius: 50% !important; }
.ro-avatar-sm { width: 26px; height: 26px; margin-right: 8px; font-size: 10.5px; vertical-align: middle; }
.ro-avatar-0 { background-color: #4E79F6; }
.ro-avatar-1 { background-color: #7A5AF8; }
.ro-avatar-2 { background-color: #0BA5EC; }
.ro-avatar-3 { background-color: #E04F8B; }
.ro-avatar-4 { background-color: #15B79E; }
.ro-avatar-5 { background-color: #6172F3; }

/* Hours tab: summary cards */
.ro-hours { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 18px 0; }
.ro-hours-card { position: relative; flex: 1 1 150px; min-width: 0; padding: 14px 16px 12px 16px; overflow: hidden; background-color: #FFFFFF; border: 1px solid #E3E6EB; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.ro-hours-card:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background-color: var(--ro-color); }
.ro-hours-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.ro-hours-title { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #667085; text-transform: uppercase; }
.ro-hours-value { margin: 6px 0 10px 0; font-size: 28px; font-weight: 600; line-height: 34px; color: #1F2430; letter-spacing: -.02em; }
.ro-hours-value small { font-size: 15px; font-weight: 500; color: #667085; }
.ro-hours-of { display: block; font-size: 12.5px; font-weight: 400; line-height: 16px; color: #8A90A0; letter-spacing: 0; }
.ro-hours-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 8px; font-size: 12px; color: #667085; }
.ro-hours-manual { color: #8A90A0; }
.ro-over-budget .ro-hours-value { color: #D92D20; }
.ro-hours-total { color: #FFFFFF; background: linear-gradient(135deg, #2B3445 0%, #1F2430 100%); border-color: #1F2430; }
.ro-hours-total:before { display: none; }
.ro-hours-total .ro-hours-title, .ro-hours-total .ro-hours-of, .ro-hours-total .ro-hours-foot, .ro-hours-total .ro-hours-value small { color: rgba(255, 255, 255, .65); }
.ro-hours-total .ro-hours-value { color: #FFFFFF; }
.ro-hours-total .ro-dot { display: none; }
.ro-hours-total .ro-chip { color: #FFFFFF; background-color: rgba(255, 255, 255, .14); }
.ro-hours-total .ro-bar { background-color: rgba(255, 255, 255, .16); }
.ro-hours-total.ro-over-budget .ro-hours-value { color: #FDA29B; }
.ro-hours-total .ro-text-danger { color: #FDA29B; }

/* Hours tab: workers + work intervals */
.ro-hours-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
.ro-workers { flex: 1 1 300px; max-width: 100%; }
.ro-intervals { flex: 999 1 640px; max-width: 100%; }
.ro-worker-list { margin: 0; padding: 6px 0; list-style: none; }
.ro-worker-list li { display: flex; gap: 12px; padding: 10px 16px; }
.ro-worker-list li + li { border-top: 1px solid #F2F4F7; }
.ro-worker-body { flex: 1 1 auto; min-width: 0; }
.ro-worker-line { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ro-worker-name { overflow: hidden; font-weight: 600; color: #1F2430; text-overflow: ellipsis; white-space: nowrap; }
.ro-worker-hours { margin-left: auto; font-weight: 600; color: #1F2430; white-space: nowrap; }
.ro-worker-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin-top: 7px; font-size: 12px; color: #8A90A0; }
.ro-worker-meta .ro-pill { padding: 0 7px; font-size: 11px; }
.ro-intervals .dataTables_wrapper { padding: 12px 16px 6px 16px; }
.ro-intervals .dataTables_wrapper .row { margin-left: 0; margin-right: 0; }
.ro-intervals .dataTables_wrapper .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
.ro-intervals .dataTables_filter input, .ro-intervals .dataTables_length select { border-radius: 8px !important; }
table.ro-table { margin: 6px 0 !important; border: 0; }
table.ro-table > thead > tr > th { padding: 9px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: #667085; text-transform: uppercase; background-color: #F8F9FB; border: 0; border-bottom: 1px solid #EAECF0; }
table.ro-table > thead > tr > th:first-child { border-radius: 8px 0 0 8px !important; }
table.ro-table > thead > tr > th:last-child { border-radius: 0 8px 8px 0 !important; }
table.ro-table > tbody > tr > td { padding: 10px; vertical-align: middle; color: #344054; border: 0; border-top: 1px solid #F2F4F7; }
table.ro-table > tbody > tr:first-child > td { border-top: 0; }
table.ro-table > tbody > tr:hover > td { background-color: #F8FAFF; }

/* Reparaciones tab: car drawing (pieces positioned over a square, repairOrderGenericInit.js) + marked pieces + materials */
.ro-drawing-tab { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin-top: 8px; }
.ro-drawing-main { flex: 1 1 400px; max-width: 580px; }
.ro-drawing-side { display: flex; flex: 999 1 420px; flex-direction: column; gap: 18px; min-width: 0; }
.ro-drawing-legend { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: #8A90A0; }
.ro-key { display: inline-block; width: 12px; height: 12px; background-color: #EAF0F8; border: 2px solid #64748B; border-radius: 3px !important; }
.ro-key-marked { margin-left: 8px; background-color: #FFD6D3; border-color: #E5484D; }
.ro-drawing-car { position: relative; width: calc(100% - 32px); aspect-ratio: 1; margin: 16px; background-color: #FBFCFE; background-image: radial-gradient(#E3E8F0 1px, transparent 1px); background-size: 16px 16px; border-radius: 10px !important; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.ro-drawing-car.ro-over { cursor: pointer; }
.ro-drawing-car img { position: absolute; display: block; height: auto; pointer-events: none; }
.ro-drawing-car img { transition: filter .12s; }
.ro-drawing-car img.ro-hover { filter: brightness(.93) drop-shadow(0 0 1.5px #4E79F6) drop-shadow(0 3px 6px rgba(16, 24, 40, .22)); }
.ro-drawing-hover { margin: 0 16px 16px 16px; padding: 7px 12px; font-size: 13px; color: #475467; text-align: center; background-color: #F2F4F7; border-radius: 99px !important; }
.ro-drawing-car.ro-over + .ro-drawing-hover { font-weight: 600; color: #1F2430; background-color: #E8EEFF; }
.ro-count { display: inline-block; min-width: 22px; margin-left: 4px; padding: 0 7px; font-size: 12px; font-weight: 700; line-height: 20px; color: #FFFFFF; text-align: center; background-color: #E5484D; border-radius: 99px !important; }
.ro-drawing-status { font-size: 12px; color: #8A90A0; }
.ro-drawing-status.ro-unsaved { padding: 1px 8px; font-weight: 600; color: #B54708; background-color: #FEF0C7; border-radius: 99px !important; }
.ro-drawing-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin: 0; padding: 12px 16px 16px 16px; list-style: none; }
.ro-drawing-list li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; color: #1F2430; background-color: #FFF5F5; border: 1px solid #FFD9D9; border-radius: 8px !important; cursor: pointer; transition: background-color .12s, border-color .12s; }
.ro-drawing-list li:hover { background-color: #FFE8E8; border-color: #FDA4A4; }
.ro-piece-number { flex: 0 0 auto; width: 20px; height: 20px; font-size: 11px; font-weight: 700; line-height: 20px; color: #FFFFFF; text-align: center; background-color: #E5484D; border-radius: 50% !important; }
.ro-piece-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-drawing-list li > i { font-size: 12px; color: #D0A0A0; }
.ro-drawing-list li:hover > i { color: #D92D20; }
.ro-drawing-list li.ro-drawing-empty { grid-column: 1 / -1; display: block; padding: 18px 10px; color: #8A90A0; text-align: center; background: none; border: 1px dashed #D5DAE1; cursor: default; }
.ro-drawing-list li.ro-drawing-empty > i { display: block; margin-bottom: 6px; font-size: 22px; color: #B6BDC8; }
.ro-materials-block .tox-tinymce, .ro-materials-block > textarea { border: 0 !important; border-radius: 0 !important; }

/* Agenda statistics (Views/Agenda/Statistics.cshtml): same cards, bars and pills as the repair order tabs (ro-*) */
.st-search { margin-bottom: 18px; padding: 14px 16px 12px 16px; }
.st-search-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.st-field { flex: 0 1 190px; min-width: 160px; }
.st-field-wide { flex: 1 1 280px; max-width: 420px; }
.st-field .control-label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: #667085; }
.st-actions { display: flex; flex: 0 0 auto; gap: 6px; min-width: 0; }
.st-periods { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; font-size: 12px; color: #8A90A0; border-top: 1px solid #EEF0F3; }
.st-period { padding: 3px 10px; color: #475467; background-color: #F2F4F7; border-radius: 4px !important; }
.st-period:hover, .st-period:focus { color: #1F2430; text-decoration: none; background-color: #E4E7EC; }
.st-period.active { color: #FFFFFF; background-color: #1F2430; }
.st-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px 0; }
.st-heading-title { font-size: 17px; font-weight: 600; color: #1F2430; }
.st-heading-sub { font-size: 13px; color: #8A90A0; }
.st-kpis .ro-hours-card { flex-basis: 180px; }
.st-kpi:before { background-color: #D0D5DD; }
.st-kpi .ro-hours-title i { margin-right: 7px; color: #98A2B3; }
.st-kpis .ro-hours-value { margin-bottom: 4px; }
.st-kpis .ro-hours-total .ro-hours-value { margin-bottom: 10px; }
.st-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.st-sections, .st-estimates { flex: 1 1 420px; max-width: 100%; }
.st-list { margin: 0; padding: 4px 0; list-style: none; }
.st-list > li { padding: 12px 16px; }
.st-list > li + li { border-top: 1px solid #F2F4F7; }
.st-list-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.st-list-value { margin-left: auto; font-size: 15px; font-weight: 600; color: #1F2430; }
.st-list-value small { font-size: 12px; font-weight: 400; color: #8A90A0; }
.st-list-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 12px; color: #8A90A0; }
.st-list-meta b { font-weight: 600; color: #344054; }
.st-list-meta .ro-text-danger b { color: #D92D20; }
.st-note { font-size: 12px; color: #8A90A0; }
.st-chip-good { color: #067647; background-color: #DCFAE6; }
.st-compare { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: #667085; }
.st-compare .ro-bar { flex: 1 1 auto; }
.st-compare-label { flex: 0 0 64px; }
.st-compare-value { flex: 0 0 52px; font-weight: 600; color: #1F2430; text-align: right; }
.st-bar-estimated > span { background-color: #D0D5DD; }
.st-estimate-total { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 12px 16px; font-size: 13px; color: #667085; background-color: #F8F9FB; border-top: 1px solid #EEF0F3; border-radius: 0 0 12px 12px !important; }
.st-estimate-total > span:first-child { font-weight: 600; color: #1F2430; }
.st-estimate-total b { color: #1F2430; }
.st-estimate-total .ro-chip { margin-left: auto; }
.st-workers .table-responsive { margin: 0; padding: 6px 16px 10px 16px; border: 0; }
.st-worker { color: #1F2430; white-space: nowrap; }
a.st-worker:hover, a.st-worker:focus { color: #4E79F6; text-decoration: none; }
.st-col-occupation { width: 30%; min-width: 180px; }
.st-occupation { display: flex; align-items: center; gap: 10px; }
.st-occupation .ro-bar { flex: 1 1 auto; }
.st-occupation > span { flex: 0 0 44px; font-weight: 600; color: #1F2430; text-align: right; }
.st-occupation > span.ro-text-danger { color: #D92D20; }

/* TinyMCE menus and dialogs over the popups */
body .tox.tox-tinymce-aux { z-index: 20000; }