/* Ace Admin 1.4 / Bootstrap 3.3.6. Project presentation overrides only. */
:root { --ph-blue: #226eae; --ph-ink: #20364c; --ph-muted: #667c90; --ph-border: #e0e8ef; --ph-surface: #fff; }
body { font-family: "Segoe UI", Arial, sans-serif; color: var(--ph-ink); font-size: 14px; background: var(--ph-surface); }
a { color: #216ba8; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #71bce4; outline-offset: 3px; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 10000; padding: 12px; background: #fff; }
.skip-link:focus { top: 10px; }
.pharmacy-app .navbar { background: #404040; height: 48px; min-height: 48px; border: 0; box-shadow: none; }
.pharmacy-app .navbar-container { padding: 0 16px; }
.pharmacy-app .navbar .navbar-brand { height: 48px; padding: 14px 0; font-size: 20px; font-weight: 400; }
.navbar-brand > .fa { margin-right: 8px; color: #fff; }
.pharmacy-app .ace-nav > li { height: 48px; line-height: 48px; border: 0; }
.pharmacy-app .ace-nav > li > a { background: #404040; padding: 0 12px; display: flex; align-items: center; gap: 10px; }
.pharmacy-app .ace-nav > li > a:hover, .pharmacy-app .ace-nav > li.open > a { background: #353535; }
.user-avatar { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 2px solid #fff; background: #ffffff20; border-radius: 50%; }
.pharmacy-app .user-info { position: static; line-height: 17px; max-width: 170px; text-overflow: ellipsis; }
.user-info small { color: #fff; font-size: 11px; }
.pharmacy-app .dropdown-menu { border: 1px solid var(--ph-border); border-radius: 4px; box-shadow: 0 8px 24px #16354e20; min-width: 230px; }
.pharmacy-app .dropdown-menu > li > a { padding: 11px 16px; }
.pharmacy-app .main-container { background: #fff; padding-top: 48px; min-height: 100vh; }
.pharmacy-app .main-container:before { background: #fff; }
/* Fixed navbar + fixed sidebar + skin-3 are server-rendered defaults, without saved overrides. */
.pharmacy-app .sidebar.sidebar-fixed { position: fixed; left: 0; top: 48px; bottom: 0; width: 190px; height: calc(100vh - 48px); min-height: 0; overflow-y: auto; overflow-x: hidden; background: #dbdbdb; border: 0; border-right: 1px solid #a4c6dd; isolation: isolate; }
.pharmacy-app .sidebar:before { display: none; }
.pharmacy-app .sidebar + .main-content { margin-left: 190px; }
.sidebar-heading { padding: 15px 14px; color: #5a5a5a; }
.sidebar-heading > span { display: block; font-size: 9px; font-weight: 600; letter-spacing: 1px; color: #666; }
.sidebar-heading > small { display: block; margin-top: 5px; font-size: 12px; }
.pharmacy-app .nav-list > li { margin: 0; border: 0; border-top: 1px solid #f2f2f2; border-bottom: 1px solid #c8c8c8; background: transparent; }
.pharmacy-app .nav-list > li > a { height: 40px; line-height: 20px; padding: 10px 9px; color: #5a5a5a; background: #e3e3e3; font-size: 13px; border-radius: 0; transition: background .15s; }
.pharmacy-app .nav-list > li > a > .menu-icon { font-size: 17px; width: 24px; margin-right: 5px; color: inherit; vertical-align: middle; }
.pharmacy-app .nav-list > li > a:hover, .pharmacy-app .nav-list > li > a:focus { background: #fff; color: #337dbb; }
.pharmacy-app .nav-list > li.active > a, .pharmacy-app .nav-list > li.active > a:hover { background: #f3faff; color: #337dbb; font-weight: 600; box-shadow: none; }
.pharmacy-app .nav-list > li.active > a > .menu-icon { color: #4d96cb; }
.pharmacy-app .nav-list > li:before, .pharmacy-app .nav-list > li:after, .pharmacy-app .nav-list > li > a:before, .pharmacy-app .nav-list > li.active > a:after { display: none; }
.pharmacy-app .sidebar-toggle { margin: 0; padding: 9px 0; border: 0; background: #d0d0d0; }
.pharmacy-app .sidebar-toggle:before { border-color: #fff; left: 12px; right: 12px; top: 50%; }
.sidebar-collapse-button { position: relative; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #777; }
.pharmacy-app .sidebar-toggle > button > .ace-icon { border: 1px solid #b1b1b1; border-radius: 50%; color: inherit; background: #fff; padding: 1px 5px; font-size: 15px; }
.sidebar-caption { padding: 18px 14px; color: #626262; font-size: 10px; }
.sidebar-caption > .fa { margin-right: 4px; color: #4d96cb; }
.pharmacy-app .sidebar.sidebar-fixed.menu-min { width: 44px; overflow: visible; }
.pharmacy-app .sidebar.menu-min + .main-content { margin-left: 44px; }
.pharmacy-app .sidebar.menu-min .sidebar-heading, .pharmacy-app .sidebar.menu-min .sidebar-caption { display: none; }
.pharmacy-app .sidebar.menu-min .nav-list { margin-top: 0; }
.pharmacy-app .sidebar.menu-min .nav-list > li { margin: 0; }
.pharmacy-app .sidebar.menu-min .nav-list > li > a { display: flex; align-items: center; justify-content: center; height: 40px; line-height: 20px; padding: 0; }
.pharmacy-app .sidebar.menu-min .nav-list > li > a > .menu-icon { display: block; flex: 0 0 44px; width: 44px; height: auto; line-height: 1; vertical-align: middle; font-size: 18px; margin: 0; }
.pharmacy-app .sidebar.menu-min .nav-list > li > a > .menu-text { box-sizing: border-box; left: 42px; top: -1px; height: 41px; line-height: 39px; padding: 0 12px; color: #337dbb; background: #f3f7fa; border-color: #a4c6dd; box-shadow: 4px 5px 12px #12365320; }
.pharmacy-app .sidebar.menu-min .sidebar-toggle { margin: 0; }
.pharmacy-app .breadcrumbs { background: #e7f2f8; border: 0; border-radius: 4px;  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pharmacy-app .breadcrumb { margin: 0; font-size: 12px; }
.pharmacy-app .breadcrumb > li, .pharmacy-app .breadcrumb > li > a { color: #4b7698; }
.pharmacy-app .breadcrumb > li.active { color: #555; }
.breadcrumb-context { color: #5c7f99; font-size: 11px; white-space: nowrap; }
.breadcrumb-context .fa { margin-right: 5px; }
.pharmacy-app .page-content { background: var(--ph-surface); }

/* Cards use Ace widget markup; utility aliases retain existing form layouts. */
.pharmacy-app .widget-box { border: 1px solid var(--ph-border); border-radius: 8px; background: #fff; box-shadow: 0 3px 12px #27456105; overflow: visible; }
.pharmacy-app .widget-header { box-sizing: border-box; background: #fff; color: #315570; border: 0; border-bottom: 1px solid var(--ph-border); border-radius: 8px 8px 0 0; font-size: 14px; font-weight: 600; }
.widget-header .fa { color: #3b88b9; margin-right: 8px; }

.pharmacy-app .widget-body { border-radius: 8px; background: #fff; }

.pharmacy-app .widget-main > .row:last-child { margin-bottom: 0; }

.pharmacy-app label { color: #435c70; font-size: 12px; font-weight: 600; }
.login-page .form-control { height: 42px; padding: 10px 12px; border: 1px solid #d8e2eb; border-radius: 5px; background: #fff; color: #29465b; font-size: 13px; box-shadow: none; }
.pharmacy-app input.form-control, .login-page input.form-control { border-radius: 5px !important; }
.pharmacy-app select.form-control { padding-right: 25px; }
.pharmacy-app .form-control:focus, .login-page .form-control:focus { border-color: #438ec3; box-shadow: 0 0 0 3px #2c86bd14; }
.pharmacy-app .form-control::placeholder, .login-page .form-control::placeholder { color: #7b8c99; opacity: 1; }
.pharmacy-app .form-control:disabled { color: #637c8f; background: #f3f6f9; }

.form-actions-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.form-actions-bar .btn { margin: 0; }
.field-checkbox { display: flex; align-items: center; gap: 7px; min-height: 17px; }
.field-checkbox input { margin: 0; accent-color: var(--ph-blue); }
.field-checkbox label { margin-bottom: 0; }
.login-page .btn { border: 1px solid transparent; border-radius: 5px; padding: 10px 17px; font-size: 12px; font-weight: 600; text-shadow: none; line-height: 20px; transition: background .15s; box-shadow: none !important; }
.login-page .btn-primary { background: #277bb6 !important; border-color: #277bb6; }
.login-page .btn-primary:hover { background: #1d6497 !important; border-color: #1d6497; }
.pharmacy-app .btn .fa { margin-right: 5px; }
.pharmacy-app .table { margin-bottom: 0; background: white; color: #3d566a; font-size: 13px; border-color: #e5ebf1; }
.pharmacy-app .table > thead > tr { background: #f4f8fb; color: #4c6c84; }
.pharmacy-app .table > thead > tr > th { background: #f4f8fb; border: 0; border-bottom: 1px solid #dce6ee; font-size: 11px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.pharmacy-app .table > tbody > tr > td { vertical-align: middle; border-color: #e7edf3; }
.pharmacy-app .table-striped > tbody > tr:nth-of-type(odd) { background: #fcfdfe; }
.pharmacy-app .table > tbody > tr:hover { background: #f3f9fc; }

.pharmacy-app .table tbody .btn .fa { margin: 0; }
.pharmacy-app .table td:last-child { white-space: nowrap; }
.table-responsive { background: white; border-radius: 6px; border: 1px solid var(--ph-border); margin-bottom: 0; }
.table-responsive > .table-bordered { border: 0; }
.records-section { margin-top: 28px; }
.section-heading { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: #315570; }
.section-heading .fa { color: #5b8ba9; }
.pharmacy-app .dataTables_wrapper { padding: 0; }
.pharmacy-app .dataTables_wrapper > .row { margin: 0; background: #fff; }
.pharmacy-app .dataTables_wrapper > .row:first-child { border-bottom: 1px solid var(--ph-border); }
.pharmacy-app .dataTables_wrapper > .row:last-child { border-top: 1px solid var(--ph-border); }
.pharmacy-app .dataTables_wrapper label { margin: 0; font-weight: 400; }
.pharmacy-app .dataTables_wrapper input[type=search] { display: inline-block; margin-left: 8px; width: 190px; }
.pharmacy-app .dataTables_length select { display: inline-block; width: 65px; margin: 0 5px; }
.dataTables_filter { text-align: right; }
.dataTables_info { color: #728697; font-size: 12px; padding-top: 8px; }
.dataTables_paginate { text-align: right; }
.dataTables_paginate .pagination { margin: 0; }
.pharmacy-app .pagination > li > a { border-color: #e0e8ef; color: #56748b; border-radius: 3px; margin: 0 2px; font-size: 12px; }
.pharmacy-app .pagination > .active > a { background: #277bb6; color: #fff; border-color: #277bb6; }
.pharmacy-app .table.dataTable th.sorting, .pharmacy-app .table.dataTable th.sorting_asc, .pharmacy-app .table.dataTable th.sorting_desc { cursor: pointer; padding-right: 25px; position: relative; }
.table.dataTable th.sorting:after, .table.dataTable th.sorting_asc:after, .table.dataTable th.sorting_desc:after { font-family: FontAwesome; content: '\f0dc'; position: absolute; right: 8px; color: #a4b7c5; }
.table.dataTable th.sorting_asc:after { content: '\f0de'; color: #2675ab; }
.table.dataTable th.sorting_desc:after { content: '\f0dd'; color: #2675ab; }
.table .dataTables_empty { text-align: center; color: #7c8f9f; }
.pharmacy-app .alert { border-radius: 5px; font-size: 13px; }
.pharmacy-app .alert.fade.show { opacity: 1; } /* Existing server-rendered Bootstrap 4 alerts. */
.pharmacy-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: #7c8e9d; font-size: 11px; border-top: 1px solid var(--ph-border); background: #fff; }
.pharmacy-footer .fa { margin-right: 6px; color: #4b8bb8; }
.pharmacy-app .modal-content { border-radius: 8px; border: 0; overflow: hidden; }
.pharmacy-app .modal-header { background: #f1f7fb; color: #305975; }

.pharmacy-app .modal-title { font-size: 17px; }
.ui-autocomplete { border: 1px solid #d8e4ed !important; border-radius: 6px; box-shadow: 0 8px 20px #213d5a20; padding: 6px !important; max-height: 280px; overflow-y: auto; z-index: 1060 !important; }
.ui-menu .ui-menu-item-wrapper, .ui-autocomplete .ui-menu-item { padding: 10px 12px; font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; }

.dashboard-records { clear: both; margin-left: 15px !important; margin-right: 15px !important; }

.chart-empty-state { display: flex; align-items: center; justify-content: center; color: #738b9e; font-size: 13px; text-align: center; }
.pharmacy-app .sale-detail { overflow: hidden; }
.pharmacy-app #tblDetalle tfoot td { border: 0; background: #eaf3f9; color: #245d87; }
.pharmacy-app #tblDetalle tfoot td:last-child { text-align: right; font-weight: 700; }
.sale-actions { display: flex; justify-content: flex-end; }

.permission-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f7fafc; border: 1px solid var(--ph-border); border-radius: 5px; }
.permission-option label { margin: 0; cursor: pointer; text-transform: capitalize; }
.permission-option input { margin: 0; accent-color: #277bb6; width: 17px; height: 17px; }
.d-inline { display: inline; }.d-flex { display: flex; }.text-dark { color: #435c70; }.text-white { color: white; }.font-weight-bold { font-weight: 600; }.text-uppercase { text-transform: uppercase; }
.mr-2 { margin-right: 8px; }.mt-2 { margin-top: 8px; }.mt-3 { margin-top: 24px; }.mt-4 { margin-top: 24px; }.p-2 { padding: 8px; }.p-3 { padding: 0; }.mx-auto { float: none; margin-left: auto; margin-right: auto; }
/* Login reuses the original local pharmacy photography. */
.login-page { background: #edf3f8; min-height: 100vh; }
.login-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.login-story { display: flex; flex-direction: column; justify-content: space-between; padding: 48px 10%; color: white; background: linear-gradient(150deg, #123653e8, #195f91b3), url('../../img/sidebar.jpg') center / cover; }
.login-brand { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; }.login-brand .fa { color: #b0e9ec; font-size: 30px; }
.login-story h1 { max-width: 420px; margin: 0 0 20px; font-size: 44px; font-weight: 600; line-height: 1.15; letter-spacing: -1px; color: #fff; }
.login-story p { max-width: 350px; font-size: 16px; line-height: 1.8; color: #d4e8f7; }.login-story > small { color: #bad2e2; }
.login-form-area { display: flex; align-items: center; justify-content: center; padding: 40px; background: #f4f7fb; }.login-box { width: 100%; max-width: 380px; }
.login-logo { display: block; width: 64px; height: 64px; object-fit: contain; margin-bottom: 24px; }.login-box h2 { margin: 8px 0 12px; font-size: 30px; color: #24435e; font-weight: 600; }.login-box > p { color: #728698; margin-bottom: 30px; }.login-box label { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.login-box .form-control { height: 46px; }.login-box .btn { margin-top: 8px; height: 46px; }.login-box .alert { margin-bottom: 22px; border-radius: 5px; }.login-box .alert.fade.show { opacity: 1; }.login-caption { text-align: center; color: #7e91a2; font-size: 11px; margin-top: 28px; }
@media (max-width: 991px) {
    .pharmacy-app .navbar .navbar-toggle { margin: 9px 16px 0 0; border: 1px solid #ffffff45; background: transparent; border-radius: 4px; }
    .pharmacy-app .sidebar.responsive { margin-left: -200px; top: 48px; position: fixed; z-index: 1028; transition: margin-left .2s; box-shadow: 4px 10px 25px #112e4a30; }
    .pharmacy-app .sidebar.responsive:before { display: none; }
    .pharmacy-app .sidebar.responsive { background: #dbdbdb; height: calc(100vh - 48px); min-height: 0; }
    .pharmacy-app .sidebar.responsive.display { margin-left: 0; }
    .pharmacy-app .sidebar.responsive + .main-content, .pharmacy-app .sidebar.menu-min + .main-content { margin-left: 0; }
    .sidebar-toggle { display: none; }
    .pharmacy-app .breadcrumbs { padding: 0 24px; }
    .pharmacy-app .nav-list > li.active:after { display: none; }
    .pharmacy-app .form-actions-bar { margin-top: 0; margin-bottom: 18px; }
}
@media (max-width: 600px) {
    .pharmacy-app .navbar-container { padding: 0 14px; display: flex; align-items: center; min-height: 48px; }
    .pharmacy-app .navbar-container:before, .pharmacy-app .navbar-container:after { display: none; }
    .pharmacy-app .navbar .navbar-header { float: none !important; width: auto !important; }
    .pharmacy-app .navbar .navbar-buttons { margin: 0 0 0 auto !important; padding: 0; background: transparent; border: 0; }
    .pharmacy-app .navbar .navbar-brand { font-size: 16px; white-space: nowrap; }.navbar-brand > .fa { margin-right: 3px; }
    .pharmacy-app .ace-nav > li > a { padding: 0 0 0 6px; gap: 7px; }.pharmacy-app .user-info { display: none; }.user-avatar { height: 31px; width: 31px; }
    .pharmacy-app .navbar .navbar-toggle { margin: 0 9px 0 0; padding: 7px; flex: 0 0 auto; }
    .pharmacy-app .breadcrumbs { padding: 0 14px; }.breadcrumb-context { display: none; }

    
    .pharmacy-app .dataTables_wrapper > .row > div { width: 100%; float: none; }.dataTables_filter, .dataTables_paginate { text-align: left; margin-top: 12px; }.pharmacy-app .dataTables_wrapper input[type=search] { width: 150px; }
.pharmacy-app .modal-dialog { margin: 20px 12px; }.pharmacy-app .table { min-width: 560px; }
    .login-layout { grid-template-columns: 1fr; }.login-story { padding: 26px; min-height: 135px; }.login-story h1, .login-story p, .login-story > small { display: none; }.login-form-area { padding: 30px 24px; }.login-logo { display: none; }
}
@media (max-width: 360px) { .pharmacy-app .navbar .navbar-brand { font-size: 14px; }.pharmacy-app .ace-nav > li > a { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

.pharmacy-app { scroll-padding-top: 64px; }
.pharmacy-app #formulario { scroll-margin-top: 64px; }

/* SweetAlert feedback shared by server-rendered messages and existing AJAX dialogs. */
.pharmacy-app .swal2-popup, .login-page .swal2-popup { font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; border: 1px solid #e0e8ef; border-radius: 10px; box-shadow: 0 10px 35px #20364c26; }
.pharmacy-app .swal2-title, .login-page .swal2-title { font-size: 20px; font-weight: 600; color: #34495b; }
.pharmacy-app .swal2-html-container, .login-page .swal2-html-container { font-size: 14px; line-height: 1.6; color: #536879; }
.pharmacy-app .swal2-styled, .login-page .swal2-styled { font-size: 13px; border-radius: 5px; padding: 10px 18px; }
.pharmacy-app .swal2-confirm, .login-page .swal2-confirm { background-color: #404040 !important; }
.pharmacy-app .swal2-cancel, .login-page .swal2-cancel { background-color: #667887 !important; }
.pharmacy-app .pharmacy-notification.swal2-toast, .login-page .pharmacy-notification.swal2-toast { padding: 16px; max-width: calc(100vw - 24px); border-left: 4px solid #388667; }
.pharmacy-app .pharmacy-notification .swal2-title, .login-page .pharmacy-notification .swal2-title { font-size: 14px; line-height: 1.5; text-align: left; }
.pharmacy-app .pharmacy-notification .swal2-timer-progress-bar, .login-page .pharmacy-notification .swal2-timer-progress-bar { background: #38866766; }
.pharmacy-app .swal2-container.swal2-top-end { padding-top: 60px; }

.login-page .page-eyebrow { color: #62849c; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; }

/* Sales and reports keep the native Ace small controls. */
.pharmacy-app [hidden] { display: none !important; }
#sale-lines td:first-child { min-width: 180px; }
#sale-lines tfoot { background: #eaf3f9; color: #245d87; }
#sale-total { font-size: 19px; }
#sale-status:empty { display: none; }
#sale-status { padding: 4px 0; }
.sale-checkout-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.report-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.report-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.report-summary strong { display: block; color: #305975; font-size: 21px; font-weight: 600; }
#receipt-frame { width: 100%; height: 64vh; border: 1px solid #d8e2eb; background: #f4f6f8; }
#receipt-modal .modal-dialog { width: 900px; max-width: calc(100vw - 24px); margin: 16px auto; }
#receipt-modal .modal-footer { padding: 10px; }
#receipt-modal .modal-footer small { margin-top: 6px; }
.report-export-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#receipt-modal.pdf-expanded .modal-dialog { margin: 0 auto; height: 100vh; height: 100dvh; }
#receipt-modal.pdf-expanded .modal-content { height: 100%; display: flex; flex-direction: column; }
#receipt-modal.pdf-expanded .modal-header, #receipt-modal.pdf-expanded .modal-footer { flex: 0 0 auto; }
#receipt-modal.pdf-expanded .modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
#receipt-modal.pdf-expanded #receipt-frame { height: 100%; min-height: 0; flex: 1 1 auto; }
@media (max-width: 767px) {
    #sales-workspace .form-group { margin-bottom: 8px !important; }
    #sales-workspace .widget-toolbar { float: none; display: block; line-height: 24px; }
    .sale-checkout-bar > div { display: flex; flex-wrap: wrap; gap: 8px; }
    #receipt-modal .modal-footer small { display: none; }
    #receipt-frame { height: 60vh; }
}