/* Ins. — inspiración por cliente. Capa visual tipo iPhone con acento morado. */
:root {
  --fondo-1: #f4f3f8; --fondo-2: #dfe5ec;
  --vidrio: rgba(255, 255, 255, .66); --vidrio-borde: rgba(255, 255, 255, .85);
  --tinta: #111114; --gris: #6e6e73; --gris-2: #aeaeb2; --linea: rgba(17, 17, 20, .08);
  --widget: #121214; --widget-2: #1e1e22;
  --morado: #1d1d1f; --morado-2: rgba(29, 29, 31, .62); --morado-suave: rgba(120, 120, 128, .16);
  --vidrio-tarjeta: rgba(255, 255, 255, .5); --contra: #fff;
  --rojo: #ff3b30; --verde: #34c759;
  --c: var(--morado);
  --r-xl: 30px; --r-lg: 22px; --r-md: 16px;
  --sombra: 0 12px 40px -12px rgba(15, 20, 40, .28), 0 2px 8px -2px rgba(15, 20, 40, .08);
  --brillo: inset 0 1px 1px rgba(255, 255, 255, .85), inset 0 -1px 1px rgba(255, 255, 255, .25), inset 0 0 0 .5px rgba(255, 255, 255, .35);
  --resorte: cubic-bezier(.2, .9, .25, 1.15);
  --resorte-suave: cubic-bezier(.25, .9, .3, 1);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --redonda: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --resorte: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
    --resorte-suave: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo-1: #141519; --fondo-2: #1c1a20;
    --vidrio: rgba(34, 32, 42, .62); --vidrio-borde: rgba(255, 255, 255, .08);
    --tinta: #f5f5f7; --gris: #98989f; --gris-2: #5a5a60; --linea: rgba(255, 255, 255, .08);
    --widget: #050507; --widget-2: #1a1a1f; --morado: #f5f5f7; --morado-2: rgba(245, 245, 247, .66); --morado-suave: rgba(255, 255, 255, .1);
    --vidrio-tarjeta: rgba(38, 38, 44, .5); --contra: #111;
    --brillo: inset 0 1px 1px rgba(255, 255, 255, .22), inset 0 -1px 1px rgba(255, 255, 255, .05), inset 0 0 0 .5px rgba(255, 255, 255, .12);
    --sombra: 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
/* Safari pinta la zona de sus barras con este color: es el tono de abajo del fondo, para que no quede una franja. */
html { background: #e2dfe3; }
@media (prefers-color-scheme: dark) { html { background: #1c1e21; } }
body {
  min-height: 100lvh; color: var(--tinta); font: 17px/1.4 var(--sans); -webkit-font-smoothing: antialiased;
  background: transparent;
  overscroll-behavior-y: none;
}
/* Fondo de pantalla del sistema Vidrio: fijo, cubre toda la pantalla y no se recalcula al hacer scroll. */
/* Se pasa del borde de abajo: en el iPhone las capas fijas no cubren la zona de la barra de Safari. */
body::before { content: ""; position: fixed; top: -80px; left: 0; right: 0; height: calc(100lvh + 240px); z-index: -2; pointer-events: none;
  background:
    radial-gradient(45% 40% at 15% 20%, #f6c9a6 0%, transparent 70%),
    radial-gradient(40% 45% at 85% 15%, #a9cdf0 0%, transparent 70%),
    radial-gradient(50% 45% at 70% 85%, #c7e6cf 0%, transparent 70%),
    radial-gradient(45% 40% at 20% 90%, #efc0d0 0%, transparent 70%),
    #dfe5ec; }
@media (prefers-color-scheme: dark) {
  body::before { background:
    radial-gradient(45% 40% at 15% 20%, #5a3a28 0%, transparent 70%),
    radial-gradient(40% 45% at 85% 15%, #1f3d5c 0%, transparent 70%),
    radial-gradient(50% 45% at 70% 85%, #1f4430 0%, transparent 70%),
    radial-gradient(45% 40% at 20% 90%, #4a2434 0%, transparent 70%),
    #141519; }
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--morado-2); outline-offset: 2px; }
.vidrio { background: var(--vidrio); border: 1px solid var(--vidrio-borde); -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9); box-shadow: var(--brillo), var(--sombra); }
.pulsar { transition: transform .35s var(--resorte); }
.pulsar:active { transform: scale(.94); transition-duration: .12s; }

/* ---------- Íconos inflados ---------- */
.ic { position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 28%; flex: none; isolation: isolate;
  background: rgba(255, 255, 255, .6); border: 1px solid var(--vidrio-borde); box-shadow: var(--brillo), 0 6px 16px -8px rgba(0, 0, 0, .3); color: var(--ic-c, var(--tinta)); }
@media (prefers-color-scheme: dark) { .ic { background: rgba(255, 255, 255, .1); } }
.ic::before { content: none; }
.ic svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ic--chico { width: 34px; height: 34px; }
.ic--chico svg { stroke-width: 2.6; }
.ic--mic { --ic-c: #ff375f; }
.ic--nota { --ic-c: #ff9f0a; }

.ic--link { --ic-c: #0a84ff; }
.ic--foto { --ic-c: #bf5af2; }
.ic--video { --ic-c: #30d158; }

/* ---------- Pantalla de carga ---------- */
.carga { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 18px;
  background: rgba(240, 242, 246, .72); -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8); color: var(--tinta); }
@media (prefers-color-scheme: dark) { .carga { background: rgba(14, 14, 18, .78); } }
.carga img { width: 112px; height: 112px; border-radius: 26%; box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .55); animation: aparecer .9s var(--resorte) both; }
.carga p { margin: 0; font: 800 34px/1 var(--redonda); letter-spacing: -.02em; animation: subir .7s .25s var(--resorte-suave) both; }
.carga small { color: var(--gris); font-size: 15px; animation: subir .7s .35s var(--resorte-suave) both; }
.carga .barra { width: 120px; height: 4px; border-radius: 4px; background: rgba(127,127,127,.22); overflow: hidden; margin-top: 10px; }
.carga .barra i { display: block; width: 40%; height: 100%; border-radius: 4px; background: var(--tinta); animation: correr 1.1s ease-in-out infinite; }
.carga.salir { animation: salirCarga .55s var(--resorte-suave) forwards; }
@keyframes aparecer { from { transform: scale(.4) rotate(-8deg); opacity: 0; } }
@keyframes subir { from { transform: translateY(14px); opacity: 0; } }
@keyframes correr { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes salirCarga { to { opacity: 0; transform: scale(1.15); visibility: hidden; } }

/* ---------- Bloqueo (entrar / crear código) ---------- */
.bloqueo { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; padding: calc(env(safe-area-inset-top) + 30px) 24px calc(env(safe-area-inset-bottom) + 20px); color: #fff; overflow-y: auto;
  background: radial-gradient(70% 50% at 15% 10%, #5a3a28 0%, transparent 70%), radial-gradient(60% 50% at 90% 20%, #1f3d5c 0%, transparent 70%), radial-gradient(70% 55% at 70% 95%, #1f4430 0%, transparent 70%), #121316; }
.bloqueo .fecha { font-size: 19px; font-weight: 600; opacity: .9; }
.bloqueo .hora { font: 200 84px/1 var(--sans); letter-spacing: -.03em; margin: 2px 0 18px; font-variant-numeric: tabular-nums; }
.bloqueo .candado { width: 22px; height: 22px; margin-bottom: 8px; opacity: .9; fill: none; stroke: #fff; stroke-width: 2; }
.bloqueo h2 { margin: 0; font-size: 20px; font-weight: 600; text-align: center; }
.bloqueo .ayuda { margin: 6px 0 0; min-height: 20px; font-size: 14px; opacity: .85; text-align: center; max-width: 300px; }
.puntos { display: flex; gap: 14px; height: 18px; margin: 20px 0 24px; }
.puntos i { width: 13px; height: 13px; border-radius: 50%; border: 1.6px solid rgba(255,255,255,.9); transition: background .15s, transform .3s var(--resorte); }
.puntos i.lleno { background: #fff; transform: scale(1.1); }
.puntos.temblar { animation: temblar .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes temblar { 15%, 55% { transform: translateX(-12px); } 35%, 75% { transform: translateX(12px); } 90% { transform: translateX(-4px); } }
.teclado { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px 24px; }
.tecla { width: 76px; height: 76px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; display: grid; place-content: center; line-height: 1; transition: background .3s, transform .3s var(--resorte); }
.tecla:active { background: rgba(255,255,255,.45); transform: scale(.92); transition-duration: .08s; }
.tecla b { font: 400 34px/1 var(--sans); }
.tecla small { font-size: 10px; font-weight: 700; letter-spacing: .18em; margin-top: 2px; opacity: .85; }
.tecla--texto { background: none; font-size: 16px; font-weight: 500; }
.tecla--texto:active { background: rgba(255,255,255,.12); }
.bloqueo .entrar { margin-top: 18px; min-height: 50px; padding: 0 30px; border: 0; border-radius: 99px; background: #fff; color: #111; font-weight: 700; opacity: 0; transform: translateY(10px) scale(.95); pointer-events: none; transition: opacity .25s, transform .4s var(--resorte); }
.bloqueo .entrar.ver { opacity: 1; transform: none; pointer-events: auto; }
.bloqueo .texto-libre { width: min(100%, 300px); margin-bottom: 14px; min-height: 52px; padding: 0 16px; border: 1px solid rgba(255,255,255,.35); border-radius: 16px; background: rgba(255,255,255,.14); color: #fff; font-size: 18px; text-align: center; }
.bloqueo .texto-libre::placeholder { color: rgba(255,255,255,.6); }

/* ---------- Estructura ---------- */
.vista { max-width: 560px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 14px) 18px calc(env(safe-area-inset-bottom) + 120px); }
.titulo-grande { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 4px; }
.titulo-grande h1 { margin: 0; font: 800 34px/1.1 var(--redonda); letter-spacing: -.02em; }
.titulo-grande img { width: 38px; height: 38px; border-radius: 28%; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); }
.saludo { margin: 0 2px 18px; color: var(--gris); font-size: 15px; }
.saludo b { color: var(--tinta); font-weight: 600; }
.seccion { margin: 26px 4px 12px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }

/* Widgets de inicio */
.widgets { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; }
.widget { border-radius: var(--r-xl); padding: 16px; min-height: 168px; position: relative; overflow: hidden; }
.widget--negro { background: var(--widget); color: #fff; box-shadow: var(--brillo), 0 14px 34px -14px rgba(0, 0, 0, .7); }
.widget--negro .etq { color: rgba(255,255,255,.55); }
.etq { font-size: 13px; font-weight: 600; color: var(--gris); }
.anillo { position: relative; width: 96px; height: 96px; margin: 8px 0 0; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray 1s var(--resorte-suave); }
.anillo .num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 800 30px/1 var(--redonda); }
.anillo .num small { font: 600 11px var(--sans); color: rgba(255,255,255,.55); }
.ultimo p { margin: 8px 0 0; font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ultimo .quien { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--gris); }
.ultimo .quien i { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Íconos de clientes */
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 10px; list-style: none; margin: 0; padding: 4px 2px; }
.app { display: grid; justify-items: center; gap: 7px; border: 0; background: none; padding: 0; width: 100%; color: var(--tinta); }
.marca { position: relative; width: 66px; height: 66px; border-radius: 28%; display: grid; place-items: center; background: var(--fondo-app); flex: none;
  box-shadow: inset 0 2px 1px rgba(255,255,255,.35), inset 0 -8px 14px rgba(0,0,0,.16), 0 10px 22px -8px var(--sombra-app, rgba(0,0,0,.4)); }
.marca::before { content: ""; position: absolute; inset: 4% 12% 55%; border-radius: 50%; background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0)); pointer-events: none; }
.marca img { width: 66%; height: 66%; object-fit: contain; }
.globo { position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--rojo); color: #fff; font: 700 14px/24px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--fondo-1); animation: aparecer .6s var(--resorte) both; }
.app .nombre { font-size: 12.5px; font-weight: 500; text-align: center; line-height: 1.15; max-width: 84px; }
.apps li { animation: entrarApp .6s var(--resorte) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes entrarApp { from { opacity: 0; transform: scale(.6) translateY(10px); } }

/* Dock */
.dock { position: fixed; z-index: 30; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 14px); transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 8px 18px; border-radius: 34px; }
.dock button { border: 0; background: none; display: grid; justify-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--gris); min-width: 52px; }
.dock button.activo { color: var(--morado); }
.dock .principal { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); box-shadow: 0 10px 24px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.dock .principal svg { width: 26px; height: 26px; fill: none; stroke: var(--contra); stroke-width: 2.4; stroke-linecap: round; }
.dock svg.chico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Cliente ---------- */
.cliente-fondo { position: fixed; inset: 0 0 auto; height: 360px; z-index: -1; pointer-events: none;
  background: radial-gradient(100% 100% at 15% 0%, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%); }
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.atras { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 14px 0 8px; border-radius: 99px; font-weight: 600; color: var(--tinta); }
.atras svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.encabezado { display: flex; align-items: center; gap: 14px; margin: 4px 2px 18px; }
.encabezado .marca { width: 60px; height: 60px; }
.encabezado h1 { margin: 0; font: 800 30px/1.05 var(--redonda); letter-spacing: -.02em; }
.encabezado p { margin: 3px 0 0; color: var(--gris); font-size: 14px; }

.segmentos { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 12px; background: rgba(118, 118, 128, .14); }
.segmentos button { position: relative; z-index: 1; min-height: 36px; border: 0; background: none; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--tinta); opacity: .7; transition: opacity .2s; }
.segmentos button[aria-checked="true"] { opacity: 1; }
.segmentos .pulgar { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 9px; background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .5s var(--resorte); }
@media (prefers-color-scheme: dark) { .segmentos .pulgar { background: rgba(255,255,255,.24); } .hoja { background: rgba(36, 36, 40, .78); } }
.ciclo { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; font-size: 15px; }
.ciclo input { min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: rgba(118,118,128,.14); }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 12px -18px 0; padding: 2px 18px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; min-height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--linea); background: var(--vidrio); font-size: 14px; font-weight: 500; transition: background .2s, color .2s, transform .35s var(--resorte); }
.chips button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--contra); }

/* Grabadora */
.grabadora { margin-top: 16px; border-radius: var(--r-xl); padding: 18px; background: var(--widget); color: #fff; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; box-shadow: var(--brillo), 0 18px 40px -18px rgba(0,0,0,.8); transition: box-shadow .4s; }
.grabadora.activa { box-shadow: 0 18px 50px -12px rgba(255,45,85,.55); }
.boton-grabar { width: 74px; height: 74px; border-radius: 50%; border: 4px solid rgba(255,255,255,.9); background: none; display: grid; place-items: center; padding: 0; }
.boton-grabar i { width: 56px; height: 56px; border-radius: 50%; background: var(--rojo); transition: width .45s var(--resorte), height .45s var(--resorte), border-radius .45s var(--resorte); }
.grabadora.activa .boton-grabar i { width: 28px; height: 28px; border-radius: 8px; }
.grabadora h2 { margin: 0; font-size: 18px; font-weight: 700; }
.grabadora .estado { margin: 2px 0 0; font-size: 14px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.onda { display: flex; align-items: center; gap: 3px; height: 34px; margin-top: 8px; }
.onda i { flex: 1; height: 4px; border-radius: 3px; background: rgba(255,255,255,.25); transition: height .09s; }
.grabadora.activa .onda i { background: var(--rojo); }

.acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.accion { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: var(--r-lg); font-size: 14px; font-weight: 600; color: var(--tinta); }

/* Lista tipo notificaciones */
.filtros { margin: 26px 0 12px; }
.entradas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.entrada { border-radius: var(--r-lg); padding: 14px; animation: entrar .55s var(--resorte-suave) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes entrar { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.entrada.salir { animation: irse .35s ease forwards; }
@keyframes irse { to { opacity: 0; transform: translateX(60px) scale(.96); } }
.entrada .cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.entrada .cabeza div { flex: 1; min-width: 0; }
.entrada .cabeza strong { display: block; font-size: 15px; }
.entrada .cabeza .cuando { display: block; font-size: 13px; color: var(--gris); }
.entrada .chipitos { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.entrada .chipitos span { padding: 2px 9px; border-radius: 99px; background: var(--morado-suave); color: var(--tinta); font-size: 12px; font-weight: 600; border: 1px solid var(--vidrio-borde); }

.entrada p { margin: 0 0 8px; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.entrada p.vacio-tx { color: var(--gris); font-style: italic; }
.entrada audio { width: 100%; height: 40px; margin: 2px 0 8px; }
.entrada img, .entrada video { width: 100%; max-height: 380px; object-fit: cover; border-radius: 14px; margin-bottom: 8px; background: #000; }
.entrada a.link { display: block; margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(10,132,255,.1); color: #0a84ff; font-weight: 600; font-size: 15px; text-decoration: none; overflow-wrap: anywhere; }
.entrada .botones { display: flex; gap: 6px; border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 4px; }
.entrada .botones button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 99px; background: rgba(118,118,128,.14); font-size: 13px; font-weight: 600; }
.entrada .botones .borrar { margin-left: auto; color: var(--rojo); background: rgba(255,59,48,.1); }
.vacio { padding: 30px 16px; border-radius: var(--r-lg); text-align: center; color: var(--gris); }
.vacio svg { width: 44px; height: 44px; margin-bottom: 6px; stroke: var(--gris); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.esqueleto { height: 96px; border-radius: var(--r-lg); background: linear-gradient(100deg, var(--vidrio) 30%, rgba(255,255,255,.9) 50%, var(--vidrio) 70%); background-size: 300% 100%; animation: brillo 1.2s linear infinite; }
@media (prefers-color-scheme: dark) { .esqueleto { background-image: linear-gradient(100deg, var(--vidrio) 30%, rgba(255,255,255,.08) 50%, var(--vidrio) 70%); } }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Hoja inferior */
.velo { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.velo.ver { opacity: 1; }
.hoja { position: fixed; z-index: 71; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; padding: 8px 18px calc(env(safe-area-inset-bottom) + 18px); border-radius: 30px 30px 0 0; background: rgba(250, 250, 252, .78); -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9); border: 1px solid var(--vidrio-borde); border-bottom: 0; box-shadow: 0 -10px 40px rgba(0,0,0,.2); transform: translateY(105%); transition: transform .6s var(--resorte-suave); }
.hoja.ver { transform: none; }
.hoja .agarre { width: 38px; height: 5px; border-radius: 3px; background: var(--gris-2); margin: 0 auto 12px; }
.hoja .cabeza-hoja { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hoja h2 { margin: 0; font-size: 18px; font-weight: 700; }
.hoja .cabeza-hoja button { border: 0; background: none; font-weight: 600; font-size: 16px; padding: 8px 4px; color: var(--tinta); }
.hoja .cabeza-hoja .guardar { color: var(--morado); }
.hoja textarea, .hoja input { width: 100%; margin-bottom: 10px; padding: 14px; border: 1px solid var(--linea); border-radius: 16px; background: var(--vidrio); font-size: 17px; resize: none; }
.hoja .opcion { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; margin-bottom: 8px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--vidrio); font-weight: 600; text-align: left; color: var(--tinta); }
.hoja .opcion.peligro { color: var(--rojo); }
.hoja .nota-pie { margin: 8px 4px 0; font-size: 13px; color: var(--gris); text-align: center; }

/* Dynamic Island */
.isla { position: fixed; z-index: 90; top: calc(env(safe-area-inset-top) + 8px); left: 50%; transform: translateX(-50%) scale(.5, .7); opacity: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 16px 8px 10px; border-radius: 99px; background: #000; color: #fff; font-size: 15px; font-weight: 600; max-width: calc(100% - 32px); box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .55s var(--resorte), opacity .25s; pointer-events: none; }
.isla.ver { transform: translateX(-50%) scale(1); opacity: 1; }
.isla .ind { width: 22px; height: 22px; flex: none; display: grid; place-items: center; }
.isla .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.25); border-top-color: #fff; animation: girar .7s linear infinite; }
.isla .ok, .isla .mal { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.isla .ok { background: var(--verde); }
.isla .mal { background: var(--rojo); }
.isla .ok svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.isla .rec { width: 12px; height: 12px; border-radius: 50%; background: var(--rojo); animation: latido 1s infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latido { 50% { opacity: .3; } }

/* Abrir cliente desde su ícono */
.zoom { position: fixed; z-index: 50; pointer-events: none; }
.vista.abrir { animation: abrirVista .5s var(--resorte-suave) both; }
@keyframes abrirVista { from { opacity: 0; transform: scale(.94); } }

@media (min-width: 520px) { .apps { grid-template-columns: repeat(5, 1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fluidez en el celular */
button, a, label, .app { touch-action: manipulation; }
.dock, .isla { transform: translateZ(0); }
.dock { transform: translateX(-50%) translateZ(0); }