/* ============================================================
   Proximia Studio · Panel interno
   Sobrio y denso: es una herramienta de trabajo diario, no una landing.
   ============================================================ */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #E5E5E8;
  --border-strong: #cdd2da;
  --text: #111114;
  --text-soft: #6B6E76;
  --text-faint: #8b939e;
  --accent: #2962FA;
  --accent-soft: #EAF0FF;
  --ok: #0f8a5f;
  --ok-soft: #e6f6ef;
  --warn: #a86300;
  --warn-soft: #fdf1de;
  --bad: #c0392f;
  --bad-soft: #fdecea;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(18, 22, 28, .06), 0 4px 12px rgba(18, 22, 28, .04);
  --shadow-hover: 0 2px 4px rgba(18, 22, 28, .08), 0 8px 20px rgba(18, 22, 28, .08);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216;
    --surface: #171b21;
    --surface-2: #1e242c;
    --border: #262d36;
    --border-strong: #3a434f;
    --text: #eef1f5;
    --text-soft: #a3adb9;
    --text-faint: #6f7986;
    --accent: #6b8dff;
    --accent-soft: #1c2540;
    --ok: #3ecf8e;
    --ok-soft: #10281f;
    --warn: #e0a458;
    --warn-soft: #2a2113;
    --bad: #f0705f;
    --bad-soft: #2d1715;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .2);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

/* Sin esto, el navegador deja "rebotar" toda la página al llegar al final
   del scroll (el hueco blanco típico de una web) — así se queda contenido
   dentro de cada zona, como en una app de verdad. */
html { overscroll-behavior-y: contain; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

/* El menú del navegador al mantener pulsado (copiar, abrir en pestaña
   nueva...) sobre botones y navegación no aporta nada aquí y rompe la
   sensación de app — el texto normal (nombres, notas, importes) se puede
   seguir seleccionando igual, esto no lo toca. */
.btn, .nav__item, .pill, .kpi-strip__item {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Cada cambio de pantalla entra con un pelín de fundido + subida, en vez
   de aparecer de golpe — así se nota como pantallas de una app, no como
   páginas que van cargando una detrás de otra. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes view-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  .view-enter { animation: view-enter .2s ease; }
}

/* El manual de marca usa Poppins para títulos e Inter para texto. */
h1, h2, h3, .sidebar__brand, .login__brand, .metric__value {
  font-family: 'Poppins', var(--font);
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Login ---------- */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login__card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 32px;
}

.login__brand {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}

.login__sub {
  color: var(--text-faint);
  font-size: 13px;
  margin-bottom: 24px;
}

/* ---------- Estructura ---------- */

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

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  font-weight: 600;
  letter-spacing: -.02em;
  padding: 0 8px;
}

.sidebar__brand small {
  display: block;
  font-weight: 400;
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav__group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 14px 10px 4px;
}
.nav__group-label:first-child { padding-top: 2px; }

.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-soft);
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  width: 100%;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease,
    transform .22s cubic-bezier(.34, 1.56, .64, 1);
  -webkit-tap-highlight-color: transparent;
}

.nav__item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav__item:active { transform: scale(.96); transition-duration: .05s; }
.nav__item.is-active { background: var(--accent-soft); color: var(--accent); }
.nav__icon { font-size: 15px; line-height: 1; flex: none; }

.sidebar__foot {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  font-size: 12px;
  color: var(--text-faint);
}

.main { padding: 24px 28px 64px; min-width: 0; }

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.topbar__sub { color: var(--text-faint); font-size: 13px; }

/* ---------- Iconos de trazo (ver icon() en db.js) ---------- */
.icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon svg { width: 1em; height: 1em; display: block; }

/* ---------- Controles ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease,
    /* De vuelta del tap, con un pelín de rebote — pulsar algo y notar solo
       una escala lineal no se siente distinto de mover una barra de scroll.
       Bajar es instantáneo (ver :active más abajo); solo el regreso rebota. */
    transform .22s cubic-bezier(.34, 1.56, .64, 1), filter .12s ease, opacity .12s ease,
    box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover { background: var(--surface-2); border-color: var(--text-faint); }
/* El tap en sí, no solo el estado final: sin esto un botón cambiaba de
   golpe y en móvil (sin :hover) no había ningún feedback al tocar. Bajar
   es instantáneo (transition-duration corta) — el rebote es solo de vuelta. */
.btn:not(:disabled):active { transform: scale(.95); transition-duration: .05s; }

/* El primario lleva una sombra tintada del propio acento: pesa más que un
   botón normal sin depender solo del color, así se distingue también de
   un vistazo en modo daltónico o en pantallas mal calibradas. */
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(41, 98, 250, .15), 0 4px 10px rgba(41, 98, 250, .25);
}
.btn--primary:hover { filter: brightness(1.08); background: var(--accent); }
/* Al pulsarlo la sombra se encoge, como si el botón se hundiera de
   verdad — sin esto un botón "premium" solo se movía, sin dar la
   sensación de estar pulsando algo con volumen. */
.btn--primary:not(:disabled):active {
  box-shadow: 0 1px 1px rgba(41, 98, 250, .15), 0 2px 5px rgba(41, 98, 250, .2);
}

.btn--danger { color: var(--bad); border-color: var(--bad); background: none; }
.btn--danger:hover { background: var(--bad-soft); border-color: var(--bad); }

.btn--sm { padding: 4px 10px; font-size: 13px; }
.btn--block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 5px;
}

input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  /* Por debajo de 16px, Safari en iPhone hace zoom automático al tocar el
     campo (para que se pueda leer) — la pantalla "se amplía" sola en cada
     campo que se toca. A partir de 16px no lo hace. */
  font-size: 16px;
  transition: border-color .12s ease, outline-color .12s ease;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

textarea { resize: vertical; min-height: 72px; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ---------- Selector con buscador ---------- */

.combo { position: relative; }

.combo__list {
  display: none;
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

.combo__option {
  padding: 8px 10px;
  cursor: pointer;
}

.combo__option:hover { background: var(--surface-2); }

.combo__empty {
  padding: 8px 10px;
  color: var(--text-faint);
  font-size: 13px;
}

/* ---------- Tarjetas y métricas ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 20px;
}

/* Alternativa compacta al .grid de tarjetas: para pantallas que se miran
   varias veces al día (Hoy, Negocios), una fila de chips pequeños pesa
   menos que tarjetas grandes. No envuelve nunca a una segunda fila — si no
   caben, se desliza en horizontal, como el menú de móvil. */
.kpi-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  margin-bottom: 20px;
  scrollbar-width: none;
}
.kpi-strip::-webkit-scrollbar { display: none; }

.kpi-strip__item {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 104px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.kpi-strip__item[data-tone="bad"] { border-left-color: var(--bad); }
.kpi-strip__item[data-tone="warn"] { border-left-color: var(--warn); }
.kpi-strip__item[data-tone="ok"] { border-left-color: var(--ok); }
.kpi-strip__item[data-tone="accent"] { border-left-color: var(--accent); }

.kpi-strip__value {
  font-size: 19px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.kpi-strip__value--bad { color: var(--bad); }
.kpi-strip__value--warn { color: var(--warn); }
.kpi-strip__value--ok { color: var(--ok); }
.kpi-strip__value--accent { color: var(--accent); }

.kpi-strip__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.metric__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.metric__value {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -.02em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.metric__note { font-size: 12px; color: var(--text-soft); margin-top: 2px; }

/* ---------- Kanban ---------- */

/* El kanban con drag&drop se sustituyó por la lista con filtros:
   .board/.column/.deal ya no se usan en ningún sitio. */
.deal__name { font-weight: 600; margin-bottom: 2px; }
.deal__meta { font-size: 12px; color: var(--text-faint); }

.deal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
}

.deal__amount { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Píldoras ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-soft);
  white-space: nowrap;
}

.pill--ok { background: var(--ok-soft); color: var(--ok); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--bad { background: var(--bad-soft); color: var(--bad); }
.pill--accent { background: var(--accent-soft); color: var(--accent); }

/* ---------- Tablas ---------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Barra de progreso ---------- */

.bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  min-width: 80px;
}

.bar__fill { height: 100%; background: var(--ok); border-radius: 999px; }

/* ---------- Ficha de cliente ---------- */

/* Dos columnas mientras quepan sin apretar; una sola en pantallas estrechas.
   Sin media query: el propio auto-fit decide. */
.ficha-cols {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

/* El buscador vive en la barra de acciones, donde no hay estilo de input */
.topbar input[type="text"] {
  min-width: 260px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  background: var(--surface);
  color: inherit;
}

/* ---------- Notas de seguimiento ---------- */

.notas { margin-bottom: 18px; }

.notas__lista {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 10px;
  padding-right: 4px;
}

.notas__item { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.notas__item:last-child { border-bottom: none; }

.notas__nueva { display: flex; gap: 8px; align-items: flex-start; }
.notas__nueva textarea { min-height: 44px; }
.notas__nueva .btn { flex-shrink: 0; }

/* ---------- Pool de leads ---------- */

.pool-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.pool-card__campos { display: flex; flex-direction: column; gap: 10px; }

/* En escritorio hay ancho de sobra: tarjetas más anchas (menos por fila,
   pero con sitio real dentro) y Etapa/Próximo contacto/Asignado a en fila
   en vez de apiladas — si no, la tarjeta se alargaba sin necesidad.
   Grid con auto-fit, no un flex a tercios iguales: "Próximo contacto"
   lleva además el botón Quitar, necesita más sitio que los otros dos —
   forzar el mismo ancho a los tres dejaba la fecha ilegible. Con
   minmax(190px, 1fr) cada campo coge el sitio que le hace falta, y si de
   verdad no cabe salta a la fila siguiente en vez de aplastarse. */
@media (min-width: 861px) {
  .pool-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
  .pool-card__campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
  .pool-card__campos > .field { min-width: 0; margin-bottom: 0; }
}

.pool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}

/* Un pelín de vida al pasar el ratón: nada dice "esto es una fila
   interactiva" mejor que reaccionar al acercarte, aunque el clic de
   verdad esté en los botones de dentro. */
.pool-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.pool-card__name { font-weight: 600; }
.pool-card__meta { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

/* La última nota, visible en la propia tarjeta: para saber "por qué está
   parado" no debería hacer falta abrir el historial de cada negocio. */
.pool-card__nota {
  font-size: 12px;
  color: var(--text-soft);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- "Más": cuadrícula de secciones, no una lista de botones ---------- */
.mas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mas-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease;
}
.mas-grid__item:active {
  transform: scale(.95);
  box-shadow: var(--shadow-hover);
  transition-duration: .05s;
}

.mas-grid__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* ---------- Ficha de negocio a pantalla completa ---------- */
/* Superposición sobre la pantalla actual (ver abrirFichaNegocio en app.js):
   no es un cambio de ruta, así que lo de debajo (filtros, página, scroll de
   Pipeline) se queda tal cual mientras está abierta y vuelve a aparecer tal
   cual al cerrarla, sin recargar nada. */
.ficha-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 28px 64px;
}
.ficha-overlay__card { max-width: 640px; margin: 0 auto; }

@media (min-width: 861px) {
  /* En escritorio no es una página a todo lo ancho: con poco contenido
     (un prospecto recién detectado, sin historial) una página entera solo
     repartía el vacío por toda la pantalla en vez de quitarlo. Un panel
     centrado, del tamaño de lo que hay dentro, con el resto atenuado
     detrás, se siente compacto tenga el negocio mucho o poco que contar —
     como el modal de "Detalles" ya usa, pero a pantalla parcial en vez de
     una ventanita. */
  .ficha-overlay {
    background: rgba(8, 10, 14, .55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 56px 24px;
  }
  .ficha-overlay__card {
    max-width: 720px;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-hover);
    padding: 28px 32px 36px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
  }
}

@media (max-width: 860px) {
  .ficha-overlay {
    padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

.ficha-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
  text-align: center;
}

.ficha-hero__avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 85%, white 15%), var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', var(--font);
  font-weight: 650;
  font-size: 19px;
  box-shadow: var(--shadow-hover);
}

.ficha-hero__name {
  font-family: 'Poppins', var(--font);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.ficha-hero__meta { font-size: 12.5px; color: var(--text-faint); }

.ficha-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 4px;
  margin: 10px 0 16px;
}

.ficha-quick__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.ficha-quick__item:disabled { cursor: not-allowed; opacity: .35; }

.ficha-quick__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease;
}

.ficha-quick__item:not(:disabled):active .ficha-quick__icon {
  transform: scale(.88);
  transition-duration: .05s;
}

/* Cada acción con su propio tinte: de un vistazo se distingue "comunicar"
   de "gestionar", en vez de cuatro círculos grises iguales. */
.ficha-quick__icon[data-tone="ok"] { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.ficha-quick__icon[data-tone="accent"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ficha-quick__icon[data-tone="warn"] { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.ficha-quick__label { font-size: 10.5px; font-weight: 600; color: var(--text-soft); }

.ficha-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}
.ficha-info-row + .ficha-info-row { border-top: 1px solid var(--border); }
.ficha-info-row__label { font-size: 12px; color: var(--text-faint); flex: none; }
.ficha-info-row select,
.ficha-info-row .row { max-width: 220px; }

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 13, 18, .5);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50;
}

.modal {
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
}

.modal__body { padding: 20px; }

.modal__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  position: sticky;
  bottom: 0;
  background: var(--surface);
}

.modal__close {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0 4px;
}

/* ---------- Avisos y estados ---------- */

.notice {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.notice--error { background: var(--bad-soft); color: var(--bad); }
.notice--warn { background: var(--warn-soft); color: var(--warn); }
.notice--ok { background: var(--ok-soft); color: var(--ok); }

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

.section { margin-bottom: 28px; }
.section__head { margin-bottom: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* ---------- Actividad del equipo (Equipo, vista propietario) ---------- */
.actividad-feed { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; }
.actividad-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 10px 12px;
}
.actividad-item__cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.actividad-item__negocio {
  font-weight: 600;
  cursor: pointer;
}
.actividad-item__negocio:hover { color: var(--accent); }
.actividad-item__nota { font-size: 13.5px; margin-top: 4px; }
.muted { color: var(--text-faint); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Móvil ---------- */

/* .tabbar vive siempre en el DOM (app.js la rellena igual en cualquier
   ancho) pero solo se ve en móvil — en escritorio manda el menú lateral. */
.tabbar { display: none; }

@media (max-width: 860px) {
  /* Alto real de la barra de pestañas, más el hueco de la barra de
     inicio del móvil (home indicator) cuando el panel se abre como app. */
  :root { --tabbar-h: calc(58px + env(safe-area-inset-bottom, 0px)); }

  .shell { grid-template-columns: 1fr; }

  /* El menú lateral entero se sustituye por la barra de pestañas de
     abajo — nada de comprimirlo en una fila de chips arriba: es el
     patrón que reconoce el pulgar como "esto es una app", no un menú de
     página web. */
  .sidebar { display: none; }

  .main {
    padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(20px + var(--tabbar-h));
  }
  .field-row { grid-template-columns: 1fr; }

  /* Objetivo táctil más grande: con el ratón 36px sobra, con el pulgar no. */
  .btn { padding: 11px 16px; }
  .btn--sm { padding: 8px 12px; }

  /* El textarea y el botón de "Añadir" apretados en una fila quedan
     minúsculos en el móvil; mejor uno debajo del otro. */
  .notas__nueva { flex-direction: column; align-items: stretch; }
  .notas__nueva .btn { align-self: flex-end; }

  /* Los filtros del Pipeline (Estado, buscador) se quedan a la vista al
     bajar por la lista de negocios — ya no hay una barra de navegación
     fija arriba de la que colgar, así que solo respeta el notch. */
  .filtros-fijos {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 15;
    background: var(--bg);
    margin: 0 -14px 14px;
    padding: 10px 14px 4px;
    border-bottom: 1px solid var(--border);
  }

  /* En algunos móviles el placeholder nativo de type="date" (dd/mm/aaaa)
     mide más que el ancho disponible dentro de una tarjeta y sobresale por
     la derecha. min-width:0 deja que se encoja de verdad dentro de su
     contenedor, y un pelín menos de padding le da el margen que le falta. */
  input[type="date"] { min-width: 0; padding-right: 6px; }

  .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 8px rgba(18, 22, 28, .06);
  }
  .tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    font-family: inherit;
    color: var(--text-faint);
    cursor: pointer;
    padding: 5px 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    transition: color .12s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1);
  }
  .tabbar__item:active { transform: scale(.92); transition-duration: .05s; }
  .tabbar__item.is-active { color: var(--accent); }
  .tabbar__icon { font-size: 19px; line-height: 1; }
  .tabbar__label { font-size: 10px; font-weight: 650; }

  /* Tablas -> tarjetas apiladas: en vez de obligar a deslizar en
     horizontal para ver las columnas de más a la derecha, cada fila se
     lee de un vistazo como una mini ficha (etiqueta a la izquierda, valor
     a la derecha) — igual que ya se siente el resto de la app en móvil.
     Las celdas se etiquetan solas con el texto real de la cabecera (ver
     etiquetarTabla en app.js): no hace falta tocar ninguna tabla del
     panel una a una. */
  .table-wrap { overflow-x: visible; border: none; box-shadow: none; background: transparent; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 10px;
    overflow: hidden;
  }
  .table-wrap tbody tr:last-child { margin-bottom: 0; }
  .table-wrap td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    white-space: normal;
    text-align: right;
  }
  .table-wrap tr td:last-child { border-bottom: none; }
  .table-wrap td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-faint);
    flex: none;
    text-align: left;
  }
  .table-wrap td:empty { display: none; }
  /* Columnas sin cabecera de verdad (la del checkbox "seleccionar todos",
     por ejemplo) — sin etiqueta que las empuje, se alinean a la
     izquierda en vez de quedar centradas por el space-between. */
  .table-wrap td:not([data-label]) { justify-content: flex-start; }
  .table-wrap td:not([data-label])::before { content: none; }
}

/* Aviso de error flotante para acciones sueltas (ver avisoError en db.js):
   antes esto era un alert() del navegador con el mensaje crudo de Postgres. */
.aviso-flotante {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(560px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

/* Foco visible también en botones y navegación, no solo en los campos:
   tabulando no se sabía dónde estabas. */
.btn:focus-visible,
.nav__item:focus-visible,
.modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}