/* eComm360 · apps internas — bento minimal
   Bento de la web ecomm360.es (tiles r22, borde fino, sin sombra, un tile de color)
   + contención de Notion (superficies planas, texto pequeño, gris en vez de color).
   Fuente: Open Sans (como la web) · Iconos: Lucide 16 px, trazo 1.75, color --muted */

:root {
  /* Tinta */
  --navy: #141d3a;       /* títulos, botón primario, tile oscuro */
  --text: #2a3340;       /* cuerpo */
  --muted: #5a6677;      /* secundario, iconos */
  --subtle: #98a2b3;     /* metadatos, placeholders */

  /* Superficies */
  --bg: #ffffff;         /* página */
  --side: #f7f8fa;       /* sidebar (paper) */
  --hover: #f1f3f6;      /* hover de fila / item */
  --active: #e9edf2;     /* item seleccionado */
  --line: #e5e8ec;       /* separadores dentro de tiles */
  --tile-line: #dde5f0;  /* borde de tile */

  /* Rellenos de tile (máx. uno de color por vista) */
  --fill-paper: #f4f7fa;
  --fill-cyan: #dcf0f3;
  --fill-teal: #3aabc0;  /* tile destacado, texto navy encima */
  --cyan-700: #2a8aa0;   /* foco, "ahora" */

  /* Etiquetas (Notion): fondo tenue + texto oscuro */
  --tag-gray: #eef0f3;   --tag-gray-t: #4b5563;
  --tag-blue: #e3eefb;   --tag-blue-t: #1f4f8a;
  --tag-purple: #eee8f8; --tag-purple-t: #5b3f99;
  --tag-green: #e3f3ea;  --tag-green-t: #1f6b46;
  --tag-amber: #fbf0d9;  --tag-amber-t: #8a5a10;
  --tag-red: #fbe6e3;    --tag-red-t: #9a3a31;
  --tag-cyan: #dcf0f3;   --tag-cyan-t: #1d6677;

  /* Puntos de estado */
  --ok: #2e8b5f; --warn: #c98a1a; --bad: #b5483d; --idle: #98a2b3; --info: #2a8aa0;

  --r-tile: 22px; --r-card: 12px; --r-ctl: 8px; --r-tag: 4px;
  --gap: 12px;
  --side-w: 240px;
  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
svg.lucide { width: 16px; height: 16px; stroke-width: 1.75; color: var(--muted); flex: none; }
:focus-visible { outline: 2px solid var(--cyan-700); outline-offset: 2px; }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
.main { min-width: 0; padding: 0 40px 48px; }
.page { max-width: 1240px; margin: 0 auto; }

/* ---------- Sidebar (plana, tipo Notion) ---------- */
.sidebar { background: var(--side); padding: 14px 10px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.brand { display: flex; align-items: center; gap: 8px; padding: 6px 8px 14px; font-size: 15px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
.brand em { font-style: normal; color: var(--cyan-700); }
.brand .mark { width: 22px; height: 22px; border-radius: 6px; background: var(--navy); }
.nav-label { font-size: 12px; color: var(--subtle); padding: 14px 8px 4px; }
.nav-item { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px; border-radius: 6px; color: var(--text); cursor: pointer; }
.nav-item:hover { background: var(--hover); }
.nav-item.active { background: var(--active); color: var(--navy); font-weight: 600; }
.nav-item.active svg.lucide { color: var(--navy); }
.nav-item .count { margin-left: auto; font-size: 12px; color: var(--subtle); font-weight: 400; }
.side-foot { margin-top: auto; padding-top: 12px; }

/* ---------- Barra superior (sin caja) ---------- */
.topbar { display: flex; align-items: center; gap: 8px; height: 52px; }
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.crumbs b { color: var(--navy); font-weight: 500; }
.topbar .spacer { flex: 1; }

/* ---------- Encabezado ---------- */
.page-head { display: flex; align-items: flex-end; gap: 16px; padding: 36px 0 24px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; }
.eyebrow { font-size: 13px; color: var(--subtle); margin: 0 0 6px; }
h1.title { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 400; letter-spacing: -.04em; color: var(--navy); }
.lead { margin: 8px 0 0; font-size: 16px; color: var(--muted); max-width: 60ch; }
.count { color: var(--subtle); font-weight: 400; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); grid-auto-flow: dense; }
.tile { grid-column: span 4; background: var(--bg); border: 1px solid var(--tile-line); border-radius: var(--r-tile); padding: 22px 24px; min-width: 0; display: flex; flex-direction: column; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
.r2 { grid-row: span 2; }
.tile.paper { background: var(--fill-paper); border-color: transparent; }
.tile.cyan { background: var(--fill-cyan); border-color: transparent; }
.tile.teal { background: var(--fill-teal); border-color: transparent; color: var(--navy); }
.tile.teal svg.lucide { color: var(--navy); }
.tile.navy { background: var(--navy); border-color: transparent; color: #c9d3e6; }
.tile.navy .tile-title, .tile.navy .big, .tile.navy .t, .tile.navy .time { color: #fff; }
.tile.navy .sub { color: #8fa3c7; }
.tile.navy svg.lucide { color: #8fa3c7; }
.tile.flush { padding: 0; overflow: hidden; }

.tile-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; min-height: 28px; }
.tile-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-head .go { margin-left: auto; }
.tile-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 10px; }

/* Flecha redonda de la web: navega a la vista completa */
.go { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); flex: none; cursor: pointer; }
.go svg.lucide { color: #fff; width: 14px; height: 14px; }
.tile.navy .go { background: var(--fill-teal); }
.tile.navy .go svg.lucide { color: var(--navy); }

/* Cifras */
.big { font-size: 34px; line-height: 1; font-weight: 400; letter-spacing: -.03em; color: var(--navy); }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.metric { padding: 2px 20px; border-left: 1px solid var(--line); }
.metric:first-child { padding-left: 0; border-left: 0; }
.metric .k { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.delta { font-size: 12px; color: var(--ok); margin-left: 6px; letter-spacing: 0; }
.delta.down { color: var(--bad); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--tile-line); background: var(--bg); color: var(--navy); font-weight: 500; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary svg.lucide { color: #fff; }
.btn.primary:hover { background: #222d52; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--hover); color: var(--navy); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13px; }
.icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.icon-btn:hover { background: var(--hover); }
.link { color: var(--navy); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tile-line); }
.link:hover { text-decoration-color: var(--navy); }

/* ---------- Vistas y toolbar (Notion) ---------- */
.views { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); }
.view { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.view:hover { color: var(--navy); }
.view.on { color: var(--navy); border-color: var(--navy); font-weight: 500; }
.view.on svg.lucide { color: var(--navy); }
.views .tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.search { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 6px; color: var(--subtle); }
.search:hover, .search:focus-within { background: var(--hover); }
.search input { border: 0; outline: 0; background: transparent; width: 160px; color: var(--text); }
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-ctl); background: var(--hover); }
.seg button { border: 0; background: transparent; height: 26px; padding: 0 10px; border-radius: 6px; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--bg); color: var(--navy); font-weight: 500; box-shadow: 0 0 0 1px var(--line); }

/* ---------- Etiquetas y estados ---------- */
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: var(--r-tag); font-size: 13px; white-space: nowrap; background: var(--tag-gray); color: var(--tag-gray-t); }
.tag.blue { background: var(--tag-blue); color: var(--tag-blue-t); }
.tag.purple { background: var(--tag-purple); color: var(--tag-purple-t); }
.tag.green { background: var(--tag-green); color: var(--tag-green-t); }
.tag.amber { background: var(--tag-amber); color: var(--tag-amber-t); }
.tag.red { background: var(--tag-red); color: var(--tag-red-t); }
.tag.cyan { background: var(--tag-cyan); color: var(--tag-cyan-t); }
.status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--idle); }
.status.ok::before { background: var(--ok); } .status.warn::before { background: var(--warn); }
.status.bad::before { background: var(--bad); } .status.info::before { background: var(--info); }
.when { color: var(--muted); white-space: nowrap; }
.when.today { color: var(--navy); font-weight: 600; }
.when.late { color: var(--bad); }

/* ---------- Personas ---------- */
.avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--active); color: var(--navy); font-size: 10px; font-weight: 600; flex: none; }
.avatar.md { width: 28px; height: 28px; font-size: 11px; }
.person { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* ---------- Filas (dentro de tiles) ---------- */
.rows { display: flex; flex-direction: column; margin: 0 -10px; }
.row { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 10px; cursor: pointer; }
.row:hover { background: var(--hover); }
.row + .row { border-top: 1px solid var(--line); }
.row .time { width: 48px; color: var(--navy); font-weight: 600; flex: none; }
.row .main-t { flex: 1; min-width: 0; }
.row .t { color: var(--navy); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .sub { color: var(--subtle); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .end { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.row.now .time::after { content: "ahora"; display: block; font-size: 11px; font-weight: 500; color: var(--cyan-700); }
.tile.navy .row:hover { background: rgba(255,255,255,.06); }
.tile.navy .row + .row { border-top-color: rgba(255,255,255,.1); }
.check { appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--subtle); border-radius: 4px; margin: 0; flex: none; cursor: pointer; display: grid; place-items: center; }
.check:checked { background: var(--navy); border-color: var(--navy); }
.check:checked::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }

/* ---------- Tabla (base de datos tipo Notion, sin caja) ---------- */
.db { width: 100%; border-collapse: collapse; }
.db th { text-align: left; font-weight: 500; font-size: 13px; color: var(--muted); height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.db th svg.lucide { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--subtle); }
.db td { height: 42px; padding: 0 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.db th + th, .db td + td { border-left: 1px solid var(--line); }
.db tbody tr:hover { background: var(--hover); }
.db tr.selected { background: #eef6f8; }
.db .name { color: var(--navy); font-weight: 500; }
.db .num { text-align: right; }
.db-foot { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; color: var(--subtle); font-size: 13px; }
.db-foot .pager { margin-left: auto; display: flex; gap: 2px; }

/* ---------- Tablero ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 16px; overflow-x: auto; padding: 16px 0; }
.col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.col-head { display: flex; align-items: center; gap: 8px; height: 30px; }
.col-head .count { font-size: 13px; }
.col-head .icon-btn { margin-left: auto; }
.card { background: var(--bg); border: 1px solid var(--tile-line); border-radius: var(--r-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.card:hover { background: var(--fill-paper); }
.card.focus { border-color: var(--navy); }
.card .t { color: var(--navy); font-weight: 500; }
.card .sub { color: var(--muted); font-size: 13px; }
.card .amount { color: var(--navy); font-size: 18px; letter-spacing: -.02em; margin: 4px 0; }
.card .meta { display: flex; align-items: center; gap: 8px; color: var(--subtle); font-size: 12.5px; margin-top: 4px; }
.card .meta .next { margin-left: auto; color: var(--muted); }
.add { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: var(--r-ctl); color: var(--subtle); cursor: pointer; border: 0; background: transparent; }
.add:hover { background: var(--hover); color: var(--navy); }

/* ---------- Propiedades (ficha) ---------- */
.props { display: grid; grid-template-columns: 140px 1fr; row-gap: 2px; margin: 0; }
.props dt { display: flex; align-items: center; gap: 8px; height: 32px; color: var(--muted); }
.props dd { margin: 0; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: 6px; color: var(--navy); }
.props dd:hover { background: var(--hover); }

/* ---------- IA: sin brillos, solo etiquetado ---------- */
.ai-label { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.ai-label::before { content: "IA"; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--tag-cyan-t); background: var(--tag-cyan); border-radius: 3px; padding: 1px 4px; }
.tile.cyan .ai-label::before { background: var(--bg); }

/* ---------- Varios ---------- */
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.empty { color: var(--subtle); padding: 24px 0; text-align: center; }
.demo-note { margin-top: 24px; color: var(--subtle); font-size: 12px; }

/* ---------- Responsive (al final para ganar en cascada) ---------- */
@media (max-width: 1100px) {
  .s3, .s4, .s5 { grid-column: span 6; }
  .s6, .s7, .s8 { grid-column: span 12; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 0 16px 32px; }
  .tile, .s3, .s4, .s5, .s6, .s7, .s8 { grid-column: span 12; }
  h1.title { font-size: 30px; }
  .metric { padding: 12px 0; border-left: 0; }
  .metrics { grid-template-columns: 1fr 1fr; }
}