/* NOXIGY OS — layout de la aplicación: sidebar (estilo Control Center), cabecera y navegación móvil. */

.shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  padding: 18px 12px 14px; height: 100vh; position: sticky; top: 0; overflow-y: auto; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 18px; }
.brand img { width: 28px; height: 28px; }
.brand-name { font-family: var(--font-display); font-weight: 700; letter-spacing: .03em; font-size: 15px; line-height: 1.1; }
.brand-sub { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); letter-spacing: .14em; text-transform: uppercase; }

.search-box {
  display: flex; align-items: center; gap: 9px; background: transparent;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 0 2px 18px;
  color: var(--text-faint); cursor: pointer; font-size: 13px; transition: border-color var(--t-fast);
}
.search-box:hover { border-color: var(--text-faint); }
.search-box kbd { margin-left: auto; font: 500 10px var(--font-mono); color: var(--text-faint); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }

.nav-section { margin-bottom: 14px; }
.nav-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .16em; padding: 0 12px 7px; }
.navitem {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px;
  color: var(--text-dim); font-size: 13.5px; font-weight: 500; margin-bottom: 1px; position: relative;
  transition: color var(--t-fast), background var(--t-fast);
}
.navitem .navicon { width: 20px; height: 20px; display: grid; place-items: center; flex-shrink: 0; color: var(--text-faint); transition: color var(--t-fast); }
.navitem:hover .navicon { color: var(--text-dim); }
.navitem:hover { color: var(--text); background: rgba(255,255,255,.025); }
.navitem.active { background: var(--accent-dim); color: var(--accent); }
.navitem.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.navitem.active .navicon { color: var(--accent); }
.navitem .count { margin-left: auto; font: 700 10px var(--font-body); background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 2px 7px; }

.sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.me-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; cursor: pointer; border-radius: 10px; }
.me-name { font-size: 13.5px; font-weight: 700; font-family: var(--font-display); }
.me-role { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); letter-spacing: .12em; text-transform: uppercase; }
.sidebar-footer .btn-outline { width: 100%; margin-top: 6px; }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h); display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 0 34px; position: sticky; top: 0; z-index: 30;
  background: linear-gradient(var(--bg) 70%, rgba(9,9,11,0));
}
.topbar .mobile-only { display: none; }
.view { padding: 6px 34px 48px; flex: 1; min-width: 0; animation: viewIn var(--t-med) var(--ease); }
.view.full { display: flex; flex-direction: column; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { font-size: 30px; line-height: 1.1; }
.page-head p { color: var(--text-dim); font-size: 14px; margin-top: 6px; }
.page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; }

.demo-banner {
  font-size: 11.5px; color: var(--text-dim); background: var(--panel); border-bottom: 1px solid var(--border);
  padding: 7px 16px; text-align: center;
}
.demo-banner b { color: var(--accent); font-weight: 700; }
.demo-short { display: none; }

/* ---------- Barra inferior móvil ---------- */
.tabbar { display: none; }
.scrim { display: none; }

@media (max-width: 980px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%);
    transition: transform var(--t-med) var(--ease); box-shadow: var(--shadow-pop);
  }
  .shell.drawer-open .sidebar { transform: none; }
  .shell.drawer-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 35; }
  .topbar { padding: 0 16px; justify-content: space-between; padding-top: env(safe-area-inset-top, 0px); height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); }
  .topbar .mobile-only { display: flex; }
  .topbar .icon-btn.mobile-only { display: inline-grid; }
  .demo-banner { padding: 5px 12px; font-size: 11px; }
  .demo-more { display: none; } .demo-short { display: inline; }
  .view { padding: 4px 16px calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom, 0px)); }
  .page-head h1 { font-size: 24px; }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(12,12,14,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px;
    font-size: 10px; font-weight: 600; color: var(--text-faint); border-radius: 10px;
  }
  .tabbar a .navicon { display: grid; place-items: center; height: 22px; color: var(--text-faint); }
  .tabbar a .navicon svg { width: 21px; height: 21px; }
  .tabbar a { position: relative; }
  .tabbar a .count { position: absolute; top: 4px; left: calc(50% + 6px); font: 700 9.5px var(--font-body); background: var(--accent); color: var(--accent-ink); border-radius: 99px; padding: 1px 5px; }
  .tabbar a.active { color: var(--accent); }
  .tabbar a.active .navicon { color: var(--accent); }
}

/* =====================================================================
   Móvil: nada puede ser más ancho que la pantalla.
   - Los hijos de grid/flex pueden encogerse (min-width: 0) para que los textos largos se corten con «…» en vez de ensanchar.
   - Las cabeceras de sección y las barras de herramientas bajan de línea si no caben.
   ===================================================================== */
.cols-2 > *, .cols-2-eq > *, .stats > *, .section, .panel { min-width: 0; }
@media (max-width: 1100px) { .cols-2, .cols-2-eq { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 980px) {
  html, body { overflow-x: hidden; }
  .section-head { flex-wrap: wrap; row-gap: 8px; }
  .section-head > :first-child { min-width: 0; }
  .board-scroll { margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding-inline: 16px; }
}

@media (max-width: 640px) {
  .hide-sm { display: none !important; }
  /* Tablas → tarjetas: la primera celda es el título; el resto, filas «etiqueta · valor». */
  .table-wrap { overflow: visible; background: none; border: 0; border-radius: 0; }
  .tbl, .tbl tbody { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tr { display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
  .tbl td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 !important; border: 0 !important; font-size: 12.5px; text-align: right; min-width: 0; }
  .tbl td::before { content: attr(data-label); flex-shrink: 0; color: var(--text-faint); font: 500 9.5px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; text-align: left; }
  .tbl td[data-label=""]::before { content: none; }
  .tbl td[data-label=""] { justify-content: flex-end; }
  .tbl td:first-child { font-size: 14px; font-weight: 600; text-align: left; justify-content: flex-start; padding-bottom: 4px !important; border-bottom: 1px solid var(--border-soft) !important; }
  .tbl td:first-child::before { content: none; }
  /* Pipeline del Control: en varias filas */
  .view .pipeline { height: auto; flex-wrap: wrap; }
  .pipeline > div { flex: 1 1 28% !important; min-height: 58px; }
  /* Recordatorios: texto a lo ancho; fecha y botón debajo */
  .reminder-form { flex-wrap: wrap; }
  .reminder-form [name="text"] { flex: 1 1 100% !important; }
  .reminder-form [name="when"] { flex: 1; width: auto !important; }
}

/* Cifras de dos en dos en el móvil (como una app), con el número algo más pequeño para que quepa siempre. */
@media (max-width: 640px) {
  .view .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
  .view .stat { padding: 14px 14px 13px; }
  .view .stat .kicker { margin-bottom: 10px; font-size: 9px; }
  .view .stat .num { font-size: clamp(22px, 7vw, 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .view .stat .sub { font-size: 11px; }
}

/* Casillas y radios nunca se estiran (aunque un campo ponga los inputs al 100 %). */
input[type="checkbox"], input[type="radio"] { width: auto; flex: none; }
.team-row > span { min-width: 0; }
.line-nums > *, .lines-head > *, .bill-grid > *, .field-row > * { min-width: 0; }
.line-nums input { width: 100%; min-width: 0; }

@media (max-width: 640px) {
  /* Filas de 3 campos (día/desde/hasta, prioridad/inicio/entrega): el primero a lo ancho, los otros dos debajo. */
  .modal .field-row { flex-wrap: wrap; }
  .modal .field-row > .field { flex: 1 1 calc(50% - 6px); }
  .modal .field-row > .field:first-child:nth-last-child(3) { flex-basis: 100%; }
  /* Equipo del proyecto: nombre arriba, rol debajo a lo ancho. */
  .team-row { flex-wrap: wrap; }
  .team-row .role-in { width: auto; flex: 1 1 100%; margin-left: 24px; }
  /* Pestañas de las fichas: más compactas para que quepan. */
  .tabs button, .tabs a { letter-spacing: .06em; padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 640px) {
  /* Pestañas que no caben: se deslizan; el borde derecho se difumina para que se note que hay más. */
  .tabs { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 28px; }
}
.tabs { position: relative; }

/* PWA: aviso «Instala NOXIGY en tu móvil» (solo móvil, sin instalar; se puede cerrar para siempre). */
.install-hint { display: flex; align-items: center; gap: 12px; margin: 8px 16px 4px; padding: 10px 10px 10px 12px; border-radius: 16px; background: var(--panel); border: 1px solid rgba(201,243,29,.28); box-shadow: 0 8px 24px -14px rgba(201,243,29,.45); }
.install-hint img { border-radius: 10px; flex-shrink: 0; }
.install-hint > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.install-hint b { font: 700 13px var(--font-display); }
.install-hint span { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }
.install-hint span b { font: inherit; font-weight: 700; color: var(--text); }
.install-hint .x-btn { flex-shrink: 0; }
@media print { .install-hint { display: none; } }

/* ---------- Aire y ritmo (reglas comunes a TODAS las pantallas) ----------
   Los espacios no se ajustan pantalla a pantalla: estas reglas los garantizan en todo el sistema.
   · Entre bloques grandes, siempre 28-32 px (aunque el bloque anterior no sea una .section).
   · Cabeceras de sección con controles: el título no se aprieta contra ellos; los controles van con 10-12 px.
   · Grupos de botones, chips y filtros: nunca menos de 8-10 px entre elementos. */
:not(.section):not(.page-head):not(.tabs):not(.section-head):not(script):not(style) + .section,
.section + :not(.section):not(script):not(style):not(.modal-actions) { margin-top: 32px; }
/* En rejillas de columnas los bloques van lado a lado: ahí no se separan por arriba. */
:where(.cols-2, .cols-2-eq, .grid, .stats, .brief, .dgrid, .cproj-grid, .proj-mini-grid, .quick-acts, .money-row, .kanban, .row) > * { margin-top: 0 !important; }
.section-head:not(:first-child) { margin-top: 32px; }
.section-head { gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.section-head h2 { flex: 1 1 auto; min-width: 0; }
.head-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 12px; }
.head-tools .wk-nav { gap: 10px; }
.panel + .hint, .wk + .hint, .cal-panel + .hint, .table-wrap + .hint, .stack + .hint, .list + .hint { margin-top: 12px; }
.hint + .section-head, .hint + .section { margin-top: 32px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.page-head .actions, .toolbar { gap: 10px 12px; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.modal-actions { gap: 10px; }
@media (max-width: 760px) {
  .head-tools { width: 100%; justify-content: flex-start; }
  /* En móvil, los controles de una cabecera ocupan todo el ancho y quedan alineados entre sí. */
  .head-tools > select, .head-tools > .btn, .head-tools > .btn-outline, .head-tools > .wk-nav { flex: 1 1 100%; width: 100% !important; }
  .head-tools > .wk-nav { justify-content: space-between; }
  .head-tools > .btn, .head-tools > .btn-outline { justify-content: center; }
  :not(.section):not(.page-head):not(.tabs):not(.section-head):not(script):not(style) + .section,
  .section + :not(.section):not(script):not(style):not(.modal-actions), .section-head:not(:first-child) { margin-top: 26px; }
}