/* InkTable — estilos base. Estética Workspace: grafito, píldoras y lima eléctrico. */

:root {
  /* Estética "Workspace": negro neutro, tarjetas grafito muy redondeadas,
     píldoras blancas para lo activo y lima eléctrico para lo importante. */
  --fondo: #0E0E0E;
  --superficie: #222222;
  --superficie-2: #2C2C2C;
  --superficie-3: #383838;
  --barra: rgba(28, 28, 28, 0.88);
  --linea: #2F2F2F;
  --borde: #3E3E3E;
  --texto: #F4F4F2;
  --texto-medio: #C9C9C6;
  --texto-suave: #8C8C8A;
  --acento: #C6FF3D;
  --acento-hover: #D4FF6E;
  --acento-suave: rgba(198, 255, 61, 0.12);
  --sobre-acento: #0E0E0E;
  --blanco: #F4F4F2;
  --ok: #9BE88A;
  --peligro: #FF7A6B;
  --aviso-texto: #FFD27A;
  --aviso-fondo: rgba(255, 210, 122, 0.12);
  --radio: 26px;
  --radio-chico: 16px;
  --display: 'Urbanist', system-ui, sans-serif;
  --cuerpo: 'Urbanist', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--fondo);
}
body {
  background:
    radial-gradient(900px 420px at 50% -220px, rgba(198, 255, 61, 0.06), transparent 70%) no-repeat,
    var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--acento); }
a:hover { color: var(--acento-hover); }

.app {
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.contenido {
  flex: 1;
  padding: calc(24px + env(safe-area-inset-top)) 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.centrado { justify-content: center; }

.etiqueta { font-size: 13px; color: var(--texto-suave); margin: 0; }

h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.marca {
  font-family: var(--display);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: -1px;
}
.marca span { color: var(--acento); }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 16px;
}

.vacio {
  text-align: center;
  color: var(--texto-suave);
  font-size: 15px;
  line-height: 1.5;
  padding: 28px 16px;
}

form { display: flex; flex-direction: column; gap: 14px; }

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--texto-suave);
}

input {
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  padding: 0 14px;
  font: 16px var(--cuerpo);
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }

.boton {
  height: 50px;
  border-radius: 999px;
  border: none;
  background: var(--acento);
  color: var(--sobre-acento);
  font: 700 16px var(--cuerpo);
  cursor: pointer;
  padding: 0 22px;
  transition: background 0.15s, transform 0.1s;
}
.boton:active, .boton-secundario:active { transform: scale(0.98); }
.boton:hover { background: var(--acento-hover); }
.boton:disabled { opacity: 0.6; cursor: wait; }
.boton:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

.boton-secundario {
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--texto);
  font: 600 14px var(--cuerpo);
  cursor: pointer;
  padding: 0 16px;
}
.boton-secundario:hover { border-color: var(--texto-suave); }

.mensaje { font-size: 14px; line-height: 1.5; margin: 0; }
.mensaje.error { color: var(--peligro); }
.mensaje.ok { color: var(--ok); }

.encabezado {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.encabezado > div { display: flex; flex-direction: column; gap: 4px; }

.aviso-instalar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--superficie-2);
  font-size: 13px;
  color: var(--texto-medio);
  line-height: 1.4;
}
.aviso-instalar[hidden] { display: none; }
.aviso-instalar p { flex: 1; margin: 0; }

.navegacion {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr));
  border-top: 1px solid var(--linea);
  background: var(--barra);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  z-index: 5;
}
@media (min-width: 760px) {
  .navegacion {
    bottom: 16px;
    width: 520px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    border: 1px solid var(--linea);
    border-radius: 18px;
    padding: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }
}
.navegacion a {
  text-decoration: none;
  color: var(--texto-suave);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  font-size: 11px;
}
.navegacion a[aria-current="page"] { color: var(--acento); font-weight: 600; }
.navegacion svg { width: 22px; height: 22px; }

.app.cargando > :not(.esqueleto):not(.navegacion) { display: none !important; }

/* ---------- Panel: listas, fichas y botones ---------- */

.boton-icono {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: none;
  background: var(--acento);
  color: var(--sobre-acento);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
.boton-icono:hover { background: var(--acento-hover); color: var(--sobre-acento); }
.boton-icono svg { width: 20px; height: 20px; }

.volver {
  text-decoration: none;
  color: var(--texto-suave);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: -12px 0 -8px;
}
.volver:hover { color: var(--texto); }

.seccion { display: flex; flex-direction: column; gap: 12px; }

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.lista li + li { border-top: 1px solid var(--linea); }
.lista a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-height: 60px;
  color: inherit;
  text-decoration: none;
}
.lista a:hover { background: var(--superficie-2); }

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--linea);
  color: var(--texto);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.avatar.grande { width: 64px; height: 64px; border-radius: 32px; font-size: 22px; }

.fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila-texto strong { font-size: 15px; font-weight: 600; }
.fila-texto span {
  font-size: 13px;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datos { display: flex; flex-direction: column; }
.datos div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  font-size: 15px;
}
.datos div + div { border-top: 1px solid var(--linea); }
.datos dt { color: var(--texto-suave); }
.datos dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

textarea {
  min-height: 96px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  padding: 12px 14px;
  font: 16px/1.4 var(--cuerpo);
  resize: vertical;
}

.ayuda { font-size: 12px; color: var(--texto-suave); line-height: 1.4; }

.enlace-generado {
  font: 13px/1.4 ui-monospace, monospace;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  user-select: all;
}

.fila-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.fila-botones > * { flex: 1 1 140px; }

.proximamente { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 40px 16px; }
.proximamente strong { font-size: 17px; }

/* ---------- Proyectos: estados, tareas, galerías ---------- */

.pastilla {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--linea);
  color: var(--texto);
  white-space: nowrap;
}
.estado-solicitud, .estado-estimado { background: var(--aviso-fondo); color: var(--aviso-texto); }
.estado-deposito-pendiente { background: rgba(255, 107, 87, 0.14); color: #FFB3A6; }
.estado-agendado, .estado-en-progreso { background: var(--acento); color: var(--sobre-acento); }
.estado-completado { background: rgba(143, 212, 154, 0.14); color: var(--ok); }
.estado-cancelado { background: var(--linea); color: var(--texto-suave); }

.destacado {
  background: var(--acento);
  color: var(--sobre-acento);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
}
.destacado:hover { color: var(--sobre-acento); background: var(--acento-hover); }
.destacado .mini { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.destacado .grande { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1.1; }

.tarea {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 56px;
  border-radius: var(--radio);
  background: var(--superficie);
  border: 1.5px solid var(--acento);
  color: inherit;
  text-decoration: none;
}
.tarea:hover { color: inherit; background: var(--superficie-2); }
.tarea .circulo { width: 26px; height: 26px; border-radius: 13px; border: 2px solid var(--acento); flex-shrink: 0; }
.tarea.hecha { border: 1px solid var(--linea); color: var(--texto-suave); }
.tarea.hecha .circulo { border: none; background: var(--linea); }

.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.miniatura { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--linea); }
.miniatura a, .miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.miniatura .quitar {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  border: none;
  background: rgba(18, 15, 13, 0.8);
  color: var(--texto);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.diseno-grande { width: 100%; border-radius: 12px; display: block; background: var(--linea); }

.linea-dinero { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 4px 0; }
.linea-dinero span:first-child { color: var(--texto-suave); }
.linea-dinero.total { border-top: 1px solid var(--linea); margin-top: 6px; padding-top: 12px; font-size: 15px; font-weight: 600; }
.linea-dinero.total span:last-child { font-family: var(--display); font-size: 24px; color: var(--texto); }

.sesion {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
}
.sesion + .sesion { border-top: 1px solid var(--linea); }
.sesion .numero {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--linea);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sesion.proxima .numero { background: var(--acento); color: var(--sobre-acento); }
.sesion.completada .numero { color: var(--ok); }
.sesion .cuerpo { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sesion .cuerpo small { color: var(--texto-suave); font-size: 13px; }
.sesion .acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.sesion .acciones button { height: 36px; font-size: 13px; }

.nota-aviso { font-size: 13px; line-height: 1.45; color: var(--aviso-texto); background: var(--aviso-fondo); border-radius: 12px; padding: 10px 12px; margin: 0; }

.tarjeta-proyecto { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.tarjeta-proyecto:hover { color: inherit; border-color: var(--borde); }
.tarjeta-proyecto strong { font-size: 17px; }

.texto-largo { white-space: pre-line; line-height: 1.55; font-size: 15px; margin: 0; }

select {
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  padding: 0 12px;
  font: 16px var(--cuerpo);
}

.boton.peligro { background: var(--peligro); color: var(--sobre-acento); }
.boton-texto { background: none; border: none; color: var(--texto-suave); font: 14px var(--cuerpo); text-decoration: underline; cursor: pointer; padding: 8px 0; min-height: 44px; }

.dialogo {
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--superficie);
  color: var(--texto);
  padding: 20px;
  width: min(92vw, 440px);
}
.dialogo::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialogo-form { display: flex; flex-direction: column; gap: 14px; }
.dialogo-titulo { text-transform: none; letter-spacing: 0; font-size: 20px; color: var(--texto); font-family: var(--display); }

.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  background: var(--texto);
  color: var(--fondo);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  z-index: 10;
  max-width: 90vw;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso-error { background: var(--peligro); color: var(--sobre-acento); }

.firma {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  border: 1.5px dashed var(--borde);
  background: #F3EBE2;
  touch-action: none;
  display: block;
}

.faq { border-top: 1px solid var(--linea); }
.faq:first-child { border-top: none; }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--texto-suave); font-size: 20px; font-weight: 400; }
.faq[open] summary::after { content: '−'; }
.faq p { padding: 0 16px 16px; color: var(--texto-medio); }

.lista-editable { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.lista-editable:empty { display: none; }
.item-editable .fila-botones { justify-content: flex-end; }
.item-editable summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.plantilla { display: flex; flex-direction: column; gap: 8px; }
.plantilla p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto-medio); white-space: pre-line; }

.pestanas {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: -8px -20px 0;
  padding: 10px 20px;
  background: var(--barra);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas [role=tab] {
  flex-shrink: 0;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--texto-suave);
  font: 600 14px var(--cuerpo);
  cursor: pointer;
}
.pestanas [role=tab][aria-selected=true] { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.pestanas [role=tab]:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.panel-ajustes > h2 { display: none; }

/* ---------- Asistente de solicitud: una pregunta por card ---------- */

.asistente { min-height: 100dvh; }
.asistente-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
}
.asistente-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: center; line-height: 1.25; }
.asistente-quien strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asistente-quien span { font-size: 12px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icono-redondo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 22px;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--texto);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icono-redondo svg { width: 20px; height: 20px; }
.icono-redondo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.progreso { height: 3px; background: var(--linea); margin: 0 16px; border-radius: 2px; overflow: hidden; }
.progreso span { display: block; height: 100%; width: 0; background: var(--acento); transition: width 0.3s ease; }

.escenario { flex: 1; display: flex; flex-direction: column; padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); }
.card-pregunta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 24px 20px 20px;
}
.card-pregunta .contador { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento); }
.pregunta { font-size: 28px; line-height: 1.12; letter-spacing: -0.02em; }
.ayuda-pregunta { margin: -6px 0 0; font-size: 15px; line-height: 1.5; color: var(--texto-suave); }
.pie-card { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.pie-card .boton-texto { align-self: center; }

.entra-derecha { animation: entraDerecha 0.25s ease both; }
.entra-izquierda { animation: entraIzquierda 0.25s ease both; }
@keyframes entraDerecha { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes entraIzquierda { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .entra-derecha, .entra-izquierda { animation: none; }
  .progreso span { transition: none; }
}

.opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opciones.compactas { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion {
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--borde);
  background: transparent;
  color: var(--texto);
  font: 600 15px var(--cuerpo);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.opciones.compactas .opcion { min-height: 40px; padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.opcion small { font-weight: 400; font-size: 12px; color: var(--texto-suave); }
.opcion.con-sub { grid-column: span 2; }
.opcion:hover { border-color: var(--texto-suave); }
.opcion[aria-pressed=true] { border-color: var(--acento); background: var(--acento-suave); color: var(--acento); }
.opcion:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.bloque-fotos { display: flex; flex-direction: column; gap: 8px; }
.boton-foto {
  width: 100%;
  min-height: 64px;
  border-radius: 14px;
  border: 1.5px dashed var(--borde);
  background: transparent;
  color: var(--texto);
  font: 600 15px var(--cuerpo);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.boton-foto span { font-size: 22px; color: var(--acento); }

.nota-minimo { margin: -4px 0 0; font-size: 15px; color: var(--aviso-texto); }

.resumen { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.fila-resumen {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "etiqueta editar" "valor editar";
  gap: 2px 12px;
  align-items: center;
  text-align: left;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--linea);
  color: var(--texto);
  font: 15px var(--cuerpo);
  cursor: pointer;
}
.fila-resumen:first-child { border-top: none; }
.fila-resumen .etiqueta { grid-area: etiqueta; font-size: 12px; }
.fila-resumen > span:nth-child(2) { grid-area: valor; overflow-wrap: anywhere; }
.fila-resumen .editar { grid-area: editar; font-size: 13px; color: var(--acento); }

.check-grande {
  width: 72px;
  height: 72px;
  border-radius: 36px;
  background: var(--ok);
  color: var(--sobre-acento);
  font-size: 36px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}

.asistente-dialogo {
  width: 100%;
  max-width: 560px;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: var(--fondo);
  color: var(--texto);
}
.asistente-dialogo[open] { display: flex; flex-direction: column; }
.asistente-dialogo::backdrop { background: var(--fondo); }
.campo-grande { height: 60px; font-size: 22px; font-family: var(--display); font-weight: 700; }

.hoja {
  margin: auto auto 0;
  width: 100%;
  max-width: 560px;
  max-height: 85dvh;
  border: 1px solid var(--borde);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  background: var(--superficie);
  color: var(--texto);
  padding: 0;
}
.hoja::backdrop { background: rgba(0, 0, 0, 0.6); }
.hoja-cuerpo { display: flex; flex-direction: column; gap: 14px; padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); }
.hoja-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cifra { margin: 0; font-family: var(--display); font-size: 40px; font-weight: 700; }

.qr { background: #F3EBE2; border-radius: 12px; padding: 12px; width: 180px; align-self: center; }
.qr svg { display: block; width: 100%; height: auto; }

.casilla { flex-direction: row; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--texto); line-height: 1.4; }
.casilla input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--acento); }


/* =====================================================================
   Estética Workspace (UI kit): ajustes globales y piezas nuevas.
   ===================================================================== */

body { font-size: 16px; letter-spacing: 0.005em; }

h1 { font-weight: 500; font-size: 38px; letter-spacing: -0.02em; }
h2 { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--texto-suave); }
.pregunta { font-weight: 500; font-size: 30px; }
.etiqueta { font-size: 14px; }
.marca { font-weight: 600; letter-spacing: -0.03em; }

.tarjeta, .lista, .resumen, .lista-editable { border: none; border-radius: var(--radio); background: var(--superficie); }
.tarjeta { padding: 20px; }
.lista li + li, .datos div + div, .fila-resumen { border-color: rgba(255, 255, 255, 0.06); }
.lista a { padding: 14px 18px; min-height: 64px; }
.lista a:hover, .tarea:hover { background: var(--superficie-2); }
.fila-texto strong { font-size: 16px; font-weight: 600; }
.fila-texto span { font-size: 14px; }

input, select, textarea { border-radius: var(--radio-chico); background: var(--superficie); border-color: var(--borde); font-family: var(--cuerpo); }
input[type=search] { border-radius: 999px; padding-left: 44px; background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%238C8C8A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") no-repeat 16px center; }

.boton { font-weight: 600; letter-spacing: 0.01em; }
.boton-secundario { font-weight: 600; border-color: var(--borde); }

/* Píldora blanca con círculo, como "New Task" */
.boton-blanco {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 22px 0 6px;
  border: none; border-radius: 999px;
  background: var(--blanco); color: var(--sobre-acento);
  font: 600 16px var(--cuerpo); text-decoration: none; cursor: pointer;
}
.boton-blanco:hover { color: var(--sobre-acento); background: #FFFFFF; }
.boton-blanco .mas {
  width: 40px; height: 40px; border-radius: 50%;
  background: #E2E2DE; display: inline-flex; align-items: center; justify-content: center;
}
.boton-blanco .mas svg { width: 18px; height: 18px; }

/* Botón redondo con contorno (buscar, filtros, ↗) */
.boton-redondo, .boton-icono, .icono-redondo {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--borde); background: transparent; color: var(--texto);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; text-decoration: none;
}
.boton-redondo:hover, .boton-icono:hover, .icono-redondo:hover { color: var(--texto); background: var(--superficie-2); }
.boton-redondo svg, .boton-icono svg { width: 20px; height: 20px; }
.boton-icono { background: var(--blanco); color: var(--sobre-acento); border: none; }
.boton-icono:hover { background: #FFFFFF; color: var(--sobre-acento); }

/* Chips de filtro: el activo es blanco */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--borde); background: transparent; color: var(--texto);
  font: 500 15px var(--cuerpo); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.chip[aria-pressed=true] { background: var(--blanco); color: var(--sobre-acento); border-color: var(--blanco); }
.chip .cuenta { font-size: 12px; color: var(--texto-suave); }
.chip[aria-pressed=true] .cuenta { color: #6B6B68; }

/* Pestañas con el mismo lenguaje de chips */
.pestanas { border-bottom: none; background: var(--fondo); }
.pestanas [role=tab] { height: 44px; padding: 0 18px; font-weight: 500; font-size: 15px; }
.pestanas [role=tab][aria-selected=true] { background: var(--blanco); color: var(--sobre-acento); border-color: var(--blanco); }

/* Etiquetas de fuente (LinkedIn, Email…) */
.pildora { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--superficie-3); color: var(--texto-medio); font-size: 12px; font-weight: 500; white-space: nowrap; }
.pildora.lima { background: var(--acento); color: var(--sobre-acento); }
.pildora.oscura { background: rgba(0, 0, 0, 0.12); color: var(--sobre-acento); }

/* Puntos de nivel (rojo → verde) */
.puntos { display: inline-flex; gap: 4px; padding: 4px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); }
.puntos i { width: 12px; height: 12px; border-radius: 50%; background: #464646; }
.puntos i.on:nth-child(1) { background: #FF8A7A; }
.puntos i.on:nth-child(2) { background: #FFB36B; }
.puntos i.on:nth-child(3) { background: #FFDF6B; }
.puntos i.on:nth-child(4) { background: #B8F06B; }
.puntos i.on:nth-child(5) { background: #7BEA7B; }

/* Avatar con aro, como las fotos del kit */
.avatar { background: #E4E4E0; color: #1A1A1A; box-shadow: 0 0 0 3px var(--superficie), 0 0 0 4px rgba(255, 255, 255, 0.18); font-weight: 600; }
.avatar.grande { width: 72px; height: 72px; font-size: 24px; }
.avatar.lima { background: var(--acento); }
.avatares { display: inline-flex; }
.avatares .avatar { width: 36px; height: 36px; font-size: 12px; }
.avatares .avatar + .avatar { margin-left: -10px; }

/* Tarjeta con esquina recortada y botón ↗ */
.muesca { position: relative; display: block; color: inherit; text-decoration: none; }
.muesca:hover { color: inherit; }
.muesca-cuerpo {
  background: var(--superficie); border-radius: var(--radio); padding: 20px;
  display: flex; flex-direction: column; gap: 14px; min-height: 100%;
  -webkit-mask: radial-gradient(circle 33px at calc(100% - 26px) 26px, #0000 97%, #000);
  mask: radial-gradient(circle 33px at calc(100% - 26px) 26px, #0000 97%, #000);
  transition: background 0.15s;
}
.muesca:hover .muesca-cuerpo { background: var(--superficie-2); }
.muesca-flecha {
  position: absolute; top: 2px; right: 2px; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--borde); display: flex; align-items: center; justify-content: center; color: var(--texto);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.muesca-flecha svg { width: 18px; height: 18px; }
.muesca:hover .muesca-flecha { background: var(--blanco); color: var(--sobre-acento); border-color: var(--blanco); transform: rotate(45deg); }
.muesca .nombre { font-size: 26px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }
.muesca .cargo { font-size: 14px; color: var(--texto-suave); }
.muesca .pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.muesca .mini { font-size: 12px; color: var(--texto-suave); display: block; margin-bottom: 6px; }
.muesca.lima .muesca-cuerpo { background: var(--acento); color: var(--sobre-acento); }
.muesca.lima .cargo, .muesca.lima .mini { color: rgba(14, 14, 14, 0.6); }
.muesca.lima .muesca-flecha { border-color: rgba(198, 255, 61, 0.5); color: var(--acento); }
.muesca.lima .avatar { box-shadow: 0 0 0 3px var(--acento), 0 0 0 4px rgba(0, 0, 0, 0.15); }
.rejilla { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Carrusel horizontal de tarjetas (sesiones del día) */
.carrusel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 4px; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { flex: 0 0 min(82%, 300px); scroll-snap-align: start; }

/* Cifras grandes y finas: "34 Deals" */
.cifras { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; }
.cifra-kpi { display: flex; align-items: flex-start; gap: 6px; }
.cifra-kpi strong { font-size: 52px; font-weight: 300; line-height: 0.9; letter-spacing: -0.03em; }
.cifra-kpi span { font-size: 14px; color: var(--texto-suave); align-self: flex-end; padding-bottom: 4px; }
.cifra-kpi em { font-style: normal; font-size: 11px; font-weight: 700; height: 18px; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); display: inline-flex; align-items: center; justify-content: center; }
.cifra-kpi em.rojo { background: var(--peligro); }

/* Línea de horario del día ("Your Schedule") */
.horario { display: flex; align-items: center; gap: 10px; background: var(--blanco); color: var(--sobre-acento); border-radius: 999px; padding: 6px; min-height: 60px; }
.horario-titulo { padding: 0 6px 0 12px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.horario-pista { position: relative; flex: 1; height: 48px; border-radius: 999px; background: #E6E6E2; overflow: hidden; }
.horario-bloque { position: absolute; top: 0; bottom: 0; background: var(--acento); border-radius: 999px; display: flex; align-items: center; padding: 0 6px; min-width: 48px; text-decoration: none; color: var(--sobre-acento); }
.horario-bloque .avatar { width: 34px; height: 34px; font-size: 11px; box-shadow: 0 0 0 2px var(--acento); background: #FFFFFF; }
.horario-ahora { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sobre-acento); }
.horario-ahora::after { content: attr(data-hora); position: absolute; top: 3px; left: 50%; transform: translateX(-50%); background: var(--sobre-acento); color: var(--blanco); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.horario-vacio { flex: 1; font-size: 14px; color: #555; padding: 0 8px; }

/* Navegación: barra flotante, el activo es una píldora blanca */
.navegacion {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 440px); margin: 0;
  display: flex; justify-content: space-between; gap: 4px;
  padding: 6px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 999px;
  background: var(--barra); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
@media (min-width: 760px) { .navegacion { bottom: 20px; width: 440px; max-width: none; border-radius: 999px; padding: 6px; } }
.navegacion a {
  flex: 1 1 0; flex-direction: row; gap: 8px; min-height: 52px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--texto-suave);
  transition: background 0.2s, color 0.2s, flex-grow 0.2s;
}
.navegacion a:hover { color: var(--texto); }
.navegacion a span { display: none; }
.navegacion a[aria-current=page] { flex-grow: 2.2; background: var(--blanco); color: var(--sobre-acento); }
.navegacion a[aria-current=page] span { display: inline; }
.app:has(.navegacion) .contenido { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.aviso { bottom: calc(92px + env(safe-area-inset-bottom)); }

/* Estados y tareas */
.pastilla { height: 28px; padding: 0 12px; font-weight: 600; }
.tarea { border-radius: 20px; border-width: 1px; }
.destacado { border-radius: var(--radio); padding: 22px; }
.destacado .grande { font-weight: 600; font-size: 30px; }

/* Asistente de cards */
.card-pregunta { border: none; border-radius: 32px; padding: 28px 22px 22px; }
.progreso { height: 4px; background: var(--superficie-2); }
.opcion { border-radius: 20px; border: 1px solid var(--borde); font-weight: 500; font-size: 16px; min-height: 58px; padding: 12px 18px; }
.opciones.compactas .opcion { font-weight: 500; min-height: 44px; }
.opcion[aria-pressed=true] { background: var(--blanco); border-color: var(--blanco); color: var(--sobre-acento); }
.opcion[aria-pressed=true] small { color: #5C5C59; }
.campo-grande { font-weight: 500; font-size: 26px; height: 64px; }
.fila-resumen .editar { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
.cifra { font-weight: 300; font-size: 48px; letter-spacing: -0.03em; }
.hoja, .dialogo { border: none; border-radius: 28px 28px 0 0; background: var(--superficie); }
.dialogo { border-radius: 28px; }
.linea-dinero.total span:last-child { font-weight: 300; font-size: 30px; }

/* Cifras en tres columnas: número arriba, texto abajo */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cifra-kpi { flex-wrap: wrap; row-gap: 8px; }
.cifra-kpi span { flex-basis: 100%; padding: 0; order: 3; }
.carrusel > :only-child { flex-basis: 100%; }

/* Catálogo de flash */
.asistente-imagen { width: 88px; height: 88px; object-fit: cover; border-radius: 20px; background: var(--superficie-2); }
.flash-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 620px) { .flash-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.flash-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 14px; border: none; border-radius: var(--radio); background: var(--superficie); color: inherit; text-align: left; cursor: pointer; font: inherit; text-decoration: none; }
.flash-card:hover { background: var(--superficie-2); color: inherit; }
.flash-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; background: #EDEDE9; display: block; }
.flash-card .titulo { font-weight: 600; font-size: 15px; padding: 0 6px; line-height: 1.2; }
.flash-card .meta { font-size: 13px; color: var(--texto-suave); padding: 0 6px; }
.flash-card .precio { position: absolute; top: 16px; left: 16px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; }
.flash-card .estado { position: absolute; top: 16px; right: 16px; }
.flash-card.apagado img { opacity: 0.45; filter: grayscale(1); }
.flash-card[aria-pressed=true] { outline: 2px solid var(--acento); outline-offset: 2px; }
.flash-grande { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; background: #EDEDE9; display: block; }
.horarios { display: flex; flex-direction: column; gap: 14px; }
.horarios .dia { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 8px; display: block; }


/* ---------- Carga: esqueletos, barra superior y botones ocupados ---------- */

.esqueleto {
  display: flex; flex-direction: column; gap: 18px;
  padding: calc(24px + env(safe-area-inset-top)) 20px 120px;
  animation: aparece 0.15s ease both;
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.sk {
  border-radius: 999px;
  background: linear-gradient(100deg, var(--superficie) 30%, var(--superficie-3) 50%, var(--superficie) 70%) 0 0 / 300% 100%;
  animation: brillo 1.3s ease-in-out infinite;
}
@keyframes brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk-linea { height: 14px; }
.sk-fina { height: 10px; opacity: 0.8; }
.sk-titulo { height: 38px; width: 50%; border-radius: 14px; }
.sk-pildora { height: 44px; width: 100%; }
.sk-bloque { width: 100%; border-radius: var(--radio); }
.sk-cuadro { aspect-ratio: 1; height: auto; }
.sk-campo { height: 48px; width: 100%; border-radius: var(--radio-chico); }
.sk-circulo { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.sk-48 { width: 48px; height: 48px; }
.sk-col { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.sk-filab { display: flex; gap: 10px; align-items: center; }
.sk-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sk-dos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sk-tarjeta, .sk-caja { background: var(--superficie); border-radius: var(--radio); }
.sk-tarjeta { display: flex; gap: 14px; align-items: flex-start; padding: 20px; }
.sk-tarjeta .sk, .sk-caja .sk { background-image: linear-gradient(100deg, var(--superficie-2) 30%, var(--superficie-3) 50%, var(--superficie-2) 70%); }
.sk-caja { display: flex; flex-direction: column; }
.sk-pad { padding: 20px; gap: 14px; }
.sk-fila { display: flex; gap: 14px; align-items: center; padding: 16px 18px; }
.sk-fila + .sk-fila { border-top: 1px solid rgba(255, 255, 255, 0.05); }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } .esqueleto { animation: none; } }

/* Barra fina arriba mientras algo carga */
.barra-carga {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; overflow: hidden;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.barra-carga.activa { opacity: 1; }
.barra-carga::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
  background: var(--acento); border-radius: 0 3px 3px 0; box-shadow: 0 0 12px var(--acento);
  animation: carga 1s ease-in-out infinite;
}
@keyframes carga { from { left: -40%; } to { left: 100%; } }

/* Botón trabajando: texto tenue y un círculo que gira */
button[aria-busy=true], a[aria-busy=true] { position: relative; pointer-events: none; color: transparent !important; }
button[aria-busy=true] > *, a[aria-busy=true] > * { visibility: hidden; }
button[aria-busy=true]::after, a[aria-busy=true]::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid currentColor; border-color: var(--texto) var(--texto) transparent transparent;
  animation: gira 0.7s linear infinite;
}
.boton[aria-busy=true]::after, .boton-blanco[aria-busy=true]::after, .boton-icono[aria-busy=true]::after { border-color: var(--sobre-acento) var(--sobre-acento) transparent transparent; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Toque: respuesta inmediata al presionar */
button:active:not(:disabled), .boton-blanco:active, .muesca:active, .flash-card:active, .lista a:active { transform: scale(0.98); }
.navegacion a:active { transform: scale(0.94); }

/* Botones y avisos dentro de una tarjeta lima */
.muesca.lima .boton { background: var(--sobre-acento); color: var(--acento); }
.muesca.lima .boton:hover { background: #1E1E1E; }
.muesca.lima .boton-secundario { color: var(--sobre-acento); border-color: rgba(14, 14, 14, 0.35); }
.muesca.lima .boton-texto { color: rgba(14, 14, 14, 0.7); }
.muesca.lima .nota-aviso { background: rgba(14, 14, 14, 0.08); color: var(--sobre-acento); }
.muesca.lima .nombre { color: var(--sobre-acento); }

/* Opción con casilla (confirmaciones del consentimiento) */
.opcion-check { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; font-weight: 500; line-height: 1.35; }
.opcion-check::before { content: ''; width: 24px; height: 24px; flex-shrink: 0; border-radius: 8px; border: 1.5px solid var(--borde); }
.opcion-check[aria-pressed=true]::before { content: '✓'; background: var(--sobre-acento); border-color: var(--sobre-acento); color: var(--acento); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }

/* Modo sesión */
.cronometro { font-size: 64px; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.cronometro.corriendo { color: var(--acento); }
.barra-sesion {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 520px); display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 8px;
  background: var(--barra); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 999px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); z-index: 5;
}
.barra-sesion .boton { flex: 1; }
.barra-sesion .boton-texto { padding: 0 16px; }

/* Números */
.numeros-kpi .cifra-kpi strong { font-size: clamp(26px, 8vw, 40px); }
.grafica { width: 100%; height: auto; display: block; overflow: visible; }
.grafica-guia { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.grafica-eje { fill: var(--texto-suave); font-size: 10px; font-family: var(--cuerpo); }
.grafica-ingreso { fill: var(--acento); background: var(--acento); }
.grafica-gasto { fill: #8C8C8A; background: #8C8C8A; }
.grafica-zona { fill: transparent; }
.grafica-mes { cursor: pointer; outline: none; }
.grafica-mes.futuro rect:not(.grafica-zona) { opacity: 0.35; }
.grafica-mes.activo .grafica-zona, .grafica-mes:focus-visible .grafica-zona { fill: rgba(255, 255, 255, 0.05); }
.grafica-info { font-size: 14px; color: var(--texto-medio); min-height: 20px; }
.leyenda { display: flex; gap: 16px; font-size: 13px; color: var(--texto-medio); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.barrita { height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.barrita i { display: block; height: 100%; border-radius: 999px; background: var(--acento); }
.tabla-datos { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-datos th { text-align: left; font-weight: 600; color: var(--texto-suave); font-size: 12px; padding: 6px 4px; }
.tabla-datos td { padding: 8px 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.tabla-datos td:not(:first-child), .tabla-datos th:not(:first-child) { text-align: right; }

/* Biblioteca de materiales */
.materiales-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .materiales-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.material { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 6px 6px 10px; border: 1.5px solid transparent; border-radius: 20px; background: var(--superficie); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.material img, .material-inicial { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 15px; background: var(--superficie-2); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; margin-bottom: 6px; }
.material-marca { font-size: 11px; color: var(--texto-suave); padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.material-nombre { font-size: 13px; font-weight: 600; padding: 0 4px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.material[aria-pressed=true] { border-color: var(--acento); background: var(--superficie-2); }
.material[aria-pressed=true]::after { content: '✓'; position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--superficie-2); }

/* Ajustes tipo perfil */
.perfil-cabecera { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "foto datos" "boton boton"; gap: 14px 16px; align-items: center; padding: 22px 20px 20px; border-radius: var(--radio); background: var(--superficie); }
.perfil-foto { grid-area: foto; position: relative; width: 84px; height: 84px; padding: 0; border: none; border-radius: 50%; background: var(--superficie-3); cursor: pointer; }
.perfil-foto img, .perfil-iniciales { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; color: var(--sobre-acento); background: #E4E4E0; box-shadow: 0 0 0 3px var(--superficie), 0 0 0 5px rgba(255, 255, 255, 0.15); }
.perfil-foto-editar { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--blanco); color: var(--sobre-acento); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--superficie); }
.perfil-foto-editar svg { width: 16px; height: 16px; }
.perfil-datos { grid-area: datos; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.perfil-datos h1 { font-size: 28px; overflow-wrap: anywhere; }
.perfil-color { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); margin-top: 4px; }
.perfil-color i { width: 14px; height: 14px; border-radius: 50%; background: var(--color-marca, var(--acento)); box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px rgba(255, 255, 255, 0.2); }
.perfil-cabecera > .boton-secundario { grid-area: boton; width: 100%; }
.colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 10px; }
.color { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--c); cursor: pointer; box-shadow: 0 0 0 3px var(--superficie); }
.color[aria-checked=true] { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 5px var(--blanco); }
.color[aria-checked=true]::after { content: '✓'; color: var(--sobre-acento); font-weight: 700; font-size: 18px; }
.lista-ajustes li + li { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.fila-ajuste { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 18px; min-height: 64px; border: none; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.fila-ajuste:hover { background: var(--superficie-2); color: inherit; }
.fila-icono { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--superficie-3); display: flex; align-items: center; justify-content: center; }
.fila-icono svg { width: 20px; height: 20px; }
.fila-chevron { font-size: 24px; color: var(--texto-suave); line-height: 1; }
.fila-ajuste.peligro, .fila-ajuste.peligro .fila-icono { color: var(--peligro); }
.hoja-grande { max-height: 92dvh; overflow-y: auto; }
.hoja-grande .panel-ajustes { gap: 14px; }
.hoja-grande .tarjeta { background: var(--superficie-2); }
.avatar-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; align-self: center; margin-bottom: 4px; box-shadow: 0 0 0 2px var(--acento); }
#lista-ajustes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 8px; }
#lista-ajustes > .seccion { margin: 0; }
#lista-ajustes > .seccion > h2 { margin: 0 0 10px 4px; }

/* ---------- Fase 4: tarjeta de fidelidad, premios, curado ---------- */
.tarjeta-sellos { background: var(--superficie); border-radius: 26px; padding: 20px; display: flex; flex-direction: column; gap: 16px; border: 1px solid rgba(255, 255, 255, 0.06); }
.tarjeta-sellos.lista { background: var(--acento); color: var(--sobre-acento); }
.tarjeta-sellos-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tarjeta-sellos-cabecera strong { font-size: 20px; font-weight: 600; }
.tarjeta-sellos-cabecera span { font-size: 13px; opacity: 0.7; }
.sellos { display: grid; grid-template-columns: repeat(var(--columnas, 5), minmax(0, 1fr)); gap: 10px; }
.sello { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; border: 1.5px dashed rgba(255, 255, 255, 0.22); color: var(--texto-suave); max-width: 64px; width: 100%; justify-self: center; }
.sello.lleno { border: none; background: var(--acento); color: var(--sobre-acento); font-size: 20px; }
.tarjeta-sellos.lista .sello.lleno { background: var(--sobre-acento); color: var(--acento); }
.tarjeta-sellos-premio { margin: 0; font-size: 15px; }
.tarjeta-sellos-premio span { opacity: 0.65; }
.bloque-fidelidad { display: flex; flex-direction: column; gap: 12px; }
.premio { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--acento-suave); border: 1px solid var(--acento); border-radius: 20px; padding: 14px 16px; }
.premio > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.premio strong { font-size: 17px; }
.premio span { font-size: 13px; color: var(--texto-suave); }
.premio .boton-secundario { flex: none; }
.invitar { display: flex; flex-direction: column; gap: 12px; }
.invitar .enlace-generado { word-break: break-all; }
.curado-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.curado-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; display: block; }
.curado-nota { margin: 0; font-size: 15px; }
.invitacion { margin: 0 auto 12px; max-width: 560px; width: calc(100% - 32px); padding: 12px 16px; border-radius: 18px; background: var(--acento-suave); color: var(--texto); font-size: 14px; line-height: 1.4; }
.invitacion strong { color: var(--acento); }

/* ---------- Reseñas ---------- */
.estrellas-elegir { display: flex; gap: 6px; margin-top: 12px; }
.estrellas-elegir button { flex: 1; max-width: 64px; aspect-ratio: 1; padding: 6px; border: none; background: none; cursor: pointer; color: var(--superficie-2, #333); transition: transform .15s ease, color .15s ease; }
.estrellas-elegir button svg { width: 100%; height: 100%; fill: currentColor; }
.estrellas-elegir button.llena { color: var(--acento); }
.estrellas-elegir button:active { transform: scale(.9); }
.estrellas-palabra { font-size: 20px; font-weight: 600; color: var(--acento); min-height: 28px; margin-top: 8px; }
.estrellas { color: var(--acento); letter-spacing: 2px; }
.resena-item { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.resena-item p { margin: 0; line-height: 1.45; }
.resena-item .resena-pie { font-size: 13px; color: var(--texto-suave); }
.resena-item.oculta { opacity: .55; }
.valoracion { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); }
.valoracion b { color: var(--acento); font-weight: 600; }
button.valoracion { border: none; background: none; padding: 2px 6px; font: inherit; font-size: 13px; cursor: pointer; }
a.boton-enlace { width: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.asistente-quien .valoracion { align-self: center; }
.invitacion { margin-top: 12px; }

/* ---------- Pantallas simples (oct 2026): un siguiente paso por pantalla ---------- */
.boton-mas {
  align-self: flex-end;
  width: 48px; height: 48px; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acento); color: var(--sobre-acento);
}
.boton-mas:hover { background: var(--acento-hover); color: var(--sobre-acento); }
.boton-mas svg { width: 22px; height: 22px; }

.cita-grande {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px; border-radius: var(--radio);
  background: var(--acento); color: var(--sobre-acento); text-decoration: none;
}
.cita-grande:hover { background: var(--acento-hover); color: var(--sobre-acento); }
.cita-grande .pildora { align-self: flex-start; }
.cita-hora { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cita-hora strong { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1.1; }
.cita-hora span { font-size: 14px; font-weight: 600; white-space: nowrap; }
.cita-quien { display: flex; flex-direction: column; gap: 2px; }
.cita-quien strong { font-size: 20px; font-weight: 600; }
.cita-quien span { font-size: 15px; }
.cita-despues { display: flex; justify-content: space-between; gap: 12px; padding: 0 4px; font-size: 14px; color: var(--texto-suave); }
.cita-despues a { font-weight: 600; text-decoration: none; white-space: nowrap; }

.lista .fila-pendiente {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 18px; min-height: 64px; border: none; background: none;
  color: var(--texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.lista .fila-pendiente:hover { background: var(--superficie-2); }
.punto { width: 10px; height: 10px; flex: none; border-radius: 999px; background: var(--superficie-3); }
.punto.urgente { background: var(--aviso-texto); }
.pildora-accion {
  flex: none; padding: 9px 14px; border-radius: 999px;
  background: var(--blanco); color: var(--sobre-acento); font-size: 14px; font-weight: 600;
}
.fila-chevron.girar { transition: transform .15s; }
[aria-expanded="true"] .fila-chevron.girar { transform: rotate(90deg); }
.sublista { border-radius: 0; background: rgba(255, 255, 255, 0.03); }
.sublista .fila-pendiente { padding-left: 42px; min-height: 56px; }
.nota-centro { margin: 0; text-align: center; font-size: 14px; color: var(--texto-suave); }

/* Menú ⋯ y pasos del proyecto */
.menu-grupo { display: flex; flex-direction: column; gap: 8px; }
.menu-titulo { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); }
.menu-lista { display: flex; flex-direction: column; border-radius: 18px; background: var(--superficie-2); overflow: hidden; }
.menu-accion { display: flex; flex-direction: column; gap: 2px; padding: 15px 16px; min-height: 52px; border: none; background: none; color: var(--texto); font: 16px var(--cuerpo); text-align: left; cursor: pointer; }
.menu-accion + .menu-accion { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.menu-accion:hover { background: var(--superficie-3); }
.menu-accion small { font-size: 13px; color: var(--texto-suave); }
.menu-accion.peligro { color: var(--peligro); }

.cabecera-proyecto { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.boton-puntos { width: 44px; height: 44px; flex: none; border-radius: 999px; border: 1px solid var(--borde); background: none; color: var(--texto); font: 600 20px var(--cuerpo); letter-spacing: 1px; cursor: pointer; }
.boton-puntos:hover { background: var(--superficie-2); }

.que-sigue { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radio); background: var(--acento); color: var(--sobre-acento); }
.que-sigue .mini { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; }
.que-sigue strong { display: block; font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.15; }
.que-sigue p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
.que-sigue .boton-oscuro { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; border: none; border-radius: 999px; background: var(--sobre-acento); color: var(--acento); font: 600 16px var(--cuerpo); text-decoration: none; cursor: pointer; }
.que-sigue .boton-claro { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; border: 1px solid rgba(14, 14, 14, 0.25); border-radius: 999px; background: none; color: var(--sobre-acento); font: 600 15px var(--cuerpo); cursor: pointer; }
.que-sigue.espera { background: var(--superficie); color: var(--texto); }
.que-sigue.espera .mini { color: var(--texto-suave); }
.que-sigue.espera p { color: var(--texto-medio); }
.que-sigue.espera .boton-claro { border-color: var(--borde); color: var(--texto); }
.que-sigue .acciones-que-sigue { display: flex; flex-direction: column; gap: 8px; }

.paso { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; min-height: 56px; border: none; background: none; color: var(--texto); font: 16px var(--cuerpo); text-align: left; cursor: pointer; }
.paso:hover { background: var(--superficie-2); }
.paso .marca { width: 26px; height: 26px; flex: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; border: 2px dashed var(--borde); }
.paso .marca.hecho { border: none; background: var(--acento); color: var(--sobre-acento); }
.paso .marca.medio { border-color: var(--aviso-texto); }
.paso .nombre-paso { flex: 1; min-width: 0; }
.paso .valor-paso { font-size: 15px; color: var(--texto-suave); text-align: right; }
.paso .valor-paso.alerta { color: var(--aviso-texto); }
.saldo-tarjeta { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 18px; border: none; border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.saldo-tarjeta:hover { background: var(--superficie-2); }
.saldo-tarjeta strong { display: block; font-family: var(--display); font-size: 28px; font-weight: 600; }
.saldo-tarjeta span { font-size: 14px; color: var(--texto-suave); }

/* Ficha del cliente */
.cabecera-cliente { display: flex; align-items: center; gap: 16px; }
.cabecera-cliente > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cabecera-cliente h1 { font-size: 26px; margin: 0; }
.acciones-rapidas { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; }
.accion-rapida { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px; min-height: 72px; border: none; border-radius: 18px; background: var(--superficie); color: var(--texto); font: 600 12px var(--cuerpo); text-decoration: none; cursor: pointer; }
.accion-rapida:hover { background: var(--superficie-2); color: var(--texto); }
.accion-rapida svg { width: 22px; height: 22px; display: block; }
.accion-rapida b { display: block; font-size: 20px; line-height: 22px; }
.boton-enlace { border: none; background: none; color: var(--acento); font: 600 15px var(--cuerpo); cursor: pointer; padding: 8px 0; min-height: 44px; }
.mini-sellos { display: inline-flex; gap: 4px; }
.mini-sellos i { width: 9px; height: 9px; border-radius: 999px; background: var(--superficie-3); }
.mini-sellos i.lleno { background: var(--acento); }
.que-sigue a.boton-oscuro, .que-sigue a.boton-claro { text-decoration: none; }

/* Lista de clientes compacta */
.lista-clientes a { min-height: 60px; padding: 10px 16px; gap: 12px; }
.lista-clientes .avatar { width: 40px; height: 40px; font-size: 14px; }