/* ============================================================
   EL INICIO EN EL TELÉFONO

   ESTE ARCHIVO EXISTE POR UNA RAZÓN CONCRETA. En CSS, a igual
   especificidad manda la última regla. Mientras estas media queries vivían
   dentro de inicio.css, cada vez que se añadía algo al final del archivo
   las reglas nuevas le ganaban y el móvil dejaba de aplicarse en silencio:
   el CSS decía una cosa y la pantalla hacía otra. Pasó CINCO veces -- la
   columna de estado de asistencia, el padding de las tarjetas, los
   portales, el chip del calendario y el reloj.

   Sacándolo a un archivo que se carga DESPUÉS, el problema deja de poder
   ocurrir. No hay nada que recordar ni ningún orden que mantener: si se
   añade una regla a inicio.css, esta sigue ganando.

   Regla: todo lo que sea `@media (max-width: …)` del Inicio va AQUÍ.
   ============================================================ */

@media (max-width:760px){
  /* De la portada cuelgan DOS pisos -- la foto con la hora, y el saludo
     debajo -- asi que hace falta bastante mas sitio que los 46px de cuando
     solo colgaba la foto. */
  .hero-cover{ margin-bottom:140px; }
  /* Sin portada los mandos bajan: no cuelga ni la foto ni la hora, solo el
     saludo, asi que hay bastante menos que esquivar por debajo. */
  .hero-cover.sin-cover{ margin-bottom:92px; }
  .hero-cover.sin-cover .hero-mandos{ bottom:32px; }

  .habitos-cabecera,.habito{ grid-template-columns:1fr repeat(7,20px) 30px 18px;gap:4px; }
  .habito-dia{ width:20px;height:20px;border-radius:6px; }

  /* El calendario del telefono ya no necesita nada especial: las pastillas de
     texto dentro de cada dia se fueron y quedaron los puntos, que caben en
     cualquier ancho. Lo poco que hace falta esta en css/fichaje.css. */

  /* En el telefono la tabla pierde las columnas de proyecto y prioridad: en
     375px, cinco columnas dejan el titulo en dos letras. Lo que importa es
     que tarea es y para cuando. */
  .tt-cab,.tt-fila{ grid-template-columns:20px 1fr 66px;gap:8px; }
  .tt-cab .tt-proy,.tt-fila .tt-proy,
  .tt-cab .tt-pri,.tt-fila .tt-pri{ display:none; }

  /* LA FILA DEL HERO EN EL TELEFONO: EN DOS PISOS.

     A 390px no caben la foto, el saludo Y la hora en una linea -- al saludo
     le quedarian sesenta pixeles y no se leeria nada. Asi que la foto y la
     hora se quedan arriba, cada una en su esquina como estaban, y el saludo
     baja entero a su propia linea.

     La fila se ancla por ARRIBA (`top` y no `bottom`) porque su alto depende
     de lo larga que sea la frase de cada uno: anclada por abajo, una frase
     mas larga la haria crecer hacia arriba y se comeria la portada. */
  .hero-pie{
    left:16px;right:16px;bottom:auto;top:calc(100% - 30px);
    height:auto;flex-wrap:wrap;align-items:flex-start;gap:10px;
  }
  .hero-icono{ align-self:center; }

  /* Los mandos con los dos bordes fijados y permiso para partirse: en la
     portada caben dos o tres botones por linea a 390px, y si algun dia se
     añade otro se apila hacia arriba en vez de salirse de la pantalla. */
  .hero-mandos{
    left:16px;right:16px;
    flex-wrap:wrap;justify-content:flex-end;
    /* Y suben: la foto y la hora empiezan 30px por encima del borde de abajo
       de la portada, asi que a 16px los mandos se les metian encima. */
    bottom:46px;
  }
  /* Abajo del todo el saludo ya no esta sobre la portada sino sobre el fondo
     liso de la pagina, asi que suelta el cristal por lo mismo que lo suelta
     cuando no hay portada: ahi seria una caja gris, no relieve. */
  .hero-saludo{
    order:3;flex:1 1 100%;
    background:none;border:none;box-shadow:none;padding:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .hero-titulo{ font-size:1.42rem; }

  /* LA HORA EN EL TELEFONO. A 390px no caben las dos esquinas a tamano
     completo: la foto se queda como esta y el reloj se encoge y se pega al
     borde. El pie de "cuanto queda de jornada" se cae -- a este tamano la
     hora y el dia ya son bastante, y ese dato esta en Asistencia. */
  .hero-reloj{
    min-width:0;margin-left:auto;
    padding:8px 12px 9px;border-radius:15px;
  }
  .reloj-hora{ font-size:24px; }
  .reloj-dia{ font-size:9.5px;line-height:13px;margin-top:2px; }
  .reloj-pie{ display:none; }

  /* EL CARRUSEL EN EL TELEFONO.

     La escena tiene que seguir siendo alta AUNQUE la pantalla sea pequena, y
     no por gusto: la sombra de la foto del centro cae y se difumina unos
     55px, y si la escena mide justo lo que mide la foto, esa sombra se corta
     en una raya recta que delata la caja. Aqui hay sitio de sobra por debajo.

     La foto ocupa mas ancho que en el escritorio -- a 390px una al 46% se
     queda en un sello -- y la perspectiva se cierra un poco, porque la
     profundidad se percibe en proporcion al ancho que tiene para desplegarse.

     Los puntitos se caen: doce puntos en una barra de 358px no se pulsan, se
     rozan. Las flechas y el arrastre hacen el trabajo. */
  .galeria-escena{ height:332px;perspective:760px; }
  .cf-foto{ width:min(240px,72%); }
  .galeria-barra{ gap:9px;padding:5px 13px 5px 7px;border-radius:999px; }
  .gb-puntos{ display:none; }

  /* Y COMO LOS PUNTITOS NO ESTAN, LA BARRA VUELVE A UNA SOLA FILA.

     El bloque es estrecho, asi que la container query de inicio.css la parte
     en dos filas -- y con razon, porque ahi no cabian los mandos, la
     miniatura, el nombre Y los puntos. Pero en el telefono los puntos se han
     ido, y sin ellos sobra sitio de sobra: una fila en vez de dos son treinta
     y cinco pixeles menos de barra, que se los queda la foto. */
  .galeria-barra{ flex-wrap:nowrap;justify-content:flex-start; }
  .gb-ahora{ flex:1 1 0%;order:0; }
}