/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --color-primary: #2563eb;
  --color-danger:  #dc2626;
  --color-text:    #111827;
  --color-muted:   #6b7280;
  --color-border:  #e5e7eb;
  --color-bg:      #f9fafb;
  --radius:        6px;
  --space:         1rem;
}

/* ── Reset base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100dvh;
}

/* ── Nav ────────────────────────────────────────────────────────────────── */
#main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  padding: .5rem var(--space);
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

#nav-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem .35rem 0;
  margin-right: .35rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--color-text);
  user-select: none;
}

.brand-sq {
  width: 26px;
  height: 26px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.brand-name { display: none; }
@media (min-width: 480px) { .brand-name { display: inline; } }

#main-nav a,
#main-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: .7rem;
  color: var(--color-muted);
  text-decoration: none;
  padding: .35rem .5rem;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s;
}

#main-nav a i, #main-nav button i { font-size: 1.1rem; }

#main-nav a:hover,
#main-nav button:hover,
#main-nav a.active {
  color: var(--color-primary);
  background: #eff6ff;
}

#main-nav button#btn-logout {
  margin-left: auto;
  color: var(--color-danger);
}
#main-nav button#btn-logout:hover { background: #fef2f2; }

@media (min-width: 768px) {
  #main-nav a, #main-nav button { flex-direction: row; font-size: .875rem; gap: .35rem; }
  #main-nav a i, #main-nav button i { font-size: 1rem; }
}

/* ── Main ───────────────────────────────────────────────────────────────── */
main {
  padding: var(--space);
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Banners ────────────────────────────────────────────────────────────── */
#banner-offline,
#banner-pwa {
  text-align: center;
  padding: .6rem var(--space);
  font-size: .875rem;
}

#banner-offline {
  background: #fef3c7;
  color: #92400e;
  border-bottom: 1px solid #fde68a;
}

#banner-pwa {
  background: #eff6ff;
  color: #1e40af;
  border-bottom: 1px solid #bfdbfe;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}

/* ── Cards dashboard ────────────────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space);
  margin-bottom: calc(var(--space) * 1.25);
}

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

.card-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: .1rem;
}
.card-icon-wrap.blue   { background: #eff6ff; color: #2563eb; }
.card-icon-wrap.amber  { background: #fffbeb; color: #d97706; }
.card-icon-wrap.green  { background: #f0fdf4; color: #16a34a; }
.card-icon-wrap.violet { background: #f5f3ff; color: #7c3aed; }

.card .card-value {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.card .card-label {
  font-size: .78rem;
  color: var(--color-muted);
}

/* ── Chart card ─────────────────────────────────────────────────────────── */
.chart-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space) calc(var(--space) * 1.1);
  margin-bottom: var(--space);
}

.chart-title {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* ── Dashboard bottom grid ──────────────────────────────────────────────── */
.dashboard-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space);
}

@media (min-width: 768px) {
  .dashboard-bottom { grid-template-columns: 1fr 1fr; }
  .dashboard-bottom .chart-card { margin-bottom: 0; }
}

/* ── Badge KG en tabla ──────────────────────────────────────────────────── */
.badge-kg {
  display: inline-block;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: .75rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 99px;
}

/* ── SROI breakdown ─────────────────────────────────────────────────────── */
.sroi-breakdown {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.sroi-row-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: .3rem;
  font-size: .82rem;
}

.sroi-label { color: var(--color-muted); }
.sroi-val   { font-weight: 600; color: var(--color-text); }

.sroi-bar-bg {
  height: 6px;
  background: var(--color-bg);
  border-radius: 3px;
  overflow: hidden;
}

.sroi-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  background: #fff;
}

thead { background: var(--color-bg); }

th, td {
  padding: .6rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

th { font-weight: 600; color: var(--color-muted); font-size: .75rem; text-transform: uppercase; }

tbody tr:hover { background: #f8faff; }

/* ── Formularios ────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .35rem; }

label { font-size: .875rem; font-weight: 500; }

input, select, textarea {
  padding: .5rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  width: 100%;
  background: #fff;
  color: var(--color-text);
  transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px #dbeafe;
}

textarea { resize: vertical; min-height: 80px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space);
}

@media (min-width: 768px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Botones ────────────────────────────────────────────────────────────── */
button, .btn-primary, .btn-danger, .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }

.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-ghost:hover { background: var(--color-bg); }

/* ── Estados ────────────────────────────────────────────────────────────── */
.activo   { color: #059669; font-weight: 600; }
.inactivo { color: var(--color-muted); }

/* ── Modal (dialog nativo) ──────────────────────────────────────────────── */
dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: calc(var(--radius) * 1.5);
  padding: 1.5rem;
  max-width: 560px;
  width: calc(100% - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}

dialog::backdrop {
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(2px);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space);
}

.modal-header h2 { font-size: 1.1rem; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.25rem;
}

/* ── Login ──────────────────────────────────────────────────────────────── */
.login-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space);
  gap: 1.5rem;
}

.login-box {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 2);
  padding: 2rem;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.login-box h1 { font-size: 1.5rem; text-align: center; color: var(--color-primary); }

.login-box .error-msg {
  color: var(--color-danger);
  font-size: .875rem;
  text-align: center;
  min-height: 1.25rem;
}

.login-box .btn-primary { width: 100%; justify-content: center; padding: .65rem; }

/* ── Toolbar de sección ─────────────────────────────────────────────────── */
.section-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--space);
}

.section-toolbar h2 { font-size: 1.1rem; flex: 1; }

/* ── Filtros ────────────────────────────────────────────────────────────── */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--space);
}

.filtros select, .filtros input { width: auto; flex: 1; min-width: 120px; }

/* ── Banner demo ────────────────────────────────────────────────────────── */
#banner-demo {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem var(--space);
  background: #fef3c7;
  color: #92400e;
  border-bottom: 1px solid #fde68a;
  font-size: .85rem;
}
#banner-demo span { flex: 1; }
#banner-demo .btn-cerrar-demo {
  background: transparent;
  border: none;
  color: #92400e;
  cursor: pointer;
  font-size: .85rem;
  padding: .15rem .4rem;
  border-radius: 4px;
  line-height: 1;
}
#banner-demo .btn-cerrar-demo:hover { background: #fde68a; }

/* ── Alcance ────────────────────────────────────────────────────────────── */
.alcance-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .6rem;
}

.modulo-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .7rem .9rem;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.modulo-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
}
.modulo-icon.blue   { background: #eff6ff; color: #2563eb; }
.modulo-icon.amber  { background: #fffbeb; color: #d97706; }
.modulo-icon.green  { background: #f0fdf4; color: #16a34a; }
.modulo-icon.violet { background: #f5f3ff; color: #7c3aed; }

.modulo-title { font-weight: 500; font-size: .875rem; color: var(--color-text); }
.modulo-desc  { font-size: .75rem; color: var(--color-muted); margin-top: .1rem; line-height: 1.3; }

.fuera-lista, .timeline-lista {
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  font-size: .875rem;
  color: var(--color-text);
}
.fuera-lista li::marker  { color: var(--color-danger); }
.timeline-lista          { list-style: decimal; }
.timeline-lista li       { line-height: 1.3; }

/* ── Fase 3: Touch targets (mobile 44px) ────────────────────────────────── */
@media (max-width: 767px) {
  #main-nav a,
  #main-nav button { min-height: 44px; }
  .btn-primary, .btn-danger, .btn-ghost { min-height: 44px; }
  .editable-cell { min-height: 44px; vertical-align: middle; }
}

/* ── Fase 3: Focus visible accesible ───────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px #dbeafe;
}

/* ── Fase 3: Modal bottom-sheet en mobile ──────────────────────────────── */
@media (max-width: 600px) {
  dialog {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    max-height: 90dvh;
    border-radius: calc(var(--radius) * 2) calc(var(--radius) * 2) 0 0;
  }
}

/* ── Fase 3: Tab buttons (catálogos) ───────────────────────────────────── */
.tab-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ── Fase 3: Spinner de carga ──────────────────────────────────────────── */
.spinner-wrap {
  display: flex;
  justify-content: center;
  padding: 2.5rem 1rem;
}
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Fase 3: Toasts ────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 1.25rem;
  right: 1rem;
  left: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  pointer-events: none;
}
.toast {
  padding: .65rem 1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  max-width: 360px;
  width: 100%;
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .2s, transform .2s;
  pointer-events: auto;
}
.toast-visible  { opacity: 1; transform: none; }
.toast-ok       { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.toast-error    { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
.toast-info     { background: #dbeafe; color: #1e3a8a; border: 1px solid #bfdbfe; }

/* ── Fase 3: Empty state ───────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-muted);
  font-size: .9rem;
}

/* ── Nav: estructura con drawer ────────────────────────────────────────── */
#nav-hamburger { display: none; }
#nav-close     { display: none; }
#nav-overlay   { display: none; }

#nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  flex: 1;
}
.nav-sep { flex: 1; }

/* ── Nav mobile: hamburger + drawer ────────────────────────────────────── */
@media (max-width: 767px) {
  #main-nav {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  #nav-hamburger {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: unset !important;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text);
    font-size: 1.3rem;
    border-radius: var(--radius);
    flex-shrink: 0;
    padding: 0;
  }

  #nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 199;
  }
  body.nav-open #nav-overlay { display: block; }

  #nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 85vw);
    background: #fff;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 0;
    z-index: 200;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
    box-shadow: -4px 0 24px rgba(0,0,0,.12);
  }
  body.nav-open #nav-links { transform: translateX(0); }

  #nav-close {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-end;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 1.1rem;
    cursor: pointer;
    border-left: none;
    border-right: none;
    border-top: none;
    background: transparent;
    min-height: 52px !important;
    width: 100%;
  }

  #nav-links a,
  #nav-links button:not(#nav-close) {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: .75rem !important;
    font-size: .95rem !important;
    padding: .85rem 1.25rem !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
    min-height: 52px;
    width: 100%;
  }
  #nav-links a i, #nav-links button:not(#nav-close) i { font-size: 1.1rem; }
  #nav-links a:hover,
  #nav-links button:not(#nav-close):hover { background: var(--color-bg) !important; }
  #nav-links a.active { background: #eff6ff !important; color: var(--color-primary) !important; }

  .nav-sep { display: none; }

  /* Toasts encima del FAB en mobile */
  #toast-container { bottom: 5.5rem; }
}

/* ── FAB (Floating Action Button) ─────────────────────────────────────── */
#fab-wrap {
  position: fixed;
  bottom: 1.5rem;
  right: 1.25rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
}
@media (min-width: 768px) { #fab-wrap { display: none !important; } }

#fab-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,99,235,.4);
  transition: transform .2s, background .2s;
  flex-shrink: 0;
}
#fab-btn:hover { transform: scale(1.07); }
#fab-btn.open  { background: #1d4ed8; transform: rotate(45deg); }

#fab-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}
.fab-action {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.15rem;
  border-radius: 24px;
  border: none;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  white-space: nowrap;
  transition: transform .15s;
  animation: fab-pop .18s ease;
}
.fab-action:hover    { transform: scale(1.04); }
.fab-retiro          { background: #2563eb; color: #fff; }
.fab-entrega         { background: #16a34a; color: #fff; }

@keyframes fab-pop {
  from { opacity: 0; transform: translateY(8px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
.empty-state i { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .5; }