/* ═══ Cristal negro translúcido (25-oct-2026) ══════════════════════════════════════════════════
   Capa de piel que convierte botones, píldoras, cajas y tarjetas en cristal oscuro esmerilado, en el
   lenguaje de «New Raycast 2026»: relleno negro semitransparente con un velo de luz arriba, borde de
   1 px que brilla más en la arista superior, desenfoque de lo que hay detrás y sombra larga y suave.
   Se carga DESPUÉS de hackealo.css / comun.css / panel.css y sólo toca superficies: ni medidas, ni
   tipografía, ni maquetación. Quitar el <link> devuelve la web exactamente a como estaba.         */

:root {
  --cr-velo: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025) 46%, rgba(255,255,255,0) 100%);
  --cr-fondo: rgba(14,14,14,.46);        /* píldoras y botones: deja ver lo que hay detrás */
  --cr-fondo-2: rgba(18,18,18,.60);      /* tarjetas con texto: un punto más opaco, se lee mejor */
  --cr-fondo-3: rgba(10,10,10,.70);      /* barras y paneles grandes */
  --cr-hover: rgba(255,255,255,.085);
  --cr-rim: inset 0 1px 0 rgba(255,255,255,.17), inset 0 0 0 1px rgba(255,255,255,.085), inset 0 -1px 0 rgba(0,0,0,.4);
  --cr-rim-hover: inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.4);
  --cr-rim-foco: inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.4), 0 0 0 4px rgba(255,255,255,.05);
  --cr-sombra: 0 24px 60px -30px rgba(0,0,0,.95);
  --cr-sombra-g: 0 40px 100px -40px rgba(0,0,0,1);
  --cr-blur: blur(22px) saturate(1.5);
  --cr-blur-s: blur(14px) saturate(1.4);
}

/* ── Las tres recetas ─────────────────────────────────────────────────────────────────────────── */
/* píldora / botón */
.btn-borde, .btn-ghost, .sug, .chip, .modo, .ico-btn, .copiar, .horario select, .metodos,
.campo input, .codigo input, .composer-mini,
.lado-item, .conv, .cuenta, .dominio-cab {
  background: var(--cr-velo), var(--cr-fondo) !important;
  border-color: transparent !important;
  box-shadow: var(--cr-rim);
  -webkit-backdrop-filter: var(--cr-blur-s); backdrop-filter: var(--cr-blur-s);
  transition: background .22s, box-shadow .22s, color .22s, transform .22s var(--suave, ease);
}
.btn-ghost, .lado-item, .conv, .cuenta, .dominio-cab { box-shadow: none; background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn-borde:hover, .btn-ghost:hover, .sug:hover, .chip:hover, .modo:hover, .ico-btn:hover, .copiar:hover,
.lado-item:hover, .conv:hover, .cuenta:hover, .dominio-cab:hover,
.lado-item.activo, .conv.activo, .metodos button[aria-selected="true"] {
  background: var(--cr-velo), var(--cr-hover) !important;
  box-shadow: var(--cr-rim-hover);
  color: var(--txt) !important;
}
.btn-ghost:hover, .lado-item:hover, .conv:hover, .cuenta:hover, .dominio-cab:hover, .lado-item.activo, .conv.activo { -webkit-backdrop-filter: none; backdrop-filter: none; }
.metodos { padding: 3px !important; }
.metodos button { background: transparent !important; border: 0; box-shadow: none; }
.metodos button[aria-selected="true"] { background: var(--cr-velo), rgba(255,255,255,.12) !important; }

/* caja de escribir (el compositor del chat y la caja mini de la portada) */
.composer, .vacia .composer, .composer-mini {
  background: var(--cr-velo), var(--cr-fondo-2) !important;
  box-shadow: var(--cr-rim), var(--cr-sombra) !important;
  -webkit-backdrop-filter: var(--cr-blur); backdrop-filter: var(--cr-blur);
}
.composer:focus-within, .composer-mini:focus-within { box-shadow: var(--cr-rim-foco), var(--cr-sombra) !important; }
.composer .ico-btn, .composer .modo, .composer .chip { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* tarjetas y paneles */
.ui-card, .plan, .plan-dest, .cierre, .mini, .clip, .foto-card,
.registro, .recuento div, .msg-u, .burbuja-u, .resp code, .texto code, .aviso-cuentas, .escaparate {
  background: var(--cr-velo), var(--cr-fondo-2) !important;
  box-shadow: var(--cr-rim), var(--cr-sombra) !important;
  -webkit-backdrop-filter: var(--cr-blur); backdrop-filter: var(--cr-blur);
}
.plan-dest { background: var(--cr-velo), rgba(255,255,255,.07) !important; box-shadow: var(--cr-rim-hover), var(--cr-sombra-g) !important; }
.msg-u, .burbuja-u, .resp code, .texto code, .recuento div { box-shadow: var(--cr-rim) !important; -webkit-backdrop-filter: var(--cr-blur-s); backdrop-filter: var(--cr-blur-s); }
.ui-card.foco, .plan.foco, .plan-dest.foco { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.07), transparent 60%), var(--cr-velo), var(--cr-fondo-2) !important; }
.clip, .foto-card, .escaparate { background: var(--cr-fondo-3) !important; } /* contienen imagen o vídeo: no se ve el relleno, sólo el borde */

/* la barra de navegación ya era de cristal: se afina el borde para que vaya a juego */
.nav, .nav.compacta { box-shadow: var(--cr-rim), 0 20px 50px -24px rgba(0,0,0,.9) !important; }
.nav::before { background: var(--cr-velo) !important; }
.enlaces a:hover, .enlaces .ind { background: var(--cr-hover) !important; box-shadow: var(--cr-rim); }

/* la barra lateral del chat */
.lado { background: var(--cr-fondo-3) !important; -webkit-backdrop-filter: var(--cr-blur); backdrop-filter: var(--cr-blur); border-right-color: rgba(255,255,255,.07) !important; }

/* el botón principal sigue siendo blanco, pero con cuerpo de cristal blanco: brillo arriba y sombra de luz */
.btn-blanco, .enviar {
  background: linear-gradient(180deg, #ffffff, #e6e6e6) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.12), 0 12px 30px -14px rgba(255,255,255,.45) !important;
}
.btn-blanco:hover, .enviar:hover { opacity: 1 !important; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.12), 0 14px 36px -12px rgba(255,255,255,.6) !important; }


/* el campo de entrar: píldora de cristal, y se enciende el borde al escribir */
.campo input { box-shadow: var(--cr-rim); }
.campo input:focus, .codigo input:focus { box-shadow: var(--cr-rim-foco) !important; }
.campo.mal input { box-shadow: inset 0 0 0 1px rgba(255,107,97,.7), var(--cr-rim) !important; }

/* ── Quien pide menos transparencia, la tiene: todo más opaco y sin desenfoque ───────────────── */
@media (prefers-reduced-transparency: reduce) {
  :root { --cr-fondo: rgba(18,18,18,.92); --cr-fondo-2: rgba(22,22,22,.96); --cr-fondo-3: rgba(12,12,12,.98); --cr-blur: none; --cr-blur-s: none; }
}
/* en móvil el desenfoque cuesta GPU: se reduce */
@media (max-width: 720px) { :root { --cr-blur: blur(14px) saturate(1.4); --cr-blur-s: blur(10px); } }

/* ── v2 (25-oct, segunda pasada en la portada) ───────────────────────────────────────────────── */
/* la caja del hero: luz que entra por arriba, borde más vivo y tecla «↵» de cristal como pista */
.hero .composer { box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.11), inset 0 -1px 0 rgba(0,0,0,.4), var(--cr-sombra-g) !important; }
.hero .composer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 55% at 50% 0%, rgba(255,255,255,.07), transparent 70%); }
.hero .composer:focus-within { box-shadow: var(--cr-rim-foco), var(--cr-sombra-g) !important; }
.hero .composer .campo { position: relative; }
.hero .composer .campo::after {
  content: "↵"; position: absolute; right: 2px; top: 2px; width: 28px; height: 24px; display: grid; place-items: center;
  font: 500 12px var(--mono); color: var(--faint); border-radius: 7px;
  background: var(--cr-velo), rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -1.5px 0 rgba(0,0,0,.5);
  opacity: 0; transition: opacity .3s;
}
.hero .composer:focus-within .campo::after { opacity: 1; }

/* las cifras: cuatro baldosas de cristal en vez de cuatro columnas con una raya */
.cifras { gap: 14px; }
.cifras div, .cifras div:first-child {
  border-left: 0 !important; padding: 26px 26px 24px; border-radius: 22px;
  background: var(--cr-velo), var(--cr-fondo-2); box-shadow: var(--cr-rim), var(--cr-sombra);
  -webkit-backdrop-filter: var(--cr-blur-s); backdrop-filter: var(--cr-blur-s);
}
.cifras::before, .cifras::after { display: none; }

/* tarjetas y planes: al pasar por encima se enciende el borde y suben un pelo */
.ui-card, .plan { transition: box-shadow .3s, transform .4s var(--suave, ease), background .3s; }
.ui-card:hover, .plan:hover { box-shadow: var(--cr-rim-hover), var(--cr-sombra-g) !important; transform: translateY(-2px); }
.plan-dest:hover { box-shadow: var(--cr-rim-foco), var(--cr-sombra-g) !important; }

/* las mini-pantallas dentro de las tarjetas: ventana de cristal con la luz arriba */
.mini { background: var(--cr-velo), rgba(12,12,12,.55) !important; }
.mini-cab .pt { background: rgba(255,255,255,.14) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* chips de la cabecera: la pestaña activa es una píldora de cristal (ya lo era); los enlaces del pie, al pasar */
.pie a { padding: 6px 10px; margin: -6px -10px; border-radius: 99px; transition: background .2s, box-shadow .2s, color .2s; }
.pie a:hover { background: var(--cr-velo), var(--cr-hover); box-shadow: var(--cr-rim); }
.pie { border-top-color: transparent !important; position: relative; }
.pie::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 30%, rgba(255,255,255,.18) 70%, transparent); }

/* el botón de enviar, circular y blanco, con cuerpo de cristal blanco también cuando está apagado */
.enviar:disabled { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12)) !important; box-shadow: var(--cr-rim) !important; color: var(--faint) !important; }

@media (max-width: 720px) { .cifras { gap: 10px; } .cifras div, .cifras div:first-child { padding: 18px 18px 16px; border-radius: 18px; } }

/* ── v3 (25-oct, «Qué atacamos») ─────────────────────────────────────────────────────────────── */
/* la consola es una ventana de cristal dentro de la tarjeta; la píldora del objetivo, los puntos
   de ventana y los chips llevan la misma receta: velo arriba y rim de 1 px */
.con { background: var(--cr-velo), rgba(10,10,10,.58); box-shadow: var(--cr-rim), var(--cr-sombra); -webkit-backdrop-filter: var(--cr-blur-s); backdrop-filter: var(--cr-blur-s); }
.consola:hover .con { box-shadow: var(--cr-rim-hover), var(--cr-sombra); }
.con-obj { background: var(--cr-velo), rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.085), inset 0 -1px 0 rgba(0,0,0,.4); }
.con-pts i { background: rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.08); }
.chip-ok { background: var(--cr-velo), rgba(74,222,128,.10); }
.chip-rev { background: var(--cr-velo), rgba(255,180,77,.10); }
.cifras div::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(50% 45% at 18% 0%, rgba(255,255,255,.05), transparent 70%); }

/* ── v4 (25-oct, «Lo que recibes») ───────────────────────────────────────────────────────────── */
/* la PR y la banda del plugin son tarjetas de cristal; el diff y la pantalla del plugin, ventanas
   más oscuras dentro; el informe es un documento de cristal con dos páginas más apagadas detrás */
.pr, .wp { background: var(--cr-velo), var(--cr-fondo-2) !important; box-shadow: var(--cr-rim), var(--cr-sombra) !important; -webkit-backdrop-filter: var(--cr-blur); backdrop-filter: var(--cr-blur); transition: box-shadow .3s, transform .4s var(--suave, ease), background .3s, opacity 1s var(--suave, ease), filter 1s var(--suave, ease); }
.pr:hover, .wp:hover { box-shadow: var(--cr-rim-hover), var(--cr-sombra-g) !important; transform: translateY(-2px); }
.pr.foco, .wp.foco { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.07), transparent 60%), var(--cr-velo), var(--cr-fondo-2) !important; }
.wp-mini { background: var(--cr-velo), rgba(8,8,8,.6); box-shadow: var(--cr-rim); -webkit-backdrop-filter: var(--cr-blur-s); backdrop-filter: var(--cr-blur-s); }
.doc-1 { background: var(--cr-velo), var(--cr-fondo-2); box-shadow: var(--cr-rim), var(--cr-sombra-g); -webkit-backdrop-filter: var(--cr-blur); backdrop-filter: var(--cr-blur); }
.informe:hover .doc-1 { box-shadow: var(--cr-rim-hover), var(--cr-sombra-g); }
.doc-2 { background: rgba(20,20,20,.8); box-shadow: var(--cr-rim); }
.doc-3 { background: rgba(16,16,16,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.06); }

/* ── v5 (25-oct, «Con lo que está hecho»): la banda de logos es una tarjeta de cristal como las demás ── */
.tec { background: var(--cr-velo), var(--cr-fondo-2) !important; box-shadow: var(--cr-rim), var(--cr-sombra) !important; -webkit-backdrop-filter: var(--cr-blur); backdrop-filter: var(--cr-blur); transition: box-shadow .3s, opacity 1s var(--suave, ease), filter 1s var(--suave, ease), transform 1s var(--suave, ease); }
.tec:hover { box-shadow: var(--cr-rim-hover), var(--cr-sombra-g) !important; }

/* ── v4 (25-oct, «Preguntas» como chat) ──────────────────────────────────────────────────────── */
/* la ventana es el panel grande de cristal con velo en la cabecera y sombra larga; las burbujas del
   visitante, el compositor y los chips llevan la receta pequeña (rim de 1 px, velo arriba) */
.chat { background: var(--cr-velo), var(--cr-fondo-3); box-shadow: var(--cr-rim), var(--cr-sombra-g); -webkit-backdrop-filter: var(--cr-blur); backdrop-filter: var(--cr-blur); }
.chat-cab { background: radial-gradient(70% 140% at 50% 0%, rgba(255,255,255,.075), transparent 70%); }
.chat-cab .con-pts i { background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.08); }
.chat .msg-u { background: var(--cr-velo), rgba(255,255,255,.06) !important; box-shadow: var(--cr-rim) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.chat-comp { background: var(--cr-velo), rgba(255,255,255,.035) !important; box-shadow: var(--cr-rim) !important; -webkit-backdrop-filter: none; backdrop-filter: none; transition: box-shadow .3s; }
.chat-comp:focus-within { box-shadow: var(--cr-rim-foco) !important; }
.chat-sugs .sug { border-color: transparent; background: var(--cr-velo), var(--cr-fondo); box-shadow: var(--cr-rim); -webkit-backdrop-filter: none; backdrop-filter: none; }
.chat-sugs .sug:hover { border-color: transparent; background: var(--cr-velo), var(--cr-hover); box-shadow: var(--cr-rim-hover); }
.chat-hilo { scrollbar-color: rgba(255,255,255,.16) transparent; }