/* ========================================================================== 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 ===== */ #sidebar-left.pos-sidebar { 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 88px !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-y: auto !important; overflow-x: hidden !important; } #sidebar-left.pos-sidebar::-webkit-scrollbar { width: 5px; } #sidebar-left.pos-sidebar::-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 { height: auto !important; overflow: visible !important; margin: 0 !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 { position: absolute; left: 21px; right: 21px; bottom: 22px; 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 72px !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; } .pos-content-wrap .table th,.pos-content-wrap .table td { padding: 8px !important; white-space: nowrap; } .pos-content-wrap .bootstrap-datatable { min-width: 600px; } .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