/* ERP MLC · interfaz esencial v3 */
:root {
  --navy: #10243d;
  --navy-2: #173a59;
  --blue: #176fc1;
  --violet: #6757b8;
  --ink: #1c2c3d;
  --muted: #657688;
  --page: #f7f8fb;
  --panel: #ffffff;
  --line: #e1e7ee;
  --line-strong: #cad6e1;
  --green: #187d5d;
  --red: #c94352;
  --amber: #ae701e;
  --shadow: 0 8px 24px rgba(23, 43, 66, .055);
}

html, body { background: var(--page); }
body { color: var(--ink); background-image: none; }

/* Navegación clara, sin números ni abreviaturas */
.app-shell { grid-template-columns: 218px minmax(0, 1fr); }
.app-main { margin-left: 218px; }
.sidebar {
  width: 218px;
  padding: 16px 12px;
  border-right: 0;
  background: #112b44;
  box-shadow: none;
}
.app-brand { min-height: 58px; padding: 8px; border-radius: 12px; }
.app-brand .brand-mark { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(145deg, #2789dd, #6757b8); }
.app-brand > b { width: 30px; height: 30px; color: #d9e7f4; background: rgba(255, 255, 255, .07); }
.side-nav { gap: 3px; padding: 22px 2px; }
.side-nav button {
  min-height: 44px;
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  color: #cad7e2;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}
.side-nav button > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #72899f; }
.side-nav button:hover { color: #fff; background: rgba(255, 255, 255, .055); }
.side-nav button.active { color: #fff; background: rgba(43, 137, 218, .2); box-shadow: none; }
.side-nav button.active > span { background: #63b4fb; box-shadow: 0 0 0 4px rgba(67, 157, 234, .13); }
.install-button, .sync-note, .account-button { border-radius: 10px; }
.install-button { display: none; }
.sync-note { padding: 10px; background: rgba(4, 20, 35, .18); }
.sync-note small { font-size: 10px; }
.account-button { padding: 9px; border: 0; background: rgba(255, 255, 255, .055); }
.account-button:hover { background: rgba(255, 255, 255, .09); }

.page-content { width: min(100%, 1500px); padding: 27px clamp(24px, 3vw, 42px) 72px; }

/* Títulos planos: una pantalla, una intención */
.page-header, .inventory-minimal-header {
  min-height: 70px;
  margin: 0 0 18px;
  padding: 0 0 15px;
  align-items: flex-end;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.page-header::after { display: none; }
.eyebrow, .inventory-minimal-header span { margin-bottom: 3px; color: var(--violet); font-size: 10px; letter-spacing: .07em; }
.page-header h1, .inventory-minimal-header h1 { font-size: clamp(26px, 2.5vw, 34px); letter-spacing: -.035em; }
.page-header p { margin-top: 5px; max-width: 660px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.header-actions { gap: 7px; }
.button { min-height: 42px; padding: 9px 15px; border-radius: 9px; font-size: 12px; }
.button:hover { transform: none; }
.button.primary { border-color: #1769b2; background: #176fc1; box-shadow: none; }
.button.primary:hover { background: #125fa8; box-shadow: none; }
.button.green { background: var(--green); box-shadow: none; }
.button.secondary, .mini-button, .tool-reset { border-color: var(--line-strong); background: #fff; box-shadow: none; }
.mini-button, .tool-reset { min-height: 34px; padding: 7px 11px; border-radius: 8px; font-size: 11px; }

.panel, .work-panel { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: none; }
.work-panel { margin-top: 0; }
.inline-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: -5px 0 14px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
}
.inline-summary span { display: inline-flex; align-items: center; gap: 5px; }
.inline-summary b { color: var(--ink); font-size: 14px; }
.inline-summary .positive b { color: var(--green); }
.inline-summary .negative b { color: var(--red); }
.inline-summary .warning b { color: var(--amber); }

/* Inicio: sólo tareas y áreas */
.home-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.home-heading > div { display: grid; gap: 2px; }
.home-heading > div > span { color: var(--violet); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.home-heading h1 { margin: 0; color: var(--navy); font-size: clamp(28px, 3vw, 38px); letter-spacing: -.04em; }
.home-heading p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.home-account { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: left; cursor: pointer; }
.home-account > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--navy-2); font-size: 11px; font-weight: 850; }
.home-account > div { display: grid; gap: 2px; }
.home-account strong { color: var(--ink); font-size: 11px; }
.home-account small { color: var(--muted); font-size: 10px; }
.home-section { margin-bottom: 22px; }
.home-section > header { margin-bottom: 9px; }
.home-section h2 { margin: 0; color: #36495c; font-size: 12px; letter-spacing: .03em; }
.minimal-fast-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.minimal-fast-actions button, .minimal-count-action {
  min-height: 66px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
}
.minimal-fast-actions button:hover, .minimal-count-action:hover { border-color: #9fbfdc; box-shadow: var(--shadow); transform: none; }
.minimal-fast-actions button > span, .minimal-count-action > span { width: 36px; height: 36px; border-radius: 9px; font-size: 20px; }
.minimal-fast-actions button.entry > span { color: #fff; background: var(--green); }
.minimal-fast-actions button.exit > span { color: #fff; background: var(--red); }
.minimal-fast-actions strong, .minimal-count-action strong { font-size: 14px; }
.minimal-fast-actions small, .minimal-count-action small { font-size: 11px; }
.home-area-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}
.home-area-list button {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.home-area-list button:nth-child(2n) { border-right: 0; }
.home-area-list button:nth-last-child(-n+2) { border-bottom: 0; }
.home-area-list button:hover { background: #f7faff; }
.home-area-list button > div { min-width: 0; display: grid; gap: 4px; }
.home-area-list strong { font-size: 14px; }
.home-area-list span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.home-area-list b { color: var(--blue); font-size: 11px; font-weight: 750; }
.home-stock-line { display: flex; gap: 0; width: max-content; max-width: 100%; color: var(--muted); font-size: 11px; }
.home-stock-line span { padding: 0 14px; border-right: 1px solid var(--line); }
.home-stock-line span:first-child { padding-left: 0; }
.home-stock-line span:last-child { border-right: 0; }
.home-stock-line b { color: var(--ink); }
.home-stock-line .warning b { color: var(--amber); }

/* Búsquedas y tablas */
.tools, .tools:has(.compact-select) {
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 210px) auto auto;
  gap: 9px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.tools:has(.compact-select) { grid-template-columns: minmax(240px, 1fr) 155px 155px auto auto; }
.search, .select { gap: 5px; }
.search span, .select span { color: #5d6e80; font-size: 10px; }
.search input, .select select { height: 42px; border-color: var(--line-strong); border-radius: 9px; font-size: 12px; }
.result-count { padding: 6px 8px; color: var(--muted); background: transparent; font-size: 10px; }
.table-wrap { max-height: min(68vh, 820px); }
.data-table th { padding: 11px 14px; color: #738293; background: #fafbfc; font-size: 9px; }
.data-table td { padding: 13px 14px; font-size: 11px; }
.data-table tbody tr:hover { background: #fafcff; }
.table-secondary { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.product-name strong { font-size: 12px; }
.product-name small { font-size: 10px; }
.catalog-table { min-width: 720px; }

/* Inventario: lectura rápida, acciones bajo demanda */
.inventory-minimal-header { min-height: 70px; }
.inventory-workspace { border-radius: 14px; box-shadow: none; }
.inventory-toolbar { padding: 12px 14px; }
.inventory-list-heading, .inventory-row { grid-template-columns: minmax(280px, 1fr) 130px 90px; }
.inventory-list-heading { padding: 9px 16px; }
.inventory-row { min-height: 72px; padding: 11px 16px; }
.inventory-product strong { font-size: 13px; line-height: 1.35; }
.inventory-product small { margin-top: 3px; font-size: 10px; }
.inventory-row-stock > strong { font-size: 19px; }
.inventory-row-menu > summary { min-height: 35px; padding: 7px 10px; font-size: 10px; }
.inventory-row-menu > div { width: 260px; border-radius: 11px; box-shadow: 0 15px 40px rgba(21, 45, 70, .14); }

/* Documentos: abrir primero, detalles después */
.document-grid { grid-template-columns: 1fr; gap: 0; padding: 0; }
.document-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.document-card:last-child { border-bottom: 0; }
.document-card header { min-width: 0; gap: 11px; }
.document-card header > div { min-width: 0; display: grid; gap: 3px; }
.document-card header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.document-card header small { color: var(--muted); font-size: 10px; }
.document-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 9px; }
.document-card footer { margin: 0; padding: 0; border: 0; }
.document-card footer .button, .document-card footer .mini-button { min-height: 34px; }
.document-details { grid-column: 1 / -1; margin-left: 53px; }
.document-details > summary { width: max-content; color: var(--blue); font-size: 10px; font-weight: 750; cursor: pointer; }
.document-details > p { margin: 10px 0 3px; color: var(--muted); font-size: 11px; }
.document-details > small { color: #8694a2; font-size: 9px; }
.document-details .version-history { margin-top: 9px; padding-top: 6px; border-top: 1px solid var(--line); }

/* SAT: los pendientes se completan en el mismo lugar */
.sat-table { min-width: 700px; }
.sat-description { min-width: 260px; }
.sat-description strong { font-size: 12px; }
.sat-description small { font-size: 9px; }
.sat-code { padding: 6px 9px; font-size: 12px; }
.sat-inline-form { display: flex; align-items: center; gap: 7px; max-width: 340px; }
.sat-inline-form label { flex: 1; }
.sat-inline-form input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #d6b476; border-radius: 8px; color: var(--ink); background: #fffdf8; font-size: 12px; }
.sat-inline-form .button { min-height: 38px; padding: 7px 12px; }
.sat-pending-label { color: var(--amber); font-size: 10px; font-weight: 750; }
.sat-mobile-code .sat-inline-form { width: 100%; max-width: none; }

/* Directorios y usuarios */
.directory-list { display: grid; }
.directory-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
}
.directory-row:last-child { border-bottom: 0; }
.directory-row > div { min-width: 0; display: grid; gap: 3px; }
.directory-row strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.directory-row small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.directory-row .client-mark { width: 40px; height: 40px; }
.user-row { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
.user-row.inactive { opacity: .62; }
.role-guide-details { margin-top: 14px; background: transparent; }
.role-guide-details > summary { padding: 11px 13px; font-size: 11px; }

/* Cotizador: escritura continua, controles secundarios discretos */
.quote-tabs { margin: 0 0 14px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.quote-tabs button { min-height: 36px; border-radius: 7px; font-size: 11px; }
.quote-customer-card, .quote-lines-card, .quote-finish-card { border-radius: 13px; box-shadow: none; }
.quote-customer-card { padding: 15px; }
.quote-customer-card > div:first-child > span, .quote-lines-card > header > div > span { display: none; }
.quote-customer-card strong, .quote-lines-card header strong { font-size: 13px; }
.quote-customer-card small, .quote-lines-card header small { font-size: 10px; }
.quote-lines-card > header { padding: 13px 15px; }
.quote-lines { gap: 8px; padding: 12px; }
.quote-line { border-radius: 10px; box-shadow: none; }
.quote-finish-card { padding: 15px; }
.quote-submit p { font-size: 10px; }

/* Conteo físico */
.inventory-count-start { max-width: 820px; margin: 0 auto 18px; box-shadow: none; }
.inventory-count-start > header { padding: 18px 18px 0; }
.inventory-count-start > header > span { display: none; }
.inventory-count-start form { padding: 16px 18px; }
.inventory-count-start > small { padding: 0 18px 18px; }
.inventory-count-archive { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.inventory-count-archive > summary { padding: 13px 15px; color: #405469; font-size: 11px; font-weight: 800; cursor: pointer; }
.inventory-count-archive[open] > summary { border-bottom: 1px solid var(--line); }
.inventory-count-archive .inventory-count-result { border: 0; border-radius: 0; }
.inventory-count-history-list { display: grid; padding: 10px; }
.inventory-count-progress { border-radius: 12px; box-shadow: none; }
.inventory-count-workspace { border-radius: 13px; box-shadow: none; }
.inventory-count-help { display: none; }

/* Menos ruido decorativo */
.compact-metrics { display: none; }
.document-notice, .sat-notice { display: none; }
.notification-bubble { right: 20px; bottom: 20px; width: 48px; height: 48px; border-width: 3px; }

@media (max-width: 1120px) {
  .tools, .tools:has(.compact-select) { grid-template-columns: minmax(220px, 1fr) minmax(145px, 190px) auto; }
  .tools:has(.compact-select) { grid-template-columns: minmax(220px, 1fr) 150px 150px; }
  .tools .tool-reset { grid-column: auto; }
  .tools .result-count { grid-column: -2 / -1; }
  .document-card { grid-template-columns: 1fr; }
  .document-card footer { margin-left: 53px; }
}

@media (max-width: 900px) {
  .app-main { margin-left: 0; }
  .page-content { padding: 18px 15px calc(92px + env(safe-area-inset-bottom)); }
  .mobile-header { min-height: 60px; padding: calc(9px + env(safe-area-inset-top)) 13px 9px; background: #112b44; box-shadow: none; }
  .mobile-header button { border-radius: 8px; }
  .mobile-nav { gap: 3px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); box-shadow: 0 -6px 22px rgba(24, 42, 61, .07); }
  .mobile-nav button { min-height: 50px; gap: 4px; border-radius: 8px; }
  .mobile-nav button > span { width: 6px; height: 6px; border-radius: 50%; background: #8fa0b0; }
  .mobile-nav button small { color: #5f7182; font-size: 9px; font-weight: 750; }
  .mobile-nav button.active { color: var(--blue); background: #edf5fc; }
  .mobile-nav button.active > span { background: var(--blue); }
  .page-header, .inventory-minimal-header { min-height: auto; align-items: flex-start; padding: 0 0 13px; border-radius: 0; }
  .page-header h1, .inventory-minimal-header h1 { font-size: 27px; }
  .page-header p { font-size: 11px; }
  .header-actions { width: 100%; }
  .home-area-list { grid-template-columns: 1fr; }
  .home-area-list button, .home-area-list button:nth-child(2n), .home-area-list button:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .home-area-list button:last-child { border-bottom: 0; }
  .home-area-list button { min-height: 67px; }
  .tools, .tools:has(.compact-select) { grid-template-columns: minmax(0, 1fr) minmax(135px, 40%); padding: 12px; }
  .tools .compact-select { grid-column: auto; }
  .tools .result-count { grid-column: 2; }
  .cards { padding: 9px; background: #fff; }
  .directory-cards { gap: 0; padding: 0; }
  .catalog-mobile-cards { gap: 0; padding: 0; }
  .catalog-mobile-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .catalog-mobile-card > div { min-width: 0; display: grid; gap: 3px; }
  .catalog-mobile-card > div > strong { overflow: hidden; margin: 0; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .catalog-mobile-card > div > small, .catalog-mobile-card > div > p { overflow: hidden; margin: 0; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .directory-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .directory-card > div { min-width: 0; display: grid; gap: 3px; }
  .directory-card > div > strong { margin: 0; font-size: 12px; }
  .directory-card p { overflow: hidden; margin: 0; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 620px) {
  .page-content { padding-left: 11px; padding-right: 11px; }
  .home-heading { align-items: flex-start; margin-bottom: 19px; }
  .home-account > div { display: none; }
  .home-heading h1 { font-size: 29px; }
  .minimal-fast-actions { grid-template-columns: 1fr 1fr; }
  .minimal-fast-actions button { min-height: 63px; padding: 11px; }
  .minimal-fast-actions button > span { width: 34px; height: 34px; }
  .minimal-fast-actions small { display: none; }
  .home-area-list span { white-space: normal; }
  .home-stock-line { width: 100%; justify-content: space-between; }
  .home-stock-line span { padding: 0 8px; font-size: 9px; }
  .tools, .tools:has(.compact-select) { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tools .search { grid-column: 1 / -1; }
  .tools .select, .tools .compact-select { grid-column: auto; }
  .tools .tool-reset { grid-column: 1; width: auto; }
  .tools .result-count { grid-column: 2; justify-self: end; }
  .inline-summary { gap: 12px; overflow-x: auto; font-size: 10px; }
  .inline-summary span { white-space: nowrap; }
  .inventory-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .inventory-count-label { grid-column: 1 / -1; justify-self: start; }
  .inventory-list-heading { display: none; }
  .inventory-row { grid-template-columns: minmax(0, 1fr) 75px; gap: 9px; min-height: 70px; padding: 10px 12px; }
  .inventory-row-menu { grid-column: 1 / -1; }
  .inventory-row-menu > summary { width: 100%; justify-content: center; }
  .inventory-row-menu > div { position: static; width: 100%; margin-top: 7px; box-shadow: none; }
  .document-card { padding: 13px; }
  .document-card footer, .document-details { margin-left: 0; }
  .document-card footer { display: grid; grid-template-columns: 1fr 1fr; }
  .document-card footer > :first-child { grid-column: 1 / -1; }
  .sat-cards { padding: 0; }
  .sat-mobile-card { padding: 13px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .sat-inline-form { align-items: stretch; flex-direction: column; }
  .sat-inline-form input, .sat-inline-form .button { width: 100%; }
  .directory-row { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 11px 12px; }
  .user-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .user-row > em { grid-column: 2; justify-self: start; }
  .user-row > button { grid-column: 3; grid-row: 1 / span 2; }
  .quote-customer-card { grid-template-columns: 1fr; }
  .quote-customer-card > div:first-child { margin-bottom: 9px; }
  .quote-finish-card { padding: 12px; }
  .quote-submit { display: grid; }
  .quote-submit .button { width: 100%; }
  .notification-bubble { right: 13px; bottom: calc(68px + env(safe-area-inset-bottom)); }
}