/* ============================================================
   EL INICIO DE CADA UNO

   La primera versión de este archivo era una grilla de seis columnas con el
   contenido DESNUDO dentro: sin fondo, sin borde, sin padding. Medido: los
   bloques daban `background: rgba(0,0,0,0)`, `border: 0px`, `padding: 0px`,
   había once títulos idénticos en mayúsculas de 11px gritando a la vez, y
   las filas quedaban con agujeros de 142px porque un bloque de 204px de alto
   convivía con otro de 62px. Se veía horrible y lo era.

   Lo que se cambió, y por qué:

   1. CADA BLOQUE ES UNA TARJETA DE VERDAD. Fondo, borde de 1px, radio y
      24px de aire dentro. Con contenedor, un bloque bajo al lado de uno alto
      se lee como espacio en blanco a propósito; sin contenedor se lee como
      algo roto. Ese era el 80% del problema.

   2. DOS ANCHOS, y es aritmética: completo (12) y mitad (6). Con esos las
      filas SIEMPRE cierran. La versión intermedia tenía un «tercio» de 4
      columnas, y 6+4 da 10 — seguían quedando 155px muertos a la derecha.
      Además las tarjetas de una fila se estiran a la misma altura: un
      escalón se lee como algo roto; dos parejas, como una decisión.

   3. UNA SOLA VOZ POR TARJETA. El título va dentro, a 14px y en redonda,
      con su icono. Once mayúsculas de 11px no son jerarquía: son ruido.

   4. EL COVER MANDA. Ocupa de verdad y el saludo va encima. Es lo primero
      que ve la persona al entrar y es donde vive su gusto.

   Referencias de densidad: tarjetas de 24px de padding y 20px de separación,
   que es la zona donde se mueven los productos que se sienten caros —
   suficiente aire para respirar, sin que el ojo tenga que viajar.
   ============================================================ */

/* ---------- lo que se aprendio mirando a los que lo hacen bien ----------

   Estos cuatro valores salen de leer el CSS de produccion de Linear, Geist y
   Raycast, y son los que mas cambian la sensacion sin tocar la estructura:

   1. EL BORDE A MEDIO PIXEL EN PANTALLAS RETINA. Es la diferencia entre
      "parece una web" y "parece una app". Tres lineas de media query.

   2. EL HOVER ENTRA EN 0ms Y SALE EN 150ms. Esa asimetria es la firma de
      Linear: nada que responda a la intencion de la persona se hace esperar,
      pero al soltar se va con calma. Con una transicion simetrica de 250ms
      la interfaz se siente pastosa aunque tarde lo mismo.

   3. UN CUARTO NIVEL DE TEXTO. El portal tenia tres; los que se ven bien usan
      cuatro. El cuarto es para lo que esta ahi pero no se lee: unidades,
      marcas de tiempo, texto deshabilitado.

   4. NADA DE NEGRO PURO NI BLANCO PURO. Ninguno de los productos estudiados
      los usa. Ya se cumplia en este portal; queda anotado para no perderlo.
*/
:root{
  --border-hairline:1px;
  --text-4:color-mix(in srgb, var(--text-3) 62%, transparent);
  --hover-in:0s;
  --hover-out:.15s;
}
@media (min-resolution:192dpi),(-webkit-min-device-pixel-ratio:2){
  :root{ --border-hairline:.5px; }
}

/* ---------------- el lienzo ---------------- */
.inicio-lienzo{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
  /* stretch y no start: las tarjetas de una misma fila terminan a la misma
     altura. Dos tarjetas desparejas dejan un escalón que se lee como algo
     roto; dos parejas con algo de aire dentro se leen como decisión. */
  align-items:stretch;
}
/* Las columnas las decide el empaquetador de js/inicio.js y llegan puestas
   en la clase. Aquí solo se declaran las doce anchuras posibles: así una
   tarjeta puede acabar con 4, 6, 7, 8 o las que le toquen al rellenar su
   fila, sin tener que inventar un nombre para cada caso. */
.bloque{ min-width:0;display:flex;flex-direction:column; }
.bloque > .bloque-caja{ flex:1; }
.bloque.col-1{grid-column:span 1}   .bloque.col-2{grid-column:span 2}
.bloque.col-3{grid-column:span 3}   .bloque.col-4{grid-column:span 4}
.bloque.col-5{grid-column:span 5}   .bloque.col-6{grid-column:span 6}
.bloque.col-7{grid-column:span 7}   .bloque.col-8{grid-column:span 8}
.bloque.col-9{grid-column:span 9}   .bloque.col-10{grid-column:span 10}
.bloque.col-11{grid-column:span 11} .bloque.col-12{grid-column:span 12}

@media (max-width:760px){
  .inicio-lienzo{ gap:14px; }
  /* En el teléfono todo a lo ancho: media tarjeta en una pantalla de cuatro
     pulgadas no es una opción, es un error. */
  .bloque{ grid-column:span 12 !important; }
}

#view-inicio.inicio-ancho{ max-width:none; }

/* ---------------- la tarjeta ----------------
   Los bloques «lisos» (fichaje, avisos, números) NO llevan tarjeta: ya traen
   su propia piel y meterlos en una caja sería una caja dentro de otra. */
.bloque-caja{
  background:var(--surface);
  border:var(--border-hairline) solid var(--border);
  border-radius:16px;
  padding:22px 24px 24px;
  /* al soltar, con calma */
  transition:border-color var(--hover-out) var(--ease);
}
/* al entrar, al instante */
.bloque-caja:hover{ border-color:var(--border-hi);transition-duration:var(--hover-in); }
.bloque.liso .bloque-caja{
  background:transparent;border:none;padding:0;
}

/* El encabezado de la tarjeta: icono tenue, título en redonda, y a la
   derecha lo que esa tarjeta deja hacer. */
.bloque-cab{
  display:flex;align-items:center;gap:9px;
  margin-bottom:16px;
}
.bloque-cab .ico{ color:var(--text-3); flex:none; }
/* Titulo de seccion: 16/24, peso 600, tracking -0.02em. El tracking negativo
   va escalonado y NO continuo: hasta 20px -0.02em, de 24 a 32 -0.04em, y por
   debajo de 14px CERO. Aplicarle -0.02em a un texto de 12px es el error
   clasico que aprieta lo que ya era pequeno. */
.bloque-cab h3{
  font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.02em;
  color:var(--text);margin:0;flex:1;text-transform:none;
}
.bloque-cab .cab-extra{
  font-size:12px;line-height:16px;color:var(--text-3);font-weight:500;
  letter-spacing:0;font-variant-numeric:tabular-nums;
}
/* «Ver todas» es texto terciario a 12px, no un boton. Un boton al lado del
   titulo compite con el contenido de la tarjeta, que es lo que importa. */
.bloque-cab .cab-accion{
  background:transparent;border:none;color:var(--text-3);cursor:pointer;
  font-size:12px;line-height:16px;font-weight:500;letter-spacing:0;font-family:inherit;
  display:inline-flex;align-items:center;gap:4px;padding:4px 7px;
  border-radius:7px;transition:color var(--hover-out) var(--ease), background var(--hover-out) var(--ease);
}
.bloque-cab .cab-accion:hover{
  color:var(--text);background:var(--surface-2);transition-duration:var(--hover-in);
}

/* Dentro de una tarjeta los subtítulos bajan de volumen: la tarjeta ya dijo
   de qué va. */
/* Etiqueta de subseccion: 12px, peso 500, tracking POSITIVO en mayusculas.
   Las mayusculas necesitan que se les abra el espacio, al reves que los
   titulos grandes. */
.bloque-caja .col-title{
  font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);margin:0 0 10px;
}
.bloque-caja .col-title:not(:first-child){ margin-top:22px; }

/* ---------------- el cover y el saludo ---------------- */
/* LA PORTADA ES LA PANTALLA, no una franja decorativa encima de ella.

   En los Homes que sirven de referencia la portada ocupa el ancho ENTERO y
   como un tercio de lo que se ve al entrar. La version anterior media 190px
   con los margenes de la pagina a los lados, y a ese tamano una foto se lee
   como una miniatura estirada, no como una portada.

   Ahora se sale de la columna de contenido hasta tocar los bordes -- eso es
   lo que hace que se sienta portada y no imagen pegada -- y sube a 300px con
   foto. Con degradado se queda mas baja a proposito: 300px de degradado es
   mucho color y ninguna informacion; una foto a 300px si dice algo. */
.hero-cover{
  height:220px;position:relative;
  /* La portada NO recorta: la foto de perfil cuelga por fuera de su borde de
     abajo. Con overflow:hidden se quedaba cortada por la mitad. La imagen se
     recorta igual porque va de fondo con background-size:cover. */
  overflow:visible;
  margin:-40px -48px 86px;      /* se come el padding real de #main: 40px 48px */
  /* 86 abajo y no 46: de la portada ya no cuelga solo la foto. Quien manda
     es la hora, la pieza mas alta de la fila, que sobresale 54px por debajo
     del borde -- y desde que se quito la barra de botones, las tarjetas
     vienen justo detras y necesitan su aire. */
  border-radius:0;
  background:var(--surface-2);
  background-size:cover;background-repeat:no-repeat;
  display:flex;align-items:flex-end;
}
.hero-cover.con-foto{ height:300px; }
@media (min-width:1400px){
  /* En pantallas muy anchas se redondean las esquinas de abajo: a sangre
     completa en un monitor de 27 pulgadas se lee como cabecera de web y no
     como pagina. */
  .hero-cover{ border-radius:0 0 24px 24px; }
}
/* YA NO HACE FALTA VELO. Con el saludo debajo, encima de la portada no hay
   texto que leer, asi que la foto se ve ENTERA. Ese era medio problema de la
   version anterior: para poder leer el saludo habia que oscurecer la imagen
   justo por donde solia estar lo interesante.

   SIN PORTADA ELEGIDA LA BANDA SIGUE AHI, mas baja y en punteado. Antes se
   escondia con display:none y quien no entrara a Personalizar no se enteraba
   nunca de que existe. Un sitio vacio que invita se rellena; un sitio que no
   existe, no. */
.hero-cover.sin-cover{
  /* Mas baja: es una invitacion a poner una foto, no un hueco reservado. A
     88px con la fila ya fuera se leia como una caja vacia esperando algo. */
  height:64px;background:transparent;
  border-bottom:var(--border-hairline) dashed var(--border-hi);
  /* Sitio para el saludo, que ahora va debajo de la banda y no colgando de
     ella. Medido con una frase larga: 96 deja aire de sobra sin dejar un
     agujero. */
  margin-bottom:96px;
}
/* TU FOTO SE VE TAMBIEN SIN PORTADA.

   Estaba escondida, y era lo que dejaba la fila vacia: sin portada
   desaparecian la foto Y la hora, y quedaba un rectangulo punteado con un
   boton en la esquina y el saludo suelto debajo. Se veia abandonado.

   La foto no necesita la portada para tener sentido -- lleva su propio borde
   y su sombra -- asi que se queda. La hora si se va: es un cristal
   esmerilado, y sobre fondo liso seria una caja gris. */

/* ---------- los botones de la portada ---------- */
/* A 76px del borde de abajo y no a 16: por ahi pasa ahora la fila que cuelga
   -- foto, saludo y hora -- y la hora sube hasta 62px por encima de ese
   borde. A 16px los mandos le caian justo encima. */
.hero-mandos{
  position:absolute;right:20px;bottom:76px;z-index:4;
  display:flex;gap:6px;align-items:center;
  opacity:0;pointer-events:none;
  transition:opacity var(--hover-out) var(--ease);
}
.hero-cover:hover .hero-mandos,
.hero-mandos:focus-within{ opacity:1;pointer-events:auto;transition-duration:var(--hover-in); }
/* Sin portada los botones se quedan visibles: si hubiera que adivinar que
   pasando el raton aparece algo, no aparecerian nunca. La clase la pone el
   JS -- ver el comentario en inicioPintarHero. */
/* Sin portada no cuelgan ni la foto ni la hora, solo el saludo, asi que hay
   menos que esquivar y los mandos pueden bajar. */
/* Sin portada los mandos se centran en la banda: asi la franja punteada se
   lee como «pon una foto aqui» y no como un cajon vacio con un boton
   arrinconado en la esquina. */
.hero-mandos.siempre{
  opacity:1;pointer-events:auto;
  left:0;right:0;top:0;bottom:0;justify-content:center;align-items:center;
}
.hero-mandos button{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);color:#fff;
  border-radius:9px;padding:7px 11px;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:600;
  transition:background var(--hover-out) var(--ease);
}
.hero-mandos button:hover{ background:rgba(0,0,0,.78);transition-duration:var(--hover-in); }
/* Sin portada el fondo es claro, asi que los botones se visten al reves. */
.hero-cover.sin-cover .hero-mandos button{
  background:var(--surface);border-color:var(--border);color:var(--text-2);
  backdrop-filter:none;
}
.hero-cover.sin-cover .hero-mandos button:hover{ background:var(--surface-2);color:var(--text); }
@media (hover:none){
  /* En pantalla tactil no hay «pasar por encima». */
  .hero-mandos{ opacity:1;pointer-events:auto; }
}

/* ---------- el icono que cuelga del borde ----------
   Sobresale por abajo de la portada, mitad dentro y mitad fuera. Ese
   solapamiento es lo que cose las dos zonas en una sola pieza; puesto
   entero dentro se lee como una pegatina encima. */
/* La foto cuelga del borde de abajo de la portada. z-index bajo y solo por
   encima de la portada: tiene que verse sobre ELLA, nunca sobre lo que viene
   despues. Como el resto del Inicio va detras en el documento, se pinta
   encima por si sola sin necesidad de mas capas. */
/* Ya no se posiciona sola: es el primer elemento de `.hero-pie`, la fila que
   cuelga del borde. Antes iba absoluta a la izquierda y el saludo tenia que
   esquivarla con un `padding-left` a ojo. */
.hero-icono{ flex:none; }
/* Con la portada a sangre, el icono se alinea con la columna de contenido y
   no con el borde de la pantalla: si no, en un monitor ancho quedaria
   perdido a la izquierda, lejos del texto al que pertenece. */

/* ---------- LA FILA QUE CUELGA DE LA PORTADA ----------

   La foto, el saludo y la hora, los tres a la MISMA altura, colgando mitad
   dentro y mitad fuera del borde de abajo. Ese solapamiento es lo que cose la
   portada con lo que viene debajo: puesto entero dentro se lee como una
   pegatina encima, y puesto entero fuera, como dos pantallas distintas.

   `align-items:center` es lo que pone las tres cosas en paralelo. La fila
   mide lo que mide la foto, asi que el saludo -- que es mas alto -- sobresale
   por arriba y por abajo a partes iguales, centrado en ella. */
.hero-pie{
  position:absolute;left:48px;right:48px;bottom:-34px;z-index:1;
  display:flex;align-items:center;gap:18px;
  height:76px;
  /* La fila cruza toda la portada. Sin esto se tragaria el raton en la mitad
     de abajo y los botones de la portada no se dejarian pulsar. */
  pointer-events:none;
}
.hero-pie > *{ pointer-events:auto; }

/* EL SALUDO, EN EL MISMO CRISTAL QUE LA HORA.

   Las dos piezas cuelgan del mismo borde y a la misma altura, asi que tienen
   que estar hechas de lo mismo: dos tratamientos distintos ahi se leen como
   dos parches. Los valores son literalmente los de `.hero-reloj`.

   El cristal esmerilado ademas resuelve la legibilidad sobre cualquier
   portada -- aclara lo oscuro y oscurece lo claro -- sin velar la foto ni
   tener que adivinar de que color es. Hubo un intento de conseguirlo con un
   halo alrededor de cada letra y sin fondo: se veia como un brillo y
   ensuciaba el texto. */
.hero-saludo{
  min-width:0;
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:var(--border-hairline) solid var(--border-hi);
  border-radius:20px;padding:14px 20px 16px;
  box-shadow:0 8px 28px rgba(0,0,0,.24);
}

/* SIN PORTADA, SIN CRISTAL. La hora ahi ni siquiera aparece, asi que no hay
   con quien hacer juego -- y un cristal esmerilado sobre el fondo liso de la
   pagina no se lee como relieve, se lee como una caja gris de mas. */
.hero-cover.sin-cover .hero-saludo{
  background:none;border:none;box-shadow:none;padding:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.hero-cover.sin-cover .hero-pie{
  /* SIN PORTADA NO CUELGA NADA, Y ESA ES LA DIFERENCIA.

     Con portada, la fila cuelga del borde a proposito: la foto y la hora
     mitad dentro y mitad fuera son lo que cose la portada con lo de abajo.
     Sin portada no hay ni foto ni hora -- las dos se esconden -- y lo unico
     que quedaba colgando era el saludo, metido veintisiete pixeles dentro de
     una banda punteada vacia. Se leia como un texto caido dentro de una caja,
     que es justo lo contrario de lo que se buscaba.

     Aqui empieza DEBAJO de la banda, limpio. `top:100%` y no un valor
     negativo: el alto del saludo cambia con la frase de cada uno, y anclado
     por abajo una frase mas larga volveria a montarse sobre la banda. */
  left:0;right:0;bottom:auto;top:100%;height:auto;
  padding-top:14px;
}


/* TU CARA SOBRE TU PORTADA. Es lo que hace que la pantalla se sienta de uno
   -- mas que cualquier degradado o emoji. */
.hero-cara{
  width:76px;height:76px;border-radius:22px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  color:#fff;font-weight:750;font-size:1.5rem;
  border:3px solid var(--bg);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:transform var(--hover-out) var(--ease);
}
.hero-cara:hover{ transform:scale(1.04);transition-duration:var(--hover-in); }
.hero-cara img{ width:100%;height:100%;object-fit:cover; }

/* La chapita del emoji, en la esquina. Solo aparece al pasar por encima si
   no hay ninguno puesto: un boton siempre visible pidiendo un emoji es ruido
   para quien no lo quiere. */
.hero-chapa{
  position:absolute;right:-6px;bottom:-4px;
  width:28px;height:28px;border-radius:10px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;
  background:var(--surface-solid);color:var(--text-3);
  border:2px solid var(--bg);
  transition:transform var(--hover-out) var(--ease), opacity var(--hover-out) var(--ease);
}
.hero-chapa:hover{ transform:scale(1.12);transition-duration:var(--hover-in); }
.hero-chapa.vacia{ opacity:0; }
.hero-cover:hover .hero-chapa.vacia{ opacity:1; }

/* El bloque que se queda sin nada que decir deja de ocupar fila. */
.bloque.plegado{ display:none; }

/* Con icono, el saludo se aparta para no montarse encima. */
.hero-cover.con-foto .hero-dentro,
.hero-cover:not(.sin-cover) .hero-dentro{ padding-bottom:20px; }

.hero-dentro{
  width:100%;
  /* `flex-end` y no `space-between`: aqui ya solo quedan los botones, porque
     el saludo se subio a la portada. Con `space-between` un unico hijo se
     pega a la izquierda. */
  display:flex;align-items:flex-end;justify-content:flex-end;
  gap:20px;flex-wrap:wrap;
}
/* Cuando hay portada, el saludo se aparta para no montarse sobre el icono
   que cuelga de ella. Sin portada no hay icono y no hace falta. */
.view-header.hero{ margin-bottom:26px;align-items:flex-end; }
/* El saludo se ha subido a la portada, asi que aqui abajo ya no hay nada que
   esquivar: solo quedan los botones, y van a la derecha. */
body .hero-cover:not(.sin-cover) + .view-header.hero{ padding-left:0;min-height:0; }

/* `display:contents` y no `flex`: aqui dentro ya solo queda el avatar oculto,
   porque el saludo se subio a la portada. Como caja seguia contando -- un
   elemento de cero pixeles que aun asi se llevaba su linea entera de la
   rejilla flexible -- y dejaba ochenta pixeles de nada entre el saludo y los
   botones en el telefono. Con `contents` la caja desaparece y su hijo (que
   esta oculto) pasa a ser hijo directo. */
.hero-quien{ display:contents; }
.hero-foto{
  width:52px;height:52px;border-radius:16px;flex:none;overflow:hidden;
  border:2px solid rgba(255,255,255,.22);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-weight:750;font-size:1.05rem;color:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.3);
}
.hero-foto img{ width:100%;height:100%;object-fit:cover; }
/* `hidden` no basta cuando la regla pone `display:flex`: el atributo pierde y
   el hueco de 52px seguia empujando el saludo. Ahora si desaparece. */
.hero-foto[hidden]{ display:none; }
/* La frase, un peldano por debajo del saludo pero legible sobre la foto.
   (La fecha que iba encima se quito: la dice el reloj.) */
.hero-saludo .frase-dia,
.hero-saludo .frase-dia.vacia{ color:var(--text-2); }

.hero-titulo{
  font-size:2.05rem;font-weight:750;letter-spacing:-.035em;line-height:1.08;margin:0;
}

@media (max-width:760px){
  .hero-cover{ height:140px;border-radius:16px; }
  .hero-dentro{ padding:18px; }
  .hero-titulo{ font-size:1.36rem; }
  .hero-foto{ width:44px;height:44px;border-radius:13px; }
}

/* la frase del día, debajo del saludo */
.frase-dia{
  display:inline-flex;align-items:center;gap:6px;margin-top:5px;
  background:transparent;border:none;cursor:text;text-align:left;
  font-size:.86rem;color:var(--text-2);font-family:inherit;
  padding:0;max-width:min(520px,100%);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.frase-dia:hover{ opacity:.75; }
.frase-dia.vacia{ color:var(--text-3);font-size:.78rem; }

.frase-input{
  margin-top:5px;width:min(460px,88vw);
  background:var(--surface);border:1px solid var(--accent);border-radius:10px;
  color:var(--text);font-size:.86rem;padding:7px 11px;outline:none;font-family:inherit;
}

/* la barra de acciones del hero */
.hero-acciones{ display:flex;align-items:center;gap:9px;flex-wrap:wrap; }


/* ---------------- panel de estilo ---------------- */
.estilo-seccion{ margin-bottom:20px; }
.estilo-seccion > label{
  display:block;font-size:.72rem;font-weight:640;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:9px;
}
.covers-fila{ display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px; }
.cover-mini{
  height:46px;border-radius:11px;border:2px solid transparent;cursor:pointer;
  color:var(--text-3);font-size:.68rem;font-weight:600;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;
  position:relative;overflow:hidden;
  transition:transform .16s var(--ease), border-color .16s var(--ease);
}
.cover-mini:hover{ transform:translateY(-2px); }
.cover-mini.sel{ border-color:var(--text); }
.cover-mini span{
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);font-size:.66rem;
  opacity:0;transition:opacity .16s var(--ease);
}
.cover-mini:hover span,.cover-mini.sel span{ opacity:1; }
.cover-mini.vacio{ background:var(--surface-2);color:var(--text-3);align-items:center;padding:0; }
.cover-mini.vacio span{ opacity:1;color:var(--text-3);text-shadow:none; }


.temas-fila{ display:flex;gap:8px;flex-wrap:wrap; }
.tema-mini{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:9px 14px;font-size:.79rem;font-weight:600;color:var(--text-2);cursor:pointer;
  font-family:inherit;transition:all .16s var(--ease);
}
.tema-mini:hover{ border-color:var(--border-hi);color:var(--text); }
.tema-mini.sel{ border-color:var(--accent);color:var(--text);background:var(--accent-soft); }

/* lista de bloques on/off dentro del panel */
.bloques-lista{ display:flex;flex-direction:column;gap:5px;max-height:38vh;overflow-y:auto; }
.bloque-op{
  display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid var(--border);border-radius:11px;
  padding:11px 13px;cursor:pointer;transition:border-color .16s var(--ease);
}
.bloque-op:hover{ border-color:var(--border-hi); }
.bloque-op .ico{ color:var(--text-3);flex:none; }
.bloque-op .op-texto{ flex:1;min-width:0; }
.bloque-op b{ display:block;font-size:.85rem;font-weight:620;letter-spacing:-.01em; }
.bloque-op small{ display:block;font-size:.72rem;color:var(--text-3);line-height:1.4;margin-top:1px; }
.bloque-op .op-switch{
  width:38px;height:22px;border-radius:99px;background:var(--surface-2);
  position:relative;flex:none;transition:background .2s var(--ease);
}
.bloque-op .op-switch::after{
  content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--text-3);transition:transform .2s var(--ease), background .2s var(--ease);
}
.bloque-op.on .op-switch{ background:var(--accent); }
.bloque-op.on .op-switch::after{ transform:translateX(16px);background:#fff; }
.bloque-op.fijo{ opacity:.55;cursor:default; }

/* ---------------- enfoque de hoy ---------------- */
.enfoque-barra{
  height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-bottom:14px;
}
.enfoque-barra i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--green));
  transition:width .55s var(--ease);
}
.enfoque-lista{
  display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto;margin-bottom:14px;
}
.enfoque-op{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:11px;
  padding:11px 13px;font-size:.85rem;transition:border-color .16s var(--ease);
}
.enfoque-op:hover{ border-color:var(--border-hi); }
.enfoque-op input{ width:auto;flex:none; }
.enfoque-op span{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.enfoque-op small{ color:var(--text-3);font-variant-numeric:tabular-nums;flex:none; }

/* ---------------- notas rápidas ---------------- */
/* ---------------- atajos ---------------- */
/* ---------------- pulso del equipo ---------------- */
/* ---------------- estados vacíos ----------------
   SIN ICONO, y es deliberado. En una pantalla con siete tarjetas que pueden
   vaciarse a la vez, siete iconos ilustrativos repetidos se leen peor que
   siete lineas de texto: el ojo ve un patron de dibujos en vez de leer que
   dice cada uno. El icono ilustrativo funciona cuando el vacio es UNO y
   ocupa la pantalla; aqui no es el caso. */
.bloque-caja .vacio{
  border:none;background:transparent;padding:18px 2px;gap:10px;align-items:flex-start;text-align:left;
}
.bloque-caja .vacio > .ico,
.bloque-caja .vacio > svg{ display:none; }
.bloque-caja .vacio p,
.bloque-caja .vacio span{
  font-size:13px;line-height:18px;color:var(--text-3);margin:0;max-width:38ch;
}


/* ---------------- lo que va DENTRO de una tarjeta ----------------

   Ninguno de los nueve productos estudiados le pone fondo propio a una fila
   de lista. La tarjeta ya es el contenedor; meter tarjetitas dentro de la
   tarjeta es la caja dentro de la caja. Las filas van transparentes y solo
   se encienden al pasar por encima. */
.bloque-caja .tarea-fila,
.bloque-caja .area-mini,
.bloque-caja .proy-mini{
  background:transparent;border:none;border-radius:8px;
  padding:8px 10px;margin:0 -10px 2px;
  transition:background var(--hover-out) var(--ease);
}
.bloque-caja .tarea-fila:hover,
.bloque-caja .area-mini:hover,
.bloque-caja .proy-mini:hover{
  background:var(--surface-2);transition-duration:var(--hover-in);
}

/* «Ver N más» al pie de una lista: texto terciario, no botón. */
.bloque-caja .inicio-mas{
  background:transparent;border:none;padding:8px 0 0;
  font-size:12px;line-height:16px;font-weight:500;color:var(--text-3);
  transition:color var(--hover-out) var(--ease);
}
.bloque-caja .inicio-mas:hover{ color:var(--text);transition-duration:var(--hover-in); }

/* Los atajos y las opciones también responden al instante. */
.atajo,.enfoque-op,.bloque-op,.tema-mini,.cover-mini{
  transition-duration:var(--hover-out);
}
.atajo:hover,.enfoque-op:hover,.bloque-op:hover,.tema-mini:hover{
  transition-duration:var(--hover-in);
}

/* El cuarto nivel de texto, donde de verdad hace falta: lo que está pero no
   se lee — la fecha de una opción, el estado de guardado. */
.racha-dia small{ color:var(--text-4); }


/* ---------------- el «...» de cada tarjeta ----------------

   En reposo NO EXISTE: opacidad 0 y sin ocupar sitio. Aparece al pasar por
   encima de su tarjeta. Ese es el truco entero — la personalizacion cuesta
   cero pixeles hasta que la buscas. */
.bloque{ position:relative; }
.bloque-mas{
  position:absolute;top:10px;right:10px;z-index:5;
  width:28px;height:28px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:var(--border-hairline) solid var(--border);
  color:var(--text-3);cursor:pointer;padding:0;
  opacity:0;pointer-events:none;
  transition:opacity var(--hover-out) var(--ease), color var(--hover-out) var(--ease);
}
.bloque:hover > .bloque-mas,
.bloque-mas:focus-visible{ opacity:1;pointer-events:auto;transition-duration:var(--hover-in); }
.bloque-mas:hover{ color:var(--text); }
/* En pantalla táctil no hay «pasar por encima»: ahí se queda visible pero
   tenue, porque si no la tarjeta no tendría forma de configurarse. */
@media (hover:none){
  .bloque > .bloque-mas{ opacity:.45;pointer-events:auto; }
}

.bloque-menu{
  position:fixed;z-index:200;width:208px;
  background:var(--surface-solid);
  border:var(--border-hairline) solid var(--border-hi);
  border-radius:12px;padding:5px;
  /* La sombra solo aquí: los menús flotan, las tarjetas no. Y suave —
     opacidades del 4 al 12%, no del 20. */
  box-shadow:0 0 0 var(--border-hairline) rgba(0,0,0,.05),
             0 4px 8px -4px rgba(0,0,0,.08),
             0 16px 24px -8px rgba(0,0,0,.12);
  animation:menuEntra .13s var(--ease);
}
@keyframes menuEntra{ from{ opacity:0;transform:translateY(-4px); } to{ opacity:1;transform:none; } }
.bloque-menu .menu-titulo{
  font-size:11px;line-height:16px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);
  padding:7px 10px 6px;
}
.bloque-menu button{
  display:flex;align-items:center;gap:9px;width:100%;
  background:transparent;border:none;cursor:pointer;font-family:inherit;
  padding:8px 10px;border-radius:8px;
  font-size:13px;line-height:18px;letter-spacing:0;color:var(--text);
  transition:background var(--hover-out) var(--ease);
}
.bloque-menu button:hover:not(:disabled){ background:var(--surface-2);transition-duration:var(--hover-in); }
.bloque-menu button:disabled{ color:var(--text-4);cursor:default; }
.bloque-menu button .ico{ color:var(--text-3);flex:none; }
.bloque-menu .menu-raya{ height:var(--border-hairline);background:var(--border);margin:5px 8px; }


/* ---------------- el teléfono, AL FINAL ----------------

   Estas reglas van aquí abajo y no arriba, y no es capricho: en CSS, a igual
   especificidad, gana la última. Estaban antes de la regla base de la tarjeta
   y por eso el padding del móvil no se aplicaba nunca — el archivo decía una
   cosa y la pantalla hacía otra. Ya me había pasado antes en este proyecto
   con la columna de estado de asistencia. */
@media (max-width:760px){
  /* 24px de padding sobre 375px de ancho se comen el contenido: en el
     teléfono la tarjeta respira menos y manda el texto. */
  .bloque-caja{ padding:18px 16px 20px;border-radius:14px; }
  .bloque-cab{ margin-bottom:13px; }
  .bloque-cab h3{ font-size:15px;line-height:22px; }
  .bloque-mas{ top:8px;right:8px;width:30px;height:30px; }
  .bloque-menu{ width:min(232px,86vw); }
}


/* ---------------- elegir la portada, en el panel ---------------- */
.subir-portada{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:var(--surface);border:var(--border-hairline) dashed var(--border-hi);
  border-radius:13px;padding:16px;cursor:pointer;font-family:inherit;color:var(--text);
  transition:border-color var(--hover-out) var(--ease);
}
.subir-portada:hover{ border-color:var(--accent);transition-duration:var(--hover-in); }
.subir-portada .ico{ color:var(--accent-hi);flex:none; }
.subir-portada b{ display:block;font-size:14px;line-height:20px;font-weight:600; }
.subir-portada small{ display:block;font-size:12px;line-height:16px;color:var(--text-3);margin-top:1px; }

.portada-previa{
  height:96px;border-radius:12px;position:relative;overflow:hidden;
  background-size:cover;background-repeat:no-repeat;
  border:var(--border-hairline) solid var(--border);
}
.portada-mandos{
  position:absolute;right:8px;bottom:8px;display:flex;gap:5px;
}
.portada-mandos button{
  width:30px;height:30px;border-radius:9px;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.24);color:#fff;
}
.portada-mandos button:hover{ background:rgba(0,0,0,.75); }
/* Las flechas apuntan arriba y abajo, que es lo que mueven. */
.portada-mandos button:first-child .ico{ transform:rotate(90deg); }
.portada-mandos button:last-child .ico{ transform:rotate(-90deg); }

/* ---------------- elegir icono ---------------- */
.emojis-rejilla{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));
  gap:6px;margin-bottom:16px;
}
.emoji-op{
  height:46px;border-radius:11px;font-size:24px;line-height:1;cursor:pointer;
  background:var(--surface);border:var(--border-hairline) solid transparent;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--hover-out) var(--ease), border-color var(--hover-out) var(--ease);
}
.emoji-op:hover{ background:var(--surface-2);transition-duration:var(--hover-in); }
.emoji-op.sel{ border-color:var(--accent);background:var(--accent-soft); }

@media (max-width:760px){
  .hero-cover{ height:180px;margin:-70px -16px 42px; }
  .hero-cover.con-foto{ height:220px; }
  .hero-dentro{ padding:18px; }
  .hero-titulo{ font-size:1.5rem; }
  /* A 390px no caben las dos esquinas: la foto se queda colgando y la hora
     se encoge y se pega a la derecha sin solaparse con ella. */
  .hero-icono{ left:16px;bottom:-28px; }
  .hero-reloj{
    right:14px;bottom:-24px;min-width:0;padding:9px 12px 10px;border-radius:16px;
  }
  .reloj-hora{ font-size:25px; }
  .reloj-dia{ font-size:10px;margin-top:3px; }
  .reloj-pie{ display:none; }
  .hero-cara{ width:62px;height:62px;border-radius:18px;font-size:1.2rem; }
  .hero-chapa{ width:24px;height:24px;font-size:13px; }
  /* Los 34px de arriba estaban para que el saludo no se montara sobre la
     foto que cuelga de la portada. El saludo ya no vive aqui -- se subio a la
     portada, al lado de la foto -- asi que ese hueco era aire de nadie. */
  body .hero-cover:not(.sin-cover) + .view-header.hero{ padding-left:0;padding-top:0; }
}


/* ============================================================
   LOS CUATRO BLOQUES DE LAS REFERENCIAS
   ============================================================ */

/* ---------------- hábitos ---------------- */
.habitos-cabecera,.habito{
  display:grid;grid-template-columns:1fr repeat(7,22px) 34px 20px;
  align-items:center;gap:5px;
}
.habitos-cabecera{ margin-bottom:8px; }
.habitos-cabecera small{
  font-size:10px;font-weight:650;color:var(--text-4);text-align:center;
}
.habitos-cabecera small.hoy{ color:var(--accent-hi); }
.habito{ padding:5px 0; }
.habito-nombre{
  display:flex;align-items:center;gap:7px;min-width:0;
  font-size:13px;line-height:18px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.habito-nombre i{ font-style:normal;font-size:14px;flex:none; }
.habito-dia{
  width:22px;height:22px;border-radius:7px;padding:0;cursor:default;
  background:var(--surface-2);border:var(--border-hairline) solid transparent;
  transition:background var(--hover-out) var(--ease);
}
.habito-dia.hoy{ cursor:pointer;border-color:var(--border-hi); }
.habito-dia.hoy:hover{ background:var(--surface);transition-duration:var(--hover-in); }
.habito-dia.hecho{ background:var(--accent);border-color:var(--accent); }
.habito-dia.hecho.hoy{ box-shadow:0 0 0 2px var(--accent-soft); }
/* Los días pasados se ven pero no se tocan: rellenar la semana a posteriori
   convierte el tracker en un dibujo y deja de decir nada. */
.habito-dia:disabled{ opacity:.75; }
.habito-cuenta{
  font-size:11px;color:var(--text-4);text-align:right;font-variant-numeric:tabular-nums;
}
.habito-quitar{
  background:transparent;border:none;color:var(--text-4);cursor:pointer;padding:2px;
  opacity:0;transition:opacity var(--hover-out) var(--ease);
}
.habito:hover .habito-quitar{ opacity:1; }
.habito-quitar:hover{ color:var(--red); }






/* ---------------- la tabla de tareas ----------------

   Compacta, transparente, una fila por tarea. Cada columna dice UNA cosa: qué
   es, de quién es, para cuándo y cómo aprieta.

   La primera versión era eso y nada más: texto suelto colocado en una
   rejilla. Se leía, pero no se sentía nada al pasar por encima, y una lista
   que no responde parece una captura de pantalla. Lo que se añadió:

     1. AIRE. De 7px de alto interno a 10. Una lista de tareas se recorre con
        la vista, y a 32px de fila el ojo tiene que apuntar.
     2. UNA RAYA ENTRE FILAS. Sin ella, dos títulos largos seguidos se leían
        como uno solo partido en dos.
     3. LA CASILLA RESPONDE. Crece un pelín y enseña el check en gris al pasar
        por encima: dice «esto se pulsa» antes de que nadie lo pruebe.
     4. LO VENCIDO ES UNA CHAPA, no texto rojo. Un rojo suelto en una columna
        de fechas se confunde con una fecha más; una chapa se lee como estado.
   ---------------------------------------------------------------- */
.tabla-tareas{ display:flex;flex-direction:column; }
.tt-cab,.tt-fila{
  display:grid;grid-template-columns:20px 1fr 104px 74px 62px;
  align-items:center;gap:10px;
  padding:10px 8px;margin:0 -8px;border-radius:9px;
}
.tt-cab{
  font-size:10.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-4);padding:0 8px 9px;margin-bottom:2px;
  border-bottom:var(--border-hairline) solid var(--border);border-radius:0;
}
.tt-fila{
  cursor:pointer;position:relative;
  transition:background var(--hover-out) var(--ease);
}
/* La raya va DENTRO, con un pseudoelemento, y no como `border-bottom`: el
   fondo del hover se sale 8px por los lados y un borde real se cortaría
   justo donde el fondo empieza. */
.tt-fila + .tt-fila::before{
  content:'';position:absolute;left:8px;right:8px;top:0;
  height:var(--border-hairline);background:var(--border);
}
.tt-fila:hover{ background:var(--surface-2);transition-duration:var(--hover-in); }
.tt-fila:hover::before,
.tt-fila:hover + .tt-fila::before{ opacity:0; }

.tt-check{
  width:18px;height:18px;border-radius:6px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1.5px solid var(--text-4);
  color:transparent;
  transition:background var(--hover-out) var(--ease), border-color var(--hover-out) var(--ease),
             color var(--hover-out) var(--ease);
}
/* Al pasar por encima de la FILA la casilla ya se enciende: la tarea entera
   es el objetivo, no dieciocho píxeles cuadrados. */
.tt-fila:hover .tt-check{ border-color:var(--accent);color:var(--text-4); }
.tt-check:hover{ border-color:var(--accent);background:var(--accent-soft);color:var(--accent-hi); }
.tt-check::after{
  content:'';width:9px;height:5px;margin-top:-2px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
}

.tt-titulo{
  font-size:13.5px;line-height:19px;color:var(--text);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tt-proy{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* El punto del proyecto con un halo de su propio color: a siete píxeles, un
   círculo plano se pierde contra el fondo de la tarjeta. */
.tt-proy i{
  width:8px;height:8px;border-radius:50%;flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 0%, transparent);
}
.tt-fecha{
  font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* Vencida es un ESTADO, no una fecha más. En chapa, para que salte al
   recorrer la columna con la vista. */
.tt-fecha.vencida{
  display:inline-flex;align-items:center;
  color:var(--red);font-weight:650;
  background:color-mix(in srgb,var(--red) 13%,transparent);
  padding:2px 7px;border-radius:6px;
}
.tt-pri{
  font-size:10.5px;font-weight:700;letter-spacing:.03em;
  padding:4px 9px;border-radius:99px;text-align:center;
  white-space:nowrap;
}
.tt-pri.alta{ background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red); }
.tt-pri.media{ background:color-mix(in srgb,var(--yellow) 18%,transparent);color:var(--yellow); }
.tt-pri.baja{ background:var(--surface-2);color:var(--text-4); }

/* ---------------- próximos, agrupado por día ---------------- */
.prox-grupo{ margin-bottom:16px; }
.prox-grupo:last-child{ margin-bottom:0; }
.prox-titulo{
  display:flex;align-items:center;gap:7px;margin-bottom:7px;
  font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-3);
}
.prox-titulo b{
  font-size:10px;font-weight:700;color:var(--text-4);
  background:var(--surface-2);border-radius:99px;padding:1px 6px;letter-spacing:0;
}
.prox-fila{
  display:flex;align-items:center;gap:9px;
  padding:6px 8px;margin:0 -8px;border-radius:7px;cursor:pointer;
  transition:background var(--hover-out) var(--ease);
}
.prox-fila:hover{ background:var(--surface-2);transition-duration:var(--hover-in); }
.prox-fila .punto{ width:7px;height:7px;border-radius:50%;flex:none; }
.prox-fila span{
  flex:1;min-width:0;font-size:12.5px;line-height:18px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}


/* Sin portada no hay icono colgando, asi que el saludo no se aparta. */
.hero-cover.sin-cover + .view-header.hero{ padding-left:0; }


/* ---------------- las pestañas de Mis tareas ----------------
   Como en la referencia: una fila de filtros con su cuenta al lado. Se
   pintan SIEMPRE, tenga o no tareas esa vista -- si desaparecieran al
   vaciarse una, no habria forma de volver desde «Vencidas» vacio a «Todas». */
.tt-pestanas{
  display:flex;gap:3px;flex-wrap:wrap;
  margin:0 -4px 12px;padding-bottom:11px;
  border-bottom:var(--border-hairline) solid var(--border);
}
.tt-pestana{
  display:inline-flex;align-items:center;gap:5px;
  background:transparent;border:none;cursor:pointer;font-family:inherit;
  padding:5px 9px;border-radius:8px;
  font-size:12.5px;font-weight:550;color:var(--text-3);
  transition:background var(--hover-out) var(--ease), color var(--hover-out) var(--ease);
}
.tt-pestana:hover{ background:var(--surface-2);color:var(--text-2);transition-duration:var(--hover-in); }
.tt-pestana.activa{ background:var(--surface-2);color:var(--text);font-weight:640; }
.tt-pestana b{
  font-size:10.5px;font-weight:700;color:var(--text-4);
  background:var(--surface);border-radius:99px;padding:1px 5px;
}
.tt-pestana.activa b{ color:var(--accent-hi); }

/* ---------------- el calendario del mes ---------------- */
/* ---------------- la hora, colgando de la portada ----------------

   Misma logica que la foto de perfil, al otro lado. Cristal esmerilado sobre
   la imagen: asi funciona con cualquier foto que suba cada uno, clara u
   oscura, sin tener que adivinar el color de fondo. */
.hero-reloj{
  /* `margin-left:auto` la empuja al extremo de la fila. Antes iba absoluta a
     la derecha, que funcionaba mientras no hubiera nada mas en esa linea;
     desde que el saludo esta al lado, hace falta que las tres piezas se
     repartan el ancho de verdad y no se pisen. */
  margin-left:auto;flex:none;
  min-width:186px;
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:var(--border-hairline) solid var(--border-hi);
  border-radius:20px;padding:14px 18px 15px;
  box-shadow:0 8px 28px rgba(0,0,0,.24);
}
.hero-reloj.oculto{ display:none; }

.reloj-hora{
  display:flex;align-items:baseline;gap:1px;
  font-size:34px;line-height:1;font-weight:750;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;color:var(--text);
}
/* Los dos puntos laten cada dos segundos. Es el detalle que hace que un
   reloj parezca vivo y no una captura de pantalla. */
.reloj-hora i{ font-style:normal;color:var(--text-3);animation:relojLatido 2s ease-in-out infinite; }
@keyframes relojLatido{ 0%,100%{opacity:1} 50%{opacity:.3} }

.reloj-dia{
  font-size:11.5px;line-height:16px;color:var(--text-2);font-weight:550;margin-top:6px;
}
.reloj-pie{
  font-size:10.5px;line-height:14px;color:var(--text-4);margin-top:7px;
  padding-top:7px;border-top:var(--border-hairline) solid var(--border);
}


/* ---------------- carrusel de fotos (coverflow) ----------------

   `perspective` en el padre y `preserve-3d` en la pista: sin esas dos, los
   giros salen planos y el efecto no aparece por ningun lado.

   Las tarjetas son VERTICALES -- rectangulo de pie, proporcion 3:4 -- y no
   cuadradas ni apaisadas. Una foto apaisada de punta a punta es un banner;
   una de pie es una portada, y es lo que hace que la pila se lea como una
   pila. */
/* Se declara CONTENEDOR para que la barra de abajo pueda preguntar por el
   ancho que le ha tocado a ESTA tarjeta, y no por el de la ventana. Desde que
   cada bloque elige su ancho, la del Inicio puede ser un tercio o la fila
   entera: una media query miraria la pantalla, que aqui no dice nada. */
.galeria{
  display:flex;flex-direction:column;gap:6px;align-items:center;
  container-type:inline-size;
}
.galeria-escena{
  /* A media pagina la escena baja de alto y la perspectiva se cierra: con
     1250px en una caja de 450px el efecto se aplana, porque la perspectiva
     se nota en proporcion al ancho que tiene para desplegarse. */
  /* En una columna estrecha (un tercio) la escena se estrecha y las tarjetas
     crecen en proporcion: la profundidad se percibe respecto al ancho que
     tiene para desplegarse, no en pixeles absolutos. */
  position:relative;width:100%;height:326px;
  perspective:700px;
  perspective-origin:50% 42%;

  /* LA SOMBRA YA NO SE CORTA, Y ESO IMPORTA MAS DE LO QUE PARECE.

     Antes esto era `overflow:hidden` y la escena media justo lo que median
     las fotos. La sombra de la del centro cae 30px y se difumina 70px, o sea
     que necesita unos 65px por debajo -- y solo tenia 31. El corte quedaba
     como una raya recta bajo la foto, que es exactamente lo que delata que
     algo esta metido en una caja.

     Ahora la escena es mas alta y las fotos van algo por encima del centro
     (el `top:45%` de abajo), asi que la sombra cabe entera.

     Y a los lados, en vez de cortar, se DESVANECE. Las de los extremos ya no
     terminan en una linea vertical: se van apagando contra el borde, que es
     lo que hace que la pila parezca seguir mas alla de la tarjeta en lugar de
     acabarse ahi. La mascara ademas hace de recorte, asi que las que se van
     lejos siguen sin invadir el bloque de al lado.

     El desvanecido va en PIXELES y no en porcentaje: en porcentaje, un
     bloque a fila completa se comeria doscientos pixeles por lado y las
     laterales desaparecerian antes de llegar a verse.

     Y son 32 y no mas porque ESTE numero es el que limita lo grande que
     puede ser la foto del centro: tiene que caber entera en la parte opaca o
     se le desvanecerian los bordes. Cada pixel que se le quita al
     desvanecido se lo lleva la imagen. */
  -webkit-mask-image:linear-gradient(to right,
    transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image:linear-gradient(to right,
    transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);

  cursor:grab;
}
.galeria-escena:active{ cursor:grabbing; }
/* Mientras se arrastra las fotos van pegadas al raton, sin animacion: con la
   transicion puesta irian medio segundo por detras de la mano. */
.galeria-pista.arrastrando .cf-foto{ transition:none; }
/* La escena ya nace con la mano abierta, que avisa de que eso se puede
   agarrar antes de que nadie lo intente. Al cerrarse confirma que lo tienes
   cogido. */
.galeria-escena.agarrando{ cursor:grabbing; }
.galeria-escena.agarrando .cf-foto{ cursor:grabbing; }

.galeria-pista{
  position:absolute;inset:0;
  transform-style:preserve-3d;
}
.cf-foto{
  /* `top:47%` y no 50%: las fotos suben un pelin para dejarle sitio a la
     sombra por debajo, que es donde cae. Ese hueco de abajo NO es aire de
     mas: es exactamente lo que la sombra necesita para no cortarse. Todo lo
     que sobraba se lo ha quedado la imagen. */
  position:absolute;left:50%;top:47%;margin:0;
  /* GRANDES DE VERDAD: son el contenido, no la decoracion. El tope lo pone
     el desvanecido de los lados -- la foto tiene que caber entera en la
     parte opaca de la mascara o se le irian los bordes. */
  width:min(216px,74%);aspect-ratio:3/4;
  border-radius:18px;overflow:hidden;
  background:var(--surface-2);
  cursor:pointer;
  /* La curva importa tanto como los numeros: arranca decidida y frena suave,
     que es lo que hace que parezca peso y no un salto. */
  /* La curva del `transform` arranca decidida y frena suave: es lo que hace
     que parezca peso y no un salto. El resto va algo mas corto para que el
     desenfoque no llegue tarde al sitio donde ya esta la foto. */
  transition:transform .62s cubic-bezier(.22,.92,.24,1),
             opacity .4s var(--ease),
             filter .4s var(--ease),
             box-shadow .45s var(--ease);
  will-change:transform;
  backface-visibility:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.42);
}
.cf-foto img{ width:100%;height:100%;object-fit:cover;display:block;user-select:none; }

/* EL MARCO. Un borde claro por dentro, no por fuera: por fuera se ve como una
   caja alrededor de la foto; por dentro se ve como el canto de una tarjeta
   fisica, que es lo que le da el aire de objeto. */
.cf-marco{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),
             inset 0 1px 0 rgba(255,255,255,.22);
}

/* Las de los lados se apagan Y SE DESENFOCAN, y las dos cosas las gradua el
   JS segun lo lejos que este cada una -- no de golpe con una clase. Es la
   diferencia entre «centro si o no» y una profundidad de campo de verdad: la
   de al lado esta casi nitida, la del fondo bastante ida. Mientras arrastras
   el desenfoque se mueve contigo, porque la distancia lleva decimales.
   El brillo y el desenfoque salen de `inicioGaleriaColocar`, en js/inicio.js. */
.cf-foto.centro{
  cursor:default;
  /* La del centro flota mas: sombra mas grande y mas abajo. Es lo que la
     despega del resto sin tener que agrandarla mas. */
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
.cf-foto figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:30px 14px 13px;
  font-size:13px;font-weight:650;color:#fff;letter-spacing:-.01em;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.25) 55%,transparent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cf-quitar{
  position:absolute;top:9px;right:9px;
  width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.25);color:#fff;
}
.cf-foto.centro:hover .cf-quitar{ display:inline-flex; }
.cf-quitar:hover{ background:var(--red);border-color:var(--red); }

/* ---------------- la barra de abajo, tipo reproductor ---------------- */
.galeria-barra{
  display:flex;align-items:center;gap:11px;
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:var(--border-hairline) solid var(--border-hi);
  border-radius:999px;
  /* Delgada a proposito: es el pie de foto, no el protagonista. Cada pixel
     que se le quita aqui se lo lleva la imagen de arriba. */
  padding:6px 15px 6px 8px;
  box-shadow:0 10px 32px rgba(0,0,0,.26);
  max-width:100%;
}
.gb-btn{
  width:28px;height:28px;border-radius:50%;padding:0;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text-2);
  transition:background var(--hover-out) var(--ease), color var(--hover-out) var(--ease);
}
.gb-btn:hover{ background:var(--surface-2);color:var(--text);transition-duration:var(--hover-in); }
.gb-play{
  background:var(--text);color:var(--bg);width:31px;height:31px;
}
.gb-play:hover{ background:var(--text);color:var(--bg);transform:scale(1.06); }
.gb-pausa{
  width:9px;height:10px;
  border-left:3.5px solid currentColor;border-right:3.5px solid currentColor;
}
.gb-triangulo{
  width:0;height:0;margin-left:2px;
  border-left:9px solid currentColor;
  border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;
}
.gb-ahora{ display:flex;align-items:center;gap:8px;min-width:0;flex:1; }
.gb-ahora img{
  width:29px;height:29px;border-radius:8px;object-fit:cover;flex:none;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.gb-texto{ min-width:0; }
/* EL NOMBRE DEL BLOQUE, PULSABLE.

   No lleva ni borde ni fondo hasta que pasas por encima: un recuadro de
   formulario permanente en cada cabecera convertiria el Inicio en un panel de
   ajustes. Al pasar el raton se enciende un fondo suave y el cursor cambia a
   barra de texto, que es todo el aviso que hace falta.

   Va escrito `.bloque-cab h3.cab-nombre` A PROPOSITO. Arriba, `.bloque-cab h3`
   ya fija `margin:0`, y con dos etiquetas de peso contra una la de arriba
   gana aunque esta este mas abajo -- la especificidad manda sobre el orden.
   Con `.cab-nombre` a secas el margen negativo se ignoraba en silencio y el
   titulo se corria siete pixeles al pasar el raton por encima. */
.bloque-cab h3.cab-nombre{
  cursor:text;border-radius:7px;margin:-3px -7px;padding:3px 7px;
  transition:background var(--hover-out) var(--ease);
}
.bloque-cab h3.cab-nombre:hover{ background:var(--surface-2);transition-duration:var(--hover-in); }
/* Mismo cuerpo y mismo peso que el titulo que sustituye: si cambiaran, el
   texto pegaria un salto justo en el momento de ponerte a escribirlo. */
.bloque-cab .cab-nombre-input{
  flex:1;min-width:0;
  background:var(--surface);color:var(--text);
  border:var(--border-hairline) solid var(--accent);border-radius:8px;
  padding:2px 8px;margin:-3px 0;outline:none;
  font-family:inherit;font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.02em;
}

.gb-titulo{
  display:block;width:100%;text-align:left;
  background:transparent;border:none;padding:0;cursor:text;font-family:inherit;
  font-size:12.5px;font-weight:640;letter-spacing:-.01em;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color var(--hover-out) var(--ease);
}
.gb-titulo:hover{ color:var(--accent-hi);transition-duration:var(--hover-in); }
/* Sin nombre se ve mas apagado: se lee como un hueco por rellenar y no como
   un dato que ya esta puesto. */
.gb-titulo.vacio{ color:var(--text-4);font-weight:550; }
.gb-titulo-input{
  width:100%;background:var(--surface);color:var(--text);
  border:var(--border-hairline) solid var(--accent);border-radius:7px;
  padding:2px 7px;margin:-3px 0;outline:none;
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.01em;
}
.gb-texto small{ display:block;font-size:10.5px;color:var(--text-4);font-variant-numeric:tabular-nums; }
.gb-puntos{ display:flex;gap:5px;flex:none; }
.gb-puntos button{
  width:6px;height:6px;border-radius:50%;padding:0;cursor:pointer;border:none;
  background:var(--text-4);opacity:.5;
  transition:opacity var(--hover-out) var(--ease), width var(--hover-out) var(--ease);
}
.gb-puntos button:hover{ opacity:1; }
.gb-puntos button.act{ width:18px;border-radius:99px;opacity:1;background:var(--text-2); }

/* EN COLUMNA ESTRECHA, LA BARRA SE PARTE EN DOS FILAS.

   En una sola fila caben los tres mandos, la miniatura, el nombre y los
   puntos... si la tarjeta ocupa media pagina. En un tercio no: el reparto de
   flex le dejaba UN PIXEL al nombre y el «3 de 5» se partia en vertical. No
   se veia como un fallo, se veia como que ahi no habia nada escrito.

   Asi que el nombre se sube a su propia fila a lo ancho, y debajo van los
   mandos con los puntos a la derecha. El nombre es lo que hay que leer, y
   ahora es lo primero. */
@container (max-width: 360px){
  .galeria-barra{
    flex-wrap:wrap;justify-content:center;
    gap:5px 9px;
    /* Deja de ser una pastilla: con dos filas, un radio de 999px curvaria los
       lados hasta comerse las esquinas del contenido. */
    border-radius:21px;
    padding:7px 12px 8px;
  }
  /* Primero en el orden visual aunque en el HTML siga en medio: el orden del
     HTML es el que tiene sentido leido, y ese no se toca. */
  .gb-ahora{ flex:1 1 100%;order:-1; }
  .gb-puntos{ margin-left:auto;flex-wrap:wrap;justify-content:flex-end; }
}

/* ============================================================
   LA PIZARRA — acomodar el Inicio en pequeño

   Una MAQUETA del Inicio, no una lista. La primera versión eran nueve barras
   iguales seguidas y lo primero que dijo quien la usó fue que no se entendía:
   sin ver dónde acaba una fila, no se entiende que se está armando una
   retícula. Ahora cada fila es una banda propia y cada ficha copia lo ALTO
   que es ese bloque en el Inicio de verdad.
   ============================================================ */
/* El modal de esta casa mide 540 px y aqui no bastan: una ficha de cuatro
   columnas se queda en 130 px y el NOMBRE —que es todo el sentido de la
   pizarra— no cabe. Se ensancha solo cuando el modal lleva la pizarra dentro;
   los demas siguen igual. Si un navegador no entiende `:has`, la pizarra sale
   a 540 y los nombres se recortan con puntos: se puede usar igual. */
#modal-caja:has(.piz-marco){ max-width:880px; }

.piz-marco{
  background:var(--bg-deep, var(--bg));
  border:var(--border-hairline) solid var(--border);
  border-radius:14px;
  padding:12px;
  margin:4px 0 2px;
}

/* CADA FILA, UNA BANDA. La separación entre filas es mayor que la separación
   entre fichas de la misma fila, y eso es lo que hace que se lean como filas
   sin necesidad de dibujar ninguna línea. */
.piz-lienzo{
  display:flex;flex-direction:column;gap:14px;
  touch-action:none;            /* el dedo arrastra fichas, no la página */
}
.piz-fila{ display:flex;gap:8px;align-items:stretch; }

.piz-ficha{
  display:flex;flex-direction:column;justify-content:space-between;
  min-width:0;padding:8px 9px;
  border-radius:11px;
  background:var(--surface-2);
  border:var(--border-hairline) solid var(--border);
  cursor:grab;user-select:none;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), border-color var(--hover-in) var(--ease),
             box-shadow var(--hover-in) var(--ease);
}
/* El ALTO copia el del Inicio: la tabla de tareas y el calendario son altos,
   los atajos son bajos. Con todas iguales, la pizarra se leía como una lista
   de nueve cosas y no como la pantalla que se está armando. */
.piz-ficha.peso-1{ min-height:56px; }
.piz-ficha.peso-2{ min-height:74px; }
.piz-ficha.peso-3{ min-height:96px; }

.piz-ficha:hover{ border-color:var(--accent);box-shadow:0 4px 14px rgba(87,7,214,.13); }

/* LA QUE SE LLEVA EN LA MANO. Se levanta de verdad: sombra larga, un pelo
   mas grande y un grado de inclinacion. Es lo que hace que se sienta cogida
   en vez de «seleccionada». */
.piz-ficha.cogida{
  cursor:grabbing;z-index:5;
  border-color:var(--accent);
  box-shadow:0 16px 40px rgba(43,9,111,.32), 0 0 0 2px var(--accent);
  transition:none;                /* mientras esta en la mano manda el dedo */
}

.piz-cab{ display:flex;align-items:center;gap:7px;min-width:0; }
.piz-ico{ color:var(--accent);display:inline-flex;flex:none; }
.piz-nombre{
  flex:1;min-width:0;
  font-size:.83rem;font-weight:650;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* EL PIE: el tamaño, con su nombre en cristiano y los dos botones. SIEMPRE
   visible. Antes salía solo al pasar el raton por encima y nadie descubria
   que el tamaño se podia cambiar — la mitad de la funcion, escondida. */
.piz-pie{
  display:flex;align-items:center;justify-content:space-between;gap:4px;
  margin-top:6px;
}
.piz-medida{
  flex:1;min-width:0;text-align:center;
  font-size:.63rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.piz-mm{
  width:24px;height:24px;border-radius:7px;padding:0;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-solid, var(--surface));
  border:var(--border-hairline) solid var(--border);
  color:var(--text-2);cursor:pointer;
  font-size:1rem;line-height:1;font-weight:600;
}
.piz-mm:hover:not(:disabled){ color:#fff;background:var(--accent);border-color:var(--accent); }
/* Deshabilitado y NO escondido: que se vea que ese bloque ya esta en su
   tamaño maximo o minimo. Escondiendolo, el boton baila de sitio. */
.piz-mm:disabled{ opacity:.28;cursor:default; }

.piz-ojo{
  width:24px;height:24px;border-radius:7px;padding:0;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;
  color:var(--text-2);cursor:pointer;
}
.piz-ojo:hover{ color:var(--rojo, #f0637a); }
.piz-fijo{ color:var(--text-2);display:inline-flex;flex:none;opacity:.75; }

/* La bandeja de lo que no se muestra. Fuera de la reticula a proposito: en el
   Inicio un bloque apagado no ocupa sitio, y pintarlo dentro haria que la
   pizarra enseñara unas filas y el Inicio otras. */
.piz-ocultos:empty{ display:none; }
.piz-ocultos{ margin-top:12px;padding-top:11px;border-top:var(--border-hairline) dashed var(--border); }
.piz-ocultos-tit{
  font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:7px;
}
.piz-ocultos-fila{ display:flex;flex-wrap:wrap;gap:6px; }
.piz-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:9px;
  background:var(--surface-2);border:var(--border-hairline) dashed var(--border);
  color:var(--text-2);font-size:.78rem;font-weight:600;cursor:pointer;
  transition:color var(--hover-in) var(--ease), border-color var(--hover-in) var(--ease);
}
.piz-chip:hover{ color:var(--text);border-color:var(--accent);border-style:solid; }

@media (max-width:760px){
  /* En el telefono el Inicio es una columna, asi que la pizarra tambien:
     enseñar una reticula de doce columnas aqui seria prometer una
     disposicion que en su pantalla no existe. Lo que se acomoda es el ORDEN,
     que es lo que si manda. */
  .piz-fila{ flex-direction:column; }
  .piz-ficha{ min-height:0 !important; }
  .piz-pie{ display:none; }
}

/* LA COPIA QUE VA PEGADA AL DEDO. Vive fuera del lienzo, en una capa por
   encima, y por eso repintar el lienzo ya no la destruye — que era lo que
   cortaba el arrastre a media maniobra. */
.piz-flotante{
  position:fixed;z-index:400;margin:0;pointer-events:none;
  cursor:grabbing;
  border-color:var(--accent) !important;
  background:var(--surface-solid, var(--surface));
  box-shadow:0 22px 50px rgba(43,9,111,.38), 0 0 0 2px var(--accent);
  transform:scale(1.03) rotate(1deg);
  transition:none;
}
/* EL HUECO que deja donde estaba: punteado y vacio. Es lo que enseña donde va
   a caer, y se mueve solo mientras se pasea el dedo. */
.piz-ficha.hueco{
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  border:1.5px dashed var(--accent);
  box-shadow:none;
}
.piz-ficha.hueco > *{ visibility:hidden; }