/* Gestión de Jazmín Mirenda: la misma marca que su web y su landing. Oliva, crema y arena; Newsreader para los títulos
   (con el acento en itálica) y Hanken Grotesk para todo lo demás; la rama de olivo, la textura salvia y su foto con el
   aro de Instagram. Pensada para el celular. */
@import url('/fonts/fuentes.css?v=ac7d492b14');

:root {
  --oliva-900: #262a18;
  --oliva-700: #3d4229;
  --oliva-600: #4a4f30;
  --oliva-300: #8a8e6a;
  --salvia: #e4e6d3;
  --crema: #fffbf9;
  --arena: #d5c69e;
  --arena-sombra: #b4a372;
  --hueso: #f6f3ea;
  --tinta: #262a18;
  --tinta-suave: #4d5140;
  --linea: #ece6d6;
  --error: #a3341f;
  --ok: #3d5a2a;
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sombra: 0 6px 18px rgba(38, 42, 24, .08);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--hueso); color: var(--tinta); font: 400 17px/1.55 var(--sans);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
a { color: var(--oliva-600); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Títulos con su serif, como la web: liviana, con el acento en itálica. */
h1 { font: 300 34px/1.08 var(--display); letter-spacing: -.015em; margin: 6px 0 14px; }
h2 { font: 300 26px/1.15 var(--display); letter-spacing: -.01em; margin: 30px 0 12px; }
h1 em, h2 em { font-style: italic; color: var(--oliva-600); }
.suave { color: var(--tinta-suave); }
.chico { font-size: 15px; }

/* Barra: oliva sobre su rama de olivo, con su foto y su nombre. */
.barra {
  position: sticky; top: 0; z-index: 5; color: #fff;
  background: linear-gradient(rgba(36, 40, 22, .86), rgba(36, 40, 22, .92)), url(/img/portada.jpg) 70% 30% / cover;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
}
.barra .fila { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.marca .anillo { width: 38px; height: 38px; padding: 2px; }
.marca .nombre { font: 300 19px/1.1 var(--display); white-space: nowrap; }
.marca .nombre em { font-style: italic; color: var(--arena); }
.barra nav { margin-left: auto; display: flex; gap: 6px; }
.barra nav a, .barra nav button {
  color: #fff; text-decoration: none; background: transparent; border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px; padding: 6px 12px; font-size: 15px; cursor: pointer; white-space: nowrap;
}
.barra nav a[aria-current="page"] { background: var(--arena); color: var(--oliva-900); border-color: var(--arena); font-weight: 600; }
@media (max-width: 460px) {
  .marca .nombre { display: none; }
  .barra nav a, .barra nav button { padding: 6px 10px; }
}

/* Su foto con el aro de Instagram (igual que en la landing). */
.anillo { flex: none; border-radius: 50%; padding: 3px; background: conic-gradient(#f9ce34, #ee2a7b, #6228d7, #f9ce34); }
.anillo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 2px solid var(--crema); }

main { max-width: 760px; margin: 0 auto; padding: 18px 16px 32px; }

.tarjeta { background: var(--crema); border: 1px solid var(--linea); border-radius: 18px; padding: 16px; box-shadow: var(--sombra); }
.lista { display: grid; gap: 12px; }
.persona { display: block; text-decoration: none; color: inherit; }
.persona .arriba { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.persona b { font-size: 18px; font-weight: 600; }
.persona .meta { font-size: 15px; color: var(--tinta-suave); margin-top: 3px; }

/* "Para hoy" sobre la textura salvia de su web. */
.panel-salvia {
  border-radius: 22px; padding: 16px; margin: 0 -4px;
  background: linear-gradient(rgba(255, 251, 249, .25), rgba(255, 251, 249, .25)), url(/img/textura-salvia.jpg) center / cover;
}
.panel-salvia h1 { margin-top: 0; }
.para-hoy .item { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.para-hoy .item.urgente { box-shadow: inset 4px 0 0 var(--error), var(--sombra); }
.para-hoy .item p { margin: 3px 0 0; font-size: 15px; color: var(--tinta-suave); }

/* Etapas en su paleta. */
.chip { display: inline-block; border-radius: 999px; padding: 3px 11px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.e-nueva { background: var(--arena); color: var(--oliva-900); }
.e-video_enviado { background: var(--salvia); color: var(--oliva-900); }
.e-respondio { background: #cfd7b0; color: #2b311c; }
.e-agendo_sesion { background: #6b7050; color: #fff; }
.e-asistio { background: var(--oliva-600); color: #fff; }
.e-no_asistio { background: #ecd8c2; color: #5b3a1d; }
.e-compro { background: var(--oliva-900); color: var(--arena); }
.e-no_compro { background: #e6e1d6; color: #4d4a40; }
.e-no_califica { background: transparent; color: #6b675c; border: 1px solid #d8d2c3; }

.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtro { flex: none; border: 1.5px solid var(--linea); background: var(--crema); border-radius: 999px; padding: 7px 13px; font-size: 15px; cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--oliva-600); color: #fff; border-color: var(--oliva-600); }
.buscar { width: 100%; border: 1.5px solid var(--oliva-300); border-radius: 12px; padding: 12px 14px; background: #fff; margin-bottom: 12px; }

/* Botones píldora, como en su landing. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px;
  padding: 13px 20px; font-weight: 700; cursor: pointer; text-decoration: none; min-height: 48px;
  background: var(--arena); color: var(--oliva-900); box-shadow: 0 4px 0 var(--arena-sombra);
}
.boton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--arena-sombra); }
.boton.oscuro { background: var(--oliva-600); color: #fff; box-shadow: 0 4px 0 var(--oliva-900); }
.boton.wa { background: #2f5d34; color: #fff; box-shadow: 0 4px 0 #1d3d21; }
.boton.wa::before {
  content: ""; width: 20px; height: 20px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.boton.borde { background: transparent; border: 1.5px solid var(--oliva-600); color: var(--oliva-600); box-shadow: none; }
.boton[disabled] { opacity: .6; cursor: wait; }
.boton.ancho { width: 100%; }
.contactos { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }

.etapas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.etapa-btn { border: 1.5px solid var(--linea); background: var(--crema); border-radius: 14px; padding: 11px 12px; font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; box-shadow: 0 3px 0 #e2dccb; }
.etapa-btn[aria-pressed="true"] { border-color: var(--oliva-600); background: var(--oliva-600); color: #fff; box-shadow: 0 3px 0 var(--oliva-900); }

.mensaje { display: grid; gap: 10px; }
.mensaje b { font-weight: 600; }
.mensaje .texto { white-space: pre-wrap; font-size: 15px; background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 11px 13px; margin: 0; }

label { display: block; font-weight: 600; font-size: 16px; margin: 10px 0 6px; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="datetime-local"], select, textarea {
  width: 100%; border: 1.5px solid #d9d0b8; border-radius: 14px; padding: 13px 15px; background: #fffdf9; font-size: 17px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--oliva-300); box-shadow: 0 0 0 4px rgba(213, 198, 158, .45); }
.boton:focus-visible, .filtro:focus-visible, .etapa-btn:focus-visible, a:focus-visible { outline: 3px solid var(--arena); outline-offset: 2px; }
.fila-campos { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }
.error { color: var(--error); font-weight: 600; font-size: 15px; margin: 8px 0 0; }
.error:empty { display: none; }
.aviso { color: var(--ok); font-weight: 600; font-size: 15px; margin: 8px 0 0; }
.aviso:empty { display: none; }

.historial { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.historial li { border-left: 3px solid var(--arena); padding: 2px 0 2px 12px; }
.historial .cuando { font-size: 14px; color: var(--tinta-suave); }
.historial .nota { white-space: pre-wrap; }

.datos { display: grid; grid-template-columns: 1fr; gap: 2px; font-size: 16px; margin: 0; }
.datos dt { color: var(--tinta-suave); font-size: 14px; margin-top: 10px; }
.datos dt:first-child { margin-top: 0; }
.datos dd { margin: 0; overflow-wrap: anywhere; }

.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cifra b { display: block; font: 300 34px/1.05 var(--display); }
.cifra span { font-size: 14px; color: var(--tinta-suave); }
.tabla-envoltura { overflow-x: auto; border-radius: 14px; box-shadow: var(--sombra); }
table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--crema); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th { color: var(--tinta-suave); font-weight: 600; }
.vacio { text-align: center; color: var(--tinta-suave); padding: 24px 8px; }


/* Entrada: su rama de olivo de fondo, su foto y su frase. */
.pagina-entrar {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 16px;
  background: linear-gradient(rgba(36, 40, 22, .5), rgba(36, 40, 22, .62)), url(/img/portada.jpg) 70% 30% / cover; color: #fff;
}
.entrar { width: 100%; max-width: 420px; background: var(--crema); color: var(--tinta); border-radius: 22px; padding: 26px 22px; box-shadow: 0 14px 40px rgba(0, 0, 0, .22); }
.entrar .anillo { width: 86px; height: 86px; margin: 0 auto 10px; }
.entrar h1 { text-align: center; margin: 4px 0 6px; }
.entrar .bajada { text-align: center; color: var(--tinta-suave); margin: 0 0 14px; }
.entrar form { margin-top: 6px; }
.campo { margin: 0 0 14px; }
.campo label { margin: 0 0 7px; font-size: 15px; letter-spacing: .01em; color: var(--oliva-700); }
.con-ojo { position: relative; }
.con-ojo input { padding-right: 52px; }
.ojo {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%;
  cursor: pointer; opacity: .75; transition: opacity .15s, background-color .15s;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4f30' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.ojo:hover, .ojo:focus-visible { opacity: 1; background-color: var(--salvia); outline: none; }
.ojo[aria-pressed="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4f30' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.1A9.8 9.8 0 0 1 12 6c6.4 0 10 6 10 6a17 17 0 0 1-3.2 3.9M6.6 6.6A17.4 17.4 0 0 0 2 12s3.6 6 10 6a9.6 9.6 0 0 0 4.4-1.1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
}
.entrar .boton { margin-top: 6px; }
.enlace-sutil {
  display: block; margin: 16px auto 2px; background: none; border: 0; padding: 4px 8px; cursor: pointer; text-align: center;
  font-size: 15px; color: var(--oliva-600); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(74, 79, 48, .3);
}
.enlace-sutil:hover { text-decoration-color: var(--oliva-600); }

/* Tablero (pipeline): columnas por etapa. En el celular, una etapa por pantalla y se desliza. */
main.ancho { max-width: 1440px; }
.fila-hoy { display: grid; gap: 10px; }
.cabecera-tablero { display: grid; gap: 10px; margin: 26px 0 8px; }
.cabecera-tablero h2 { margin: 0; }
.cabecera-tablero .buscar { margin: 0; }
.botones-cabecera { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cabecera-tablero .filtro[aria-pressed="true"] { background: var(--oliva-600); color: #fff; border-color: var(--oliva-600); }
.tablero {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86vw; gap: 12px; overflow-x: auto; padding: 4px 2px 18px;
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--arena) transparent;
}
.columna {
  --c: var(--arena); scroll-snap-align: start; display: flex; flex-direction: column; min-height: 260px;
  background: rgba(255, 251, 249, .55); border: 1px solid var(--linea); border-top: 4px solid var(--c); border-radius: 18px; padding: 10px;
  transition: background-color .15s;
}
.columna header { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 8px; padding: 4px 4px 10px; }
.columna .titulo { flex: 1; min-width: 0; font: 400 20px/1.15 var(--display); }
.columna .cuenta { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--tinta-suave); background: var(--hueso); border-radius: 999px; padding: 2px 10px; }
.columna .total { width: 100%; font-size: 14px; font-weight: 600; color: var(--oliva-600); }
.columna.sobre { background: var(--salvia); border-style: dashed; border-top-style: solid; }
.c-nueva { --c: var(--arena); }
.c-video_enviado { --c: #c9cdb0; }
.c-respondio { --c: #b3c08a; }
.c-agendo_sesion { --c: #6b7050; }
.c-asistio { --c: var(--oliva-600); }
.c-no_asistio { --c: #d9b48f; }
.c-compro { --c: var(--oliva-900); }
.c-no_compro { --c: #cfc9bc; }
.c-no_califica { --c: #e2ddd2; }
.tarjetas { display: grid; gap: 8px; align-content: start; }
.tarjeta-tablero {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  background: var(--crema); border: 1px solid var(--linea); border-radius: 14px; padding: 11px 12px; box-shadow: 0 2px 8px rgba(38, 42, 24, .06);
  transition: box-shadow .15s, transform .15s;
}
.tarjeta-tablero:hover { box-shadow: 0 8px 18px rgba(38, 42, 24, .1); transform: translateY(-1px); }
.tarjeta-tablero.arrastrando { opacity: .45; }
.tarjeta-tablero.urgente { box-shadow: inset 3px 0 0 var(--error), 0 2px 8px rgba(38, 42, 24, .06); }
.tarjeta-tablero .arriba { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tarjeta-tablero b { font-size: 16px; font-weight: 600; line-height: 1.3; }
.tarjeta-tablero .meta { font-size: 14px; color: var(--tinta-suave); margin-top: 2px; }
.tarjeta-tablero .proximo { font-size: 14px; color: var(--oliva-600); margin-top: 6px; }
.tarjeta-tablero .proximo.urgente { color: var(--error); font-weight: 600; }
.tarjeta-tablero .monto { font: 400 19px/1.2 var(--display); margin-top: 4px; }
.wa-mini { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #e6efe0; cursor: pointer; }
.wa-mini:hover { background: #d5e6cc; }
.icono-wa {
  width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232f5d34'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vacia { margin: 0; padding: 18px 8px; text-align: center; font-size: 14px; color: var(--tinta-suave); border: 1.5px dashed var(--linea); border-radius: 12px; }
.pestanas { margin-top: 2px; }
.pestanas .filtro[aria-pressed="true"] { background: var(--oliva-600); color: #fff; border-color: var(--oliva-600); }

/* Ventanitas (agendó, venta, nueva interesada). */
.dialogo { border: 0; border-radius: 22px; padding: 22px; width: min(460px, 92vw); background: var(--crema); color: var(--tinta); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.dialogo::backdrop { background: rgba(38, 42, 24, .45); }
.dialogo h2 { margin: 0 0 12px; }
.acciones { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 16px; }
.acciones .enlace-sutil { margin: 0; }
.fila-campos.dos { grid-template-columns: 1fr 1fr; }
.aviso-flotante { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 20; background: var(--oliva-900); color: #fff; padding: 12px 18px; border-radius: 999px; box-shadow: var(--sombra); }

@media (min-width: 900px) {
  .fila-hoy { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .cabecera-tablero { grid-template-columns: auto minmax(220px, 420px) auto; justify-content: space-between; align-items: center; }
  .tablero { grid-auto-columns: minmax(150px, 1fr); gap: 10px; scroll-snap-type: none; }
  .pestanas { display: none; }
}