/* Australair CRM: pensado para el móvil del vendedor, a una mano y a pleno sol.
   Idea visual: la oportunidad "se calienta" a medida que avanza por las etapas. */
:root {
  --tinta: #123047;
  --texto: #1d2b36;
  --gris: #607080;
  --linea: #d6dee5;
  --fondo: #eef2f5;
  --papel: #ffffff;
  --frio: #1476a8;
  --calor: #d2541f;
  --ganada: #2c8657;
  --perdida: #8792a0;
  --e1: #1476a8;
  --e2: #3a91a3;
  --e3: #b8902c;
  --e4: #d56f27;
  --e5: #d2541f;
  --radio: 8px;
  font-size: 17px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.45;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
a { color: var(--frio); }
:focus-visible { outline: 3px solid var(--frio); outline-offset: 2px; }
main { max-width: 640px; margin: 0 auto; padding: 12px 14px 24px; }
h1, h2 { line-height: 1.2; margin: 0; }

/* cabecera y barra inferior */
.top {
  display: flex; align-items: center; gap: 12px;
  background: var(--tinta); color: #fff;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
}
.top a { color: #fff; text-decoration: none; }
.marca { font-weight: 700; }
.quien { margin-left: auto; opacity: .8; font-size: .85rem; }
.salir { font-size: .85rem; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 3px 10px; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; background: var(--papel); border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar a {
  flex: 1; text-align: center; padding: 14px 4px; text-decoration: none;
  color: var(--gris); font-weight: 600; font-size: .9rem;
}
.tabbar a[aria-current] { color: var(--tinta); box-shadow: inset 0 3px 0 var(--tinta); }
.tabbar .tab-nuevo { color: var(--frio); }

/* avisos */
.aviso { padding: 10px 12px; border-radius: var(--radio); margin: 0 0 12px; font-weight: 500; }
.aviso-ok { background: #e2f2ea; color: #1d5e3d; }
.aviso-error { background: #fbe6dc; color: #8a3210; }

/* botones */
.btn {
  display: inline-block; border: 1px solid var(--linea); background: var(--papel);
  color: var(--tinta); font: inherit; font-weight: 600; text-decoration: none;
  padding: 11px 16px; border-radius: var(--radio); cursor: pointer; min-height: 46px;
}
.btn-primario { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.btn-ganada { background: var(--ganada); border-color: var(--ganada); color: #fff; }
.btn-perdida { background: var(--papel); border-color: var(--perdida); color: #4a5563; }
.btn-ancho { width: 100%; }

/* login */
.pantalla-login { background: var(--tinta); padding-bottom: 0; }
.login { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; max-width: 340px; margin: 0 auto; color: #fff; }
.login h1 { font-size: 1.6rem; margin-bottom: 28px; }
.login label { display: block; opacity: .8; margin-bottom: 8px; }
.pin {
  width: 100%; font-size: 2rem; letter-spacing: .5em; text-align: center;
  padding: 12px; border: 0; border-radius: var(--radio); margin-bottom: 14px;
}
.login .btn-primario { background: var(--frio); border-color: var(--frio); }

/* títulos y grupos */
.titulo { font-size: 1.35rem; margin: 6px 0 16px; }
.titulo::first-letter { text-transform: uppercase; }
.grupo { margin-bottom: 22px; }
.grupo h2 { font-size: 1rem; color: var(--gris); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.grupo-calor h2 { color: var(--calor); }
.cuenta { border-radius: 999px; padding: 0 8px; font-size: .8rem; color: #fff; background: var(--gris); }
.grupo-calor .cuenta { background: var(--calor); }
.nota-grupo { font-size: .85rem; color: var(--gris); margin: -4px 0 8px; }

/* filas */
.fila {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  background: var(--papel); border-radius: var(--radio); padding: 12px 14px;
  margin-bottom: 6px; text-decoration: none; color: var(--texto);
  border-left: 4px solid transparent;
}
.fila-vencida { border-left-color: var(--calor); }
.fila-hoy { border-left-color: var(--frio); }
.fila-principal { display: flex; flex-direction: column; min-width: 0; }
.fila-titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.fila-sub { font-size: .85rem; color: var(--gris); }
.fila-lado { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.fila-importe { font-weight: 600; font-variant-numeric: tabular-nums; }
.fila-fecha { font-size: .8rem; color: var(--gris); white-space: nowrap; flex-shrink: 0; }
.fila-vencida .fila-fecha, .fila-fecha.tarde { color: var(--calor); font-weight: 600; }
.fila-fecha.sin { color: var(--calor); }
.prioridad { color: var(--calor); font-weight: 800; }

/* buscador y chips */
.buscar input {
  width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--linea);
  border-radius: var(--radio); background: var(--papel);
}
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0; margin-bottom: 4px; scrollbar-width: none; }
.chips a {
  flex-shrink: 0; text-decoration: none; color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linea); border-radius: 999px; padding: 7px 13px; font-size: .88rem;
}
.chips a b { color: var(--gris); margin-left: 3px; }
.chips a[aria-current] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.chips a[aria-current] b { color: #b9cbd9; }

/* estados vacíos */
.vacio { background: var(--papel); border-radius: var(--radio); padding: 22px 18px; text-align: center; }
.vacio .btn { margin: 4px; }

/* ficha */
.volver { display: inline-block; font-size: .9rem; margin-bottom: 10px; }
.ficha { margin-bottom: 18px; }
.ficha .ref { font-size: .8rem; color: var(--gris); margin: 0 0 2px; font-variant-numeric: tabular-nums; }
.ficha h1 { font-size: 1.45rem; }
.ficha .cliente { margin: 4px 0 0; color: var(--gris); }
.ficha .importe { font-size: 1.7rem; font-weight: 700; margin: 6px 0 0; color: var(--tinta); font-variant-numeric: tabular-nums; }
.sello { display: inline-block; margin: 8px 0 0; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; color: #fff; }
.sello-ganada { background: var(--ganada); }
.sello-perdida { background: var(--perdida); }

/* la pista de etapas: el elemento con carácter */
.pista ol {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
}
.pista li { display: flex; flex-direction: column; }
.pista li::before {
  content: ""; height: 10px; border-radius: 5px; background: var(--linea);
  margin-bottom: 6px; transition: background .25s;
}
.pista li.hecha:nth-child(1)::before, .pista li.actual:nth-child(1)::before { background: var(--e1); }
.pista li.hecha:nth-child(2)::before, .pista li.actual:nth-child(2)::before { background: var(--e2); }
.pista li.hecha:nth-child(3)::before, .pista li.actual:nth-child(3)::before { background: var(--e3); }
.pista li.hecha:nth-child(4)::before, .pista li.actual:nth-child(4)::before { background: var(--e4); }
.pista li.hecha:nth-child(5)::before, .pista li.actual:nth-child(5)::before { background: var(--e5); }
.pista li.actual::before { height: 16px; margin-top: -3px; margin-bottom: 3px; border-radius: 8px; }
.pista button {
  font: inherit; font-size: .72rem; line-height: 1.2; background: none; border: 0;
  color: var(--gris); padding: 4px 1px 8px; cursor: pointer; min-height: 44px;
  text-align: center; hyphens: auto;
}
.pista li.actual button { color: var(--tinta); font-weight: 700; cursor: default; }
.pista-ganada li::before { background: var(--ganada) !important; }
.pista-perdida li::before { background: var(--linea) !important; }

/* acciones de contacto */
.acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; margin-bottom: 18px; }
.accion {
  display: flex; align-items: center; justify-content: center; min-height: 50px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  text-decoration: none; color: var(--tinta); font-weight: 600; font-size: .9rem;
}

/* bloques */
.bloque { background: var(--papel); border-radius: var(--radio); padding: 14px; margin-bottom: 10px; }
.bloque h2 { font-size: 1rem; margin-bottom: 10px; }
.nada { color: var(--gris); margin: 0 0 8px; }
.act { border-left: 4px solid var(--frio); padding: 2px 0 8px 10px; margin-bottom: 10px; }
.act-vencida { border-left-color: var(--calor); }
.act-cab { display: flex; justify-content: space-between; gap: 8px; }
.act-fecha { font-size: .82rem; color: var(--gris); white-space: nowrap; }
.act-vencida .act-fecha { color: var(--calor); font-weight: 600; }
.act-nota { font-size: .9rem; color: var(--gris); margin: 4px 0; }
.act details summary { font-size: .88rem; color: var(--frio); margin-top: 4px; }
details summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.desplegable > summary { color: var(--tinta); padding: 4px 0; }
.linea { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.linea:last-child { border-bottom: 0; }
.texto-largo { margin: 0; white-space: pre-line; }

/* formularios */
.form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--gris); font-weight: 600; }
input, select, textarea {
  font: inherit; color: var(--texto); padding: 10px 12px; border: 1px solid var(--linea);
  border-radius: var(--radio); background: #fff; width: 100%;
}
textarea { resize: vertical; margin: 6px 0; }
.dos { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }

/* historial */
.evento { border-bottom: 1px solid var(--linea); padding: 8px 0; }
.evento:last-child { border-bottom: 0; }
.evento p { margin: 2px 0; }
.evento-meta { font-size: .78rem; color: var(--gris); }
.cambio { font-size: .9rem; }

/* cerrar */
.cerrar form + form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); }
.cerrar .desplegable > summary { color: var(--gris); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }