.home-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.home-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-width: 0; min-height: 180px; border: 1px solid #cbd5e1; border-radius: 16px; background: #FFFFFF; padding: 20px; text-align: center; box-shadow: 0 4px 6px -1px #cbd5e199, 0 2px 4px -2px #cbd5e199; color: #1e293b; cursor: default; }
.home-card.available { cursor: pointer; transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s; }
.home-card.available:focus-visible { outline: 3px solid #00685B; outline-offset: 4px; }
.home-card h2, .card-title { width: 100%; font-size: 16px; font-weight: 700; margin: 0; line-height: 1.5; }
.card-icon { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 16px; background: rgb(0 104 91 / 10%); color: #00685B; margin: 12px 0; box-shadow: 0 1px 2px #0000000d; }
/* SVG alpha masks preserve the source geometry; currentColor controls the visible icon. */
.home-icon { display: block; width: 32px; height: 32px; background: currentColor; -webkit-mask: var(--home-icon) center / contain no-repeat; mask: var(--home-icon) center / contain no-repeat; }
.home-icon-cobrar { --home-icon: url("../../assets/icons/cash-register.svg"); }
.home-icon-ciclos { --home-icon: url("../../assets/icons/calendar-repeat.svg"); }
.home-icon-movimientos { --home-icon: url("../../assets/icons/calendar-clock.svg"); }
.home-icon-clientes { --home-icon: url("../../assets/icons/folder-user.svg"); }
.home-icon-finanzas { --home-icon: url("../../assets/icons/report-money.svg"); }
.home-icon-usuarios { --home-icon: url("../../assets/icons/user-cog.svg"); }
.home-icon-configuracion { --home-icon: url("../../assets/icons/building-cog.svg"); }
.home-icon-santi { --home-icon: url("../../assets/home/santi-symbol.svg"); }
.home-card.available .card-icon { transition: background-color .3s, color .3s; }
.card-footer { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; border-top: 1px solid #f1f5f9; padding-top: 12px; font-size: 12px; font-weight: 600; line-height: 1.4; color: #64748B; margin: 0; }
.home-card.available .card-footer { color: #00685B; }
.card-footer .fa-arrow-right { font-size: 11px; transition: transform .3s; }
.home-card.available:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgb(0 104 91 / 15%); }
.home-card.available:hover .card-title { color: #00685B; }
.home-card.available:hover .card-icon { background: #00685B; color: #FFFFFF; }
.home-card.available:hover .fa-arrow-right { transform: translateX(4px); }
@media (max-width: 1023px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .home-grid { gap: 9px; }
  .home-card { min-height: 0; gap: 7px; padding: 12px 8px; border-radius: 19px; box-shadow: 0 5px 14px #003d3514; }
  .home-card h2, .card-title { font-size: .94rem; min-height: 0; display: grid; place-items: center; line-height: 1.25; }
  .card-icon { width: 48px; height: 48px; margin: 0; border-radius: 14px; }
  .home-icon { width: 26px; height: 26px; }
  .card-footer { font-size: .8rem; padding-top: 0; border-top: 0; line-height: 1.35; }
}
@media (max-width: 290px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .home-card.available, .home-card.available .card-icon, .card-footer .fa-arrow-right { transition: none; } .home-card.available:hover, .home-card.available:hover .fa-arrow-right { transform: none; } }