/* Panel de la tienda. Todo sale de los tokens (tokens.css); no inventar colores ni fuentes. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 400 16px/1.6 var(--font-texto);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: var(--success-text); }
h1, h2 { font-family: var(--font-titulos); font-weight: 600; margin: 0 0 var(--s4); line-height: 1.2; }
h1 { font-size: 28px; }
h2 { font-size: 20px; font-weight: 500; }
p { margin: 0 0 var(--s3); }
.muted { color: var(--text-muted); }
.small { font-size: 14px; }
.lead { font-size: 17px; }
.sprite { position: absolute; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i.warn { color: var(--warning); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Logo según el tema */
.logo-light { display: none; }
[data-theme="light"] .logo-dark { display: none; }
[data-theme="light"] .logo-light { display: block; }
.i-to-dark { display: none; }
[data-theme="light"] .i-to-light { display: none; }
[data-theme="light"] .i-to-dark { display: block; }

/* Componentes */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s6); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: var(--control-h); padding: 0 var(--s6); border-radius: var(--radius);
  font: 500 16px var(--font-titulos); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background var(--duration), border-color var(--duration);
}
.btn:disabled { opacity: .6; cursor: progress; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-sm { height: 36px; padding: 0 var(--s4); font-size: 14px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius);
  background: transparent; border: 1px solid var(--border); color: var(--text); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }

.field { display: flex; flex-direction: column; gap: var(--s1); }
.field > span { font-size: 14px; font-weight: 500; }
.field small { font-size: 14px; }
input, select {
  height: var(--control-h); padding: 0 var(--s3); width: 100%;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  font: 400 16px var(--font-texto);
}
input:focus, select:focus { outline: none; border-color: var(--primary); }
.form-error { color: var(--danger); font-size: 14px; margin: 0; }
.form { display: flex; flex-direction: column; gap: var(--s4); max-width: 640px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

/* Cargando */
.loading { min-height: 100vh; display: grid; place-items: center; }
.loading img { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; } }

/* Entrada */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s4); }
.login-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--s4); }
.login-card .logo { margin-bottom: var(--s2); }
.login-card h1 { font-size: 22px; font-weight: 500; margin: 0; }

/* Estructura del panel */
.shell { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 64px 1fr; min-height: 100vh; }
.topbar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s6); border-bottom: 1px solid var(--border); background: var(--bg);
}
.brand { display: flex; }
.store-name { color: var(--text-muted); font-size: 14px; font-weight: 500; padding-left: var(--s4); border-left: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-name:empty { display: none; }
.topbar-actions { margin-left: auto; display: flex; gap: var(--s2); }
.sidenav { border-right: 1px solid var(--border); padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.sidenav a {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3);
  border-radius: var(--radius); color: var(--text-muted); text-decoration: none; font-weight: 500;
}
.sidenav a:hover { background: var(--surface); color: var(--text); }
.sidenav a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.sidenav a[aria-current="page"] .i { color: var(--success-text); }
.content { padding: var(--s8) var(--s6); max-width: 960px; width: 100%; }

/* Aviso */
.notice { display: flex; gap: var(--s4); align-items: flex-start; }
.notice .i { width: 24px; height: 24px; margin-top: 2px; color: var(--text-muted); }
.notice .i.warn { color: var(--warning); }
.notice p { margin: 0; }

/* Pasos de inicio */
.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s3); }
.steps li {
  display: flex; align-items: center; gap: var(--s4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s4) var(--s6);
}
.steps li > div { flex: 1; display: flex; flex-direction: column; }
.step-icon {
  width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); font: 600 14px var(--font-titulos); color: var(--text-muted);
}
.steps li.is-done .step-icon { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.steps li.is-done .btn { display: none; }
.steps li.is-soon { opacity: .7; }

/* Encabezado de sección */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.page-head h1 { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-specs); }
.num { text-align: right; }
.i.ok { color: var(--success-text); }

/* Formularios anchos y botones */
.form-wide { max-width: none; }
.form-wide h2 { margin-bottom: var(--s2); }
textarea {
  width: 100%; padding: var(--s3); resize: vertical; min-height: 160px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  font: 400 14px/1.5 var(--font-specs); tab-size: 16;
}
textarea:focus { outline: none; border-color: var(--primary); }
.import-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.form-buttons { display: flex; flex-wrap: wrap; gap: var(--s3); }
.icon-btn-sm { width: 36px; height: 36px; }
.icon-btn-sm .i { width: 18px; height: 18px; }

/* Etiquetas de estado: siempre con ícono además del color */
.tag {
  display: inline-flex; align-items: center; gap: var(--s1); padding: 2px var(--s2); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--text-muted); background: var(--surface-2);
}
.tag .i { width: 14px; height: 14px; }
.tag-ok { color: var(--success-text); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.tag-warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.tag-bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* Resumen de la lista */
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); margin: var(--s4) 0; }
.tiles > div { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3); display: flex; flex-direction: column; }
.tiles strong { font-size: 24px; font-weight: 400; }
.tiles span { font-size: 14px; color: var(--text-muted); }
.tiles .is-ok strong { color: var(--success-text); }
.tiles .is-warn strong { color: var(--warning); }
.tiles .is-bad strong { color: var(--danger); }
.notice-line { display: flex; gap: var(--s2); align-items: flex-start; font-size: 14px; }
.notice-line .i { margin-top: 2px; }
.notice-line.is-ok .i { color: var(--success-text); }
.notice-line.is-warn .i { color: var(--warning); }
.imp-group { border: 1px solid var(--border); border-radius: var(--radius); margin: var(--s3) 0; background: var(--bg); }
.imp-group summary { cursor: pointer; padding: var(--s3) var(--s4); font-weight: 500; display: flex; gap: var(--s2); align-items: center; }
.imp-group.is-ok summary .mono { color: var(--success-text); }
.imp-group.is-warn summary .mono { color: var(--warning); }
.imp-group.is-bad summary .mono { color: var(--danger); }
.imp-group > p { padding: 0 var(--s4); }
.imp-group ul { list-style: none; margin: 0; padding: 0 var(--s4) var(--s3); max-height: 360px; overflow: auto; }
.imp-group li { display: grid; grid-template-columns: minmax(0, 3fr) 1fr minmax(0, 2fr) auto 48px; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--border); font-size: 14px; align-items: baseline; }
.imp-name { overflow-wrap: anywhere; }

/* Tabla de stock */
.banner { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); background: color-mix(in srgb, var(--warning) 8%, transparent);
  border-radius: var(--radius); font-size: 14px; }
.banner .i { margin-top: 1px; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-bottom: var(--s3); }
.toolbar input { flex: 1 1 240px; width: auto; }
.toolbar select { flex: 0 0 auto; width: auto; }
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.stock-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stock-table th { text-align: left; font-weight: 500; color: var(--text-muted); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); white-space: nowrap; }
.stock-table th.num { text-align: right; }
.stock-table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.stock-table tbody tr:last-child td { border-bottom: 0; }
.stock-table tr.is-empty .imp-name { color: var(--text-muted); }
.row-sub { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s1); }
.cell-input { height: 36px; width: 130px; text-align: right; font-size: 14px; padding: 0 var(--s2); }
.cell-stock { width: 76px; }
.actions { white-space: nowrap; text-align: right; }
.actions .btn { margin-right: var(--s2); }
.empty { text-align: center; padding: var(--s8); }
tr.editor td { background: var(--bg); }
.editor-box { display: flex; flex-direction: column; gap: var(--s3); }
.editor-box p { margin: 0; }
.editor-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.editor-row input[data-field="name"] { flex: 1 1 320px; width: auto; }
.editor-row .field { flex: 0 1 220px; }
#stock-more { margin-top: var(--s4); }

/* Cotizador */
.quote-input { min-height: 64px; font: 400 16px/1.5 var(--font-texto); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px;
  padding: var(--s1) var(--s3); font: 500 14px var(--font-texto); cursor: pointer;
}
.chip:hover { color: var(--text); border-color: var(--text-muted); }
.copilot-note { display: flex; gap: var(--s2); align-items: flex-start; font-size: 14px; color: var(--text-muted); margin: 0; }
.copilot-note .i { margin-top: 2px; }
#quote-result { margin-top: var(--s4); }
.understood { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.chip-static { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px var(--s2); font-size: 13px; }
.understood + .notice-line { margin-top: var(--s3); }
.quote-card { display: flex; flex-direction: column; gap: var(--s4); }
.quote-card textarea { font: 400 15px/1.5 var(--font-texto); min-height: 80px; }
.bot-line { display: flex; gap: var(--s3); align-items: flex-start; margin-top: var(--s3); }
.bot-line .i { color: var(--success-text); margin-top: 3px; }
.bot-line p { margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: var(--s2); border-bottom: 1px solid var(--border); }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  padding: var(--s2) var(--s3); color: var(--text-muted); font: 500 15px var(--font-titulos);
}
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); }
.quote-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s6); }
.parts { list-style: none; margin: 0; padding: 0; }
.part { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.part-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.part-cat { display: flex; align-items: center; gap: var(--s1); font-size: 13px; font-weight: 500; color: var(--text-muted); }
.part-cat .i { width: 16px; height: 16px; }
.swap { height: 36px; font-size: 14px; padding: 0 var(--s2); }
.part.is-bad .swap { border-color: var(--danger); }
.part.is-warn .swap { border-color: var(--warning); }
.part-price { white-space: nowrap; font-size: 14px; }
.quote-foot { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s3) 0; }
.quote-foot span:first-child { color: var(--text-muted); }
.total { font: 600 26px var(--font-titulos); }
.budget-line { display: flex; gap: var(--s2); align-items: flex-start; font-size: 14px; margin: 0 0 var(--s3); }
.budget-line .i { margin-top: 2px; }
.budget-line.is-over { color: var(--warning); }
.verdict { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--radius); border: 1px solid; }
.verdict > div { display: flex; flex-direction: column; font-size: 14px; }
.verdict .i { margin-top: 2px; }
.verdict-ok { border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.verdict-ok .i, .verdict-ok strong { color: var(--success-text); }
.verdict-warn { border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: color-mix(in srgb, var(--warning) 8%, transparent); }
.verdict-warn .i, .verdict-warn strong { color: var(--warning); }
.verdict-bad { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.verdict-bad .i, .verdict-bad strong { color: var(--danger); }
.side-title { font: 500 16px var(--font-titulos); margin: 0 0 var(--s2); }
.check-list { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.check-list li { display: flex; gap: var(--s2); align-items: flex-start; font-size: 14px; }
.check-list li > div { display: flex; flex-direction: column; }
.check-list li span { color: var(--text-muted); }
.check-list .i { margin-top: 2px; width: 18px; height: 18px; }
.i.bad { color: var(--danger); }
.approved-head { display: flex; gap: var(--s3); align-items: flex-start; }
.approved-head .i { width: 28px; height: 28px; margin-top: 2px; }
.approved-head h2 { margin-bottom: var(--s1); }
.msg-preview {
  white-space: pre-wrap; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s4); font: 400 14px/1.6 var(--font-texto); margin: var(--s4) 0; max-height: 420px; overflow: auto;
}
.section-title { font-size: 20px; font-weight: 500; margin: var(--s8) 0 var(--s3); }
.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.history-item { display: flex; gap: var(--s4); align-items: center; padding: var(--s4) var(--s6); }
.history-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.history-actions { display: flex; gap: var(--s2); align-items: center; }

/* Aviso flotante */
.toast {
  position: fixed; bottom: var(--s6); left: 50%; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s3) var(--s4); font-size: 14px; font-weight: 500;
}
.toast.is-ok { border-color: var(--primary); }
.toast.is-bad { border-color: var(--danger); }

/* Móvil: la navegación pasa abajo */
@media (max-width: 640px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: 56px 1fr auto; }
  .topbar { padding: 0 var(--s4); }
  .sidenav {
    grid-row: 3; position: sticky; bottom: 0; flex-direction: row; justify-content: space-around;
    border-right: 0; border-top: 1px solid var(--border); background: var(--bg); padding: var(--s1);
  }
  .sidenav a { flex-direction: column; gap: 2px; font-size: 12px; padding: var(--s2); }
  .content { padding: var(--s6) var(--s4); }
  .field-row { grid-template-columns: 1fr; }
  .steps li { flex-wrap: wrap; padding: var(--s4); }
  .toast { bottom: 80px; }
  .page-head { flex-wrap: wrap; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .imp-group li { grid-template-columns: 1fr auto; }
  .imp-group li > :nth-child(2), .imp-group li > :nth-child(3), .imp-group li > :nth-child(5) { display: none; }
  /* La tabla pasa a tarjetas */
  .stock-table thead { display: none; }
  .stock-table, .stock-table tbody, .stock-table tr, .stock-table td { display: block; width: 100%; }
  .stock-table tr { border-bottom: 1px solid var(--border); padding: var(--s3) var(--s4); }
  .stock-table td { border: 0; padding: var(--s1) 0; }
  .stock-table td:nth-child(2) { color: var(--text-muted); font-size: 13px; }
  .stock-table td.num { display: inline-block; width: auto; margin-right: var(--s3); text-align: left; }
  .stock-table td.actions { text-align: left; padding-top: var(--s2); }
  .cell-input { width: 120px; }
  .quote-cols { grid-template-columns: 1fr; }
  .part { flex-wrap: wrap; }
  .history-item { flex-wrap: wrap; padding: var(--s4); }
  .stock-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--text-muted); }
}