/* ================================================================
   STOCKPRO · La Leyenda — Apple-inspired redesign
   Based on Apple Human Interface Guidelines: SF Pro type,
   system colors, vibrancy / materials, soft corners, subtle depth.
   ================================================================ */

:root{
  /* -- DARK (default) — inspired by macOS / iOS dark mode -- */
  --bg:          #000000;
  --bg2:         #1c1c1e;      /* system grouped background elevated */
  --bg3:         #2c2c2e;      /* tertiary */
  --bg4:         #3a3a3c;      /* quaternary */
  --bg5:         #48484a;
  --surface:     rgba(28,28,30,0.72);   /* vibrancy surfaces */
  --surface2:    rgba(44,44,46,0.72);
  --hairline:    rgba(255,255,255,0.08);
  --hairline2:   rgba(255,255,255,0.14);
  --border:      rgba(255,255,255,0.08);
  --border2:     rgba(255,255,255,0.14);

  --text:        #f5f5f7;
  --text2:       rgba(235,235,245,0.60);
  --text3:       rgba(235,235,245,0.38);

  /* Apple system blue (dark) */
  --accent:      #0A84FF;
  --accent2:     #0066CC;
  --accent-dim:  rgba(10,132,255,0.16);

  /* Secondary highlight — orange (la Leyenda acento cálido) */
  --gold:        #FF9F0A;
  --gold2:       #FF8800;
  --gold-dim:    rgba(255,159,10,0.16);

  /* Apple system semaphore (dark variants) */
  --red:         #FF453A;
  --red-dim:     rgba(255,69,58,0.16);
  --yellow:      #FFD60A;
  --yellow-dim:  rgba(255,214,10,0.15);
  --green:       #32D74B;
  --green-dim:   rgba(50,215,75,0.16);
  --purple:      #BF5AF2;
  --purple-dim:  rgba(191,90,242,0.16);

  --radius:      8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --sidebar-w:   240px;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.55);

  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.25,.64,1);

  color-scheme: dark;
}

/* -- LIGHT THEME — inspired by macOS Sonoma / iOS 17 light -- */
body.tema-claro{
  --bg:          #f2f2f7;           /* system grouped bg */
  --bg2:         #ffffff;
  --bg3:         #f5f5f7;
  --bg4:         #ebebf0;
  --bg5:         #d1d1d6;
  --surface:     rgba(255,255,255,0.72);
  --surface2:    rgba(245,245,247,0.80);
  --hairline:    rgba(60,60,67,0.10);
  --hairline2:   rgba(60,60,67,0.18);
  --border:      rgba(60,60,67,0.10);
  --border2:     rgba(60,60,67,0.18);

  --text:        #1d1d1f;
  --text2:       rgba(60,60,67,0.68);
  --text3:       rgba(60,60,67,0.45);

  --accent:      #007AFF;
  --accent2:     #0062CC;
  --accent-dim:  rgba(0,122,255,0.12);

  --gold:        #FF9500;
  --gold2:       #D97700;
  --gold-dim:    rgba(255,149,0,0.14);

  --red:         #FF3B30;
  --red-dim:     rgba(255,59,48,0.11);
  --yellow:      #FF9500;
  --yellow-dim:  rgba(255,149,0,0.12);
  --green:       #34C759;
  --green-dim:   rgba(52,199,89,0.13);
  --purple:      #AF52DE;
  --purple-dim:  rgba(175,82,222,0.11);

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 6px 22px rgba(0,0,0,0.08);
  --shadow-lg:   0 24px 64px rgba(0,0,0,0.14);

  color-scheme: light;
}

/* -- RESET -- */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01","cv11";
}

/* Subtle mesh background (only dark) */
body:not(.tema-claro){
  background:
    radial-gradient(1200px 700px at -10% -10%, rgba(10,132,255,0.07), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(191,90,242,0.05), transparent 55%),
    radial-gradient(700px 500px at 50% 50%, rgba(255,159,10,0.025), transparent 60%),
    #000;
}
body.tema-claro{
  background:
    radial-gradient(1000px 600px at -10% -10%, rgba(0,122,255,0.05), transparent 60%),
    radial-gradient(700px 500px at 110% 110%, rgba(175,82,222,0.03), transparent 55%),
    #f2f2f7;
}

.hidden{display:none!important}

/* Font smoothing in monospace fields */
code, kbd, pre, samp,
[style*="monospace"],
[style*="Source Code Pro"]{
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code", monospace !important;
  font-feature-settings: normal;
  letter-spacing: 0;
}

/* -- SCROLLBARS (thin, Apple-style) -- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background: var(--border2);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{background: var(--bg5); background-clip: padding-box; border:2px solid transparent;}

/* =================================================================
   LOGIN — glass card, dark-forever with subtle Apple spotlight
   ================================================================= */
.login-wrap{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:40px 20px;
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(10,132,255,0.18), transparent 60%),
    radial-gradient(700px 500px at 85% 85%, rgba(191,90,242,0.14), transparent 55%),
    radial-gradient(500px 400px at 50% 50%, rgba(255,159,10,0.06), transparent 70%),
    #000;
}
.login-card{
  background: rgba(28,28,30,0.72);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow:
    0 48px 96px rgba(0,0,0,0.70),
    0 1px 0 rgba(255,255,255,0.05) inset;
}
.login-brand{margin-bottom:28px}
.login-brand-eyebrow{
  font-size:11px;font-weight:500;color:rgba(235,235,245,0.55);
  letter-spacing:0.3px;text-transform:none;margin-bottom:6px;
}
.login-brand-name{
  font-size:34px;font-weight:700;color:#f5f5f7;line-height:1.05;
  letter-spacing:-0.03em;
}
.login-brand-name em{
  color:#0A84FF;font-style:normal;
  background: linear-gradient(135deg, #0A84FF 0%, #BF5AF2 100%);
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent;
}
.login-brand-sub{font-size:12px;color:rgba(235,235,245,0.40);margin-top:6px;letter-spacing:0.1px}
.login-divider{height:1px;background:rgba(255,255,255,0.08);margin:22px 0}
.login-title{font-size:17px;font-weight:600;margin-bottom:4px;color:#f5f5f7;letter-spacing:-0.01em}
.login-sub2{font-size:13px;color:rgba(235,235,245,0.55);margin-bottom:22px}
.login-err{
  background:rgba(255,69,58,0.14);color:#FF6961;
  border:1px solid rgba(255,69,58,0.28);
  padding:10px 14px;border-radius:10px;font-size:12.5px;margin-bottom:12px;display:none;
}
.login-err.visible{display:block}
.login-hint{
  margin-top:14px;font-size:11.5px;color:rgba(235,235,245,0.38);
  background:rgba(255,255,255,0.04);padding:9px 12px;border-radius:10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

#login-screen input,
#login-screen select{
  background: rgba(255,255,255,0.06) !important;
  color: #f5f5f7 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 10px !important;
}
#login-screen input:focus,
#login-screen select:focus{
  border-color: #0A84FF !important;
  box-shadow: 0 0 0 4px rgba(10,132,255,0.22) !important;
  background: rgba(255,255,255,0.08) !important;
}
#login-screen select option{background:#1c1c1e;color:#f5f5f7}

#login-screen .btn-gold{
  background: linear-gradient(180deg, #0A84FF 0%, #0066CC 100%) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 13px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  box-shadow:
    0 4px 16px rgba(10,132,255,0.35),
    0 1px 0 rgba(255,255,255,0.18) inset !important;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
#login-screen .btn-gold:hover{
  filter: brightness(1.06);
  box-shadow:
    0 8px 24px rgba(10,132,255,0.45),
    0 1px 0 rgba(255,255,255,0.18) inset !important;
  transform: translateY(-1px);
}
#login-screen .btn-gold:active{ transform: translateY(0); filter:brightness(.95); }

/* =================================================================
   INPUTS
   ================================================================= */
input,select,textarea{
  width:100%;
  padding: 10px 13px;
  font-size: 13px;
  border: 1px solid var(--border2);
  border-radius: 10px;
  background: var(--bg2);
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
body.tema-claro input,
body.tema-claro select,
body.tema-claro textarea{
  background: #ffffff;
  border-color: rgba(60,60,67,0.18);
}
input:focus,select:focus,textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}
input::placeholder,textarea::placeholder{color:var(--text3)}
select{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text2) 50%),
    linear-gradient(135deg, var(--text2) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
select option{background: var(--bg2); color: var(--text)}
textarea{resize:vertical;min-height:72px;line-height:1.5}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
input[type=date]::-webkit-calendar-picker-indicator{ filter: invert(0.5); cursor:pointer; }
body.tema-claro input[type=date]::-webkit-calendar-picker-indicator{ filter: none; }

/* -- LABELS -- */
.form-group label{
  font-size: 11.5px;
  color: var(--text2);
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* =================================================================
   BUTTONS — Apple filled / bezeled
   ================================================================= */
.btn{
  cursor: pointer;
  font-family: inherit;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  transition: transform .12s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease), filter .2s var(--ease), color .15s;
}
.btn:active{ transform: scale(0.97); }

.btn-primary{
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  color: #ffffff;
  padding: 10px 22px;
  box-shadow:
    0 2px 10px rgba(10,132,255,0.28),
    0 1px 0 rgba(255,255,255,0.20) inset;
}
.btn-primary:hover{
  filter: brightness(1.06);
  box-shadow:
    0 6px 18px rgba(10,132,255,0.40),
    0 1px 0 rgba(255,255,255,0.20) inset;
  transform: translateY(-1px);
}
.btn-gold{
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold2) 100%);
  color: #ffffff;
  padding: 11px 24px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow:
    0 2px 12px rgba(255,149,0,0.30),
    0 1px 0 rgba(255,255,255,0.20) inset;
}
.btn-gold:hover{ filter: brightness(1.06); transform: translateY(-1px); }

.btn-secondary{
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border2);
  padding: 9px 18px;
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover{
  background: var(--bg3);
  border-color: var(--hairline2);
}
body.tema-claro .btn-secondary{
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(60,60,67,0.10);
  border: none;
}
body.tema-claro .btn-secondary:hover{ background:#f5f5f7; }

.btn-danger{
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(255,69,58,0.28);
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 500;
}
.btn-danger:hover{ background: rgba(255,69,58,0.22); }

.btn-transfer{
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(10,132,255,0.28);
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 500;
}
body.tema-claro .btn-transfer{ border-color: rgba(0,122,255,0.24); }
.btn-transfer:hover{ background: rgba(10,132,255,0.22); }

button:disabled{opacity:0.35;cursor:not-allowed;transform:none!important;filter:none!important}

/* =================================================================
   APP SHELL
   ================================================================= */
.app-shell{display:flex;min-height:100vh}

/* =================================================================
   SIDEBAR — Apple vibrancy material
   ================================================================= */
.sidebar{
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar::-webkit-scrollbar{width:0}

.sidebar-brand{
  padding: 22px 18px 18px;
  border-bottom: 1px solid var(--hairline);
}
.sidebar-brand-eyebrow{
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text2);
  letter-spacing: 0.1px;
  text-transform: none;
  opacity: 0.85;
  margin-bottom: 3px;
}
.sidebar-brand-name{
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.sidebar-brand-name em{
  font-style: normal;
  background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sidebar-system{
  font-size: 11px;
  color: var(--text3);
  margin-top: 5px;
  letter-spacing: 0;
}

.sidebar-user{
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 11px;
}
.sidebar-avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; flex-shrink: 0;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 1px var(--hairline) inset;
}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-name{
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing: -0.01em;
}
.sidebar-user-role{font-size:10.5px;color:var(--text3);margin-top:2px}

.sidebar-nav{flex:1;padding: 10px 10px}
.sidebar-section{
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 10px 6px;
}
.nav-item{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8.5px 11px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  transition: background .15s var(--ease), color .15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  margin-bottom: 1px;
}
.nav-item:hover{ background: var(--hairline); }
.nav-item.active{
  background: var(--accent);
  color: #ffffff;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(10,132,255,0.35);
}
.nav-item.active .nav-icon{ color: #ffffff; opacity: 1; }
.nav-icon{
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.75;
  color: var(--text2);
}
.nav-item:disabled{opacity:0.3;cursor:not-allowed}

.sidebar-footer{padding: 14px 16px;border-top: 1px solid var(--hairline)}
.sidebar-suc{
  font-size: 11px; color: var(--text3);
  margin-bottom: 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-suc span{color:var(--text);font-weight:500}

/* =================================================================
   MAIN CONTENT
   ================================================================= */
.main-wrap{
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.topbar{
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  padding: 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-title{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-0.01em}
.topbar-right{display:flex;align-items:center;gap:10px}
.content{padding: 26px 28px; flex: 1}

/* =================================================================
   PAGE HEADER
   ================================================================= */
.page-header{margin-bottom: 22px}
.page-header h1{
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.page-header p{
  font-size: 13.5px;
  color: var(--text2);
  margin-top: 5px;
  letter-spacing: -0.005em;
}

/* =================================================================
   CARDS
   ================================================================= */
.card{
  background: var(--bg2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
body.tema-claro .card{
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(60,60,67,0.06);
}
.section-title{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  text-transform: none;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title::before{
  content: '';
  width: 3px;
  height: 14px;
  background: linear-gradient(180deg, var(--accent), var(--purple));
  border-radius: 2px;
  flex-shrink: 0;
}

/* =================================================================
   METRICS — Apple widget-style cards
   ================================================================= */
.metric-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.metric{
  background: var(--bg2);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: transform .18s var(--ease-spring), box-shadow .2s var(--ease), background .2s;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
body.tema-claro .metric{
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(60,60,67,0.06);
}
.metric::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}
.metric-accent::before{
  background: linear-gradient(135deg, rgba(10,132,255,0.10), transparent 60%);
}
.metric-red::before{
  background: linear-gradient(135deg, rgba(255,69,58,0.10), transparent 60%);
}
.metric-yellow::before{
  background: linear-gradient(135deg, rgba(255,214,10,0.10), transparent 60%);
}
.metric-green::before{
  background: linear-gradient(135deg, rgba(50,215,75,0.10), transparent 60%);
}
.metric::after{
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  opacity: 0.10;
  filter: blur(4px);
}
.metric-accent::after{background: var(--accent)}
.metric-red::after{background: var(--red)}
.metric-yellow::after{background: var(--yellow)}
.metric-green::after{background: var(--green)}
.metric:hover{
  transform: translateY(-3px) scale(1.005);
  box-shadow: var(--shadow-md);
}
.metric:hover::before{opacity: 1}
.metric-label{
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
}
.metric-val{
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.c-accent{color:var(--accent)}.c-red{color:var(--red)}
.c-yellow{color:var(--yellow)}.c-green{color:var(--green)}
.metric-bar{
  height: 3px;
  margin-top: 14px;
  border-radius: 2px;
  background: var(--hairline);
  overflow: hidden;
}
.metric-bar-fill{
  height: 100%;
  border-radius: 2px;
  transition: width .8s var(--ease-spring);
}
.metric-hint{
  font-size: 10.5px;
  color: var(--text3);
  margin-top: 8px;
  opacity: 0.85;
  letter-spacing: -0.005em;
}

/* =================================================================
   BADGES — Apple pill style
   ================================================================= */
.badge{
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.badge-red{background:var(--red-dim);color:var(--red)}
.badge-yellow{background:var(--yellow-dim);color:var(--yellow)}
.badge-green{background:var(--green-dim);color:var(--green)}
.badge-gray{background:var(--bg4);color:var(--text2)}
body.tema-claro .badge-gray{background:var(--bg4);color:var(--text2)}

/* Role badges */
.role-badge{
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0;
}
.role-admin{background:var(--gold-dim);color:var(--gold)}
.role-supervisor{background:var(--accent-dim);color:var(--accent)}
.role-operario{background:var(--green-dim);color:var(--green)}

/* =================================================================
   ALERTS — Apple banner
   ================================================================= */
.alert-bar{
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid;
  font-weight: 500;
}
.alert-red{ background:var(--red-dim);color:var(--red);border-color:rgba(255,69,58,0.22); }
.alert-yellow{ background:var(--yellow-dim);color:var(--yellow);border-color:rgba(255,149,0,0.22); }
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-red{background:var(--red); box-shadow:0 0 0 2px rgba(255,69,58,0.22);}
.dot-yellow{background:var(--yellow); box-shadow:0 0 0 2px rgba(255,149,0,0.22);}
.dot-green{background:var(--green); box-shadow:0 0 0 2px rgba(52,199,89,0.22);}

/* =================================================================
   FORMS
   ================================================================= */
.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.filter-row{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* =================================================================
   MESSAGES
   ================================================================= */
.msg{
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 12.5px;
  margin-bottom: 14px;
  display: none;
  border: 1px solid transparent;
  font-weight: 500;
}
.msg.visible{display:block}
.msg-ok{background:var(--accent-dim);color:var(--accent);border-color:rgba(10,132,255,0.22)}
body.tema-claro .msg-ok{ border-color: rgba(0,122,255,0.22); }
.msg-err{background:var(--red-dim);color:var(--red);border-color:rgba(255,69,58,0.22)}

/* =================================================================
   TABLE
   ================================================================= */
.table-wrap{overflow-x:auto;border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{
  text-align:left;
  padding: 11px 12px;
  color: var(--text2);
  font-weight: 600;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
}
td{
  padding: 11px 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  vertical-align: middle;
  letter-spacing: -0.005em;
}
tr:last-child td{border-bottom:none}
tr:hover td{background: var(--hairline); }
body.tema-claro tr:hover td{ background: rgba(60,60,67,0.04); }
.venc-row-red td{background:rgba(255,69,58,0.06)}
.venc-row-yellow td{background:rgba(255,149,0,0.06)}
.ubicacion{font-size:11px;color:var(--text3)}
.tag-suc{
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 500;
  border: none;
}

/* =================================================================
   MISC
   ================================================================= */
.legend{display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.user-card{
  background: var(--bg2);
  border-radius: 12px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--hairline);
  transition: background .15s var(--ease), border-color .15s;
}
body.tema-claro .user-card{
  background:#ffffff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(60,60,67,0.06);
}
.user-card:hover{ background: var(--bg3); }
body.tema-claro .user-card:hover{ background:#f5f5f7; }

.avatar{
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; flex-shrink: 0;
  letter-spacing: -0.01em;
}
.av-admin{background:var(--gold-dim);color:var(--gold)}
.av-supervisor{background:var(--accent-dim);color:var(--accent)}
.av-operario{background:var(--green-dim);color:var(--green)}

.remito-row{
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--bg2);
  transition: background .15s var(--ease), transform .15s;
}
body.tema-claro .remito-row{
  background:#ffffff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(60,60,67,0.06);
}
.remito-row:hover{ background: var(--bg3); }
body.tema-claro .remito-row:hover{ background:#f5f5f7; }
.remito-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.remito-meta{font-size:11.5px;color:var(--text3)}
.expand-detail{display:none;margin-top:12px;border-top:1px solid var(--hairline);padding-top:12px}

.suc-card{
  background: var(--bg2);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 1px solid var(--hairline);
  transition: transform .2s var(--ease-spring), background .2s;
  position: relative;
  overflow: hidden;
}
body.tema-claro .suc-card{
  background:#ffffff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(60,60,67,0.06);
}
.suc-card::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--purple));
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.suc-card:hover{ transform: translateX(3px); background: var(--bg3); }
body.tema-claro .suc-card:hover{ background:#f5f5f7; }
.suc-card:hover::before{opacity: 1}
.suc-card-hint{font-size:10.5px;color:var(--text3);margin-top:3px}

/* =================================================================
   OVERLAYS — Apple sheet / modal
   ================================================================= */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.40);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  z-index: 999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px;
  overflow-y: auto;
  animation: fadeIn .2s var(--ease);
}
.overlay-box{
  background: var(--bg2);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 1060px;
  margin: auto;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--hairline2);
  animation: sheetIn .28s var(--ease-spring);
}
body.tema-claro .overlay-box{
  background: #ffffff;
  border-color: rgba(60,60,67,0.12);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes sheetIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.overlay-header{
  background: transparent;
  border-bottom: 1px solid var(--hairline);
  padding: 18px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.overlay-header h2{font-size:18px;font-weight:700;margin:0 0 3px;color:var(--text);letter-spacing:-0.02em}
.overlay-header p{font-size:12.5px;color:var(--text2);margin:0}
.overlay-content{padding: 22px 24px}
.overlay-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.overlay-metric{
  background: var(--bg3);
  border-radius: 12px;
  padding: 13px 15px;
  border: 1px solid var(--hairline);
}
body.tema-claro .overlay-metric{
  background: var(--bg3);
  border: none;
  box-shadow: 0 0 0 1px rgba(60,60,67,0.06);
}

.btn-close{
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--hairline2);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 11.5px;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 14px;
  font-family: inherit;
  transition: background .15s var(--ease);
}
.btn-close:hover{background: var(--bg4)}

/* =================================================================
   QR
   ================================================================= */
.qr-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.50);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}
.qr-box{
  background: var(--bg2);
  border-radius: var(--radius-xl);
  padding: 0;
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--hairline2);
  overflow: hidden;
  animation: sheetIn .28s var(--ease-spring);
}
body.tema-claro .qr-box{ background:#ffffff; border-color: rgba(60,60,67,0.10); }
.qr-box-header{
  background: transparent;
  border-bottom: 1px solid var(--hairline);
  padding: 18px 24px;
}
.qr-nombre{font-size:17px;font-weight:700;color:var(--text);margin-bottom:2px;letter-spacing:-0.02em}
.qr-id{
  font-size: 10.5px;
  color: var(--accent);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 1.5px;
}
.qr-body{padding: 24px}
.qr-canvas-wrap{display:flex;justify-content:center;margin-bottom:16px}
.qr-canvas-wrap canvas{
  border-radius: 14px;
  border: 4px solid var(--bg3);
  background: #fff;
  padding: 10px;
}

/* =================================================================
   CLIENTES
   ================================================================= */
.cli-card{
  background: var(--bg2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
  transition: background .15s var(--ease);
}
body.tema-claro .cli-card{
  background:#ffffff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(60,60,67,0.06);
}
.cli-card:hover{ background: var(--bg3); }
body.tema-claro .cli-card:hover{ background:#f5f5f7; }

.cli-qr-thumb{
  width: 64px; height: 64px;
  flex-shrink: 0;
  border: 1px solid var(--hairline2);
  border-radius: 12px;
  background: var(--bg3);
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s var(--ease-spring), border-color .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cli-qr-thumb:hover{ transform: scale(1.05); border-color: var(--accent); }
.cli-qr-thumb canvas{width:64px!important;height:64px!important}
.cli-id{
  font-size: 10.5px;
  color: var(--text3);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 1.2px;
  margin-bottom: 4px;
}
.cli-nombre{font-size:14px;font-weight:600;margin-bottom:6px;letter-spacing:-0.01em}
.cli-meta{font-size:11.5px;color:var(--text2);margin-bottom:7px;line-height:1.55}
.cli-tags{display:flex;gap:6px;flex-wrap:wrap}
.cli-tag{
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
}
.cli-tag-tipo{background:var(--purple-dim);color:var(--purple)}
.cli-tag-suc{background:var(--accent-dim);color:var(--accent)}
.cli-tag-cat{background:var(--gold-dim);color:var(--gold)}

/* =================================================================
   INFO PROD
   ================================================================= */
.info-prod{
  background: var(--bg3);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  border: 1px solid var(--hairline);
}
body.tema-claro .info-prod{
  border: none;
  box-shadow: 0 0 0 1px rgba(60,60,67,0.06);
}
.info-prod-label{
  font-size: 10.5px;
  color: var(--text3);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  display: block;
  margin-bottom: 4px;
}
.info-prod-val{font-size:12.5px;color:var(--text);font-weight:500;letter-spacing:-0.005em}

/* =================================================================
   MOV
   ================================================================= */
.mov-item{
  padding: 11px 15px;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid var(--hairline);
  margin-bottom: 8px;
  font-size: 12px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
body.tema-claro .mov-item{
  background:#ffffff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(60,60,67,0.06);
}
.mov-icon{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  color: var(--accent);
}

/* =================================================================
   LOADING
   ================================================================= */
#loading-overlay{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(10,132,255,0.18), transparent 60%),
    radial-gradient(700px 500px at 85% 85%, rgba(191,90,242,0.14), transparent 55%),
    #000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.spinner{
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,0.10);
  border-top-color: #0A84FF;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin-bottom: 18px;
}
.loading-brand{
  font-size: 24px;
  font-weight: 700;
  color: #f5f5f7;
  margin-bottom: 6px;
  letter-spacing: -0.025em;
}
.loading-brand em{
  font-style: normal;
  background: linear-gradient(135deg, #0A84FF 0%, #BF5AF2 100%);
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent;
}
.loading-msg{font-size:12.5px;color:rgba(235,235,245,0.55)}
@keyframes spin{to{transform:rotate(360deg)}}

/* =================================================================
   TOAST — Apple notification banner
   ================================================================= */
.toast{
  position: fixed;
  bottom: 22px; right: 22px;
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 12.5px;
  z-index: 9998;
  max-width: 320px;
  box-shadow: var(--shadow-lg);
  animation: slideIn .3s var(--ease-spring);
  pointer-events: none;
  background: var(--surface2);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--hairline2);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.toast-red{color:var(--red)}
.toast-yellow{color:var(--yellow)}
.toast-ok{color:var(--accent)}
@keyframes slideIn{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}

/* =================================================================
   TEMA TOGGLE BUTTON
   ================================================================= */
#btn-tema{
  background: var(--bg3) !important;
  border: 1px solid var(--hairline2) !important;
  border-radius: 999px !important;
  padding: 7px 11px !important;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--text2) !important;
  transition: background .2s var(--ease), transform .15s !important;
  font-family: inherit !important;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
}
#btn-tema:hover{ background: var(--bg4) !important; transform: scale(1.05); }
#btn-tema:active{ transform: scale(0.95); }

/* =================================================================
   SCANNER
   ================================================================= */
#scanner-video{
  width: 100%;
  display: block;
  background: #000;
  min-height: 260px;
  border-radius: 14px;
  overflow: hidden;
}

/* =================================================================
   TRANSITIONS — smooth theme change
   ================================================================= */
body, .sidebar, .topbar, .card, .metric, input, select, textarea,
.btn, table, th, td, .overlay-box, .login-card, .user-card,
.cli-card, .mov-item, .suc-card, .remito-row, .info-prod,
.overlay-metric, .qr-box{
  transition:
    background-color .28s var(--ease),
    border-color .28s var(--ease),
    color .18s var(--ease),
    box-shadow .28s var(--ease);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media(max-width:1024px){
  :root{--sidebar-w:200px}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .filters{grid-template-columns:repeat(2,1fr)}
  .info-prod{grid-template-columns:repeat(2,1fr)}
  .page-header h1{font-size:24px}
}

@media(max-width:768px){
  :root{--sidebar-w:0px}

  /* Evitar scroll horizontal en toda la página */
  body,html{overflow-x:hidden;max-width:100vw}
  .main-wrap{overflow-x:hidden}

  /* Alert bars: wrap en móvil */
  .alert-bar{flex-wrap:wrap;font-size:11.5px}

  /* Sidebar: oculto por defecto, desliza con .open */
  .sidebar{
    transform:translateX(-240px);
    width:240px;
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    z-index:100;
  }
  .sidebar.open{transform:translateX(0)}

  /* Contenido ocupa todo el ancho */
  .main-wrap{margin-left:0}
  .content{padding:14px 12px}

  /* Topbar: mostrar hamburger */
  #btn-hamburger{display:block !important}
  .topbar{padding:0 14px}

  /* Grids → 1 columna */
  .two-col{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr 1fr}
  .info-prod{grid-template-columns:repeat(2,1fr)}
  .metric-grid{grid-template-columns:repeat(2,1fr)}

  /* Tipografía */
  .page-header h1{font-size:20px}
  .page-header p{font-size:12px}
  .metric-val{font-size:24px}
  .metric-label{font-size:11px}

  /* Cards más compactos */
  .card{padding:14px 12px}

  /* Tablas: scroll horizontal */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:500px}

  /* Botones más grandes para touch */
  .btn{padding:9px 14px;font-size:12px}

  /* Formularios */
  .form-group label{font-size:12px}
  input,select,textarea{font-size:16px !important} /* evita zoom en iOS */

  /* Cards de clientes/sucursales en móvil */
  .cli-card{flex-wrap:wrap;gap:10px}
  .cli-card>div:last-child{width:100%;display:flex;flex-direction:row;gap:8px;flex-wrap:wrap}
  .suc-card{flex-wrap:wrap}
  .suc-card>div:last-child{width:100%;display:flex;gap:8px}

  /* Cesta de items */
  .cesta-item{flex-wrap:wrap}

  /* Page header */
  .page-header{padding-bottom:12px;margin-bottom:14px}
}

@media(max-width:480px){
  /* Teléfonos chicos */
  .metric-grid{grid-template-columns:1fr 1fr}
  .filters{grid-template-columns:1fr}
  .content{padding:10px 10px}
  .topbar{height:48px}
  .page-header h1{font-size:18px}
  .metric-val{font-size:22px}
  .card{padding:12px 10px}

  /* Formularios de una columna forzada */
  .form-grid{grid-template-columns:1fr !important}

  /* Ocultar columnas menos importantes en tablas pequeñas */
  .table-wrap{font-size:12px}

  /* Botones full-width en formularios */
  .form-group+.btn,.card>.btn{width:100%;justify-content:center}
}
/* Selected product row highlight */
#tb-productos tr.prod-row-sel{background:var(--accent-dim)!important;outline:1px solid rgba(10,132,255,0.25)}
#tb-productos tr.prod-row-sel td{color:var(--text)}
/* Custom circle checkbox for products */
.prod-chk-wrap{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:24px;height:24px;flex-shrink:0;vertical-align:middle}
.prod-chk-wrap input[type=checkbox]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.prod-chk-circle{width:20px;height:20px;border-radius:50%;border:2px solid var(--border2);display:inline-flex;align-items:center;justify-content:center;transition:background .15s var(--ease),border-color .15s;font-size:11px;font-weight:800;color:transparent;line-height:1;user-select:none}
.prod-chk-wrap:hover .prod-chk-circle{border-color:var(--accent)}
.prod-chk-wrap input:checked+.prod-chk-circle{background:var(--accent);border-color:var(--accent);color:#fff}

/* ====== FACTURA AFIP — RG 1415 ====== */
#factura-print-area{display:none}
.fac-wrap{background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;font-size:10px;width:210mm;margin:0 auto;padding:6mm 7mm;box-sizing:border-box;border:1px solid #aaa}
/* Header 3 columnas */
.fac-header{display:grid;grid-template-columns:1fr 32mm 1fr;border:1.5px solid #111;margin-bottom:0}
.fac-header-left{padding:8px 10px;border-right:1.5px solid #111;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.fac-header-center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 4px;border-right:1.5px solid #111;text-align:center}
.fac-header-right{padding:8px 10px}
/* Caja letra */
.fac-letra{font-size:34px;font-weight:900;line-height:1;color:#111}
.fac-letra-cod{font-size:8px;color:#555;border-top:1px solid #999;margin-top:3px;padding-top:3px;width:100%;text-align:center;font-weight:600}
.fac-letra-orig{font-size:7.5px;font-weight:700;text-transform:uppercase;color:#555;margin-top:2px;letter-spacing:.5px}
/* Emisor */
.fac-emisor-nombre{font-size:13px;font-weight:900;color:#111;margin-bottom:4px;line-height:1.2}
.fac-emisor-info{font-size:8.5px;color:#333;line-height:1.6;text-align:center}
.fac-emisor-cond{font-size:8.5px;font-weight:700;color:#111;margin-top:3px;text-align:center}
/* Comprobante header right */
.fac-comp-tipo{font-size:17px;font-weight:900;letter-spacing:.5px;color:#111;margin-bottom:3px}
.fac-comp-num{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:#111;margin-bottom:6px;letter-spacing:-.2px}
.fac-comp-data{font-size:8.5px;line-height:1.7;color:#333}
.fac-comp-data strong{color:#111;font-weight:700}
/* Receptor */
.fac-receptor{border:1.5px solid #111;border-top:none;padding:5px 8px;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.fac-rec-row{font-size:9px;line-height:1.65;color:#111}
.fac-rec-lbl{font-weight:700}
/* Tabla ítems */
.fac-table{width:100%;border-collapse:collapse;border:1.5px solid #111;border-top:none;margin-bottom:0}
.fac-table thead tr{background:#efefef}
.fac-table th{font-size:8.5px;font-weight:700;text-transform:uppercase;padding:4px 6px;border-bottom:1.5px solid #111;border-right:1px solid #ccc;color:#222;white-space:nowrap}
.fac-table th:last-child{border-right:none}
.fac-table td{font-size:9.5px;padding:3px 6px;border-bottom:1px solid #e0e0e0;border-right:1px solid #ebebeb;vertical-align:top}
.fac-table td:last-child{border-right:none}
.fac-table .td-r{text-align:right}
.fac-table .td-c{text-align:center}
.fac-table-spacer td{height:22px;border-bottom:1px solid #e0e0e0 !important}
/* Totales */
.fac-totales-wrap{border:1.5px solid #111;border-top:none;padding:5px 10px;display:flex;justify-content:flex-end}
.fac-totales-tbl{width:230px;border-collapse:collapse}
.fac-totales-tbl td{padding:2px 4px;font-size:9.5px;font-variant-numeric:tabular-nums}
.fac-totales-tbl td:first-child{text-align:right;font-weight:600;color:#444;padding-right:6px}
.fac-totales-tbl td:last-child{text-align:right;min-width:75px;font-weight:600}
.fac-tot-final td{font-size:11px !important;font-weight:900 !important;color:#111 !important;border-top:1.5px solid #111 !important;padding-top:4px !important}
/* Transparencia fiscal Ley 27.743 (Factura B) */
.fac-transparencia{border:1.5px solid #111;border-top:none;padding:4px 10px;font-size:8.5px;color:#333}
.fac-trans-title{font-style:italic;font-weight:700;margin-bottom:2px}
.fac-trans-row{display:flex;gap:20px}
/* Footer CAE + QR */
.fac-footer{border:1.5px solid #111;border-top:none;padding:6px 10px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.fac-footer-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}
.fac-footer-qr-label{font-size:7.5px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:#333}
.fac-footer-authorized{font-size:8.5px;color:#444;line-height:1.4}
.fac-footer-authorized strong{font-size:9.5px;font-weight:900;color:#111;display:block;margin-bottom:2px}
.fac-footer-cae{text-align:right;font-size:9.5px;line-height:1.7}
.fac-footer-cae strong{font-weight:700}
/* Nota demo */
.fac-aviso-demo{background:#fffbea;border:1px solid #e5c100;padding:4px 10px;text-align:center;font-size:8.5px;font-weight:700;color:#7a5e00;margin-top:5px;border-radius:2px}
/* Print */
@media print{
  body>*{display:none !important}
  #factura-print-area{display:block !important;position:fixed;top:0;left:0;width:100%;background:#fff;z-index:99999}
  #presupuesto-print-area{display:block !important;position:fixed;top:0;left:0;width:100%;background:#fff;z-index:99999}
  #remito-ent-print-area{display:block !important;position:fixed;top:0;left:0;width:100%;background:#fff;z-index:99999}
  .fac-wrap,.pres-wrap,.rent-wrap{border:none;width:100%;padding:8mm;box-shadow:none}
  .fac-aviso-demo,.pres-aviso,.rent-aviso{display:none !important}
  #factura-print-area .no-print,#presupuesto-print-area .no-print,#remito-ent-print-area .no-print{display:none}
}
/* ====== PRESUPUESTO / COTIZACIÓN ====== */
#presupuesto-print-area{display:none}
.pres-wrap{background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;font-size:10px;width:210mm;margin:0 auto;padding:8mm 9mm;box-sizing:border-box;border:1px solid #aaa}
.pres-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2.5px solid #0066aa;padding-bottom:8px;margin-bottom:8px}
.pres-logo-area{display:flex;flex-direction:column}
.pres-emisor-nombre{font-size:16px;font-weight:900;color:#0066aa}
.pres-emisor-sub{font-size:8.5px;color:#555;margin-top:2px}
.pres-doc-title{text-align:right}
.pres-title{font-size:20px;font-weight:900;color:#0066aa;text-transform:uppercase;letter-spacing:1px}
.pres-num{font-size:12px;font-weight:700;color:#333}
.pres-fecha{font-size:9px;color:#555;margin-top:2px}
.pres-receptor{background:#f7f9fc;border:1px solid #cde;padding:6px 10px;border-radius:4px;margin-bottom:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}
.pres-rec-row{font-size:9px;color:#333}
.pres-rec-lbl{font-weight:700}
.pres-table{width:100%;border-collapse:collapse;margin-bottom:8px}
.pres-table th{background:#0066aa;color:#fff;font-size:9px;font-weight:700;padding:4px 6px;text-align:left;border:1px solid #0055aa}
.pres-table td{font-size:9px;padding:3px 6px;border:1px solid #dde}
.pres-table tr:nth-child(even) td{background:#f5f8ff}
.pres-totales-wrap{display:flex;justify-content:flex-end;margin-bottom:8px}
.pres-totales-tbl{border-collapse:collapse;width:210px}
.pres-totales-tbl td{font-size:9.5px;padding:3px 6px;border:1px solid #dde}
.pres-totales-tbl td:last-child{text-align:right;font-weight:600}
.pres-tot-final td{font-size:11px !important;font-weight:900 !important;border-top:2px solid #0066aa !important;color:#0066aa}
.pres-obs{background:#fffdf0;border:1px solid #ddc;border-radius:3px;padding:5px 8px;font-size:9px;color:#444;margin-bottom:6px}
.pres-footer{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid #ccc;padding-top:6px;margin-top:8px}
.pres-firma{text-align:center;border-top:1px solid #aaa;padding-top:4px;font-size:8.5px;width:130px;margin-top:18px}
.pres-aviso{background:#e8f4e8;border:1px solid #6a6;padding:3px 8px;text-align:center;font-size:8px;color:#363;border-radius:2px;margin-top:4px}
/* ====== REMITO DE ENTREGA ====== */
#remito-ent-print-area{display:none}
.rent-wrap{background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;font-size:10px;width:210mm;margin:0 auto;padding:8mm 9mm;box-sizing:border-box;border:1px solid #aaa}
.rent-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2.5px solid #333;padding-bottom:8px;margin-bottom:8px}
.rent-emisor-nombre{font-size:15px;font-weight:900;color:#222}
.rent-emisor-sub{font-size:8.5px;color:#555;margin-top:2px}
.rent-doc-title{text-align:right}
.rent-title{font-size:18px;font-weight:900;color:#222;text-transform:uppercase;letter-spacing:1px}
.rent-num{font-size:12px;font-weight:700;color:#333}
.rent-dest{background:#f7f7f7;border:1px solid #ccc;padding:6px 10px;border-radius:3px;margin-bottom:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}
.rent-dest-row{font-size:9px;color:#333}
.rent-dest-lbl{font-weight:700}
.rent-table{width:100%;border-collapse:collapse;margin-bottom:8px}
.rent-table th{background:#333;color:#fff;font-size:9px;padding:4px 6px;text-align:left;border:1px solid #222}
.rent-table td{font-size:9px;padding:3px 6px;border-bottom:1px solid #eee}
.rent-footer{display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid #ccc;font-size:8.5px}
.rent-firma{text-align:center;border-top:1px solid #aaa;padding-top:3px;font-size:8px;width:110px;margin-top:18px}
.rent-aviso{background:#fffbea;border:1px solid #e5c100;padding:3px 8px;text-align:center;font-size:8px;font-weight:700;color:#7a5e00;margin-top:4px;border-radius:2px}