/* kova-leads · LA FORMA (las piezas). Dueño: Diseño. Sin un solo color, letra ni esquina propia: todo sale de
   marca-kova.css (la ropa), que se carga antes. Cada pieza existe una vez (P52):
   boton (+oro, sec, wa, peligro, chico, icono) · enlace · campo (input/select/textarea + casilla) · aviso (+alerta) ·
   filtro (chip) · tarjeta · bloque · estado · datos · tabla · vacio (hueco) · mas (desplegable). */

:root {
  /* medidas de la casa (ESTANDAR-PANTALLAS §3). Texto 16 px de base: con menos, iOS agranda la página al tocar un campo */
  --t-xs: 0.8125rem; --t-s: 0.875rem; --t-m: 1rem; --t-l: 1.125rem; --t-xl: 1.3125rem; --t-2xl: 1.625rem; --t-3xl: 2rem;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 18px; --e5: 26px; --e6: 38px; --e7: 56px;
  --toque: 48px;              /* ≥ 44 (P54) */
  --toque-grande: 56px;       /* Llamar / WhatsApp en la ficha */
  --casilla: 24px;            /* el cuadrado que se ve; lo que se toca es la fila entera (≥ 44) */
  --foco: 3px;
  --cab-alto: 65px;           /* alto de la barra fija: el foco nunca queda debajo (WCAG 2.4.11) */
  --ancho: 1180px;
  --ancho-form: 560px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab-alto) + var(--e3)); }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 var(--t-m)/1.5 var(--tipo-cuerpo); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--acento-texto); }
:focus-visible { outline: var(--foco) solid var(--acento-texto); outline-offset: 2px; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--color); color: var(--sobre-color); padding: var(--e3); z-index: 9; }
.saltar:focus { left: var(--e2); top: var(--e2); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { flex: none; }

/* ── barra y pie ───────────────────────────────────────────────────────────────── */
.cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: var(--cab-alto); padding: var(--e2) var(--e4); border-bottom: 1px solid var(--linea); background: var(--fondo); position: sticky; top: 0; z-index: 5; }
.cab-logo { display: flex; align-items: center; min-height: var(--toque); }
.cab-logo img { height: 40px; width: auto; display: block; }
.cab-nav { display: flex; gap: var(--e1); }
.cab-nav a { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--e3); color: var(--gris); text-decoration: none; font-weight: 600; border-radius: var(--r); white-space: nowrap; }
.cab-nav a[aria-current] { color: var(--acento-texto); background: var(--papel); box-shadow: inset 0 -2px 0 var(--acento); }
.contenido { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: var(--e4); flex: 1; }
.pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e3); padding: var(--e4); border-top: 1px solid var(--linea); color: var(--gris); font-size: var(--t-s); }
.pie-form { margin: 0; }
/* ayuda del pie (UX D5): su propia fila, centrada como el resto del pie; el número no se parte */
.pie-ayuda { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--e1); text-align: center; }
.pie-ayuda .enlace { white-space: nowrap; }

/* ── titulares y textos ────────────────────────────────────────────────────────── */
.titulo { font: var(--peso-titular) calc(var(--t-2xl) * var(--titular-escala))/1.2 var(--tipo-titular); letter-spacing: var(--titular-tracking); color: var(--tinta); margin: 0 0 var(--e3); overflow-wrap: anywhere; }
.subtitulo { font: 600 var(--t-s)/1.3 var(--tipo-cuerpo); letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento); margin: 0 0 var(--e3); }
.subtitulo label { all: inherit; display: inline; margin: 0; }
.cuenta { font: 600 var(--t-l) var(--tipo-cuerpo); color: var(--gris); }

/* ── aviso (bien / mal): el texto dice qué pasó, la raya solo acompaña ─────────── */
.aviso, .alerta { background: var(--papel2); border-left: 4px solid var(--verde); padding: var(--e3) var(--e4); border-radius: var(--r); margin: 0 0 var(--e4); }
.alerta { border-left-color: var(--rojo); }

/* ── botón: una sola pieza y sus variantes ─────────────────────────────────────── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: var(--toque); min-width: var(--toque); padding: 0 var(--e4); border-radius: var(--r); border: 1px solid var(--linea-control); background: var(--papel); color: var(--tinta); font: 600 var(--t-m)/1.2 var(--tipo-cuerpo); text-align: center; text-decoration: none; cursor: pointer; }
.boton:hover { background: var(--papel2); }
.boton-oro { background: var(--color); border-color: var(--color); color: var(--sobre-color); }
.boton-oro:hover { background: var(--acento-texto); border-color: var(--acento-texto); }
.boton-wa { background: var(--wa); border-color: var(--wa); color: var(--sobre-wa); }
.boton-wa:hover { background: var(--wa); filter: brightness(1.08); }
.boton-sec { background: var(--papel); }
.boton-peligro { border-color: var(--rojo); color: var(--rojo); }
.boton-chico { padding: 0 var(--e3); }
.boton-icono { padding: 0; width: var(--toque); }
/* «seleccionado» (estado actual de la ficha, filtro activo de la lista): UNA sola marca para «este es el actual».
   No es oro lleno: el oro lleno queda solo para la acción principal de la pantalla (P93, P100). Borde de 2 px + tilde:
   se distingue sin depender del color (P59). */
.boton[aria-pressed="true"], .filtro[aria-current] { background: var(--papel2); border: 2px solid var(--acento-texto); color: var(--tinta); }
.boton[aria-pressed="true"]::before, .filtro[aria-current]::before { content: ""; flex: none; width: 6px; height: 11px; margin-right: 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.enlace { display: inline-flex; align-items: center; min-width: var(--toque); min-height: var(--toque); padding: 0 var(--e2); background: none; border: 0; color: var(--acento-texto); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── campo ─────────────────────────────────────────────────────────────────────── */
input, select, textarea { width: 100%; min-height: var(--toque); padding: var(--e3); border-radius: var(--r-p); border: 1px solid var(--gris); background: var(--papel); color: var(--tinta); font: 400 var(--t-m) var(--tipo-cuerpo); }
textarea { resize: vertical; }
label { display: block; font-weight: 600; margin: var(--e3) 0 var(--e1); color: var(--tinta); }
::placeholder { color: var(--gris); opacity: 1; }

/* casilla: el cuadro de 24 px va dentro de un blanco de 44+ que es toda la fila con su texto */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: var(--toque); height: var(--toque); min-height: 0; margin: 0 0 0 calc((var(--toque) - var(--casilla)) / -2); padding: 0; border: 0; border-radius: var(--r-p); background: transparent; cursor: pointer; }
input[type="checkbox"]::before { content: ""; position: absolute; inset: calc((var(--toque) - var(--casilla)) / 2); border: 2px solid var(--gris); border-radius: 6px; background: var(--fondo); }
input[type="checkbox"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 13px; margin: -9px 0 0 -4px; border: solid var(--sobre-color); border-width: 0 3px 3px 0; transform: rotate(45deg); opacity: 0; }
input[type="checkbox"]:checked::before { background: var(--color); border-color: var(--color); }
input[type="checkbox"]:checked::after { opacity: 1; }
input[type="checkbox"]:focus-visible { outline-offset: -4px; }
.confirmar { display: flex; align-items: center; gap: var(--e1); min-height: var(--toque); margin: 0; font-weight: 400; cursor: pointer; }

/* ── lista ─────────────────────────────────────────────────────────────────────── */
.encabezado { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.encabezado .titulo { margin: 0; }
.buscar { display: flex; gap: var(--e2); margin-bottom: var(--e2); }
.buscar .boton { flex: none; }
/* filtros: se deslizan. El borde derecho se desvanece para decir «hay más»; el relleno deja ver el foco entero */
.filtros { display: flex; gap: var(--e2); overflow-x: auto; padding: var(--e2); margin: 0 calc(-1 * var(--e2)) var(--e2); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, var(--fondo) calc(100% - 32px), transparent); mask-image: linear-gradient(to right, var(--fondo) calc(100% - 32px), transparent); }
.filtros::-webkit-scrollbar { display: none; }
.filtros::after { content: ""; flex: none; width: 24px; }
.filtro { flex: none; display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--toque); padding: 0 var(--e3); border-radius: 999px; border: 1px solid var(--linea-control); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: var(--t-s); }
.filtro-n { font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .filtros { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; } .filtros::after { display: none; } }
.herramientas { display: flex; justify-content: flex-end; margin: 0 0 var(--e3); }
.tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.tarjeta { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-g); overflow: hidden; }
.tarjeta-enlace { flex: 1; display: grid; align-content: start; gap: var(--e1); padding: var(--e4); text-decoration: none; color: var(--tinta); min-height: var(--toque); }
.tarjeta-enlace:hover .tarjeta-negocio { text-decoration: underline; text-underline-offset: 3px; }
.tarjeta-enlace:focus-visible { outline-offset: -4px; border-radius: var(--r-g); }
.tarjeta-negocio { font: 600 var(--t-l)/1.3 var(--tipo-cuerpo); overflow-wrap: anywhere; }
.tarjeta-sub { color: var(--gris); font-size: var(--t-s); overflow-wrap: anywhere; }
.tarjeta-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-top: var(--e1); font-size: var(--t-s); color: var(--gris); }
.origen { display: inline-flex; align-items: center; gap: var(--e1); }
.origen .ico { width: 16px; height: 16px; }
.asig::before { content: "→ "; }
.tarjeta-acciones { display: flex; gap: var(--e2); padding: 0 var(--e4) var(--e4); }
.tarjeta-acciones .boton { flex: 1; }
.chip-prueba { border: 1px dashed var(--gris); border-radius: 999px; padding: 0 var(--e2); }
.vacio { display: grid; justify-items: center; gap: var(--e3); text-align: center; padding: var(--e6) var(--e4); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-g); }
.vacio > * { margin: 0; }

/* ── estado: siempre con texto; el punto de color solo acompaña ───────────────── */
.estado { display: inline-flex; align-items: center; gap: var(--e1); font-weight: 600; font-size: var(--t-s); }
.estado::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.estado-nuevo { color: var(--e-nuevo); } .estado-contactado { color: var(--e-contactado); } .estado-cotizado { color: var(--e-cotizado); }
.estado-cliente { color: var(--e-cliente); } .estado-perdido { color: var(--e-perdido); }

/* ── ficha ─────────────────────────────────────────────────────────────────────── */
.volver { display: inline-flex; align-items: center; gap: var(--e1); min-height: var(--toque); padding-right: var(--e2); color: var(--gris); text-decoration: none; margin-bottom: var(--e2); }
.volver:hover { color: var(--tinta); }
.ficha-cab { margin-bottom: var(--e4); }
.ficha-sub { margin: 0; color: var(--gris); }
.acciones-contacto { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); margin-bottom: var(--e5); }
.acciones-contacto .boton { min-height: var(--toque-grande); }
.acciones-contacto .boton:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 760px) { .acciones-contacto { grid-template-columns: repeat(3, minmax(0, 220px)); } .acciones-contacto .boton:last-child:nth-child(odd) { grid-column: auto; } }
.bloque { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-g); padding: var(--e4); margin-bottom: var(--e4); }
.bloque > :last-child { margin-bottom: 0; }
.estados { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--e2); }
.estado-boton { background: var(--fondo); }
.form-nota { display: grid; gap: var(--e2); }
.nota-pie { display: grid; gap: var(--e2); }
.nota-estado { margin: 0; font-weight: 400; }
@media (min-width: 560px) { .nota-pie { grid-template-columns: minmax(0, 1fr) auto; } }
.fila-form { display: flex; gap: var(--e2); }
.fila-form .boton { flex: none; }
.notas, .conv { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.conv { margin-top: var(--e3); }
.nota { display: grid; gap: var(--e1); padding-bottom: var(--e3); border-bottom: 1px solid var(--linea); }
.nota:last-child { border-bottom: 0; padding-bottom: 0; }
.nota-meta { font-size: var(--t-s); color: var(--gris); display: block; }
.nota-evento .nota-texto { color: var(--gris); }
.nota-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.conv li { padding: var(--e3); border-radius: var(--r); white-space: pre-wrap; overflow-wrap: anywhere; }
.conv-user { background: var(--papel2); margin-left: var(--e6); }
.conv-assistant { border: 1px solid var(--linea); margin-right: var(--e6); }
.datos { display: grid; grid-template-columns: minmax(96px, 35%) 1fr; gap: var(--e2) var(--e3); margin: 0; }
.datos dt { color: var(--gris); font-size: var(--t-s); }
.datos dd { margin: 0; overflow-wrap: anywhere; }

/* desplegable: una flecha dice que se abre (con display:flex el navegador quita la suya) */
.mas summary { list-style: none; cursor: pointer; min-height: var(--toque); display: flex; align-items: center; justify-content: space-between; gap: var(--e3); font-weight: 600; color: var(--acento-texto); border-radius: var(--r-p); }
.mas summary::-webkit-details-marker { display: none; }
.mas summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: var(--e2); border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); }
.mas[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.mas-acciones { display: grid; gap: var(--e4); margin-top: var(--e3); }
.mas-acciones form { display: grid; gap: var(--e2); margin: 0; padding-top: var(--e4); border-top: 1px solid var(--linea); }
.mas-acciones form:first-child { padding-top: 0; border-top: 0; }
.mas-acciones .boton { width: 100%; }

/* ── entrar y alta ─────────────────────────────────────────────────────────────── */
.login { max-width: 400px; margin: var(--e6) auto; text-align: center; }
.login-logo { width: 200px; height: auto; margin-bottom: var(--e4); }
.form-login, .form-nuevo { text-align: left; display: grid; }
.form-login .boton, .form-nuevo .boton { margin-top: var(--e5); width: 100%; }
.form-nuevo { max-width: var(--ancho-form); }
.form-nuevo .alerta { margin: var(--e3) 0 0; }

/* ── tablero (números) ─────────────────────────────────────────────────────────── */
.cifras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--e3); }
.cifras li { display: grid; gap: var(--e1); }
.cifra { font: var(--peso-titular) calc(var(--t-2xl) * var(--titular-escala)) var(--tipo-titular); font-variant-numeric: lining-nums tabular-nums; }
/* tabla de números: desplazamiento propio, primera columna fija y alcanzable con teclado (P56) */
.tabla-env { overflow-x: auto; border-radius: var(--r-p); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla th, .tabla td { text-align: left; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linea); }
.tabla thead th { color: var(--gris); font-weight: 600; }
.tabla th:first-child, .tabla td:first-child { position: sticky; left: 0; background: var(--papel); }

@media (min-width: 760px) {
  .contenido { padding: var(--e5) var(--e6); }
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .titulo { font-size: calc(var(--t-3xl) * var(--titular-escala)); }
}
@media (min-width: 1200px) {
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }