/* Luxo reduzido responsivo: mobile-first, tabela vira "cards" no celular */
:root{
  --bg:#f6f5f3;
  --card:#ffffff;
  --ink:#101418;
  --muted:#6b7280;
  --brand:#c6a15b;
  --brand-700:#a8843f;
  --border:#e5e1da;
  --danger:#d94848;
  --shadow:0 12px 30px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif}
h1,h2, label strong, th strong{font-weight:700}
h1,h2{font-family:"DM Serif Display", Georgia, "Times New Roman", serif; letter-spacing:.2px}

.container{max-width:1200px;margin-inline:auto;padding:16px}
@media (min-width:768px){ .container{padding:20px} }

.header{display:flex;align-items:center;justify-content:space-between;padding-top:16px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#1f2937,#111827);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow)}
header h1{margin:0;font-size:1.6rem}
@media (min-width:768px){ header h1{font-size:2rem} }
.subtitle{margin:4px 0 0 0;color:var(--muted);font-size:.95rem}

.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#fff;color:#111;box-shadow:0 4px 12px rgba(0,0,0,.04);font-size:.9rem}
.badge.ok{border-color:#cbd5e1}
.badge.warn{border-color:#f59e0b;background:#fff7ed}

.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:14px;margin:14px 0;box-shadow:var(--shadow)}
@media (min-width:768px){ .card{padding:18px;margin:18px 0} }

.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .grid{grid-template-columns:repeat(3,1fr)} }

.field{display:flex;flex-direction:column;gap:6px}
label{font-size:.95rem;color:#374151}
.req{color:var(--brand);font-weight:700}
input,textarea,select{padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff;font-size:1rem;transition:.2s;-webkit-tap-highlight-color:transparent}
input:focus,textarea:focus,select:focus{outline:2px solid var(--brand);border-color:var(--brand)}
input,button,textarea{touch-action:manipulation}

.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn{border:1px solid var(--border);background:#fff;padding:12px 16px;border-radius:12px;cursor:pointer;transition:transform .06s ease, box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-700)}
.btn.danger{background:#fff;border-color:var(--danger);color:var(--danger)}
.btn.danger:hover{box-shadow:0 4px 14px rgba(217,72,72,.15)}
.tool-row{display:flex;gap:8px;flex-wrap:wrap}

.table-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tools input[type="search"]{min-width:220px;flex:1}

.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{background:linear-gradient(180deg,#fff,#faf7f1);position:sticky;top:0;z-index:1}
tbody tr.low-stock{background:#fffaf0}
tfoot td{background:#fbfbfb;font-weight:600}

/* Modo card no mobile (<= 640px) */
@media (max-width:640px){
  thead{display:none}
  table,tbody,tr,td{display:block;width:100%}
  tr{margin:12px;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.03)}
  td{border:none;border-bottom:1px solid var(--border);padding:10px 12px}
  td:last-child{border-bottom:none}
  td::before{
    content: attr(data-label);
    display:block;
    font-weight:700;
    color:#374151;
    margin-bottom:4px;
  }
}

.hint{color:var(--muted);font-size:.9rem;margin-top:8px}
.footer{opacity:.85;padding-bottom:28px}

/* Print para PDF */
#printArea{display:none}
@media print{
  body{background:#fff}
  header, .actions, .tools, .footer{display:none !important}
  #printArea{display:block;padding:20px}
  #printArea h2{margin:0 0 8px 0;font-weight:700}
  #printArea .muted{color:#666}
  #printArea table{width:100%;border-collapse:collapse}
  #printArea th, #printArea td{border:1px solid #ddd;padding:8px}
}