/*
Name: apiERP
Author: Luisito Programa
Website 1: luisitoprograma.com
Website 2: apiERP.dev
version: 6.5.0
*/

/* RESOURCES */
html{
scrollbar-width: thin;
scrollbar-color: var(--lead) transparent; 
}
body {
color: var(--lead);
background-color: var(--transparent);
overflow-y: auto !important;
}
a {
color: var(--orange);
text-decoration: none;
transition: 0.3s;
}
a:hover {
color: color-mix(in srgb, var(--orange), transparent 25%);
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
color: var(--blue);
}

/* EFFECT - NEW YEAR */
#snow-layer{
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2147483647;
opacity: .75;
animation: snow-fall 10s linear infinite; /* más rápido */
will-change: transform;

/* Copos con núcleo + halo (menos círculo perfecto) */
background-image:
radial-gradient(circle,
rgba(170,215,255,.95) 0px,
rgba(170,215,255,.95) 2px,
rgba(170,215,255,.45) 3.6px,
rgba(170,215,255,.15) 5.4px,
transparent 6.8px
),
radial-gradient(circle,
rgba(200,235,255,.85) 0px,
rgba(200,235,255,.85) 1.6px,
rgba(200,235,255,.35) 3px,
rgba(200,235,255,.12) 4.8px,
transparent 6px
),
radial-gradient(circle,
rgba(150,205,255,.75) 0px,
rgba(150,205,255,.75) 2.6px,
rgba(150,205,255,.30) 4.6px,
rgba(150,205,255,.10) 6.6px,
transparent 8px
);

background-size: 260px 260px, 420px 420px, 620px 620px;
background-position: 0 0, 140px 80px, 300px 160px;
}
@keyframes snow-fall {
from { transform: translateY(-160px); }
to   { transform: translateY(120vh); }
}

/* MAIN */
#pos{
min-height: 90vh;
}
main{
margin-left: 0.000;
}
@media (max-width: 1199px){
main{
margin-left: 0;
}
}

/* USER PERMISSIONS */
#panel_users{
width:100%;
padding:14px;
display:flex;
flex-direction:column;
gap:16px;
box-sizing:border-box;
}

.userPerm_container{
width:100%;
margin:0;
padding:0;
background:#fff;
border-radius:16px;
box-shadow:0 8px 24px rgba(15,23,42,.07);
overflow:visible;
box-sizing:border-box;
transition:border-color .18s ease,box-shadow .18s ease;
}

.border_blue{
border:2px solid var(--blue);
}

.border_orange{
border:2px solid var(--orange);
box-shadow:0 10px 28px rgba(255,89,0,.12);
}

.userPerm_header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:16px 18px;
background:linear-gradient(
135deg,
rgba(8,0,96,.07),
rgba(255,89,0,.05)
);
border-bottom:1px solid #e8ecf2;
border-radius:14px 14px 0 0;
}

.userPerm_headerText{
min-width:0;
}

.userPerm_userName{
margin:0;
font-size:17px;
line-height:1.3;
font-weight:800;
color:var(--blue);
word-break:break-word;
}

.userPerm_userMeta{
margin-top:4px;
font-size:12px;
color:#64748b;
}

.userCfg_section{
border-bottom:1px solid #e8ecf2;
padding: 0 !important;
border-radius: 16px;
}

.userCfg_section:last-child{
border-bottom:0;
}

.userCfg_sectionToggle{
width:100%;
min-height:64px;
padding:14px 18px;
border:0;
background:#fff;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
text-align:left;
cursor:pointer;
color:var(--lead);
transition:background-color .15s ease;
}

.userCfg_sectionToggle:hover,
.userCfg_sectionToggle:focus-visible{
background:#f8fafc;
outline:none;
}

.userCfg_sectionText{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}

.userCfg_sectionTitle{
font-size:14px;
font-weight:800;
color:var(--lead);
}

.userCfg_sectionDescription{
font-size:12px;
line-height:1.4;
color:#64748b;
}

.userCfg_sectionIcon{
width:30px;
height:30px;
flex:0 0 30px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--blue);
color:#fff;
font-size:20px;
font-weight:500;
line-height:1;
}

.userCfg_sectionOpen >
.userCfg_sectionToggle{
background:#f8fafc;
}

.userCfg_sectionOpen >
.userCfg_sectionToggle
.userCfg_sectionIcon{
background:var(--orange);
}

.userCfg_sectionBody{
padding:16px 18px 20px;
background:#fbfcfe;
border-top:1px solid #edf0f4;
}

.userCfg_sectionBody[hidden]{
display:none !important;
}

.userPerm_groupsGrid{
display:grid;
grid-template-columns:
repeat(
auto-fit,
minmax(280px,1fr)
);
gap:14px;
}

.userPerm_groupCard{
min-width:0;
background:#fff;
border:1px solid #dfe5ec;
border-radius:14px;
padding:14px;
box-shadow:0 3px 10px rgba(15,23,42,.04);
}

.userPerm_groupTitle{
margin:0 0 12px;
padding-bottom:9px;
border-bottom:1px solid #edf0f4;
font-size:13px;
font-weight:800;
color:var(--blue);
}

.userPerm_groupList{
display:flex;
flex-direction:column;
gap:10px;
}

.userPerm_item{
display:flex;
flex-direction:column;
gap:6px;
min-width:0;
}

.userPerm_label{
font-size:12px;
line-height:1.35;
font-weight:700;
color:#475569;
}

.userPerm_select{
width:100%;
min-height:39px;
padding:7px 10px;
border:1px solid #cbd5e1;
border-radius:9px;
background:#fff;
font-size:12.5px;
color:var(--lead);
box-sizing:border-box;
}

.userPerm_select:disabled{
background:#f1f5f9;
color:#64748b;
cursor:not-allowed;
opacity:1;
}

.userPerm_select:focus{
outline:none;
border-color:var(--orange);
box-shadow:
0 0 0 3px
rgba(255,89,0,.12);
}

.userPerm_actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:16px;
}

.userPerm_editBtn,
.userPerm_saveBtn{
min-width:150px;
min-height:42px;
padding:10px 18px;
border:0;
border-radius:10px;
font-size:13px;
font-weight:800;
cursor:pointer;
transition:
transform .12s ease,
opacity .12s ease,
box-shadow .12s ease;
}

.userPerm_editBtn{
background:var(--blue);
color:var(--white);
}

.userPerm_saveBtn{
background:var(--orange);
color:var(--white);
}

.userPerm_editBtn:hover,
.userPerm_saveBtn:hover{
transform:translateY(-1px);
box-shadow:
0 7px 16px
rgba(15,23,42,.12);
}

.userPerm_editBtn:disabled,
.userPerm_saveBtn:disabled{
opacity:.65;
cursor:not-allowed;
transform:none;
box-shadow:none;
}

.userPerm_editBtn[hidden],
.userPerm_saveBtn[hidden]{
display:none !important;
}

.userCfg_empty{
width:100%;
padding:16px;
border:1px dashed #cbd5e1;
border-radius:12px;
background:#fff;
font-size:13px;
line-height:1.45;
text-align:center;
color:#64748b;
box-sizing:border-box;
}

.userCfg_error{
color:#b42318;
border-color:#f1b4ae;
background:#fff7f6;
}

.userRestricted_content{
position:relative;
}

.userRestricted_form{
display:grid;
grid-template-columns:
minmax(190px,.8fr)
minmax(280px,1.6fr)
auto;
gap:12px;
align-items:end;
margin-bottom:16px;
padding:14px;
background:#fff;
border:1px solid #dfe5ec;
border-radius:14px;
}

.userRestricted_field{
min-width:0;
}

.userRestricted_label{
display:block;
margin-bottom:6px;
font-size:12px;
font-weight:800;
color:#475569;
}

.userRestricted_select,
.userRestricted_input{
width:100%;
min-height:42px;
padding:8px 10px;
border:1px solid #cbd5e1;
border-radius:9px;
background:#fff;
font-size:13px;
color:var(--lead);
box-sizing:border-box;
}

.userRestricted_select:focus,
.userRestricted_input:focus{
outline:none;
border-color:var(--orange);
box-shadow:
0 0 0 3px
rgba(255,89,0,.12);
}

.userRestricted_addBtn,
.userRestricted_retryBtn{
min-height:42px;
padding:9px 14px;
border:0;
border-radius:10px;
background:var(--orange);
color:#fff;
font-size:13px;
font-weight:800;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
white-space:nowrap;
}

.userRestricted_retryBtn{
display:flex;
margin:10px auto 0;
background:var(--blue);
}

.userRestricted_addBtn:disabled,
.userRestricted_retryBtn:disabled{
opacity:.65;
cursor:not-allowed;
}

.userRestricted_autocomplete{
position:relative;
}

.userRestricted_autocompleteResults{
position:absolute;
left:0;
right:0;
top:calc(100% + 5px);
z-index:1000;
max-height:320px;
overflow-y:auto;
background:#fff;
border:1px solid #cbd5e1;
border-radius:11px;
box-shadow:
0 14px 35px
rgba(15,23,42,.16);
}

.userRestricted_autocompleteResults[hidden]{
display:none !important;
}

.userRestricted_autocompleteOption{
width:100%;
padding:10px 12px;
border:0;
border-bottom:1px solid #edf0f4;
background:#fff;
text-align:left;
cursor:pointer;
display:flex;
flex-direction:column;
gap:3px;
}

.userRestricted_autocompleteOption:last-child{
border-bottom:0;
}

.userRestricted_autocompleteOption:hover,
.userRestricted_autocompleteOption:focus{
background:#f8fafc;
outline:none;
}

.userRestricted_autocompleteName{
font-size:13px;
font-weight:800;
color:var(--lead);
}

.userRestricted_autocompleteMeta{
font-size:11.5px;
color:#64748b;
}

.userRestricted_autocompleteEmpty{
padding:14px;
font-size:12.5px;
text-align:center;
color:#64748b;
}

.userRestricted_tableWrapper{
width:100%;
overflow-x:auto;
border:1px solid #dfe5ec;
border-radius:13px;
background:#fff;
}

.userRestricted_table{
width:100%;
min-width:680px;
border-collapse:collapse;
}

.userRestricted_table th,
.userRestricted_table td{
padding:11px 12px;
border-bottom:1px solid #edf0f4;
font-size:12.5px;
line-height:1.4;
text-align:left;
vertical-align:middle;
color:#475569;
}

.userRestricted_table th{
background:#f8fafc;
font-weight:800;
color:var(--blue);
}

.userRestricted_table
tbody tr:last-child td{
border-bottom:0;
}

.userRestricted_actionCell{
width:84px;
text-align:center !important;
}

.userRestricted_deleteBtn{
width:36px;
height:36px;
border:0;
border-radius:9px;
background:#feeceb;
color:#b42318;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:16px;
}

.userRestricted_deleteBtn:hover{
background:#fdd8d5;
}

.userRestricted_deleteBtn:disabled{
opacity:.55;
cursor:not-allowed;
}

.userRestricted_emptyCell{
padding:22px !important;
text-align:center !important;
color:#64748b !important;
}

@media(max-width:900px){
.userRestricted_form{
grid-template-columns:1fr 1fr;
}

.userRestricted_addBtn{
grid-column:1 / -1;
width:100%;
}
}

@media(max-width:640px){
#panel_users{
padding:9px;
gap:12px;
}

.userPerm_header,
.userCfg_sectionToggle,
.userCfg_sectionBody{
padding-left:13px;
padding-right:13px;
}

.userPerm_groupsGrid{
grid-template-columns:1fr;
}

.userPerm_actions{
flex-direction:column;
}

.userPerm_editBtn,
.userPerm_saveBtn{
width:100%;
min-width:0;
}

.userRestricted_form{
grid-template-columns:1fr;
}

.userRestricted_addBtn{
grid-column:auto;
}
}

/* OPERATIONS PROCESS */
#panel_operations table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
#panel_operations th,
#panel_operations td {
border: 1px solid #ccc;
padding: 0.5rem;
font-size: 13px;
text-align: left;
}
#panel_operations th {
background: var(--transparent);
font-weight: bold;
}

/* NOTIFICATIONS */
.ntf-notification-wrapper{
margin-left: auto;
}
.ntf-bell{
position: relative;
display: inline-block;
cursor: pointer;
}
.ntf-badge{
position: absolute;
top: -10px;
right: -18px;
background: var(--blue);
color: white;
border-radius: 50%;
padding: 2px 6px;
font-size: 10px;
}
.ntf-dropdown{
position: absolute;
width: 320px;
top: 50px;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 4px;
overflow: hidden;
z-index: 9999;
}
.ntf-hidden{
display: none;
}
#ntf-notifications-list{
padding: 0;
list-style: none;
max-height: 350px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--blue) transparent; 
}
#ntf-notifications-list li{
font-size: 12px;
color: var(--lead);
padding: 10px;
border-bottom: 1px solid #eee;
cursor: pointer;
}
#ntf-notifications-list li:hover{
background: #f5f5f5;
}

.ntf-modal-actions{
margin-top: 20px;
text-align: center;
}
.ntf-modal-actions button{
margin-left: 5px;
margin-bottom: 5px;
padding: 3px;
border: none;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
background: var(--orange);
color: var(--white);
}

/* ALERTS */
#ntf-flotante-container {
position: fixed;
left: 50%;
transform: translateX(-50%);
z-index: 9999999;
pointer-events: none;
text-align: center;
width: auto;
max-width: 420px;
padding: 10px;
box-sizing: border-box;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
.ntf-flotante-container-top {
top: 18px;
}
.ntf-flotante-container-bottom {
bottom: 18px;
}
.ntf-flotante-message-wrapper {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 10px;
background: #fff;
color: #07122a;
padding: 12px 14px;
border-radius: 12px;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
border: 1px solid rgba(11,18,32,0.05);
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
opacity: 0;
transform: translateY(-8px) scale(0.995);
transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
line-height: 1.25;
font-size: 14px;
}
.ntf-flotante-message-wrapper.ntf-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.ntf-flotante-message-wrapper.ntf-hide {
opacity: 0;
transform: translateY(-8px) scale(0.995);
}
.ntf-green   { background: var(--green, #ecfdf5); color: #03422a; border-color: rgba(16,185,129,0.08); }
.ntf-orange  { background: var(--orange, #fff7ed); color: #7a3500; border-color: rgba(249,115,22,0.08); }
.ntf-blue    { background: var(--blue, #eff6ff);  color: #05325f; border-color: rgba(59,130,246,0.06); }
.ntf-inner {
flex: 1 1 auto;
font-size: 14px;
text-align: left;
color: var(--white);
}
.ntf-close-btn {
background: transparent;
border: none;
color: var(--white);
font-size: 20px;
line-height: 1;
cursor: pointer;
padding: 0 6px;
margin-left: 8px;
border-radius: 6px;
}
.ntf-close-btn:hover { color: rgba(7,18,42,0.9); }
.ntf-flotante-message {
/* mantener por compatibilidad: convertimos a un estilo neutro para evitar conflictos */
padding: 8px 10px;
margin-top: 10px;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
opacity: 0;
}
.ntf-flotante-top,
.ntf-flotante-bottom {
animation: none !important;
}
@keyframes ntf-slide-top-fade {
from { transform: translateY(0); opacity: 1; }
to   { transform: translateY(0); opacity: 1; }
}
@keyframes ntf-slide-bottom-fade {
from { transform: translateY(0); opacity: 1; }
to   { transform: translateY(0); opacity: 1; }
}

/* REPORTS */
.btn-report-new{
background-color: var(--transparent);
color: var(--lead);
border: 1px solid var(--lead);
}
.btn-report-new:hover{
background-color: var(--transparent);
color: var(--blue);
border: 1px solid var(--blue);
}
#date-range-label{
display: inline-block;
position: relative;
cursor: pointer;
}
#date-range-label .date-range-label-icon{
color: var(--orange);
font-size: 20px;
}
#date-range-options{
display: none;
list-style: none;
position: absolute;
left: 60%;
top: 100%;
background-color: var(--white);
border: 1px solid var(--transparent);
padding: 5px;
margin: 0;
z-index: 10;
width: max-content;
box-shadow: 0 4px 6px var(--transparent);
border-radius: 4px;
}
#date-range-options li{
background-color: var(--white);
color: var(--lead);
padding: 5px;
cursor: pointer;
}
#date-range-options .li-filter-active{
color: var(--orange);
font-weight: bold;
}
#date-range-options .li-filter-active:hover{
color: var(--orange);
font-weight: bold;
}
#date-range-options li:hover{
background-color: var(--transparent);
color: var(--lead);
}
.btn-report-new{
background-color: var(--transparent);
color: var(--lead);
border: 1px solid var(--lead);
}
.btn-report-new:hover{
background-color: var(--transparent);
color: var(--blue);
border: 1px solid var(--blue);
}
.table-wrapper{
position: relative;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.table-wrapper::-webkit-scrollbar{
display: none;
}
.table-report{
border: 1px solid #111;
}
.table-report th{
font-size: 13px;
background-color: var(--transparent);
color: var(--blue);
font-weight: normal;
white-space: nowrap;
text-align: center;
}
.table-report td{
font-size: 12px;
color: var(--lead);
white-space: nowrap;
text-align: center;
text-wrap: auto;
}
.table-hover tbody tr:hover{
background-color: var(--transparent);
}
.table-hover tbody tr:hover > td{
color: var(--blue);
}
.td-amount-leter{
font-size: 15px !important;
color: var(--blue) !important;
text-align: right !important;
}
.td-amount{
font-size: 15px !important;
background-color: var(--transparent) !important;
color: var(--blue) !important;
text-align: right !important;
}
.pagination-table{
display: block !important;
text-align: center;
}
.pagination-table a{
background-color: var(--transparent);
color: var(--lead);
border: 1px solid var(--lead);
}
.pagination-table a:hover{
background-color: var(--transparent);
color: var(--blue);
border: 1px solid var(--blue);
}
.span-table-custom{
background: none;
padding: 5px 10px;
border-radius: 5px;
font-weight: normal;
font-size: 12.5px;
}
.table-no-hover tbody tr:hover {
background-color: transparent !important;
}

/* REPORTS - BUTTONS TABLE GENERAL */
.container-report-buttons{
text-align: right;
padding-right: 5px;
margin-bottom: 10px;
}
.export-drop.dropdown {
display: inline-flex;
position: relative;
align-items: center;
gap: 0;
font-family: inherit;
}
.export-btn,
.export-toggle {
font-size: 13px;
background: #fff;
padding: 8px 12px;           /* idéntico para ambos */
box-sizing: border-box;      /* asegurar cálculo consistente de tamaño */
min-height: 40px;            /* fuerza la misma altura visual */
display: inline-flex;
align-items: center;
gap: .5rem;
cursor: pointer;
line-height: 1;
vertical-align: middle;
}
.report-btn-export, .export-toggle-export {
color: green;
border: none !important;
}
.report-btn-personalize, .export-toggle-personalize {
color: var(--lead);
border: none !important;
}
.export-btn {
border-radius: 6px 0 0 6px;
}
.export-toggle {
border-left: 0;
padding-left: 10px;          /* un poco menos a la izquierda si quieres */
border-radius: 0 6px 6px 0;
justify-content: center;
}
.export-label { display: inline-block; }
.export-menu {
min-width: 220px;
margin-top: 6px;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.06);
}
.export-btn:hover,
.export-toggle:hover,
.export-btn:focus,
.export-toggle:focus {
background: #f6fff6;
outline: none;
}
.export-menu .dropdown-item {
display: flex; align-items: center; gap: .5rem; 
}
.export-btn:focus-visible,
.export-toggle:focus-visible {
box-shadow: 0 0 0 3px rgba(33, 115, 70, 0.12);
}
#customizeReportColumnsMenu li{
font-size: 14px;
}
.reports-li-dropdown-menu-excel{
background-color: #008000; border-top: 1px solid #333; color: #fff; font-weight: normal !important; font-size: 14px;
}
.reports-li-dropdown-menu-excel:hover{
background-color: #00800090; color: #fff;
}
.reports-li-dropdown-menu-pdf{
background-color: #FF0000; border-top: 1px solid #333; color: #fff; font-weight: normal !important; font-size: 14px;
}
.reports-li-dropdown-menu-pdf:hover{
background-color: #FF000090; color: #fff;
}
@media (max-width: 420px){
.export-label { display: none; }
.export-btn { padding: 7px; }
}

/* SNIPPER LOADING */
#infoLoadingModal{
color: #333; position: absolute; top: 41%; font-size: 15px !important;
}
#imgLoadingModal{
position: absolute; top: 33%; width: 37px; height: auto;
}
#svgLoadingModal{
animation: spinner-border .75s linear infinite; transform-origin: center; transform-box: fill-box;
}
@keyframes spinner-border{
to { transform: rotate(360deg); }
}

/* PERMISSIONS ACCESS */
.pos-no-access-wrapper {
min-height: 320px;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: radial-gradient(circle at top, #f5f7ff 0, #eef1ff 40%, #e5e7f5 100%);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pos-no-access-card {
background: #ffffff;
border-radius: 18px;
padding: 1.75rem 1.75rem 1.5rem;
max-width: 420px;
width: 100%;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
border: 1px solid rgba(148, 163, 184, 0.35);
position: relative;
overflow: hidden;
}
.pos-no-access-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(236, 72, 153, 0.03));
pointer-events: none;
}
.pos-no-access-header {
display: flex;
align-items: center;
gap: 0.9rem;
margin-bottom: 0.75rem;
position: relative;
z-index: 1;
}
.pos-no-access-icon {
width: 40px;
height: 40px;
border-radius: 999px;
background: radial-gradient(circle at 30% 0, #ffb27a 0, #ff5900 45%, #d94d00 100%);
box-shadow: 0 10px 25px rgba(255, 89, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: #ffffff;
animation: pos-pulse-lock 1.6s ease-in-out infinite;
}
.pos-no-access-title {
font-size: 1.1rem;
font-weight: 600;
color: #0f172a;
letter-spacing: 0.01em;
}
.pos-no-access-subtitle {
font-size: 0.82rem;
color: #64748b;
margin-top: 0.15rem;
}
.pos-no-access-body p {
position: relative;
z-index: 1;
margin-top: 0.75rem;
font-size: 0.9rem !important;
color: #475569;
}
.pos-no-access-body p strong {
color: #0f172a;
font-weight: 600;
}
.pos-no-access-actions {
margin-top: 1.3rem;
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
position: relative;
z-index: 1;
justify-content: center;
}
.pos-no-access-btn {
border: none;
border-radius: 999px;
padding: 0.55rem 1rem;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pos-no-access-btn-primary {
background: linear-gradient(135deg, #ff5900, #d94d00);
box-shadow: 0 10px 20px rgba(255, 89, 0, 0.5);
color: #ffffff;
}
.pos-no-access-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(255, 89, 0, 0.55);
}
.pos-no-access-btn:focus-visible {
outline: 2px solid #ff5900;
outline-offset: 2px;
}
.pos-no-access-footer {
margin-top: 1.1rem;
font-size: 0.75rem;
color: #9ca3af;
position: relative;
z-index: 1;
text-align: center;
}
@keyframes pos-pulse-lock {
0%, 100% {
transform: translateY(0) scale(1);
box-shadow: 0 10px 25px rgba(255, 89, 0, 0.45);
}
50% {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 14px 32px rgba(255, 89, 0, 0.6);
}
}
@media (max-width: 480px) {
.pos-no-access-card {
padding: 1.4rem 1.3rem 1.2rem;
}
.pos-no-access-title {
font-size: 1rem;
}
.pos-no-access-wrapper {
padding: 1rem;
}
}

/* NOTIFIER OFFLINE */
#offlineSyncNotifier {
position: fixed;
right: 16px;
bottom: 16px;
width: 360px;
max-width: calc(100% - 32px);
z-index: 99999;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
box-shadow: 0 10px 30px rgba(3,6,18,0.25);
border-radius: 12px;
overflow: hidden;
background: linear-gradient(180deg, #ffffff, #fbfbff);
color: #0b0b0b;
border: 1px solid rgba(8,0,96,0.06);
}

/* Header */
#offlineSyncNotifier .ns_header {
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 12px;
gap:8px;
background: linear-gradient(90deg, rgba(8,0,96,0.06), rgba(255,89,0,0.03));
}
#offlineSyncNotifier .ns_title {
display:flex;
gap:8px;
align-items:center;
font-weight:600;
color:#080060;
font-size:14px;
}
#offlineSyncNotifier .ns_controls {
display:flex;
gap:6px;
align-items:center;
}
.ns_btn {
background: transparent;
border: none;
cursor: pointer;
padding:6px;
border-radius:8px;
font-size:13px;
}
.ns_btn:hover { background: rgba(0,0,0,0.04); }

/* Body */
#offlineSyncNotifier .ns_body {
padding:12px;
display:flex;
flex-direction:column;
gap:10px;
}

/* Estado principal */
.ns_statusLine {
display:flex;
align-items:center;
gap:10px;
}
.ns_spinner {
width:28px;
height:28px;
border-radius:50%;
border:3px solid rgba(8,0,96,0.12);
border-top-color: #080060;
animation: ns_spin 1s linear infinite;
}
@keyframes ns_spin { to { transform: rotate(360deg); } }

/* Barra de progreso */
.ns_progressWrap { width:100%; background: #f1f1f6; height:10px; border-radius:6px; overflow:hidden; }
.ns_progressBar {
height:100%;
width:0%;
transition: width 400ms ease;
background: linear-gradient(90deg,#080060,#FF5900);
}

/* Mensajes */
.ns_small { font-size:12px; color:#444; }
.ns_percent { font-weight:700; color:#080060; font-size:13px; }

/* Lista de items */
.ns_list {
max-height:120px;
overflow:auto;
border-top:1px dashed rgba(0,0,0,0.04);
padding-top:8px;
display:flex;
flex-direction:column;
gap:6px;
}
.ns_item {
display:flex;
justify-content:space-between;
gap:8px;
align-items:center;
font-size:13px;
padding:4px 6px;
border-radius:6px;
background: transparent;
}
.ns_item .left { display:flex; gap:8px; align-items:center; }
.ns_chip { font-size:11px; padding:3px 6px; border-radius:999px; background: rgba(8,0,96,0.06); color:#080060; }

/* Footer */
.ns_footer {
display:flex;
justify-content:space-between;
gap:8px;
align-items:center;
padding:8px 12px;
background: rgba(8,0,96,0.02);
font-size:13px;
}
.ns_link { color:#080060; text-decoration:underline; cursor:pointer; font-size:13px; }
.ns_doneIcon {
width:20px;
height:20px;
display:inline-block;
background: linear-gradient(90deg,#080060,#FF5900);
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9.29 16.29L4.7 11.7l1.41-1.41L9.29 13.46l8.59-8.59L19.29 6.3z"/></svg>') no-repeat center;
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9.29 16.29L4.7 11.7l1.41-1.41L9.29 13.46l8.59-8.59L19.29 6.3z"/></svg>') no-repeat center;
border-radius:50%;
}

/* RESPONSIVE */
@media (max-width: 768px){
.userPerm_container {
width: 100%;
margin: 0;
}

/* NOTIFIER OFFLINE */
#offlineSyncNotifier { right:10px; left:10px; bottom:10px; width:auto; max-width:unset; }

/* ALERTS */
#ntf-flotante-container {
width: 100%; padding: 8px;
}
.ntf-flotante-message-wrapper { padding: 10px; font-size: 13px; border-radius: 10px; }
.ntf-close-btn { font-size: 18px; }
}

/* ADMIN */
.adm-shell{
position: relative;
padding: 24px;
max-width: 1440px;
margin: 0 auto;
}
.adm-header{
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.adm-header-left{
display: flex;
align-items: center;
gap: 16px;
}
.adm-brand-mark{
width: 56px;
height: 56px;
border-radius: 18px;
background: linear-gradient(135deg, var(--orange), #ff8a3d);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 18px;
box-shadow: 0 12px 40px rgba(8, 0, 96, 0.10);
}
.adm-title{
margin: 0;
font-size: 30px;
line-height: 1.1;
color: var(--blue);
font-weight: 800;
}
.adm-subtitle{
margin: 6px 0 0;
color: var(--lead);
font-size: 14px;
}
.adm-toolbar{
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.adm-toolbar-left,
.adm-toolbar-right{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.adm-search-wrap{
min-width: 320px;
max-width: 480px;
width: 100%;
}
.adm-search-input,
.adm-input{
width: 100%;
height: 48px;
border: 1px solid #e5e7eb;
border-radius: 14px;
background: var(--white);
padding: 0 14px;
outline: none;
font-size: 14px;
color: #161616;
transition: 0.2s ease;
box-sizing: border-box;
}
.adm-search-input:focus,
.adm-input:focus{
border-color: rgba(255, 89, 0, 0.45);
box-shadow: 0 0 0 4px rgba(255, 89, 0, 0.10);
}
.adm-input-error{
border-color: #dc2626 !important;
box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10) !important;
}
.adm-stats{
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.adm-stat-chip{
min-height: 40px;
padding: 10px 14px;
border-radius: 999px;
background: var(--white);
color: var(--blue);
border: 1px solid #e5e7eb;
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
}
.adm-stat-chip-pending{
color: var(--orange);
}
.adm-stat-chip-success{
color: var(--green);
}
.adm-grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.adm-card{
background: rgba(255,255,255,0.96);
border: 1px solid rgba(8,0,96,0.06);
border-radius: 22px;
box-shadow: 0 12px 40px rgba(8, 0, 96, 0.10);
padding: 18px;
display: flex;
flex-direction: column;
gap: 16px;
backdrop-filter: blur(8px);
}
.adm-card-compact{
gap: 14px;
}
.adm-card-body-compact{
padding-top: 0;
}
.adm-info-grid-compact{
grid-template-columns: 1fr;
gap: 10px;
}
.adm-dropdown-item{
display: flex;
align-items: center;
gap: 10px;
}
.adm-dropdown-icon{
width: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
.adm-pagination{
display: flex;
justify-content: center;
margin-top: 24px;
}
.adm-pagination-inner{
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
background: rgba(255,255,255,0.9);
padding: 10px;
border-radius: 18px;
border: 1px solid #e5e7eb;
box-shadow: 0 12px 40px rgba(8, 0, 96, 0.10);
}
.adm-page-btn{
min-width: 42px;
height: 42px;
padding: 0 12px;
border: 1px solid #e5e7eb;
background: var(--white);
color: var(--blue);
border-radius: 12px;
font-weight: 700;
cursor: pointer;
transition: 0.2s ease;
}
.adm-page-btn:hover:not(:disabled){
border-color: rgba(255, 89, 0, 0.35);
color: var(--orange);
}
.adm-page-btn.is-active{
background: linear-gradient(135deg, var(--orange), #ff7a21);
color: var(--white);
border-color: transparent;
}
.adm-page-btn:disabled{
opacity: 0.45;
cursor: not-allowed;
}
.adm-card-top{
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
}
.adm-card-brand{
display: flex;
gap: 14px;
min-width: 0;
}
.adm-card-logo,
.adm-card-logo-placeholder{
width: 56px;
height: 56px;
border-radius: 14px;
object-fit: cover;
background: #f3f4f6;
border: 1px solid #e5e7eb;
flex-shrink: 0;
}
.adm-card-logo-placeholder{
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
color: var(--blue);
background: linear-gradient(135deg, rgba(8,0,96,0.08), rgba(255,89,0,0.08));
}
.adm-card-brand-info{
min-width: 0;
}
.adm-card-title{
margin: 0;
font-size: 17px;
font-weight: 800;
color: var(--blue);
word-break: break-word;
line-height: 1.2;
}
.adm-card-subtitle{
margin: 6px 0 0;
color: var(--lead);
font-size: 13px;
word-break: break-word;
}
.adm-card-actions{
position: relative;
}
.adm-card-actions-toggle{
width: 42px;
height: 42px;
border: 1px solid #e5e7eb;
background: var(--white);
border-radius: 12px;
cursor: pointer;
font-size: 20px;
color: var(--blue);
transition: 0.2s ease;
}
.adm-card-actions-toggle:hover{
border-color: rgba(255, 89, 0, 0.35);
color: var(--orange);
}
.adm-card-actions-dropdown{
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background: var(--white);
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 16px 34px rgba(0,0,0,0.10);
padding: 8px;
display: none;
z-index: 20;
}
.adm-card-actions-dropdown.is-open{
display: block;
}
.adm-dropdown-item{
width: 100%;
text-align: left;
padding: 12px 12px;
background: transparent;
border: none;
border-radius: 10px;
cursor: pointer;
color: #161616;
font-size: 14px;
}
.adm-dropdown-item:hover{
background: rgba(255, 89, 0, 0.08);
color: var(--orange);
}
.adm-card-status-row{
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.adm-status-badge{
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
.adm-status-dot{
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
}
.adm-badge-success{
background: rgba(16, 149, 0, 0.10);
color: var(--green);
}
.adm-badge-success .adm-status-dot{
background: var(--green);
}
.adm-badge-pending{
background: rgba(255, 89, 0, 0.12);
color: var(--orange);
}
.adm-badge-pending .adm-status-dot{
background: var(--orange);
}
.adm-doc-chip{
background: rgba(8,0,96,0.08);
color: var(--blue);
border-radius: 999px;
padding: 8px 12px;
font-size: 12px;
font-weight: 700;
}
.adm-info-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.adm-info-item{
min-width: 0;
background: #f8fafc;
border-radius: 14px;
padding: 12px;
border: 1px solid #eef2f7;
}
.adm-info-item-full{
grid-column: 1 / -1;
}
.adm-info-label{
display: block;
font-size: 12px;
color: var(--lead);
margin-bottom: 4px;
}
.adm-info-value{
display: block;
font-size: 14px;
color: #161616;
font-weight: 600;
word-break: break-word;
}
.adm-btn{
min-height: 44px;
padding: 0 16px;
border-radius: 14px;
border: none;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
.adm-btn-primary{
background: linear-gradient(135deg, var(--orange), #ff7a21);
color: var(--white);
box-shadow: 0 10px 24px rgba(255, 89, 0, 0.20);
}
.adm-btn-primary:hover{
transform: translateY(-1px);
}
.adm-btn-secondary{
background: var(--blue);
color: var(--white);
}
.adm-btn-light{
background: var(--white);
color: var(--blue);
border: 1px solid #e5e7eb;
}
.adm-empty-state{
background: var(--white);
border: 1px dashed #d1d5db;
border-radius: 24px;
padding: 40px 24px;
text-align: center;
color: var(--lead);
}
.adm-empty-icon{
font-size: 42px;
margin-bottom: 10px;
}
.adm-modal-backdrop{
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
z-index: 99999;
backdrop-filter: blur(6px);
}
.adm-modal{
width: 100%;
background: var(--white);
border-radius: 24px;
box-shadow: 0 24px 80px rgba(0,0,0,0.22);
overflow: hidden;
animation: admFadeInUp 0.18s ease;
}
.adm-modal-sm{
max-width: 460px;
}
.adm-modal-lg{
max-width: 980px;
}
.adm-modal-header,
.adm-modal-footer{
padding: 18px 20px;
border-bottom: 1px solid #f1f5f9;
}
.adm-modal-footer{
border-bottom: none;
border-top: 1px solid #f1f5f9;
display: flex;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.adm-modal-header{
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.adm-modal-body{
padding: 20px;
max-height: 75vh;
overflow: auto;
}
.adm-modal-title{
margin: 0;
font-size: 22px;
color: var(--blue);
font-weight: 800;
}
.adm-modal-subtitle{
margin: 6px 0 0;
color: var(--lead);
font-size: 14px;
}
.adm-modal-close{
width: 42px;
height: 42px;
border: 1px solid #e5e7eb;
background: var(--white);
border-radius: 12px;
cursor: pointer;
font-size: 22px;
color: var(--blue);
}
.adm-field{
display: flex;
flex-direction: column;
gap: 8px;
}
.adm-field-full{
grid-column: 1 / -1;
}
.adm-field-label{
font-size: 13px;
font-weight: 700;
color: var(--blue);
}
.adm-modal-help{
margin-top: 8px;
font-size: 12px;
color: var(--lead);
}
.adm-form-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.adm-edit-company-top{
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.adm-edit-logo-wrap{
width: 120px;
height: 120px;
border-radius: 24px;
border: 1px solid #e5e7eb;
overflow: hidden;
background: #f8fafc;
flex-shrink: 0;
}
.adm-edit-logo-preview,
.adm-edit-logo-placeholder{
width: 100%;
height: 100%;
object-fit: cover;
}
.adm-edit-logo-placeholder{
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 800;
color: var(--blue);
background: linear-gradient(135deg, rgba(8,0,96,0.08), rgba(255,89,0,0.10));
}
.adm-upload-btn{
position: relative;
overflow: hidden;
}
@keyframes admFadeInUp{
from{
opacity: 0;
transform: translateY(10px) scale(0.98);
}
to{
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 900px){
.adm-form-grid{
grid-template-columns: 1fr;
}

.adm-info-grid{
grid-template-columns: 1fr;
}

.adm-search-wrap{
min-width: 100%;
}

.adm-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px){
.adm-shell{
padding: 14px;
}

.adm-title{
font-size: 24px;
}

.adm-card{
padding: 14px;
border-radius: 18px;
}

.adm-modal{
border-radius: 18px;
}

.adm-modal-header,
.adm-modal-footer,
.adm-modal-body{
padding: 16px;
}

.adm-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
}

/* REPORTES - FILTROS */
.title_modal_filters{
text-align: center;
margin-bottom: 20px;
font-weight: bold;
}
.title_img_filters{
width: 40px;
height: auto;
}

/* Tarjeta + layout en columnas para TODOS los filtros (fecha y multiselect) */
.filter-card,
.fill_multi-filter {
display: inline-block;
vertical-align: top;
width: 31%;
box-sizing: border-box;
padding: 10px 14px;
margin: 0 8px 12px 0;
background: #ffffff;
border-radius: 10px;
border: 1px solid #e5e7eb;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

/* Responsivo: 2 por fila en pantallas medianas */
@media (max-width: 992px) {
.filter-card,
.fill_multi-filter {
width: 48%;
}
}

/* Responsivo: 1 por fila en móviles */
@media (max-width: 576px) {
.filter-card,
.fill_multi-filter {
width: 100%;
margin-right: 0;
}
}

/* === MULTISELECT === */
.fill_multi-filter {
position: relative;
}
.fill_multi-filter .fill_ms-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 130px;
overflow-y: auto;
background: #fff;
border: 1px solid #ddd;
border-top: none;
z-index: 1000;
list-style: none;
margin: 0;
padding: 0;
font-size: 10px;
}
.fill_multi-filter .fill_ms-suggestions li {
padding: 8px;
cursor: pointer;
}
.fill_multi-filter .fill_ms-suggestions li:hover {
background: #f0f0f0;
}
.fill_multi-filter .fill_ms-selected-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
}
.fill_multi-filter .fill_ms-tag {
background: #e9ecef;
padding: 4px 8px;
border-radius: 12px;
font-size: 10px;
display: flex;
align-items: center;
}
.fill_multi-filter .fill_ms-tag .fill_remove-tag {
margin-left: 6px;
cursor: pointer;
font-weight: bold;
}
.filter-card .form-label,
.fill_multi-filter .form-label {
font-size: 12px;
font-weight: 600;
color: #4b5563;
margin-bottom: 4px;
}
.filter-card .form-control,
.fill_multi-filter .form-control {
font-size: 13px;
height: 34px;
padding: 4px 8px;
border-radius: 8px;
}