/* ==========================================================================
   OdontoSystem - Modern & Unified Theme CSS (v2 - Global Overrides)
   Design System, CSS Variables and Legacy CSS Overrides
   ========================================================================== */

:root {
    /* Color Palette */
    --primary-color: #1a3a5a;       /* Dark Blue (USFQ Brand) */
    --primary-hover: #11273f;
    --secondary-color: #00a3e0;     /* Light Blue (USFQ Secondary) */
    --secondary-hover: #0088bc;
    --accent-color: #ea580c;        /* Soft Orange */
    
    /* Semantic Colors */
    --bg-page: #f8fafc;             /* Very Light Slate */
    --bg-card: #ffffff;
    --border-color: #e2e8f0;        /* Fine Gray Border */
    --border-focus: #00a3e0;
    --focus-ring: rgba(0, 163, 224, 0.15);
    
    /* Text Colors */
    --text-primary: #1e293b;        /* Dark Slate */
    --text-secondary: #475569;      /* Medium Slate */
    --text-muted: #64748b;          /* Light Slate */
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
}

/* 1. Global Resets & Typography */
body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
    color: var(--text-primary) !important;
    background-color: var(--bg-page) !important;
    font-size: 13px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Segoe UI', sans-serif !important;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px;
}

/* 2. Global Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 3. Inputs & Forms (Standardizing all text fields, select lists and textareas) */
.form-control,
.controlPersonalizado,
.controlpersonalizado,
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--radius-md) !important;
    padding: 6px 12px !important;
    height: 36px !important;
    box-sizing: border-box !important;
    box-shadow: var(--shadow-sm) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

textarea {
    height: auto !important;
    min-height: 70px !important;
}

/* Focus and hover states */
.form-control:focus,
.controlPersonalizado:focus,
.controlpersonalizado:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
    outline: none !important;
    background-color: #ffffff !important;
}

/* Disabled controls */
.form-control:disabled,
.controlPersonalizado:disabled,
.controlpersonalizado:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    background-color: #f1f5f9 !important;
    color: var(--text-muted) !important;
    border-color: #cbd5e1 !important;
    cursor: not-allowed !important;
}

/* 4. Buttons (Standardizing all command and action buttons) */
.btn {
    font-family: 'Segoe UI', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: var(--radius-md) !important;
    padding: 6px 16px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid transparent !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

/* Button color variations */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-success {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}
.btn-success:hover, .btn-success:focus {
    background-color: #15803d !important;
    border-color: #15803d !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-danger {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-warning {
    background-color: #ea580c !important;
    border-color: #ea580c !important;
    color: #ffffff !important;
}
.btn-warning:hover, .btn-warning:focus {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-info {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}
.btn-info:hover, .btn-info:focus {
    background-color: #0369a1 !important;
    border-color: #0369a1 !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-default {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: var(--text-secondary) !important;
}
.btn-default:hover, .btn-default:focus {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
}

/* 5. Telerik RadGrid Overrides (Bootstrap & Default Skins) */
.RadGrid,
.RadGrid_Bootstrap,
.RadGrid_Default {
    font-family: 'Segoe UI', sans-serif !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
    background-color: #ffffff !important;
}

/* Main Table */
.RadGrid .rgMasterTable,
.RadGrid_Bootstrap .rgMasterTable {
    border-collapse: collapse !important;
    border: none !important;
}

/* Header Cells */
.RadGrid .rgHeader,
.RadGrid_Bootstrap .rgHeader,
.RadGrid_Default .rgHeader {
    background-color: #f1f5f9 !important;
    background-image: none !important;
    color: var(--text-secondary) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 14px !important;
    border-bottom: 2px solid var(--border-color) !important;
    border-left: none !important;
    border-right: none !important;
}

/* Grid Rows */
.RadGrid .rgRow td,
.RadGrid .rgAltRow td,
.RadGrid_Bootstrap .rgRow td,
.RadGrid_Bootstrap .rgAltRow td,
.RadGrid_Default .rgRow td,
.RadGrid_Default .rgAltRow td {
    padding: 11px 14px !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    background-color: #ffffff;
}

/* Alternating Row background */
.RadGrid .rgAltRow td,
.RadGrid_Bootstrap .rgAltRow td,
.RadGrid_Default .rgAltRow td {
    background-color: #f8fafc !important;
}

/* Hover Row State */
.RadGrid .rgHoveredRow td,
.RadGrid_Bootstrap .rgHoveredRow td,
.RadGrid_Default .rgHoveredRow td {
    background-color: #f1f5f9 !important;
    color: var(--text-primary) !important;
    cursor: pointer;
}

/* Selected Row State */
.RadGrid .rgSelectedRow td,
.RadGrid_Bootstrap .rgSelectedRow td,
.RadGrid_Default .rgSelectedRow td {
    background-color: #e2e8f0 !important;
    color: var(--text-primary) !important;
}

/* Pager / Pagination */
.RadGrid .rgPager,
.RadGrid_Bootstrap .rgPager,
.RadGrid_Default .rgPager {
    background-color: #f8fafc !important;
    border-top: 2px solid var(--border-color) !important;
    padding: 10px 14px !important;
    color: var(--text-secondary) !important;
    font-size: 12px !important;
}

.RadGrid .rgPagerCell,
.RadGrid_Bootstrap .rgPagerCell {
    border: none !important;
}

/* Detail Tables (Hierarchy) */
.RadGrid .rgDetailTable,
.RadGrid_Bootstrap .rgDetailTable {
    border: 1px solid var(--border-color) !important;
    background-color: #ffffff !important;
    margin: 8px 0 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.02) !important;
}

/* Filter Row */
.RadGrid .rgFilterRow td,
.RadGrid_Bootstrap .rgFilterRow td {
    background-color: #f8fafc !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Command Cell (Export buttons, etc.) */
.RadGrid .rgCommandCell,
.RadGrid_Bootstrap .rgCommandCell {
    background-color: #f8fafc !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 10px 14px !important;
}

/* 6. Standard GridView Overrides */
.db-table,
.grid-view-standard {
    width: 100%;
    border-collapse: collapse;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.db-table th,
.grid-view-standard th {
    background-color: #f1f5f9;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border-color);
}

.db-table td,
.grid-view-standard td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 13px;
    background-color: #ffffff;
}

.db-table tr:nth-child(even) td,
.grid-view-standard tr:nth-child(even) td {
    background-color: #f8fafc;
}

.db-table tr:hover td,
.grid-view-standard tr:hover td {
    background-color: #f1f5f9;
}

/* 7. Bootstrap Panels Overrides */
.panel,
.x_panel {
    background-color: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
}

.panel-heading,
.x_title {
    background-color: #f8fafc !important;
    background-image: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 14px 20px !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
}

.panel-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.panel-body,
.x_content {
    padding: 20px !important;
    background-color: #ffffff !important;
}

/* 8. Telerik RadTabStrip Overrides */
.RadTabStrip_Bootstrap,
.RadTabStrip {
    border-bottom: 1px solid var(--border-color) !important;
}

.RadTabStrip_Bootstrap .rtsLink,
.RadTabStrip .rtsLink {
    font-family: 'Segoe UI', sans-serif !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    transition: all 0.2s ease !important;
}

.RadTabStrip_Bootstrap .rtsSelected .rtsLink,
.RadTabStrip .rtsSelected .rtsLink {
    color: var(--secondary-color) !important;
    border-bottom: 3px solid var(--secondary-color) !important;
    font-weight: 700 !important;
    background-color: #ffffff !important;
}

.RadTabStrip_Bootstrap .rtsLink:hover,
.RadTabStrip .rtsLink:hover {
    color: var(--secondary-color) !important;
    background-color: #f1f5f9 !important;
}

/* 9. Telerik RadWindow (Modals) Styling */
.RadWindow_Bootstrap {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden !important;
}

.RadWindow_Bootstrap .rwTitleBar {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* 10. DatePicker RadDatePicker Custom overrides */
.RadDatePicker_Bootstrap,
.RadTimePicker_Bootstrap {
    box-shadow: var(--shadow-sm) !important;
}

.RadDatePicker_Bootstrap .rcTable,
.RadTimePicker_Bootstrap .rcTable {
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
}

.RadDatePicker_Bootstrap .rcTable:hover,
.RadTimePicker_Bootstrap .rcTable:hover {
    border-color: #94a3b8 !important;
}

.RadDatePicker_Bootstrap .rcTable .riTextBox,
.RadTimePicker_Bootstrap .rcTable .riTextBox {
    border: none !important;
    box-shadow: none !important;
}

.RadDatePicker_Bootstrap .rcTable .rcCalPopup,
.RadTimePicker_Bootstrap .rcTable .rcTimePopup {
    background-color: #f1f5f9 !important;
    border-left: 1px solid #cbd5e1 !important;
}

.RadDatePicker_Bootstrap .rcTable .rcCalPopup:hover,
.RadTimePicker_Bootstrap .rcTable .rcTimePopup:hover {
    background-color: #e2e8f0 !important;
}


/* ==========================================================================
   LEGACY OVERRIDES & SPECIFIC BUGS FIXES
   ========================================================================== */

/* 11. Hiding internal circles/bullets inside Telerik RadComboBox & RadAutoCompleteBox */
.RadComboBoxDropDown ul,
.RadComboBoxDropDown li,
.RadAutoCompleteBox ul,
.RadAutoCompleteBox li,
.RadListBox ul,
.RadListBox li,
.rcbList,
.rcbList li,
.racList,
.racList li,
.racTokenList,
.racTokenList li,
.racToken,
.rcbItem,
.rcbHovered,
[class^="Rad"] ul,
[class^="Rad"] li,
[class*=" Rad"] ul,
[class*=" Rad"] li,
[class^="rcb"] ul,
[class^="rcb"] li,
[class^="rac"] ul,
[class^="rac"] li {
    list-style: none !important;
    list-style-type: none !important;
    background-image: none !important;
    margin: 0 !important;
}

.rcbList, .racList, .racTokenList {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Force hidden bullet marker for Telerik items inside combo dropdowns */
.RadComboBoxDropDown .rcbItem, 
.RadComboBoxDropDown .rcbHovered,
.RadComboBoxDropDown .rcbList li {
    list-style-image: none !important;
    list-style-type: none !important;
    list-style: none !important;
}

/* 12. Global Form Table Header (th) overrides (cleans up old gray block labels) */
table:not(.RadGrid):not(.db-table):not(.rgMasterTable) th,
.table:not(.RadGrid):not(.db-table):not(.rgMasterTable) th {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: left !important;
    border-radius: 0 !important;
}

/* 13. Dynamic overrides for inline CSS legacy colors */
/* Overriding legacy Dark Blue background `#4B6D80` */
[style*="background-color: #4B6D80"],
[style*="background-color:#4B6D80"],
[style*="background-color: #4b6d80"],
[style*="background-color:#4b6d80"],
[style*="background: #4B6D80"],
[style*="background:#4B6D80"],
[style*="background: #4b6d80"],
[style*="background:#4b6d80"] {
    background-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
}

/* Overriding legacy Border Left `#4B6D80` */
[style*="border-left: 4px solid #4B6D80"],
[style*="border-left:4px solid #4B6D80"],
[style*="border-left: 4px solid #4b6d80"],
[style*="border-left:4px solid #4b6d80"] {
    border-left: 4px solid var(--primary-color) !important;
}

/* Overriding legacy text colors `#4B6D80` and `#1B649B` */
[style*="color: #4B6D80"],
[style*="color:#4B6D80"],
[style*="color: #4b6d80"],
[style*="color:#4b6d80"],
[style*="color: #1B649B"],
[style*="color:#1B649B"],
[style*="color: #1b649b"],
[style*="color:#1b649b"] {
    color: var(--primary-color) !important;
}

/* Clean Form Containers */
table.nav-justified,
table[class*="nav-justified"] {
    background-color: #ffffff !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 20px !important;
    border: 1px solid var(--border-color) !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

/* Fix title td bottom-border */
td.bottom-border {
    border-bottom: 2px solid var(--border-color) !important;
    padding-bottom: 12px !important;
}

/* 14. Reset inner text inputs of Telerik RadComboBox, RadAutoCompleteBox & RadSearchBox */
.RadComboBox input[type="text"],
.RadComboBox_Bootstrap input[type="text"],
.RadComboBox_Default input[type="text"],
.RadAutoCompleteBox input[type="text"],
.RadAutoCompleteBox_Bootstrap input[type="text"],
.RadAutoCompleteBox_Default input[type="text"],
.RadSearchBox input[type="text"],
.rcbInput,
.racInput,
.riTextBox,
.rcbInputCell input,
.racInputArea input {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 4px !important;
    height: 100% !important;
    min-height: 0 !important;
    outline: none !important;
}

/* 15. Clinical Card Layout & Grid Styles (from od_psr) */
.main-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 15px;
    box-sizing: border-box;
}

.dental-card {
    background: #ffffff !important;
    border-radius: 15px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--border-color) !important;
    overflow: hidden;
}

.dental-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-left: 5px solid var(--secondary-color) !important;
    padding: 10px 15px !important;
    background-color: #f8fbff !important;
}

.dental-header h2 {
    color: var(--primary-color) !important;
    font-size: 1.1rem !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.dental-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 15px 25px !important;
    width: 100% !important;
}

@media (min-width: 800px) {
    .dental-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .full-span {
        grid-column: span 3 !important;
    }
}

.data-row {
    border-bottom: 1px solid #f0f4f8 !important;
    padding-bottom: 5px !important;
    margin-bottom: 5px !important;
}

.data-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #8898aa !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-bottom: 2px !important;
    letter-spacing: 0.5px !important;
}

.data-value {
    font-size: 13px !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

.highlight-value {
    font-size: 14px !important;
    color: var(--secondary-color) !important;
    font-weight: 700 !important;
}

/* 16. Standardizing legacy section title classes (.titulosuser, .titulosuserfin) to look like .dental-header */
.titulosuser,
.titulosuserfin {
    background-color: #f8fbff !important;
    background-image: none !important;
    border: none !important;
    border-left: 4px solid var(--secondary-color) !important;
    color: var(--primary-color) !important;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 8px 15px !important;
    height: auto !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
}

.titulosuserfin {
    font-size: 11px !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--border-focus) !important;
    background-color: #f8fafc !important;
}