/* =====================================================================
   Doxa · Cristal — botones y elementos Liquid Glass (claro + oscuro)
   Va con cristal.js (física de muelle). Sirve para la app y para la web.
   Sin data-theme se entiende OSCURO (la web); en la app: html[data-theme].
   ===================================================================== */

/* ---------- Tipografía ---------- */
:root {
  --fuente: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --txt-2: rgba(255, 255, 255, .7);        /* textos secundarios en oscuro */
}
html[data-theme="light"] { --txt-2: rgba(31, 24, 34, .66); }
html { font-optical-sizing: auto; text-rendering: optimizeLegibility; }
body {
  font-family: var(--fuente);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;   /* nítido sobre el cristal */
  font-feature-settings: "cv11", "ss03", "calt";                              /* Inter: «a» sencilla, formas más limpias */
}
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--fuente); font-weight: 600; letter-spacing: -0.02em; }
h1, h2 { font-weight: 700; }
.lead, .sub, .secundario, .meta, small, .v, .card p, details p, ol.pasos span, .tecla,
.titulo, .hint, .ayuda, label small { color: var(--txt-2); }
.btn { font-weight: 600; letter-spacing: -0.005em; }

:root {
  --tono: #ff4f6d;                      /* color de acento: todo lo "de color" sale de aquí */
  --tono-luz: color-mix(in srgb, var(--tono) 55%, #fff);
  --tono-sombra: color-mix(in srgb, var(--tono) 55%, #000);

  /* oscuro armonizado (cristal ahumado con un toque cálido del acento) */
  --v-fondo-1: #ffffff24;  --v-fondo-2: #00000040;
  --v-fondo-1h: #ffffff38; --v-fondo-2h: #00000030;
  --v-borde: #ffffff33;    --v-borde-h: #ffffff59;
  --v-luz: #ffffff57;      --v-luz-b: #ffffff1a;
  --v-sombra: 0 8px 24px #0000005c;  --v-sombra-h: 0 16px 38px #00000073;
  --v-texto: #fff;
  --v-campo: #ffffff17;    --v-campo-b: #ffffff2e;
  --v-panel: linear-gradient(160deg, #ffffff1f, #ffffff0a);
}
html[data-theme="light"] {
  --v-fondo-1: #ffffff8f;  --v-fondo-2: #78788033;
  --v-fondo-1h: #ffffffb8; --v-fondo-2h: #7878803d;
  --v-borde: #ffffffcc;    --v-borde-h: #fff;
  --v-luz: #fffffff2;      --v-luz-b: #ffffff70;
  --v-sombra: 0 4px 14px #3a2a4a1c;  --v-sombra-h: 0 14px 30px #3a2a4a33;
  --v-texto: #1f1822;
  --v-campo: #ffffffcc;    --v-campo-b: #ffffffee;
  --v-panel: linear-gradient(160deg, #ffffffa6, #ffffff66);
}

/* ---------- botón base ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate; cursor: pointer;
  --mx: 50%; --my: 0%; --sx: 1; --sy: 1; --ty: 0px; --sq: 0;
  transform: translateY(var(--ty)) scale(var(--sx), var(--sy));
  transform-origin: 50% 60%;                       /* se aplasta contra la "superficie" */

  /* bisel de cristal: canto superior brillante, inferior oscuro (volumen y refracción) */
  color: var(--v-texto); border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255,255,255,.10);
  border-top: 1px solid rgba(255,255,255,.30);
  border-bottom: 1px solid rgba(0,0,0,.20);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,.37), inset 0 1px 0 0 rgba(255,255,255,.20);
  transition: background .3s ease, border-color .3s ease, box-shadow .35s ease, color .3s ease;
}
html[data-theme="light"] .btn {
  background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.35));
  border: 1px solid rgba(255,255,255,.9); border-top-color: #fff; border-bottom: 1px solid rgba(60,40,80,.14);
  box-shadow: 0 8px 28px 0 rgba(58,42,74,.18), inset 0 1px 0 0 #fff;
}
/* sin JS (o con "reducir movimiento"): misma pulsación, con la curva elástica en CSS */
html:not(.js-fisica) .btn { transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .3s ease, box-shadow .35s ease; }
html:not(.js-fisica) .btn:not([disabled]):hover { transform: translateY(-2px); }
html:not(.js-fisica) .btn:not([disabled]):active { transform: scale(.96,.94); transition-duration: .1s; }

.btn:not([disabled]):hover {
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border-top-color: rgba(255,255,255,.45);
  box-shadow: 0 12px 38px 0 rgba(0,0,0,.42), inset 0 1px 0 0 rgba(255,255,255,.28);
}
html[data-theme="light"] .btn:not([disabled]):hover { background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.55)); box-shadow: 0 12px 34px 0 rgba(58,42,74,.26), inset 0 1px 0 0 #fff; }
/* la luz que sigue al cursor; al aplastarse (--sq) se intensifica, como el cristal bajo presión */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(circle 90px at var(--mx) var(--my), rgba(255,255,255,.25), rgba(255,255,255,0) 100%);
}
html[data-theme="light"] .btn::before { background: radial-gradient(circle 90px at var(--mx) var(--my), rgba(255,255,255,.95), rgba(255,255,255,0) 100%); }
.btn:not([disabled]):hover::before { opacity: calc(1 + var(--sq) * .5); }
/* el destello que cruza el botón (limpio, una sola pasada al entrar) */
.btn::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 34%; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, #ffffff00, #ffffffb3 50%, #ffffff00); transform: skewX(-22deg);
}
.btn:not([disabled]):hover::after { animation: destello .8s cubic-bezier(.25,.6,.3,1) both; }
@keyframes destello { 0% { left: -60%; opacity: 0 } 18% { opacity: 1 } 100% { left: 130%; opacity: 0 } }

/* pulsado: el brillo superior se hunde un poco y la sombra se acorta (el cristal "baja") */
.btn:not([disabled]):active { box-shadow: inset 0 3px 8px #00000030, inset 0 1px 0 var(--v-luz), 0 2px 8px #00000040; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #ffffffd9, 0 0 0 5px color-mix(in srgb, var(--tono) 65%, transparent), var(--v-sombra); }

/* ---------- botón de acento: respira con luz de su color; al hover proyecta su reflejo ---------- */
.btn.primario, .btn.p, .btn[data-tono] {
  color: #fff; text-shadow: 0 1px 6px color-mix(in srgb, var(--tono-sombra) 70%, transparent);
  border-color: #ffffff70;
  /* cristal teñido de rojo: translúcido pero vibrante, con el brillo del cristal por encima */
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(135deg, rgba(220,38,38,.52), rgba(220,38,38,.34));
  border-top-color: rgba(255,255,255,.45); border-bottom-color: rgba(60,0,0,.35);
  box-shadow: 0 8px 32px 0 rgba(220,38,38,.35), inset 0 1px 0 0 rgba(255,255,255,.35),
              inset 0 -8px 16px rgba(255,120,120,.18);
  animation: respira 3.4s ease-in-out infinite;
}
html[data-theme="light"] .btn.primario, html[data-theme="light"] .btn.p { background: linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 48%), linear-gradient(135deg, rgba(220,38,38,.78), rgba(220,38,38,.62)); }
html[data-theme] .btn.primario { --tono: var(--accent-btn, #ff4f6d); }
.btn.primario::before, .btn.p::before, .btn[data-tono]::before {
  background: radial-gradient(130px 90px at var(--mx) var(--my), color-mix(in srgb, var(--tono-luz) 80%, #fff), transparent 72%);
}
@keyframes respira {   /* el halo de luz inhala y exhala */
  0%, 100% { box-shadow: 0 8px 28px 0 rgba(220,38,38,.28), 0 0 0 0 rgba(255,80,80,0), inset 0 1px 0 0 rgba(255,255,255,.35), inset 0 -8px 16px rgba(255,120,120,.14); }
  50%      { box-shadow: 0 10px 44px 0 rgba(235,50,50,.62), 0 0 26px 2px rgba(255,80,80,.38), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -10px 20px rgba(255,130,130,.30); }
}
.btn.primario:not([disabled]):hover, .btn.p:not([disabled]):hover, .btn[data-tono]:not([disabled]):hover {
  animation: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(135deg, rgba(235,50,50,.7), rgba(220,38,38,.5));
  box-shadow: inset 0 1px 0 #fff, inset 0 -12px 22px color-mix(in srgb, var(--tono-luz) 75%, transparent),
              0 0 0 1px color-mix(in srgb, var(--tono-luz) 55%, transparent),
              0 12px 36px color-mix(in srgb, var(--tono) 75%, transparent),
              0 26px 64px color-mix(in srgb, var(--tono) 42%, transparent);   /* reflejo/resplandor de su propio tono */
}
.btn.primario:not([disabled]):active, .btn.p:not([disabled]):active {
  background: linear-gradient(135deg, rgba(200,30,30,.7), rgba(190,28,28,.55));
  box-shadow: inset 0 3px 10px #0000004d, 0 3px 12px rgba(220,38,38,.45);
}
/* otras variantes */
.btn.peligro { --tono: #ff6b86; color: #ff9fb2; }
html[data-theme="light"] .btn.peligro { color: #c2183a; }
.btn.icono { border-radius: 50%; padding: 0; }
.btn.activo { background: linear-gradient(180deg, #ffffff5c, #ffffff26); }

/* ---------- menús y elementos flotantes ---------- */
/* la pastilla activa entra con rebote; el icono da un micro-salto interno */
.rail button, .segmentos button { transition: background .35s ease, box-shadow .35s ease, color .3s ease; }
.rail button:hover { background: #ffffff1f; }
html[data-theme="light"] .rail button:hover { background: #ffffff80; }
.rail button:active { transform: scale(.94); transition: transform .09s ease-out; }
.entra { animation: pastilla .62s linear(0, .24, .62, .96, 1.12, 1.1, 1.02, .98, 1, 1.004, 1) both; }
.entra svg, .entra .ico { animation: salto .68s linear(0, .3, .74, 1.08, 1.2, 1.04, .94, .99, 1.01, 1); }
@keyframes pastilla { 0% { transform: scale(.78, .7); opacity: .3 } 100% { transform: scale(1); opacity: 1 } }
@keyframes salto { 0% { transform: translateY(6px) scale(.78) } 45% { transform: translateY(-4px) scale(1.14) } 100% { transform: translateY(0) scale(1) } }
.rail button[aria-current="page"], .segmentos button[aria-pressed="true"] { box-shadow: inset 0 1px 0 #ffffffcc, 0 8px 20px #00000040; }
.segmentos button:active { transform: scale(.93, .88); transition: transform .08s ease-out; }
/* menús desplegables, diálogos, avisos: aparecen como una gota que se asienta */
dialog[open], .menu-flotante, .popover { animation: gota-entra .5s linear(0, .3, .72, 1.05, 1.1, 1.02, .99, 1) both; transform-origin: 50% 0; }
@keyframes gota-entra { 0% { opacity: 0; transform: translateY(-8px) scale(.92, .86) } 40% { opacity: 1 } 100% { opacity: 1; transform: none } }

/* ---------- resto de elementos, mismo cristal en claro y en oscuro ---------- */
.vidrio, .tarjeta, .biblioteca, .cola, .rail, .tira { background: var(--v-panel); border: 1px solid var(--v-borde); }
input, textarea, select {
  background: var(--v-campo) !important; border: 1px solid var(--v-campo-b) !important; color: var(--v-texto);
  box-shadow: inset 0 1px 0 var(--v-luz-b); transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: color-mix(in srgb, var(--tono) 70%, #fff) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 35%, transparent), inset 0 1px 0 var(--v-luz-b); }
kbd { background: linear-gradient(180deg, #ffffff30, #ffffff12); border: 1px solid var(--v-borde); border-bottom-width: 3px; border-radius: 8px; color: var(--v-texto); }
.estado-pill { background: linear-gradient(180deg, var(--v-fondo-1), var(--v-fondo-2)); border: 1px solid var(--v-borde); color: var(--v-texto); box-shadow: inset 0 1px 0 var(--v-luz); }
.estado-pill.vivo { background: linear-gradient(180deg, var(--tono-luz), var(--tono)); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tono) 28%, transparent); }
.cola-item { transition: background .25s ease, transform .35s linear(0, .5, .95, 1.08, 1); }
.cola-item:hover { background: #ffffff1f; transform: translateX(2px); }
html[data-theme="light"] .cola-item:hover { background: #ffffff99; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #ffffff40; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #ffffff70; background-clip: padding-box; border: 2px solid transparent; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #3a2a4a40; background-clip: padding-box; }

/* =====================================================================
   LIQUID GLASS v3 — cristal traslúcido de verdad (sobrescribe lo anterior)
   Regla: nada de relleno opaco; el fondo se ve a través del botón.
   ===================================================================== */
html .btn {
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.30); border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
  text-shadow: none; color: var(--v-texto);
}
html .btn:not([disabled]):hover {
  background: rgba(255,255,255,.10); border-top-color: rgba(255,255,255,.42);
  box-shadow: 0 10px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.26);
}
html .btn:not([disabled]):active { box-shadow: 0 3px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.14); }
/* luz que sigue al cursor y destello que cruza la superficie */
html .btn::before { background: radial-gradient(circle 80px at var(--mx) var(--my), rgba(255,255,255,.25), rgba(255,255,255,0) 100%); }
html .btn::after  { background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.28) 50%, rgba(255,255,255,0)); }

/* principal: cristal teñido de rojo, traslúcido; halo ambiental, no relleno */
html .btn.primario, html .btn.p, html .btn[data-tono] {
  background: linear-gradient(135deg, rgba(225,29,72,.35), rgba(225,29,72,.15));
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.20); border-top: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 8px 32px rgba(225,29,72,.25), inset 0 1px 0 rgba(255,255,255,.30);
  text-shadow: none; animation: respira-v3 3.6s ease-in-out infinite;
}
html .btn.primario::before, html .btn.p::before, html .btn[data-tono]::before {
  background: radial-gradient(circle 90px at var(--mx) var(--my), rgba(255,255,255,.28), rgba(255,255,255,0) 100%);
}
@keyframes respira-v3 {
  0%, 100% { box-shadow: 0 8px 32px rgba(225,29,72,.20), inset 0 1px 0 rgba(255,255,255,.30); }
  50%      { box-shadow: 0 10px 40px rgba(225,29,72,.42), inset 0 1px 0 rgba(255,255,255,.38); }
}
html .btn.primario:not([disabled]):hover, html .btn.p:not([disabled]):hover, html .btn[data-tono]:not([disabled]):hover {
  animation: none;
  background: linear-gradient(135deg, rgba(225,29,72,.46), rgba(225,29,72,.22));
  border-top-color: rgba(255,255,255,.58);
  box-shadow: 0 10px 40px rgba(225,29,72,.40), 0 0 24px rgba(225,29,72,.18), inset 0 1px 0 rgba(255,255,255,.40);
}
html .btn.primario:not([disabled]):active, html .btn.p:not([disabled]):active {
  background: linear-gradient(135deg, rgba(225,29,72,.40), rgba(225,29,72,.20));
  box-shadow: 0 3px 14px rgba(225,29,72,.28), inset 0 2px 6px rgba(0,0,0,.18);
}
/* sin JS: misma pulsación elástica */
html:not(.js-fisica) .btn:not([disabled]):active { transform: scale(.96,.94); }
html:not(.js-fisica) .btn { transition: transform .5s cubic-bezier(.34,1.56,.64,1), background .3s, box-shadow .35s; }

/* =====================================================================
   LIQUID GLASS v4 — sin brillo duro: solo cuerpo translúcido, canto de luz y linterna suave
   ===================================================================== */
html .btn::after { display: none !important; animation: none !important; }       /* fuera el destello/franja dura */
html .btn {
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.15); border-top: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
html .btn:not([disabled]):hover {
  background: rgba(255,255,255,.07); border-top-color: rgba(255,255,255,.42);
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
/* linterna suave que se mueve por dentro del cristal (muy difuminada) */
html .btn::before {
  background: radial-gradient(circle 110px at var(--mx) var(--my), rgba(255,255,255,.12), rgba(255,255,255,0) 100%);
}
html .btn:not([disabled]):hover::before { opacity: 1; }
/* principal: cristal teñido de rojo, sin relleno ni brillo; halo ambiental apenas cálido */
html .btn.primario, html .btn.p, html .btn[data-tono] {
  background: rgba(225,29,72,.20);
  border: 1px solid rgba(255,255,255,.15); border-top: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2);
  animation: respira-v4 3.6s ease-in-out infinite;
}
html .btn.primario::before, html .btn.p::before, html .btn[data-tono]::before {
  background: radial-gradient(circle 110px at var(--mx) var(--my), rgba(255,255,255,.12), rgba(255,255,255,0) 100%);
}
@keyframes respira-v4 {   /* solo respira el halo ambiental de debajo */
  0%, 100% { box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), 0 14px 30px -14px rgba(225,29,72,.18), inset 0 1px 0 rgba(255,255,255,.2); }
  50%      { box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), 0 18px 38px -12px rgba(225,29,72,.42), inset 0 1px 0 rgba(255,255,255,.24); }
}
html .btn.primario:not([disabled]):hover, html .btn.p:not([disabled]):hover, html .btn[data-tono]:not([disabled]):hover {
  animation: none; background: rgba(225,29,72,.28); border-top-color: rgba(255,255,255,.42);
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.55), 0 18px 40px -12px rgba(225,29,72,.40), inset 0 1px 0 rgba(255,255,255,.24);
}
html .btn.primario:not([disabled]):active, html .btn.p:not([disabled]):active {
  background: rgba(225,29,72,.24); box-shadow: 0 4px 14px -6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
}
/* la barra y las tarjetas: sin óvalo de luz fijo arriba */
.vidrio::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn,.btn::after, .btn.primario, .btn.p, .entra, .entra svg, dialog[open] { animation: none !important; }
}