/* Colors */
body {
   --Yellow:#fde98a; --Rose:#fec8ac;
   --Link:#3366BB; --SubmitButton:#1977bd; --Button:#ddd;
   --Head:rgba(89,119,141,0.9); --SubHead:#658fae;
   --MuestrarioIcon:var(--SubmitButton);
}

:root {
   --safe-bottom: env(safe-area-inset-bottom, 0px);
   /* Notch / Dynamic Island / status bar area (iOS with viewport-fit=cover) */
   --safe-top: env(safe-area-inset-top, 0px);
   --safe-left: env(safe-area-inset-left, 0px);
   --safe-right: env(safe-area-inset-right, 0px);
}

/* Basic styles */
html { height:100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { min-height:100%; position:relative; margin:0; padding-top: 70px; padding-top:calc(70px + var(--safe-top)); padding-left:var(--safe-left); padding-right:var(--safe-right); font-size: 14px; }
@media (max-width:768px) {
   body { min-height:100vh }
}
body.modal.scroll.touch { overflow-y:hidden }
body.agent .customersOnly { display:none !important }
body:not(.agent) .agentsOnly { display:none !important }
body.hidePvp .pvp { display:none !important }
body, dialog, header, footer, section, form, aside { box-sizing:border-box }
table { width:100% }
hr { clear:both }
img { -webkit-user-drag:none }
span.block, div.inline { display:inline-block }
[hidden] { display:none !important }
.float { float:right }

html:not(.ready) { display:none }
html.wait > body:not(.modal):before { content:""; position:absolute; z-index:100; left:0; right:0; top:0; height:100vh; background:rgba(255,255,255,0.67) url(../img/loading.gif) no-repeat center }
html.wait > body > dialog[open]:before { content:""; position:absolute; z-index:100; left:0; right:0; top:0; bottom:0; background:rgba(255,255,255,0.67) url(../img/loading.gif) no-repeat center }

body.touch :focus, [tabindex="-1"]:focus, summary:focus { outline:none }
summary { cursor:pointer; text-decoration:underline }
details > div { margin:0.75em 0 0 1em }

/* Styles when runnig as public (embedded in USA website) */
body.public { min-height:0; padding:0 }
body.public .private { display:none !important }

/* Base font style and line height */
html, input, textarea, button { font-family:sans-serif }
html { font-size:15.5px }
@media (max-width:550px), (max-height:550px) {
   html { font-size:15px }
}
@media (max-width:400px), (max-height:400px) {
   html { font-size:14.5px }
}
input[type="checkbox"] { font-size:inherit }
output.control { display:inline-block }
button { font-size:14px; white-space:nowrap; overflow:hidden }
h1, h2, h4, a.title, span.title { user-select:none; font-family:"Century Gothic","Lucida Sans Unicode",sans-serif; color:Black; font-weight:normal }

/* Translated content */
s { text-decoration:none }
[data-docid] a { color:#2380a6 }
[data-docid] a:hover { text-decoration:none !important; border-bottom:1px dotted }

/* Links, labels and form controls */
a, label, input, textarea { box-sizing:border-box }
a, label, button { user-select:none }
label { cursor:inherit }

a { color:Black; text-decoration:none }
a.disabled { opacity:0.5; pointer-events:none }
body.web a[href^="tel:"] { pointer-events:none }

b, .bold:not(button) { color:#444 }
.bold:not(button) { font-weight:bold }

.width-100 { width:100% !important }
.width-75 { width:75% !important }
.width-50 { width:50% !important }

fieldset { margin:0; padding:0; border:none }
fieldset:disabled label :not(input):not(select), label.disabled :not(input):not(select) { opacity:0.5 }
fieldset:disabled label[data-icon]:before, label.disabled[data-icon]:before { opacity:0.5 }
label input[type="checkbox"]:disabled + * { opacity:0.5 }
label.checkbox { display:inline-block; padding:5px 0; cursor:pointer }

button { background-color:var(--Button); border:2px outset #ddd; padding:0; /*padding:0 6px;*/ }
button:active { border-style:inset }
button:enabled, input[type="checkbox"]:enabled { cursor:pointer }
input[type="checkbox"], input[type="radio"] { width:1.1em; height:1.1em; margin:0 0.25em 0 0; vertical-align:middle }
input[type="date"] { text-align:center }
input.field { border: none; border-bottom: 1px solid black; outline: none }
@media (max-width:1200px) {
   input.field { max-width: 125px; }
}
@media (max-width:1380px) {
   input.field { max-width: 120px; }
}
@media (min-width:1400px) {
   input.field { width: 160px; }
}
textarea { border:1px solid #757575 }
input.field:not([type="date"]) { padding:5px 0 5px 0.4em }
textarea { padding:4px 6px }
input[list] { padding-right:0 }
select { padding:4px; border:1px solid #a8a8a8 }
option[disabled] { display:none }
option.italic { font-style:italic }
textarea { resize:none }
#clients-header { border:none!important }
#header-separator { border:1px solid #b0b0b0; margin-bottom: 1% }
#header-client-count { display: flex; justify-content: space-between; align-items: center; margin-bottom: -2% }
#bottom-filter { display: flex; justify-content: space-between; align-items: center }
@media (max-width:1200px) {
   #bottom-filter { justify-content: space-between; flex-wrap: wrap-reverse; }
}
@media (max-width:550px) {
   #bottom-filter { justify-content: space-evenly; flex-wrap: wrap-reverse; }
}
#categoriasSelect { margin-left: 20px }
#hidden-container { display: none }
@media (max-width:1200px) {
   #hidden-container { display: inline-block; width: 150px }
}
@media (max-width:550px) {
   #hidden-container { display: none }
}
#goBackButton { width:50px; display: none; font-size:22px; }
#goBackButton::before { font-size: 22px; }

/* Metal colors */
.color span[data-value] { display:inline-block; padding:0 5px }
.color [data-value="W"], .color [data-value="WH"], .color option[value="W"], .color option[value="WH"] { background-color:White }
.color [data-value="Y"], .color [data-value="YE"], .color option[value="Y"], .color option[value="YE"] { background-color:var(--Yellow) }
.color [data-value="P"], .color [data-value="RO"], .color option[value="P"], .color option[value="RO"] { background-color:var(--Rose) }

/* Material Icons styles */
@font-face {
   font-family: 'Material Icons';
   font-weight: bold;   /* bold selects filled icons */
   src: url(../fonts/MaterialIcons.woff2) format('woff2');
}
@font-face {  /* weight:bold for filled */
   font-family: 'Material Icons';
   font-weight: normal; /* normal selects outlined icons */
   src: url(../fonts/MaterialIcons-Outlined.woff2) format('woff2');
}

[data-icon]:before { content:attr(data-icon) }
[data-icon-after]:after { content:attr(data-icon-after) }
[data-icon]:before, [data-icon-after]:after {
   font-family: 'Material Icons';
   font-size: 24px;     /* preferred icon size */
   font-weight: bold;   /* filled icons by default */
   font-style: normal;
   text-transform: none;
   display: inline-block;
   line-height: 1;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
   -webkit-font-smoothing: antialiased; /* support for all WebKit browsers */
   text-rendering: optimizeLegibility;  /* support for Safari and Chrome */
   -moz-osx-font-smoothing: grayscale;  /* support for Firefox */
   font-feature-settings: 'liga';       /* support for IE */
}

[data-icon]:before, [data-icon-after]:after { vertical-align:-25% }
[data-icon]:not(a):before { color:#444 }

[data-icon="more_horiz"]:before { background-color:rgba(0,0,0,0.1); border-radius:5px }
[data-icon="more_horiz"]:hover:before { background-color:rgba(0,0,0,0.15) }

/* Regular links and buttons with link appearance (with optional icon before) */
a.link[href], button.link { color:var(--Link) }
a.link[href].dark, button.link.dark { color:var(--Link) }
button.link { font-size:1rem; border:none; background-color:transparent }
.link.underline { text-decoration:underline }
a.link[href]:hover, button.link:enabled:hover { text-decoration:underline }
button.link:disabled { color:#333; opacity:0.5 }

/* Icons on paragraphs and links */
p[data-icon]:before, .link[data-icon]:before { margin-right:0.25em }
.link[data-icon]:before, .link[data-icon-after]:after { text-align:center; color:inherit }
a.link[data-icon]:not([href]):before, a.link[data-icon-after]:not([href]):after { color:#444 }

/* Icon-only buttons */
button.icon { padding:0; background-color:transparent; border:none }

/* Regular text buttons (with optional icon) */
button.button { height:39px; line-height:35px; padding:0 11px; vertical-align:top; border-radius:10px }
button.button:not(:empty) { min-width:140px }
button.button:disabled, button[data-icon]:disabled { opacity:0.5 }
button.button:not(.light):enabled:hover { opacity:0.9 }
button.button.normal { color:var(--SubmitButton); border:2px solid var(--SubmitButton); background-color:transparent }
button.button.light { color:#444; border:2px solid #777; background-color:White }
button.button.light[data-icon]:before { color:#555 }
button.button.light:enabled:hover { background-color:#eee }
button.button.red { color:#a22; border:2px solid #c55; background-color:White }
button.button.red:hover { background-color:#fdd }
button.button.red[data-icon]:before { color:#a22 }
button.button.bold { color:White; border:2px solid var(--SubmitButton); background-color:var(--SubmitButton) }
button.button[data-icon]:empty:before, button.button[data-icon-after]:empty:after { vertical-align:middle }
button.button[data-icon]:not(:empty) { padding-left:9px }
button.button[data-icon-after]:not(:empty) { padding-right:9px }
button.button[data-icon]:before, button.button[data-icon-after]:after { line-height:inherit; color:inherit }
button.button[data-icon]:not(:empty):before { float:left; margin-right:5px }
button.button[data-icon-after]:not(:empty):after { float:right; margin-left:5px }
button.button.small { height:32px; line-height:30px; border-width:1px; border-radius:8px; border-color:#666 }

button.show-more { width:350px; max-width:100%; height:39px; color:#333; background-color:transparent; border:1px solid #666 }
button.show-more:hover, button.show-more:active { background-color:#eee }

/* Toggle buttons */
button.checkbutton { width:30px; height:30px; padding:0; vertical-align:middle; margin-right:18px; border-width:1px; border-color:#ccc; border-radius:5px }
button.checkbutton[data-icon]:before { font-size:22px }
button.checkbutton.active[data-icon]:before { color:var(--Link) }
button.checkbutton:active, button.checkbutton.active { background-color:#dec }
button.checkbutton.active { border-style:inset }
@media (max-width:370px) {
   button.checkbutton { width:25px; height: 25px; margin-right: 10px; margin-bottom: 20px }
}

section { position:relative; margin:0 auto; min-width:320px }
section h1 { display:none }
section h2 { font-size:1.3em }
section .buttons { text-align:center; padding:20px 0 }

/* Normal dialogs */
dialog { border:none !important; position: fixed; top: 50%; left: 50%; transform:translate(-50%, -50%); padding:0; margin: 0; max-width:100%; overflow:auto; color:Black; box-shadow:6px 6px 8px rgba(0,0,0,0.5) }
dialog::backdrop { background-color:rgba(0,0,0,0.5) } /* unknown pseudo-element makes Safari throw the rule */
dialog + .backdrop { background-color:rgba(0,0,0,0.5) }
dialog > a.close { position:absolute; top:15px; right:15px; z-index:1; width:40px; height:40px; text-align:center; border-radius:40px; color:#444; background-color:White }
dialog > a.close:hover { opacity:0.75 }
dialog > a.close[data-icon]:before { line-height:40px; font-size:36px }
dialog h2 { position:relative; margin:0; padding:35px 0 30px; text-align:center; font-size:1.48rem }
dialog header h2 { padding-bottom:7px; position:relative }
dialog header h3 { margin:0; padding-bottom:15px; text-align:center; font-size:1.1rem; font-weight:normal }
dialog h2[data-icon]:before { position:absolute; left:-5px; top:25px; font-size:42px; font-weight:normal; color:#999 }
dialog input.field, dialog select { height:32px }

dialog .buttons { margin:1em 0 1.25em; padding:12px 0; text-align:center }
dialog .buttons button { margin:4px 15px }
@media (max-width:549px) {
   dialog .buttons button { margin:10px }
   dialog .buttons button:not([data-icon]):not([data-icon-after]) { min-width:125px }
}

dialog > .scroll { box-sizing:border-box; overflow-x:auto; overflow-y:auto }
dialog > .scroll nav.buttons { position:sticky; position:-webkit-sticky; bottom:0; margin:0; padding-bottom:var(--safe-bottom); background-color:White; border-top:1px solid #aaa }

dialog, dialog > .scroll { max-height:100vh; max-height:calc(100vh - var(--safe-top) - var(--safe-bottom)) }
@media (min-height:700px) {
   dialog, dialog > .scroll { max-height:95vh }
}

dialog .selection-table { border-spacing:0 }
dialog .selection-table thead td { position:sticky; position:-webkit-sticky; top:0 }
dialog .selection-table thead td { background-color:White; padding:2px 0; font-size:0.78rem; color:#666; text-transform:uppercase; border-bottom:1px solid #777 }
dialog .selection-table tbody tr:not(.disabled):not(.empty) { cursor:pointer }
dialog .selection-table tbody td { vertical-align:top; padding:0; font-size:0.96rem; border-bottom:1px solid #aaa }
dialog .selection-table tbody tr:hover { background-color:#f9f9f9 }
dialog .selection-table tbody tr.selected { background-color:#e3e3e3 }
dialog .selection-table tbody tr.disabled td { color:#888 }
dialog .selection-table td.price { text-align:right; padding-right:2%; white-space:nowrap }
dialog .selection-table td.value { text-align:center; white-space:nowrap }
dialog .selection-table td.short { width:8%; max-width:30px; overflow:hidden; text-overflow:ellipsis }
dialog .selection-table td.comment { width:45%; max-width:0 }
dialog .selection-table input[type="radio"] { margin:0 5px; vertical-align:middle }
dialog .selection-table label, dialog .selection-table td.radio, .selection-table td.link { padding:12px 0 }
dialog .selection-table label { display:block; width:100% }
dialog .selection-table a.link { width:100%; text-decoration:underline }
dialog .selection-table span[data-icon] { display:inline-block; padding-top:8px }

/* Menu and search panels */
dialog.panel { top:60px; top:calc(60px + var(--safe-top)); max-height:calc(100vh - 60px); max-height:calc(100vh - 60px - var(--safe-top) - var(--safe-bottom)); z-index:20; transform:none; width:280px; height:auto; user-select:none; background-color:#ececec; border:1px solid #aaa; box-shadow:3px 5px 4px rgba(0,0,0,0.25) }
dialog.panel:not([open]) { display:block; box-shadow:none } /* required for open/close animation to work */
dialog.panel::backdrop { background-color:transparent }
dialog.panel + .backdrop { background-color:transparent }
dialog.panel.left { left:-100%; right:auto; transition:left 0.3s }
dialog.panel.left[open] { left:0 }
dialog.panel.right { right:-100%; left:auto; transition:right 0.3s }
dialog.panel.right[open] { right:0; border-left:1px solid #ccc !important }
dialog.panel.new-search { position: fixed; top: -100%; left: 0; right: 0; width: 100%; z-index: 1; background-color: white; border: 1px solid #aaa; box-shadow: 3px 5px 4px rgba(0,0,0,0.25); box-sizing: border-box }
dialog.panel.new-search[open] { top: 0; height: fit-content; padding: 1%; padding-top: calc(1% + var(--safe-top)); padding-left: calc(1% + var(--safe-left)); padding-right: calc(1% + var(--safe-right)); animation: slideInDown; animation-duration: 0.3s }
dialog.panel.new-search .new-search-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 0px 10px 0px 10px; gap: 10px; height: auto; box-sizing: border-box;  }
dialog.panel.new-search .new-search-content .logo { max-width: 120px; max-height: 100%; object-fit: contain }
dialog.panel.new-search .new-search-content .search-bar { flex-grow: 1; margin: 0 1em; }
dialog.panel.new-search .new-search-content .search-bar input {
   width: 100%;
   margin: 0 10px;
   padding: 10px;
   border: none;
   border-bottom: 2px solid #aaa;
   outline: none;
   font-size: 20px;
   font-weight: bold;
}

#new-search-bar-separator { display: flex; flex-direction: row; align-items: center; justify-content: center }
@media (max-width:690px) {
   #advancedSearchButton { font-size: 13px; }
}
@media (max-width:690px) and (max-height: 670px) {
   #advancedSearchButton { font-size: 13px; }
}

@media (max-width:600px) {
   dialog.panel.new-search .new-search-content .logo { max-width: 95px; }
   #advancedSearchButton { font-size: 13px; }
   dialog.panel.new-search .new-search-content .search-bar input { font-size: 18px; }
}
@media (max-width:540px) {
   dialog.panel.new-search .new-search-content { justify-content: center; }
}
@media (max-width:540px) and (min-height: 920px) {
   dialog.panel.new-search .new-search-content { justify-content: center; }
}
@media (max-width:540px) and (max-height: 780px) {
   dialog.panel.new-search .new-search-content { justify-content: center; }
}
dialog.panel.new-search .new-search-content button[name="newBarcode"] { width:35px; height: 35px; border:1px solid #777; border-radius:6px; background-image:url(../img/buttons/icon-barcode.png); background-color:white; background-repeat: no-repeat; background-size: cover }
dialog.panel.new-search .new-search-content button[name="advancedSearch"] { width:35px; height: 35px; border:1px solid #777; background-color:white; border-radius:6px }
#new-search-bar-results { color: gray; text-align: center; }
#advancedSearchButton { display: flex; justify-content: center; align-items: center; width: 100%; padding: 5px }
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
    #new-search-panel {
        max-height: 10vh !important;
    }
}
.center-container-pieces { display: flex; justify-content: center; align-items:center }
#more-button-pieces { width: 30%; background-color: white; border: 2px solid #bbb; padding: 15px; color: #5e5e5e; display: inline-block }
.block-fields { width:600px; max-width:100% }
.block-fields .control { width:260px }
.block-fields small { display:block; font-size:0.78em }
.block-fields label { display:block; margin:8px 0; font-size:0.96em; white-space:nowrap }
.block-fields label.tight { margin-top:0 }
.block-fields label:not(.checkbox) > :first-child:not(:empty):after { content:":" }
.block-fields label:not(.checkbox) > :first-child.required:before { content:"*\200A" }
.block-fields output { display:inline-block; white-space:nowrap; color:#444; font-weight:bold }
.block-fields output b, .block-fields output i { font-weight:normal }
.block-fields input.field, .block-fields textarea, .block-fields select { font-size:0.96em }
.block-fields textarea { height:3em; vertical-align:top }
.block-fields button { width:auto }
.block-fields i[data-icon] { display:inline-block; margin-left:5px }
.block-fields i[data-icon]:before { color:#555 }
.block-fields .input-with-options { position:relative; display:inline-block; vertical-align:top }
.block-fields .input-with-options input { position:absolute; top:0; left:0; width:210px; height:100%; border-right:0; border-top-right-radius:0; border-bottom-right-radius:0 }
.block-fields .input-with-options select { display:block; width:100% }
@media (max-width:549px) {
   .block-fields { padding-left:8%; padding-right:8% }
   .block-fields .control { width:100% }
   .block-fields small { margin-left:8px; width:240px }
   .block-fields label:not(.checkbox) > :first-child { display:block; width:auto; line-height:2; text-align:left }
}
@media (min-width:550px) {
   .block-fields label:not(.checkbox) > :first-child { display:inline-block; width:230px; line-height:32px; text-align:right; vertical-align:top }
   .block-fields output.control { padding-top:9px; width:300px }
   .block-fields small { margin-top:8px; padding-left:234px; width:270px }
}

.inline-fields label { display:inline-block }
.inline-fields label > :first-child { display:block }

section span > a.download { position:absolute; bottom:5px; right:12px; width:40px; height:40px; background:url(../img/buttons/vlg/download.png) no-repeat center }
body.mouse section span a.download, body.app section span a.download { display:none }
body.mouse section span:hover a.download { display:block }

div.gallery { padding-top:100px; padding-bottom:90px; text-align:center }
div.gallery.columns div { padding-left:24px; padding-right:24px; column-width:240px; column-gap:24px }
div.gallery.columns a.img img { width:100% }
div.gallery.flowed span { margin-left:12px; margin-right:12px }
div.gallery.flowed a.img img { width:272px }
div.gallery span { display:inline-block; position:relative; margin-bottom:24px }
div.gallery a.img { display:block; border-radius:10px; overflow:hidden; box-shadow:1px 1px 4px #999 }
div.gallery a.img img { display:block; cursor:zoom-in }
div.gallery a.img:hover { opacity:0.9; box-shadow:2px 2px 4px #888 }

div.gallery > a.download { display:block; position:relative; top:-35px; margin:0 auto; width:94px; height:35px; line-height:27px; padding:4px 12px; text-transform:uppercase; color:#333; border:1px solid #ccc; border-radius:9px }
div.gallery > a.download:hover { border-color:#666 }
body.app div.gallery > a.download { display:none }

/** App header */
body > header { position: fixed; width: 100%; top:0; left:0; overflow:visible; z-index:10; text-align:center; box-shadow: 0 1px 10px rgba(0,0,0,0.33); padding:var(--safe-top) var(--safe-right) 0 var(--safe-left); background-color:White }
body > header > nav { height:60px; padding:0 10px; background:white; overflow:hidden }
body > header h1 { float:left; margin:0; width:0; white-space:nowrap; font:1.3rem/60px "Century Gothic",sans-serif }
body > header a.logo { display:inline-block; height:100%; padding:2px 0; }
body.closeout > header a.logo { pointer-events:none }
body > header a.logo img { height:100%; vertical-align:top }
body > header a.logo img { object-fit: contain }  /* fixes problem with automatic width in Safari */
body > header a.nav { position:relative; z-index:1; text-align:center; width:70px; height:100%; background-color:transparent; }
body > header a.nav[href]:hover { color:var(--Link) }
body > header a.nav.active { color:var(--Link); pointer-events:none; border-bottom:3px solid var(--Link) }
#menu-panel[open] ~ header a.nav.menu, #search-panel[open] ~ header a.nav.search, body > header a.nav.search.open { background-color:#ececec }
body > header a.left { float:left }
body > header a.right { float:right }
body > header a.left.sep { margin-left:2% }
body > header a.right.sep { margin-right:2% }
body > header a[data-icon] { color:#444 }
body > header a[data-icon]:before { font-size:30px; line-height:60px }
body > header a.menu[data-icon]:before { font-size:28px }
body > header a.back { width:50px }
body:not(.listing-page) > header a.back, body.closeout > header a.back { visibility:hidden }
body > header a.back[data-icon]:before { position:relative; left:6px; font-size:22px }
body:not(.agent) > header a[data-icon="group"] { display:none }
body.agent > header a[data-icon="pending_actions"] { display:none }
body > header a.order span { position:absolute; top:2px; right:8px; min-width:16px; height:17px; padding:0 1px; font:11px/18px sans-serif; color:White; background-color:#06c; border-radius:12px; border:1px solid White }
body > header a.order span:empty:before { content:"0" }
body > header a.order span.disabled { background-color:#bbb }
body:not(.offline) > header a.offline { visibility:hidden }
body.web > header a.offline { visibility:hidden; width:2% }
body > header a.offline[data-icon]:before { font-size:24px; color:#c99859 }
@media (max-width:700px) {
   body > header a[data-icon="arrow_back_ios"] { display:none !important }
}
@media (max-width:550px) {
   body > header a.nav { width:35px }
   body.closeout > header a.back { display:none }
}
@media (min-width:551px) and (max-width:799px) {
   body > header a.nav { width:50px }
}
@media (max-width:1200px) {
   body > header h1 { display:none }
}
@media (max-width:799px) {
   body > header > nav { padding:0 }
   body > header h1 { font-size:18px }
   body > header a.logo { padding:12px 0 6px }
   body > header a.nav.sep { margin:0 }
   body > header a[data-icon]:before { font-size:28px }
   body > header a.order span { right:2px }
}
@media (min-width:1200px) {
   body > header > nav { padding:0 15px }
}
@media (max-width:350px) {
   body > header a.nav { width: 25px }
}

/** App footer */
body > footer { position:absolute; left:0; right:0; bottom:0; line-height:1.35; text-align:center; color:White; background-color:#555 }
body > footer a { white-space:nowrap }
body > footer a.link[href] { color:White }

body { padding-bottom:calc(85px + var(--safe-bottom)) }
body > footer { height:calc(85px + var(--safe-bottom)); padding-bottom:var(--safe-bottom); display: flex; justify-content: space-between; align-items: center }
@media (max-height:599px) {
   body { padding-bottom:calc(60px + var(--safe-bottom)) }
   body > footer { height:calc(60px + var(--safe-bottom)); padding-top:20px; padding-bottom:var(--safe-bottom) }
   body.user-login-page { padding-bottom:0 }
   body.user-login-page footer { display:none }
}
.footer-side-containers { width: 70%; }
.footer-main-container { width: 100%; }
.footer-icons { display: flex; gap: 15px; justify-content: center; align-items: center }
.icon-rrss { width: 20px; height: 20px; fill: #ffffff; transition: fill 0.3s ease }
.icon-app-store { max-height: 30px !important; max-width: 85px !important }
.icon-google-play-store { max-height: 28px !important; max-width: 95px !important }
.icon-link-rrss:hover .icon-rrss { fill: #cccccc }
body.app.user-login-page { padding-bottom:0 }
body.app.user-login-page footer { display:none }

/* Centers page content vertically (between header and footer) */
section.vcenter { position:absolute; left:0; right:0; top:48%; transform:translateY(-50%) }
section.vcenter:not([hidden]) { padding-bottom:inherit }

/* Styles for views (pages and dialogs) */

#menu-panel { padding-top:8px; font-size:15px; width: 330px; }
#menu-panel [data-icon]:before { width:50px; text-align:center; font-size:21px; color:#555 }
#menu-panel .item { border-bottom:1px solid #ddd }
#menu-panel .item:first-child { border-top:1px solid #ddd }
#menu-panel a[href], #menu-panel summary { display:block; padding-left:10px }
#menu-panel > a, #menu-panel summary { line-height:56px }
#menu-panel details a { line-height:46px; text-transform:uppercase }
.item.regular.balance a { text-transform:none !important }
#menu-panel a:hover, #menu-panel summary:hover { background-color:rgba(0,0,0,0.05) }
#menu-panel summary { list-style:none; text-decoration:none }
#menu-panel summary::-webkit-details-marker { display:none }
#menu-panel details summary[data-icon-after] { position:relative }
#menu-panel details summary[data-icon-after]:after { content:"expand_more"; position:absolute; right:16px; top:0; line-height:60px; font-size:28px; color:#666 }
#menu-panel details[open] summary[data-icon-after]:after { content:"expand_less" }
#menu-panel a:not([data-icon]) { padding-left:60px }
#menu-panel > small { display:block; text-align:right; color:#555; padding:2px 15px; font-size:11px }

body.closeout #menu-panel > .item:not(.closeout) { display:none }
body:not(.closeout) #menu-panel > .item:not(.regular) { display:none }
body:not(.agent) #menu-panel > [data-icon="group"] { display:none }
body.agent #menu-panel > [data-icon="pending_actions"] { display:none }

#settings-dialog { padding:0; width:min(620px,calc(100vw - 24px)); max-width:100%; background:linear-gradient(180deg,#f8fafc 0%,#f3f6f9 100%); border:1px solid #e3eaf0; border-radius:14px; box-shadow:0 14px 42px rgba(22,54,75,.14); overflow:hidden }
#settings-dialog h2 { padding:18px 24px 14px; margin:0; color:#37474f; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px; font-size:1.1rem; font-weight:600; background:rgba(255,255,255,.55); border-bottom:1px solid #e3eaf0 }
#settings-dialog .settings-form { padding:16px 20px 18px; margin:0 }
#settings-dialog .settings-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:14px; align-items:stretch }
#settings-dialog .settings-body.settings-body--without-sales { grid-template-columns:minmax(0,1fr) }
#settings-dialog .settings-column { display:flex; flex-direction:column; gap:12px; min-width:0 }
#settings-dialog .settings-body:not(.settings-body--without-sales) .settings-column--general .settings-block--pricing { flex:1 1 auto }
#settings-dialog .settings-block { padding:14px; background:rgba(255,255,255,.72); border:1px solid #e3eaf0; border-radius:10px }
#settings-dialog label { display:block }
#settings-dialog label, #settings-dialog summary { height:auto; line-height:1.35 }
#settings-dialog select { background-color:#fff; border:1px solid #cfd8dc; border-radius:6px; padding:6px 8px; color:#333; font-size:13px }
#settings-dialog input.field { border:1px solid #cfd8dc; border-radius:6px; padding:6px 8px; background:#fff }
#settings-dialog input.settings-field-control--number { width:88px; text-align:center }
#settings-dialog [data-icon]::before { vertical-align:-15% }
#settings-dialog [data-icon]:not(a)::before { color:#607d8b }
#settings-dialog .settings-section-title { margin:0 0 10px; padding:0; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#78909c; text-align:left }
#settings-dialog .settings-inline-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px }
#settings-dialog .settings-field-row { display:flex; flex-direction:column; align-items:stretch; gap:5px; margin:0; text-align:left; white-space:normal }
#settings-dialog .settings-field-row--inline { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding-top:10px; border-top:1px solid #e8eef3 }
#settings-dialog .settings-field-row--inline .settings-field-control--number { width:88px; flex:0 0 88px }
#settings-dialog .settings-field-label { font-size:12px; font-weight:600; color:#455a64; line-height:1.25 }
#settings-dialog .settings-field-control { width:100%; max-width:none; box-sizing:border-box; min-height:34px }
#settings-dialog .settings-pricing-row { display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:2px }
#settings-dialog .settings-toggle { display:flex; align-items:center; gap:8px; min-height:32px; margin:0; padding:0; white-space:normal; cursor:pointer; font-size:13px; color:#37474f }
#settings-dialog .settings-toggle input[type="checkbox"] { flex-shrink:0; width:15px; height:15px; margin:0; accent-color:#1977bd }
#settings-dialog .settings-column--sales .settings-field-row { margin-top:10px; padding-top:10px; border-top:1px solid #e8eef3 }
#settings-dialog #muestrario-agent-selector[hidden], #settings-dialog #muestrario-agent-sales[hidden] { display:none }
#settings-dialog .settings-date-range { margin-top:10px; padding-top:10px; border-top:1px solid #e8eef3 }
#settings-dialog .settings-date-heading { display:block; margin-bottom:8px; font-size:12px; font-weight:600; color:#455a64; line-height:1.25; text-align:left }
#settings-dialog .settings-date-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px }
#settings-dialog .settings-date-group { display:flex; flex-direction:column; gap:5px; min-width:0 }
#settings-dialog .settings-date-label { font-size:12px; color:#607d8b; text-align:left; line-height:1.2 }
#settings-dialog .settings-date-selects { display:grid; grid-template-columns:42px minmax(74px,1fr); align-items:center; gap:6px }
#settings-dialog .settings-date-selects select { min-width:0; width:100%; box-sizing:border-box }
#settings-dialog .settings-date-selects select[id$="year"] { min-width:74px; padding-right:22px }
#settings-dialog .settings-date-clear { display:inline-block; margin-top:8px; padding:0; border:none; background:transparent; color:#1977bd; font-size:12px; font-weight:600; cursor:pointer; text-align:left; border-radius:4px; transition:color .15s ease }
#settings-dialog .settings-date-clear:hover { color:#125a94; text-decoration:underline }
#settings-dialog .settings-actions { margin-top:14px; padding-top:0 }
#settings-dialog .settings-actions .button { min-width:140px }
body:not(.agent) #settings-dialog .settings-body { grid-template-columns:1fr }
@media (max-width:640px) {
   #settings-dialog { width:calc(100vw - 16px) }
   #settings-dialog .settings-body { grid-template-columns:1fr }
   #settings-dialog .settings-inline-fields { grid-template-columns:1fr }
   #settings-dialog .settings-date-grid { grid-template-columns:1fr }
}

@media (max-width:549px) {
   #user-info-dialog .block-fields label { padding-bottom:10px; border-bottom:1px solid #ccc }
   #user-info-dialog .buttons button[name="back"] { display:none }
}
@media (min-width:550px) {
   #user-info-dialog .block-fields label > :first-child { width:200px }
}

body.user-login-page > header { display:none }
body.user-login-page > footer .links { display:none }
#user-login-page { text-align:center }
#user-login-page img, #user-login-page form { vertical-align:middle }
#user-login-page img { display:inline-block; width:250px; height:250px; object-fit:contain }
#user-login-page form { display:inline-block; box-sizing:border-box; width:320px; padding-left:60px; text-align:left }
#user-login-page h2 { margin:0 0 20px 0 }
#user-login-page input, #user-login-page button { margin:5px 10px 5px 0 }
#user-login-page input { width:150px }
#user-login-page button[name="login"] { width:32px; height:30px; padding:0; border:none; vertical-align:bottom; background-color:var(--SubmitButton); border-radius:7px }
#user-login-page button[name="login"][data-icon]:before { color:White }
#user-login-page button[name="sendPassword"] { display:block; margin:20px 0 0 }
body.wait #user-login-page button[name="sendPassword"] { visibility:hidden }
#user-login-page output { display:block; margin:5px 0; color:#f33 }
#login-app-version { display:none; position:fixed; left:0; right:0; bottom:8px; text-align:center; font-size:11px; color:#999; pointer-events:none; z-index: 50 }
body.user-login-page #login-app-version { display:block }
@media (max-width:500px), (max-height:767px) {
   #user-login-page img { width:210px; height:210px }
}

/*@media (min-height:700px) and (min-width:600px) {
   body.main-page > header > nav { height:100px }
   body.main-page > header a.logo { padding:20px 0 5px }
   body.main-page > header a.nav { margin-top:40px }
   body.main-page > dialog.panel { top:100px; max-height:calc(100vh - 100px) }
}*/
body.main-page > header a[data-icon="arrow_back_ios"] { opacity:0; pointer-events:none }
#main-page { text-align:center }
#main-page a.title > img { object-fit:contain; background-color:#f3f3f3; opacity:1; transition:opacity 220ms ease-out }
#main-page a.title > img.instant-loaded { transition:none }
#main-page a.title > img.loading { opacity:0 }
#main-page a.title > img.loaded { opacity:1 }
#listing-page { padding-bottom:40px }
#listing-page button#review-order { width:260px }
#listing-result-bar { margin:0; margin-bottom: 25px; padding:20px 0; text-align:center; color:#555; border-bottom:1px solid #ccc }
#listing-result-bar a { margin-left:20px; font-size:0.96rem }
#listing-result-bar a[data-icon]:before { font-size:1em }
#listing-result-bar label { margin-left:40px }
#listing-result-bar input[type="checkbox"] { margin:0 2px 0 0; vertical-align:-3px }
#listing-packs label { display:block; position:relative; max-width:800px; margin:35px auto; line-height:1 }
#listing-packs label > input[type="checkbox"] { position:absolute; top:21px; width:22px; margin:0; height:22px }
#listing-packs label > span { display:block; border:1px solid #ccc; border-radius:12px }
#listing-packs label > span:hover { border-color:#aaa }
#listing-packs label > input[type="checkbox"]:checked + span { border-color:var(--Link) }
@media (max-width:767px) {
   #listing-packs { margin:0 5px }
   #listing-packs label > span { padding:20px 10px 20px 42px }
   #listing-packs label > input[type="checkbox"] { left:10px }
}
@media (min-width:768px) {
   #listing-packs { margin:0 30px }
   #listing-packs label > span { padding:20px 15px 20px 165px; white-space:nowrap; background-color:White; background-repeat:no-repeat; background-position:left top; background-size:auto 100% }
   #listing-packs label > input[type="checkbox"] { left:132px }
}
#listing-page h3, #listing-page h3 label { background:var(--SubHead) }
#listing-page h3 { margin:40px 30px 20px 30px; padding:8px 0 6px; text-align:center; color:White }
#listing-page h3 span { text-transform:uppercase; letter-spacing:4px; font:1.2rem/1 "Century Gothic","Lucida Sans Unicode",sans-serif }
#listing-page h3 label { float:right; padding:0 15px 5px 15px; border-radius:10px }
#listing-page h3 label s { font-size:0.96em; line-height:20px }
#listing-page h3 label input[type="checkbox"] { margin:0 0 0 5px; vertical-align:bottom }
#listing-page h3 + p.listing-intro { margin:-20px 30px 20px 30px }
#listing-page p.listing-intro { margin:0 0 2em; padding:15px 0; text-align:center; background-color:#e9e9e9 }
#listing-page p.listing-intro[data-icon]:before { margin-right:15px; font-size:28px }
#listing-page p.listing-intro[data-icon]:before { width:28px; height:28px; background-size:28px }
#listing-page p.listing-intro.plaingold[data-icon]:before { background-image:url(../img/buttons/facet/icon-recycle.png) }
#listing-page p.listing-intro a { white-space:nowrap }
#listing-page ul { margin:1em 0 2em }
#listing-page .subgroup-separator { height: 20px; background: var(--SubHead); margin: 0; text-align: center; color: white; line-height: 20px;}
#listing-page .subgroup-comment { padding: 10px 15px; }
@media (min-width:768px) {
   #listing-page .subgroup-separator {margin: 40px 30px 20px 30px; }
   #listing-page .subgroup-comment { padding: 0; }
}

body.mouse #listing-page li.item input[type="checkbox"]:not(:checked) { opacity:0.8 }
body.mouse #listing-page li.item label:hover input[type="checkbox"] { opacity:1 }

.listing-view del { text-decoration: none; position: relative; }
.listing-view del::before { top: 50%; background:red; opacity:.9; content: ''; width: 110%; position: absolute; height:.1em; border-radius:.1em; left: -5%; white-space:nowrap; display: block; transform: rotate(-15deg); }
.listing-view ul { list-style-type:none; padding:0; text-align:center }
.listing-view li.item { position:relative; display:inline-block; height:280px; margin:1px; text-align:center; vertical-align:middle; overflow:hidden; background-color: white; border-radius: 30px; content-visibility:auto; contain-intrinsic-size:294px 280px }
.listing-view li.bigger { height: 320px }
.listing-view li.item.disabled { pointer-events:none; opacity:0.5 }
.listing-view li.item[data-icon]:before, .listing-view li.item[data-icon-after]:after { position:absolute; right:8% }
.listing-view li.item[data-icon]:before { top:15px; z-index:1; font-size:28px; color:var(--Link) }
.listing-view li.item[data-icon-after]:after { top:15px; color:#888 }
.listing-view li.item[data-icon-after="work_outline"]:after { right:54px; top:14px; color:var(--MuestrarioIcon); font-size:22px; filter:brightness(1.2) saturate(1.25) drop-shadow(0 0 4px rgba(25,119,189,.45)) }
.listing-view li.item[data-icon][data-icon-after]:after { top:50px }
.listing-view li.item[data-icon][data-icon-after="work_outline"]:after { top:48px; right:8%; color:var(--MuestrarioIcon); font-size:22px; filter:brightness(1.2) saturate(1.25) drop-shadow(0 0 4px rgba(25,119,189,.45)) }
#filters-form label.muestrario[data-icon="work_outline"]:before { color:var(--MuestrarioIcon) }
#filters-form label.muestrario.active[data-icon="work_outline"]:before { color:var(--MuestrarioIcon) }
.listing-view li.item > a:after { position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; border-radius:30px; pointer-events:none }
.listing-view li.item > a:hover:after { content:""; border:5px solid rgba(87,87,87,0.075) }
.listing-view li.item > a:focus { outline:none }
.listing-view li.item > a:focus:after { content:""; border:5px solid rgba(0,0,255,0.075) }
.listing-view li.item > a { position:absolute; top:0; left:0; right:0; bottom:0 }
.listing-view li.item > a:not([href]) { cursor:pointer }
.listing-view li.item img { height:225px; width:225px; max-width:100%; object-fit:contain; background-color:#f3f3f3; opacity:1; transition:opacity 220ms ease-out }
.listing-view li.item img.instant-loaded { transition:none }
.listing-view li.item img.loading { opacity:0; background-color:#fff }
.listing-view li.item img.loaded { opacity:1 }
.listing-view li.item img:hover { height:231px; margin-top:-3px }
.listing-view li.item div { position:absolute; left:0; bottom:0; margin:0; width:100%; padding-bottom:30px; text-align:center; background-color:rgba(255,255,255,0.67) }
.listing-view li.item span.feature { display:none }
.listing-view li.item span.feature.icon { position:absolute; top:8px; left:20px; width:46px; height:46px }
.listing-view ul[data-category="535"] li.item span.feature.icon {
position: absolute;
   top: 8px;
   left: 40px;
   width: 33px;
   height: 35px;
}
.listing-view ul[data-category="1535"] li.item span.feature.icon {
   position: absolute;
   top: 8px;
   left: 40px;
   width: 33px;
   height: 35px;
}
.listing-view ul[data-category="1534"] li.item span.feature.icon {
   position: absolute;
   top: 8px;
   left: 40px;
   width: 33px;
   height: 35px;
}
.listing-view ul[data-category="91"] li.item span.feature.icon {
   position: absolute;
   top: 8px;
   left: 40px;
   width: 33px;
   height: 35px;
}
.listing-view ul[data-category="515"] li.item span.feature.icon {
   position: absolute;
   top: 8px;
   left: 40px;
   width: 33px;
   height: 35px;
}
.listing-view ul[data-category="300"] li.item span.feature.icon { position:absolute; top:150px; left:238px; width:45px; height:46px }
.listing-view li.item span.feature.ribbon { position:absolute; left:-30px; top:20px; width:120px; padding:1px 0 2px; font:12px sans-serif; color:White; transform:rotate(-45deg) }
.listing-view li.item span.feature.normal { height:24px; white-space:nowrap; font-size:0.9rem; line-height:1 }
.listing-view li.item span.feature.normal[data-icon]:before { color:inherit; font-size:18px; margin-right:4px }
.listing-view li.item span.name { display:block; font-size:0.90em; line-height:1.25 }
.listing-view li.item span.name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.listing-view li.item span.name:hover { position:relative; z-index:1; width:fit-content; min-width:100%; padding-right:5px; background:White }
.listing-view li.item span.detail { font-size:0.90em; color:#555 }
.listing-view li.item span.price:not(:empty) { margin-left:20px; font-size:1.03em; font-weight:bold; color:#333 }
body:not(.closeout) .listing-view li.item span.price { font-family:Georgia,serif }
body.closeout .listing-view li.item span.price { font-family:Verdana,sans-serif; font-size:0.90rem }
.listing-view li.item label { position:absolute; right:0 }
.listing-view li.item input[type="checkbox"] { width:22px; height:22px }
@media (max-width:767px) {
   .listing-view h3, .listing-view h3 + p.listing-intro { margin-left:0; margin-right:0 }
   .listing-view li.item { width:49%; box-sizing:border-box; border-right:1px solid #ccc; border-bottom:1px solid #ccc }
   .listing-view li.item label { top:0 }
   .listing-view li.item input[type="checkbox"] { margin:35px 29px }
}
@media (max-width:650px) {
   .listing-view li.item input[type="checkbox"] { margin:35px 25px }
}
@media (max-width:500px) {
   .listing-view li.item input[type="checkbox"] { margin:35px 20px }
}
@media (min-width:768px) {
   .listing-view li.item { width:294px; margin-left:1%; margin-right:1% }
   .listing-view li.item label { top:10px }
   .listing-view li.item input[type="checkbox"] { margin:24px }
}
@media (max-width:430px) {
   .listing-view li.item input[type="checkbox"] { margin: 35px 17px }
}
@media (max-width:380px) {
   .listing-view li.item input[type="checkbox"] { margin: 35px 15px }
}
@media (min-width:768px) and (max-width:1023px) {
   .listing-view li.item.compact { width:31% }
}
@media (min-width:1024px) /*and (max-width:1199px)*/ {
   .listing-view li.item.compact { width:23%; max-width:294px }
}

#search-panel {
   overflow-x:hidden;
   font-size:0.96rem;
   max-height:calc(100vh - 60px);
   max-height:calc(100dvh - 60px);
   max-height:calc(100dvh - 60px - var(--safe-top));
   padding-bottom:env(safe-area-inset-bottom, 0px);
}

#filters-form { text-align:center; }
header #filters-form:not(.open) { display:none; }
dialog #filters-form button { font-size:0.96rem }
dialog #filters-form nobr { display:block; white-space:normal }
#filters-form .filter { height:36px; vertical-align:middle }
dialog #filters-form .filter { margin:7px 0 }
header #filters-form .filter { margin:4px 0.5% }
#filters-form .active:enabled { border-color:var(--Link) }
dialog #filters-form select, dialog #filters-form label.checkbox, dialog #filters-form hr { width:200px }
#filters-form select { border-radius:6px; padding-left:0; padding-right:0; text-align-last:center }
dialog #filters-form select { padding-left:20px; text-align-last:left }
#filters-form select.active:enabled { color:var(--Link) }
#filters-form select:not(.active):enabled:hover { border-color:#777 }
#filters-form option { color:Black }
#filters-form option.literal { font-style:italic }
#filters-form select:not(.active) option.all { display:none }
#filters-form label { display:inline-block; position:relative }
#filters-form label select { height:100% }
#filters-form label[data-icon]:before { position:absolute; left:8px; top:10px; font-size:15px; color:#666; pointer-events:none }
#filters-form label.active[data-icon]:before { display:none }
header #filters-form label[data-icon] select:not(.active) { padding-left:20px; text-align-last:left }
#filters-form label[data-icon] select.active { position:relative }
dialog #filters-form nobr.checkbox { margin-top:4px }
#filters-form label.checkbox { line-height:34px }
dialog #filters-form label.checkbox { margin:3px 0 5px; text-align:left; white-space:nowrap }
header #filters-form label.checkbox s.long { display:none }
dialog #filters-form label.checkbox s.short { display:none }
header #filters-form label.checkbox { padding-left:0.5%; padding-top:2px; font-size:0.90rem }
header #filters-form label.checkbox input { margin:0 2px 0 0 }
#filters-form label.mini { font-weight:bold; color:#666 }
dialog #filters-form label.mini { width:16px }
header #filters-form label.mini { margin-left:16px }
#filters-form input[type="number"] { width:88px; padding:0 2px; text-align: left; padding-left: 7px; font-size:0.90em }
header #filters-form input.from { margin-right:0 }
header #filters-form input.to { margin-left:0 }
dialog #filters-form .refSearch { display:block; margin:14px 0 }
header #filters-form .refSearch { float:right; margin:0 1% }

header #filters-form .lastSearchesPanelContainer {background: white; border: 1px solid gray; position: absolute; right: 0; left: 0; display: none; box-sizing: border-box; z-index: 1;}
header #filters-form .lastSearchesPanelContainer.open {display: block;}
header #filters-form .lastSearchesPanelContainer .item { padding: 10px 3px; text-align: left; overflow: hidden;}
header #filters-form .lastSearchesPanelContainer .item:hover { background: rgb(226, 226, 226); cursor: pointer;}
header #filters-form .lastSearchesPanelContainer .item.selected { background: rgb(226, 226, 226); cursor: pointer;}
header #filters-form #closeVerticalSearch { display: none }

dialog #filters-form .lastSearchesPanelContainer {background: white; border: 1px solid gray; position: absolute; right: 0; left: 8px; display: none; z-index: 1; box-sizing: border-box;}
dialog #filters-form .lastSearchesPanelContainer.open {display: block;}
dialog #filters-form .lastSearchesPanelContainer .item { padding: 10px 3px; text-align: left; overflow: hidden;}
dialog #filters-form .lastSearchesPanelContainer .item:hover { background: rgb(226, 226, 226); cursor: pointer;}
dialog #filters-form .lastSearchesPanelContainer .item.selected { background: rgb(226, 226, 226); cursor: pointer;}

#suggeredPhrase { display: block !important; font-family: sans-serif; color: #6c6c6c; text-align: center }
#suggeredWord { font-weight: bold; color: #484848 }
#suggeredWordsContainer { max-width: 80%; margin: 0 auto; background-color: #f0f0f0; padding: 1px; animation: fadeIn; animation-duration: 2s }

dialog #filters-form .searchInputContainer { position: relative;}
dialog #filters-form .filters { display:block; padding-top:10px; border-top:1px solid #ccc }
header #filters-form .filters { display:contents }
#filters-form input[name="ref"] { height:36px; font-size:0.90rem }
dialog #filters-form input[name="ref"] { width:150px; padding:0 8px; margin-left:8px }
dialog #filters-form button[name="barcode"][hidden] + label input[name="ref"] { width:200px; margin-left:0 }
header #filters-form input[name="ref"] { padding:0 18px 0 2px; text-align:center }
#filters-form input[name="ref"]:not(.active):focus { border-color:#777 }
#filters-form input[name="ref"]:disabled { font-style:italic }
body.touch #filters-form input[name="ref"]:focus { padding-right:2px }
body.touch #filters-form input[name="ref"]:focus + button { display:none }
#filters-form button[name="clearRef"] { position:absolute; top:0; right:0; width:28px; height:100% }
#filters-form button[name="clearRef"][data-icon]:before { font-size:22px }
#filters-form button[name="clearRef"][data-icon="search"]:before { opacity:0.5 }
#filters-form button[name="barcode"] { width:38px; border:1px solid #777; border-radius:6px; background:url(../img/buttons/icon-barcode.png) no-repeat center }
#filters-form button[name="barcode"]:disabled { opacity:0.4 }
header #filters-form button[name="barcode"] { margin-right:0 }
dialog #filters-form button[name="reset"] { display:block; margin:15px 0 25px; padding:0 10px 0 40px; text-align:left }
dialog #filters-form button[name="reset"][data-icon]:before { font-size:1em; width:1.6em }
dialog #filters-form button[name="search"] { width:100%; height:42px; line-height:40px; background-color:#e0e0e0; border:1px solid #ccc }
dialog #filters-form button[name="search"]:hover { background-color:#d9d9d9 }
dialog #filters-form button[name="search"][data-icon-after]:after { float:right; color:#444; line-height:inherit }
dialog #filters-form { padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)) }
header #filters-form button[name="search"], header #filters-form button[name="reset"] { display:none }
#closeVerticalSearch { width:100%; height:42px; line-height:40px; background-color:#e0e0e0; border:1px solid #ccc }
#closeVerticalSearch:hover { background-color:#d9d9d9 }
#closeVerticalSearch[data-icon-after]:after { float:right; color:#444; line-height:inherit }

#item-dialog { width:940px; font-size:0.96rem; transition: all 0.3s ease }
body.public #item-dialog { position:relative !important; top:0; width:100%; transform:none }
body.public #item-image { max-width:675px }

/* Prevent scrollbar in iframe because it's sometimes undersized by 1px */
body.public #item-dialog > .scroll { overflow-y:hidden }

#item-dialog a[href].link { text-decoration:underline }
#item-dialog a[href].link:after { font-size:1.2em }
#item-info-data a[href].link { color:#333 }
#item-dialog.icon .swipe:before { content:""; position:absolute; z-index:1 }
#item-dialog .scroll { overflow-x:hidden; padding-bottom:calc(60px + var(--safe-bottom)) }
#item-dialog .swipe { position:relative; box-sizing:border-box; right:0; overflow:hidden; padding-bottom:calc(60px + var(--safe-bottom)); }
#item-dialog .swipe.enableTransition { transition:right 0.5s }

#item-dialog span.ribbon { display:none; position:absolute; left:-40px; top:30px; width:160px; line-height:24px; text-align:center; font-size:0.95rem; color:White; transform:rotate(-45deg) }
#item-dialog.nuevo span.ribbon { display:block; background-color:#ebb134; text-transform:uppercase }
#item-dialog.bestSeller span.ribbon { display:block; background-color:var(--Link) }

#item-dialog .image { display:inline-block; position:relative; vertical-align:middle }
#item-dialog .image:before { content:""; display:block; padding-top:100% }
#item-dialog .image > img { position:absolute; top:0; left:0; width:100%; cursor:zoom-in }
#item-dialog .image.zoomed > img { object-fit:none; cursor:zoom-out }

#item-dialog aside { display:inline-block; margin-bottom:2em; vertical-align:middle; text-align:left; max-width:450px }
#item-dialog aside > label { position:relative; display:inline-block; padding:9px 10px; font-size:0.90rem; line-height:20px; border:1px solid #999; border-radius:3px }
#item-dialog aside > label.checked { border-color:var(--Link) }
#item-dialog aside > label.checked.withColor:after { content:""; pointer-events:none; position:absolute; right:-40px; top:7px; box-sizing:border-box; width:20px; height:20px; box-shadow:1px 1px 2px #888 }
#item-dialog aside > label.checked.withColor[data-color="W"]:after { background-color:White; box-shadow:1px 1px 0 inset #ddd,1px 1px 2px #888 }
#item-dialog aside > label.checked.withColor[data-color="Y"]:after { background-color:var(--Yellow) }
#item-dialog aside > label.checked.withColor[data-color="P"]:after { background-color:var(--Rose) }
#item-dialog aside > label.checked.withColor[data-color="WY"]:after { background-image:linear-gradient(to right bottom, White 50%, var(--Yellow) 50%); box-shadow:1px 1px 0 inset #ddd,1px 1px 2px #888 }
#item-dialog aside > label.checked.withColor[data-color="WP"]:after { background-image:linear-gradient(to right bottom, White 50%, var(--Rose) 50%); box-shadow:1px 1px 0 inset #ddd,1px 1px 2px #888 }
#item-dialog aside > label.checked.withColor[data-color="WYP"]:after { background-image:linear-gradient(to right, White 33.3%, var(--Yellow) 33.3%, var(--Yellow) 66.6%, var(--Rose) 66.6%); box-shadow:1px 1px 0 inset #ddd,1px 1px 2px #888 }
#item-dialog aside > label input { width:20px; height:20px; margin:0 3px 0 0; vertical-align:top }
.item-info-data { position:relative }
.item-info-data label { white-space:nowrap }
.item-info-data label > :first-child { font-size:0.78rem; color:#666; text-transform:uppercase }
.item-info-data label > :first-child:after { content:"\2009:"; font-size:0.78rem; font-weight:bold }
.item-info-data label > .capitalize { text-transform:capitalize }
.item-info-data button { float:right; margin-right:10px; position:relative; top:-8px }
#item-info-data { padding:9px 5px 9px 15px; background-color:#e9e9e9 }
#item-info-data h3 { margin:6px 0 1em 0; font-size:inherit; text-transform:capitalize }
#item-info-data label { display:block; margin:5px 0 }
#item-info-data label a:not([href]):after { content:none }
#item-info-data label.promo-price { display: none; position: relative; }
#item-info-data label.promo-price del { text-decoration: none; position: relative; }
#item-info-data label.promo-price del::before { top: 50%; background:red; opacity:.9; content: ''; width: 110%; position: absolute; height:.1em; border-radius:.1em; left: -5%; white-space:nowrap; display: block; transform: rotate(-15deg); }

#item-info-stock { text-align:center; padding-top:10px }
#item-info-ref { margin:12px 15px 20px; padding-top:1em; overflow:visible; border-top:1px solid #ddd }
#item-info-ref label { display:block }
#item-info-refs { width:100%; margin:1em 0 1.5em; border-spacing:0; color:#444; line-height:16px }
#item-info-refs thead.hide-ct-centro span { display:none }
#item-info-refs input[type="radio"] { margin:0; vertical-align:middle; height:1rem }
#item-info-refs tbody tr.selected { background-color:#e9e9e9; user-select:text }
#item-info-refs tbody tr:not(.selected) { cursor:pointer }
#item-info-refs tbody tr.selected:not(.unavailable) { color:Black }
#item-info-refs tbody tr:not(.unavailable):hover { color:Black }
#item-info-refs thead td { padding:7px 0; font-size:0.9rem; border-bottom:1px solid #777 }
#item-info-refs tbody td { padding:7px 5px 6px }
#item-info-refs td:not(:nth-child(2)) { text-align:center }
#item-info-refs tr.checked td[data-icon-after]:after { float:right; color:var(--Link); font-size:16px }
#item-info-refs tr.checked.muestrario td[data-icon-after]:after { margin-right:4px }
#item-info-refs tr:not(.checked) td[data-icon-after]:after { display:none }
#item-info-refs tr.muestrario td[data-icon]:before { float:right; color:var(--MuestrarioIcon); font-size:17px }
#item-info-refs tr:not(.muestrario) td[data-icon]:before { display:none }
#item-info-refs tr.consumida td[data-icon] { color:var(--Link); font-weight:bold }
#item-info-refs tr.unavailable { color:#c33 }
#item-metal img { vertical-align:-1px }
#item-extra { font-size:0.85rem; color:#555; margin:1em 0 0 }
#item-extra:empty { margin:0 }

body.app #item-sku, body.public #item-sku { display:none }
body.closeout #item-info-stock { display:none }
body.closeout #item-line { display:none }
body.closeout #item-subline { display:none }

#item-dialog nav { position:absolute; left:0; right:0; bottom:0; padding-bottom:var(--safe-bottom); text-align:center; line-height:60px; font-size:0.96rem; border-top:1px solid rgba(0,0,0,0.2); background-color:rgba(255, 255,255,0.8) }
#item-dialog nav button { width:60px; height:60px }
#item-dialog nav button[data-icon]:before { font-size:44px }
#item-dialog nav button:hover { background:#f2f2f2 }
#item-dialog nav button.prev { float:left }
#item-dialog nav button.next { float:right }
#item-dialog:not(.prev) nav button.prev { visibility:hidden }
#item-dialog:not(.next) nav button.next { visibility:hidden }

#item-dialog ul.tabs { display:flex; margin:0; padding:0; list-style-type:none; color:#333 }
#item-dialog ul.tabs li { flex:0 1 50%; position:relative; padding:12px 0 6px; text-align:center; border-bottom:4px solid #bbb }
#item-dialog ul.tabs li:not(:last-child) { margin-right:2px }
#item-dialog ul.tabs li.active { border-color:var(--Link) }
#item-dialog ul.tabs li:not(.active) { cursor:pointer }
#item-dialog ul.tabs li.active,
#item-dialog ul.tabs li:hover { background-color:#ececec }
#item-dialog ul.tabs li.checked:before { position:absolute; right:5px; top:10px; color:var(--Link); font-size:16px }
#item-dialog ul.tabs li:not(.checked):before { display:none }
#item-dialog ul.tabs li.unavailable span.quality { color:#c33 }
#item-dialog ul.tabs span.quality { font-weight:bold; white-space:nowrap; margin-right:8px }
#item-dialog ul.tabs span.price { font-size:0.90rem }

#item-precio { float:right; text-align:right }
body:not(.closeout) #item-precio { font:bold 18px/15px Georgia,serif }
body.closeout #item-precio { font:16px/1 Verdana,sans-serif }
body.closeout #item-precio small { display:block; font-size:14px }
#item-order-options-button { float:right; margin:2px 4px 0 0; min-width:100px; text-align:right; padding:0 10px 0 0; line-height:34px; background-color: white; border-radius: 3px; text-align: center; }
body.closeout #item-order-options-button { font-size:16px; font-family:Verdana,sans-serif; text-shadow:1px 0 0 Black }
#item-order-options-button:disabled { opacity:1; color:Black; border-color:transparent; background-color:transparent }
#item-order-options-button[data-icon]:before { margin:0 7px; vertical-align:-25%; color:#444 }
#item-order-options-button:disabled[data-icon]:before { display:none }

@media (max-aspect-ratio:1/1) and (max-width:767px) { /* vertical and small */
   #item-dialog .swipe { text-align:center }
   #item-dialog aside { width:90%; text-align:left; margin-bottom:3em }
   #item-dialog nav { border-width:2px; background-color:White }
   #item-dialog .image { width:100%; max-width:55vh }
   #item-info-data label { margin:4px 0 }
   #item-info-ref { padding-top:0; border:none }
   #item-info-refs tbody td { padding-top:8px; padding-bottom:8px }
}
@media (min-aspect-ratio:1/1), (min-width:768px) { /* horizontal or big enough*/
   #item-dialog aside { width:40.5%; margin-top:60px }
   #item-dialog .image { width:57% }
}

#item-order-dialog { width:680px }
#item-order-dialog form { position:relative; padding:0 4%; text-align:center }
#item-order-dialog img { position:absolute; top:-5px; left:2%; width:100px; height:100px }
#item-order-dialog nav { position:relative; margin-bottom:1em; padding:15px; background:#eee; line-height:30px; border-radius:30px; box-shadow:1px 1px 0 #ccc }
#item-order-dialog nav button { margin:0 5px; width:32px; height:30px; padding:0; vertical-align:top; border-radius:6px }
#item-order-dialog nav button[data-icon]:before { vertical-align:baseline }
#item-order-dialog nav button[name="delete"][data-icon]:before { color:#a00 }
#item-order-dialog nav button[name="add"] { margin-left:15px }
#item-order-dialog nav button[name="add"][data-icon]:before { color:#333 }
#item-order-dialog nav output { display:inline-block }
#item-order-dialog nav output[name="ref"] { margin:0 20px; line-height:30px; font-size:16px }
#item-order-dialog nav output[name="pos"] { width:40px; font-size:15px }
#item-order-dialog .scroll { overflow-x:hidden }
#item-order-dialog .swipe { position:relative; box-sizing:border-box; right:0 }
#item-order-dialog .swipe.enableTransition { transition:right 0.5s }
#item-order-dialog .fieldset { font-size:0 }
#item-order-dialog .control { display:inline-block; box-sizing:border-box; width:25%; min-width:145px; padding:10px; font-size:1rem; white-space:nowrap }
#item-order-dialog .control span.label { line-height:32px; font-size:0.95rem; color:#333; white-space:nowrap; text-transform:uppercase }
#item-order-dialog input, #item-order-dialog select { width:100%; margin:0 }
#item-order-dialog input.center { text-align:center; padding:5px 0 }
#item-order-dialog input:disabled, #item-order-dialog input[readonly], #item-order-dialog span.input { color:Black; background-color:transparent; border-color:#a8a8a8 transparent transparent }
#item-order-dialog select { padding:5px 8px }
#item-order-dialog .units button { width:28px; height:28px; border:none; border-radius:5px }
#item-order-dialog .units button[data-icon]:before { font-size:15px }
#item-order-dialog input[name="units"] { width:38px; margin:0 5px }
#item-order-dialog span.input output { display:inline-block; width:100%; line-height:30px; border-top:1px solid #a8a8a8 }
#item-order-dialog span.input output[name="importe"] { font-weight:bold }
#item-order-dialog .control.comment { min-width:290px }
#item-order-dialog .control.comment input { text-align:left }

#order-page form { margin:0 auto; padding:30px 0 4em; text-align:center }
#customer-header { position:sticky; position:-webkit-sticky; top:60px; top:calc(60px + var(--safe-top)); padding:13px 0 11px; line-height:22px; text-align:center; font-size:0.96em; background-color:rgba(229,229,229,0.9); z-index: 2 }
#customer-header > button { margin-left:5px }
@media (max-width:599px) {
   #customer-header > span[data-icon]:before { display:none }
}
#order-page table { margin:0 auto; border-collapse:collapse }
/* #order-page table.hide-discount td.dto { display:none } */
#order-page thead, #order-page td.label { font-size:1rem }
#order-page tbody td { font-size:0.96rem; background:White }
#order-page tr { transition:opacity 0.25s linear }
#order-page tr.unlisted td.calidad, #order-page tr.unlisted td.metal { color:#888 }
#order-page tr.warning { background-color:#ff7f00 }
#order-page tr.warning td { opacity:0.9 }
#order-page td { padding:0; text-align:center }
#order-page td.label { text-align:right; color:#444 }
#order-page td.numeric button { height:28px; padding:0 6px; border-radius:5px }
#order-page td.numeric button.active { color:#006a6a; font-weight:bold }
#order-page thead td { padding-top:10px; padding-bottom:8px; color:White; background-color:var(--Head) }
#order-page tbody tr.title td { background-color:var(--SubHead) }
#order-page tbody:nth-of-type(-n+2) tr.title td { border-top:1px solid rgba(0,0,0,0.15) }
#order-page tbody tr.title td { padding:8px 0 7px; color:White; text-transform:uppercase; letter-spacing:4px }
#order-page tfoot td { height:50px; border-top:2px solid #999 }
#order-page tbody.piezas tr.first:not(:first-child) td { border-top:1px solid #ddd }
#order-page tbody.piezas tr.pieza:not(.first) td.pieza { padding-bottom:30px }
#order-page tbody.piezas tr.pieza td:not(.img):not(.pieza) { padding-bottom:30px; vertical-align:bottom; line-height:33px; white-space:nowrap }
#order-page td.pieza a { color:Black }
#order-page td.pieza i.ref { display:block; line-height:1.5; font-size:0.93rem; font-style:normal; color:#666 }
#order-page td.img { width:140px; min-width:140px }
#order-page td.img img { display:block; width:100%; height:110px; object-fit:cover }
#order-page td.img:hover + td.pieza a { text-decoration:underline }
#order-page td.price { text-align:right; padding-right:10px; white-space:nowrap }
#order-page td.price.total { font-weight:bold; color:#444 }
#order-page td.price.total i { font-weight:normal }
#order-page td.percent { text-align:right; padding-right:10px }
#order-page td button.icon { height:33px }
#order-page td button.icon:enabled:hover { background-color:#eee }
#order-page td button.icon.active[data-icon]:before { color:var(--Link) }
#order-page td .action-button { display:inline-block; width:33px; vertical-align:middle }
#order-page td.units { padding-left:10px; padding-right:10px; white-space:nowrap }
#order-page td.units .action-button { width:25px; height:25px; border:none; border-radius:5px }
#order-page td.units .action-button[data-icon]:before { font-size:15px }
#order-page td.units span.units { display:inline-block; vertical-align:middle; width:30px; line-height:29px }
#order-page td.talla select { min-width:40px; margin:0 5px }
#order-page td.color select { margin:0 5px }
#order-page tbody.piezas-empty td { background-color:#f3f3f3; border-top:1px solid #999 }
#order-page tbody.piezas-empty td.img[data-icon]:before { color:#aaa; font-size:28px }
#order-page table.empty tbody.piezas-empty td.img { display:none }
#order-page table.empty tbody.piezas-empty td { padding:15px 0 }
#order-page table:not(.empty) tbody.piezas-empty p { display:none }
#order-page table:not(.empty) thead + tbody.piezas-empty { display:none }
#order-page tr.piezas-empty td { font-size:0.90rem }
#order-page tr.piezas-empty p { font-size:1rem; color:#666 }
#order-page tr.piezas-empty button { border-style:dotted; background-color:transparent }
#order-page tr.piezas-empty button:not(:disabled):hover { background-color:White }
#order-page td.detail button[data-icon]:before { padding:2px }
#order-page tfoot td.delete button[data-icon]:before { color:#A00 }
#order-page tfoot td.remarks { text-align:left }
#order-page tfoot td.remarks button { color:#444; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#order-page tfoot td.remarks button.active { color:var(--Link) }
#order-page table.empty tfoot td.remarks button { display:none }
#order-page tfoot td.remarks button[data-icon]:before { vertical-align:-7px; width:36px }
#order-page tbody.packs tr.pack { background-color:#f6f6f6 }
#order-page tbody.packs tr.pack td { border-bottom:1px solid #ddd }
#order-page tbody.packs tr.pack td.pieza { position:relative }
#order-page tbody.packs tr.pack td.pieza a { position:absolute; left:0; bottom:5px; width:100%; font-size:0.84em; line-height:16px; color:#0097c8 }
#order-page tbody.packs tr.pack td.pieza a:hover { text-decoration:underline }
#order-page tbody.packs tr.pack-items { background-color:#eee; box-shadow:inset 0 2px 6px #999 }
#order-page tbody.packs tr.pack-items:not(.open) { display:none }
#order-page tbody.packs tr.pack-items td { padding-top:10px; padding-bottom:10px; font-size:0.96em; line-height:1 }
#order-page tbody.packs tr.pack-items td span { display:block; margin:8px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#order-page tbody.packs tr.pack-items td:not(.pieza) span { border-bottom: 1px solid transparent }
#order-page tbody.packs tr.pack-items td.pieza span { text-align:left; padding-left:20px }
#order-page tbody.packs tr.pack-items td.pieza span a { display:inline-block; text-decoration:none; border-bottom:1px dotted }
#order-page tbody.packs tr.pack-items td.pieza span a:hover { border-bottom-style:solid }
#order-page tbody.piezas-total td { padding-top:10px; padding-bottom:20px; border-top:1px solid #999 }
#order-page .button { min-width:180px }
#order-page .buttons button { margin:8px 15px }
#order-page form .message { margin:10px 0; padding:15px 5%; font-size:0.95em; text-align:center; background-color:#caeaf5 }
#order-page form .message.warn { background-color:#fff0c0 }
#order-page form .message[data-icon]:before { margin-right:12px; font-size:28px }
#order-page form .message[data-icon]:before { width:28px; height:28px; background-size:28px }
#order-page form .message.plaingold[data-icon]:before { background-image:url(../img/buttons/facet/icon-recycle.png) }

#order-page form > details span { display:inline-block; margin-top:0.75em }
@media (min-height:700px) {
   #order-page thead td { position:sticky; position:-webkit-sticky; top:60px; top:calc(60px + var(--safe-top)) }
   #order-page header:not([hidden]) ~ form thead td { top:108px; top:calc(108px + var(--safe-top)) }
}
@media (max-width:1024px) {
   #order-page td.img { width:80px }
}
@media (max-width:767px) {
   #order-page thead, #order-page td.label { font-size:1rem; font-weight:normal }
   #order-page td.pieza a { font-size:0.94em }
   #order-page td.pieza i { font-size:0.90em }
   #order-page td.numeric button { padding:0 3px }
   #order-page td.color select { margin:0 }
   #order-page td.comment { max-width:0; overflow:hidden }
   #order-page td.units { padding-left:0; padding-right:0 }
   #order-page td.units span.units { width:22px }
   #order-page td.price { padding-right:0; text-align:center }
}
@media (min-width:768px) {
   #order-page td.numeric.price button { margin-right:-5px }
}
@media (min-width:1200px) {
   #order-page form { width:95% }
}

.order-send-dialog { width:650px }
.order-send-dialog form { padding:0 8% }
.order-send-dialog.send h2[data-icon]:before { content:"shopping_cart" }
.order-send-dialog.sendCopy h2[data-icon]:before { content:"mail" }
.order-send-dialog.send .sendCopy-only { display:none }
.order-send-dialog.sendCopy .send-only { display:none }
.order-send-dialog p { clear:both }
.order-send-dialog p.customer { margin-top:6px; padding:0.5em; line-height:1.3; background:#e5e5e5 }
.order-send-dialog p.customer span.nombre { font-weight:bold }
.order-send-dialog .control { margin:7px 0 3px }
.order-send-dialog textarea { height:60px }
.character-counter { display:block; color:#888; font-size:0.75em; text-align:right }
.order-send-dialog input[type="email"] { line-height:22px }
@media (max-width:549px) {
   .order-send-dialog input[data-character-counter] { display:block; max-width:none; box-sizing:border-box }
   .order-send-dialog input[data-character-counter] + .character-counter { clear:both }
}
.order-send-dialog select[name="isQuotation"] { margin:7px 0; width:130px; text-transform:uppercase }
.order-send-dialog output[name="formaPago"] { text-align:center; line-height:32px; background-color:#e5e5e5 }
.order-send-dialog .draft-text { margin-bottom: 15px;}
#order-sign-button, #order-signature { float:right }
#order-sign-button { margin:7px 0 }
#order-signature { display:block; position:relative; padding-right:5px }
#order-signature img { display:block; height:60px }
#order-signature button { position:absolute; top:0; right:0; width:20px; height:25px }
#order-signature button[data-icon]:before { font-size:20px }
#order-signature button:hover { opacity:0.8 }



#order-signature-standard {
   display: block;
   position: relative;
   padding-right: 5px
}

#order-signature-standard img {
   display: block;
   height: 60px
}

#order-signature-standard button {
   position: absolute;
   top: 0;
   right: 0;
   width: 20px;
   height: 25px
}

#order-signature-standard button[data-icon]:before {
   font-size: 20px
}

#order-signature-standard button:hover {
   opacity: 0.8
}

#order-signature-proyect {
   display: block;
   position: relative;
   padding-right: 5px
}

#order-signature-proyect img {
   display: block;
   height: 60px
}

#order-signature-proyect button {
   position: absolute;
   top: 0;
   right: 0;
   width: 20px;
   height: 25px
}

#order-signature-proyect button[data-icon]:before {
   font-size: 20px
}

#order-signature-proyect button:hover {
   opacity: 0.8
}

#order-sign-dialog { width:650px }
#order-sign-dialog canvas { width:100%; height:250px }
#order-sign-dialog .label { text-align:center; line-height:20px; font-size:0.90em; color:#888; border-top:1px solid #d3d3d3 }

/* #order-GIA-dialog { width: 500px; height: 400px } */
#order-GIA-dialog {width: 60%; height: 80%; padding: 20px;}
#order-GIA-dialog  .label { text-align: center;  line-height: 20px;  font-size: 0.90em;  color: #888;   border-top: 1px solid #d3d3d3 }
#order-new-GIA-dialog { width: 60%; height: 65% }
#order-new-GIA-dialog  .label { text-align: center;  line-height: 20px;  font-size: 0.90em;  color: #888;   border-top: 1px solid #d3d3d3 }
#new-gia-container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: -2% }
#modalidadPagoLabel { font-size: 17px; margin-bottom: 25px; text-align: center; }
#form-new-gia { display: flex; flex-direction: column; align-items: center; justify-content: center }
#container-inferior { text-align: center; width: 80%; padding: 10px; border: 1px solid #ababab; margin-bottom: 15px }
#container-superior { text-align: center; width: 80%; border: 1px solid #ababab; padding: 10px }
.span-label-gia { font-weight: bold }
#boxGiaClasic { padding: 10px;}
#customers-page { padding:0 3% 50px }
#customers-page > div { position:relative }
#customers-page h2 { margin:0 0 20px 0; padding:40px 0 4px 0; border-bottom:1px solid #777 }
#customers-page label { padding:5px 0; font-size:0.96em }
#customers-page label > s:after { content:" :" }
@media (max-width:600px) {
   #customers-page { padding-left:10px; padding-right:10px }
}
@media (max-width:900px) {
   #customers-page label > s:after { content:":" }
}
#tailor-made { padding:0 3% 50px }
#search-inputs-form { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap }
@media (max-width:1200px) {
   #search-inputs-form { display: inline-block; width: 100%; text-align: center }
}
#filter-buttons-container { line-height: 3; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center }
#filterInactiveButton::before { padding-left: 3px }
@media (max-width:1100px) {
   #filter-buttons-container { text-align: center }
}
#select-filters { display: flex; justify-content: center; align-items: center; flex-wrap: wrap }
#section-order-actions p .link { display:inline-block; margin-right:3rem; line-height:26px }
#section-order-actions button[name="info"] { margin-left:4px; position:relative; left:-3rem }
#section-customers form label { display:inline-block; white-space:nowrap }
#section-customers form select { width:10em; height:27px }
#section-customers form label.filter span { display:inline-block; width:2.25em; overflow:visible }
#section-customers form button[name="filterButton"] { margin-right:18px; width:22px; height:27px; vertical-align:middle }
#section-customers form button[name="filterButton"][data-icon]:before { font-size:22px }
#section-customers form a.link { position:relative; display:inline-block; line-height:37px }
#section-customers table { border-spacing:4px 8px; margin:1em 0; line-height:1; z-index: 1; position: relative }
#section-customers td { position:relative; padding-left:8px; vertical-align:middle }
#section-customers td .float { white-space:nowrap }
#section-customers td .float span { display:inline-block; width:9rem; color:Black }
#section-customers thead td .float span { text-align:center }
#section-customers tbody td .float span { text-align:right; padding-right:1rem; box-sizing:border-box; border-left:1px solid White }
#section-customers thead { font-size:0.96em }
#section-customers thead td { height:21px; line-height:23px; border-top:4px solid #ddc; padding-top:9px }
#section-customers thead .float { float:none; position:absolute; top:9px; right:0; background-color:White }
#section-customers table.withAction thead .float { right: 23px }
#section-customers thead .float [data-icon]:before { font-size:18px; color:#555 }
#section-customers tbody { font-size:0.90em; background-color:#ddc }
#section-customers tr.current { font-weight:bold }
#section-customers tr.highlight { background-color:#dfdfa0 }
#section-customers tr.inactive { color:#555 }
#section-customers td.nombre { line-height:1.3 }
#section-customers table.withAction td.nombre { padding-right:40px }
#section-customers td.nombre a.link { color:inherit; border-bottom:1px dotted }
#section-customers td.nombre.notice { color:#a10 }
#section-customers td.nombre.cexpress { color:var(--Link) }
#section-customers td.nombre span.consign:empty,
   #section-customers td.nombre span.consign:empty + span.balance:empty,
      #section-customers td.nombre span.consign:empty + span.balance:empty + span.purchased:empty { width:0; padding:0 }
#section-customers td.action { padding:0; width:44px; text-align:center; background:White }
#section-customers td.action button { margin-left:4px }
#section-customers td.action button.action { border-radius:5px; padding:0 }
#section-customers button.action { position:relative; width:38px; height:38px; vertical-align:middle }
#section-customers button.action.lamp:after { content:""; position:absolute; top:4px; right:1px; width:6px; height:6px; border-radius:6px }
#section-customers button.action.lamp.green:after { background-color:#0c0 }
#section-customers button.action.lamp.red:after { background-color:Red }
#section-customers button.action.add, #section-customers button.action.load { border-width:1px; border-color:#ccc }
#section-customers button.action.view { border-style:inset; background-color:White }
#section-customers button.action.side { position:absolute; top:0; right:7px }
#section-customers select option.active { font-weight:bold }
#section-customers select optgroup + optgroup { background-color:#eee }
#section-customers .buttons { text-align:center }
#customers-section > header { width: 10% !important }
@media (max-width:399px) {
   #section-customers button.action.side { right:0 }
   #section-customers table.withAction thead .float { right:28px }
   #section-customers table.withAction td.nombre { padding-right:28px }
   #filter-buttons-container { width: 150% !important }
   #section-customers table thead { top: 410px !important }
   #totalData { top: 445px !important }
}

   @media (max-width:599px) {
      #section-customers table { border-spacing:0 4px }
      #section-customers td.poblacion { display:none }
   }
   @media (max-width:745px) {
   #totalData { top: 458px !important }
   #section-customers table { margin-top: 395px }
   #section-customers table thead {
      top: 424px !important;
      z-index: 10 !important
   }
   @media (max-width:545px) {
      #totalData { top: 485px !important }
      #section-customers table { margin-top: 395px }
      #section-customers table thead { top: 451px !important }
   }
   #section-customers form.new-customer-form {
      position: fixed !important;
      z-index: 2 !important;
      top: 230px !important;
      background-color: white !important;
      padding-top: 27px !important;
      width: 100% !important;
      left: 0 !important;
   }

   #header-client-count {
      display: flex !important;
      justify-content: space-around !important;
      align-items: center !important;
      position: fixed !important;
      top: 171px !important;
      width: 100% !important;
      background-color: white !important;
      left: 0 !important;
      z-index: 2 !important;
   }

   #section-order-actions {
      position: fixed !important;
      top: 50px !important;
      left: 0 !important;
      z-index: 3 !important;
      background-color: white !important;
      width: 100% !important;
      padding-left: 10px !important;
   }
   #filter-buttons-container { width: 100% }
   #new-customer { line-height: 1 !important; text-align: center }
   #search-inputs-form { margin-bottom: 10px }
}
@media (max-width:767px) {
   #section-customers thead .float [data-icon]:before { display:none }
   #section-customers td .float span { width:7rem }
   #section-customers tbody td .float span { padding-right:0.5rem }
   #section-customers form select { max-width:11em }
}
/* Formato de la tabla para iPad */
@media (max-width:850px) {
   #section-customers table.withAction td.nombre { max-width: 530px; }
   #section-customers table { font-size: 12px !important }
   #section-customers tr td { font-size: 12px !important }
   #section-customers td.nombre a.link { font-size: 12px !important }
   #section-customers td .float span { width: 110px; }
   #section-customers thead .float [data-icon]:before { font-size: 12px; color:#555 }
   #section-customers table.withAction thead .float { right: 32px; display: flex; justify-content: space-evenly }
   .poblacion { max-width: 90px }
   #section-customers table { border-spacing: 0px 3px }
   #cliente-text { font-size: 0 }
   #section-customers button.action { width: 35px; height: 35px }

}

#customer-create-dialog input.field, #customer-create-dialog select { height:30px }
#customer-create-dialog .block-fields label  > :first-child { line-height:30px }
#customer-create-dialog input[type="email"] { text-transform:lowercase }
#customer-create-dialog input.toUpper { text-transform:uppercase }
@media (max-width:549px) {
   #customer-create-dialog .block-fields { padding-right:40px }
}
@media (min-width:551px) {
   #customer-create-dialog label[for="legalType"] { display:inline-block; margin:0 }
}

.customer-info-dialog { width:900px; min-height:50% }
.customer-info-dialog.table { height:100vh }
.customer-info-dialog .scroll { padding:0 5% 40px }
@media (max-width:720px) {
   .customer-info-dialog .scroll { padding:0 0 40px }
   .customer-info-dialog .scroll p { padding:0 2% }
}
.customer-info-dialog nobr[data-icon]:before { margin-right:5px }
.customer-info-dialog nobr { display:inline-block; margin:7px 0 }
.customer-info-dialog nobr small { color:#444 }
.customer-info-dialog button.float { margin:5px 0 10px 10px; padding:2px 0; width:160px; min-height:31px; border-radius: 3px; background-color: white; border: 1px solid #bcbcbc }
.customer-info-dialog button.float:hover { background-color: #f1f1f1 }
.customer-info-dialog .warning { color:#d00 }
.customer-info-dialog .sep { margin-left:1.5em }
.customer-info-dialog .sep.block { display:block }
.customer-info-dialog label.search.field { position:relative; padding-right:24px }
.customer-info-dialog label.search.field[data-icon-after]:after { position:absolute; right:0; top:0; bottom:0; font-size:21px; color:#666 }
.customer-info-dialog input[name="ref"] { margin-top:5px; width:125px; height:28px; font-size:0.90rem; text-align:center }
.customer-info-dialog hr { border: none; border-bottom: 1px solid #a0a0a0 }

.customer-info-table { margin:2em 0 1em; border-collapse:collapse; background-color:#f3f3f3 }
.customer-info-table thead.sticky td { position:sticky; position:-webkit-sticky; top:0 }
.customer-info-table thead td { vertical-align:middle; padding:8px 0; font-size:95%; font-weight:bold; color:White; background:var(--Head) }
.customer-info-table thead td[data-icon]:before { color:White; font-weight:normal }
.customer-info-table td { vertical-align:top; text-align:center }
.customer-info-table tbody td { padding:8px 4px }
.customer-info-table tbody > tr { border-bottom: 1px solid #00000012 }
.customer-info-table tbody > tr > td { white-space:nowrap }
.customer-info-table tbody > tr:last-child > td { padding-bottom:16px }
.customer-info-table tbody td.ref, .customer-info-table tbody span { font-size:0.95rem }
.customer-info-table tbody td.text { white-space:normal; font-size:95%; min-width:200px; max-width:350px }
.customer-info-table tbody td.checkbox input { width:20px; height:20px }
.customer-info-table tbody td.img { padding:0; width:1px }

#customer-info-order-dialog a:not([href]), #customer-info-dialog i { color:#666 }
#customer-info-order-dialog a:not([href]) { font-style:italic }
#customer-info-order-dialog .scroll { padding:40px 7% }
#customer-info-order-dialog button[name="catalogSent"] { margin-top:1em; position:relative; overflow:visible }
#customer-info-order-dialog button[name="catalogSent"]:disabled { margin-bottom:2em }
#customer-info-order-dialog button[name="catalogSent"] span { position:absolute; left:0; bottom:-1.5em; width:100%; color:#333 }
@media (max-width:720px) {
   #customer-info-order-dialog .scroll { padding-left:3%; padding-right:3% }
}
#customer-info-order-dialog .scroll > span { display:inline-block; vertical-align:top; text-align:left }
#customer-info-order-dialog p[hidden] + hr { display:none }
#customer-info-order-dialog #customer-name-wrapper { margin-bottom: 45px }
#customer-info-order-dialog #customer-logo-order { position:absolute; top:0; right:5px; height:55px }
.accordion-header:hover { background-color: #f0f0f0 }
.inner-cobros { width: 100%; border-collapse: collapse; background-color: #e9e9e9 }
.inner-cobros th, .inner-cobros td { padding: 4px 8px; border: 1px solid #ddd }
#customer-balance-dialog span[data-icon="add"] { filter: brightness(0) invert(1) }
#customer-info-order-dialog .warning { color:#d00 }
#customer-info-order-dialog hr { border: none; border-bottom: 1px solid #a0a0a0 }
#customer-info-dialog a:not([href]), #customer-info-dialog i { color:#666 }
#customer-info-dialog a:not([href]) { font-style:italic }
#customer-info-dialog .scroll { padding:40px 7% }
#customer-info-dialog button[name="catalogSent"] { margin-top:1em; position:relative; overflow:visible }
#customer-info-dialog button[name="catalogSent"]:disabled { margin-bottom:2em }
#customer-info-dialog button[name="catalogSent"] span { position:absolute; left:0; bottom:-1.5em; width:100%; color:#333 }
@media (max-width:720px) {
   #customer-info-dialog .scroll { padding-left:3%; padding-right:3% }
}
#customer-info-dialog .scroll > span { display:inline-block; vertical-align:top; text-align:left }
#customer-info-dialog p[hidden] + hr { display:none }
#customer-name-wrapper { position:relative }
#customer-name-wrapper #customer-logo { position:absolute; top:0; right:5px; height:55px }
#customer-rate { font-family:monospace }
#customer-info-block { margin:0.5em 6% 0.5em 0 }
#customer-info-block details { margin:1em 0 0.5em }
#customer-info-block small { display:inline-block; margin-top:1em }
#customer-address-block { margin:0.5em 0; padding-left:32px; min-width:220px; position:relative }
#customer-address-block[data-icon]:before { position:absolute; top:0; left:0 }
#customer-address-map-link { display:block; font-size:14px; margin-top:0.5em }
#customer-address.empty { font-style:italic }
#customer-address.empty + #customer-address-map-link { display:none }
#customer-last-visit-text { display:block; font-style:italic }
#customer-last-note-texto { display:block; font-style:italic }

#customer-consumed-dialog table { background-color:#ccc }
#customer-consumed-dialog table tbody td { vertical-align:middle; height:4em; padding-top:0; padding-bottom:0; background-color:White; border-bottom:1px solid #ccc }
#customer-consumed-dialog tbody td.img img { display:block; height:100%; width:3.5em; object-fit:cover }
#customer-consumed-dialog tbody td.img img.broken { visibility:hidden }
#customer-consumed-dialog tbody td.unlisted { color:#888 }
#customer-consumed-dialog tbody td.tipo { padding:0 }
#customer-consumed-dialog tbody td.grupo { white-space:normal; padding:0 }

.customer-ordered-table > tbody > tr:nth-child(odd) { background-color:#ddd }
.customer-ordered-table tbody > tr > td { padding-bottom:8px }
.customer-ordered-table { border-bottom:1px solid #aaa}
.customer-ordered-table td.expand { padding-left:0 }
.customer-ordered-table tr.pedido > td { border-top:1px solid #aaa }
.customer-ordered-table tr.pedido > td.expired { color:#d22 }
.customer-ordered-table tr.pedido > td.delivered { color:#090 }
.customer-ordered-table tr.lineas:not(.open) { display:none }
.customer-ordered-table tr.lineas > td { padding:8px 0 }
body.customer .customer-ordered-table table.lineas th.taller { display: none; }
body.customer .customer-ordered-table table.lineas th.orden { display: none; }
.customer-ordered-table table.lineas th, #customer-ordered-dialog table.lineas tr.observaciones td { border-bottom:1px solid #ccc }
.customer-ordered-table table.lineas th { padding-bottom:8px; font-weight:normal }
.customer-ordered-table table.lineas img { width:90px; height:90px; filter:brightness(0.953) }
.customer-ordered-table table.lineas tr.entregado td { background-color:#e9fcdf}
.customer-ordered-table table.lineas tr.entregado img { filter:brightness(0.89) sepia(40%) hue-rotate(50deg) }
.customer-ordered-table table.lineas tr.entregado td.cantidades > :not(.cantidad) { display:none }
.customer-ordered-table .pieza { max-width:220px; text-align:left; padding-left:0; white-space:normal }
.customer-ordered-table td.cantidades span.stockWrapper.green { color:#0b0; font-weight:bold }
.customer-ordered-table .orden { text-align:left }
.customer-ordered-table tr.observaciones td { padding-bottom:16px }
.customer-ordered-table td.observaciones { padding:0; text-align:left; white-space:normal }
.customer-ordered-table td.observaciones i { display:block }
.customer-ordered-table td.observaciones i:not(:empty) { margin-bottom:0.75em }
.customer-ordered-table td.tracking { font-size:0.94rem }
body.customer .customer-ordered-table table.lineas td.taller { display: none; }
body.customer .customer-ordered-table table.lineas td.orden { display: none; }
body.customer .customer-ordered-table table.lineas tr.observaciones { display: none; }

#customer-repairs-dialog table.lineas td { vertical-align:middle }
#customer-repairs-dialog table.lineas .descripcion { text-align:left }
#customer-repairs-dialog table.lineas td.descripcion { white-space:normal; font-size:0.94rem }

#customer-orders-dialog { width:800px }
#customer-orders-dialog table { margin:45px 0 30px; padding:0 2% }
@media (max-width:599px) {
   #customer-orders-dialog table { padding:0 }
}

#dialog-alert-vencido .content { min-width: 320px; }
#dialog-alert-vencido .content .banner-container { padding-top: 10%; text-align: center; }
#dialog-alert-vencido .content .banner-container .blockButton { padding-top: 10%; padding-bottom: 10%; }

#customer-visit-dialog { width:500px }
#customer-visit-dialog .scroll { padding:0 10% }
#customer-visit-dialog input, #customer-visit-dialog  select, #customer-visit-dialog textarea { width:100%; margin:7px 0 }
#customer-visit-dialog textarea { height:60px }

#customer-notes-dialog { width:600px }
#customer-notes-dialog .block-fields textarea { box-sizing:content-box; height:2.5em }
#customer-notes-dialog .block-fields button { float:right; margin-top:8px }
#customer-notes-dialog .customer-note { margin:0; padding:1em; background-color:#eee }
#customer-notes-dialog .customer-note i { display:block; margin:0.5em 0 }
#customer-notes-dialog .customer-note button { float:right }
@media (max-width:549px) {
   #customer-notes-dialog [name="nombreAgente"], #customer-notes-dialog [name="departamento"] { width:80% }
}
@media (min-width:550px) {
   #customer-notes-dialog .block-fields label:not(.checkbox) s { width:150px }
   #customer-notes-dialog .block-fields label.checkbox { margin-left:150px }
}

#customer-message-type-dialog { width:600px }

#customer-message-send-dialog textarea { height:150px }
#customer-message-send-dialog a.link { display:block; text-align:center; margin:20px 0 }
@media (min-width:550px) {
   #customer-message-send-dialog textarea, #customer-message-send-dialog input[name="subject"] { width:320px }
   #customer-message-send-dialog .block-fields label > :first-child { width:200px }
}

#customer-seller-info-dialog { width:600px; line-height:1.5 }
#customer-seller-info-dialog .scroll { padding:0 8% 45px }
#customer-seller-info-dialog p.address { position:relative; padding-left:30px }
#customer-seller-info-dialog p.address:before { position:absolute; left:0 }

/* Dialog box styles (alert, confirm, prompt) */
dialog.box { position:fixed; padding:0; border:none }
dialog.box:not(.image) { top:50%; transform:translate(-50%, -50%); width:540px; max-width:100%; color:Black; font-size:1em; line-height:normal; white-space:normal; box-shadow:6px 6px 12px rgba(0,0,0,0.6) }
dialog.box h4 { margin:0 0 2em; height:40px; line-height:45px; text-align:center; font-size:1.10em; text-transform:uppercase; background-color:#eee }
dialog.box form { margin-top:3.5em; padding:0 35px }
dialog.box h4 ~ form { margin-top:0 }
dialog.box p { margin:1em 0; line-height:1.3 }
dialog.box input, dialog.box textarea { width:100% }
dialog.box input { margin:0.5em 0 }
dialog.box textarea { margin-top:0.5em }
dialog.box input, dialog.box select { height:32px }
dialog.box input[type="date"] { width:40% }
dialog.box p.buttons { margin:1.5em 0; padding:0 }
dialog.box .buttons button { padding:0; width:120px; max-width:45%; height:38px; color:White; border:none; border-radius:10px }
dialog.box .buttons button:hover { opacity:0.9 }
dialog.box .buttons button:disabled { opacity:0.5 }
dialog.box button[name="ok"], dialog.box button[name="alt"] { margin-left:5% }
dialog.box button[name="ok"] { background-color:var(--SubmitButton) }
dialog.box button[name="alt"] { background-color:#7f7f7f }
dialog.box button[name="cancel"] { background-color:#999 }
dialog.box button[name="close"] { position:absolute; top:2px; right:2px; width:36px; height:36px; padding:0; z-index:1; background-color:#ccc; color:#333; border:none }
dialog.box button[name="close"]:before { content:"close"; font:bold 32px "Material Icons"; line-height:36px }
dialog.box button[name="close"]:hover { color:#666 }

dialog.box.image { background:transparent }
dialog.box.image img { max-width:100vw; max-height:100vh; object-fit:contain; vertical-align:middle }
dialog.box.image button[name="close"] { position:fixed; top:10px; right:10px; width:40px; height:40px; color:White; border:none; background:none }
dialog.box.image button[name="close"]:before { text-shadow:1px 1px 2px Black, 1px -1px 2px Black, -1px 1px 2px Black, -1px -1px 2px Black }
dialog.box.image button[name="close"]:hover { color:#eee }

dialog.box.icon form { position:relative; padding-left:100px }
dialog.box.icon form:after { position:absolute; left:25px; top:-10px; font:bold 60px "Material Icons" }
dialog.box.icon.success form:after { content:"check"; color:#89d289 }
dialog.box.icon.info form:after { content:"info"; color:#699dca }
dialog.box.icon.question form:after { content:"help_outline"; color:#699dca }
dialog.box.icon.offline form:after { content:"cloud_off"; color:#eab46d }
dialog.box.icon.warning form:after { content:"error_outline"; color:#eab46d }
dialog.box.icon.error form:after { content:"warning"; color:#eab46d }

/* VISITS LIST PAGE */
#visits-list-page { padding: 24px 16px; box-sizing: border-box }
#visits-list-page .content { position: relative }
#visits-list-page .va-filters { display: flex; margin-bottom: 28px; background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px 20px; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px }
#visits-list-page .va-filter-group { display: flex; flex-direction: column; gap: 4px }
#visits-list-page .va-filter-group.va-filter-actions { justify-content: flex-end }
#visits-list-page .va-actions-row { display: flex; gap: 10px; align-items: center }
#visits-list-page #visits-list-search.needs-query {
   box-shadow: 0 0 0 2px rgba(25, 119, 189, 0.25);
   animation: visit-actions-search-glow 1.1s ease-in-out infinite alternate;
}
#visits-list-page #visits-list-clear-filters { height: 38px; border-radius: 6px; border: 1px solid #a9afb5; background: #f5f7f8; color: #455a64; font-weight: 600; min-width: 140px }
#visits-list-page #visits-list-clear-filters:hover { background: #ebeff1 }
#visits-list-page #visits-list-export { height: 38px; min-width: 140px; border-radius: 6px; border: 2px solid #1f8f4d; background: #1f8f4d; color: #ffffff; font-weight: 600 }
#visits-list-page #visits-list-export:hover { background: #197a41; border-color: #197a41 }
#visits-list-page #visits-list-export:disabled { background: #8fbda0; border-color: #8fbda0; color: #edf5f0 }
#visits-list-page #visits-list-export[data-icon]:before { color: #ffffff }
#visits-list-page .va-filter-group label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #666 }
#visits-list-page .va-filter-group input,
#visits-list-page .va-filter-group select { border: 1px solid #ccc; border-radius: 4px; padding: 7px 10px; font-size: 14px; color: #333; background: #fff; outline: none; width: 100%; box-sizing: border-box; transition: border-color 150ms, box-shadow 150ms; -webkit-appearance: none; appearance: none; font-family: inherit }
#visits-list-page .va-filter-group input[type="date"] { padding: 6px 10px }
#visits-list-page .va-filter-group input:focus,
#visits-list-page .va-filter-group select:focus { border-color: #1976d2; box-shadow: 0 0 0 3px rgba(25,118,210,.12) }
#visits-list-page .va-loading-overlay,
#visit-actions-list-page .va-loading-overlay { position: absolute; inset: 0; z-index: 7; display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px; background: linear-gradient(180deg, rgba(246, 248, 251, 0.96), rgba(246, 248, 251, 0.84)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px) }
#visits-list-page .va-loading-overlay[hidden],
#visit-actions-list-page .va-loading-overlay[hidden] { display: none !important }
#visits-list-page .va-loading-card,
#visit-actions-list-page .va-loading-card { width: min(100%, 420px); padding: 22px 24px; border-radius: 18px; border: 1px solid rgba(25, 119, 189, 0.12); background: radial-gradient(circle at top, rgba(255, 255, 255, 0.98), rgba(243, 247, 251, 0.94)); box-shadow: 0 22px 45px rgba(17, 44, 78, 0.14); text-align: center; color: #254255 }
#visits-list-page .va-loading-eyebrow,
#visit-actions-list-page .va-loading-eyebrow { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #5e7d93; font-weight: 700 }
#visits-list-page .va-loading-card h3,
#visit-actions-list-page .va-loading-card h3 { margin: 0; font-size: 22px; line-height: 1.15; color: #15344d }
#visits-list-page .va-loading-card p:last-child,
#visit-actions-list-page .va-loading-card p:last-child { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #587288 }
#visits-list-page .va-loading-spinner,
#visit-actions-list-page .va-loading-spinner { width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%; border: 4px solid rgba(25, 119, 189, 0.16); border-top-color: #1977bd; border-right-color: #3ba8d6; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.65); animation: visit-actions-overlay-spin 0.82s linear infinite }
#visits-list-page #visits-list-message.va-info-message { margin: 8px 0 14px; text-align: center; color: #7b8790; font-weight: 600; background: #f3f5f7; border: 1px solid #e1e6ea; border-radius: 8px; padding: 10px 14px }
#visits-list-page .va-table-wrapper { overflow-x: auto; border-radius: 8px; border: 1px solid #e0e0e0; box-shadow: 0 1px 6px rgba(0,0,0,.07) }
#visits-list-page #visits-list-table { width: 100%; border-spacing: 0; border-collapse: collapse; font-size: 14px }
#visits-list-page #visits-list-table thead { position: sticky; top: 0; z-index: 1; background: #1977bd; color: #fff }
#visits-list-page #visits-list-table thead th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; border: none }
#visits-list-page #visits-list-table thead th.select,
#visits-list-page #visits-list-table tbody td.select { width: 42px; min-width: 42px; text-align: center; padding-left: 10px; padding-right: 10px }
#visits-list-page #visits-list-table thead th.select input,
#visits-list-page #visits-list-table tbody td.select input { width: 16px; height: 16px; cursor: pointer }
#visits-list-page #visits-list-table tbody tr:nth-child(even) { background: #f5f8fd }
#visits-list-page #visits-list-table tbody tr:hover { background: #dceeff }
#visits-list-page #visits-list-table tbody td { padding: 10px 16px; border-bottom: 1px solid #e8e8e8; color: #333; vertical-align: top }
#visits-list-page #visits-list-table tbody td.cliente { min-width: 180px }
#visits-list-page #visits-list-table tbody td.comentario { min-width: 300px; white-space: normal }
#visits-list-page .visits-note-comment,
#visit-actions-list-page .visits-note-comment { position: relative; display: flex; flex-direction: column; gap: 8px }
#visits-list-page .visits-note-comment-text,
#visit-actions-list-page .visits-note-comment-text { padding-right: 36px; white-space: pre-wrap; word-break: break-word; line-height: 1.45 }
#visits-list-page .visits-note-comment-actions,
#visit-actions-list-page .visits-note-comment-actions { position: absolute; top: -2px; right: -2px; display: flex; align-items: center; justify-content: center }
#visits-list-page .visits-note-comment-translate,
#visit-actions-list-page .visits-note-comment-translate { width: 28px; height: 28px; padding: 0; border: 1px solid #c7d8e3; border-radius: 999px; background: rgba(255,255,255,.95); color: #39617a; box-shadow: 0 4px 10px rgba(15, 47, 72, .08); cursor: pointer }
#visits-list-page .visits-note-comment-translate[data-icon]:before,
#visit-actions-list-page .visits-note-comment-translate[data-icon]:before { margin: 0; font-size: 17px; line-height: 26px; color: inherit; vertical-align: middle }
#visits-list-page .visits-note-comment-translate:hover,
#visit-actions-list-page .visits-note-comment-translate:hover { border-color: #8fb6cb; background: #f4f9fc; color: #1f546f }
#visits-list-page .visits-note-comment-translate.is-loading[data-icon]:before,
#visit-actions-list-page .visits-note-comment-translate.is-loading[data-icon]:before { animation: visit-note-translate-spin 0.9s linear infinite }
#visits-list-page .visits-note-comment-translate:disabled,
#visit-actions-list-page .visits-note-comment-translate:disabled { opacity: 1; cursor: wait }
#visits-list-page .visits-note-comment-translation,
#visit-actions-list-page .visits-note-comment-translation { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid #d6e8f3; border-radius: 10px; background: linear-gradient(180deg, rgba(245, 250, 254, 0.96), rgba(235, 245, 251, 0.92)) }
#visits-list-page .visits-note-comment-translation-label,
#visit-actions-list-page .visits-note-comment-translation-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #4f7085 }
#visits-list-page .visits-note-comment-translation-text,
#visit-actions-list-page .visits-note-comment-translation-text { white-space: pre-wrap; word-break: break-word; line-height: 1.45; color: #1d3647 }

@keyframes visit-note-translate-spin {
   from { transform: rotate(0deg) }
   to { transform: rotate(360deg) }
}

@media (max-width: 600px) {
   #visits-list-page { padding: 12px 8px }
   #visits-list-page .va-filters { padding: 12px; gap: 10px 12px }
   #visits-list-page .va-filter-group.va-filter-actions { width: 100% }
   #visits-list-page .va-actions-row { width: 100%; flex-direction: column; align-items: stretch }
   #visits-list-page #visits-list-clear-filters { width: 100% }
   #visits-list-page #visits-list-export { width: 100% }
   #visits-list-page .va-loading-overlay,
   #visit-actions-list-page .va-loading-overlay { padding: 18px 10px }
   #visits-list-page .va-loading-card,
   #visit-actions-list-page .va-loading-card { padding: 18px 16px; border-radius: 14px }
   #visits-list-page .va-loading-card h3,
   #visit-actions-list-page .va-loading-card h3 { font-size: 18px }
}

/* VISITS LIST PAGE */
#visit-actions-list-page { padding: 24px 16px; box-sizing: border-box }
#visit-actions-list-page .content { position: relative }
#visit-actions-list-page .va-filters { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; margin: 0 auto 28px; max-width: 1440px; background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px 20px; gap: 16px 16px }
#visit-actions-list-page .va-filter-group { display: flex; flex-direction: column; gap: 4px; flex: 0 0 170px; max-width: 170px }
#visit-actions-list-page .va-filter-group.va-filter-group-checkbox { flex: 0 0 96px; max-width: 96px; align-items: center; justify-content: center }
#visit-actions-list-page .va-checkbox-label { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 38px; padding: 0 2px; color: #37474f; font-size: 12px; font-weight: 600; cursor: pointer }
#visit-actions-list-page .va-checkbox-label.is-disabled { color: #97a3ad; cursor: not-allowed }
#visit-actions-list-page .va-checkbox-label input[type="checkbox"] { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: #1f8f4d; appearance: auto; -webkit-appearance: checkbox }
#visit-actions-list-page .va-checkbox-label input[type="checkbox"]:disabled { cursor: not-allowed }
#visit-actions-list-page .va-filter-group.va-filter-actions { flex: 1 1 100%; max-width: none; justify-content: flex-end; align-items: center }
#visit-actions-list-page .va-actions-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center }
#visit-actions-list-page .va-actions-row .button[data-icon] { display: inline-flex; align-items: center; justify-content: center; gap: 6px }
#visit-actions-list-page .va-actions-row .button[data-icon]:before { float: none; margin: 0 }
#visit-actions-list-page #visit-actions-search-list.needs-query {
   box-shadow: 0 0 0 2px rgba(25, 119, 189, 0.25);
   animation: visit-actions-search-glow 1.1s ease-in-out infinite alternate;
}
#visit-actions-list-page #visit-actions-clear-filters, #visit-actions-list-page #visit-actions-client-tracker { height: 38px; border-radius: 6px; border: 1px solid #a9afb5; background: #f5f7f8; color: #455a64; font-weight: 600; min-width: 140px }
#visit-actions-list-page #visit-actions-clear-filters:hover, #visit-actions-list-page #visit-actions-client-tracker:hover { background: #ebeff1 }
#visit-actions-list-page #visit-actions-show-route { height: 38px; border-radius: 6px; border: 1px solid #a9afb5; background: #f5f7f8; color: #455a64; font-weight: 600; min-width: 140px }
#visit-actions-list-page #visit-actions-show-route:hover { background: #ebeff1 }
#visit-actions-list-page #visit-actions-plan-route { height: 38px; border-radius: 6px; border: 1px solid #a9afb5; background: #f5f7f8; color: #455a64; font-weight: 600; min-width: 140px }
#visit-actions-list-page #visit-actions-plan-route:hover { background: #ebeff1 }
#visit-actions-list-page #visit-actions-export-list { height: 38px; min-width: 140px; border-radius: 6px; border: 2px solid #1f8f4d; background: #1f8f4d; color: #ffffff; font-weight: 600 }
#visit-actions-list-page #visit-actions-export-list:hover { background: #197a41; border-color: #197a41 }
#visit-actions-list-page #visit-actions-export-list:disabled { background: #8fbda0; border-color: #8fbda0; color: #edf5f0 }
#visit-actions-list-page #visit-actions-export-list[data-icon]:before { color: #ffffff }
#visit-actions-list-page .va-filter-group label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #666 }
#visit-actions-list-page .va-filter-group input:not([type="checkbox"]),
#visit-actions-list-page .va-filter-group select { border: 1px solid #ccc; border-radius: 4px; padding: 7px 10px; font-size: 13px; color: #333; background: #fff; outline: none; width: 100%; box-sizing: border-box; transition: border-color 150ms, box-shadow 150ms; -webkit-appearance: none; appearance: none; font-family: inherit }
#visit-actions-list-page .va-filter-group select:disabled,
#visit-actions-list-page .va-filter-group input:not([type="checkbox"]):disabled { color: #8c98a3; background: #eef2f5; border-color: #d7dee5; cursor: not-allowed }
#visit-actions-list-page .va-filter-group input[type="date"] { padding: 6px 10px }
#visit-actions-list-page .va-filter-group input:not([type="checkbox"]):focus,
#visit-actions-list-page .va-filter-group select:focus { border-color: #1976d2; box-shadow: 0 0 0 3px rgba(25,118,210,.12) }
#visit-actions-list-page #visit-actions-list-message.va-info-message { margin: 8px 0 14px; text-align: center; color: #7b8790; font-weight: 600; background: #f3f5f7; border: 1px solid #e1e6ea; border-radius: 8px; padding: 10px 14px }
#visit-actions-list-page .va-summary-dashboard { margin: 0 auto 14px; max-width: 1440px; padding: 16px 16px 14px; border-radius: 18px; border: 1px solid #d7e3ec; background: linear-gradient(135deg, #fdfefe 0%, #f2f7fb 52%, #edf6f1 100%); box-shadow: 0 10px 24px rgba(15, 43, 61, 0.07); position: relative; overflow: hidden }
#visit-actions-list-page .va-summary-dashboard:before { content: ""; position: absolute; inset: auto auto -70px -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(25,119,189,.16) 0%, rgba(25,119,189,0) 68%); pointer-events: none }
#visit-actions-list-page .va-summary-dashboard:after { content: ""; position: absolute; inset: -60px -30px auto auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(31,143,77,.13) 0%, rgba(31,143,77,0) 68%); pointer-events: none }
#visit-actions-list-page .va-summary-header { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px }
#visit-actions-list-page .va-summary-header-copy { max-width: 620px }
#visit-actions-list-page .va-summary-eyebrow { margin: 0 0 5px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: #1977bd }
#visit-actions-list-page .va-summary-title { margin: 0; font-size: 22px; line-height: 1.05; color: #16364b; font-weight: 700 }
#visit-actions-list-page .va-summary-subtitle { margin: 5px 0 0; font-size: 12px; line-height: 1.35; color: #557184; max-width: 54ch }
#visit-actions-list-page .va-summary-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(25,119,189,.10); color: #1258a0; font-size: 11px; font-weight: 700; white-space: nowrap }
#visit-actions-list-page .va-summary-spinner { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(25, 119, 189, 0.22); border-top-color: #1977bd; animation: visit-actions-overlay-spin 0.75s linear infinite; flex-shrink: 0 }
#visit-actions-list-page .va-summary-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; align-items: start }
#visit-actions-list-page .va-summary-card { display: flex; flex-direction: column; min-height: 130px; padding: 12px 12px 10px; border-radius: 14px; border: 1px solid rgba(214, 226, 235, 0.95); background: rgba(255,255,255,.9); backdrop-filter: blur(10px); box-shadow: 0 6px 16px rgba(21, 58, 80, 0.06); overflow: hidden }
#visit-actions-list-page .va-summary-card.is-pending { border-color: rgba(25, 119, 189, 0.28); box-shadow: 0 8px 18px rgba(25, 119, 189, 0.08) }
#visit-actions-list-page .va-summary-card-title { margin: 0 0 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #7b8e9b }
#visit-actions-list-page .va-summary-card-value { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 22px; line-height: 1.05; font-weight: 700; color: #16364b; word-break: break-word; min-width: 0 }
#visit-actions-list-page .va-summary-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; min-width: 20px; color: #1977bd; flex-shrink: 0 }
#visit-actions-list-page .va-summary-card-icon[data-icon]:before { margin: 0; float: none; font-size: 20px; line-height: 1; color: inherit; vertical-align: middle }
#visit-actions-list-page .va-summary-card-value-text { min-width: 0; overflow-wrap: anywhere }
#visit-actions-list-page .va-summary-card-helper { margin: 5px 0 0; font-size: 11px; line-height: 1.35; color: #607887; min-height: 0; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap }
#visit-actions-list-page .va-summary-breakdown { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e6edf2 }
#visit-actions-list-page .va-summary-breakdown summary { cursor: pointer; list-style: none; font-size: 11px; font-weight: 700; color: #1977bd; display: inline-flex; align-items: center; gap: 6px }
#visit-actions-list-page .va-summary-breakdown summary::-webkit-details-marker { display: none }
#visit-actions-list-page .va-summary-breakdown summary:before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 140ms ease }
#visit-actions-list-page .va-summary-breakdown[open] summary:before { transform: rotate(225deg) translate(-1px, -1px) }
#visit-actions-list-page .va-summary-breakdown-list { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow: auto }
#visit-actions-list-page .va-summary-breakdown-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #f6f9fb; color: #294456 }
#visit-actions-list-page .va-summary-breakdown-item strong { font-size: 12px; font-weight: 700; color: #16364b }
#visit-actions-list-page .va-summary-breakdown-item span { font-size: 11px; line-height: 1.35; color: #607887 }
#visit-actions-list-page .va-summary-breakdown-empty { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #f6f9fb; color: #607887; font-size: 11px; line-height: 1.35 }
#visit-actions-list-page .va-table-wrapper { position: relative; overflow-x: auto; border-radius: 8px; border: 1px solid #e0e0e0; box-shadow: 0 1px 6px rgba(0,0,0,.07) }
#visit-actions-list-page .va-table-wrapper.has-horizontal-scroll { cursor: -webkit-grab; cursor: grab }
#visit-actions-list-page .va-table-wrapper.has-horizontal-scroll.is-dragging { cursor: -webkit-grabbing; cursor: grabbing; user-select: none }
#visit-actions-list-page .va-section-divider { display: flex; align-items: center; gap: 14px; margin: 26px auto 14px; max-width: 1440px; color: #5a7182 }
#visit-actions-list-page .va-section-divider:before,
#visit-actions-list-page .va-section-divider:after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(25,119,189,0), rgba(25,119,189,.35), rgba(31,143,77,.20)) }
#visit-actions-list-page .va-section-divider:after { background: linear-gradient(90deg, rgba(31,143,77,.20), rgba(25,119,189,.35), rgba(25,119,189,0)) }
#visit-actions-list-page .va-section-divider-label { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; border: 1px solid #d8e4ec; background: linear-gradient(135deg, #ffffff 0%, #f4f8fb 100%); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #355468; box-shadow: 0 6px 16px rgba(20, 53, 74, .06) }
#visit-actions-list-page .va-notes-section { margin: 0 auto; max-width: 1440px }
#visit-actions-list-page .va-notes-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px }
#visit-actions-list-page .va-notes-title { margin: 0; font-size: 22px; line-height: 1.05; color: #16364b; font-weight: 700 }
#visit-actions-list-page .va-notes-subtitle { margin: 5px 0 0; font-size: 12px; line-height: 1.35; color: #607887 }
#visit-actions-list-page #visit-actions-notes-message.va-info-message { margin: 0 0 14px; text-align: center; color: #7b8790; font-weight: 600; background: #f6f8fa; border: 1px solid #e1e6ea; border-radius: 8px; padding: 10px 14px }
#visit-actions-list-page #visit-actions-notes-table { width: 100%; border-spacing: 0; border-collapse: collapse; font-size: 14px }
#visit-actions-list-page #visit-actions-notes-table thead { background: #3b6178; color: #fff }
#visit-actions-list-page #visit-actions-notes-table thead th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; border: none }
#visit-actions-list-page #visit-actions-notes-table tbody tr:nth-child(even) { background: #f7f9fb }
#visit-actions-list-page #visit-actions-notes-table tbody tr:hover { background: #eaf4ff }
#visit-actions-list-page #visit-actions-notes-table tbody td { padding: 10px 16px; border-bottom: 1px solid #e8e8e8; color: #333; vertical-align: top }
#visit-actions-list-page #visit-actions-notes-table tbody td.cliente { min-width: 180px }
#visit-actions-list-page #visit-actions-notes-table tbody td.comentario { min-width: 320px; white-space: normal }
#visit-actions-list-page #visit-actions-notes-table tbody td.adjunto a { color: #1977bd; font-weight: 600; text-decoration: none }
#visit-actions-list-page #visit-actions-notes-table tbody td.adjunto a:hover { text-decoration: underline }
#visit-actions-list-page #visit-actions-list-table { width: 100%; border-spacing: 0; border-collapse: collapse; font-size: 14px }
#visit-actions-list-page #visit-actions-list-table thead { position: sticky; top: 0; z-index: 1; background: #1977bd; color: #fff }
#visit-actions-list-page #visit-actions-list-table thead th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; border: none }
#visit-actions-list-page #visit-actions-list-table thead th.select,
#visit-actions-list-page #visit-actions-list-table tbody td.select { width: 42px; min-width: 42px; text-align: center; padding-left: 10px; padding-right: 10px }
#visit-actions-list-page #visit-actions-list-table thead th.detail-export,
#visit-actions-list-page #visit-actions-list-table tbody td.detail-export { width: 52px; min-width: 52px; text-align: center; padding-left: 8px; padding-right: 10px }
#visit-actions-list-page #visit-actions-list-table thead th.total-time,
#visit-actions-list-page #visit-actions-list-table tbody td.total-time { width: 118px; min-width: 118px }
#visit-actions-list-page #visit-actions-list-table thead th.select input,
#visit-actions-list-page #visit-actions-list-table tbody td.select input { width: 16px; height: 16px; cursor: pointer }
#visit-actions-list-page #visit-actions-list-table tbody td.detail-export .visit-detail-export-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 8px; border: 2px solid #1f8f4d; background: #1f8f4d; color: #ffffff; font-weight: 600; cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms, opacity 120ms }
#visit-actions-list-page #visit-actions-list-table tbody td.detail-export .visit-detail-export-button:hover { background: #197a41; border-color: #197a41 }
#visit-actions-list-page #visit-actions-list-table tbody td.detail-export .visit-detail-export-button[data-icon]:before { margin: 0; font-size: 18px; color: #ffffff }
#visit-actions-list-page #visit-actions-list-table tbody td.detail-export .visit-detail-export-button.is-loading,
#visit-actions-list-page #visit-actions-list-table tbody td.detail-export .visit-detail-export-button:disabled { background: #8fbda0; border-color: #8fbda0; color: #edf5f0; cursor: wait; opacity: 0.9 }
#visit-actions-list-page #visit-actions-list-table tbody td.detail-export .visit-detail-export-button.is-loading[data-icon]:before,
#visit-actions-list-page #visit-actions-list-table tbody td.detail-export .visit-detail-export-button:disabled[data-icon]:before { color: #edf5f0 }
#visit-actions-list-page #visit-actions-list-table tbody tr { cursor: pointer; transition: background 100ms }
#visit-actions-list-page #visit-actions-list-table tbody tr:nth-child(even) { background: #f5f8fd }
#visit-actions-list-page #visit-actions-list-table tbody tr:hover { background: #dceeff }
#visit-actions-list-page #visit-actions-list-table tbody td { padding: 10px 16px; border-bottom: 1px solid #e8e8e8; color: #333; white-space: nowrap }
#visit-actions-list-page #visit-actions-list-table tbody td.cliente { white-space: normal; min-width: 160px }
#visit-actions-list-page #visit-actions-list-table tbody td.tipo_evento { font-weight: 500 }
#visit-actions-list-page #visit-actions-list-table thead th.compra,
#visit-actions-list-page #visit-actions-list-table tbody td.compra { width: 140px; min-width: 140px }
#visit-actions-list-page #visit-actions-list-table tbody td.compra { color: #2e7d32; font-weight: 600 }
#visit-actions-list-page #visit-actions-list-table tbody td.compra .purchase-badge { display: inline-flex; align-items: center; white-space: nowrap }
#visit-actions-list-page #visit-actions-list-table tbody td.compra .purchase-badge[data-icon]:before { color: #2e7d32; font-size: 18px; margin-right: 4px }
#visit-actions-list-page #visit-actions-list-table tbody td.cliente .self-activity-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #fff3e0; color: #e65100; font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: middle }
#visit-actions-list-page #visit-actions-list-table tbody td.cliente .self-activity-badge[data-icon]:before { font-size: 14px; margin-right: 3px; color: #e65100 }
#visit-actions-list-page #visit-actions-list-table tbody td.total-time { color: #0f6a67; font-weight: 700 }
@keyframes visit-actions-search-glow {
   0% { box-shadow: 0 0 0 2px rgba(25, 119, 189, 0.18), 0 0 0 0 rgba(25, 119, 189, 0.22); }
   100% { box-shadow: 0 0 0 2px rgba(25, 119, 189, 0.32), 0 0 12px 2px rgba(25, 119, 189, 0.34); }
}
@keyframes visit-actions-overlay-spin {
   0% { transform: rotate(0deg) }
   100% { transform: rotate(360deg) }
}
@media (max-width: 600px) {
   #visit-actions-list-page { padding: 12px 8px }
   #visit-actions-list-page .va-filters { padding: 12px; gap: 10px 12px }
   #visit-actions-list-page .va-summary-dashboard { padding: 14px 12px }
   #visit-actions-list-page .va-section-divider { gap: 10px; margin-top: 22px }
   #visit-actions-list-page .va-section-divider-label { padding: 6px 11px; font-size: 10px }
   #visit-actions-list-page .va-notes-title { font-size: 19px }
   #visit-actions-list-page .va-summary-header { flex-direction: column; align-items: stretch }
   #visit-actions-list-page .va-summary-title { font-size: 19px }
   #visit-actions-list-page .va-summary-grid { grid-template-columns: 1fr }
   #visit-actions-list-page .va-filter-group { flex: 1 1 100%; max-width: none }
   #visit-actions-list-page .va-filter-group.va-filter-group-checkbox { flex-basis: 100%; max-width: none; align-items: flex-start }
   #visit-actions-list-page .va-checkbox-label { min-height: 34px }
   #visit-actions-list-page .va-actions-row { width: 100%; flex-direction: column; align-items: stretch }
   #visit-actions-list-page #visit-actions-clear-filters,
   #visit-actions-list-page #visit-actions-show-route,
   #visit-actions-list-page #visit-actions-plan-route,
   #visit-actions-list-page #visit-actions-export-list,
   #visit-actions-list-page #visit-actions-agent-comparison { width: 100% }
}
@media (max-width: 1024px) {
   #visit-actions-list-page .va-filter-group { flex: 1 1 calc(50% - 12px); max-width: calc(50% - 12px) }
   #visit-actions-list-page .va-filter-group.va-filter-group-checkbox { flex: 0 0 96px; max-width: 96px }
   #visit-actions-list-page .va-table-wrapper { border: none; box-shadow: none; background: transparent; padding: 4px 0 }
   #visit-actions-list-page #visit-actions-notes-table { min-width: 880px }
   #visit-actions-list-page #visit-actions-list-table { border: none }
   #visit-actions-list-page #visit-actions-list-table thead { display: none }
   #visit-actions-list-page #visit-actions-list-table tbody tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      grid-template-areas:
         "tipo    tipo"
         "fecha   hora"
         "total   total"
         "agente  compra"
         "cliente cliente"
         "pais    poblacion"
         "provincia provincia";
      column-gap: 12px;
      row-gap: 4px;
      position: relative;
      border: 1px solid #dde3ea;
      border-left: 4px solid #1977bd;
      border-radius: 8px;
      margin-bottom: 8px;
      padding: 12px 96px 12px 14px;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,.06);
   }
   #visit-actions-list-page #visit-actions-list-table tbody tr:nth-child(even) { background: #f9fafb }
   #visit-actions-list-page #visit-actions-list-table tbody tr:hover { background: #eaf4ff; border-left-color: #1258a0 }
   #visit-actions-list-page #visit-actions-list-table tbody td { display: flex; flex-direction: column; justify-content: flex-start; border: none; padding: 6px 0 2px; white-space: normal; font-size: 14px; color: #263238; overflow: hidden; text-overflow: ellipsis }
   #visit-actions-list-page #visit-actions-list-table tbody td::before { content: attr(data-label); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #90a4ae; margin-bottom: 2px; white-space: nowrap }
   #visit-actions-list-page #visit-actions-list-table tbody td.tipo_evento { grid-area: tipo; }
   #visit-actions-list-page #visit-actions-list-table tbody td.fecha       { grid-area: fecha; }
   #visit-actions-list-page #visit-actions-list-table tbody td.hora        { grid-area: hora; }
   #visit-actions-list-page #visit-actions-list-table tbody td.total-time  { grid-area: total; }
   #visit-actions-list-page #visit-actions-list-table tbody td.compra      { grid-area: compra; }
   #visit-actions-list-page #visit-actions-list-table tbody td.agente      { grid-area: agente; }
   #visit-actions-list-page #visit-actions-list-table tbody td.cliente     { grid-area: cliente; }
   #visit-actions-list-page #visit-actions-list-table tbody td.pais        { grid-area: loc; }
   #visit-actions-list-page #visit-actions-list-table tbody td.poblacion   { display: none; }
   #visit-actions-list-page #visit-actions-list-table tbody td.provincia   { display: none; }
   #visit-actions-list-page #visit-actions-list-table tbody td.tipo_evento { flex-direction: row; align-items: center; padding: 0 0 8px; border-bottom: 1px solid #eceff1; margin-bottom: 2px }
   #visit-actions-list-page #visit-actions-list-table tbody td.tipo_evento::before { display: none }
   #visit-actions-list-page #visit-actions-list-table tbody td.tipo_evento::after { content: "" }
   #visit-actions-list-page #visit-actions-list-table tbody td.tipo_evento { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #1565c0 }
   #visit-actions-list-page #visit-actions-list-table tbody td.fecha { font-size: 15px; font-weight: 600; color: #1a237e }
   #visit-actions-list-page #visit-actions-list-table tbody td.hora { font-size: 14px; color: #546e7a }
   #visit-actions-list-page #visit-actions-list-table tbody td.total-time { font-size: 14px; color: #0f6a67; font-weight: 700 }
   #visit-actions-list-page #visit-actions-list-table tbody td.compra { font-size: 13px; color: #2e7d32 }
   #visit-actions-list-page #visit-actions-list-table tbody td.compra .purchase-badge[data-icon]:before { font-size: 17px }
   #visit-actions-list-page #visit-actions-list-table tbody td.agente { font-weight: 600 }
   #visit-actions-list-page #visit-actions-list-table tbody td.cliente { color: #37474f }
   #visit-actions-list-page #visit-actions-list-table tbody td.pais { grid-area: pais; font-size: 12px; color: #78909c; padding-bottom: 4px }
   #visit-actions-list-page #visit-actions-list-table tbody td.pais::before { font-size: 8px }
   #visit-actions-list-page #visit-actions-list-table tbody td.poblacion { grid-area: poblacion; display: flex }
   #visit-actions-list-page #visit-actions-list-table tbody td.provincia { grid-area: provincia; display: flex }
   #visit-actions-list-page #visit-actions-list-table tbody td.detail-export { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; width: auto; min-width: 0; padding: 0; border: none }
   #visit-actions-list-page #visit-actions-list-table tbody td.detail-export::before { display: none }
   #visit-actions-list-page #visit-actions-list-table tbody td.select { position: absolute; top: 58px; right: 21px; display: flex; align-items: center; justify-content: center; width: auto; min-width: 0; padding: 0; border: none }
   #visit-actions-list-page #visit-actions-list-table tbody td.select::before { display: none }
   #visit-actions-list-page #visit-actions-list-table tbody td.select input[type="checkbox"] { width: 20px; height: 20px }
   #visit-actions-list-page #visit-actions-list-table tbody td:not(.select):not(.detail-export):empty { display: none }
}
@media (min-width: 601px) and (max-width: 1024px) {
   #visit-actions-list-page { padding: 16px 12px }
   #visit-actions-list-page .va-actions-row { justify-content: flex-start }
}
@media (max-width: 480px) {
   #visit-actions-list-page .va-filter-group { flex-basis: 100%; max-width: none }
   #visit-actions-list-page #visit-actions-list-table tbody tr {
      grid-template-columns: 1fr;
      grid-template-areas:
         "tipo"
         "fecha"
         "hora"
         "total"
         "agente"
         "compra"
         "cliente"
         "pais"
         "poblacion"
         "provincia";
      padding-right: 60px;
   }
   #visit-actions-list-page #visit-actions-list-table tbody td.hora,
   #visit-actions-list-page #visit-actions-list-table tbody td.total-time,
   #visit-actions-list-page #visit-actions-list-table tbody td.agente,
   #visit-actions-list-page #visit-actions-list-table tbody td.compra,
   #visit-actions-list-page #visit-actions-list-table tbody td.cliente,
   #visit-actions-list-page #visit-actions-list-table tbody td.pais,
   #visit-actions-list-page #visit-actions-list-table tbody td.poblacion,
   #visit-actions-list-page #visit-actions-list-table tbody td.provincia { grid-area: auto }
   #visit-actions-list-page #visit-actions-list-table tbody td.detail-export { top: 12px; right: 12px }
   #visit-actions-list-page #visit-actions-list-table tbody td.select { top: 56px; right: 19px }
}
body.ac-modal-open { overflow: hidden }
.ac-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center }
.ac-modal[hidden] { display: none }
.ac-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 25, 40, 0.65); backdrop-filter: blur(4px); animation: ac-fade-in 250ms ease }
.ac-modal-container { position: relative; z-index: 1; display: flex; flex-direction: column; width: 96vw; height: 94vh; max-width: 1600px; border-radius: 18px; background: #f8fafb; box-shadow: 0 24px 64px rgba(10, 25, 40, 0.35); overflow: hidden; animation: ac-slide-up 350ms cubic-bezier(0.22, 1, 0.36, 1) }
.ac-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 14px; background: linear-gradient(135deg, #1977bd 0%, #1258a0 100%); color: #fff; flex-shrink: 0 }
.ac-modal-title { color:white; margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em }
.ac-modal-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background 150ms }
.ac-modal-close:hover { background: rgba(255,255,255,0.28) }
.ac-modal-toolbar { display: flex; flex-direction: column; gap: 10px; padding: 12px 24px; border-bottom: 1px solid #e1e8ed; flex-shrink: 0; background: #fff }
.ac-modal-filter-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.ac-agent-search { font-size: 12px; font-weight: 500; padding: 5px 10px; border: 1px solid #d0d8df; border-radius: 6px; background: #fff; color: #16364b; height: 32px; min-width: 150px; outline: none; transition: border-color 150ms }
.ac-agent-search:focus { border-color: #1977bd }
.ac-agent-search::placeholder { color: #90a4ae }
.ac-country-filter { font-size: 12px; font-weight: 600; padding: 5px 8px; border: 1px solid #d0d8df; border-radius: 6px; background: #fff; color: #16364b; height: 32px; outline: none; cursor: pointer; transition: border-color 150ms }
.ac-country-filter:focus { border-color: #1977bd }
.ac-modal-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-height: 140px; overflow-y: auto }
.ac-filter-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #607887; white-space: nowrap }
.ac-agent-chips { display: flex; flex-wrap: wrap; gap: 6px }
.ac-agent-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; border: 2px solid var(--ac-chip-color, #1977bd); background: #fff; font-size: 12px; font-weight: 600; color: #16364b; cursor: pointer; transition: all 180ms; user-select: none }
.ac-agent-chip:hover { background: #f0f6fb }
.ac-agent-chip.is-muted { opacity: 0.38; border-color: #c0c8cf; text-decoration: line-through }
.ac-agent-chip.is-muted .ac-chip-dot { background: #c0c8cf !important }
.ac-agent-chip.is-loading { pointer-events: none }
.ac-agent-chip.is-loading .ac-chip-dot { background: transparent !important; border: 2px solid var(--ac-chip-color, #1977bd); border-top-color: transparent; animation: ac-spin 0.65s linear infinite }
.ac-chip-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; transition: background 180ms; box-sizing: border-box }
.ac-modal-date-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap }
.ac-modal-period { font-size: 12px; font-weight: 600; color: #607887; white-space: nowrap; margin-left: auto }
.ac-date-input { font-size: 12px; font-weight: 600; padding: 4px 8px; border: 1px solid #d0d8df; border-radius: 6px; background: #fff; color: #16364b; height: 32px; outline: none; transition: border-color 150ms }
.ac-date-input:focus { border-color: #1977bd }
.ac-date-separator { font-size: 13px; color: #90a4ae; font-weight: 600 }
.ac-date-apply-btn { font-size: 12px; font-weight: 700; padding: 5px 14px; border: none; border-radius: 6px; background: #1977bd; color: #fff; cursor: pointer; height: 32px; white-space: nowrap; transition: background 150ms }
.ac-date-apply-btn:hover { background: #1565a0 }
.ac-modal-body { flex: 1; overflow-y: auto; padding: 20px 24px 30px }
.ac-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #607887 }
.ac-loading[hidden] { display: none }
.ac-loading-spinner { width: 36px; height: 36px; border-radius: 50%; border: 4px solid rgba(25,119,189,0.18); border-top-color: #1977bd; animation: ac-spin 0.75s linear infinite; margin-bottom: 14px }
.ac-loading p { margin: 0; font-size: 13px; font-weight: 600 }
.ac-error-message { text-align: center; padding: 30px 20px; color: #b71c1c; font-weight: 600; font-size: 14px }
.ac-error-message[hidden] { display: none }
.ac-charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; animation: ac-fade-in 400ms ease }
.ac-chart-card { background: #fff; border-radius: 14px; border: 1px solid #e1e8ed; box-shadow: 0 4px 14px rgba(15, 43, 61, 0.06); overflow: hidden; transition: box-shadow 200ms, transform 200ms }
.ac-chart-card:hover { box-shadow: 0 8px 24px rgba(15, 43, 61, 0.12); transform: translateY(-2px) }
.ac-chart-card-wide { grid-column: 1 / -1 }
.ac-chart-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px }
.ac-chart-header h3 { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #607887 }
.ac-chart-expand { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: #90a4ae; cursor: pointer; transition: background 150ms, color 150ms }
.ac-chart-expand:hover { background: #edf2f7; color: #455a64 }
.ac-chart-expand[data-icon]:before { font-size: 18px; margin: 0; float: none }
.ac-chart-wrap { position: relative; height: 260px; padding: 0 16px 16px }
.ac-expanded-overlay { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; background: rgba(10, 25, 40, 0.72); backdrop-filter: blur(6px); animation: ac-fade-in 200ms ease }
.ac-expanded-overlay[hidden] { display: none }
.ac-expanded-container { display: flex; flex-direction: column; width: 92vw; height: 86vh; max-width: 1400px; border-radius: 16px; background: #fff; box-shadow: 0 20px 60px rgba(10, 25, 40, 0.4); overflow: hidden; animation: ac-slide-up 300ms cubic-bezier(0.22, 1, 0.36, 1) }
.ac-expanded-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid #e1e8ed; flex-shrink: 0 }
.ac-expanded-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #16364b }
.ac-expanded-body { flex: 1; padding: 20px; position: relative }
.ac-expanded-body canvas { position: absolute; inset: 16px }
#visit-actions-list-page #visit-actions-agent-comparison { height: 38px; border-radius: 6px; border: 2px solid #8e44ad; background: #8e44ad; color: #ffffff; font-weight: 600; min-width: 140px }
#visit-actions-list-page #visit-actions-agent-comparison:hover { background: #7a3a96; border-color: #7a3a96 }
#visit-actions-list-page #visit-actions-agent-comparison:disabled { background: #c39bd3; border-color: #c39bd3; color: #f0e6f6 }
#visit-actions-list-page #visit-actions-agent-comparison[data-icon]:before { color: #ffffff }

@keyframes ac-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes ac-slide-up { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }
@keyframes ac-spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }

@media (max-width: 900px) {
   .ac-charts-grid { grid-template-columns: 1fr }
   .ac-chart-card-wide { grid-column: auto }
   .ac-modal-container { width: 99vw; height: 97vh; border-radius: 10px }
}
@media (max-width: 600px) {
   .ac-modal-header { padding: 14px 16px 12px }
   .ac-modal-title { font-size: 16px }
   .ac-modal-toolbar { padding: 10px 16px }
   .ac-modal-body { padding: 14px 12px 20px }
   .ac-chart-wrap { height: 200px }
   .ac-expanded-container { width: 98vw; height: 94vh; border-radius: 8px }
   .ac-modal-date-row { flex-wrap: wrap }
   .ac-date-input { flex: 1; min-width: 100px }
   .ac-modal-filter-controls { flex-direction: column; align-items: stretch }
   .ac-agent-search { min-width: auto }
   #visit-actions-list-page #visit-actions-agent-comparison { width: 100% }
}

#visit-actions-list-dialog .scroll { padding: 0; width: 100%; display: flex; flex-direction: column; max-height: 90vh }
@media (min-width: 800px) {
   #visit-actions-list-dialog .scroll { width: 860px; max-width: 860px; }
}
#visit-actions-list-dialog .vad-header { background: #1977bd; padding: 20px 24px 18px; color: #fff; flex-shrink: 0; position: relative }
#visit-actions-list-dialog .vad-export-button { position: absolute; top: 18px; right: 24px; height: 34px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font-weight: 600; border-radius: 6px }
#visit-actions-list-dialog .vad-export-button:hover { background: rgba(255,255,255,.22) }
#visit-actions-list-dialog .vad-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #b0bec5; margin-bottom: 12px }
#visit-actions-list-dialog .vad-meta { display: flex; flex-wrap: wrap; gap: 8px }
#visit-actions-list-dialog .vad-meta-item { display: inline-flex; align-items: center; background: rgba(255,255,255,.1); border-radius: 20px; padding: 5px 14px; font-size: 13px; color: #eceff1; gap: 5px }
#visit-actions-list-dialog .vad-meta-item strong { color: #b0bec5; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em }
#visit-actions-list-dialog .vad-body { overflow-y: auto; padding: 20px 24px; flex: 1; box-sizing: border-box }
#visit-actions-list-dialog .va-table-wrapper { border-radius: 8px; border: 1px solid #dde1e4; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06) }
#visit-actions-list-dialog #visit-actions-detail-table { width: 100%; border-spacing: 0; border-collapse: collapse; font-size: 13px }
#visit-actions-list-dialog #visit-actions-detail-table thead { background: #1977bd; color: #fff }
#visit-actions-list-dialog #visit-actions-detail-table thead th { padding: 10px 14px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; border: none; white-space: nowrap }
#visit-actions-list-dialog #visit-actions-detail-table tbody tr:nth-child(even) { background: #f5f6f8 }
#visit-actions-list-dialog #visit-actions-detail-table tbody tr:hover { background: #e4eaed }
#visit-actions-list-dialog #visit-actions-detail-table tbody td { padding: 9px 14px; border-bottom: 1px solid #e8e8e8; color: #333; vertical-align: top }
#visit-actions-list-dialog #visit-actions-detail-table tbody td.hora { white-space: nowrap; color: #546e7a; font-weight: 600; font-size: 12px }
#visit-actions-list-dialog #visit-actions-detail-table tbody td.accion { white-space: nowrap; font-weight: 500 }
#visit-actions-list-dialog #visit-actions-detail-table tbody td.detalle { word-break: break-word; max-width: 320px }
@media (max-width: 600px) {
   #visit-actions-list-dialog .vad-header { padding: 14px 16px; }
   #visit-actions-list-dialog .vad-export-button { position: static; margin-bottom: 10px; width: 100% }
   #visit-actions-list-dialog .vad-body   { padding: 12px; }
   #visit-actions-list-dialog .vad-meta-item { font-size: 12px; padding: 4px 10px; }
}

/* CHIP COMPONENT */
.chip { height: 32px; outline: 0; padding: 0; box-sizing: border-box; display: inline-flex; align-items: center; border-radius: 16px; text-decoration: none; background-color: #616161;}
.label-chip { overflow: hidden; padding-left: 12px; padding-right: 12px; color: white;}

/** Forms */
.form-container.horizontal-form {
   display: flex;
   flex-direction: row;
}
.form-control {
   display: flex;
   flex-direction: column;
}
.form-control.col-2 {
   width: calc((100% / 12) * 2);
   margin-right: 30px;
}
/** Material select */
.material-select-container {
   position: relative;
}
.material-select-container label {
   font-size: 1em;
   position: relative;
   display: block;
   transform: translate(5px, 26px);
   color: #444;
   -webkit-transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   -moz-transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   -o-transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   transform-origin: top left;
}
.material-select-container label.shrink {
   transform: translate(0, 0) scale(0.9);
}
.material-select-container label.focused {
   color: #1976d2;
}
.material-select-control {
   position: relative;
}
select.material-select {
   background: transparent;
   display: block;
   font-size: 16px;
   font-family: sans-serif;
   color: #444;
   line-height: 1.3;
   padding: .4em 1.4em .2em 0;
   width: 100%;
   max-width: 100%; /* useful when width is set to anything other than 100% */
   box-sizing: border-box;
   margin: 0;
   border: none;
   border-bottom: 1px solid #aaa;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   outline: none;
   transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
select.material-select.focused {
   border-bottom-color: #1976d2;
}
/* Hide arrow icon in IE browsers */
select.material-select::-ms-expand {
   display: none;
}
/* Hover style */
select.material-select:hover {
   border-color: #888;
   outline: none;
}
/* Set options to normal weight */
select.material-select option {
   font-weight:normal;
}
/* Disabled styles */
select.material-select:disabled, select.material-select[aria-disabled=true] {
   color: #888;
}
select.material-select:disabled:hover, select.material-select[aria-disabled=true] {
   border-color: #aaa;
}
.material-select-icon {
   top: calc(50% - 12px);
   color: #fff;
   right: 0;
   position: absolute;
   pointer-events: none;
   fill: #666;
   width: 1em;
   height: 1em;
   display: inline-block;
   font-size: 1.5rem;
   transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   flex-shrink: 0;
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}
/** Material select */

/** Material input */
.material-input-container {
   position: relative;
}
.material-input-container label {
   font-size: 1em;
   position: relative;
   display: block;
   transform: translate(5px, 26px);
   color: #444;
   -webkit-transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   -moz-transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   -o-transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   transform-origin: top left;
}
.material-input-container label.shrink {
   transform: translate(0, 0) scale(0.9);
}
.material-input-container label.focused {
   color: #1976d2;
}
.material-input-control {
   position: relative;
}
input.material-input {
   background: transparent;
   display: block;
   font-size: 16px;
   font-family: sans-serif;
   color: #444;
   line-height: 1.3;
   padding: .4em 1.4em .2em 0;
   width: 100%;
   max-width: 100%; /* useful when width is set to anything other than 100% */
   box-sizing: border-box;
   margin: 0;
   border: none;
   border-bottom: 1px solid #aaa;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   outline: none;
   transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
input.material-input.focused {
   border-bottom-color: #1976d2;
}
/* Hide arrow icon in IE browsers */
input.material-input::-ms-expand {
   display: none;
}
/* Hover style */
input.material-input:hover {
   border-color: #888;
   outline: none;
}
/* Disabled styles */
input.material-input:disabled, input.material-input[aria-disabled=true] {
   color: #888;
}
input.material-input:disabled:hover, input.material-input[aria-disabled=true] {
   border-color: #aaa;
}
/** Material input */
.ModeNoShowPrice { display: none;}
.ModeShowPrice { position: relative !important; margin-top: -17px !important; font-size: 10px !important; margin-right: 1px !important; font-weight: bold !important; }
#section-customers table thead {
   position: sticky !important;
   z-index: 500;
   background-color: white
}

#totalData {
   position: sticky !important;
   z-index: 998;
   background-color: #ddc
}

#section-customers form.new-customer-form {
   position: sticky;
   z-index: 2;
   top: 59px;
   background-color: white;
   padding-top: 27px;
   width: 104% !important;
   padding-right: 4%
}

[data-icon].order-button:not(a)::before { font-size: 20px !important; color: var(--icon-color, #c7c7c7 ) !important }
.sort-button-container {
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
}
#section-customers td.eteria-col { width:92px; padding:0 4px; text-align:center }
#eteriaSort { position:absolute; top:9px; left:0; right:0; height:23px; display:flex; align-items:center; justify-content:center; white-space:nowrap; cursor:pointer; color:Black }
#eteriaSort .eteria-ring-icon { flex:none; width:15px; height:15px; margin-right:3px; fill:none; stroke:#555; stroke-width:2.4; stroke-linejoin:round }
#eteriaSort .order-button[data-icon]:before { vertical-align:middle }
.eteria-switch { position:relative; display:inline-block; width:28px; height:16px; margin:0; padding:0; border:none; border-radius:8px; background:rgba(0,0,0,0.14); cursor:pointer; vertical-align:middle; transition:background-color 0.2s ease; -webkit-tap-highlight-color:transparent }
.eteria-switch .eteria-switch-thumb { position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:White; box-shadow:0 1px 2px rgba(0,0,0,0.2); transition:transform 0.2s ease }
.eteria-switch:hover { background:rgba(0,0,0,0.22) }
.eteria-switch.on { background:#3C5D74 }
.eteria-switch.on:hover { background:#4a6f8a }
.eteria-switch.on .eteria-switch-thumb { transform:translateX(12px) }
.eteria-switch:focus-visible { outline:2px solid #3C5D74; outline-offset:2px }
.eteria-switch.busy { cursor:progress; opacity:0.5 }
#notes-col-header { cursor: pointer; user-select: none; -webkit-user-select: none; display: flex; flex-direction: row; align-items: center; justify-content: center }
#notes-col-header[data-icon]:before { font-size: 13px !important }
.notes-sort-arrow[data-icon]:before { font-size: 20px !important; color: var(--icon-color, #c7c7c7) !important }
#purchased-this-year:hover { background-color: #06917d; color: white !important;}
#purchased-last-year:hover { background-color: #fca306; color: white !important;}
#target-client:hover { background-color: #1478d1; color: white !important;}
#lost-client:hover { background-color: red; color: white !important;}
#my-location:hover { background-color: black; color: white !important;}
#download-map-clients { position: absolute; left: 5%; top: 87%; z-index: 805; display: none }
#download-map-clients s::before { color: white; margin-right: 5px; vertical-align: text-bottom; font-size: 19px }
#download-all-map-clients { font-size: 13px; background-color: var(--SubmitButton); color: white; border: none; padding: 6px; border-radius: 5px; text-align: center; position: relative; left: 14% }
#download-all-map-clients s::before { color: white; margin-right: 5px; vertical-align: text-bottom; font-size: 15px }
#customer-financial-details { background-color: #f3f3f3; animation: fadeIn; animation-duration: 0.3s }
#financial-details-table-body { background-color: white }
#financial-details-table { padding: 1% 3%; text-align: center; border-collapse: separate; border-spacing: 0; line-height: 2; font-size: 13px }
#financial-details-table thead { color: white }
#financial-details-table th { background-color: #658fae }
#financial-details-table tr td:nth-child(2) { text-align: left; padding-left: 10px }
#financial-details-table tr td { border-bottom: 1px solid #cecece }
#financial-details-table thead th:first-child { border-top-left-radius: 10px }
#financial-details-table thead th:last-child { border-top-right-radius: 10px }
#financial-details-table thead tr td { padding: 4px }
.deudaCliente { color: red; font-weight: bold }
.buttonFinancial { color: gray; padding: 4px; border-radius: 4px; background-color: white; border: 1px solid gray }
#financial-details-table-body tr:hover { background-color: rgb(239, 249, 255) }
.check-pending-client { margin-left: 10px !important; }
#download-all-pending-clients { display: block; margin-top: 15px; margin-right: auto; margin-bottom: 30px; margin-left: auto; }
#app-stores-icons { display: flex; justify-content: start; align-items: center }
.icon-link-app { margin-right: 10px; margin-top: 35px }
#select-all-customers { margin-left: 10px }
#vdue-category-controls { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; width: 100%; margin-top: 10px; padding: 10px 14px; border: 1px solid #d2e0ee; border-radius: 12px; background: #f4f8fc; box-sizing: border-box }
#vdue-category-controls #choicesVdueCategoryContainer { flex: 1 1 260px; min-width: 200px; max-width: 560px }
.vdue-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 8px; border: 1px solid #c2d4e4; background: #fff; color: #1e3a52; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s }
.vdue-btn:hover { background: #edf4fb; border-color: #9ab8d2 }
.vdue-btn-primary { background: #3472a8; border-color: #2a5f90; color: #fff }
.vdue-btn-primary:hover { background: #2a5f90 !important; border-color: #1e4870 !important }
.vdue-btn-success { background: #2e7d52; border-color: #246040; color: #fff }
.vdue-btn-success:hover { background: #246040 !important; border-color: #1b4a30 !important }
.vdue-btn-danger { background: #fff; border-color: #d9a0a0; color: #8b1a1a }
.vdue-btn-danger:hover { background: #fff5f5 !important; border-color: #c06060 !important }
.vdue-btn-sm { padding: 4px 10px; font-size: 0.78rem }
#vdue-category-dialog { width: min(1160px, calc(100vw - 2rem)); max-width: min(1160px, calc(100vw - 2rem)); border: none; border-radius: 16px; box-shadow: 0 12px 48px rgba(10, 30, 55, 0.28); padding: 0; overflow: hidden }
#vdue-category-dialog::backdrop { background: rgba(5, 20, 40, 0.52); backdrop-filter: blur(3px) }
.vdue-dialog-body { display: flex; flex-direction: column; max-height: min(92vh, 900px); overflow-y: auto; font-family: "Open Sans", system-ui, sans-serif; font-size: 0.9rem; color: #1a3348 }
.vdue-dialog-header { position: sticky; top: 0; z-index: 10; background: #1d3d5e; padding: 8px 20px }
.vdue-dialog-header h2 { margin: 0; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.3px; color: #fff; padding: 10px 0 10px !important }
.vdue-section { padding: 16px 20px 10px }
.vdue-section h3 { margin: 0 0 4px; font-size: 0.82rem; font-weight: 700; color: #3472a8; text-transform: uppercase; letter-spacing: 0.7px }
.vdue-section-desc { margin: 0 0 12px; font-size: 0.82rem; color: #6888a0 }
.vdue-divider { border: none; border-top: 1px solid #e2eaf4; margin: 0 }
.vdue-input-row { display: flex; gap: 8px; align-items: center }
.vdue-input { flex: 1; min-height: 36px; padding: 7px 11px; border: 1px solid #c6d9ec; border-radius: 8px; background: #fff; font-size: 0.87rem; box-sizing: border-box }
.vdue-input:focus { outline: none; border-color: #3472a8; box-shadow: 0 0 0 3px rgba(52, 114, 168, 0.14) }
.vdue-customer-select { width: 100%; min-height: 160px; height: 160px; border: 1px solid #c6d9ec; border-radius: 8px; padding: 6px; font-size: 0.87rem; background: #fff; margin-bottom: 10px; margin-top:10px; box-sizing: border-box; overflow-y: auto }
.vdue-catalog-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; border: 1px solid #dce8f4; border-radius: 8px; padding: 8px; background: #fafcff }
.vdue-catalog-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; border-radius: 6px; background: #fff; border: 1px solid #e8f0f8 }
.vdue-catalog-row:hover { background: #f0f7ff }
.vdue-catalog-name { font-weight: 500; color: #1e3a52 }
.vdue-step1-cols { gap: 16px; display: flex; flex-direction: row; align-items: center; justify-content: center }
.vdue-catalog-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; padding: 8px 10px; border: 1px solid #dce8f4; border-radius: 8px; background: #fafcff }
.vdue-catalog-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 12px; border-radius: 20px; background: linear-gradient(135deg, #2563a8, #1a4f8a); color: #fff; font-size: 0.83rem; font-weight: 600; box-shadow: 0 1px 3px rgba(25,80,160,0.25) }
.vdue-catalog-badge-del { background: none; border: none; color: rgba(255,255,255,0.75); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 2px; display: flex; align-items: center; transition: color 0.1s }
.vdue-catalog-badge-del:hover { color: #fff }
.vdue-checkbox-area { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 12px; border: 1px solid #dce8f4; border-radius: 8px; background: #fafcff; min-height: 44px; margin-bottom: 10px }
.vdue-checkbox-label { display: flex; align-items: center; font-size: 0.87rem; cursor: pointer; white-space: nowrap }
.vdue-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: #3472a8; margin-right: 5px }
.vdue-entries-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; border: 1px solid #dce8f4; border-radius: 8px; padding: 8px; background: #fafcff }
.vdue-columns { display: grid; grid-template-columns: 1fr 1fr; }
.vdue-columns > .vdue-section:first-child { border-right: 1px solid #e2eaf4; }
.vdue-columns .vdue-entries-list { max-height: 440px; }
.vdue-entry-row { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; background: #fff; border: 1px solid #e8f0f8 }
.vdue-entry-row:hover { background: #f5faff }
.vdue-entry-info { font-weight: 600; color: #1e3a52; font-size: 0.84rem }
.vdue-entry-cats { font-size: 0.82rem; color: #4a7096 }
.vdue-empty { margin: 4px 0; color: #8aabbf; font-style: italic; font-size: 0.84rem; text-align: center; padding: 6px 0 }
.vdue-dialog-footer { position: sticky; bottom: 0; background: #f0f5fb; border-top: 1px solid #dce8f4; padding: 10px 20px; display: flex; justify-content: flex-end }
@media (max-width: 900px) {
   .vdue-columns { grid-template-columns: 1fr }
   .vdue-columns > .vdue-section:first-child { border-right: none; border-bottom: 1px solid #e2eaf4; }
   .vdue-columns .vdue-entries-list { max-height: 200px; }
   .vdue-entry-row-with-actions { grid-template-columns: 1fr !important; }
   .vdue-entry-actions { margin-top: 8px; }
}
@media (max-width: 600px) {
   .vdue-entry-row { grid-template-columns: 1fr }
   .vdue-entry-row-with-actions { grid-template-columns: 1fr !important; }
   .vdue-entry-actions { flex-wrap: wrap; }
   .vdue-entry-actions .vdue-btn-sm { flex: 1; min-width: 80px; }
   .vdue-input-row { flex-direction: column; align-items: stretch }
   .vdue-step1-cols { grid-template-columns: 1fr }
   #vdue-category-dialog { width: calc(100vw - 1rem); max-width: calc(100vw - 1rem) }
   .vdue-edit-dialog { width: calc(100vw - 1rem) !important; }
   .vdue-customer-info-dialog { width: calc(100vw - 1rem) !important; }
}
.vdue-entry-row-with-actions { grid-template-columns: 1fr 1.5fr auto !important; }
.vdue-entry-actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.vdue-btn-sm { padding: 5px 10px !important; font-size: 0.8rem !important; min-height: auto !important; }
.vdue-btn-info { background: #0073d9 !important; color: #fff !important; border: none !important; }
.vdue-btn-info:hover { background: #0056b3 !important; }
.vdue-filter-checkboxes { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 10px; border: 1px solid #dce8f4; border-radius: 8px; background: #fafcff; min-height: 36px; align-items: center; }
.vdue-filter-checkbox-label { display: flex; align-items: center; font-size: 0.87rem; cursor: pointer; white-space: nowrap; }
.vdue-filter-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: #3472a8; margin-right: 5px; }
.vdue-edit-dialog { max-width: 500px; width: calc(100% - 2rem); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.vdue-edit-dialog-body { display: flex; flex-direction: column; max-height: 80vh; overflow-y: auto; font-family: "Open Sans", system-ui, sans-serif; font-size: 0.9rem; color: #1a3348; }
.vdue-edit-dialog-header { background: #1d3d5e; padding: 12px 20px; border-radius: 8px 8px 0 0; }
.vdue-edit-dialog-header h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: #fff; }
.vdue-edit-dialog-content { padding: 20px; flex: 1; }
.vdue-edit-dialog-content p { margin: 0 0 12px; }
.vdue-edit-dialog-footer { padding: 12px 20px; border-top: 1px solid #dce8f4; background: #f0f5fb; display: flex; gap: 8px; justify-content: flex-end; border-radius: 0 0 8px 8px; }
.vdue-customer-info-dialog { max-width: 600px; width: calc(100% - 2rem); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.vdue-customer-info-body { display: flex; flex-direction: column; max-height: 80vh; overflow-y: auto; font-family: "Open Sans", system-ui, sans-serif; font-size: 0.9rem; color: #1a3348; }
.vdue-info-header { background: linear-gradient(135deg, #2563a8, #1a4f8a); padding: 0px 20px; border-radius: 8px 8px 0 0; }
.vdue-info-header h2 { margin: 0; font-size: 1rem; font-weight: 700; color: #fff; padding: 15px !important }
.vdue-info-content { padding: 20px; flex: 1; }
.vdue-info-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e2eaf4; align-items: flex-start; }
.vdue-info-row:last-child { border-bottom: none; }
.vdue-info-label { font-weight: 600; color: #3472a8; font-size: 0.85rem; }
.vdue-info-value { color: #1e3a52; }
.vdue-info-footer { padding: 12px 20px; border-top: 1px solid #dce8f4; background: #f0f5fb; display: flex; justify-content: flex-end; border-radius: 0 0 8px 8px; }
#choicesVdueCategoryContainer { margin-bottom: 0 !important }