/* Pantalla de inicio: una tarjeta por app */
.inicio { max-width: 820px; margin: 0 auto; padding: 48px 20px; }
.inicio h1 { font-family: 'DM Sans', sans-serif; font-weight: 600; font-weight: 400; font-size: 26px; margin-bottom: 6px; }
.inicio p { color: var(--text2); font-size: 14px; margin-bottom: 28px; }
#apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.app-card {
  display: flex; flex-direction: column; gap: 6px; padding: 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color 0.15s, background 0.15s;
}
.app-card:hover, .app-card:focus-visible { border-color: var(--accent); background: var(--surface2); outline: none; }
.app-icono { margin-bottom: 10px; }
.app-tile { width: 52px; height: 52px; border-radius: 14px; background: #231F20; display: grid; place-items: center; }
.app-tile svg { width: 34px; height: 34px; }
.app-tile.neutro { background: var(--surface2); border: 1px solid var(--border2); color: var(--text2); }
.app-tile.neutro svg { width: 24px; height: 24px; }
.app-planning:hover, .app-planning:focus-visible { border-color: var(--accent); }
.app-rsvp:hover, .app-rsvp:focus-visible { border-color: var(--text2); }
.app-titulo { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 20px; }
.app-texto { font-size: 13px; color: var(--text2); line-height: 1.5; }

/* Tus pendientes (comun/mis-pendientes.js) */
#pendientes:not(:empty) { margin-bottom: 36px; }
.mp-tit { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
.mp-ok { color: var(--text2); font-size: 13px; margin: 0; }
.mp-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mp-tarjeta { display: flex; flex-direction: column; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; color: var(--text); text-decoration: none; }
.mp-tarjeta:hover, .mp-tarjeta:focus-visible { border-color: var(--accent); outline: none; }
.mp-tarjeta.urgente { border-color: var(--red); }
.mp-tarjeta.aviso { border-color: var(--amber); }
.mp-area { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); }
.mp-n { font-size: 20px; font-weight: 700; line-height: 1.15; }
.mp-tarjeta.urgente .mp-n { color: var(--red); }
.mp-tarjeta.aviso .mp-n { color: var(--amber); }
.mp-t { font-size: 13px; font-weight: 600; color: var(--text2); }
.mp-d { font-size: 12px; color: var(--text2); margin: 4px 0 8px; flex: 1; }
.mp-ir { font-size: 12px; font-weight: 600; color: var(--accent); }
.mp-mas { margin-top: 10px; }
.mp-mas summary { cursor: pointer; font-size: 13px; color: var(--accent); margin-bottom: 10px; }