/* ========================================================================== MI POS - MODERN LEGACY THEME Plantilla visual reutilizable para ASP.NET MVC + Bootstrap 2. Se carga despues de los estilos historicos y solo modifica presentacion. ========================================================================== */ html, body { min-height: 100%; } html { background: #f3f7fb; } body.pos-authenticated { margin: 0 !important; padding: 0 !important; background: #f3f7fb !important; color: #183153; font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.45; overflow-x: hidden; } body.pos-authenticated:before { display: none !important; } body.pos-authenticated a { transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; } /* ===== Sidebar ===== */ /* El menu se reparte en columna: la marca arriba, la lista en medio con su propio desplazamiento y el pie abajo. Antes el pie iba flotando y se encimaba con las ultimas opciones cuando no cabian. */ #sidebar-left.pos-sidebar { display: flex !important; flex-direction: column !important; position: fixed !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 236px !important; height: 100vh !important; z-index: 1040 !important; box-sizing: border-box !important; margin: 0 !important; padding: 18px 10px 14px !important; background: linear-gradient(180deg,#123b68 0%,#0b2f55 100%) !important; color: #fff !important; box-shadow: 8px 0 30px rgba(14,45,79,.10) !important; overflow: hidden !important; } #sidebar-left .pos-sidebar-nav::-webkit-scrollbar { width: 5px; } #sidebar-left .pos-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 10px; } .pos-brand { display: flex !important; align-items: center; gap: 12px; min-height: 70px; box-sizing: border-box; padding: 0 11px 17px; margin: 0 0 12px; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff !important; text-decoration: none !important; } .pos-brand-logo { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0,0,0,.13); } .pos-brand-logo img { max-width: 52px; max-height: 52px; width: auto; height: auto; object-fit: contain; } .pos-brand-copy { display: block; min-width: 0; line-height: 1.1; } .pos-brand-copy strong { display: block; color: #fff !important; font-size: 22px; font-weight: 700; letter-spacing: -.35px; white-space: nowrap; } .pos-brand-copy small { display: block; margin-top: 5px; color: #b9cee2 !important; font-size: 13px; white-space: nowrap; } #sidebar-left .pos-sidebar-nav.nav-collapse, #sidebar-left .pos-sidebar-nav.nav-collapse.collapse { flex: 1 1 auto; min-height: 0; height: auto !important; margin: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; } #sidebar-left .sidebar-nav > ul, #sidebar-left .main-menu { margin: 0 !important; padding: 0 !important; text-align: left !important; border: 0 !important; } #sidebar-left .main-menu > li { margin: 5px 0 !important; padding: 0 !important; border: 0 !important; list-style: none; } #sidebar-left .main-menu > li > a { min-height: 48px; box-sizing: border-box; display: flex !important; align-items: center; gap: 13px; margin: 0 !important; padding: 12px 14px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #dce9f6 !important; text-shadow: none !important; font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important; box-shadow: none !important; } #sidebar-left .main-menu > li > a:hover { background: rgba(255,255,255,.09) !important; color: #fff !important; } #sidebar-left .main-menu > li.active > a, #sidebar-left .main-menu > li.active > a:hover { background: linear-gradient(135deg,#338df0,#2879df) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(0,91,207,.30) !important; } #sidebar-left .main-menu > li > a > i { display: inline-block !important; width: 25px !important; flex: 0 0 25px; margin: 0 !important; color: inherit !important; opacity: 1 !important; font-size: 20px !important; line-height: 22px !important; text-align: center; } #sidebar-left .main-menu > li > a > span { display: inline !important; width: auto !important; color: inherit !important; font-weight: 600 !important; } .pos-sidebar-footer { flex: 0 0 auto; margin: 14px 11px 4px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.11); color: #9fb6ce; } .pos-sidebar-footer span,.pos-sidebar-footer small { display: block; } .pos-sidebar-footer span { margin-bottom: 3px; color: #c8d9ea; font-size: 12px; } .pos-sidebar-footer small { font-size: 12px; } /* ===== Topbar ===== */ .pos-topbar { position: fixed; top: 0; left: 236px; right: 0; height: 76px; z-index: 1030; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 0 28px 0 32px; background: rgba(255,255,255,.98); border-bottom: 1px solid #e5edf5; box-shadow: 0 2px 14px rgba(18,55,91,.04); } .pos-topbar-left,.pos-topbar-right { display: flex; align-items: center; min-width: 0; } .pos-topbar-right { gap: 10px; } .pos-page-heading strong,.pos-page-heading small { display: block; } .pos-page-heading strong { color: #16385f; font-size: 18px; font-weight: 700; line-height: 1.1; } .pos-page-heading small { margin-top: 3px; color: #7d91a7; font-size: 12px; } .pos-mobile-menu,.pos-mobile-brand { display: none; } .pos-notification { position: relative; width: 40px; height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; color: #17395f; font-size: 19px; border-right: 1px solid #e9eff5; padding-right: 12px; } .pos-notification b { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #2f8cf0; top: 4px; right: 11px; box-shadow: 0 0 0 2px #fff; } .pos-user-menu { margin: 0 !important; } .pos-user-menu > li { margin: 0 !important; } .pos-user-menu > li > a.btn { display: flex !important; align-items: center; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #173456 !important; text-shadow: none !important; font-weight: 600; border-radius: 8px !important; padding: 8px 9px !important; } .pos-user-menu > li > a.btn:hover { background: #f3f7fb !important; } .pos-user-menu .halflings-icon.user { background-image: none !important; width: 32px !important; height: 32px !important; margin: -4px 8px -4px 0 !important; border-radius: 50%; background: #adc0d4 !important; position: relative; } .pos-user-menu .halflings-icon.user:after { content: ""; display: block; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff; left: 10px; top: 5px; box-shadow: 0 11px 0 4px #fff; } .pos-user-menu .dropdown-menu { right: 0; left: auto; margin-top: 8px; border: 1px solid #e1eaf2; border-radius: 9px; box-shadow: 0 12px 30px rgba(14,45,79,.13); } /* ===== Application surface ===== */ .pos-app-shell { margin-left: 236px; padding-top: 76px; min-height: 100vh; box-sizing: border-box; background: #f3f7fb; } .pos-content-wrap { max-width: 100%; margin: 0 auto; padding: 25px 28px 20px; box-sizing: border-box; } .pos-content-wrap > .row-fluid { margin: 0; } .pos-content-wrap #content, .pos-content-wrap #content.span11, .pos-content-wrap #content[class*="span"] { float: none !important; width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .pos-app-shell-public { margin-left: 0; padding-top: 0; } .pos-footer { margin: 26px 0 3px; padding: 15px 1px 0; border-top: 1px solid #e2eaf2; color: #8b9bad; display: flex; justify-content: space-between; gap: 20px; font-size: 11px; } /* ===== Legacy page title injected from Master ===== */ .pos-legacy-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 20px; } .pos-legacy-page-heading h1 { margin: 0; color: #173456; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.5px; } .pos-legacy-page-heading p { margin: 5px 0 0; color: #7b8ea4; font-size: 13px; } /* ===== Shared cards / Bootstrap 2 boxes ===== */ .pos-content-wrap .box, .pos-content-wrap .well, .pos-content-wrap .thumbnail { box-sizing: border-box; border: 1px solid #e3ebf3 !important; border-radius: 11px !important; background: #fff !important; box-shadow: 0 6px 22px rgba(20,55,91,.055) !important; } .pos-content-wrap .box { margin-bottom: 20px !important; overflow: hidden; } .pos-content-wrap .box-header { min-height: 58px !important; box-sizing: border-box; display: flex !important; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px !important; background: #fff !important; color: #173456 !important; border: 0 !important; border-bottom: 1px solid #eaf0f5 !important; border-radius: 0 !important; box-shadow: none !important; } .pos-content-wrap .box-header h2 { margin: 0 !important; color: #173456 !important; font-size: 17px !important; line-height: 1.25 !important; font-weight: 700 !important; text-shadow: none !important; } .pos-content-wrap .box-header h2 i { margin-right: 8px !important; opacity: .8; } .pos-content-wrap .box-header .break { display: none !important; } .pos-content-wrap .box-header .box-icon { position: static !important; float: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; } .pos-content-wrap .box-header .box-icon a { display: inline-flex !important; align-items: center; gap: 6px; min-height: 34px; box-sizing: border-box; margin: 0 0 0 6px !important; padding: 7px 11px !important; color: #1f6fc3 !important; font-size: 12px; font-weight: 600; text-decoration: none !important; background: #eef6ff !important; border: 1px solid #d9eaff !important; border-radius: 7px !important; } .pos-content-wrap .box-header .box-icon a:hover { background: #e1f0ff !important; } .pos-content-wrap .box-content { box-sizing: border-box; padding: 18px !important; background: #fff !important; color: #304b68; } .pos-content-wrap .well { padding: 16px !important; } /* ===== Filters / forms ===== */ /* .pos-legacy-filter { margin: 0 0 18px !important; padding: 16px 18px !important; background: #fff; border: 1px solid #e3ebf3; border-radius: 10px; box-shadow: 0 5px 18px rgba(20,55,91,.045); } */ .pos-legacy-filter .controls { margin: 0 !important; } .pos-content-wrap label { color: #304b68; font-weight: 600; } .pos-content-wrap input[type="text"], .pos-content-wrap input[type="password"], .pos-content-wrap input[type="email"], .pos-content-wrap input[type="number"], .pos-content-wrap input[type="date"], .pos-content-wrap input[type="time"], .pos-content-wrap textarea, .pos-content-wrap select, .pos-content-wrap .uneditable-input { box-sizing: border-box; min-height: 38px; margin-bottom: 10px; padding: 8px 10px; color: #203b59; background: #fff; border: 1px solid #cdd9e5 !important; border-radius: 7px !important; box-shadow: none !important; outline: none; } .pos-content-wrap textarea { min-height: 90px; resize: vertical; } .pos-content-wrap input:focus,.pos-content-wrap textarea:focus,.pos-content-wrap select:focus { border-color: #4b97e9 !important; box-shadow: 0 0 0 3px rgba(47,140,240,.10) !important; } .pos-content-wrap .form-horizontal .control-group { margin-bottom: 14px; } .pos-content-wrap .form-horizontal .control-label { color: #304b68; font-weight: 600; } .pos-content-wrap fieldset { min-width: 0; } /* ===== Buttons ===== */ .pos-content-wrap .btn, .modal .btn, .pos-topbar .btn { box-sizing: border-box; border-radius: 7px !important; background-image: none !important; text-shadow: none !important; box-shadow: none !important; } .pos-content-wrap .btn { min-height: 36px; padding: 8px 12px; border-color: #d5dee8; color: #34506d; background: #fff; } .pos-content-wrap .btn:hover { background: #f4f7fa; } .pos-content-wrap .btn-primary,.pos-content-wrap .btn-info,.modal .btn-primary { color: #fff !important; border-color: #2e82e6 !important; background: #2e82e6 !important; } .pos-content-wrap .btn-primary:hover,.pos-content-wrap .btn-info:hover,.modal .btn-primary:hover { background: #2275d3 !important; } .pos-content-wrap .btn-success { color: #fff !important; border-color: #20a565 !important; background: #20a565 !important; } .pos-content-wrap .btn-danger { color: #fff !important; border-color: #e24d4d !important; background: #e24d4d !important; } .pos-content-wrap .label { border-radius: 6px; padding: 5px 8px; text-shadow: none; } /* ===== Tables / DataTables ===== */ .pos-content-wrap .table, .pos-content-wrap table.table { width: 100%; margin-bottom: 0; background: #fff; border-collapse: separate; border-spacing: 0; color: #304b68; } .pos-content-wrap .table th { padding: 11px 10px !important; color: #234260; background: #f6f9fc !important; border-color: #e6edf4 !important; font-size: 12px; font-weight: 700; vertical-align: middle; } .pos-content-wrap .table td { padding: 10px !important; border-color: #edf2f6 !important; vertical-align: middle; } .pos-content-wrap .table-striped tbody tr:nth-child(odd) td { background: #fbfdff; } .pos-content-wrap .table-hover tbody tr:hover td,.pos-content-wrap .table tbody tr:hover td { background: #f4f9ff; } .pos-content-wrap .table-bordered { border: 1px solid #e5edf4 !important; border-radius: 8px; overflow: hidden; } .pos-content-wrap .bootstrap-datatable { min-width: 620px; } .pos-content-wrap .dataTables_wrapper { width: 100%; overflow: auto; } .pos-content-wrap .dataTables_filter,.pos-content-wrap .dataTables_length { margin-bottom: 12px; } .pos-content-wrap .dataTables_filter input { width: 220px; max-width: 100%; margin-left: 7px; } .pos-content-wrap .dataTables_paginate { margin-top: 12px; } .pos-content-wrap .pagination ul { box-shadow: none; } .pos-content-wrap .pagination ul > li > a,.pos-content-wrap .pagination ul > li > span { border-color: #dce5ee; color: #3c5d7d; } .pos-content-wrap .pagination ul > .active > a,.pos-content-wrap .pagination ul > .active > span { color: #fff; background: #2e82e6; border-color: #2e82e6; } /* ===== Tarjetas de usuario (listado de Usuarios) ===== */ /* Rejilla compacta: tantas tarjetas por renglon como quepan sin bajar de 260px. Bootstrap 2 le pone un clearfix a .thumbnails con :before y :after; dentro de una rejilla esos pseudoelementos contarian como tarjetas, asi que se anulan. */ .pos-content-wrap .thumbnails { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 0 !important; padding: 0; list-style: none; } .pos-content-wrap .thumbnails:before, .pos-content-wrap .thumbnails:after { display: none !important; } .pos-content-wrap .thumbnails > li { display: flex; align-items: center; gap: 11px; box-sizing: border-box; float: none !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 10px 12px; list-style: none; background: #fff; border: 1px solid #e5edf5; border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; } .pos-content-wrap .thumbnails > li:hover { border-color: #cfe0f2; box-shadow: 0 4px 14px rgba(22,53,88,.07); } /* Retrato circular. La foto conserva su recorte con object-fit. */ .pos-content-wrap .thumbnails .thumbnail { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 46px !important; height: 46px; margin: 0 !important; padding: 0 !important; float: none !important; overflow: hidden; background: #eef4fb; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; } .pos-content-wrap .thumbnails .thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Datos y boton. El marcado de la vista no agrupa el nombre con los datos, asi que la caja se reparte con una rejilla de dos columnas: a la izquierda el nombre sobre el usuario y el correo, a la derecha el boton centrado. */ .pos-content-wrap .thumbnails .caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre boton" "datos boton"; align-items: center; column-gap: 10px; flex: 1 1 auto; min-width: 0; min-height: 0; padding: 0 !important; } .pos-content-wrap .thumbnails .caption h4 { grid-area: nombre; margin: 0; color: #173456; font-size: 14px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pos-content-wrap .thumbnails .caption > p:first-of-type { grid-area: datos; margin: 2px 0 0; color: #7186a0; font-size: 12px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pos-content-wrap .thumbnails .caption > p:first-of-type strong { color: #45607d; font-weight: 600; } .pos-content-wrap .thumbnails .caption > p:first-of-type a { color: #7186a0; } /* El salto de linea entre usuario y correo sobra en una tarjeta compacta. */ .pos-content-wrap .thumbnails .caption > p:first-of-type br { display: none; } /* El punto separador se omite cuando el usuario no tiene correo. */ .pos-content-wrap .thumbnails .caption > p:first-of-type a:before { content: " \00b7 "; color: #b3c2d2; } .pos-content-wrap .thumbnails .caption > p:first-of-type a:empty:before { content: none; } .pos-content-wrap .thumbnails .caption > p:last-child { grid-area: boton; margin: 0; } .pos-content-wrap .thumbnails .caption > p:last-child .btn { margin: 0; min-height: 0 !important; padding: 5px 11px !important; font-size: 12px; line-height: 1.35; } .pos-content-wrap .user-group { width: 100% !important; margin: 0 0 16px !important; border: 0 !important; } .pos-content-wrap .user-group > h4 { margin: 0 0 8px; padding: 4px 2px !important; color: #6b8096; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; } /* ===== Tabs, breadcrumbs, alerts ===== */ .pos-content-wrap .nav-tabs { border-bottom-color: #dfe8f1; } .pos-content-wrap .nav-tabs > li > a { border-radius: 7px 7px 0 0; color: #49657f; } .pos-content-wrap .nav-tabs > .active > a { color: #1d6fc4; font-weight: 600; } .pos-content-wrap .breadcrumb { margin: 0 0 16px; padding: 9px 12px; background: #fff; border: 1px solid #e4ecf3; border-radius: 8px; } .pos-content-wrap .alert { border: 0; border-radius: 8px; box-shadow: none; text-shadow: none; } /* ===== Modals ===== */ .modal { border: 0 !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 20px 60px rgba(8,31,55,.25) !important; } .modal-header { padding: 15px 18px !important; background: #fff; border-bottom: 1px solid #e8eef4 !important; } .modal-header h1,.modal-header h2,.modal-header h3 { margin: 0 !important; color: #173456; font-weight: 700; } .modal-header h3 { font-size: 19px; line-height: 1.3; } .modal-body { box-sizing: border-box; max-height: 70vh; padding: 18px !important; background: #fff; } .modal-footer { padding: 12px 18px !important; background: #f7f9fc !important; border-top: 1px solid #e8eef4 !important; box-shadow: none !important; } .modal-backdrop { background: #0e2a47; } /* ===== Chosen ===== */ .pos-content-wrap .chzn-container { max-width: 100%; } .pos-content-wrap .chzn-container-single .chzn-single { height: 36px; line-height: 36px; border-color: #cdd9e5; border-radius: 7px; background: #fff; box-shadow: none; } .pos-content-wrap .chzn-container-active .chzn-single { border-color: #4b97e9; box-shadow: 0 0 0 3px rgba(47,140,240,.10); } .pos-content-wrap .chzn-drop { border-color: #d6e0ea; border-radius: 0 0 7px 7px; box-shadow: 0 10px 24px rgba(20,55,91,.12); } /* ===== Dashboard ===== */ .pos-dashboard { max-width: 1400px; margin: 0 auto; text-align: left; } .pos-dashboard-title { margin: 0 0 20px; } .pos-dashboard-title h1 { margin: 0; color: #183153; font-size: 29px; line-height: 1.1; font-weight: 700; letter-spacing: -.6px; } .pos-dashboard-title p { margin: 5px 0 0; color: #75879d; font-size: 14px; } .pos-card { box-sizing: border-box; background: #fff; border: 1px solid #e5edf5; border-radius: 11px; box-shadow: 0 7px 24px rgba(22,53,88,.05); } .pos-filter-card { padding: 20px 24px; margin-bottom: 22px; } .pos-filter-grid { display: flex; align-items: flex-end; gap: 22px; } .pos-field { flex: 1 1 0; min-width: 0; } .pos-field label { display: block; margin-bottom: 7px; color: #173456; font-weight: 700; font-size: 13px; } .pos-input-wrap { position: relative; } .pos-input-wrap i { position: absolute; left: 14px; top: 50%; margin-top: -8px; color: #456887; font-size: 16px; z-index: 2; } .pos-input-wrap input,.pos-input-wrap select { width: 100%; height: 42px !important; box-sizing: border-box; margin: 0 !important; padding: 8px 13px 8px 42px !important; background: #fff; border: 1px solid #cbd7e3 !important; border-radius: 7px !important; color: #173456; font-size: 14px; } .pos-filter-action { flex: 0 0 150px; } .pos-filter-btn { width: 100%; height: 42px; margin: 0 !important; border: 0 !important; border-radius: 7px !important; background: linear-gradient(135deg,#2f8cf0,#2776dc) !important; color: #fff !important; font-weight: 700; font-size: 14px; text-shadow: none !important; box-shadow: 0 7px 16px rgba(40,122,225,.20) !important; } .pos-filter-btn i { margin-right: 7px; } .pos-income-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; min-height: 138px; padding: 23px 28px; margin-bottom: 22px; background: linear-gradient(105deg,#d9edff 0%,#d7ecff 70%,#c9e5ff 100%); border-color: #d4e8fa; } .pos-income-card:after { content: ""; position: absolute; right: -28px; bottom: -75px; width: 285px; height: 185px; border-radius: 48% 52% 0 0; background: rgba(255,255,255,.25); transform: rotate(-12deg); } .pos-income-main { position: relative; z-index: 1; display: flex; align-items: center; gap: 24px; } .pos-income-icon { width: 74px; height: 74px; border-radius: 13px; background: rgba(255,255,255,.38); display: flex; align-items: center; justify-content: center; color: #1682ef; font-size: 38px; } .pos-income-copy small { display: block; color: #476987; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; } .pos-income-copy strong { display: block; margin-top: 4px; color: #0e3266; font-size: 39px; line-height: 1.1; letter-spacing: -1px; } .pos-income-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; min-width: 34%; border-left: 1px solid rgba(55,104,145,.18); padding-left: 34px; color: #4d6b85; } .pos-income-meta i { color: #1682ef; font-size: 25px; } .pos-income-meta span { display: block; line-height: 1.55; } .pos-dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) 315px; gap: 20px; align-items: start; } .pos-performance-card { padding: 20px 22px; } .pos-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 17px; } .pos-card-title { display: flex; align-items: center; gap: 13px; min-width: 0; } .pos-card-title-icon { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: #e7f4ff; display: flex; align-items: center; justify-content: center; color: #1682ef; font-size: 21px; } .pos-card-title h2 { margin: 0; color: #0f3263; font-size: 19px; line-height: 1.15; } .pos-card-title p { margin: 3px 0 0; color: #778aa0; font-size: 12px; } .pos-pill { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; background: #f0f6fb; color: #48627d; font-size: 12px; } .pos-pill i { margin-right: 6px; } .pos-seller-list { display: flex; flex-direction: column; gap: 15px; } .pos-seller-card { display: grid; grid-template-columns: 330px minmax(0,1fr); overflow: hidden; background: #fff; border: 1px solid #dfe8f1; border-radius: 9px; } .pos-seller-info { padding: 17px 19px; background: linear-gradient(180deg,#f3f9ff 0,#fff 48%); border-right: 1px solid #e4ebf2; } .pos-seller-person { display: flex; align-items: center; gap: 15px; padding-bottom: 14px; } .pos-seller-avatar { width: 66px; height: 66px; flex: 0 0 66px; overflow: hidden; border: 1px solid #d7e5f3; border-radius: 50%; background: #eef5fb; } .pos-seller-avatar img { width: 100%; height: 100%; object-fit: cover; } .pos-seller-person h3 { margin: 0; color: #103263; font-size: 18px; line-height: 1.1; } .pos-seller-person span { display: block; margin-top: 5px; color: #6c8198; } .pos-seller-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 13px 0; border-top: 1px solid #e6edf4; border-bottom: 1px solid #e6edf4; } .pos-stat small,.pos-stat strong { display: block; } .pos-stat small { margin-bottom: 3px; color: #5c728b; } .pos-stat strong { color: #102f58; font-size: 15px; } .pos-seller-counts { padding-top: 12px; color: #506880; line-height: 1.9; } .pos-seller-counts i { width: 21px; margin-right: 7px; color: #3e6386; text-align: center; } .pos-seller-counts .cancelled i { color: #ef3333; } .pos-seller-performance { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 26px 31px; } .pos-total-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; color: #19395d; font-size: 15px; font-weight: 700; } .pos-total-row strong { color: #1178db; font-size: 18px; } .pos-progress { display: flex; align-items: center; gap: 11px; } .pos-progress-track { height: 15px; flex: 1 1 auto; min-width: 0; overflow: hidden; border-radius: 999px; background: #eaf0f5; } .pos-progress-bar { height: 100%; min-width: 2px; border-radius: 999px; background: linear-gradient(90deg,#2787e9,#1f95ea); } .pos-progress-label { flex: 0 0 auto; color: #667b92; } .pos-top-seller { display: flex; align-items: center; gap: 13px; margin-top: 27px; padding: 15px 17px; border-radius: 7px; background: #dff1ff; color: #45657f; } .pos-top-seller i { color: #1682ef; font-size: 25px; } .pos-top-seller strong { display: block; margin-bottom: 2px; color: #123d73; } .pos-activity-card { padding: 20px; } .pos-day-summary { border-top: 1px solid #edf2f6; } .pos-summary-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 3px; border-bottom: 1px solid #edf2f6; color: #49647f; } .pos-summary-line span { display: flex; align-items: center; gap: 9px; } .pos-summary-line i { width: 18px; color: #1682ef; text-align: center; } .pos-summary-line strong { color: #167ad9; font-size: 15px; } .pos-summary-cancelled i,.pos-summary-cancelled strong { color: #ef4747; } .pos-operation-ok { display: flex; gap: 11px; align-items: center; margin-top: 18px; padding: 13px 14px; border-radius: 8px; background: #e2f8ea; color: #198c4c; } .pos-operation-ok i { font-size: 20px; } .pos-operation-ok strong,.pos-operation-ok small { display: block; } .pos-operation-ok small { margin-top: 2px; color: #5a7c68; } /* ===== POS sale page: keep it usable on narrow screens ===== */ #TablaVenta input,#TablaVenta select { max-width: 100%; } .pos-content-wrap #divExcel,.pos-content-wrap #divExcel2 { max-width: 100%; overflow-x: auto; } /* ===== Mobile bottom navigation ===== */ .pos-mobile-bottom-nav { display: none; } .pos-sidebar-backdrop { display: none; } .pos-submenu { margin: 0 !important; } .pos-submenu > li > a.btn { border: 0 !important; background: #338df0 !important; box-shadow: none !important; border-radius: 8px !important; } /* ===== Medium desktop ===== */ @media (max-width: 1180px) { .pos-dashboard-grid { grid-template-columns: 1fr; } .pos-activity-card { display: block; } .pos-seller-card { grid-template-columns: 310px minmax(0,1fr); } .pos-income-copy strong { font-size: 34px; } } /* ============================================================ BOX HEADER - ACCIONES RESPONSIVE ============================================================ */ @media (max-width: 1128px) { /* El header deja de tener una altura fija. Así puede crecer dependiendo de cuántos botones existan. */ .pos-content-wrap .box-header { height: auto !important; min-height: 40px !important; padding: 8px 10px !important; box-sizing: border-box !important; overflow: visible !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } /* Título de la caja */ .pos-content-wrap .box-header h2 { float: none !important; width: auto !important; margin: 0 !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; font-size: 13px !important; line-height: 20px !important; -webkit-box-flex: 1 !important; -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .pos-content-wrap .box-header h2 i { margin-right: 6px !important; } /* Contenedor de botones. Bootstrap viejo lo manda flotando a la derecha. En móvil quitamos el float y dejamos que los botones puedan acomodarse en varias líneas. */ .pos-content-wrap .box-header .box-icon { position: static !important; float: none !important; width: 100% !important; margin: 7px 0 0 0 !important; padding: 0 !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; gap: 5px; box-sizing: border-box !important; overflow: visible !important; } /* Botones de acción */ .pos-content-wrap .box-header .box-icon a { float: none !important; display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 30px !important; margin: 0 !important; padding: 5px 8px !important; box-sizing: border-box !important; font-size: 10px !important; line-height: 18px !important; white-space: nowrap !important; border-radius: 5px !important; } /* Iconos internos */ .pos-content-wrap .box-header .box-icon a i { margin: 0 3px 0 0 !important; font-size: 12px !important; } /* Algunos botones únicamente contienen icono. No necesitan margen adicional. */ .pos-content-wrap .box-header .box-icon a i:only-child { margin-right: 0 !important; } /* Evita que clearfix / floats antiguos interfieran con flexbox. */ .pos-content-wrap .box-header:before, .pos-content-wrap .box-header:after, .pos-content-wrap .box-header .box-icon:before, .pos-content-wrap .box-header .box-icon:after { display: none !important; content: none !important; } } /* ===== Tablet ===== */ @media (min-width: 768px) and (max-width: 979px) { #sidebar-left.pos-sidebar { width: 208px !important; } .pos-topbar { left: 208px; padding-left: 24px; } .pos-app-shell { margin-left: 208px; } .pos-brand-logo { width: 48px; height: 48px; flex-basis: 48px; } .pos-brand-logo img { max-width: 44px; max-height: 44px; } .pos-brand-copy strong { font-size: 19px; } #sidebar-left .main-menu > li > a { padding: 11px 10px !important; gap: 10px; font-size: 13px !important; } .pos-content-wrap { padding: 22px 20px; } .pos-filter-grid { gap: 14px; } .pos-seller-card { grid-template-columns: 280px minmax(0,1fr); } } /* ===== Phones ===== */ @media (max-width: 767px) { body.pos-authenticated { padding: 0 0 69px !important; background: #f4f8fc !important; } #sidebar-left.pos-sidebar { width: 286px !important; max-width: 86vw !important; margin: 0 !important; padding: 18px 10px 14px !important; transform: translateX(-103%); transition: transform .22s ease; box-shadow: 14px 0 35px rgba(11,37,67,.25) !important; } body.pos-sidebar-open #sidebar-left.pos-sidebar { transform: translateX(0); } body.pos-sidebar-open { overflow: hidden; } .pos-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(8,24,43,.45); opacity: 0; visibility: hidden; transition: opacity .2s ease,visibility .2s ease; } body.pos-sidebar-open .pos-sidebar-backdrop { opacity: 1; visibility: visible; } .pos-topbar { left: 0; height: 72px; padding: 0 12px; background: linear-gradient(100deg,#153d6c,#0f3158); border-bottom: 0; color: #fff; } .pos-mobile-menu { width: 40px; height: 40px; flex: 0 0 40px; margin: 0 7px 0 -4px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: transparent; border: 0; } .pos-mobile-menu span { width: 23px; height: 2px; background: #fff; border-radius: 2px; } .pos-mobile-brand { display: flex; align-items: center; gap: 9px; min-width: 0; color: #fff !important; text-decoration: none !important; } .pos-mobile-brand img { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; border-radius: 50%; background: #fff; } .pos-mobile-brand span { min-width: 0; } .pos-mobile-brand span strong,.pos-mobile-brand span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pos-mobile-brand span strong { color: #fff; font-size: 16px; } .pos-mobile-brand span small { margin-top: 1px; color: #b9cee4; font-size: 10px; } .pos-page-heading { display: none; } .pos-topbar-right { gap: 2px; } .pos-submenu { display: none; } .pos-notification { width: 31px; padding-right: 0; border-right: 0; color: #fff; } .pos-notification b { right: 0; box-shadow: 0 0 0 2px #153d6c; } .pos-user-menu > li > a.btn { color: #fff !important; font-size: 0; padding: 4px !important; background: transparent !important; } .pos-user-menu .caret { display: none; } .pos-user-menu .halflings-icon.user { margin: 0 !important; } .pos-user-menu .dropdown-menu { right: 0; left: auto; } .pos-app-shell { margin-left: 0; padding-top: 72px; } .pos-content-wrap { width: 100%; max-width: none; padding: 15px 11px 10px; } .pos-footer { display: none; } .pos-legacy-page-heading { margin-bottom: 14px; } .pos-legacy-page-heading h1 { font-size: 24px; } .pos-legacy-page-heading p { font-size: 12px; } .pos-content-wrap .row-fluid [class*="span"] { float: none !important; width: 100% !important; margin-left: 0 !important; } .pos-content-wrap .box { margin-bottom: 14px !important; border-radius: 10px !important; } .pos-content-wrap .box-header { min-height: 52px !important; padding: 10px 12px !important; } .pos-content-wrap .box-header h2 { font-size: 15px !important; } /*.pos-content-wrap .box-header .box-icon a { min-height: 32px; padding: 6px 8px !important; font-size: 0; }*/ .pos-content-wrap .box-header .box-icon a i { margin: 0 !important; } .pos-content-wrap .box-content { padding: 12px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } .pos-legacy-filter { /*padding: 12px !important; margin-bottom: 13px !important; */ } .pos-content-wrap .form-horizontal .control-label { float: none !important; width: auto !important; padding-top: 0; margin-bottom: 5px; text-align: left !important; } .pos-content-wrap .form-horizontal .controls { margin-left: 0 !important; } .pos-content-wrap input[type="text"],.pos-content-wrap input[type="password"],.pos-content-wrap input[type="email"],.pos-content-wrap input[type="number"],.pos-content-wrap input[type="date"],.pos-content-wrap textarea,.pos-content-wrap select { max-width: 100% !important; } .pos-content-wrap .input-large { width: 100% !important; } .pos-content-wrap .controls { margin-left: 0 !important; } .pos-content-wrap .btn { margin-bottom: 5px; } .pos-content-wrap .table,.pos-content-wrap table.table { font-size: 12px; } /* Antes las celdas no partian el texto, asi que una nota larga estiraba la tabla fuera del panel y, como el panel recorta, la columna del importe quedaba sin verse. Ahora el texto se acomoda en varios renglones; solo los numeros y las fechas siguen en una sola linea. */ .pos-content-wrap .table th,.pos-content-wrap .table td { padding: 8px !important; white-space: normal; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; } .pos-content-wrap .table th:last-child, .pos-content-wrap .table td:last-child { white-space: nowrap; } /* Las tablas anchas de varias columnas conservan sus columnas en una sola linea y se deslizan de lado dentro de su contenedor. */ .pos-content-wrap .bootstrap-datatable { display: block; min-width: 0; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .pos-content-wrap .bootstrap-datatable th, .pos-content-wrap .bootstrap-datatable td { white-space: nowrap; } .pos-content-wrap .dataTables_filter,.pos-content-wrap .dataTables_length { float: none !important; width: 100%; text-align: left !important; } .pos-content-wrap .dataTables_filter input { width: calc(100% - 80px); } /* Telefono: una tarjeta por renglon, con el boton debajo de los datos. */ .pos-content-wrap .thumbnails { grid-template-columns: 1fr; gap: 8px; } .pos-content-wrap .thumbnails > li { padding: 10px 12px 10px 12px; } .pos-content-wrap .thumbnails .thumbnail { width: 42px !important; height: 42px; } .modal { top: 4% !important; left: 3% !important; width: 94% !important; margin-left: 0 !important; max-height: 92vh; } .modal-body { max-height: 65vh; overflow-y: auto; } /* Dashboard mobile */ .pos-dashboard-title { margin: 1px 2px 15px; } .pos-dashboard-title h1 { font-size: 25px; } .pos-dashboard-title p { font-size: 12px; } .pos-filter-card { padding: 14px; margin-bottom: 14px; } .pos-filter-grid { display: block; } .pos-field { margin-bottom: 11px; } .pos-filter-action { width: 100%; } .pos-filter-btn { width: 100%; } .pos-income-card { display: block; min-height: 0; padding: 17px; margin-bottom: 14px; } .pos-income-main { gap: 14px; } .pos-income-icon { width: 56px; height: 56px; flex: 0 0 56px; font-size: 29px; } .pos-income-copy small { font-size: 10px; } .pos-income-copy strong { font-size: 27px; } .pos-income-meta { min-width: 0; margin-top: 15px; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(55,104,145,.18); } .pos-dashboard-grid { display: block; } .pos-performance-card { padding: 13px; } .pos-card-heading { align-items: flex-start; margin-bottom: 13px; } .pos-card-title-icon { width: 40px; height: 40px; flex-basis: 40px; } .pos-card-title h2 { font-size: 17px; } .pos-pill { padding: 5px 8px; font-size: 10px; } .pos-seller-card { display: block; } .pos-seller-info { padding: 14px; border-right: 0; border-bottom: 1px solid #e4ebf2; } .pos-seller-avatar { width: 55px; height: 55px; flex-basis: 55px; } .pos-seller-stats { grid-template-columns: repeat(3,1fr); gap: 4px; } .pos-stat small { font-size: 10px; } .pos-stat strong { font-size: 13px; } .pos-seller-performance { padding: 15px 14px; } .pos-total-row { font-size: 13px; } .pos-total-row strong { font-size: 15px; } .pos-top-seller { display: none; } .pos-activity-card { display: block; margin-top: 14px; padding: 14px; } .pos-summary-line { padding: 11px 2px; font-size: 12px; } /* Bottom nav inspired by the mobile reference. Horizontally scrollable so permissions never break it. */ .pos-mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025; display: flex; align-items: stretch; height: 64px; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; background: rgba(255,255,255,.98); border-top: 1px solid #dfe8f1; box-shadow: 0 -5px 18px rgba(18,55,91,.07); -webkit-overflow-scrolling: touch; } .pos-mobile-bottom-nav::-webkit-scrollbar { display: none; } .pos-mobile-bottom-nav a { position: relative; min-width: 82px; flex: 1 0 82px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px 5px 5px; color: #516b86 !important; font-size: 10px; line-height: 1.05; text-decoration: none !important; text-align: center; } .pos-mobile-bottom-nav a i { width: auto !important; color: inherit !important; font-size: 20px !important; } .pos-mobile-bottom-nav a.active { color: #1682ef !important; font-weight: 700; } .pos-mobile-bottom-nav a.active:before { content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: #1682ef; } } @media (max-width: 420px) { /*.pos-mobile-brand span small { display: none; }*/ .pos-income-copy strong { font-size: 24px; } .pos-card-title h2 { font-size: 15px; } .pos-pill { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ===== Public / login ===== */ body.pos-public { margin: 0 !important; min-height: 100vh; background: linear-gradient(135deg,#0d3157 0%,#174c7e 52%,#eef5fb 52%,#f7fbff 100%) !important; font-family: "Segoe UI",Arial,Helvetica,sans-serif; } body.pos-public .pos-app-shell-public { min-height: 100vh; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 28px 16px; } body.pos-public .pos-content-wrap { width: 100%; max-width: 440px; margin: 0; padding: 0; } body.pos-public .row-fluid { margin: 0; } body.pos-public .login-box { width: 100% !important; max-width: 420px; box-sizing: border-box; margin: 0 auto !important; padding: 32px !important; background: rgba(255,255,255,.98) !important; border: 1px solid rgba(255,255,255,.75) !important; border-radius: 16px !important; box-shadow: 0 24px 70px rgba(6,29,52,.24) !important; } body.pos-public .login-box:before { content: "Mi POS"; display: block; margin-bottom: 4px; color: #173c66; font-size: 28px; font-weight: 700; text-align: center; } body.pos-public .login-box:after { content: "Punto de Venta"; display: block; position: absolute; } body.pos-public .login-box h1 { margin: 22px 0 4px !important; color: #183153; font-size: 26px; line-height: 1.2; font-weight: 700; text-align: center; } body.pos-public .login-box h2 { margin: 0 0 24px !important; color: #7a8da3; font-size: 13px; line-height: 1.4; font-weight: 400; text-align: center; } body.pos-public .login-box .input-prepend { display: flex; width: 100%; margin-bottom: 13px; } body.pos-public .login-box .input-prepend .add-on { width: 42px; height: 42px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 0; background: #f2f7fc; border: 1px solid #cedae6; border-right: 0; border-radius: 8px 0 0 8px; } body.pos-public .login-box input,body.pos-public .login-box select { width: 100% !important; height: 42px !important; box-sizing: border-box; margin: 0 !important; padding: 8px 11px !important; color: #213d5b; background: #fff; border: 1px solid #cedae6 !important; border-radius: 8px !important; box-shadow: none !important; } body.pos-public .login-box .input-prepend input { border-radius: 0 8px 8px 0 !important; } body.pos-public .login-box .button-login { float: none !important; width: 100%; margin: 8px 0 0 !important; } body.pos-public .login-box .button-login .btn { width: 100%; height: 43px; color: #fff; font-size: 14px; font-weight: 700; background: linear-gradient(135deg,#2f8cf0,#2776dc) !important; border: 0 !important; border-radius: 8px !important; text-shadow: none !important; box-shadow: 0 8px 20px rgba(40,122,225,.22) !important; } body.pos-public .validation-summary-errors { margin-bottom: 14px; padding: 10px 12px; color: #a83a3a; background: #fff0f0; border-radius: 8px; } body.pos-public .validation-summary-errors ul { margin: 0 0 0 18px; } @media (max-width: 600px) { body.pos-public { background: linear-gradient(180deg,#123b68 0,#0e3159 36%,#f3f7fb 36%,#f3f7fb 100%) !important; } body.pos-public .pos-app-shell-public { align-items: flex-start; padding-top: 68px; } body.pos-public .login-box { padding: 26px 20px !important; border-radius: 14px !important; } } /* ========================================================================== MODERNIZATION PASS V3 Ajustes globales para cabecera, calendarios, login y componentes heredados. Solo presentacion: no altera nombres, ids, rutas ni comportamiento JS. ========================================================================== */ /* Pie de pagina oculto por solicitud de diseno. */ .pos-footer { display: none !important; } /* La cabecera muestra la seccion actual; evita saltos cuando el nombre es largo. */ .pos-page-heading strong { display: block; max-width: 430px; overflow: hidden; color: #153556 !important; font-size: 18px; font-weight: 750; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .pos-page-heading small { margin-top: 4px; color: #7d91a7 !important; font-size: 12px; } /* ===== jQuery UI Datepicker / calendarios heredados ===== */ .ui-datepicker { width: 292px !important; box-sizing: border-box !important; padding: 10px !important; background: #fff !important; border: 1px solid #dce6f0 !important; border-radius: 12px !important; box-shadow: 0 18px 45px rgba(18,55,91,.18) !important; color: #294762 !important; font-family: "Segoe UI", Arial, Helvetica, sans-serif !important; z-index: 99999 !important; } .ui-datepicker .ui-datepicker-header { position: relative; min-height: 38px; box-sizing: border-box; padding: 8px 38px !important; background: #f5f9fd !important; border: 0 !important; border-radius: 9px !important; color: #173b62 !important; font-weight: 700 !important; } .ui-datepicker .ui-datepicker-title { margin: 0 !important; line-height: 22px !important; text-align: center; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { top: 6px !important; width: 28px !important; height: 28px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; cursor: pointer; } .ui-datepicker .ui-datepicker-prev { left: 6px !important; } .ui-datepicker .ui-datepicker-next { right: 6px !important; } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { background: #e7f2fe !important; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { margin-top: -8px !important; } .ui-datepicker table { width: 100% !important; margin: 8px 0 0 !important; border-collapse: separate !important; border-spacing: 3px !important; } .ui-datepicker th { padding: 5px 2px !important; color: #8294a7 !important; background: transparent !important; border: 0 !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; } .ui-datepicker td { padding: 0 !important; border: 0 !important; background: transparent !important; } .ui-datepicker td span, .ui-datepicker td a { display: flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; box-sizing: border-box; padding: 0 !important; margin: 0 auto; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #294762 !important; font-size: 12px !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; } .ui-datepicker td a:hover { background: #eaf4ff !important; color: #177ad8 !important; } .ui-datepicker td .ui-state-highlight { background: #eef6ff !important; color: #137ce3 !important; font-weight: 700 !important; } .ui-datepicker td .ui-state-active { background: #2f87e8 !important; color: #fff !important; font-weight: 700 !important; box-shadow: 0 5px 12px rgba(47,135,232,.24); } .ui-datepicker .ui-datepicker-buttonpane { margin: 8px 0 0 !important; padding: 8px 0 0 !important; border-top: 1px solid #edf2f7 !important; } .ui-datepicker .ui-datepicker-buttonpane button { margin: 0 3px !important; padding: 6px 10px !important; background: #f1f6fb !important; border: 0 !important; border-radius: 7px !important; color: #2b577e !important; font-weight: 600 !important; } /* FullCalendar antiguo: se integra visualmente con la nueva plantilla. */ .pos-content-wrap .fc { color: #294762; } .pos-content-wrap .fc-header { margin-bottom: 12px; } .pos-content-wrap .fc-header-title h2 { color: #173456; font-size: 20px; font-weight: 700; } .pos-content-wrap .fc-button { height: 32px !important; padding: 0 11px !important; background: #fff !important; border: 1px solid #d9e4ee !important; border-radius: 7px !important; box-shadow: none !important; color: #315778 !important; text-shadow: none !important; } .pos-content-wrap .fc-button.fc-state-active { background: #2f87e8 !important; border-color: #2f87e8 !important; color: #fff !important; } .pos-content-wrap .fc-widget-header { padding: 8px 4px !important; background: #f5f8fc !important; border-color: #e2eaf2 !important; color: #355571 !important; } .pos-content-wrap .fc-widget-content { border-color: #e7edf3 !important; } .pos-content-wrap .fc-state-highlight { background: #eef7ff !important; } /* ===== Modernizacion general de componentes Bootstrap 2 heredados ===== */ .pos-content-wrap .well, .pos-content-wrap .hero-unit, .pos-content-wrap .widget, .pos-content-wrap .sortable-box, .pos-content-wrap .accordion-group { background: #fff !important; border: 1px solid #e4edf5 !important; border-radius: 11px !important; box-shadow: 0 6px 20px rgba(20,55,91,.045) !important; } .pos-content-wrap .well { min-height: 0; padding: 16px !important; } .pos-content-wrap .hero-unit { padding: 22px !important; } .pos-content-wrap .form-actions { margin: 18px -18px -18px !important; padding: 14px 18px !important; background: #f8fafc !important; border-top: 1px solid #e6edf4 !important; border-radius: 0 0 10px 10px; } .pos-content-wrap .control-group { margin-bottom: 14px !important; } .pos-content-wrap label, .pos-content-wrap .control-label { color: #284965; font-weight: 600; } .pos-content-wrap input[type="text"], .pos-content-wrap input[type="password"], .pos-content-wrap input[type="email"], .pos-content-wrap input[type="number"], .pos-content-wrap input[type="search"], .pos-content-wrap input[type="tel"], .pos-content-wrap input[type="date"], .pos-content-wrap textarea, .pos-content-wrap select { box-sizing: border-box; min-height: 38px; padding: 8px 10px !important; background: #fff !important; border: 1px solid #cfdae5 !important; border-radius: 7px !important; color: #26445f !important; box-shadow: none !important; outline: none !important; } .pos-content-wrap textarea { min-height: 92px; resize: vertical; } .pos-content-wrap input:focus, .pos-content-wrap textarea:focus, .pos-content-wrap select:focus { border-color: #5da1e7 !important; box-shadow: 0 0 0 3px rgba(47,135,232,.11) !important; } .pos-content-wrap .input-prepend, .pos-content-wrap .input-append { white-space: nowrap; } .pos-content-wrap .input-prepend .add-on, .pos-content-wrap .input-append .add-on { min-height: 38px; box-sizing: border-box; padding: 8px 10px; background: #f4f8fc !important; border-color: #cfdae5 !important; color: #54708a; text-shadow: none; } .pos-content-wrap .input-prepend .add-on:first-child { border-radius: 7px 0 0 7px; } .pos-content-wrap .input-append .add-on:last-child { border-radius: 0 7px 7px 0; } .pos-content-wrap .btn-group > .btn { border-radius: 0 !important; } .pos-content-wrap .btn-group > .btn:first-child { border-radius: 7px 0 0 7px !important; } .pos-content-wrap .btn-group > .btn:last-child, .pos-content-wrap .btn-group > .dropdown-toggle { border-radius: 0 7px 7px 0 !important; } .pos-content-wrap .dropdown-menu { padding: 6px !important; background: #fff !important; border: 1px solid #dfe7ef !important; border-radius: 9px !important; box-shadow: 0 12px 30px rgba(18,55,91,.14) !important; } .pos-content-wrap .dropdown-menu > li > a { padding: 8px 11px !important; border-radius: 6px; color: #355571 !important; } .pos-content-wrap .dropdown-menu > li > a:hover { background: #eef6ff !important; color: #1676d2 !important; } .pos-content-wrap .accordion-heading .accordion-toggle { padding: 12px 14px !important; color: #234766 !important; font-weight: 700; text-decoration: none; } .pos-content-wrap .accordion-inner { padding: 14px !important; border-top: 1px solid #e8eef4 !important; } .pos-content-wrap hr { border: 0; border-top: 1px solid #e8eef4; } /* Listados, bloques de notificaciones y elementos que conservaban look antiguo. */ .pos-content-wrap .notifications, .pos-content-wrap .task, .pos-content-wrap .message { border-color: #e5edf4 !important; background: #fff !important; box-shadow: none !important; } .pos-content-wrap .notifications li, .pos-content-wrap .task, .pos-content-wrap .message { border-radius: 8px !important; } .pos-content-wrap .label, .pos-content-wrap .badge { border-radius: 999px !important; text-shadow: none !important; } .pos-content-wrap .progress { height: 9px !important; background: #e9f0f6 !important; border-radius: 99px !important; box-shadow: none !important; overflow: hidden; } .pos-content-wrap .progress .bar { border-radius: 99px; box-shadow: none !important; } /* Ticket / reportes: moderniza contenedores sin imponer anchos que rompan calculos. */ .pos-content-wrap .ticket-table, .pos-content-wrap table[class*="ticket"] { background: #fff; border-color: #e4ebf2 !important; } .pos-content-wrap .ticket-table td, .pos-content-wrap .ticket-table th { border-color: #e8eef4 !important; } .pos-content-wrap .ticket-table-total-cell, .pos-content-wrap .total-cell { color: #143c67; font-weight: 700; } /* ===== Login moderno ===== */ body.pos-public { position: relative; min-height: 100vh; background: #eef5fb !important; overflow-x: hidden; } body.pos-public:before, body.pos-public:after { content: ""; position: fixed; pointer-events: none; border-radius: 50%; } body.pos-public:before { width: 720px; height: 720px; left: -260px; top: -280px; background: radial-gradient(circle at 60% 60%,rgba(48,138,235,.24),rgba(17,61,104,.98) 62%,#0d3157 100%); } body.pos-public:after { width: 520px; height: 520px; right: -220px; bottom: -250px; background: rgba(55,145,235,.10); } body.pos-public .pos-app-shell-public { position: relative; z-index: 1; min-height: 100vh; padding: 34px 18px; } body.pos-public .pos-content-wrap { max-width: 455px !important; } .pos-login-shell { width: 100%; } .pos-login-card { width: 100%; box-sizing: border-box; padding: 34px 36px 25px; background: rgba(255,255,255,.98); border: 1px solid rgba(219,232,244,.92); border-radius: 18px; box-shadow: 0 24px 70px rgba(12,44,75,.18); } .pos-login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 28px; } .pos-login-logo { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; flex: 0 0 58px; overflow: hidden; background: #fff; border: 1px solid #e0eaf3; border-radius: 50%; box-shadow: 0 6px 16px rgba(25,78,126,.11); } .pos-login-logo img { max-width: 52px; max-height: 52px; object-fit: contain; } .pos-login-brand strong { display: block; color: #173a60; font-size: 24px; line-height: 1.05; font-weight: 750; } .pos-login-brand small { display: block; margin-top: 4px; color: #8495a7; font-size: 12px; } .pos-login-heading { margin-bottom: 22px; text-align: center; } .pos-login-heading h1 { margin: 0 !important; color: #173456; font-size: 27px; line-height: 1.2; font-weight: 750; } .pos-login-heading p { margin: 6px 0 0; color: #7b8da0; font-size: 13px; } .pos-login-form { margin: 0; padding: 0; border: 0; } .pos-login-form > label { display: block; margin: 0 0 6px; color: #2b4964; font-size: 12px; font-weight: 700; } .pos-login-control { display: flex; align-items: stretch; width: 100%; margin-bottom: 15px; } .pos-login-control > span { width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: #f3f8fd; border: 1px solid #cfdae5; border-right: 0; border-radius: 8px 0 0 8px; } .pos-login-control > span i { margin: 0 !important; opacity: .7; } .pos-login-control input, .pos-login-control select { width: 100% !important; height: 44px !important; min-height: 44px !important; box-sizing: border-box; margin: 0 !important; padding: 9px 12px !important; background: #fff !important; border: 1px solid #cfdae5 !important; border-radius: 0 8px 8px 0 !important; color: #24425e !important; box-shadow: none !important; outline: 0 !important; } .pos-login-control input:focus, .pos-login-control select:focus { border-color: #5c9fe5 !important; box-shadow: 0 0 0 3px rgba(48,135,230,.10) !important; } .pos-login-submit { width: 100%; height: 45px; margin: 5px 0 0 !important; background: linear-gradient(135deg,#318bef,#2478d9) !important; border: 0 !important; border-radius: 8px !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; text-shadow: none !important; box-shadow: 0 9px 20px rgba(39,126,220,.22) !important; } .pos-login-submit:hover { filter: brightness(.97); } .pos-login-foot { margin-top: 20px; color: #94a3b2; font-size: 10px; text-align: center; } body.pos-public .login-box { display: none !important; } /* evita que estilos heredados reaparezcan si queda markup viejo en cache */ body.pos-public .validation-summary-errors { margin: 0 0 16px; padding: 10px 12px; color: #a43c3c; background: #fff0f0; border: 1px solid #ffdada; border-radius: 8px; font-size: 12px; } body.pos-public .validation-summary-errors ul { margin: 0 0 0 17px; } /* ===== Responsive: tipografia mas compacta y controles comodos ===== */ @media (max-width: 767px) { body.pos-authenticated { font-size: 12.5px !important; line-height: 1.4; } .pos-content-wrap { font-size: 12.5px; } .pos-content-wrap h1 { font-size: 23px !important; line-height: 1.2; } .pos-content-wrap h2 { font-size: 17px !important; line-height: 1.25; } .pos-content-wrap h3 { font-size: 15px !important; line-height: 1.25; } .pos-content-wrap h4 { font-size: 13px !important; line-height: 1.25; } .pos-content-wrap label, .pos-content-wrap .control-label { font-size: 11px !important; } .pos-content-wrap input[type="text"], .pos-content-wrap input[type="password"], .pos-content-wrap input[type="email"], .pos-content-wrap input[type="number"], .pos-content-wrap input[type="search"], .pos-content-wrap input[type="tel"], .pos-content-wrap input[type="date"], .pos-content-wrap textarea, .pos-content-wrap select { font-size: 12px !important; } .pos-content-wrap .btn { font-size: 11px !important; } .pos-content-wrap .table, .pos-content-wrap table.table { font-size: 11px !important; } .pos-content-wrap .table th, .pos-content-wrap .table td { padding: 7px !important; } .pos-card-title h2 { font-size: 15px !important; } .pos-card-title p { font-size: 10.5px !important; } .pos-summary-line { font-size: 11px !important; } .pos-mobile-bottom-nav a { font-size: 9px !important; } .pos-mobile-bottom-nav a i { font-size: 18px !important; } .ui-datepicker { width: 276px !important; max-width: calc(100vw - 22px) !important; } .ui-datepicker td span, .ui-datepicker td a { width: 32px; height: 32px; font-size: 11px !important; } } @media (max-width: 480px) { body.pos-authenticated { font-size: 12px !important; } .pos-content-wrap { padding-left: 9px; padding-right: 9px; } .pos-dashboard-title h1 { font-size: 22px !important; } .pos-dashboard-title p { font-size: 11px !important; } .pos-income-copy strong { font-size: 23px !important; } .pos-login-card { padding: 27px 20px 22px; border-radius: 14px; } .pos-login-brand { margin-bottom: 23px; } .pos-login-heading h1 { font-size: 24px; } } /* ========================================================================== MOBILE HEADER / PAGE HEADING FIX En escritorio el titulo vive en la cabecera. En movil vuelve al contenido. ========================================================================== */ .pos-mobile-page-heading { display: none; } @media (max-width: 767px) { /* La cabecera movil identifica al negocio; el titulo de pagina va en contenido. */ .pos-mobile-brand { max-width: calc(100vw - 125px); } .pos-mobile-brand span strong { color: #fff !important; font-size: 14px !important; line-height: 16px !important; } .pos-mobile-brand span small { display: block !important; margin-top: 1px !important; color: #c4d6e8 !important; font-size: 9px !important; line-height: 11px !important; } .pos-mobile-page-heading { display: block; /*margin: 1px 2px 14px;*/ margin: 0; padding: 0; } .pos-mobile-page-heading h1 { margin: 0 0 3px !important; color: #153556 !important; font-size: 19px !important; line-height: 23px !important; font-weight: 700 !important; } .pos-mobile-page-heading p { margin: 0 !important; color: #7d91a7 !important; font-size: 10px !important; line-height: 15px !important; } /* El dropdown debe quedar por encima del contenido y ser tocable. */ .pos-user-menu, .pos-user-menu > li.dropdown { position: relative !important; overflow: visible !important; } .pos-user-menu .dropdown-menu { z-index: 1065 !important; min-width: 165px !important; margin-top: 7px !important; } .pos-user-menu .dropdown-menu > li > a { padding: 10px 12px !important; font-size: 11px !important; line-height: 16px !important; } } /* ========================================================================== MODERNIZATION PASS V4 - VISTAS INTERNAS Extiende la plantilla del Escritorio al resto del sistema. Solo presentacion: no cambia ids, names, rutas, eventos ni logica. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Restos de la plantilla antigua que ensucian los componentes nuevos -------------------------------------------------------------------------- */ /* custom.js envuelve cada