/* macOS Sonoma–inspired UI (light/dark adaptive, frosted glass, subtle depth)
   — Keeps classes and layout intact; only visuals are changed.
*/
:root{
  --radius:16px;
  --radius-pill:999px;

  /* Light theme palette */
  --bg: #e9edf3;
  --bg-accent: #dbe3ee;
  --panel: rgba(255,255,255,.72);
  --panel-strong: rgba(255,255,255,.86);
  --border: rgba(0,0,0,.08);
  --text: #0b0f14;
  --muted: #55606d;
  --primary:#0B5D3B; /* macOS Blue */
  --primary-contrast: #ffffff;
  --chip: rgba(250,250,252,.6);
  --ok:#34c759;
  --warn:#ff9f0a;
  --danger:#ff3b30;

  --shadow: 0 10px 30px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --shadow-soft: 0 1px 0 rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.06);

  --blur: blur(18px);
  --wallpaper: radial-gradient(1200px 800px at 10% 20%, #c3d5ff 0%, rgba(195,213,255,0) 40%),
               radial-gradient(900px 700px at 90% 10%, #ffd2da 0%, rgba(255,210,218,0) 45%),
               radial-gradient(1000px 900px at 30% 90%, #c8ffe3 0%, rgba(200,255,227,0) 50%),
               radial-gradient(800px 600px at 80% 80%, #ffe6b3 0%, rgba(255,230,179,0) 55%),
               linear-gradient(180deg, #f7f9fc 0%, #e9edf3 100%);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f14;
    --bg-accent: #0f1520;
    --panel: rgba(22,27,34,.6);
    --panel-strong: rgba(22,27,34,.8);
    --border: rgba(255,255,255,.09);
    --text: #e6eef6;
    --muted: #a6b2c0;
    --primary:#0B5D3B;
    --chip: rgba(17,22,30,.6);
    --shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
    --shadow-soft: 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.35);
    --wallpaper: radial-gradient(1200px 800px at 10% 20%, #1a2b55 0%, rgba(26,43,85,0) 40%),
                 radial-gradient(900px 700px at 90% 10%, #55263a 0%, rgba(85,38,58,0) 45%),
                 radial-gradient(1000px 900px at 30% 90%, #164235 0%, rgba(22,66,53,0) 50%),
                 radial-gradient(800px 600px at 80% 80%, #4a3b15 0%, rgba(74,59,21,0) 55%),
                 linear-gradient(180deg, #0b0f14 0%, #0f1520 100%);
  }
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
html,body{margin:0;padding:0;color:var(--text);font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display','SF Pro Text','Segoe UI', Roboto, Inter, Helvetica, Arial, sans-serif;}
body{
  background: var(--wallpaper);
  background-attachment: fixed;
}

/* Subtle Sonoma glass container */
.container{
  max-width: 1060px;
  margin: 0 auto;
  padding: 28px;
}

.header{
  position: sticky; top: 0; z-index: 20;
  margin: -12px -12px 20px -12px;
  padding: 14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  background: var(--panel);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow-soft);
}

.brand{display:flex;align-items:center;gap:12px}
.brand .logo{
  width:34px;height:34px;border-radius:10px;
  background: conic-gradient(from 180deg, #8dd2ff, #b5ffdb, #ffe29a, #ffb4c6, #8dd2ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px rgba(0,0,0,.15);
}
.brand h1{font-size:17px;margin:0;letter-spacing:.2px}

.card{
  background: var(--panel);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card + .card{margin-top:14px}

.kpi{display:flex;gap:16px;flex-wrap:wrap}
.kpi .box{
  background: var(--panel-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  min-width: 180px;
  box-shadow: var(--shadow-soft);
}
.kpi .num{font-weight:800;font-size:22px}

/* Inputs & buttons with macOS look */
label{display:block;font-size:12px;color:var(--muted);margin: 4px 0 6px 0}
input,select,button,textarea{
  background: var(--panel-strong);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.4), inset 0 1px 0 rgba(0,0,0,.04);
}
input:focus,select:focus,textarea:focus{
  border-color: color-mix(in oklab, var(--primary) 65%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}

button{
  cursor: pointer;
  background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 20%, white), var(--primary));
  color: var(--primary-contrast);
  border: none;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 11px;
  box-shadow: 0 8px 16px rgba(0,122,255,.22), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .06s ease, filter .15s ease;
}
button:hover{ filter: brightness(1.05) }
button:active{ transform: translateY(1px) }

button.ghost{
  background: var(--chip);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
button.warn{ background: linear-gradient(180deg, #ffd48a, var(--warn)); color: #3a2500 }
button.danger{ background: linear-gradient(180deg, #ff9ea1, var(--danger)) }
button.ok{ background: linear-gradient(180deg, #98f5b2, var(--ok)); color:#053614 }

.actions{display:flex;gap:10px;flex-wrap:wrap}

.row{display:flex;gap:12px;flex-wrap:wrap}
.row>.col{flex:1 1 220px}

/* Chips as segmented controls */
.chips{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.chip{
  background: var(--chip);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-size:12px;color:#2b2f36;
  user-select:none; cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
@media (prefers-color-scheme: dark){
  .chip{ color:#ccd6e2 }
}
.chip.active{
  background: linear-gradient(180deg, #e6f0ff, #bfdcff);
  border-color: color-mix(in oklab, var(--primary) 45%, transparent);
  color: #0b3870;
  box-shadow: 0 10px 20px rgba(0,122,255,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
@media (prefers-color-scheme: dark){
  .chip.active{
    background: linear-gradient(180deg, rgba(10,132,255,.25), rgba(10,132,255,.45));
    color: #e9f2ff;
  }
}
.chip.done{ opacity:.9 }

/* Table with macOS separators */
.table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel-strong);border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow: var(--shadow-soft)}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
.table th{background: color-mix(in oklab, var(--panel-strong) 75%, var(--bg-accent));color:#3e4a58}
@media (prefers-color-scheme: dark){
  .table th{ color:#b9c6d4 }
}
.table tr:last-child td{ border-bottom: none }
.table tfoot td{font-weight:700}
.right{text-align:right}

.badge{
  padding:4px 10px;border-radius:999px;font-size:11px;
  border:1px solid var(--border);
  background: var(--chip);
  color:#2f353d;
}
@media (prefers-color-scheme: dark){
  .badge{ color:#dbe6f2 }
}

.note{font-size:12px;color:var(--muted)}

.footer{opacity:.8;margin-top:24px;font-size:12px;text-align:center;color:var(--muted)}

.center{display:flex;align-items:center;justify-content:center}
.small{font-size:12px}

.hide{display:none}

/* Links */
a{color: var(--primary); text-decoration: none}
a:hover{text-decoration: underline}

/* Print refinement inside generated iframes */
@media print{
  body{ background: white }
  .header, .chips, .actions, .footer{ display:none !important }
}


/* ==== BORMEX Light Palette Overrides (2025-08-19) ==== */
:root{
  --bg:#F7F7F8;
  --card:#FFFFFF;
  --text:#111827;
  --muted:#6B7280;
  --primary:#0B5D3B; /* verde bandera */
  --primary-contrast:#FFFFFF;
  --border:#E5E7EB;
}

html, body{ background: var(--bg) !important; color: var(--text) !important; }

.container{ backdrop-filter: none; }

.header, .footer{ background: transparent !important; color: var(--text) !important; }

.card{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.04) !important;
}

button{
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border-color: var(--primary) !important;
}

button.ghost{
  background: transparent !important;
  color: var(--primary) !important;
  border:1px solid var(--primary) !important;
}

.chip{ background:#f0f3f5 !important; color:#e5e7eb !important; }
.chip.active{ background: var(--primary) !important; color: var(--primary-contrast) !important; }

/* Logo block */
.logo{
  width:140px;height:38px; background:url('../img/logo_bormex.png') left center / contain no-repeat !important;
}

/* Subtle pastel "auras" */
body::before{
  content:""; position:fixed; inset:-20% -10% auto -10%; height:60vh;
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(0,128,96,.12), transparent 60%),
    radial-gradient(700px 480px at 85% 10%, rgba(220,20,60,.10), transparent 65%),
    radial-gradient(500px 380px at 60% 90%, rgba(0,128,96,.08), transparent 60%);
  pointer-events:none; z-index:-1;
}

/* Tables & inputs */
input, select, textarea{
  background:#fff !important; color:var(--text) !important; border:1px solid var(--border) !important;
}
.table th{ background:#fbfbfc !important; color:#e5e7eb !important; }
.table td, .table th{ border-bottom:1px solid var(--border) !important; }
.note{ background:#eff6f0 !important; color:#335d45 !important; border-left:4px solid var(--primary) !important; }


/* === Limpieza de fondo en lista de productos === */
.productos-lista, .productos-card, .items-card, .productos-tabla, .line-items, .items-container {
  background: #f8fafc !important; /* limpio y claro */
}
.producto-row, .item-row {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
}
/* Botón agregar producto coherente */
button.agregar-producto, .btn-agregar-producto {
  background: #166534 !important; /* verde principal */
  color: #fff !important;
}

/* === Observaciones generales === */
.section-observaciones .label { 
  display:block; 
  margin: 10px 0 6px; 
  font-weight:600;
}
.section-observaciones .muted { 
  color:#6b7280; 
  display:block; 
  margin-top:6px;
  font-size:12px;
}


/* Extra: style for observaciones textarea */
.field textarea{
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
  outline: none;
  resize: vertical;
  min-height: 80px;
  box-shadow: var(--shadow-soft);
}