/* ===========================================================================
   Frutiger Aero — la piel

   TRES COSAS HACEN QUE ESTO SEA AERO Y NO «VIDRIO» A SECAS. Si se toca una,
   se cae el parecido:

   1 · EL CORTE DURO AL 45 %. Ninguna superficie de plástico tiene un degradado
       suave: son dos degradados pegados y el escalón entre los dos es el
       reflejo.  #f2f2f2 45%, #ebebeb 45%, #cfcfcf
   2 · LA BARRA DE TÍTULO SON CUATRO CAPAS: dos diagonales claras entrando por
       las esquinas de arriba (el reflejo del marco), el brillo vertical con su
       propio corte al 46 %, y el color translúcido con desenfoque atrás.
   3 · EL FILO BLANCO DE 1 PX arriba y a los costados, con `inset`. Es el canto
       del vidrio y sin él todo parece pintado.

   Los valores salen de 7.css (khang-nd), que los sacó de la interfaz real.

   EL COLOR DEL VIDRIO ES UNA VARIABLE, no un valor. Vista dejaba cambiarlo
   desde el panel de control y acá también: todo lo que es cromo se arma con
   hsl(var(--tono) ...), así que mover un número retiñe la interfaz entera.
   =========================================================================== */

@font-face{
  font-family:"Source Sans 3"; font-style:normal; font-weight:200 900;
  font-display:swap; src:url("../fuentes/ss3.7a19a702.woff2") format("woff2-variations");
}

:root{
  /* el vidrio, en piezas, para poder moverlo desde el panel de control */
  --tono:210;            /* 0-360 */
  --sat:52%;
  --aero:hsl(var(--tono) var(--sat) 52%);
  --aero-hondo:hsl(var(--tono) var(--sat) 34%);
  --aero-claro:hsl(var(--tono) var(--sat) 72%);
  --vidrio:82%;          /* opacidad del cromo: 100 % = sin transparencia */

  --cara:#f0f0f0;
  --papel:#ffffff;
  --agua-1:#eafbfd;
  --agua-2:#d2f1f6;
  --agua-borde:#a8d4dc;

  --bot:linear-gradient(180deg,#f2f2f2 45%,#ebebeb 45%,#cfcfcf);
  --bot-encima:linear-gradient(180deg,#eaf6fd 45%,#bee6fd 45%,#a7d9f5);
  --bot-pulsado:linear-gradient(180deg,#e5f4fc,#c4e5f6 30% 50%,#98d1ef 50%,#68b3db);
  --bot-borde:#8e8f8f;
  --bot-borde-encima:#3c7fb1;

  --tinta:#16202b;
  --tinta-2:#4a5a6a;
  --enlace:#0b63b5;
  --verde:#7cc242;
  --tipo:"Segoe UI","Source Sans 3","Selawik",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100%; color:var(--tinta);
  font:400 15px/1.5 var(--tipo); -webkit-font-smoothing:antialiased;
  background:#2f7fd0 var(--fondo, url("../img/fondo.06222548.webp")) center top / cover no-repeat fixed;
  padding:14px 14px calc(64px + env(safe-area-inset-bottom,0px));
}
@media (orientation:portrait){
  /* en el celular `fixed` se ancla al viewport visual y el fondo pega saltos
     cada vez que aparece la barra de direcciones */
  body{background-image:var(--fondo-alto, url("../img/fondo-alto.550e8e84.webp"));
       background-attachment:scroll;
       /* Con `scroll`, `cover` se mide contra el ALTO DEL CONTENIDO y no
          contra la pantalla. Desde que el escritorio del teléfono arranca
          vacío el contenido es corto, así que el fondo terminaba a media
          pantalla y abajo quedaba una franja del azul liso de atrás. Con esto
          el cuerpo siempre mide al menos una pantalla y el fondo la llena.
          `svh` y no `vh`: el alto chico, el que no cambia cuando aparece y
          desaparece la barra de direcciones. */
       min-height:100vh; min-height:100svh}
}
body.sinsesion{overflow:hidden}
img{max-width:100%; display:block}
[hidden]{display:none !important}
a{color:var(--enlace)}
h1,h2,h3{margin:0; font-weight:600; line-height:1.15; text-wrap:balance}
button{font:inherit}

/* ====================================================== burbujas */
#burbujas{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.bu{position:absolute; bottom:-14vh; border-radius:50%;
  background:radial-gradient(circle at 32% 28%,
    rgba(255,255,255,.92), rgba(255,255,255,.30) 26%,
    rgba(160,225,255,.16) 52%, rgba(255,255,255,.05) 74%),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.45), transparent 40%);
  box-shadow:inset 0 0 14px rgba(255,255,255,.5), 0 0 12px rgba(180,235,255,.28);
  animation:subir linear infinite}
@keyframes subir{
  from{transform:translate3d(0,0,0) scale(.85); opacity:0}
  12%{opacity:.85} 88%{opacity:.7}
  to{transform:translate3d(var(--dx,18px),-118vh,0) scale(1.1); opacity:0}
}
@media (prefers-reduced-motion:reduce){ .bu{display:none} }

/* ===========================================================================
   LA PANTALLA DE INICIO DE SESIÓN
   Fondo azul hondo con una aurora, el retrato redondo con marco de vidrio, y
   la barra de contraseña con la flecha. Abajo, el botón de apagado.
   =========================================================================== */
#logon{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:24px; overflow:auto;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(120,200,255,.30), rgba(0,0,0,0) 60%),
    radial-gradient(90% 60% at 50% 108%, rgba(90,190,235,.34), rgba(0,0,0,0) 62%),
    linear-gradient(180deg,#062a54 0%, #0a3f74 42%, #0b2c53 100%);
  animation:aparecer .5s ease both}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
#logon.yendo{animation:irse .55s ease both}
@keyframes irse{to{opacity:0; transform:scale(1.04)}}

/* la aurora: dos manchas anchas, muy desenfocadas, moviéndose despacio */
/* La aurora de Vista no era una mancha: era una CINTA que cruzaba la pantalla.
   Se hace con elipses muy anchas y muy bajas, apiladas y desenfocadas; una
   mancha redonda se ve como un degradado cualquiera. */
#logon .aurora{position:absolute; inset:-25%; pointer-events:none; filter:blur(58px);
  opacity:.85; background:
    radial-gradient(58% 13% at 30% 30%, rgba(120,245,220,.90), transparent 72%),
    radial-gradient(64% 10% at 62% 38%, rgba(130,200,255,.85), transparent 74%),
    radial-gradient(52% 16% at 78% 22%, rgba(90,170,255,.70), transparent 76%),
    radial-gradient(72% 12% at 44% 62%, rgba(150,230,255,.55), transparent 78%),
    radial-gradient(40% 24% at 12% 52%, rgba(70,200,235,.45), transparent 74%);
  animation:ondear 22s ease-in-out infinite alternate}
/* el resplandor que subía del borde de abajo */
#logon::after{content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  pointer-events:none;
  background:radial-gradient(70% 100% at 50% 118%, rgba(140,225,255,.42), transparent 70%)}
@keyframes ondear{to{transform:translate3d(0,-5%,0) rotate(-2.5deg) scale(1.10)}}
@media (prefers-reduced-motion:reduce){ #logon .aurora{animation:none} }

.sesion{position:relative; width:min(420px,100%); text-align:center; color:#eaf6ff}
.retrato{width:132px; height:132px; margin:0 auto; border-radius:50%; padding:5px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.25) 46%,
                                     rgba(255,255,255,.08) 47%, rgba(255,255,255,.35));
  box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 14px 34px rgba(0,20,50,.6),
             inset 0 1px 0 rgba(255,255,255,.9)}
.retrato > *{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
  background:radial-gradient(circle at 40% 30%, #bfe9ff, #2b74b8 60%, #124572);
  border:1px solid rgba(255,255,255,.5)}
.sesion h1{margin:18px 0 2px; font-size:34px; font-weight:300; letter-spacing:-.01em;
  text-shadow:0 2px 12px rgba(0,20,50,.7)}
.sesion .rol{font-size:13.5px; color:rgba(226,242,255,.72)}

.campo{display:flex; align-items:center; gap:8px; margin:22px auto 0; width:min(330px,100%)}
.campo input{flex:1; min-width:0; font:inherit; font-size:15px; padding:8px 13px;
  border-radius:4px; border:1px solid rgba(255,255,255,.45); color:var(--tinta);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(232,242,250,.96));
  box-shadow:inset 0 1px 3px rgba(0,30,60,.25), 0 1px 0 rgba(255,255,255,.35)}
.campo input::placeholder{color:#7b8b9b}
.flecha{width:40px; height:38px; flex:none; cursor:pointer; border-radius:5px;
  border:1px solid rgba(255,255,255,.5); display:grid; place-items:center; color:#0d3a68;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 45%, rgba(206,232,248,.95) 45%, rgba(150,200,235,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 6px rgba(0,25,60,.4)}
.flecha:hover{background:var(--bot-encima)}
.flecha:active{background:var(--bot-pulsado)}
.flecha svg{width:17px; height:17px}

.osepara{display:flex; align-items:center; gap:12px; margin:22px auto 16px; width:min(330px,100%);
  color:rgba(226,242,255,.6); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase}
.osepara::before,.osepara::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent)}

.google{display:flex; align-items:center; justify-content:center; gap:11px; cursor:pointer;
  width:min(330px,100%); margin:0 auto; padding:9px 16px; border-radius:4px;
  font-size:15px; font-weight:600; color:#3c4043;
  border:1px solid #8e8f8f; background:var(--bot);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85), 0 2px 6px rgba(0,25,60,.35)}
.google:hover{background:var(--bot-encima); border-color:var(--bot-borde-encima)}
.google:active{background:var(--bot-pulsado)}
.google svg{width:19px; height:19px; flex:none}
#gsi{display:grid; place-items:center; margin:10px auto 0; min-height:0}
.nota{margin:16px auto 0; width:min(380px,100%); font-size:12.5px; line-height:1.55;
  color:rgba(226,242,255,.80); text-align:left; padding:11px 14px; border-radius:5px;
  background:rgba(4,22,46,.42); border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.nota ol{margin:7px 0 0; padding-left:18px}
.nota li{margin-bottom:3px}
.nota b{color:#cfeaff}
.nota code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  background:rgba(255,255,255,.12); padding:1px 5px; border-radius:3px}

.abajo{position:fixed; left:0; right:0; bottom:0; display:flex; align-items:flex-end;
  justify-content:space-between; padding:18px 22px calc(18px + env(safe-area-inset-bottom,0px));
  pointer-events:none}
.abajo > *{pointer-events:auto}
.redondo{width:44px; height:44px; border-radius:50%; cursor:pointer; display:grid;
  place-items:center; color:#dceeff; border:1px solid rgba(255,255,255,.4);
  background:radial-gradient(circle at 36% 28%, rgba(255,255,255,.45), rgba(255,255,255,.10) 52%, rgba(0,20,50,.35));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 3px 10px rgba(0,20,50,.5)}
.redondo:hover{filter:brightness(1.2)}
.redondo svg{width:20px; height:20px}

/* la bienvenida: el anillo que giraba mientras Vista cargaba el escritorio */
#bienvenida{position:fixed; inset:0; z-index:210; display:grid; place-items:center;
  color:#eaf6ff; text-align:center;
  background:radial-gradient(90% 70% at 50% 42%, #1a5f9e, #06264a 78%)}
#bienvenida .anillo{width:66px; height:66px; margin:0 auto 20px; border-radius:50%;
  border:5px solid rgba(255,255,255,.22); border-top-color:rgba(220,245,255,.95);
  animation:girar 1s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
#bienvenida p{margin:0; font-size:26px; font-weight:300; letter-spacing:.02em;
  text-shadow:0 2px 14px rgba(0,20,50,.7)}

/* ====================================================== el escritorio */
#escritorio{position:relative; z-index:1}
.iconos{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,92px)); gap:6px;
  margin:0 0 14px; padding:0; list-style:none; max-width:100%}
.iconos button{width:92px; padding:8px 4px 7px; cursor:pointer; border-radius:4px;
  border:1px solid transparent; background:none; color:#fff; display:grid; gap:6px;
  justify-items:center; font-size:12.5px; line-height:1.25; text-align:center;
  text-shadow:0 1px 3px rgba(0,25,60,.95), 0 0 10px rgba(0,25,60,.7)}
.iconos button:hover{border-color:rgba(255,255,255,.45);
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(160,215,255,.20));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.iconos .lam{width:46px; height:46px; filter:drop-shadow(0 3px 5px rgba(0,25,60,.6))}

.hoja{position:relative; z-index:1; width:min(1120px,100%); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) 268px; gap:14px; align-items:start}
.col{display:grid; gap:14px; min-width:0}

/* ====================================================== la ventana */
.ventana{
  border-radius:9px 9px 5px 5px;
  background:rgba(244,247,250,.90);
  backdrop-filter:blur(9px) saturate(140%); -webkit-backdrop-filter:blur(9px) saturate(140%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.55),
    0 0 0 2px hsl(var(--tono) 60% 26% / .34),
    0 22px 46px -16px rgba(4,24,56,.62),
    0 3px 10px -4px rgba(4,24,56,.4);
}
.ventana.pegajosa{position:sticky; top:14px; z-index:40}

/* --- una ventana despegada, o sea arrastrada de su barra de título ---
   `position:fixed` y no `absolute` a propósito: la página es un documento que
   se baja con el dedo, y una ventana que te seguiste moviendo tiene que quedar
   donde la dejaste aunque sigas bajando, como en un escritorio de verdad.
   El `max-width` es para que una guardada de una pantalla grande no aparezca
   más ancha que la pantalla chica donde se abre después. */
.ventana.suelta{position:fixed; margin:0; z-index:50; max-width:calc(100vw - 16px)}
.ventana.suelta > .cuerpo{max-height:calc(100vh - 120px); overflow:auto}

/* El cursor es la única señal de que la barra se puede agarrar: sin esto, que
   las ventanas se muevan es una función que existe y que nadie descubre.
   Sólo de 721px para arriba: en el teléfono la ventana ocupa todo y no hay
   a dónde moverla. */
@media (min-width:721px){
  #escritorio .ventana > .titulo{cursor:grab; touch-action:none}
  #escritorio .ventana > .titulo.agarrando{cursor:grabbing; user-select:none}
  #escritorio .ventana > .titulo .txt{pointer-events:none}
}
/* al abrir una ventana se la lleva a la vista, y arriba hay una pegajosa
   de 100 px: sin este margen el titulo de la que se abre queda tapado */
.ventana{scroll-margin-top:104px; scroll-margin-bottom:76px}

.titulo{
  position:relative; display:flex; align-items:center; gap:9px;
  padding:7px 8px 7px 11px; border-radius:8px 8px 0 0; min-height:36px;
  color:#fff; font-weight:600; font-size:13.5px;
  text-shadow:0 1px 2px rgba(0,20,50,.55), 0 0 10px rgba(0,30,70,.35);
  background:
    linear-gradient(135deg, rgba(255,255,255,.34) 58px, rgba(255,255,255,0) 130px),
    linear-gradient(225deg, rgba(255,255,255,.34) 58px, rgba(255,255,255,0) 130px),
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.20) 45%,
                            rgba(255,255,255,.05) 46%, rgba(255,255,255,.26)),
    hsl(var(--tono) var(--sat) 52% / var(--vidrio));
  backdrop-filter:blur(12px) saturate(170%); -webkit-backdrop-filter:blur(12px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),
             inset 1px 0 0 rgba(255,255,255,.62),
             inset -1px 0 0 rgba(255,255,255,.62),
             inset 0 -1px 0 hsl(var(--tono) 60% 26% / .3);
}
.titulo .ico{width:18px; height:18px; flex:none; filter:drop-shadow(0 1px 2px rgba(0,20,50,.5))}
.titulo .txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mandos{margin-left:auto; display:flex; gap:2px; flex:none}
.mandos button{width:30px; height:21px; padding:0; cursor:pointer; border-radius:3px;
  border:1px solid rgba(255,255,255,.55); color:#0d2a4d; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.72) 45%, rgba(255,255,255,.34) 45%, rgba(255,255,255,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(0,20,50,.25)}
.mandos button:hover{background:var(--bot-encima); border-color:#cfe9fa}
.mandos button:active{background:var(--bot-pulsado)}
.mandos .cerrar{width:44px; color:#fff; border-color:rgba(255,255,255,.55);
  background:linear-gradient(180deg, rgba(255,190,180,.85) 45%, rgba(214,62,38,.92) 45%, rgba(168,30,12,.95))}
.mandos .cerrar:hover{background:linear-gradient(180deg,#ffd2c8 45%,#f0563a 45%,#c62a10)}
.mandos svg{width:11px; height:11px; display:block}

.cuerpo{padding:12px; border-radius:0 0 4px 4px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(238,244,250,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}

/* ====================================================== menú y cartel */
.menu{display:flex; flex-wrap:wrap; gap:1px; padding:2px;
  border:1px solid #cdd6e0; border-radius:3px; background:#fbfcfe}
.menu a,.menu button{padding:5px 12px; border-radius:3px; text-decoration:none; color:var(--tinta);
  font-size:14px; border:1px solid transparent; background:none; cursor:pointer}
.menu a:hover,.menu button:hover{border-color:#b8dcf4;
  background:linear-gradient(180deg,#f4fbff,#d6eefc); box-shadow:inset 0 1px 0 #fff}

.cartel{position:relative; margin-top:12px; overflow:hidden; border-radius:4px;
  border:1px solid #9fc7dd; min-height:132px; display:flex; align-items:center; gap:16px;
  padding:16px 20px;
  background:
    radial-gradient(120% 130% at 82% 118%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%),
    linear-gradient(180deg,
      hsl(var(--tono) 62% 32%) 0%, hsl(var(--tono) 62% 48%) 44%,
      hsl(var(--tono) 66% 56%) 45%, hsl(var(--tono) 70% 74%) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,60,100,.25)}
.cartel::after{content:""; position:absolute; left:0; right:0; top:0; height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.06));
  pointer-events:none}
.cartel .globo{width:96px; height:96px; flex:none; position:relative; z-index:1;
  filter:drop-shadow(0 6px 10px rgba(0,40,80,.4))}
.cartel .dice{position:relative; z-index:1; min-width:0}
.cartel h1{font-size:clamp(34px,7vw,58px); font-weight:200; color:#fff; letter-spacing:-.02em;
  text-shadow:0 2px 3px rgba(0,50,90,.45), 0 0 26px rgba(190,240,255,.7)}
.cartel p{margin:8px 0 0; color:#fff; font-size:15.5px; font-weight:600; max-width:56ch;
  text-shadow:0 1px 2px rgba(0,50,90,.85), 0 2px 12px rgba(0,40,75,.7)}
.cartel p b{color:#f2ffb8}

/* ====================================================== recuadros */
.grupo{margin-top:12px; padding:14px 16px; border-radius:4px;
  border:1px solid var(--agua-borde);
  background:linear-gradient(180deg,var(--agua-1),var(--agua-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.grupo > h2{font-size:16px; margin-bottom:8px; display:flex; align-items:center; gap:9px}
.grupo > h2 svg{width:22px; height:22px; flex:none}
.grupo p{margin:0 0 10px} .grupo p:last-child{margin-bottom:0}
.blanco{background:linear-gradient(180deg,#fff,#f6fafd); border-color:#cfdbe6}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding:0; list-style:none}
.chips li{padding:4px 11px; border-radius:999px; font-size:13px; color:#0e3b5e;
  border:1px solid #9fd0e6; box-shadow:inset 0 1px 0 #fff;
  background:linear-gradient(180deg,#ffffff 45%,#e2f4fc 45%,#c9ebf8)}

.lista{list-style:none; margin:10px 0 0; padding:0; border:1px solid #c9d6e2;
  border-radius:3px; background:#fff; overflow:hidden}
.lista li + li{border-top:1px solid #e6edf4}
.lista a,.lista .fila{display:flex; gap:12px; align-items:flex-start; padding:10px 12px;
  text-decoration:none; color:var(--tinta)}
.lista a:hover{background:linear-gradient(180deg,#f4fbff,#dceffc);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px #aaddfa}
.lista .bola{width:30px; height:30px; flex:none; border-radius:50%;
  box-shadow:inset 0 2px 5px rgba(255,255,255,.85), inset 0 -3px 7px rgba(0,0,0,.18),
             0 2px 4px rgba(0,30,60,.25)}
.lista b{display:block; font-weight:600; font-size:14.5px}
.lista span{display:block; color:var(--tinta-2); font-size:13.5px; line-height:1.4}

/* ====================================================== la mascota */
.escena{display:grid; place-items:center; padding:6px 0 2px}
#respaldo,#lienzo{width:min(260px,64vw); height:auto; margin:0 auto}
#respaldo{filter:drop-shadow(0 20px 26px rgba(2,30,70,.35)); animation:flota 5.5s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){#respaldo{animation:none}}
#lienzo{aspect-ratio:1; display:block; cursor:grab; touch-action:none;
  image-rendering:pixelated; filter:drop-shadow(0 20px 26px rgba(2,30,70,.35))}
#lienzo:active{cursor:grabbing}
.poses{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:10px;
  padding:0; list-style:none}
.poses button{width:52px; height:52px; padding:3px; cursor:pointer; border-radius:3px;
  border:1px solid var(--bot-borde); background:var(--bot);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.poses button:hover{background:var(--bot-encima); border-color:var(--bot-borde-encima)}
.poses button[aria-pressed="true"]{background:var(--bot-pulsado); border-color:#6d91ab}
.poses img{width:100%; height:100%; object-fit:contain}

/* ====================================================== paleta y botones */
.paleta{display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:8px;
  margin-top:10px; padding:0; list-style:none}
.paleta button{width:100%; cursor:pointer; padding:0; border-radius:3px; overflow:hidden;
  border:1px solid #93a7b8; background:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 1px 2px rgba(0,30,60,.2)}
.paleta i{display:block; height:38px;
  box-shadow:inset 0 12px 12px -8px rgba(255,255,255,.75), inset 0 -8px 10px -6px rgba(0,0,0,.25)}
.paleta small{display:block; padding:3px 0 4px; font-size:11px; color:var(--tinta-2);
  font-variant-numeric:tabular-nums}

.bots{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.bt{font-size:14px; padding:5px 16px; min-height:30px; cursor:pointer; border-radius:3px;
  border:1px solid var(--bot-borde); color:var(--tinta); background:var(--bot);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85); text-decoration:none;
  display:inline-flex; align-items:center; gap:7px}
/* el boton por omision de Vista: mismo corte al 45 %, pero la mitad de abajo
   entra en azul y el borde se aclara. Llevaba un resplandor que latia; aca va
   quieto, porque una pantalla que pulsa mientras leés es una pantalla que
   apura, y esto es una donacion, no una cuenta regresiva. */
.bt.p{background:linear-gradient(180deg,#f6fbfe 45%,#c3dcea 45%,#a4cadf);
  border-color:#5586a3; font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1px rgba(133,187,220,.55),
             0 0 9px rgba(120,190,235,.5)}
.bt.p:hover{background:linear-gradient(180deg,#f2fbff 45%,#bee6fd 45%,#9ed5f4);
  border-color:#3c7fb1}
.bt:hover{background:var(--bot-encima); border-color:var(--bot-borde-encima)}
.bt:active{background:var(--bot-pulsado); border-color:#6d91ab}
:focus-visible{outline:2px solid #0f5fa8; outline-offset:1px}

/* ====================================================== los aparatos */
.aparato{border-radius:8px; padding:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.12));
  box-shadow:0 0 0 1px hsl(var(--tono) 60% 26% / .32), 0 14px 30px -14px rgba(4,24,56,.6)}
.aparato > div{border-radius:7px; padding:14px; color:#eaf6ff;
  background:linear-gradient(180deg, hsl(var(--tono) 55% 22% / .66), hsl(var(--tono) 60% 13% / .76));
  backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.aparato h3{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(226,242,255,.72); font-weight:600}
#reloj{margin-top:6px; font-size:44px; font-weight:200; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; text-shadow:0 2px 10px rgba(0,30,70,.6)}
#fecha{font-size:13px; color:rgba(226,242,255,.80)}
.aparato .clima{display:flex; align-items:center; gap:12px; margin-top:4px}
.aparato .clima svg{width:52px; height:52px; flex:none}
.aparato .clima b{display:block; font-size:26px; font-weight:300}
.aparato .clima span{font-size:13px; color:rgba(226,242,255,.78)}

/* ====================================================== barra de tareas */
.tareas{position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex;
  align-items:center; gap:8px; padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg, hsl(var(--tono) 70% 88% / .55),
                                     hsl(var(--tono) 62% 22% / .82) 45%,
                                     hsl(var(--tono) 66% 12% / .92));
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 -6px 20px rgba(0,20,50,.4)}
.orbe{width:44px; height:44px; flex:none; padding:0; cursor:pointer; border-radius:50%;
  border:1px solid rgba(255,255,255,.5); overflow:hidden;
  background:radial-gradient(circle at 34% 26%, #bfeaff,
             hsl(var(--tono) 60% 52%) 42%, hsl(var(--tono) 66% 30%) 78%, hsl(var(--tono) 70% 20%));
  box-shadow:inset 0 2px 6px rgba(255,255,255,.75), inset 0 -6px 10px rgba(0,20,50,.5),
             0 2px 8px rgba(0,25,60,.5)}
.orbe img{width:100%; height:100%; object-fit:contain; padding:7px}
.orbe:hover{filter:brightness(1.12)}
  text-overflow:ellipsis; white-space:nowrap;
  background:linear-gradient(180deg, rgba(255,255,255,.30) 45%, rgba(255,255,255,.10) 45%, rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.tareas .hora{margin-left:auto; flex:none; color:#eaf6ff; font-size:12.5px; text-align:right;
  line-height:1.25; text-shadow:0 1px 2px rgba(0,20,50,.6); font-variant-numeric:tabular-nums}

/* el menú de inicio */
#inicio{position:fixed; left:10px; bottom:calc(58px + env(safe-area-inset-bottom,0px));
  z-index:90; width:min(320px,calc(100vw - 20px)); border-radius:8px; padding:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.12));
  box-shadow:0 0 0 1px hsl(var(--tono) 60% 26% / .4), 0 22px 46px -14px rgba(2,16,40,.75)}
#inicio > div{border-radius:7px; overflow:hidden; color:#eaf6ff;
  background:linear-gradient(180deg, hsl(var(--tono) 55% 22% / .82), hsl(var(--tono) 60% 12% / .90));
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%)}
#inicio .quien{display:flex; align-items:center; gap:11px; padding:13px 14px;
  border-bottom:1px solid rgba(255,255,255,.16)}
#inicio .quien .r{width:42px; height:42px; border-radius:50%; flex:none; object-fit:cover;
  border:1px solid rgba(255,255,255,.5); background:#2b74b8}
#inicio .quien b{display:block; font-size:15px; font-weight:600}
#inicio .quien span{display:block; font-size:12.5px; color:rgba(226,242,255,.7)}
#inicio ul{list-style:none; margin:0; padding:6px}
#inicio button{width:100%; text-align:left; display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:4px; border:1px solid transparent; cursor:pointer;
  background:none; color:inherit; font-size:14px}
#inicio button:hover{border-color:rgba(255,255,255,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.07))}
#inicio .lam{width:22px; height:22px; flex:none}
#inicio .salir{border-top:1px solid rgba(255,255,255,.16); padding:6px}

/* ====================================================== buscaminas */
.minas{display:grid; gap:2px; margin:10px auto 0; width:max-content; padding:6px;
  border-radius:3px; border:1px solid #b9c6d4; background:#dfe7ee;
  box-shadow:inset 0 1px 3px rgba(0,30,60,.2)}
.minas button{width:30px; height:30px; padding:0; cursor:pointer; border-radius:2px;
  font-size:15px; font-weight:700; line-height:1; display:grid; place-items:center;
  border:1px solid var(--bot-borde); background:var(--bot);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)}
.minas button:hover:not([disabled]){background:var(--bot-encima); border-color:var(--bot-borde-encima)}
.minas button.abierta{cursor:default; border-color:#c3cfda;
  background:linear-gradient(180deg,#fbfdff,#e9f0f6); box-shadow:inset 0 1px 2px rgba(0,30,60,.12)}
.minas button.boom{background:linear-gradient(180deg,#ffd9d2 45%,#f07a63 45%,#d23b1c)}
.minas .n1{color:#1a5fd0} .minas .n2{color:#237a2e} .minas .n3{color:#c62f2f}
.minas .n4{color:#2a2f8f} .minas .n5{color:#8a2b1e} .minas .n6{color:#1a7e86}
.minas .n7{color:#333} .minas .n8{color:#666}
.marcador{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; padding:7px 12px; border-radius:3px; border:1px solid #b9c6d4;
  background:linear-gradient(180deg,#fff,#eef4f9); font-variant-numeric:tabular-nums}
.marcador b{font-size:19px; font-variant-numeric:tabular-nums}
.marcador .estado{font-size:14px; color:var(--tinta-2)}

/* ====================================================== bloc y reproductor */
.bloc{width:100%; min-height:210px; resize:vertical; font:inherit; font-size:14.5px;
  line-height:1.55; padding:11px 13px; border-radius:3px; border:1px solid #b9c6d4;
  background:#fff; box-shadow:inset 0 1px 3px rgba(0,30,60,.14)}
.guardado{font-size:13px; color:#0e5a2c; margin-top:8px}

.repro{display:grid; gap:11px; margin-top:10px}
.repro canvas{width:100%; height:76px; display:block; border-radius:3px;
  border:1px solid #b9c6d4; background:linear-gradient(180deg,#0a2540,#061a30)}
.repro .fila{display:flex; align-items:center; gap:10px}
.repro .redondito{width:42px; height:42px; flex:none; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#0d3a68; border:1px solid rgba(255,255,255,.6);
  background:radial-gradient(circle at 36% 26%, #ffffff, #d6e9f7 46%, #9dc4e2);
  box-shadow:inset 0 1px 0 #fff, 0 2px 6px rgba(0,25,60,.3)}
.repro .redondito svg{width:17px; height:17px}
.repro input[type=range]{flex:1; min-width:0; accent-color:hsl(var(--tono) 60% 45%)}
.repro .t{font-size:12.5px; color:var(--tinta-2); font-variant-numeric:tabular-nums; flex:none}

/* ====================================================== panel de control */
.control{display:grid; gap:14px; margin-top:10px}
.control label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px}
.control .tira{width:100%; height:26px; border-radius:4px; border:1px solid #93a7b8;
  cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.control input[type=range]{width:100%; accent-color:hsl(var(--tono) 60% 45%)}
.fondos{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px;
  padding:0; margin:0; list-style:none}
.fondos button{width:100%; aspect-ratio:16/10; padding:0; cursor:pointer; border-radius:3px;
  overflow:hidden; border:1px solid #93a7b8; background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.fondos button[aria-pressed="true"]{border-color:#1a6ea8; box-shadow:0 0 0 2px #7fc4ec}
.interruptores{display:grid; gap:8px}
.interruptores label{display:flex; align-items:center; gap:9px; font-weight:400; margin:0}

.pie{margin:14px auto 0; width:min(1120px,100%); color:#eaf6ff; font-size:12.5px;
  text-shadow:0 1px 3px rgba(0,25,60,.7); position:relative; z-index:1}
.pie a{color:#cdeaff}

/* ====================================================== angosto */
@media (max-width:900px){
  body{padding:10px 10px calc(62px + env(safe-area-inset-bottom,0px))}
  .hoja{grid-template-columns:minmax(0,1fr)}
  .ventana.pegajosa{position:static}
  .cartel{flex-direction:column; text-align:center; padding:18px 16px}
  .cartel .globo{width:74px; height:74px}
  .cartel p{margin-inline:auto}
  .tareas .hora .dia{display:none}
  .iconos{grid-template-columns:repeat(auto-fill,minmax(80px,80px))}
  .iconos button{width:80px; font-size:12px}
  .minas button{width:clamp(26px,8.4vw,32px); height:clamp(26px,8.4vw,32px); font-size:14px}
}

/* ===========================================================================
   COLABORAR

   Aparece una vez, después de entrar, y SE PUEDE CERRAR SIEMPRE. Un muro de
   donaciones que no deja pasar no recauda: espanta. El botón de salir no está
   escondido ni en gris clarito, y la elección se recuerda: quien dijo que no,
   no lo vuelve a ver por un mes; quien dijo que ya donó, no lo ve más.
   =========================================================================== */
#fondoDona{position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  padding:20px; overflow:auto;
  background:radial-gradient(90% 70% at 50% 30%, rgba(10,42,80,.62), rgba(4,16,34,.86));
  backdrop-filter:blur(7px) saturate(130%); -webkit-backdrop-filter:blur(7px) saturate(130%);
  animation:aparecer .35s ease both}
#fondoDona .ventana{width:min(560px,100%)}

.dona .gracias{display:flex; gap:14px; align-items:flex-start; margin-bottom:12px}
.dona .gracias img{width:64px; height:64px; flex:none;
  filter:drop-shadow(0 8px 12px rgba(2,30,70,.35))}
.dona .gracias h2{font-size:20px; margin-bottom:5px}
.dona .gracias p{margin:0; font-size:14.5px; color:var(--tinta-2); line-height:1.45}

/* la solapa de moneda: dos botones pegados, como las de Vista */
.monedas{display:flex; gap:0; margin-top:4px}
.monedas button{flex:1; padding:8px 10px; cursor:pointer; font-size:14.5px; font-weight:600;
  border:1px solid var(--bot-borde); background:var(--bot); color:var(--tinta);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)}
.monedas button:first-child{border-radius:3px 0 0 3px}
.monedas button:last-child{border-radius:0 3px 3px 0; border-left:0}
.monedas button:hover{background:var(--bot-encima); border-color:var(--bot-borde-encima)}
.monedas button[aria-pressed="true"]{background:var(--bot-pulsado); border-color:#6d91ab}

.montos{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:10px}
.montos button{padding:11px 4px; cursor:pointer; border-radius:3px; font-size:15px;
  font-weight:600; font-variant-numeric:tabular-nums;
  border:1px solid var(--bot-borde); background:var(--bot); color:var(--tinta);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)}
.montos button:hover{background:var(--bot-encima); border-color:var(--bot-borde-encima)}
.montos button[aria-pressed="true"]{background:var(--bot-pulsado); border-color:#6d91ab}
.otro{display:flex; align-items:center; gap:8px; margin-top:9px}
.otro span{font-size:14px; color:var(--tinta-2); flex:none}
.otro input{flex:1; min-width:0; font:inherit; font-size:15px; padding:7px 11px;
  border-radius:3px; border:1px solid #b9c6d4; background:#fff;
  box-shadow:inset 0 1px 3px rgba(0,30,60,.14); font-variant-numeric:tabular-nums}

/* los botones de pago: grandes, con el corte al 45 % y el color de cada marca */
.pagos{display:grid; gap:9px; margin-top:14px}
.pago{display:flex; align-items:center; gap:12px; padding:12px 15px; cursor:pointer;
  border-radius:4px; text-decoration:none; font-size:15.5px; font-weight:600;
  border:1px solid #4a6b86; color:#fff; text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 5px rgba(0,25,60,.28)}
.pago svg{width:26px; height:26px; flex:none}
.pago small{display:block; font-weight:400; font-size:13px; opacity:.88; margin-top:1px}
.pago.mp{background:linear-gradient(180deg,#5ec8f5 45%,#2d9fdc 45%,#1878b8); border-color:#166ea8}
.pago.mp:hover{background:linear-gradient(180deg,#79d6fb 45%,#3fb0e8 45%,#1d86c8)}
.pago.pp{background:linear-gradient(180deg,#3b7bd4 45%,#1e4fa0 45%,#14357a); border-color:#12306e}
.pago.pp:hover{background:linear-gradient(180deg,#5090e6 45%,#2660b4 45%,#193f8c)}
.pago[aria-disabled="true"]{opacity:.55; cursor:not-allowed; filter:grayscale(.5)}

.alias{display:flex; align-items:center; gap:8px; margin-top:11px; padding:9px 11px;
  border-radius:3px; border:1px solid var(--agua-borde);
  background:linear-gradient(180deg,var(--agua-1),var(--agua-2))}
.alias .et{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#3d6b78; flex:none}
.alias code{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14.5px; color:#0e3b4a}

.dona .salidas{display:flex; gap:8px; margin-top:16px; align-items:center}
.dona .salidas .bt{flex:1; justify-content:center}
.dona .chico{margin-top:12px; font-size:12.5px; line-height:1.5; color:var(--tinta-2)}
.dona .chico b{color:var(--tinta)}
@media (max-width:520px){
  .montos{grid-template-columns:repeat(2,1fr)}
  .dona .salidas{flex-direction:column-reverse; align-items:stretch}
}

/* ===========================================================================
   LO SOCIAL — barra de arriba, muro y perfiles

   Facebook de 2008 y Windows Vista son el mismo año y el mismo gusto: barra
   azul arriba, cajas blancas con borde fino, azul de enlace saturado. No hay
   que forzar nada para que convivan; se usan los mismos cortes al 45 % del
   resto del escritorio.
   =========================================================================== */
#barraSocial{position:sticky; top:0; z-index:70; display:flex; align-items:center;
  gap:10px; padding:8px 12px; margin:-14px -14px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12) 45%,
                            rgba(255,255,255,.04) 46%, rgba(255,255,255,.16)),
    hsl(var(--tono) var(--sat) 34% / .94);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 3px 12px rgba(0,20,50,.35)}
#barraSocial .logo{display:flex; align-items:center; gap:8px; color:#fff; font-weight:700;
  font-size:17px; letter-spacing:-.01em; text-decoration:none; flex:none;
  text-shadow:0 1px 2px rgba(0,20,50,.5)}
#barraSocial .logo img{width:26px; height:26px}
#barraSocial .hueco{flex:1}
.bsBtn{width:36px; height:34px; flex:none; padding:0; cursor:pointer; border-radius:4px;
  display:grid; place-items:center; color:#eaf6ff;
  border:1px solid rgba(255,255,255,.32);
  background:linear-gradient(180deg, rgba(255,255,255,.26) 45%, rgba(255,255,255,.09) 45%, rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.bsBtn:hover{background:linear-gradient(180deg, rgba(190,230,253,.5) 45%, rgba(120,190,235,.3) 45%, rgba(80,160,215,.22))}
.bsBtn svg{width:19px; height:19px}
.bsYo{display:flex; align-items:center; gap:7px; padding:3px 9px 3px 3px; cursor:pointer;
  border-radius:999px; color:#fff; font-size:13.5px; font-weight:600; flex:none;
  border:1px solid rgba(255,255,255,.32);
  background:linear-gradient(180deg, rgba(255,255,255,.24) 45%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.03))}
.bsYo:hover{background:linear-gradient(180deg, rgba(190,230,253,.5) 45%, rgba(120,190,235,.3) 45%, rgba(80,160,215,.22))}
.bsYo img{width:28px; height:28px; border-radius:50%; background:#2b74b8;
  border:1px solid rgba(255,255,255,.6)}
@media (max-width:560px){ .bsYo span{display:none} }

/* el cajón de las 3 rayitas */
  box-shadow:6px 0 26px rgba(0,20,50,.5); animation:entraIzq .22s ease both}
@keyframes entraIzq{from{transform:translateX(-100%)}}
  background:none; color:inherit; font-size:14.5px}

/* ------------------------------------------------------------- el muro */
.pubs{display:grid; gap:12px}
.pub{border-radius:5px; border:1px solid #c2d0de; overflow:hidden;
  background:linear-gradient(180deg,#ffffff,#f4f8fc);
  box-shadow:inset 0 1px 0 #fff, 0 2px 6px rgba(0,30,60,.14)}
.pub .quien{display:flex; align-items:center; gap:10px; padding:10px 13px;
  border-bottom:1px solid #e3ebf3;
  background:linear-gradient(180deg,#f7fbff,#e9f2fa)}
.pub .quien img{width:40px; height:40px; border-radius:4px; flex:none;
  border:1px solid #b9cde0; background:#dceaf6}
.pub .quien b{display:block; font-size:14.5px}
.pub .quien a{color:var(--enlace); text-decoration:none}
.pub .quien a:hover{text-decoration:underline}
.pub .quien time{display:block; font-size:12.5px; color:var(--tinta-2)}
.pub .cuerpo2{padding:12px 13px}
.pub h3{font-size:17px; margin-bottom:6px}
.pub p{margin:0; font-size:14.5px; line-height:1.5; white-space:pre-wrap;
  overflow-wrap:anywhere}
.pub .meta{display:inline-block; margin-top:9px; padding:3px 10px; border-radius:999px;
  font-size:12.5px; color:#0e3b5e; border:1px solid #9fd0e6;
  background:linear-gradient(180deg,#fff 45%,#e2f4fc 45%,#c9ebf8)}
.pub .patas{display:flex; align-items:center; gap:8px; padding:10px 13px;
  border-top:1px solid #e3ebf3; background:#f6fafd; flex-wrap:wrap}
.pub .patas .cuenta{margin-left:auto; font-size:13px; color:var(--tinta-2)}
.bt.oro{border-color:#c79a1e; color:#4a3405;
  background:linear-gradient(180deg,#fff6d8 45%,#ffd23f 45%,#e2a80f)}
.bt.oro:hover{background:linear-gradient(180deg,#fffbe9 45%,#ffdd6a 45%,#f0b81a)}

/* ------------------------------------------------------------- perfil */
.tapa{position:relative; border-radius:5px 5px 0 0; height:96px; overflow:hidden;
  border:1px solid #b9cde0; border-bottom:0;
  background:linear-gradient(120deg, hsl(var(--tono) 62% 42%), hsl(var(--tono) 70% 66%) 60%, #bff0f6)}
.tapa::after{content:""; position:absolute; inset:0 0 auto; height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.05))}
.fichaP{display:flex; gap:14px; align-items:flex-end; margin-top:-38px; padding:0 14px 14px;
  position:relative; z-index:1; border:1px solid #c2d0de; border-top:0; border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,#ffffff,#f4f8fc)}
.fichaP img{width:88px; height:88px; border-radius:5px; flex:none; background:#dceaf6;
  border:3px solid #fff; box-shadow:0 3px 10px rgba(0,30,60,.3)}
.fichaP .dat{padding-bottom:4px; min-width:0}
.fichaP h2{font-size:22px}
.fichaP .arroba{font-size:14px; color:var(--tinta-2)}
.fichaP p{margin:7px 0 0; font-size:14px; line-height:1.45; overflow-wrap:anywhere}

/* ------------------------------------------------- formularios sociales */
.campoS{margin-top:11px}
.campoS label{display:block; font-size:13.5px; font-weight:600; margin-bottom:5px}
.campoS input,.campoS textarea{width:100%; font:inherit; font-size:15px; padding:8px 12px;
  border-radius:3px; border:1px solid #b9c6d4; background:#fff;
  box-shadow:inset 0 1px 3px rgba(0,30,60,.14)}
.campoS textarea{min-height:110px; resize:vertical; line-height:1.5}
.campoS small{display:block; margin-top:4px; font-size:12.5px; color:var(--tinta-2)}
.retratos{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.retratos button{width:46px; height:46px; padding:3px; cursor:pointer; border-radius:3px;
  border:1px solid var(--bot-borde); background:var(--bot)}
.retratos button[aria-pressed="true"]{background:var(--bot-pulsado); border-color:#6d91ab}
.retratos img{width:100%; height:100%; object-fit:contain}
.avisoS{margin-top:10px; font-size:13.5px}

/* ============================================================ Aero+
   La zona de donantes. Se ve distinta al escritorio a propósito: si lo que se
   desbloquea fuera la misma pantalla con un cartel encima, no se sentiría
   desbloqueado. Vidrio más oscuro, tipografía más grande y una sola columna de
   aplicaciones a la izquierda. */
#aeromas{position:fixed; inset:0; z-index:120; display:flex; flex-direction:column;
  color:#eaf6ff; overflow:hidden; background:#06243f}
.am-fondo{position:absolute; inset:0; background-size:cover; background-position:center;
  transition:opacity .5s ease}
.am-fondo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,18,38,.30), rgba(3,18,38,.62))}
@media (prefers-reduced-motion:reduce){ .am-fondo{transition:none} }

.am-barra{position:relative; z-index:2; display:flex; align-items:center; gap:12px;
  padding:9px 14px; border-bottom:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(190,230,253,.28) 45%, rgba(10,40,70,.55) 45%,
                                     rgba(6,26,48,.7));
  backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.am-logo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:17px;
  letter-spacing:.01em; text-shadow:0 1px 3px rgba(0,20,45,.6)}
.am-logo img{width:26px; height:26px}
.am-quien{margin-left:auto; font-size:13.5px; color:rgba(226,242,255,.85)}
.am-bt{flex:none; cursor:pointer; font:inherit; font-size:13px; padding:6px 13px;
  border-radius:4px; color:#0d2b44; border:1px solid #9fc4dd;
  background:linear-gradient(180deg,#f6fcff 45%,#d8ecfa 45%,#b9dcf3);
  box-shadow:inset 0 1px 0 #fff, 0 1px 3px rgba(0,20,50,.35)}
.am-bt:hover{background:linear-gradient(180deg,#fff 45%,#e8f6ff 45%,#cfe8fb)}

.am-cuerpo{position:relative; z-index:2; flex:1; min-height:0; display:flex; gap:0}
.am-apps{width:214px; flex:none; overflow:auto; padding:12px 10px; display:grid;
  gap:7px; align-content:start; border-right:1px solid rgba(255,255,255,.13);
  background:rgba(6,26,48,.34); backdrop-filter:blur(14px)}
.am-apps button{width:100%; text-align:left; display:flex; gap:11px; align-items:flex-start;
  cursor:pointer; font:inherit; color:#eaf6ff; padding:10px 11px; border-radius:5px;
  border:1px solid transparent; background:transparent}
.am-apps button:hover{border-color:rgba(255,255,255,.28);
  background:linear-gradient(180deg, rgba(190,230,253,.26) 45%, rgba(120,190,235,.16) 45%,
                                     rgba(80,160,215,.12))}
.am-apps button[aria-current="true"]{border-color:rgba(255,255,255,.5);
  background:linear-gradient(180deg, rgba(190,230,253,.4) 45%, rgba(120,190,235,.26) 45%,
                                     rgba(80,160,215,.2))}
.am-apps .lam{width:26px; height:26px; flex:none; margin-top:1px;
  filter:drop-shadow(0 2px 4px rgba(0,25,60,.55))}
.am-apps b{display:block; font-size:14.5px; font-weight:600}
.am-apps span{display:block; font-size:12px; color:rgba(226,242,255,.72); line-height:1.45}

.am-panel{flex:1; min-width:0; overflow:auto; padding:20px clamp(14px,3vw,30px) 40px}
.am-panel h2{margin:0 0 4px; font-size:22px; font-weight:600;
  text-shadow:0 1px 4px rgba(0,20,45,.6)}
.am-panel .baja{margin:0 0 16px; font-size:14px; color:rgba(226,242,255,.8); max-width:62ch}
.am-caja{border-radius:6px; padding:14px; margin-bottom:14px;
  border:1px solid rgba(255,255,255,.2); background:rgba(8,30,55,.42);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.am-caja h3{margin:0 0 9px; font-size:15px; font-weight:600}

/* la grilla de fondos y de marcos: una sola regla para las dos */
.am-rej{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.am-rej button{padding:0; cursor:pointer; border-radius:5px; overflow:hidden;
  border:2px solid rgba(255,255,255,.22); background:rgba(0,20,40,.4); display:block}
.am-rej button:hover{border-color:rgba(255,255,255,.55)}
.am-rej button[aria-pressed="true"]{border-color:#ffd23f;
  box-shadow:0 0 0 2px rgba(255,210,63,.35)}
.am-rej img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover}
.am-rej .pie{display:block; padding:6px 8px; font-size:12.5px; text-align:left}
/* los marcos son redondos y van sobre un retrato, no recortados a 16:9 */
.am-rej.aros button{border-radius:50%; aspect-ratio:1}
.am-rej.aros img{aspect-ratio:1; object-fit:contain; background:rgba(255,255,255,.06)}

.am-fila{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.am-previa{position:relative; width:104px; height:104px; flex:none}
.am-previa .rt{position:absolute; inset:13%; width:74%; height:74%; border-radius:50%;
  object-fit:cover; background:#2b74b8}
.am-previa .ar{position:absolute; inset:0; width:100%; height:100%}
.am-panel label{display:block; font-size:13px; font-weight:600; margin-bottom:5px}
.am-panel input[type=text]{width:100%; font:inherit; font-size:15px; padding:8px 12px;
  border-radius:3px; border:1px solid #b9c6d4; background:#fff; color:#123}
.am-panel input[type=range]{width:100%; accent-color:#ffd23f}

.am-barrita{height:16px; border-radius:999px; overflow:hidden; border:1px solid #93a7b8;
  background:#fff; box-shadow:inset 0 1px 3px rgba(0,30,60,.2)}
.am-barrita i{display:block; height:100%; width:0%; transition:width .35s ease;
  background:linear-gradient(180deg,#bff0f6 45%,#45b4d8 45%,#1a7fb0)}
#am-instalar{position:fixed; inset:0; z-index:130; display:grid; place-items:center;
  padding:16px; background:rgba(4,16,34,.62); backdrop-filter:blur(6px)}
#am-instalar .ventana{width:min(430px,100%)}

@media (max-width:640px){
  .am-cuerpo{flex-direction:column}
  .am-apps{width:auto; border-right:0; border-bottom:1px solid rgba(255,255,255,.13);
    grid-template-columns:1fr 1fr; padding:9px}
  .am-apps span{display:none}
  .am-panel{padding:14px 12px 30px}
}

/* ================================================= el escritorio en el teléfono
   En una pantalla grande el escritorio arranca con las ventanas abiertas y se
   lee como un escritorio. En un teléfono eso mismo es una tira de nueve cosas
   apiladas que hay que scrollear: no se parece a un escritorio, se parece a una
   página larga. Así que en el teléfono arranca como arranca un teléfono —fondo,
   grilla de íconos y un muelle abajo— y las ventanas se abren encima. */
@media (max-width:720px){
  .iconos{grid-template-columns:repeat(4,1fr); gap:2px 0; padding:10px 8px 0}
  .iconos button{width:auto; padding:9px 2px 8px; font-size:11.5px; line-height:1.25}
  .iconos .lam{width:44px; height:44px}

  /* la ventana abierta tapa la pantalla, como una aplicación de teléfono, en
     vez de empujar a las de abajo.

     ARRANCA DEBAJO DE LA BARRA, NO EN CERO. Con `top:0` la barra de título de
     la ventana —donde está la cruz de cerrar— quedaba justo abajo de
     #barraSocial, que se la comía entera: tocar la cruz abría el menú del
     perfil. O sea que se entraba a una aplicación y no había forma de salir,
     que es exactamente como se ve el bug desde afuera. Subirle el z-index no
     alcanza: la barra es `sticky` y gana el toque igual. Dejarle el lugar es
     además lo que corresponde en un teléfono: la barra con los avisos y el
     perfil sigue a mano con la aplicación abierta.

     El alto lo mide el JS y lo deja en --barra-alta, porque depende de la
     tipografía del aparato; los 52px son el valor de hoy y sólo se usan si el
     JS no llegó a correr. */
  #escritorio .ventana:not([hidden]){
    position:fixed; left:0; right:0; top:var(--barra-alta,52px); z-index:90;
    bottom:calc(56px + env(safe-area-inset-bottom,0px));
    margin:0; border-radius:0; display:flex; flex-direction:column}
  #escritorio .ventana:not([hidden]) > .cuerpo{flex:1; min-height:0; overflow:auto}
  #escritorio .ventana.pegajosa{position:fixed}
  /* el muelle deja lugar arriba de la barra de tareas */
  .tareas{padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
}

/* ------------------------------------------------------------- el muelle */
.muelle{position:fixed; left:0; right:0; z-index:85; display:none;
  justify-content:center; gap:10px; padding:7px 12px;
  bottom:calc(56px + env(safe-area-inset-bottom,0px))}
.muelle button{position:relative; width:52px; height:46px; flex:none; padding:0;
  cursor:pointer; border-radius:7px; border:1px solid rgba(255,255,255,.5);
  background:linear-gradient(180deg, rgba(233,246,255,.9) 45%, rgba(176,214,242,.82) 45%,
                                     rgba(139,190,229,.8));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 4px 12px rgba(0,25,60,.45);
  backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%)}
.muelle button:active{transform:translateY(1px)}
.muelle svg{width:26px; height:26px}
.muelle b{position:absolute; top:-4px; right:-4px; min-width:17px; height:17px;
  border-radius:999px; font-size:10.5px; line-height:17px; color:#fff; font-weight:700;
  background:linear-gradient(180deg,#ff6a5a,#d0241a); border:1px solid #fff;
  box-shadow:0 1px 3px rgba(0,20,50,.5)}
@media (max-width:720px){ .muelle:not([hidden]){display:flex} }

/* ------------------------------------------ los avisos, cada uno su ventana
   Un aviso que aparece y se va solo es un aviso que alguien se pierde. Acá se
   quedan hasta que los cierres, y cerrarlos es lo que los marca leídos: el
   gesto de sacarlo de la pantalla y el de darlo por visto son el mismo. */
#avisitos{position:fixed; right:12px; z-index:110; display:grid; gap:8px;
  width:min(320px, calc(100vw - 24px)); pointer-events:none;
  bottom:calc(62px + env(safe-area-inset-bottom,0px))}
@media (max-width:720px){
  #avisitos{left:12px; right:12px; width:auto;
    bottom:calc(112px + env(safe-area-inset-bottom,0px))}
}
.avisito{pointer-events:auto; border-radius:6px; overflow:hidden;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 10px 30px -8px rgba(0,20,50,.75), inset 0 1px 0 rgba(255,255,255,.7);
  animation:avisoEntra .32s cubic-bezier(.2,.9,.3,1.2) both}
@media (prefers-reduced-motion:reduce){ .avisito{animation:none} }
@keyframes avisoEntra{ from{opacity:0; transform:translateY(14px) scale(.97)} }
.avisito.yendo{animation:avisoSale .22s ease forwards}
@keyframes avisoSale{ to{opacity:0; transform:translateX(18px) scale(.98)} }
.avisito .titulo{display:flex; align-items:center; gap:8px; padding:5px 6px 5px 9px;
  font-size:12.5px; font-weight:600; color:#0d2b44;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 45%, rgba(206,232,250,.9) 45%,
                                     rgba(168,208,238,.92))}
.avisito .titulo .bola{width:11px; height:11px; border-radius:50%; flex:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8)}
.avisito .titulo .x{margin-left:auto; width:22px; height:19px; flex:none; padding:0;
  cursor:pointer; border-radius:3px; color:#3a1a14; border:1px solid #c98b80;
  background:linear-gradient(180deg,#ffd9d2 45%,#f08b78 45%,#d6432a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.avisito .titulo .x svg{width:9px; height:9px; display:block; margin:0 auto}
.avisito .cuerpo3{padding:10px 11px; font-size:13.5px; line-height:1.5; color:#122c44;
  background:linear-gradient(180deg,#fbfdff,#eef6fc)}
.avisito .cuerpo3 time{display:block; margin-top:4px; font-size:11.5px; color:#5b7690}

/* Un ícono oculto seguía ocupando su casillero: el `hidden` está en el botón y
   quien hace de casillero es el <li> de alrededor, así que la grilla dejaba un
   hueco en el medio —se veía como si faltara algo—. Se oculta el casillero. */
.iconos li:has(> button[hidden]){display:none}

/* ============================================ la caja de buscar y la papelera
   Copian la disposición del lanzador que pidió el dueño —tarjeta arriba, grilla
   de íconos, papelera abajo a la derecha, muelle y botón de inicio— pero con el
   cromo de Vista: los mismos cortes al 45 %, el mismo vidrio, el mismo azul. */
.buscaCaja{margin:12px 10px 4px; border-radius:6px; overflow:hidden;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 6px 18px -6px rgba(0,20,50,.55), inset 0 1px 0 rgba(255,255,255,.75);
  background:linear-gradient(180deg, rgba(238,248,255,.86) 45%, rgba(198,228,250,.8) 45%,
                                     rgba(170,210,240,.82));
  backdrop-filter:blur(14px) saturate(165%); -webkit-backdrop-filter:blur(14px) saturate(165%)}
.buscaCaja .rotulo{display:flex; align-items:center; gap:7px; padding:6px 10px 5px;
  font-size:12.5px; font-weight:600; color:#0d3a5e;
  text-shadow:0 1px 0 rgba(255,255,255,.7)}
.buscaCaja .rotulo img{width:17px; height:17px}
.buscaCaja .campoB{display:flex; align-items:center; gap:0; margin:0 8px 8px;
  border-radius:4px; overflow:hidden; background:#fff; border:1px solid #8fb1cc;
  box-shadow:inset 0 1px 3px rgba(0,30,60,.22)}
.buscaCaja .lupa{width:19px; height:19px; flex:none; margin:0 4px 0 8px}
.buscaCaja input{flex:1; min-width:0; font:inherit; font-size:15px; padding:9px 6px;
  border:0; outline-offset:-2px; background:transparent; color:#123}
.buscaCaja .irB{flex:none; width:46px; height:38px; padding:0; cursor:pointer; border:0;
  border-left:1px solid #7fae7f;
  background:linear-gradient(180deg,#a8e08a 45%,#4d9c37 45%,#2f7a1f)}
.buscaCaja .irB:hover{background:linear-gradient(180deg,#bdea9f 45%,#5cae44 45%,#3a8a29)}
.buscaCaja .irB svg{width:20px; height:20px; display:block; margin:0 auto}

/* la papelera, sola contra el fondo, como corresponde */
.papelera{display:block; margin:18px 14px 0 auto; width:86px; padding:8px 4px 7px;
  cursor:pointer; border-radius:4px; border:1px solid transparent; background:transparent;
  color:#eaf6ff; font:inherit; font-size:12px; text-align:center;
  text-shadow:0 1px 3px rgba(0,25,60,.85)}
.papelera:hover{border-color:rgba(255,255,255,.45);
  background:linear-gradient(180deg, rgba(190,230,253,.3) 45%, rgba(120,190,235,.2) 45%,
                                     rgba(80,160,215,.16))}
.papelera .lam{display:block; width:44px; height:44px; margin:0 auto 4px;
  filter:drop-shadow(0 3px 5px rgba(0,25,60,.6))}

/* ------------------------------------------------ el teléfono, la disposición
   Una pantalla y se acabó: tarjeta, íconos, fondo, papelera, muelle y el orbe
   grande abajo. Los aparatos y el pie del sitio quedan fuera de la pantalla de
   inicio —son de leer, no de tocar— y aparecen al abrir «Frutiger Aero». */
@media (max-width:720px){
  /* NO se oculta `.hoja`: adentro viven las ventanas, y un padre en
     `display:none` se lleva puesto todo lo de adentro por mucho que después
     se le diga al hijo que se muestre. Se ocultan los aparatos y el pie, que
     es lo que sobra, y `.hoja` se queda sin alto sola porque sus ventanas
     ya están cerradas. */
  #escritorio > .pie, #escritorio .aparato{display:none}
  #escritorio > .hoja{padding:0; gap:0; margin:0}
  #escritorio > .hoja > .col{gap:0}
  .buscaCaja{margin:10px 10px 2px}
  .papelera{margin-top:10px}

  /* el orbe, grande y al medio, como el botón de inicio del lanzador */
  .tareas{justify-content:center; gap:0}
  .tareas .orbe{width:62px; height:62px; margin:-14px 0 0}
  .tareas .hora{position:absolute; right:12px; margin:0}
}