@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #f4f6f9;
  --color-text: #1c2430;
  --color-accent: #4c8dff;
  --color-accent-2: #7c8798;
  --color-divider: color-mix(in srgb, #1c2430 9%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-600: #7d7979;
  --color-neutral-800: #444141;

  --color-accent-100: #e9f8ff;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;

  --color-accent-2-100: #fff1f4;
  --color-accent-2-600: #d82071;
  --color-accent-2-800: #790e3d;

  --color-green-100: #e8f9ee;
  --color-green-700: #0c7a3f;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 5px; --space-2: 10px; --space-3: 15px; --space-4: 20px;
  --space-5: 24px; --space-6: 30px; --space-8: 40px;

  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px;

  --shadow-sm: 0 1px 3px color-mix(in srgb, #1c2430 6%, transparent);
  --shadow-md: 0 8px 24px color-mix(in srgb, #1c2430 10%, transparent);
  --shadow-lg: 0 20px 48px color-mix(in srgb, #1c2430 16%, transparent);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--color-accent) 22%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 40%),
    linear-gradient(160deg, #eef3fb 0%, #dbe6f5 45%, #cfe0f3 100%);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-body);
  min-height: 100vh;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }
p { margin: 0; }
.text-muted { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-300); border-radius: 4px; }

.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 500;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
  transition: background .15s ease, transform .1s ease;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 35%, transparent); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-secondary { background: color-mix(in srgb, #ffffff 40%, transparent); border-color: color-mix(in srgb, #ffffff 70%, transparent); backdrop-filter: blur(14px) saturate(150%); }
.btn-secondary:hover { background: color-mix(in srgb, #ffffff 65%, transparent); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-2); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-sm); }
.btn-icon.btn-sm { width: 26px; height: 26px; }
.btn-block { width: 100%; margin-top: var(--space-2); }
.btn-danger { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.btn-danger:hover { background: #ffdee6; }

/* — forms — */
.field { margin-bottom: var(--space-3); }
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input, select.input, textarea.input {
  width: 100%; min-height: 40px; padding: 8px 14px; font: inherit; font-size: 14px;
  color: var(--color-text); background: color-mix(in srgb, #ffffff 55%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 70%, transparent); border-radius: var(--radius-sm);
  backdrop-filter: blur(14px) saturate(150%);
}
textarea.input { min-height: 70px; resize: vertical; }
.input:focus-visible { border-color: var(--color-accent); outline: none; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-opt:has(input:checked) { background: var(--color-accent); color: #fff; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: color-mix(in srgb, #ffffff 55%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 75%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 60%, transparent), var(--shadow-sm);
  backdrop-filter: blur(22px) saturate(160%);
}
.card-kicker { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 600; }
.card-title { font-family: var(--font-heading); font-weight: 600; font-size: 17px; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; letter-spacing: .01em; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-green { background: var(--color-green-100); color: var(--color-green-700); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; }

/* — tables — */
.table { width: 100%; border-collapse: separate; border-spacing: 0 2px; font-size: 13px; }
.table th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); font-weight: 600; padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table td { padding: 10px var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent); vertical-align: middle; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }

/* — layout — */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 252px; flex: none;
  background: color-mix(in srgb, #ffffff 38%, transparent);
  backdrop-filter: blur(24px) saturate(160%);
  border-right: 1px solid color-mix(in srgb, #ffffff 70%, transparent);
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4);
  position: fixed; top: 0; bottom: 0; left: 0; overflow: auto;
}
.main-with-sidebar { margin-left: 252px; padding: var(--space-5); flex: 1; min-width: 0; }
.topbar {
  width: 100%; background: color-mix(in srgb, #ffffff 38%, transparent);
  backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid color-mix(in srgb, #ffffff 70%, transparent);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-5); flex-wrap: wrap;
}
.main-full { padding: var(--space-5); }

.sidebar-nav a, .topbar-nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-md); text-decoration: none; font-size: 14px; color: var(--color-text);
}
.sidebar-nav a.active, .topbar-nav a.active { background: var(--color-accent); color: #fff; }
.sidebar-nav a:hover:not(.active), .topbar-nav a:hover:not(.active) { background: color-mix(in srgb, #ffffff 55%, transparent); }
.topbar-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.topbar-nav a { padding: 8px 10px; font-size: 13px; }

/* — dialogs — */
.dialog-backdrop { position: fixed; inset: 0; display: none; place-items: start center; padding: var(--space-4); padding-top: var(--space-8); overflow-y: auto; background: color-mix(in srgb, #1c2430 35%, transparent); backdrop-filter: blur(4px); z-index: 100; }
.dialog-backdrop.open { display: grid; }
.dialog { width: min(480px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: color-mix(in srgb, #ffffff 88%, transparent); border: 1px solid color-mix(in srgb, #ffffff 75%, transparent); backdrop-filter: blur(28px) saturate(160%); box-shadow: var(--shadow-lg); }
.dialog.dialog-lg { width: min(680px, 100%); }
.dialog-title { font-family: var(--font-heading); font-weight: 600; font-size: 20px; }
.dialog-body { font-size: 14px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-3); }
.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-2 { grid-template-columns: 1fr; } }

.pos-grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .pos-grid { grid-template-columns: 1fr; } }
.pos-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: var(--space-2); }
.pos-product-card { cursor: pointer; gap: 4px; padding: 8px; }
.pos-product-thumb { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); background: repeating-linear-gradient(45deg, var(--color-neutral-200), var(--color-neutral-200) 6px, var(--color-neutral-100) 6px, var(--color-neutral-100) 12px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pos-product-thumb img { width: 100%; height: 100%; object-fit: cover; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.login-box { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-5); }

.alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; }
.alert-error { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.alert-ok { background: var(--color-green-100); color: var(--color-green-700); }

.badge-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* — ticket de impresion — */
.ticket { background: #fff; padding: 14px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.5; color: #000; }
.ticket .row { display: flex; gap: 4px; }
.ticket .row .cant { width: 24px; flex: none; }
.ticket .row .prod { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket .row .precio { flex: none; }
.ticket .center { text-align: center; }
.ticket .dashed { border-top: 1px dashed #999; margin: 6px 0; }

@media print {
  body * { visibility: hidden; }
  #ticket-print, #ticket-print * { visibility: visible; }
  #ticket-print { position: absolute; left: 0; top: 0; }
}