/* Estilos de la Plataforma Madre.
   Vivían dentro de index.html (issue #26): con el CSS y el JS ahí dentro,
   el archivo llegaba a 5,210 líneas y ver la estructura de una tabla
   obligaba a navegar entre miles de líneas que no eran HTML. */

  :root {
    --bg: #f2f4f7;
    --surface: #ffffff;
    --surface-2: #e7ebf1;
    --surface-3: #f5f7fa;
    --ink: #16233d;
    --ink-soft: #4c5872;
    --ink-faint: #8590a6;
    --line: #d7dce4;
    --accent: #072e7d;
    --accent-soft: #e2e9f5;
    --accent-ink: #051f57;
    --warn: #92601c;
    --warn-soft: #f1e6cd;
    --crit: #9c3b34;
    --crit-soft: #f4dedc;
    --sidebar-bg: #ffffff;
    --sidebar-ink: #072e7d;
    --sidebar-ink-soft: #5b6f9c;
    --sidebar-active: #e2e9f5;
    --sidebar-active-ink: #072e7d;
    --sidebar-hover: rgba(7,46,125,0.06);
    --sidebar-line: #e3e7ee;
  }
  :root[data-theme="dark"] {
    --bg: #0a0f1a;
    --surface: #121a28;
    --surface-2: #192335;
    --surface-3: #0e1522;
    --ink: #e6ebf3;
    --ink-soft: #a7b2c6;
    --ink-faint: #6c7891;
    --line: #253046;
    --accent: #6f9bcb;
    --accent-soft: #1c2c42;
    --accent-ink: #cfe0f2;
    --warn: #d9a35d;
    --warn-soft: #2e2415;
    --crit: #e18077;
    --crit-soft: #33201d;
    --sidebar-bg: #060b13;
    --sidebar-ink: #e7ecf3;
    --sidebar-ink-soft: #6c7891;
    --sidebar-active: #101a29;
    --sidebar-active-ink: #ffffff;
    --sidebar-hover: rgba(255,255,255,0.05);
    --sidebar-line: #1a2233;
  }
  /* La marca es blanca/azul marino siempre — ya no se cambia automático a
     oscuro según el sistema operativo (causaba bajo contraste sin que el
     usuario lo pidiera). El bloque :root[data-theme="dark"] de arriba queda
     como base por si más adelante se agrega un selector manual de tema. */

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
  }
  button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
  code, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

  .app {
    display: grid;
    grid-template-columns: 216px 1fr;
    height: 100vh;
    width: 100%;
    background: var(--bg);
  }

  /* ---- sidebar ---- */
  .sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-ink);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--sidebar-line, transparent);
  }
  .brand {
    padding: 4px 10px 18px;
    border-bottom: 1px solid var(--sidebar-line, rgba(255,255,255,0.08));
    margin-bottom: 14px;
  }
  .brand .name { font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
  .brand .tag {
    display: inline-block;
    margin-top: 6px;
    font-size: 10px;
    font-family: ui-monospace, monospace;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--warn);
    background: rgba(217,163,93,0.14);
    border: 1px solid rgba(217,163,93,0.35);
    border-radius: 4px;
    padding: 2px 6px;
  }
  .navitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--sidebar-ink-soft);
    font-size: 13px;
    font-weight: 500;
    user-select: none;
  }
  .navitem .ic { width: 16px; text-align: center; font-family: ui-monospace, monospace; font-size: 12px; }
  .navitem:hover { background: var(--sidebar-hover, rgba(255,255,255,0.05)); color: var(--sidebar-ink); }
  .navitem.active { background: var(--sidebar-active); color: var(--sidebar-active-ink, #fff); }
  .navitem.active .ic { color: var(--accent); }
  .navitem.hidden { display: none; }
  .sidebar-foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .session-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--sidebar-ink-soft); padding: 0 10px; margin-bottom: 6px; }
  .session-hint { font-size: 10.5px; color: var(--sidebar-ink-soft); padding: 8px 10px 2px; line-height: 1.5; }

  /* ---- main ---- */
  .main {
    background: var(--surface-3);
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }
  .topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    flex: 0 0 auto;
  }
  .search-wrap { flex: 1; position: relative; max-width: 420px; }
  .search-wrap input {
    width: 100%;
    padding: 8px 12px 8px 30px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-3);
    color: var(--ink);
    outline: none;
  }
  .search-wrap input:focus { border-color: var(--accent); }
  .search-wrap::before {
    content: "⌕";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
    font-size: 14px;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
  }
  .btn:hover { border-color: var(--ink-faint); }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .btn.primary:hover { filter: brightness(1.08); }
  .btn.ghost { border-color: transparent; background: transparent; }
  .btn.small { padding: 5px 10px; font-size: 12px; }
  .btn.ok { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
  .btn:disabled { opacity: .45; cursor: not-allowed; }

  .content { padding: 22px 24px 60px; overflow-x: hidden; overflow-y: auto; flex: 1 1 auto; }
  .view { display: none; }
  .view.active { display: block; }

  h1.page-title { font-size: 19px; font-weight: 700; margin: 0 0 3px; }
  p.page-sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 18px; max-width: 62ch; }
  .view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }

  /* ---- stat tiles ---- */
  .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
  .stat-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
  }
  .stat-tile .lbl { font-size: 11px; color: var(--ink-soft); font-family: ui-monospace, monospace; text-transform: uppercase; letter-spacing: .04em; }
  .stat-tile .val { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .stat-tile .sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }

  .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px 18px;
    margin-bottom: 18px;
  }
  .panel h2 { font-size: 14px; margin: 0 0 12px; font-weight: 700; }
  .panel .h2row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .panel .h2row h2 { margin: 0; }

  .bar-row { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12.5px; }
  .bar-row .bname { color: var(--ink-soft); }
  .bar-track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
  .bar-fill { height: 100%; border-radius: 4px; background: var(--accent); }
  .bar-row .bval { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; color: var(--ink); }

  /* ---- gráfica de barras verticales cronológica (día/semana/mes) ---- */
  .vbar-chart { display: flex; align-items: flex-end; gap: 5px; height: 170px; overflow-x: auto; padding: 4px 4px 28px; position: relative; }
  .vbar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 16px; height: 100%; flex: 1 0 auto; cursor: default; position: relative; }
  .vbar-fill { width: 68%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; transition: opacity .1s; }
  .vbar-col:hover .vbar-fill { opacity: .75; }
  .vbar-value { font-size: 9px; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-bottom: 2px; white-space: nowrap; line-height: 1; }
  .vbar-label {
    font-size: 9.5px; color: var(--ink-faint); margin-top: 6px; white-space: nowrap;
    position: absolute; bottom: 2px; transform: rotate(-40deg) translateX(-6px); transform-origin: top left;
  }

  /* ---- segmented control ---- */
  .segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--surface); gap: 2px; flex-wrap: wrap; }
  .segmented button {
    border: none; background: transparent; padding: 6px 12px; border-radius: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  }
  .segmented button.active { background: var(--accent); color: #fff; }

  /* ---- table ---- */
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
  th { font-family: ui-monospace, monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 600; }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; }
  tr.row-click { cursor: pointer; }
  tr.row-click:hover td { background: var(--surface-3); }
  .ctb-clasif-grid { display: grid; grid-template-columns: 1fr 340px; gap: 14px; align-items: start; }
  @media (max-width: 900px) { .ctb-clasif-grid { grid-template-columns: 1fr; } }
  .ctb-mes-h { font-weight: 700; font-size: 13px; color: var(--accent); margin: 14px 0 4px; }
  .ctb-mes-h:first-child { margin-top: 0; }
  .ctb-com-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
  .ctb-com-row:last-child { border-bottom: none; }
  .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
  .table-wrap table { border-radius: 10px; overflow: hidden; }
  .table-wrap tr:last-child td { border-bottom: none; }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }
  /* Ícono canónico por estado — mismo glifo (y color) para el mismo estado en toda la plataforma. */
  .pill::before { font-size: 10px; font-weight: 800; line-height: 1; }
  .pill.ok::before { content: "\2713"; }       /* ✓ */
  .pill.warn::before { content: "\25CF"; }      /* ● */
  .pill.crit::before { content: "\2715"; }      /* ✕ */
  .pill.neutral::before { content: "\2013"; }   /* – */
  .pill.ok { background: var(--accent-soft); color: var(--accent-ink); }
  .pill.warn { background: var(--warn-soft); color: var(--warn); }
  .pill.crit { background: var(--crit-soft); color: var(--crit); }
  .pill.neutral { background: var(--surface-2); color: var(--ink-soft); }

  .status-select {
    border: none; border-radius: 20px; padding: 3px 22px 3px 10px; font-size: 11px; font-weight: 600;
    cursor: pointer; appearance: none; -webkit-appearance: none;
    background-repeat: no-repeat; background-position: right 7px center; background-size: 9px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%238590a6' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  }
  /* Estatus y Estatus de pago se leen de un golpe, sin detenerse a leer el
     texto: color lleno y letra blanca. Los tonos pastel de antes se perdían
     entre los renglones cuando hay treinta servicios en pantalla.
     Los tres colores están elegidos para que el blanco encima pase contraste
     AA; por eso el ámbar es tostado y no amarillo. */
  .status-select.ok { background-color: #157f3f; color: #fff; }
  .status-select.warn { background-color: #b45309; color: #fff; }
  .status-select.crit { background-color: #c0271f; color: #fff; }
  .status-select.neutral { background-color: var(--surface-2); color: var(--ink-soft); }
  /* La flechita gris desaparecía sobre el color lleno. */
  .status-select.ok, .status-select.warn, .status-select.crit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  }
  .status-select.ok option, .status-select.warn option, .status-select.crit option {
    /* El desplegable abierto lo pinta el sistema: ahí sí hace falta el color
       normal, o las opciones salen blancas sobre blanco. */
    background: var(--surface); color: var(--ink);
  }
  /* En modo oscuro los mismos tonos quedan apagados contra el fondo. */
  :root[data-theme="dark"] .status-select.ok { background-color: #1f9d52; }
  :root[data-theme="dark"] .status-select.warn { background-color: #d2690a; }
  :root[data-theme="dark"] .status-select.crit { background-color: #e0453c; }
  .inline-date { border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 11px; color: var(--ink-soft); background: var(--surface); }
  .icon-btn {
    background: none; border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
    padding: 4px 7px; font-size: 12px; color: var(--ink-soft); line-height: 1;
  }
  .icon-btn:hover { background: var(--surface-3); color: var(--ink); }

  .avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; flex: 0 0 auto;
  }
  .avatar.emp { background: var(--surface-2); color: var(--ink-soft); border-radius: 8px; }
  .cell-name { display: flex; align-items: center; gap: 10px; }
  .cell-name .nm { font-weight: 600; }
  .cell-name .sub { font-size: 11.5px; color: var(--ink-faint); }

  /* ---- profile ---- */
  .profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .profile-id { display: flex; gap: 14px; align-items: center; }
  .profile-id .avatar { width: 46px; height: 46px; font-size: 16px; border-radius: 12px; }
  .profile-id h1 { margin: 0; font-size: 20px; }
  .profile-id .meta-line { color: var(--ink-soft); font-size: 12.5px; margin-top: 3px; }
  .profile-grid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
  .kv { display: flex; flex-direction: column; gap: 10px; }
  .kv .row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
  .kv .row:last-child { border-bottom: none; }
  .kv .row .k { color: var(--ink-soft); }
  .kv .row .v { font-weight: 600; text-align: right; }
  .ssn-mask { font-family: ui-monospace, monospace; }
  .reveal-link { font-size: 11px; color: var(--accent); cursor: pointer; font-weight: 600; margin-left: 6px; }

  .file-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
  .file-row:last-child { border-bottom: none; }
  .file-ic { width: 26px; height: 26px; border-radius: 6px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-soft); flex: 0 0 auto; }
  .file-row .fname { font-weight: 600; flex: 1; }
  .file-row .fmeta { color: var(--ink-faint); font-size: 11px; }

  /* ---- modal ---- */
  .overlay {
    position: fixed; inset: 0; background: rgba(10,14,15,0.5);
    display: none; align-items: flex-start; justify-content: center;
    padding: 20px 16px; overflow-y: auto; z-index: 50;
  }
  .overlay.open { display: flex; }
  #overlayCliente.open { z-index: 60; }
  .modal {
    background: var(--surface); border-radius: 12px; width: 100%; max-width: 560px;
    border: 1px solid var(--line);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  }
  .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .modal-head h2 { margin: 0; font-size: 15px; }
  .modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; max-height: 78vh; overflow-y: auto; }
  .modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
  .field { display: flex; flex-direction: column; gap: 5px; }
  .field label { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
  .field input, .field select, .field textarea, .comision-row input, .comision-row select {
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-3); color: var(--ink); outline: none;
  }
  .field input:focus, .field select:focus, .field textarea:focus, .comision-row input:focus, .comision-row select:focus { border-color: var(--accent); }
  .field-fixed {
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--ink); font-weight: 600;
  }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .field-row3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
  .divider-lbl {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent);
    font-weight: 700; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line);
  }
  .comision-row { display: grid; grid-template-columns: 1.6fr 0.9fr 1.1fr auto; gap: 8px; align-items: center; }
  .sub-nombre { font-size: 13px; color: var(--ink); }
  .sufijo-comision { color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }

  /* Configuración de un trabajador: una tarjeta por tipo de servicio. La
     casilla da el acceso —completo, con todas sus subcategorías— y adentro
     cada formulario lleva su propia comisión. */
  .cat-config { border: 1px solid var(--line); border-radius: 9px; margin-top: 8px; background: var(--surface-3); }
  .cat-config.activa { border-color: var(--accent); background: var(--surface); }
  .cat-config-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; }
  .cat-config-head input { width: 15px; height: 15px; flex: none; }
  .cat-config-nombre { font-weight: 700; font-size: 13.5px; flex: 1; }
  .cat-config-body { padding: 4px 12px 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
  .cat-config-body .bulk-row { padding-bottom: 7px; margin-bottom: 3px; border-bottom: 1px dashed var(--line); }
  /* Un campo que quedó en blanco al intentar guardar. */
  .comision-row input.falta { border-color: var(--crit); background: var(--crit-soft); }
  .rm-btn { color: var(--crit); background: none; border: none; cursor: pointer; font-size: 16px; padding: 6px; line-height: 1; }
  .hint { font-size: 11px; color: var(--ink-faint); }

  /* ---- pestañas horizontales secundarias (ej. línea dentro de Seguimiento) ---- */
  .subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 14px; flex-wrap: wrap; }
  .subtab {
    padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
    cursor: pointer; border-bottom: 2px solid transparent; user-select: none;
  }
  .subtab:hover { color: var(--ink); }
  .subtab.active { color: var(--accent); border-bottom-color: var(--accent); }

  /* ---- alternar granularidad de una gráfica (día/semana/mes) ---- */
  .chart-toggle { display: flex; gap: 4px; }
  .chart-toggle button {
    padding: 4px 11px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--line);
    background: var(--surface); border-radius: 6px; cursor: pointer; color: var(--ink-soft);
  }
  .chart-toggle button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  /* ---- tiles comparativo (dos periodos lado a lado) ---- */
  .compare-tile { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
  .compare-tile .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
  .compare-tile .row { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
  .compare-tile .valA, .compare-tile .valB { font-size: 18px; font-weight: 700; }
  .compare-tile .delta { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
  .compare-tile .delta.up { background: var(--accent-soft); color: var(--accent-ink); }
  .compare-tile .delta.down { background: var(--crit-soft); color: var(--crit); }

  /* ---- multi-select desplegable (ej. tipo de servicio en Estadísticas) ---- */
  .multiselect { position: relative; }
  .ms-toggle { width: 100%; justify-content: space-between; display: flex; text-align: left; }
  .ms-panel {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16); max-height: 220px; overflow-y: auto; padding: 6px;
  }
  .ms-panel.open { display: block; }
  .ms-panel label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 12.5px; cursor: pointer; border-radius: 5px; }
  .ms-panel label:hover { background: var(--surface-3); }

  /* ---- attach files / camera ---- */
  .attach-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .upload-menu-wrap { position: relative; }
  .upload-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16); padding: 4px; min-width: 160px;
  }
  .upload-menu.open { display: block; }
  .upload-menu button {
    display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 7px 8px; font-size: 12.5px; border-radius: 5px; color: var(--ink);
  }
  .upload-menu button:hover { background: var(--surface-3); }
  .attach-chip {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface-3); font-size: 12px;
  }
  .attach-chip img { width: 26px; height: 26px; object-fit: cover; border-radius: 4px; }
  .cam-panel { display: none; flex-direction: column; gap: 8px; align-items: flex-start; background: var(--surface-3); border: 1px dashed var(--line); border-radius: 8px; padding: 10px; }
  .cam-panel.open { display: flex; }
  .cam-panel video { width: 100%; max-width: 320px; border-radius: 6px; background: #000; }
  .cam-error { font-size: 12px; color: var(--warn); }

  /* ---- workers ---- */
  .worker-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
  .worker-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .worker-name { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13.5px; }
  .config-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface-3); border: 1px solid var(--line); border-radius: 20px;
    padding: 4px 10px 4px 6px; font-size: 11.5px; margin: 6px 6px 0 0;
  }
  .config-chip .pct { font-family: ui-monospace, monospace; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border-radius: 10px; padding: 1px 7px; }
  .perm-chip { font-size: 10.5px; font-family: ui-monospace, monospace; padding: 2px 7px; border-radius: 10px; background: var(--surface-2); color: var(--ink-faint); margin-left: 6px; }
  .perm-chip.on { background: var(--accent-soft); color: var(--accent-ink); }

  /* ---- nomina ---- */
  /* El resumen de nómina se lee de un vistazo: filas apretadas y solo lo que
     hace falta para decidir a quién le toca pago. El desglose se despliega. */
  .tabla-compacta th, .tabla-compacta td { padding: 4px 8px; font-size: 12px; line-height: 1.3; }
  .tabla-compacta tbody tr { cursor: pointer; }
  .tabla-compacta tbody tr:hover { background: var(--accent-soft); }
  .desglose td { background: var(--panel-alt, #fafafa); font-size: 12px; color: #555; }
  .semana-nomina { border: 1px solid var(--line, #e3e3e3); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
  .semana-nomina > .cab { display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding: 7px 12px; background: var(--accent-soft, #f2f6ff); font-weight: 700; font-size: 13px; }
  .pill-confirmado { font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 8px;
    background: #e6f4ea; color: #1e7a35; }
  .pill-abierto { font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 8px;
    background: #fff4e5; color: #9a5b00; }

  .payee-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .payee-row:last-child { border-bottom: none; }
  .payee-left { display: flex; align-items: center; gap: 12px; }
  .payee-amt { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .payee-sub { font-size: 11px; color: var(--ink-faint); }

  .locked-box {
    text-align: center; padding: 60px 20px; color: var(--ink-soft);
  }
  .locked-box .ic { font-size: 30px; margin-bottom: 10px; }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }

  @media (max-width: 760px) {
    .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100vh; }
    .sidebar { flex-direction: row; overflow-x: auto; overflow-y: hidden; height: auto; align-items: center; }
    .brand { display: none; }
    .sidebar-foot { margin-top: 0; padding-top: 0; border-top: none; }
    .session-lbl { display: none; }
    .main { height: auto; }
    .stat-row { grid-template-columns: 1fr 1fr; }
    .profile-grid { grid-template-columns: 1fr; }
    .field-row, .field-row3 { grid-template-columns: 1fr; }
  }

/* Vista lite del co-preparador: él no le cobra al cliente por nuestra
   plataforma, así que nada de dinero le aplica. Las columnas se ocultan por
   clase compartida entre <th> y <td>, no por posición: así no se pueden
   desalinear, que es el error clásico de esta tabla. */
.vista-lite .col-dinero { display: none !important; }

/* Resumen de nómina en dos columnas: la lista de trabajadores crece hacia
   abajo y robaba pantalla. En móvil vuelve a una sola, donde partirla no
   ayudaría. */
.resumen-dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 900px) { .resumen-dos-columnas { grid-template-columns: 1fr; } }

/* El botón que despliega los recibos de un plan: antes era un triangulito
   suelto que se perdía entre los iconos del renglón. */
.btn-recibos { white-space: nowrap; font-weight: 700; }
.btn-recibos.abierto { background: var(--accent-soft, #e8eefc); border-color: var(--accent, #2b56c9); }

/* Resumen del recorte que se está viendo en Seguimiento: una sola línea, para
   no robarle espacio a la tabla, que es lo que se viene a ver. */
.seg-resumen {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-top: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-3);
  font-size: 12.5px; color: var(--ink-soft);
}
.seg-resumen strong { color: var(--ink); font-weight: 700; }
/* ============ Dashboard de análisis del cliente (issue #88) ============
   Se lee de arriba abajo: primero las cifras del año contra el año pasado,
   luego la tendencia, y solo entonces el detalle. Todo con las variables del
   tema, para que las gráficas no queden blancas en modo oscuro. */

.dash-head {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: flex-end; justify-content: space-between; margin-bottom: 12px;
}
.dash-aviso {
  display: flex; gap: 8px; align-items: baseline;
  padding: 9px 13px; margin-bottom: 12px; border-radius: 8px;
  background: var(--warn-soft); color: var(--warn);
  border: 1px solid var(--warn); font-size: 13px;
}

/* Las cuatro cifras del año. */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .kpi-row { grid-template-columns: 1fr; } }
.kpi-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 15px;
}
.kpi-card .lbl {
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
}
.kpi-card .val {
  font-size: 26px; font-weight: 800; color: var(--ink);
  margin-top: 3px; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.kpi-card .cmp { margin-top: 5px; font-size: 12px; color: var(--ink-faint); }
/* El color dice si el cambio es BUENO, no si el número subió: que bajen los
   gastos es una buena noticia. */
.delta { font-weight: 700; }
.delta.bien { color: #1a7f43; }
.delta.mal  { color: var(--crit); }
:root[data-theme="dark"] .delta.bien { color: #4ec27d; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1000px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-chart { width: 100%; overflow-x: auto; }
.dash-chart svg { display: block; width: 100%; height: auto; }

/* Ranking horizontal: la barra es la comparación, el número es el dato. */
.rank-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 7px 0; }
.rank-row + .rank-row { border-top: 1px solid var(--line); }
.rank-nombre { font-size: 13px; color: var(--ink); }
.rank-nombre .hint { font-size: 11.5px; }
.rank-monto { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rank-pct { font-size: 11.5px; color: var(--ink-faint); text-align: right; }
.rank-barra { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.rank-barra > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
/* Las categorías de control (pagos a tarjetas, ATM, personal) no son gasto del
   negocio: se listan, pero apagadas. */
.rank-row.control .rank-barra > i { background: var(--ink-faint); }
.rank-row.control .rank-nombre { color: var(--ink-soft); }
/* Un nombre de la tabla que se puede editar: se ve como texto, no como botón,
   pero invita a hacerle clic (paso de nombres del reporte, issue #87). */
.link-btn {
  background: none; border: 0; padding: 0; font: inherit; color: var(--ink);
  text-align: left; cursor: pointer; border-bottom: 1px dashed var(--ink-faint);
}
.link-btn:hover { color: var(--accent); border-bottom-color: var(--accent); }
.fila-editor > td { background: var(--surface-3); }

/* El botón de cuadre de un estado de cuenta: en rojo cuando no cuadra, para que
   no se pase de largo entre una lista de estados que sí cuadran (issue #86). */
.btn-recibos.descuadrado { color: var(--crit); border-color: var(--crit); }
.fila-cuadre > td { background: var(--surface-3); }

/* Un comercio con gastos sin categoría: no entran en ninguna cifra del
   entregable, así que tienen que saltar a la vista (issue de clasificación por
   comercio agrupado). */
.fila-editor > td, tr.pendiente > td { background: var(--surface-3); }
tr.pendiente .rank-nombre, tr.pendiente .link-btn { font-weight: 700; }
select.status-select.falta { border-color: var(--crit); background: var(--crit-soft); }

/* ============ Los cinco pasos de una contabilidad ============
   Antes había pestañas arriba y botones numerados hasta abajo, y ninguno decía
   si el mes ya se había subido al histórico. El proceso ahora se ve como lo que
   es: cinco pasos, cada uno con su estado. */
.pasos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 14px 0 16px; }
@media (max-width: 1100px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .pasos { grid-template-columns: 1fr; } }
.paso {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); cursor: pointer;
}
.paso:hover { border-color: var(--accent); }
.paso.activo { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.paso-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--surface-2); color: var(--ink-soft);
}
.paso.listo .paso-num { background: #1a7f43; color: #fff; }
.paso.atencion .paso-num { background: var(--warn); color: #fff; }
.paso.bloqueado { opacity: 0.55; }
.paso-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paso-txt strong { font-size: 12.5px; }
.paso-txt .hint { font-size: 11.5px; line-height: 1.35; }

/* La segunda fila de pestañas: los formularios dentro de una categoría. Se ve
   subordinada a la de arriba para que se lea como un nivel más, no como otra
   barra independiente. */
.subtabs-hijas {
  margin-top: -2px; padding-left: 14px;
  border-left: 2px solid var(--line);
}
.subtabs-hijas .subtab { font-size: 12px; padding: 5px 10px; }

/* Calendario de meses para un servicio de Contabilidad (issue #108): 4x3
   meses del año elegido. Gris = ya registrado en otro servicio de este
   cliente (no se puede volver a pedir); azul = elegido para este servicio. */
.calendario-meses-anio {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.calendario-meses-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.mes-celda {
  padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-align: center;
}
.mes-celda:hover { border-color: var(--accent); }
.mes-celda.elegido {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.mes-celda.registrado {
  background: var(--surface-2); color: var(--ink-soft); border-color: var(--line);
  cursor: not-allowed; opacity: 0.75;
}