/* LiveSound Crew — base visual (tema claro "Grovia": greige, tarjetas flotantes, píldoras, pastel) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
  --bg: #F2F1EC;
  --panel: #FFFFFF;
  --panel-2: #F7F6F2;
  --vidrio-borde: rgba(255, 255, 255, 0.9);
  --borde: rgba(20, 20, 20, 0.06);
  --tinta: #171717;
  --tinta-suave: #6F6F6F;
  --tinta-tenue: #A3A3A3;
  --acento: #F18400;
  --acento-tinta: #FFFFFF;
  --amarillo: #FFE9A8;
  --durazno: #FFF1DC;
  --menta: #E8F6EE;
  --cielo: #E6F0FF;
  --ok: #2E9E62;
  --alerta: #B86E00;
  --error: #C93B3B;
  --radio: 24px;
  --sombra: 0 1px 2px rgba(20, 20, 20, 0.03), 0 24px 48px -30px rgba(20, 20, 20, 0.18);
  --f-display: 'Inter', -apple-system, sans-serif;
  --f-body: 'Inter', -apple-system, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body::before {
  content: ''; position: fixed; inset: -20% -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 42% 32% at 12% 8%, rgba(255, 214, 140, 0.55), transparent 70%),
    radial-gradient(ellipse 40% 30% at 90% 18%, rgba(170, 205, 255, 0.5), transparent 70%),
    radial-gradient(ellipse 45% 32% at 70% 92%, rgba(255, 190, 150, 0.45), transparent 70%),
    radial-gradient(ellipse 36% 28% at 10% 80%, rgba(175, 230, 200, 0.45), transparent 70%);
  filter: blur(30px);
}
html, body {
  background: var(--bg);
  color: var(--tinta);
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.5;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.02em; }

.etiqueta {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--tinta-tenue);
}

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
}
/* ===== Liquid Glass (reglas WWDC25 traducidas a CSS) =====
   Vidrio SOLO en la capa de navegación: barras, dock, menú lateral, modales.
   El contenido (tarjetas, listas, tablas) es sólido. Nunca vidrio sobre vidrio.
   Tinte solo en la acción principal. */
.vidrio {
  position: relative;
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  backdrop-filter: blur(26px) saturate(1.7);
  border-radius: 999px;
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    0 14px 40px -14px rgba(20, 20, 20, 0.3),
    0 1px 3px rgba(20, 20, 20, 0.06);
}
/* lensing: borde especular que "dobla la luz" */
.vidrio::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.2) 38%, rgba(255,255,255,0.05) 62%, rgba(255,255,255,0.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.vidrio.tinte { background: rgba(241, 132, 0, 0.82); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 16px 40px -12px rgba(241, 132, 0, 0.6); }
.vidrio.interactivo { transition: transform 0.18s cubic-bezier(.2,.8,.2,1), filter 0.18s; }
.vidrio.interactivo:active { transform: scale(0.96); filter: brightness(1.06); }
.vidrio.rect { border-radius: 28px; }

/* scroll edge effect (suave): separa lo flotante del contenido que pasa por debajo */
.borde-scroll { position: fixed; left: 0; right: 0; height: 84px; pointer-events: none; z-index: 40; }
.borde-scroll.arriba { top: 0; background: linear-gradient(to bottom, var(--bg) 30%, transparent); }
.borde-scroll.abajo { bottom: 0; height: 130px; background: linear-gradient(to top, var(--bg) 35%, transparent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .vidrio { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
@media (prefers-contrast: more) {
  .vidrio { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1.5px solid var(--tinta); }
  .vidrio::before { display: none; }
  .vidrio.tinte { background: var(--acento); }
}

button, .boton {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15px;
  border-radius: 999px;
  padding: 13px 20px;
  cursor: pointer;
  background: var(--panel);
  color: var(--tinta);
  border: 1px solid var(--borde);
  transition: transform 0.12s ease, filter 0.15s ease, opacity 0.15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.45; cursor: default; }

/* píldora principal: negro con la flecha naranja en círculo (solo aquí vive el negro) */
.boton-acento { background: var(--tinta); color: #fff; border: none; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.45); }
.boton-acento::after { content: '→'; width: 26px; height: 26px; border-radius: 50%; background: var(--acento); color: #fff; display: inline-grid; place-items: center; font-size: 13px; flex: none; }
.boton-acento:hover { filter: brightness(1.15); }
.sin-flecha::after { display: none !important; }

/* píldora secundaria: amarillo pálido con flecha negra */
.boton-suave { background: var(--amarillo); color: var(--tinta); border: none; box-shadow: 0 14px 28px -14px rgba(180, 140, 0, 0.4); }
.boton-suave::after { content: '→'; width: 26px; height: 26px; border-radius: 50%; background: var(--tinta); color: #fff; display: inline-grid; place-items: center; font-size: 13px; flex: none; }

.boton-fantasma { background: transparent; color: var(--tinta-suave); }
.boton-peligro { background: #FBECEC; color: var(--error); border: none; }

input, select, textarea {
  width: 100%;
  background: var(--panel);
  color: var(--tinta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 13px 14px;
  font-family: var(--f-body);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus { border-color: rgba(241, 132, 0, 0.5); box-shadow: 0 0 0 4px rgba(241, 132, 0, 0.1); }
label { display: block; margin: 14px 0 6px; }

.pastilla {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-display); font-size: 12px; font-weight: 500;
  padding: 5px 11px; border-radius: 999px;
  background: #F1F0EB; color: var(--tinta-suave); white-space: nowrap; border: none;
}
.pastilla.ok { background: var(--menta); color: var(--ok); }
.pastilla.alerta { background: var(--durazno); color: var(--alerta); }
.pastilla.error { background: #FBECEC; color: var(--error); }
.pastilla.acento { background: var(--durazno); color: var(--alerta); }
.pastilla.cielo { background: var(--cielo); color: #2B5FB3; }
.pastilla.negra { background: var(--tinta); color: #fff; }

.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
::selection { background: rgba(241, 132, 0, 0.25); }

.logo-texto { font-family: var(--f-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; line-height: 1.05; }
.logo-img { display: block; width: auto; max-width: 100%; object-fit: contain; }
.logo-texto span { color: var(--acento); }
.logo-texto small { display: block; font-size: 9px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--tinta-tenue); margin-top: 3px; }

.aviso { border-radius: 18px; padding: 13px 16px; font-size: 14px; margin-top: 14px; background: var(--durazno); color: var(--alerta); }
.aviso.rojo { background: #FBECEC; color: var(--error); }
.aviso.verde { background: var(--menta); color: var(--ok); }

@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.aparecer { animation: aparecer 0.35s ease both; }
.girar { animation: girar 1s linear infinite; display: inline-block; }
@keyframes girar { to { transform: rotate(360deg); } }

/* modal genérico */
.velo { position: fixed; inset: 0; background: rgba(20, 20, 20, 0.35); backdrop-filter: blur(8px); display: none; place-items: center; z-index: 60; padding: 18px; }
.velo.abierto { display: grid; }
.modal { width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); border: 1px solid var(--vidrio-borde); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 40px 80px -30px rgba(20, 20, 20, 0.4); border-radius: 26px; padding: 26px; box-shadow: 0 40px 80px -30px rgba(20, 20, 20, 0.4); animation: aparecer 0.25s ease; }
.modal h2 { font-size: 20px; margin-bottom: 6px; }
.modal .sub { color: var(--tinta-suave); font-size: 14px; }
.modal .acciones { display: flex; gap: 10px; margin-top: 22px; justify-content: flex-end; flex-wrap: wrap; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: rgba(23,23,23,0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; border-radius: 999px; padding: 12px 20px; font-size: 14px; max-width: 90vw; z-index: 90; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.45); }