/* Resumen, servicios activos, mantenimiento, búsqueda global y menú lateral fijo.
   Uses the TDOS palette already defined in momenta.css (--brand, --td-accent, --td-cyan…). */

/* ---------- side menu: fixed on wide screens, full-screen ☰ menu on tablet and phone ---------- */
@media (min-width: 1200px) {
  body:not(.signed-out) .sidebar:not(.open) {
    display: flex !important; position: fixed; inset: 0 auto 0 0; z-index: 20; width: 232px; flex-direction: column;
    padding: 18px 12px 14px; overflow-y: auto; background: var(--paper, #fff); border-right: 1px solid var(--line);
  }
  body:not(.signed-out) .sidebar:not(.open) .brand { position: static; padding: 4px 10px 18px; }
  body:not(.signed-out) .sidebar:not(.open) .brand .logo { width: 132px; height: auto; }
  body:not(.signed-out) .sidebar:not(.open) .brand .logo-on-dark { display: none; }
  body:not(.signed-out) .sidebar:not(.open) .panel-close,
  body:not(.signed-out) .sidebar:not(.open) .workspace { display: none; }
  body:not(.signed-out) .sidebar:not(.open) .nav-label { margin: 16px 10px 6px; font-size: 10px; letter-spacing: .14em; color: var(--muted); }
  /* momenta.css styles the full-screen menu with !important: undo it only for the fixed menu */
  body:not(.signed-out) .sidebar:not(.open) .nav-item {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; height: 38px; padding: 0 10px !important; margin: 1px 0; border-radius: 8px;
    color: var(--ink) !important; font-size: 13.5px !important; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-decoration: none !important;
  }
  body:not(.signed-out) .sidebar:not(.open) .nav-item[hidden] { display: none; }
  body:not(.signed-out) .sidebar:not(.open) .nav-item .icon { display: inline-flex !important; width: 18px; }
  body:not(.signed-out) .sidebar:not(.open) .nav-label[hidden] { display: none; }
  body:not(.signed-out) .sidebar:not(.open) .nav-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  body:not(.signed-out) .sidebar:not(.open) .nav-item:hover { background: var(--canvas) !important; color: var(--td-accent) !important; }
  body:not(.signed-out) .sidebar:not(.open) .nav-item.active { background: #e8efff !important; color: var(--td-accent, #1d4ed8) !important; }
  body:not(.signed-out) .sidebar:not(.open) .sidebar-bottom { margin-top: auto; }
  body:not(.signed-out) .main { margin-left: 232px !important; }
  body:not(.signed-out) .topbar .bar-brand,
  body:not(.signed-out) .topbar .bar-links,
  body:not(.signed-out) .topbar .menu-button { display: none !important; }
}

/* ---------- global search ---------- */
.global-search { position: relative; flex: 1; max-width: 460px; margin: 0 16px; display: flex; align-items: center; }
.global-search > svg { position: absolute; left: 12px; width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.global-search input {
  width: 100%; height: 40px; padding: 0 14px 0 38px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper, #fff); color: var(--ink); font: inherit; font-size: 14px;
}
.global-search input:focus { outline: none; border-color: var(--td-accent); box-shadow: 0 0 0 3px #1d4ed81f; }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; max-height: 60vh; overflow-y: auto;
  background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px #0f172a24; padding: 6px;
}
.search-item { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; font: inherit; }
.search-item .status { grid-row: span 2; align-self: center; }
.search-item small { color: var(--muted); }
.search-item:hover, .search-item:focus { background: var(--canvas); outline: none; }
.search-empty { margin: 0; padding: 12px; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) {
  .global-search { order: 3; flex-basis: 100%; max-width: none; margin: 8px 0 0; }
  .topbar { flex-wrap: wrap; height: auto !important; padding-bottom: 10px !important; }
}

/* ---------- demo mode ---------- */
.demo-banner { margin: 0; padding: 8px 16px; background: #fff4d6; color: #7a5200; border-bottom: 1px solid #f1d58f; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-align: center; }

/* ---------- indicators ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 4px 0 22px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--paper, #fff); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .15s; }
.kpi:hover { border-color: var(--td-accent); }
.kpi-label { font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 1.3; }
.kpi-num { font-size: 28px; line-height: 1.1; font-weight: 800; }
.kpi small { font-size: 12px; color: var(--muted); }
.kpi.warn { border-left: 4px solid #d97706; }
.kpi.danger { border-left: 4px solid #dc2626; }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-num { font-size: 24px; } }

/* ---------- blocks and layout ---------- */
.dash-block { background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 18px; margin-bottom: 18px; min-width: 0; }
.block-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.block-head h2 { margin: 0; font-size: 16px; font-weight: 800; }
.block-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.block-date { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
/* today's actions in two columns on wide screens */
@media (min-width: 1100px) { .next-actions { columns: 2; column-gap: 28px; } .next-actions li { break-inside: avoid; } }
.sub-title { margin: 16px 0 8px; font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.table-wrap.flat { box-shadow: none; border-radius: 10px; }
.table-wrap td small, .next-actions small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.table-wrap .strong { font-weight: 700; }
.date-kind { font-size: 11px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 2px !important; }
td.overdue, .overdue { color: #b42318 !important; }
tr.row-late td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.row-actions.wrap { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.state-select { height: 34px; max-width: 190px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper, #fff); color: var(--ink); font: inherit; font-size: 13px; }
.muted-caption { color: var(--muted); }

/* ---------- next actions ---------- */
.next-actions { list-style: none; margin: 0; padding: 0; }
.next-actions li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.next-actions li:last-child { border-bottom: 0; }
.next-actions a { color: var(--ink); text-decoration: none; min-width: 0; }
.next-actions a strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.next-actions li.late { box-shadow: inset 3px 0 0 #dc2626; padding-left: 8px; }

/* ---------- active services by client ---------- */

/* ---------- state colours (always with their label) ---------- */
.status.en-preparación, .status.revisión-interna, .status.tarea { background: #eef2f7; color: #475467; }
.status.listo-para-enviar, .status.entrega { background: #e8efff; color: #1d4ed8; }
.status.enviado, .status.enviado-al-cliente, .status.propuesta-enviada, .status.seguimiento, .status.seguimiento-comercial { background: #fff4e5; color: #b45309; }
.status.aprobado, .status.web { background: #e7f6ec; color: #15803d; }
.status.crm { background: #ecf3ff; color: #1e40af; }
.status.mantenimiento { background: #f3ecff; color: #6d28d9; }
.status.incidencia, .status.urgente { background: #fdecec; color: #b42318; }
.status.alta { background: #fff1e6; color: #c2410c; }
.status.normal, .status.baja { background: #f2f4f7; color: #475467; }
.status.cliente, .status.proyecto, .status.prospecto { background: #eef2f7; color: #344054; }
:root[data-theme=dark] .kpi, :root[data-theme=dark] .dash-block, :root[data-theme=dark] .search-results { background: var(--panel); }
:root[data-theme=dark] body:not(.signed-out) .sidebar:not(.open) .nav-item.active { background: #1e2a4a; color: #9db8ff; }

/* ---------- tables become cards on the phone ---------- */
@media (max-width: 760px) {
  table.stack { min-width: 0 !important; }
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  table.stack td { display: grid; grid-template-columns: 112px 1fr; gap: 8px; padding: 4px 0 !important; border: 0 !important; text-align: left; }
  table.stack td::before { content: attr(data-label); font-size: 12px; font-weight: 700; color: var(--muted); }
  /* Everything in a cell stays in the value column, one line under another, next to its label. */
  table.stack td > * { grid-column: 2; }
  table.stack td { row-gap: 2px; }
  table.stack td[colspan] { display: block; }
  table.stack td[colspan]::before { content: none; }
  table.stack .row-actions.wrap { justify-content: flex-start; }
  .state-select { max-width: none; width: 100%; }
  /* Filters wrap instead of pushing the page sideways. */
  .toolbar { flex-wrap: wrap; }
  .toolbar .search { min-width: 0; flex: 1 1 100%; margin-left: 0; }
}

/* the menu logo: light version on the navy full-screen menu, dark one on the white fixed menu */
.sidebar .logo-on-light { display: none; }
@media (min-width: 1200px) { body:not(.signed-out) .sidebar:not(.open) .logo-on-light { display: block; } }

/* ---------- project status: one list (Publicado is live, like a published website) ---------- */
.status.publicado { background: #ecfdf5; color: #047857; }
.status.publicado::before { background: #10b981; }
/* Project and task header: facts on the left, actions on the right, on one line when it fits. */
.work-summary { justify-content: space-between; }
.work-facts, .work-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- private demos ---------- */
.status.borrador, .status.archivada { background: #f1f5f9; color: #475569; }
.status.desactivada, .status.con-error, .status.caducada { background: #fef2f2; color: #b42318; }
.status.desactivada::before, .status.con-error::before, .status.caducada::before { background: #d92d20; }
.status.comprobada { background: #ecfdf5; color: #047857; }
.status.comprobada::before { background: #10b981; }
.status.sin-comprobar { background: #fff7e6; color: #b45309; }
.status.sin-comprobar::before { background: #f59e0b; }
.demo-dialog .demo-section { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.demo-dialog .demo-section h3 { font-size: 14px; margin: 0 0 6px; }
.demo-dialog .demo-section .modal-actions + h3 { margin-top: 18px; }
.demo-dialog .demo-section p { margin: 0 0 10px; font-size: 13.5px; }
.demo-dialog .modal-actions.start { justify-content: flex-start; flex-wrap: wrap; margin-top: 8px; }
.demo-dialog .demo-link code, .demo-secret code { display: inline-block; font: 600 13px ui-monospace, Menlo, monospace; background: #eef6fe; color: #0f2474; border-radius: 8px; padding: 6px 10px; word-break: break-all; }
.demo-secret { margin: 14px 0; }
.demo-secret code { font-size: 22px; letter-spacing: .08em; padding: 12px 16px; }
.demo-dialog [data-ref][hidden] { display: none; }