/* Stella CRM · look Post-it. Colores y materiales del skill stella-crm (04-diseno.md).
   Regla principal: solo las etapas llevan color. Todo lo demás es tinta sobre crema. */

:root {
  --tinta: #1d1611;
  --tinta-suave: #6f6862;
  --fondo: #f6f5f2;
  --papel: #ffffff;
  --borde: #e6e4df;
  --bandeja: #efeeea;
  --hundido: #ecebe7;
  --vencido: #fecaca;
  --r-postit: 3px;
  --r-tarjeta: 16px;
  --r-grande: 22px;
  --fuente: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --resorte: cubic-bezier(0.34, 1.4, 0.64, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fondo);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; }
h1 { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
p { margin: 0 0 8px; }
.suave { color: var(--tinta-suave); }
button, input, select, textarea { font: inherit; color: inherit; }

/* ——— Materiales ——— */
.relieve {
  background: linear-gradient(#fff, #f6f6f4);
  border: 1px solid var(--borde);
  box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgb(29 22 17 / 0.08), 0 2px 6px rgb(29 22 17 / 0.04);
}
.relieve-tinta {
  background: linear-gradient(#454545, #0f0f0f);
  color: #fff;
  border: 1px solid #0f0f0f;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset, 0 1px 3px rgb(0 0 0 / 0.25);
}
.hundido {
  background: var(--hundido);
  border: 1px solid transparent;
  box-shadow: inset 0 1px 2px rgb(29 22 17 / 0.1);
}
.bandeja { background: var(--bandeja); }
.papel { background: var(--papel); border: 1px solid var(--borde); }
.color-relieve {
  background: linear-gradient(color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  border: 1px solid color-mix(in srgb, var(--c) 70%, #1d1611 12%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 1px 2px rgb(29 22 17 / 0.1);
}
.color-hundido {
  background: color-mix(in srgb, var(--c) 55%, var(--hundido));
  box-shadow: inset 0 1px 1px rgb(29 22 17 / 0.08);
}
.relieve, .relieve-tinta, .color-relieve, .postit, .chip-btn {
  transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
.relieve:active, .relieve-tinta:active, .color-relieve:active, .chip-btn:active { transform: translateY(1px); }

/* ——— Controles ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.btn.ancho { width: 100%; }
input.hundido, select.hundido, textarea.hundido {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
  outline: none;
}
textarea.hundido { resize: vertical; }
input.hundido:focus, select.hundido:focus, textarea.hundido:focus { border-color: var(--tinta); }
label { display: grid; gap: 4px; font-weight: 500; font-size: 13px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.pila { display: grid; gap: 12px; }
.fila-campos { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 10px; }
.fila-campos label { flex: 1 1 160px; }
.fila-campos > input.hundido { width: auto; flex: 0 1 190px; }
.fila-botones { display: flex; justify-content: end; gap: 8px; }
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.ancho-total { grid-column: 1 / -1; }
.ico { flex: none; }

.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.chip-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
  opacity: 0.75;
}
.chip-btn.on { opacity: 1; outline: 2px solid var(--tinta); outline-offset: 1px; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--hundido);
  font-size: 11px;
  font-weight: 500;
}
.tag-vencido { background: var(--vencido); }
.tag-hoy { background: #fde8c4; }
.tag-urgente { background: var(--tinta); color: #fff; }
.tag-bien { background: #d7f3e1; }

/* ——— Estructura ——— */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: rgb(246 245 242 / 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.marca { display: grid; text-decoration: none; line-height: 1.15; }
.marca strong { font-size: 15px; }
.marca span { font-size: 12px; color: var(--tinta-suave); }
.tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; }
.tabs a {
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--tinta-suave);
  font-weight: 500;
}
.tabs a.on { color: var(--tinta); }
.top .tabs { margin: 0 auto; }
.top-der { display: flex; align-items: center; gap: 8px; }
.menu { position: relative; }
.menu summary {
  list-style: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-weight: 600;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-hoja {
  position: absolute;
  right: 0;
  top: 46px;
  min-width: 200px;
  padding: 8px;
  border-radius: var(--r-tarjeta);
  display: grid;
  box-shadow: 0 12px 32px rgb(29 22 17 / 0.12);
}
.menu-hoja a, .menu-hoja button {
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.menu-hoja a:hover, .menu-hoja button:hover { background: var(--bandeja); }
.menu-nombre { padding: 8px 12px; color: var(--tinta-suave); font-size: 12px; }

.main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 20px; }
.v-tablero .main { max-width: none; }
.encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.encabezado > div:first-child { flex: 1; }
.bloque { margin-top: 28px; }

/* La firma: el filito al pie de cada pantalla. */
.firma {
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde);
  font-size: 11px;
  color: var(--tinta-suave);
  text-align: center;
  letter-spacing: 0.01em;
}

.aviso {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 60;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
  animation: aviso 3.6s ease forwards;
}
.aviso-error { background: #7a1f1f; }
@keyframes aviso {
  0% { opacity: 0; transform: translate(-50%, 12px); }
  8%, 85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 8px); visibility: hidden; }
}

/* ——— Hoy y Lista ——— */
.lista-hoy { display: grid; gap: 8px; }
.renglon {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px 12px 0;
  border-radius: var(--r-tarjeta);
  text-decoration: none;
  overflow: hidden;
}
.renglon:hover { border-color: #d6d3cc; }
.renglon-color { width: 5px; border-radius: 0 3px 3px 0; background: var(--c); flex: none; }
.renglon-cuerpo { flex: 1; display: grid; gap: 3px; min-width: 0; }
.renglon-arriba { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.renglon-arriba strong { font-size: 15px; }
.renglon-medio { color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.renglon-abajo { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--tinta-suave); align-items: center; }
.renglon-por { color: var(--tinta); font-weight: 600; }
.renglon-tel { align-self: center; font-variant-numeric: tabular-nums; color: var(--tinta-suave); white-space: nowrap; }

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; flex: 1; min-width: 260px; }
.buscar { display: flex; align-items: center; gap: 8px; flex: 1; padding: 0 12px; border-radius: 999px; min-height: 40px; min-width: 180px; }
.buscar input { border: 0; background: none; outline: none; flex: 1; min-width: 0; min-height: 38px; }
.filtros-mas { position: relative; }
.filtros-mas summary { list-style: none; min-height: 40px; padding: 0 16px; border-radius: 999px; display: flex; align-items: center; cursor: pointer; font-weight: 500; }
.filtros-mas summary::-webkit-details-marker { display: none; }
.filtros-hoja {
  position: absolute;
  z-index: 30;
  top: 48px;
  right: 0;
  width: 300px;
  padding: 16px;
  border-radius: var(--r-grande);
  display: grid;
  gap: 12px;
  box-shadow: 0 16px 40px rgb(29 22 17 / 0.14);
}
.filtros-acciones { display: flex; justify-content: end; gap: 8px; }

.tabla-marco { overflow-x: auto; border-radius: var(--r-tarjeta); }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--borde); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr[data-href] { cursor: pointer; }
.tabla tbody tr[data-href]:hover { background: #fbfaf8; }
.tabla a { text-decoration: none; font-weight: 600; }
.lista-cel { display: none; }

/* ——— Ayuda por etapa ——— */
.ayuda { position: relative; }
.ayuda summary { list-style: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; }
.ayuda summary::-webkit-details-marker { display: none; }
.ayuda-hoja {
  position: absolute;
  right: 0;
  top: 48px;
  z-index: 30;
  width: min(420px, calc(100vw - 32px));
  padding: 16px;
  border-radius: var(--r-grande);
  box-shadow: 0 16px 40px rgb(29 22 17 / 0.14);
  display: grid;
  gap: 8px;
}
.ayuda-hoja p { margin: 0; }

/* ——— Tablero ——— */
.tv { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; }
.tv button { min-width: 36px; height: 36px; border-radius: 999px; cursor: pointer; padding: 0 10px; display: grid; place-items: center; }
.tv span { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; }
.tablero-marco { overflow: auto; margin: 0 -20px; padding: 0 20px 20px; }
.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: 260px; gap: 12px; align-items: stretch; transform-origin: 0 0; min-height: calc(100dvh - 190px); }
.columna { border-radius: var(--r-tarjeta); padding: 10px; min-height: 200px; display: flex; flex-direction: column; }
.columna .columna-cuerpo { flex: 1; align-content: start; }
.columna-cabeza { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; }
.columna-cabeza h2 { margin: 0; font-size: 14px; flex: 1; }
.columna-punto { width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(29 22 17 / 0.12); }
.columna-cuenta { font-size: 12px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.columna-ayuda { font-size: 11px; color: var(--tinta-suave); margin: 0 4px 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.columna-cuerpo { display: grid; gap: 10px; min-height: 120px; padding: 2px; border-radius: 10px; }
.columna-cuerpo.encima { background: color-mix(in srgb, var(--c) 30%, transparent); }

.postit {
  display: grid;
  gap: 4px;
  padding: 12px 12px 10px;
  border-radius: var(--r-postit);
  background: var(--c);
  text-decoration: none;
  transform: rotate(var(--giro));
  box-shadow: 0 1px 1px rgb(29 22 17 / 0.08), 0 4px 10px -4px rgb(29 22 17 / 0.25);
  cursor: grab;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.postit:hover { transform: rotate(0deg) translateY(-1px); }
.postit-nombre { font-weight: 600; font-size: 14px; }
.postit-linea { font-size: 12px; }
.postit-origen { font-size: 11px; color: rgb(29 22 17 / 0.62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.postit-pie { display: flex; justify-content: space-between; font-size: 11px; color: rgb(29 22 17 / 0.62); }
.postit .tag { background: rgb(255 255 255 / 0.55); }
.postit .tag-vencido { background: var(--vencido); }
.postit .tag-urgente { background: var(--tinta); }
.postit.arrastrando {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  cursor: grabbing;
  transform: rotate(2deg) scale(1.03);
  box-shadow: 0 18px 40px -8px rgb(29 22 17 / 0.4);
  transition: none;
}
.postit-hueco { border: 2px dashed rgb(29 22 17 / 0.18); border-radius: var(--r-postit); }
.puntos-cel { display: none; }
body.tv-completo .top, body.tv-completo .firma, body.tv-completo .encabezado .filtros { display: none; }

/* ——— Ficha ——— */
.volver { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--tinta-suave); margin-bottom: 12px; }
.ficha { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.ficha-cabeza { border-radius: var(--r-grande); padding: 20px; border-top: 6px solid var(--c); }
.ficha-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.contacto { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ficha-bloque { border-radius: var(--r-grande); padding: 18px 20px; }
.ficha-bloque.angosto { max-width: 760px; margin: 0 auto 12px; }
.ficha-bloque h1 { margin-bottom: 6px; }
.etapas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.datos { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 6px 16px; margin: 0; }
.datos dt { color: var(--tinta-suave); }
.datos dd { margin: 0; }
.datos.origen { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde); }
.historial { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.historial li { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--borde); }
.historial-cuando { font-size: 12px; color: var(--tinta-suave); }
.historial-texto { display: block; white-space: pre-wrap; }
.acciones-cel { display: none; }

.hoja {
  width: min(480px, calc(100vw - 24px));
  border-radius: var(--r-grande);
  padding: 22px;
  box-shadow: 0 24px 60px rgb(29 22 17 / 0.25);
}
.hoja::backdrop { background: rgb(29 22 17 / 0.28); }
.opciones { display: grid; gap: 6px; }
.opcion { flex-direction: row; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; cursor: pointer; font-weight: 400; }
.opcion:has(input:checked) { outline: 2px solid var(--tinta); }

/* ——— Métricas ——— */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.tarjeta { border-radius: var(--r-grande); padding: 16px 18px; display: grid; gap: 2px; }
.tarjeta-n { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.embudo, .barras { display: grid; gap: 8px; }
.embudo-fila, .barras-fila { display: grid; grid-template-columns: 120px 1fr 90px; align-items: center; gap: 10px; }
.barras-fila { grid-template-columns: 90px 1fr 32px; font-size: 12px; }
.embudo-barra { height: 22px; border-radius: 6px; overflow: hidden; display: block; }
.embudo-barra > span { display: block; height: 100%; border-radius: 6px; }
.embudo-n { font-variant-numeric: tabular-nums; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; }
.ficha-bloque + .ficha-bloque { margin-top: 0; }
.v-metricas .ficha-bloque { margin-bottom: 12px; }

/* ——— Equipo y entrada ——— */
.equipo { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.equipo li { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.equipo li.apagado { opacity: 0.5; }
.auth .main { display: grid; place-items: center; }
.auth-caja { width: min(400px, 100%); border-radius: var(--r-grande); padding: 28px; display: grid; gap: 8px; }
.auth-marca { font-size: 12px; color: var(--tinta-suave); margin: 0; }
.vacio { text-align: center; padding: 60px 0; display: grid; gap: 16px; justify-items: center; }

/* ——— Animación de entrada ——— */
.cascada > * { animation: entra 360ms var(--resorte) both; }
.cascada > *:nth-child(2) { animation-delay: 30ms; }
.cascada > *:nth-child(3) { animation-delay: 60ms; }
.cascada > *:nth-child(4) { animation-delay: 90ms; }
.cascada > *:nth-child(5) { animation-delay: 120ms; }
.cascada > *:nth-child(n + 6) { animation-delay: 150ms; }
@keyframes entra { from { opacity: 0.35; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ——— Celular: cambia la forma de recorrer, no solo el tamaño ——— */
.barra-cel { display: none; }
@media (max-width: 767px) {
  body { font-size: 15px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  input.hundido, select.hundido, textarea.hundido, .buscar input { font-size: 16px; }
  .top { padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
  .top .tabs, .top-der .btn { display: none; }
  .top-der { margin-left: auto; }
  .main { padding: 16px; }
  h1 { font-size: 22px; }
  .barra-cel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgb(246 245 242 / 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--borde);
  }
  .barra-cel a { display: grid; justify-items: center; gap: 2px; min-height: 44px; padding-top: 4px; text-decoration: none; font-size: 11px; color: var(--tinta-suave); }
  .barra-cel a.on { color: var(--tinta); font-weight: 600; }
  .firma { padding-bottom: 10px; }
  .filtros { border-radius: var(--r-grande); }
  .filtros-hoja {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    border-radius: var(--r-grande) var(--r-grande) 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 70;
    box-shadow: 0 -12px 40px rgb(29 22 17 / 0.2);
  }
  .renglon-tel { display: none; }

  /* Tablero: una etapa a pantalla completa, se cambia deslizando. */
  .tv { display: none; }
  .tablero-marco { margin: 0 -16px; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .tablero { grid-auto-columns: 100vw; gap: 0; transform: none !important; }
  .columna { border-radius: 0; background: none; padding: 0 16px 16px; scroll-snap-align: start; min-height: 60vh; }
  .columna-ayuda { -webkit-line-clamp: 3; }
  .puntos-cel { display: flex; justify-content: center; gap: 6px; position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); padding: 6px 0; }
  .puntos-cel span { width: 8px; height: 8px; border-radius: 3px; background: var(--c); opacity: 0.4; }
  .puntos-cel span.on { opacity: 1; transform: scale(1.3); }

  .tabla-marco { display: none; }
  .lista-cel { display: grid; gap: 8px; }

  /* Ficha a pantalla completa con las acciones fijas abajo. */
  .v-ficha .barra-cel { display: none; }
  .v-ficha body, body.v-ficha { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .ficha-cabeza .contacto { display: none; }
  .acciones-cel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgb(246 245 242 / 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--borde);
  }
  .acciones-cel .btn { flex: 1; min-height: 48px; }
  .datos { grid-template-columns: 1fr; gap: 0 0; }
  .datos dd { margin-bottom: 8px; }
  .hoja { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: var(--r-grande) var(--r-grande) 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .embudo-fila { grid-template-columns: 90px 1fr 70px; }
}