/* Pantalla de ingreso: la particion en dos y el calendario de calor. */

/* ===================================================================
   INGRESO — pantalla partida
   =================================================================== */
#ingreso{min-height:100dvh;display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%)}

.ingreso-marca{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:30px;
  padding:40px;color:#fff;
  background:linear-gradient(155deg,#312e81 0%,#4f46e5 55%,#6d28d9 100%);
}
.ingreso-marca .lockup{position:relative;z-index:2;display:flex;align-items:center;gap:11px}
.ingreso-marca .lockup .nombre{font-size:15px;font-weight:600;letter-spacing:-.01em}
.ingreso-marca .lockup .area{font-size:12.5px;color:rgba(255,255,255,.72)}
.ingreso-marca .decir{position:relative;z-index:2;max-width:34ch}
.ingreso-marca .decir h2{font-size:27px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.ingreso-marca .decir p{margin-top:10px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.78)}
.ingreso-marca .pie{position:relative;z-index:2;font-size:12.5px;color:rgba(255,255,255,.74)}

/* Calendario de calor: siete filas, una por dia de la semana, como los
   datos que de verdad guarda esta aplicacion. Va como banda al pie del
   panel, no detras del texto. */
.trama{display:grid;gap:5px;grid-template-columns:repeat(var(--cols),1fr);opacity:.8}
.trama i{aspect-ratio:1;border-radius:2px;background:#fff;opacity:var(--o)}
.animar .trama i{animation:surgir .5s var(--d) both cubic-bezier(.2,.8,.2,1)}
@keyframes surgir{from{opacity:0;transform:scale(.4)}to{opacity:var(--o);transform:none}}

.ingreso-forma{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 24px;position:relative;background:var(--fondo);
}
.ingreso-forma .tema-esquina{position:absolute;top:20px;right:20px}
.ingreso-caja{width:100%;max-width:352px}
.ingreso-caja h1{font-size:30px;font-weight:700;letter-spacing:-.03em}
.ingreso-caja .entrada{margin-top:7px;color:var(--tinta-2);font-size:14.5px}
.ingreso-caja form{margin-top:26px;display:flex;flex-direction:column;gap:15px}
.ingreso-caja .btn{height:42px;font-size:15px}
.ingreso-caja .ayuda{margin-top:16px;font-size:13px;color:var(--tinta-apagada);line-height:1.5}
.ingreso-pie{margin-top:36px;font-size:12px;color:var(--tinta-apagada);text-align:center}

@media(max-width:860px){
  #ingreso{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .ingreso-marca{padding:22px;min-height:170px;gap:18px}
  .ingreso-marca .decir h2{font-size:21px}
  .ingreso-marca .decir p,.ingreso-marca .pie,.trama{display:none}
  .ingreso-forma{padding:32px 20px;justify-content:flex-start}
}