/* ============================================================
   Cultivamente — Tema NexusERP (compartido por todos los módulos)
   Barra de navegación superior oscura + contenido claro,
   acento violeta, tarjetas KPI con ícono lavanda.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#5d3fd3; --primary-d:#4c32b0; --primary-soft:#ecebfe;
  --nav-bg:#0f172a; --nav-text:#c7cfdd; --nav-muted:#7c879b;
  --bg:#f7f8fa; --card:#ffffff; --line:#e6e8ee; --line-2:#dcdfe6;
  --ink:#0f172a; --text:#334155; --muted:#64748b; --label:#8a93a3;
  --ok:#16a34a; --ok-bg:#dcfce7; --danger:#dc2626; --danger-bg:#fdecec;
  --warn:#ea580c; --warn-bg:#ffedd5; --info:#2563eb; --info-bg:#dbeafe;
  --radius:16px; --radius-sm:10px; --radius-xs:8px;
  --nav-h:60px;
  --font:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
h1,h2,h3{color:var(--ink);margin:0}

/* ---------- Layout shell (nav arriba, contenido abajo) ---------- */
.shell{display:flex;flex-direction:column;min-height:100vh;background:var(--bg)}
.topnav{background:var(--nav-bg);color:#fff;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:9px 22px;min-height:var(--nav-h);position:sticky;top:0;z-index:30}
.tn-brand{display:flex;align-items:center;gap:11px;margin-right:6px;white-space:nowrap}
.tn-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#7c5cff,#5d3fd3);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.tn-wm{font-size:15px;font-weight:700;color:#fff;line-height:1.1;letter-spacing:-.2px}
.tn-wm span{display:block;font-size:9.5px;font-weight:500;color:var(--nav-muted);letter-spacing:.08em;text-transform:uppercase}
.tn-logo{height:28px;width:auto;display:block}
.tn-links{display:flex;align-items:center;gap:3px 4px;flex:1;flex-wrap:wrap;row-gap:6px}
.tn-item{display:flex;align-items:center;gap:8px;padding:8px 15px;border-radius:10px;color:var(--nav-text);
  font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;transition:.12s}
.tn-item svg{width:17px;height:17px;stroke-width:2;flex-shrink:0}
.tn-item:hover{background:rgba(255,255,255,.08);color:#fff}
.tn-item.active{background:var(--primary);color:#fff;font-weight:600}
.tn-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.tn-out{color:var(--nav-muted);cursor:pointer;display:flex}
.tn-out:hover{color:#fff}
.tn-av{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex-shrink:0}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
/* sub-encabezado claro de cada módulo */
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:14px 26px;
  display:flex;align-items:center;gap:16px;position:sticky;top:var(--nav-h);z-index:20}
.topbar .tb-title{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.3px}
.topbar .search{margin-left:8px;flex:1;max-width:380px;display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--muted);font-size:13px}
.topbar .search input{border:0;background:transparent;outline:0;width:100%;font-family:inherit;font-size:13px;color:var(--text)}
.topbar .tb-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.topbar .bell{color:var(--muted);cursor:pointer}
.topbar .who{text-align:right;line-height:1.2}
.topbar .who b{display:block;font-size:13px;color:var(--ink);font-weight:600}
.topbar .who span{font-size:11px;color:var(--muted)}
.topbar .av{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.content{padding:24px 26px;flex:1}

/* ---------- Cards & components ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,23,41,.04)}
.card-pad{padding:20px}
.grid{display:grid;gap:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;
  box-shadow:0 1px 3px rgba(16,23,41,.04)}
.kpi .k-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.kpi .k-ico{width:44px;height:44px;border-radius:12px;background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center}
.kpi .k-val{font-size:29px;font-weight:800;color:var(--ink);letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.kpi .k-label{font-size:13px;color:var(--muted);font-weight:500;margin-top:6px}
.k-trend{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;color:var(--ok)}
.k-trend.down{color:var(--danger)}

/* pastel icon tiles */
.tile,.m-ico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--primary-soft);color:var(--primary)}
.t-blue{background:#dbeafe;color:#2563eb} .t-green{background:#dcfce7;color:#16a34a}
.t-amber{background:#ffedd5;color:#ea580c} .t-purple{background:#ecebfe;color:#5d3fd3}

/* module launcher card (panel de inicio) */
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.mod{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;
  display:block;color:inherit;box-shadow:0 1px 3px rgba(16,23,41,.04);transition:.15s}
.mod:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(16,23,41,.10);border-color:var(--line-2)}
.mod .m-ico{margin-bottom:14px}
.mod h3{font-size:16px;font-weight:700;margin-bottom:5px}
.mod p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.mod .m-go{margin-top:14px;font-size:13px;font-weight:600;color:var(--primary)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--primary);color:#fff;border:0;
  padding:10px 17px;border-radius:10px;font-weight:600;font-size:13.5px;cursor:pointer;font-family:inherit;transition:.12s}
.btn:hover{background:var(--primary-d)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line-2)}
.btn.ghost:hover{background:var(--bg)}
.btn.danger{background:var(--danger)} .btn.danger:hover{filter:brightness(.93)}

/* badges */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;font-size:11.5px;font-weight:600}
.b-green{background:var(--ok-bg);color:var(--ok)} .b-amber{background:var(--warn-bg);color:var(--warn)}
.b-red{background:var(--danger-bg);color:var(--danger)} .b-blue{background:var(--info-bg);color:var(--info)}
.b-purple{background:var(--primary-soft);color:var(--primary)} .b-gray{background:#eef1f5;color:#59616e}

/* inputs */
.field{display:block;width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;
  font-size:14px;font-family:inherit;background:var(--card);color:var(--ink)}
.field:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.03em;padding:11px 14px;border-bottom:1px solid var(--line);background:#fafbfc}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--text);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:#fafbfc}

.muted{color:var(--muted)} .tabnum{font-variant-numeric:tabular-nums}

@media print{ .topnav{display:none!important} }

/* ---------- Responsive: tablet ---------- */
@media(max-width:820px){
  .tn-wm span{display:none}
  .tn-item span{display:none}
  .tn-item{padding:8px 11px}
  .content{padding:18px 16px}
  .topbar{padding:12px 16px;position:static}   /* no fijo en móvil: evita que la barra tape el título */
  .topbar .tb-title{font-size:17px}
  .topnav{position:static}                      /* la barra de módulos scrollea con la página */
  .mods{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}

/* ---------- Responsive: celular ---------- */
@media(max-width:640px){
  :root{--nav-h:54px}
  .topnav{gap:10px;padding:8px 12px}
  .tn-logo{height:24px}
  .tn-brand{margin-right:0}
  /* barra de módulos: fila propia, scroll horizontal */
  .tn-links{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:4px;padding-bottom:2px}
  .tn-links::-webkit-scrollbar{display:none}
  .tn-item{padding:7px 10px;flex-shrink:0}
  .tn-item svg{width:20px;height:20px}
  .tn-right{gap:10px}

  /* sub-encabezado: se acomoda, buscador a lo ancho, se oculta el nombre */
  .topbar{flex-wrap:wrap;gap:10px;padding:10px 14px}
  .topbar .tb-title{font-size:16px}
  .topbar .search{order:3;flex:1 1 100%;max-width:none;margin-left:0}
  .topbar .who{display:none}

  .content{padding:14px 12px}
  .kpi{padding:16px}
  .kpi .k-val{font-size:24px}
  .kpi .k-top{margin-bottom:10px}
  .mods{grid-template-columns:1fr}

  /* tablas: scroll horizontal en vez de romper el layout */
  .tablecard{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  .tablecard table{width:auto !important;min-width:100% !important}
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
}