/* Mini CRM · Raíz Inmobiliaria (marca ficticia) — tema oscuro verde jade */
:root {
  --fondo: #090D0B;
  --superficie: #0F1512;
  --superficie-2: #151D19;
  --borde: rgba(220, 255, 235, .08);
  --texto: #EEF5F0;
  --suave: #9AAAA1;
  --tenue: #5F6E66;
  --acento: #3ECF8E;
  --acento-2: #B7E35A;
  --acento-texto: #03140C;
  --radio: 14px;
  --lateral: 236px;
  --navegacion-movil: 64px;
}

.crm { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: calc(100vh - var(--barra-alto)); }

/* ── Barra lateral ─────────────────────────────────────────────────── */
.lateral {
  position: sticky; top: var(--barra-alto); height: calc(100vh - var(--barra-alto));
  display: flex; flex-direction: column; gap: 22px; padding: 22px 14px;
  border-right: 1px solid var(--borde);
  background: linear-gradient(180deg, rgba(62, 207, 142, .05), transparent 40%), var(--superficie);
}
.marca { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.marca-logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--acento-texto); background: linear-gradient(140deg, var(--acento), var(--acento-2)); box-shadow: 0 8px 22px -10px var(--acento); }
.marca-logo svg { width: 20px; height: 20px; }
.marca-texto { display: grid; line-height: 1.15; }
.marca-texto strong { font-size: 17px; letter-spacing: -.03em; }
.marca-texto small { font-size: 11.5px; color: var(--suave); }
.nav { display: grid; gap: 4px; }
.nav-btn {
  position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px;
  border: 0; border-radius: 10px; background: transparent; color: var(--suave); font-weight: 500; text-align: left;
  transition: background .2s, color .2s;
}
.nav-btn:hover { background: var(--superficie-2); color: var(--texto); }
.nav-btn[aria-current] { background: color-mix(in srgb, var(--acento) 12%, transparent); color: var(--texto); }
.nav-btn[aria-current]::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); animation: entra-barra .35s var(--ease); }
.nav-btn[aria-current] .icono { color: var(--acento); }
.nav-cuenta { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font-size: 11.5px; background: var(--superficie-2); color: var(--texto); }
.usuario { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borde); }
.usuario strong { display: block; font-size: 13.5px; }
.usuario small { color: var(--suave); font-size: 12px; }
@keyframes entra-barra { from { transform: scaleY(0); } }

/* ── Avatares ─────────────────────────────────────────────────────── */
.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: #fff; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.avatar.chico { width: 24px; height: 24px; font-size: 10px; }
.avatar.grande { width: 56px; height: 56px; font-size: 19px; }

/* ── Área principal ───────────────────────────────────────────────── */
.principal { min-width: 0; padding: 28px clamp(16px, 3vw, 36px) 24px; }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cabecera h1 { font-size: clamp(24px, 3vw, 30px); font-weight: 600; }
.cabecera .sub { color: var(--suave); margin-top: 4px; font-size: 14px; }
.contenido { min-height: 60vh; }
.etiqueta { color: var(--tenue); }
.pastilla .punto, .kol-cab .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.pastilla.mini { height: 20px; font-size: 11px; padding: 0 7px; }
.enlace { padding: 0; border: 0; background: none; color: var(--texto); font-weight: 500; text-align: left; }
.enlace:hover { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.ayuda { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 13px; margin-bottom: 14px; }

/* Panel */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.kpi { padding: 18px; display: grid; gap: 8px; position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acento) 14%, transparent), transparent); pointer-events: none; }
.kpi-top { display: flex; justify-content: space-between; align-items: center; }
.kpi-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); }
.kpi-valor { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.03em; }
.kpi small { color: var(--suave); font-size: 12.5px; }
.panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.panel-sk .kpi { min-height: 120px; }
.caja { padding: 20px; min-width: 0; }
.caja-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.caja-cab h2 { font-size: 16px; font-weight: 600; }
.barras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; height: 200px; align-items: end; }
.barra-col { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 6px; text-align: center; }
.barra-col .barra { align-self: end; height: var(--alto); border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--acento), color-mix(in srgb, var(--acento) 25%, transparent)); transform-origin: bottom; animation: crecer .9s var(--ease) both; animation-delay: calc(200ms + var(--d)); }
.barra-col:last-child .barra { background: linear-gradient(180deg, var(--acento-2), var(--acento)); box-shadow: 0 0 24px -6px var(--acento); }
.barra-val { font-size: 11.5px; color: var(--suave); }
.barra-mes { font-size: 12px; color: var(--tenue); text-transform: capitalize; }
@keyframes crecer { from { transform: scaleY(0); } }
.embudo { display: grid; gap: 14px; }
.embudo-fila { display: grid; grid-template-columns: 120px 1fr 28px; align-items: center; gap: 12px; font-size: 13.5px; color: var(--suave); }
.embudo-fila b { color: var(--texto); text-align: right; }
.embudo-pista { height: 10px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.embudo-barra { height: 100%; width: min(var(--ancho), 100%); border-radius: inherit; background: var(--c); transform-origin: left; animation: ensanchar 1s var(--ease) both; animation-delay: calc(250ms + var(--d)); }
@keyframes ensanchar { from { transform: scaleX(0); } }
.lista-act, .mini-tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lista-act li { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.lista-act li:last-child { border-bottom: 0; }
.lista-act p { color: var(--suave); font-size: 13px; margin-top: 2px; }
.lista-act time, .mini-tareas time { font-size: 12px; color: var(--tenue); white-space: nowrap; }
.act-ico, .lt-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--superficie-2); color: var(--suave); border: 1px solid var(--borde); }
.t-llamada .lt-ico, .act-ico.t-llamada { color: #60A5FA; }
.t-correo .lt-ico, .act-ico.t-correo { color: #F5B841; }
.t-visita .lt-ico, .act-ico.t-visita { color: #A78BFA; }
.t-etapa .lt-ico, .act-ico.t-etapa, .t-alta .lt-ico, .act-ico.t-alta { color: var(--acento); }
.mini-tareas li { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.mini-tareas li:last-child { border-bottom: 0; }
.prio { width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); }
.prio.p-alta { background: var(--error); box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 18%, transparent); }

/* ── Kanban ───────────────────────────────────────────────────────── */
.tablero {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 12px; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--superficie-2) transparent;
}
.kol { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; min-height: 420px; padding: 12px; border-radius: var(--radio); background: color-mix(in srgb, var(--superficie) 70%, transparent); border: 1px solid var(--borde); transition: border-color .2s, background .2s, box-shadow .2s; }
.kol.destino { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 6%, var(--superficie)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.kol-cab { display: grid; gap: 6px; padding: 2px 4px 8px; border-bottom: 1px solid var(--borde); }
.kol-cab > div { display: flex; align-items: center; gap: 8px; }
.kol-cab h2 { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.kol-n { margin-left: auto; font-size: 12px; color: var(--suave); background: var(--superficie-2); border-radius: 99px; padding: 1px 8px; }
.kol-total { font-size: 17px; font-weight: 600; letter-spacing: -.02em; border-radius: 6px; }
.kol-total.pulso { animation: pulso .9s var(--ease); }
@keyframes pulso { 0% { color: var(--c); text-shadow: 0 0 18px var(--c); } 100% { color: var(--texto); text-shadow: none; } }
.kol-lista { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 80px; }
.vacia { margin: 0; padding: 22px 10px; text-align: center; font-size: 12.5px; color: var(--tenue); border: 1px dashed var(--borde); border-radius: 12px; }
.trato {
  position: relative; padding: 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borde);
  cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 6px 16px -10px rgba(0, 0, 0, .6);
  transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.trato::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); opacity: .8; }
.trato:hover { border-color: color-mix(in srgb, var(--texto) 18%, transparent); transform: translateY(-1px); }
.trato.presionada { transform: scale(.97); transition-duration: .26s; }
.trato.arrastrada { display: none; }
.trato.cae { animation: caer .45s var(--ease); }
.trato.recien { animation: recien 2.4s var(--ease); }
@keyframes caer { 0% { transform: scale(1.04); box-shadow: 0 0 0 2px var(--c); } 100% { transform: none; } }
@keyframes recien { 0%, 60% { box-shadow: 0 0 0 2px var(--acento), 0 0 30px -6px var(--acento); } 100% { box-shadow: none; } }
.trato-top { display: grid; gap: 1px; }
.trato-top strong { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.trato-zona { font-size: 12px; color: var(--suave); }
.trato-valor { margin: 8px 0 10px; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.trato-pie { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--suave); }
.trato-pie span:not(.avatar) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trato-pie time { margin-left: auto; color: var(--tenue); white-space: nowrap; }
.trato-fantasma { position: fixed; left: 0; top: 0; z-index: 1200; margin: 0; pointer-events: none; cursor: grabbing; box-shadow: 0 24px 50px -14px rgba(0, 0, 0, .8), 0 0 0 1px color-mix(in srgb, var(--acento) 50%, transparent); transition: none; }
.trato-fantasma.aterriza { transition: transform .18s var(--ease); }
.hueco { border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--acento) 55%, transparent); background: color-mix(in srgb, var(--acento) 6%, transparent); animation: qa-aparecer .2s; flex: none; }
.tablero.arrastrando, .tablero.arrastrando * { cursor: grabbing; }

/* ── Tabla de contactos ───────────────────────────────────────────── */
.barra-filtros { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.buscador { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 11px; background: var(--superficie); border: 1px solid var(--borde); color: var(--suave); transition: border-color .2s, box-shadow .2s; }
.buscador:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
.buscador input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--texto); }
.conteo { color: var(--suave); font-size: 13px; margin-left: auto; white-space: nowrap; }
.tabla-caja { overflow: hidden; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; padding: 0 14px; height: 44px; font-weight: 500; color: var(--suave); font-size: 12.5px; border-bottom: 1px solid var(--borde); background: color-mix(in srgb, var(--superficie-2) 60%, transparent); }
.orden { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 4px 0; color: inherit; font-weight: 500; }
.orden .flecha { opacity: 0; transition: transform .2s var(--ease), opacity .2s; }
.orden:hover .flecha { opacity: .5; }
th[aria-sort="ascending"] .flecha { opacity: 1; transform: rotate(180deg); color: var(--acento); }
th[aria-sort="descending"] .flecha { opacity: 1; color: var(--acento); }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--texto); }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.fila { cursor: pointer; transition: background .15s; animation: qa-subir .4s var(--ease) both; animation-delay: var(--d); }
.fila:hover { background: color-mix(in srgb, var(--acento) 5%, transparent); }
.fila.recien { animation: qa-resaltar 2s ease-out; }
.celda-nombre { display: flex; align-items: center; gap: 12px; min-width: 0; }
.celda-nombre > div { min-width: 0; display: grid; }
.celda-nombre small, .c-int small { color: var(--suave); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-int span { display: block; }
.c-num { text-align: right; }
th.c-num .orden { flex-direction: row-reverse; }
th.c-num { text-align: right; }
.c-ult, .c-ori { color: var(--suave); white-space: nowrap; }
.filas-sk { display: grid; padding: 6px 0; }
.fila-sk { display: grid; grid-template-columns: 32px 1.2fr .6fr; gap: 16px; align-items: center; padding: 14px; border-bottom: 1px solid var(--borde); }
.vacio { display: grid; justify-items: center; gap: 6px; padding: 40px 16px; color: var(--suave); text-align: center; }
.vacio strong { color: var(--texto); }

/* ── Cajón lateral (ficha) ────────────────────────────────────────── */
.cajon-velo { position: fixed; inset: 0; z-index: 1040; background: rgba(2, 6, 4, .55); backdrop-filter: blur(3px); animation: qa-aparecer .25s ease both; }
.cajon-velo.sale { animation: qa-desaparecer .26s ease both; }
.cajon-velo.sale .cajon { animation: salir-cajon .26s ease-in both; }
.cajon {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(460px, 100%);
  display: flex; flex-direction: column; background: var(--superficie); border-left: 1px solid var(--borde);
  box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .8); animation: entrar-cajon .38s var(--ease) both;
}
@keyframes entrar-cajon { from { transform: translateX(100%); } }
@keyframes salir-cajon { to { transform: translateX(100%); } }
.cajon-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--borde); }
.cajon-cuerpo { flex: 1; overflow-y: auto; padding: 22px 20px 32px; display: flex; flex-direction: column; gap: 18px; }
.cajon-cuerpo.escalonado { display: flex; }
.cajon-cuerpo > * { flex: none; }
.icono-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto); transition: transform .15s; }
.icono-btn:active { transform: scale(.94); }
.ficha-sk { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.ficha-cab { display: flex; align-items: center; gap: 14px; }
.ficha-cab h2 { font-size: 21px; font-weight: 600; }
.ficha-cab p { color: var(--suave); font-size: 13px; margin-top: 4px; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--borde); background: var(--borde); }
.ficha-datos > div { background: var(--superficie-2); padding: 10px 12px; min-width: 0; }
.ficha-datos .ancho { grid-column: 1 / -1; }
.ficha-datos dt { font-size: 11.5px; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono); }
.ficha-datos dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.ficha-datos select { height: 36px; margin-top: 4px; }
.ficha-h3 { font-size: 15px; font-weight: 600; margin-top: 4px; }
.form-nota { display: grid; gap: 8px; justify-items: end; }
.form-nota textarea { min-height: 64px; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px; background: var(--borde); }
.linea-tiempo li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 8px 0; animation: qa-subir .45s var(--ease) both; }
.linea-tiempo li:nth-child(2) { animation-delay: 60ms; } .linea-tiempo li:nth-child(3) { animation-delay: 120ms; }
.linea-tiempo li:nth-child(4) { animation-delay: 180ms; } .linea-tiempo li:nth-child(n+5) { animation-delay: 240ms; }
.linea-tiempo li.nuevo .lt-ico { box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 25%, transparent); border-color: var(--acento); }
.linea-tiempo li.nuevo { animation: nuevo-evento .6s var(--ease) both; }
@keyframes nuevo-evento { from { opacity: 0; transform: translateX(-12px) scale(.98); } }
.lt-ico { position: relative; z-index: 1; background: var(--superficie); }
.linea-tiempo p { font-size: 14px; }
.linea-tiempo time { font-size: 12px; color: var(--tenue); }

/* ── Tareas ───────────────────────────────────────────────────────── */
.progreso { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 20px; padding: 18px 20px; margin-bottom: 14px; }
.progreso p { color: var(--suave); font-size: 13.5px; margin-top: 2px; }
.progreso > strong { font-size: 28px; font-weight: 600; letter-spacing: -.03em; }
.progreso-pista { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.progreso-barra { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--acento), var(--acento-2)); transition: width .8s var(--ease); animation: ensanchar .9s var(--ease); transform-origin: left; }
.nueva-tarea { display: flex; gap: 10px; margin-bottom: 20px; }
.grupo { margin-bottom: 20px; }
.grupo > h2 { font-size: 11.5px; font-weight: 500; margin: 0 0 8px 4px; letter-spacing: .08em; }
.lista-tareas { list-style: none; margin: 0; padding: 4px 0; }
.tarea { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--borde); animation: qa-subir .4s var(--ease) both; }
.tarea:last-child { border-bottom: 0; }
.tarea-txt { display: grid; gap: 3px; min-width: 0; }
.tarea-txt > span { position: relative; width: fit-content; max-width: 100%; transition: color .3s; }
.tarea-txt > span::after { content: ""; position: absolute; left: 0; top: 52%; height: 1.5px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.tarea.hecha .tarea-txt > span { color: var(--tenue); }
.tarea.hecha .tarea-txt > span::after { transform: scaleX(1); }
.tarea-txt small { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--suave); }
.tarea-txt small .enlace { font-weight: 400; color: var(--suave); }
.tarea time { font-size: 12.5px; color: var(--suave); white-space: nowrap; }
.tarea time.vencida { color: var(--error); }
.check { width: 26px; height: 26px; padding: 0; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--texto) 28%, transparent); background: transparent; color: var(--acento-texto); display: grid; place-items: center; transition: background .25s var(--ease), border-color .25s, transform .2s var(--ease); }
.check:hover { border-color: var(--acento); }
.check:active { transform: scale(.88); }
.check svg { width: 18px; height: 18px; }
.check path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .35s var(--ease) .05s; }
.check[aria-checked="true"] { background: var(--acento); border-color: var(--acento); animation: rebote .4s var(--ease); }
.check[aria-checked="true"] path { stroke-dashoffset: 0; }
@keyframes rebote { 40% { transform: scale(1.18); } }

/* ── Modal nuevo prospecto ────────────────────────────────────────── */
.form-nuevo { padding: 22px; display: grid; gap: 20px; }
.dialogo-cab { display: flex; gap: 14px; align-items: center; }
.dialogo-cab h2 { font-size: 19px; font-weight: 600; }
.dialogo-cab p { color: var(--suave); font-size: 13.5px; margin-top: 3px; }
.dialogo-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); flex: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.error-txt { color: var(--error); font-size: 12px; min-height: 0; }
.error-txt:empty { display: none; }
.ayuda-txt { color: var(--tenue); font-size: 12px; }
.error-txt:not(:empty) + .ayuda-txt { display: none; }
.dialogo-pie { display: flex; justify-content: flex-end; gap: 10px; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-ori { display: none; }
}
@media (max-width: 980px) { .panel-grid { grid-template-columns: minmax(0, 1fr); } .c-int { display: none; } }
@media (max-width: 860px) {
  .crm { grid-template-columns: minmax(0, 1fr); }
  body { padding-bottom: calc(var(--navegacion-movil) + env(safe-area-inset-bottom)); }
  .lateral {
    position: fixed; inset: auto 0 0 0; top: auto; height: calc(var(--navegacion-movil) + env(safe-area-inset-bottom)); z-index: 900;
    flex-direction: row; padding: 6px 8px env(safe-area-inset-bottom); gap: 0;
    border-right: 0; border-top: 1px solid var(--borde);
    background: color-mix(in srgb, var(--superficie) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .marca, .usuario { display: none; }
  .nav { flex: 1; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .nav-btn { flex-direction: column; justify-content: center; gap: 3px; height: 52px; padding: 0 4px; font-size: 11.5px; }
  .nav-btn[aria-current] { background: transparent; color: var(--acento); }
  .nav-btn[aria-current]::before { left: 30%; right: 30%; top: -6px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .nav-cuenta { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; min-width: 18px; height: 17px; font-size: 10.5px; background: var(--acento); color: var(--acento-texto); }
  .principal { padding: 20px 16px 8px; }
  .qa-avisos { bottom: calc(var(--navegacion-movil) + 12px + env(safe-area-inset-bottom)); }
  .cabecera { margin-bottom: 18px; }
  .c-ult { display: none; }
  .tablero { grid-auto-columns: 82%; margin: 0 -16px; padding: 0 16px 12px; scroll-padding: 0 16px; }
}
@media (max-width: 560px) {
  .cabecera .btn .txt, .nueva-tarea .txt { display: none; }
  .cabecera .btn, .nueva-tarea .btn { width: 44px; padding: 0; flex: none; }
  .kpis { gap: 10px; }
  .kpi { padding: 14px; }
  .kpi small { font-size: 11.5px; }
  .tabla td, .tabla th { padding-left: 10px; padding-right: 10px; }
  .tabla td:first-child, .tabla th:first-child { padding-left: 14px; }
  .celda-nombre .avatar { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .embudo-fila { grid-template-columns: 96px 1fr 22px; font-size: 12.5px; }
  .lista-act li { grid-template-columns: 32px 1fr; }
  .lista-act time { grid-column: 2; }
  .barras { gap: 6px; }
  .tarea { padding: 12px; gap: 12px; grid-template-columns: 26px 1fr; }
  .tarea time { grid-column: 2; }
}