/* MIC Client Services CRM — interface styles.

   An operational tool, not a marketing page: white surfaces, slate text, dark
   navy chrome, and MIC blue as the single working accent. Green and pink are
   MIC brand colours too, but they appear only where they carry meaning —
   green for delivered, pink for the one destructive action — so that colour on
   this screen always means something. */

:root {
  --mic-blue: #1c8fff;
  --mic-blue-dark: #0f6fd1;
  --mic-blue-soft: #eaf4ff;
  --mic-green: #17a34a;
  --mic-green-soft: #e8f7ee;
  --mic-pink: #fe007a;

  --navy: #0f172a;
  --navy-2: #16213a;

  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #7c8899;
  --line: #e4e8ee;
  --line-2: #d4dae2;

  --warn: #a15c00;
  --warn-bg: #fdf4e3;
  --info: #12609e;
  --info-bg: #e8f2fb;
  --good: #12703a;
  --good-bg: #e8f7ee;
  --bad: #b4123c;
  --bad-bg: #fdeef2;
  --muted-bg: #eef1f5;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.14);
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mic-blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; letter-spacing: -0.015em; }

/* ---------- shell ---------- */

.shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--navy);
  color: #c3cfe0;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand { padding: 2px 10px 18px; }
.brand strong { display: block; color: #fff; font-size: 14px; }
.brand span { display: block; font-size: 10px; color: #7b8ca6; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 4px; }

.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: #c3cfe0; font-size: 13px; cursor: pointer; border: 0; background: none;
  width: 100%; text-align: left; font-family: inherit;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--mic-blue); color: #fff; font-weight: 600; }
.nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: #64758d; padding: 16px 10px 5px; }
.nav-badge { background: rgba(255, 255, 255, 0.16); border-radius: 20px; padding: 0 7px; font-size: 11px; font-weight: 600; }
.nav-badge.danger { background: var(--mic-pink); color: #fff; }
.nav-badge.warn { background: #d97706; color: #fff; }

.sidebar-footer {
  margin-top: auto; padding: 14px 10px 0; font-size: 11px; color: #7b8ca6;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* min-width:0 is load-bearing, not decoration: a grid item defaults to
   min-width:auto, which lets a wide table or a card grid push the whole
   column past the viewport instead of wrapping or scrolling inside itself.
   Without it the phone layout overflows horizontally. */
.main { padding: 24px 28px 72px; max-width: 1400px; min-width: 0; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 21px; }
.page-head .sub { color: var(--ink-3); font-size: 13px; margin-top: 2px; }

/* ---------- stat cards ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-bottom: 22px; min-width: 0; }

.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); cursor: pointer; text-align: left;
  font-family: inherit; display: block; width: 100%;
  border-left: 3px solid var(--line-2);
}
.stat:hover { border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.stat.active { border-color: var(--mic-blue); box-shadow: 0 0 0 2px var(--mic-blue-soft); }
.stat .label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.stat .value { font-size: 26px; font-weight: 700; margin-top: 4px; line-height: 1.1; }
.stat .hint { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.stat.tone-warn { border-left-color: #e0a52a; }
.stat.tone-info { border-left-color: var(--mic-blue); }
.stat.tone-danger { border-left-color: var(--mic-pink); }
.stat.tone-danger .value { color: var(--bad); }
.stat.tone-good { border-left-color: var(--mic-green); }
/* Something is waiting on a decision rather than going wrong: filled, so it
   reads at a glance among the plain service cards, but amber and not red —
   the pending Job Applications offer is an opportunity, not an incident. */
.stat.tone-attn { border-left-color: #e0a52a; border-color: #efd9a8; background: var(--warn-bg); }
.stat.tone-attn .label, .stat.tone-attn .value { color: var(--warn); }
.stat.tone-attn .hint { color: var(--warn); opacity: 0.82; }
/* Being selected outranks being the card that asks for attention: the blue
   frame comes back, and the amber stripe stays to say which card it is. */
.stat.tone-attn.active { border-color: var(--mic-blue); border-left-color: #e0a52a; }

/* The service board's six cards: what each client bought, not where the work
   is stuck. Balanced at every width — six across on a desktop, two rows of
   three on a laptop, three rows of two on a phone — and deliberately compact,
   because six of them sit above the table that does the actual work. */
.stats.services { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stats.services .stat { padding: 12px 13px; }
.stats.services .stat .label { line-height: 1.3; min-height: 2.6em; }
.stats.services .stat .value { font-size: 23px; }
@media (max-width: 1360px) { .stats.services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .stats.services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats.services .stat { padding: 10px 11px; }
  .stats.services .stat .value { font-size: 20px; }
}

/* ---------- toolbar ---------- */

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; min-width: 0; }
.search {
  flex: 1 1 260px; min-width: 200px; padding: 9px 12px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
}
.search:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--mic-blue); box-shadow: 0 0 0 3px var(--mic-blue-soft);
}

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
  font-size: 12px; font-family: inherit; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--mic-blue); color: var(--mic-blue-dark); }
.chip.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 8px 14px; font-size: 13px; font-weight: 600; font-family: inherit;
  border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--ink-3); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--mic-blue); border-color: var(--mic-blue); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--mic-blue-dark); border-color: var(--mic-blue-dark); }
.btn.dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.dark:hover:not(:disabled) { background: var(--navy-2); }
.btn.success { background: var(--mic-green); border-color: var(--mic-green); color: #fff; }
.btn.success:hover:not(:disabled) { filter: brightness(0.94); }
.btn.danger { color: var(--bad); border-color: #f1c4cf; background: var(--bad-bg); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.subtle { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.subtle:hover:not(:disabled) { background: var(--muted-bg); border-color: transparent; }
.btn.block { width: 100%; }

/* ---------- cards & tables ---------- */

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; min-width: 0;
}
.card + .card { margin-top: 16px; }
.card-head {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.card-head h2 { font-size: 14px; font-weight: 700; }
.card-head .sub { font-size: 12px; color: var(--ink-3); }
.card-body { padding: 18px; }
.card-body.tight { padding: 12px 18px; }

.table-wrap { overflow-x: auto; min-width: 0; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-3); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); white-space: nowrap;
}
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; height: 56px; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr.row-danger { background: #fff8f9; }
table.data tbody tr.row-danger:hover { background: #fff1f4; }

/* Reserves real space for the action column so a button (already
   white-space: nowrap via .btn) always has room to sit beside the new ⋮
   menu without the column collapsing to the width of the shortest row. */
table.data td.cell-actions { min-width: 190px; }

.cell-primary { font-weight: 600; color: var(--ink); }
.cell-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* ---------- badges ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: #f0dcb6; }
.badge.info { background: var(--info-bg); color: var(--info); border-color: #c9e0f4; }
.badge.good { background: var(--good-bg); color: var(--good); border-color: #bfe6cf; }
.badge.done { background: var(--muted-bg); color: #4a5568; border-color: var(--line-2); }
.badge.bad { background: var(--bad-bg); color: var(--bad); border-color: #f4c6d2; }
.badge.muted { background: var(--muted-bg); color: var(--ink-2); border-color: var(--line-2); }
.badge.neutral { background: var(--muted-bg); color: var(--ink-2); border-color: var(--line-2); }

.due { font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.due.OVERDUE { color: var(--bad); }
.due.DUE_TODAY { color: var(--bad); }
.due.DUE_TOMORROW { color: #b45309; }
.due.DUE_SOON { color: #b45309; }
.due.ON_TRACK { color: var(--ink-2); }
.due.NONE { color: var(--ink-3); font-weight: 400; }

.flag {
  display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.flag.overdue { background: var(--mic-pink); color: #fff; }
.flag.waiting { background: var(--warn-bg); color: var(--warn); border: 1px solid #f0dcb6; }

/* ---------- secondary-actions menu (ui.js: menu()) ---------- */

.menu-wrap { display: inline-block; margin-left: 6px; position: relative; }
.menu-trigger { padding: 4px 8px; }
.menu-list {
  position: absolute; right: 0; top: 100%; z-index: 20; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); min-width: 160px; padding: 4px;
}
.menu-item {
  display: block; width: 100%; text-align: left; padding: 8px 10px; font-family: inherit;
  border: none; background: none; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink);
}
.menu-item:hover { background: var(--muted-bg); }

/* ---------- forms ---------- */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 11px; font-size: 13px; font-family: inherit; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface);
}
.field textarea { resize: vertical; min-height: 76px; }
.field .help { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 14px; }

/* ---------- detail view ---------- */

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.detail > * { min-width: 0; }

.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; font-size: 13px; }
.kv dt { color: var(--ink-3); font-size: 12px; }
.kv dd { margin: 0; color: var(--ink); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--line); }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--line-2);
}
.timeline li.accent::before { border-color: var(--mic-blue); background: var(--mic-blue); }
.timeline li.good::before { border-color: var(--mic-green); background: var(--mic-green); }
.timeline .when { font-size: 11px; color: var(--ink-3); }
.timeline .what { font-size: 13px; }

.note { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); }
.note + .note { margin-top: 8px; }
.note .meta { font-size: 11px; color: var(--ink-3); margin-top: 6px; }

/* ---------- notices ---------- */

.notice { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px; border: 1px solid; margin-bottom: 14px; }
.notice.info { background: var(--info-bg); border-color: #c9e0f4; color: var(--info); }
.notice.warn { background: var(--warn-bg); border-color: #f0dcb6; color: var(--warn); }
.notice.error { background: var(--bad-bg); border-color: #f4c6d2; color: var(--bad); }
.notice.success { background: var(--good-bg); border-color: #bfe6cf; color: var(--good); }

.empty { padding: 44px 20px; text-align: center; color: var(--ink-3); }
.empty strong { display: block; color: var(--ink-2); margin-bottom: 4px; font-size: 14px; }

.spinner {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--mic-blue); animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- modal ---------- */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg);
  width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column;
}
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.modal-head h2 { font-size: 15px; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface-2); }

/* ---------- login ---------- */

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--navy); }
.login-card { width: min(400px, 100%); background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 30px; }
.login-card .brandline { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }
.login-card h1 { font-size: 20px; margin: 6px 0 22px; }

/* ---------- misc ---------- */

.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.mt { margin-top: 12px; }
.mt-lg { margin-top: 20px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.mono { font-family: var(--mono); font-size: 12px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: 10px 12px; gap: 6px;
  }
  .brand { padding: 0 10px 0 4px; }
  .brand span { display: none; }
  .nav-section { display: none; }
  .nav-item { width: auto; padding: 6px 10px; font-size: 12px; }
  .sidebar-footer { margin-top: 0; border-top: 0; padding: 0 0 0 8px; width: 100%; display: flex; align-items: center; gap: 10px; }
  .sidebar-footer .tiny { display: none; }
  .main { padding: 16px 14px 60px; }
  .detail { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .stat { padding: 11px 12px; }
  .stat .value { font-size: 21px; }
  /* On a phone the case list stops being a table and becomes a list of cards.
     Sideways-scrolling to find out whether a client is overdue is exactly the
     Google Sheet experience this tool exists to replace. */
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: auto; }
  table.data thead { display: none; }
  table.data tr {
    border-bottom: 1px solid var(--line); padding: 14px 16px;
  }
  table.data tbody tr:last-child { border-bottom: 0; }
  table.data td { border-bottom: 0; padding: 3px 0; }
  table.data td.hide-sm { display: none; }
  table.data td[data-label]::before {
    content: attr(data-label) ": ";
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-3); font-weight: 700; margin-right: 6px;
  }
  table.data td.cell-lead { padding-bottom: 8px; }
  table.data td.cell-actions { text-align: left; padding-top: 10px; }
  table.data td.cell-actions .row { justify-content: flex-start !important; }
  table.data td.nowrap, table.data td .due { white-space: normal; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 8px; }
}

/* Consulta Personalizada: the booked session, read at a glance. */
.session-when { font-size: 17px; font-weight: 700; color: var(--navy, #0F172A); line-height: 1.35; }

/* Entrega Express: the 48-hour promise, visible at a glance. */
.flag.express { background: #f1e7ff; color: #6b21a8; border-color: #ddc9f7; }

/* ---------- Job Apps Offer: la lista para copiar ---------- */

/* Cuatro columnas y un gesto. Cada celda con valor es en sí misma el botón que
   la copia, así que se comporta como tal: cursor, foco visible y un destello
   al copiar. El botón "Copiar fila" cierra la fila y es siempre visible. */
table.data.copy-table td { padding-top: 10px; padding-bottom: 10px; }
table.data.copy-table th.copy-col, table.data.copy-table td.copy-col { width: 1%; }
table.data.copy-table th.action-col, table.data.copy-table td.action-col { width: 1%; padding-left: 8px; }

table.data td.copy-cell { cursor: pointer; border-radius: var(--radius-sm); }
table.data td.copy-cell:hover { color: var(--mic-blue); }
table.data td.copy-cell:focus-visible { outline: 2px solid var(--mic-blue); outline-offset: -2px; }

/* El email se lee mejor tabular, y es el campo que más se pega en otro sitio. */
table.data td.cell-mono { font-variant-numeric: tabular-nums; }

/* La confirmación en el propio sitio que se copió, junto al "✓ Copiado": un
   color que se apaga solo dice "ése" sin mover nada de sitio. */
table.data td.copy-cell.copied,
table.data tbody tr.copied td { background: var(--mic-green-soft); }

/* Sin análisis registrado. Un guion, dicho en voz baja y sin fingir que se
   puede pulsar. */
table.data td.muted-cell { color: var(--ink-3); }

@media (max-width: 900px) {
  /* Aquí la fila ya es una tarjeta: el botón deja de ir a la derecha y se
     coloca con el resto de los campos. */
  table.data td.copy-col, table.data td.action-col { text-align: left !important; padding-top: 10px; }
  table.data td.action-col { padding-left: 0; }
  table.data td.copy-cell { padding-left: 0; }
}