/*
 * LOVIA App: invitación a instalar, barra inferior y botón de borrar datos del celular.
 * Marca de lovialat.com: negro #161616, fondo blanco, oro #C9A23D solo como acento.
 * Sin fuentes ni recursos externos. Objetivos táctiles de 44 px como mínimo.
 */
:root {
  --lovia-app-negro: #161616;
  --lovia-app-oro: #C9A23D;
  --lovia-app-blanco: #ffffff;
  --lovia-app-borde: #e4e4e4;
  /* Alto de la barra + 8 px de hueco + zona segura; app.js lo recalcula con el alto real. */
  --lovia-app-barra-alto: calc(68px + 8px + env(safe-area-inset-bottom, 0px));
  --lovia-app-letra: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* El botón de instalar desaparece cuando la app ya está instalada. */
html.lovia-app-standalone .lovia-instalar-app { display: none !important; }
@media (display-mode: standalone) { .lovia-instalar-app { display: none !important; } }

.lovia-instalar-app {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--lovia-app-negro);
  color: var(--lovia-app-blanco);
  font: 600 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}

/* ---------- invitación ---------- */

.lovia-app-invitacion {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 99990;
  padding: 16px;
  border-radius: 16px;
  border-top: 3px solid var(--lovia-app-oro);
  background: var(--lovia-app-blanco);
  color: var(--lovia-app-negro);
  box-shadow: 0 8px 32px rgba(22, 22, 22, .22);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Con barra, la hoja se apoya encima de ella y no la tapa. */
html.lovia-app-con-barra .lovia-app-invitacion {
  bottom: calc(var(--lovia-app-barra-alto) + 4px);
}

.lovia-app-icono-linea { width: 1.2em; height: 1.2em; vertical-align: -.25em; }

.lovia-app-invitacion-titulo { margin: 0 0 4px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.lovia-app-invitacion-texto { margin: 0 0 14px; font-size: 14px; line-height: 1.45; }
.lovia-app-invitacion-acciones { display: flex; gap: 8px; }
/* Los botones ocupan el ancho de la tarjeta a partes iguales, igual a 320 que a 430 px. */
.lovia-app-invitacion-acciones > .lovia-app-boton { flex: 1 1 0; min-width: 0; padding: 6px 8px; }

/* ---------- botones de cristal ---------- */

/*
 * Aspecto quieto: es el de sin JS y el de prefers-reduced-motion. El principal es cristal negro y el resto
 * cristal claro. El filo de 3 px es un degradado cónico bajo el borde transparente.
 */
.lovia-app-boton {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 6px 20px;
  border: 3px solid transparent;
  border-radius: 999px;
  color: #161616;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 34%) padding-box,
    linear-gradient(rgba(248, 249, 251, .8), rgba(248, 249, 251, .8)) padding-box,
    conic-gradient(from 0deg, rgba(255, 255, 255, .95) 0, rgba(34, 211, 238, .27) 9%, rgba(59, 130, 246, .27) 18%, rgba(139, 92, 246, .27) 27%, rgba(236, 72, 153, .27) 36%, rgba(255, 255, 255, .95) 44%, rgba(249, 115, 22, .27) 53%, rgba(250, 204, 21, .27) 61%, rgba(74, 222, 128, .27) 70%, rgba(34, 211, 238, .27) 79%, rgba(167, 139, 250, .27) 90%, rgba(255, 255, 255, .95) 100%) border-box;
  box-shadow: inset 0 2px 1px #fff, inset 0 -2px 2px rgba(86, 96, 118, .22),
    0 1px 0 #D5D8DE, 0 2px 0 #C6CAD2, 0 3px 0 #B7BCC6, 0 4px 0 #A8AEBA, 0 12px 18px -9px rgba(20, 24, 34, .32);
  text-shadow: 0 1px 1px rgba(255, 255, 255, .7);
  font: 500 15px/1.15 var(--lovia-app-letra);
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.lovia-app-boton-principal {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 32%) padding-box,
    linear-gradient(rgba(16, 18, 24, .84), rgba(16, 18, 24, .84)) padding-box,
    conic-gradient(from 0deg, rgba(255, 255, 255, .1) 0, rgba(34, 211, 238, .27) 9%, rgba(59, 130, 246, .27) 18%, rgba(139, 92, 246, .27) 27%, rgba(236, 72, 153, .27) 36%, rgba(255, 255, 255, .1) 44%, rgba(249, 115, 22, .27) 53%, rgba(250, 204, 21, .27) 61%, rgba(74, 222, 128, .27) 70%, rgba(34, 211, 238, .27) 79%, rgba(167, 139, 250, .27) 90%, rgba(255, 255, 255, .1) 100%) border-box;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1), inset 0 -2px 2px rgba(0, 0, 0, .4),
    0 1px 0 #26282D, 0 2px 0 #202226, 0 3px 0 #1A1B1F, 0 4px 0 #141518, 0 12px 18px -9px rgba(10, 12, 18, .38);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

.lovia-app-boton[hidden] { display: none; }
.lovia-app-boton:active { transform: translateY(1px); }
@media (hover: hover) { .lovia-app-boton:hover { filter: brightness(1.14); } }
.lovia-app-boton:focus-visible { outline: 2px solid #161616; outline-offset: 3px; }
.lovia-app-boton:disabled { opacity: .55; cursor: not-allowed; }

/*
 * Capas animadas (solo en los botones principales de las hojas y de /app/; las monta app.js y solo si la
 * persona no pidió menos movimiento). Únicamente `transform`: sin @property, sin animar el fondo.
 * Con la capa montada el borde pasa a relleno (lo hace app.js) y el color vive en <lovia-app-luz>.
 */
@keyframes lovia-app-giro { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes lovia-app-deriva { 0%, 100% { transform: translateX(-32%); } 50% { transform: translateX(32%); } }
@keyframes lovia-app-contra { 0%, 100% { transform: translateX(32%); } 50% { transform: translateX(-32%); } }

lovia-app-luz, lovia-app-caja { display: block; position: absolute; pointer-events: none; border-radius: 999px; overflow: hidden; }
lovia-app-luz { inset: 0; z-index: -2; }
lovia-app-caja { inset: 3px; background: rgba(248, 249, 251, .8); }
lovia-app-luz.lovia-app-neg lovia-app-caja { background: rgba(16, 18, 24, .84); }
lovia-app-luz::before, lovia-app-luz::after, lovia-app-caja::before, lovia-app-caja::after { content: ""; position: absolute; }
lovia-app-luz::before {
  left: 50%; top: 50%; width: 102%; min-height: 102%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, rgba(255, 255, 255, .95) 0, rgba(34, 211, 238, .27) 9%, rgba(59, 130, 246, .27) 18%, rgba(139, 92, 246, .27) 27%, rgba(236, 72, 153, .27) 36%, rgba(255, 255, 255, .95) 44%, rgba(249, 115, 22, .27) 53%, rgba(250, 204, 21, .27) 61%, rgba(74, 222, 128, .27) 70%, rgba(34, 211, 238, .27) 79%, rgba(167, 139, 250, .27) 90%, rgba(255, 255, 255, .95) 100%);
}
lovia-app-luz.lovia-app-neg::before {
  background: conic-gradient(from 0deg, rgba(255, 255, 255, .1) 0, rgba(34, 211, 238, .27) 9%, rgba(59, 130, 246, .27) 18%, rgba(139, 92, 246, .27) 27%, rgba(236, 72, 153, .27) 36%, rgba(255, 255, 255, .1) 44%, rgba(249, 115, 22, .27) 53%, rgba(250, 204, 21, .27) 61%, rgba(74, 222, 128, .27) 70%, rgba(34, 211, 238, .27) 79%, rgba(167, 139, 250, .27) 90%, rgba(255, 255, 255, .1) 100%);
}
lovia-app-caja::before {
  inset: 0; transform: translateX(32%);
  background: radial-gradient(38% 54% at 50% -8%, rgba(255, 255, 255, .285) 0, rgba(250, 204, 21, .285) 18%, rgba(249, 115, 22, .24) 40%, rgba(236, 72, 153, .135) 64%, rgba(0, 0, 0, 0) 84%);
}
lovia-app-caja::after {
  inset: 0; transform: translateX(-32%);
  background:
    linear-gradient(105deg, rgba(0, 0, 0, 0) 33%, rgba(34, 211, 238, .09) 41%, rgba(139, 92, 246, .09) 47%, rgba(236, 72, 153, .09) 53%, rgba(250, 204, 21, .09) 59%, rgba(0, 0, 0, 0) 67%),
    radial-gradient(44% 60% at 50% 106%, rgba(255, 255, 255, .285) 0, rgba(34, 211, 238, .285) 18%, rgba(59, 130, 246, .24) 42%, rgba(139, 92, 246, .126) 66%, rgba(0, 0, 0, 0) 84%);
}
lovia-app-luz.lovia-app-neg lovia-app-caja::after {
  background:
    linear-gradient(105deg, rgba(0, 0, 0, 0) 33%, rgba(34, 211, 238, .06) 41%, rgba(139, 92, 246, .06) 47%, rgba(236, 72, 153, .06) 53%, rgba(250, 204, 21, .06) 59%, rgba(0, 0, 0, 0) 67%),
    radial-gradient(44% 60% at 50% 106%, rgba(255, 255, 255, .285) 0, rgba(34, 211, 238, .285) 18%, rgba(59, 130, 246, .24) 42%, rgba(139, 92, 246, .126) 66%, rgba(0, 0, 0, 0) 84%);
}
lovia-app-luz::after {
  inset: 3px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 34%);
  box-shadow: inset 0 2px 1px #fff, inset 0 -2px 2px rgba(86, 96, 118, .22);
}
lovia-app-luz.lovia-app-neg::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 32%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1), inset 0 -2px 2px rgba(0, 0, 0, .4);
}

.lovia-app-capas {
  position: relative;
  isolation: isolate;
  border: 0;
  background: none;
  box-shadow: 0 1px 0 #D5D8DE, 0 2px 0 #C6CAD2, 0 3px 0 #B7BCC6, 0 4px 0 #A8AEBA, 0 12px 18px -9px rgba(20, 24, 34, .32);
}
.lovia-app-capas.lovia-app-boton-principal {
  background: none;
  box-shadow: 0 1px 0 #26282D, 0 2px 0 #202226, 0 3px 0 #1A1B1F, 0 4px 0 #141518, 0 12px 18px -9px rgba(10, 12, 18, .38);
}

@media (prefers-reduced-motion: no-preference) {
  lovia-app-luz.lovia-app-vivo::before { animation: lovia-app-giro 9s linear infinite; }
  lovia-app-luz.lovia-app-vivo lovia-app-caja::before { animation: lovia-app-contra 7s ease-in-out infinite; }
  lovia-app-luz.lovia-app-vivo lovia-app-caja::after { animation: lovia-app-deriva 7s ease-in-out infinite; }
}

/* ---------- barra inferior ---------- */

/*
 * Pastilla flotante, como .lv-dock: no una franja. Sin animaciones, sin transiciones y sin desenfoque
 * (el fondo es casi opaco). El espacio que ocupa lo da --lovia-app-barra-alto.
 */
html.lovia-app-con-barra body {
  padding-bottom: var(--lovia-app-barra-alto);
}

/* Lo de la web que vive abajo no puede quedar debajo de la barra. */
html.lovia-app-con-barra .lv-dock { display: none !important; }
html.lovia-app-con-barra #listeo-floating-chat-widget { bottom: calc(var(--lovia-app-barra-alto) + 12px) !important; }
html.lovia-app-con-barra #backtotop { bottom: calc(var(--lovia-app-barra-alto) + 12px) !important; }
html.lovia-app-con-barra .lovia-fp-barra { bottom: calc(var(--lovia-app-barra-alto) + 8px) !important; }

.lovia-app-barra {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 99990;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: 2px;
  max-width: 520px;
  margin: 0 auto;
  padding: 4px;
  border-radius: 999px;
  background: #F7F7F5;
  box-shadow: 0 6px 26px rgba(10, 10, 10, .14);
  font-family: var(--lovia-app-letra);
}

.lovia-app-pestana {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 44px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  border-radius: 999px;
  color: #5c5c5c;
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  -webkit-tap-highlight-color: transparent;
}

.lovia-app-pestana:focus-visible { outline: 2px solid var(--lovia-app-negro); outline-offset: -2px; }

/* La pestaña activa es una píldora de cristal negro, quieta. */
.lovia-app-pestana[aria-current="page"] {
  color: #fff;
  background: linear-gradient(180deg, #26282E, #111216);
}

.lovia-app-pestana[aria-current="page"]:focus-visible { outline-color: #fff; outline-offset: -4px; }

.lovia-app-insignia {
  position: absolute;
  top: 2px;
  left: calc(50% + 2px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  box-sizing: border-box;
  background: var(--lovia-app-oro);
  color: var(--lovia-app-negro);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ---------- «Borrar datos de este celular» (Cuenta, solo en la app instalada) ---------- */

.lovia-app-borrar {
  max-width: 560px;
  margin: 24px auto;
  padding: 16px;
  border: 1px solid var(--lovia-app-borde);
  border-radius: 14px;
  background: var(--lovia-app-blanco);
  color: var(--lovia-app-negro);
}

.lovia-app-borrar-texto { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.lovia-app-borrar-nota { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #5c5c5c; }
.lovia-app-borrar-resultado { margin: 12px 0 0; font-size: 14px; line-height: 1.45; }
.lovia-app-borrar-resultado:empty { display: none; }

/* Aviso de carga de la app instalada: solo anima transform y opacity. */
.lovia-app-cargando {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100002;
  background: var(--lovia-app-oro);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
.lovia-app-cargando-activo { opacity: 1; animation: lovia-app-carga 2.4s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes lovia-app-carga { to { transform: scaleX(.92); } }
@media (prefers-reduced-motion: reduce) {
  .lovia-app-cargando-activo { animation: none; transform: scaleX(1); }
}