/* Búsqueda predictiva */
.search-wrap {
  position: relative;
  flex: 1;
  max-width: 440px;
  min-width: 0;
}
.search-wrap .search {
  max-width: none;
  width: 100%;
}
.search-suggestions {
  position: absolute;
  z-index: 15;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e4e9ef;
  border-radius: 13px;
  box-shadow: 0 18px 45px #102a4a20;
  padding: 7px;
  overflow: hidden;
}
.search-suggestions[hidden] {
  display: none;
}
.suggestion {
  width: 100%;
  background: white;
  border: 0;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  color: #253e34;
}
.suggestion:hover,
.suggestion.chosen,
.suggestion:focus {
  background: #f0f4fc;
}
.suggestion img {
  width: 43px;
  height: 43px;
  object-fit: cover;
  border-radius: 7px;
}
.suggestion span {
  flex: 1;
  min-width: 0;
}
.suggestion b,
.suggestion small {
  display: block;
}
.suggestion b {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestion small {
  color: #84938a;
  font-size: 10px;
  margin-top: 5px;
}
.suggestion strong {
  color: #073493;
  font-size: 11px;
}
.suggestion-all {
  border: 0;
  border-top: 1px solid #eef1ef;
  background: white;
  color: #073493;
  font-weight: 700;
  font-size: 11px;
  width: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.suggestion-all svg {
  width: 14px;
}
.suggestion-empty {
  padding: 18px;
  color: #728079;
  font-size: 11px;
}
.mobile-search-area {
  position: relative;
  margin: 24px 0;
}
.mobile-search-field {
  display: flex !important;
  max-width: none;
}
.mobile-suggestions {
  position: relative;
  top: auto;
  margin-top: 8px;
  box-shadow: none;
}
.store .hero-photo {
  overflow: hidden;
}
.hero-photo-second {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroCrossfade 14s ease-in-out infinite;
}
.season-decoration {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.season-decoration .snow {
  position: absolute;
  color: #fff9e3;
  opacity: 0.75;
  font-size: 16px;
  animation: snowFloat 7s ease-in-out infinite;
}
.season-decoration .s1 {
  right: 14%;
  top: 12%;
}
.season-decoration .s2 {
  right: 28%;
  top: 23%;
  font-size: 11px;
  animation-delay: -2s;
}
.season-decoration .s3 {
  right: 7%;
  top: 45%;
  font-size: 12px;
  animation-delay: -4s;
}
.season-decoration .s4 {
  right: 35%;
  top: 8%;
  font-size: 9px;
  animation-delay: -1s;
}
.season-tree {
  position: absolute;
  right: 4%;
  bottom: 16%;
  width: 67px;
  height: 100px;
  color: #fcf5dc;
  opacity: 0.65;
}
.halloween-decor .bat {
  position: absolute;
  color: #f3be83;
  opacity: 0.7;
  animation: batFloat 5s ease-in-out infinite;
}
.bat-one {
  width: 56px;
  right: 15%;
  top: 12%;
}
.bat-two {
  width: 32px;
  right: 31%;
  top: 23%;
  animation-delay: -2s !important;
}
.season-star {
  position: absolute;
  right: 6%;
  top: 30%;
  color: #f5c28e;
  animation: snowFloat 5s ease-in-out infinite;
}
.store .hero-content {
  z-index: 2;
}
.showcase-animate .showcase-item {
  animation: cardReveal 0.42s ease both;
}
.showcase-animate .showcase-item:nth-child(2) {
  animation-delay: 0.03s;
}
.showcase-animate .showcase-item:nth-child(3) {
  animation-delay: 0.06s;
}
.carousel-controls .carousel-pause {
  background: #f1f4fa;
}
.carousel-controls button:hover {
  background: #e9eef9;
}
.dashboard-welcome {
  margin: 24px 0 18px;
  background: #eff4fc;
  border-radius: 16px;
  padding: 25px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.dashboard-kicker {
  color: #6b81a6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
}
.dashboard-welcome h2 {
  font-size: 21px;
  color: #183a77;
  margin: 9px 0;
}
.dashboard-welcome p,
.payments-intro p {
  font-size: 11px;
  color: #8492a2;
  margin: 0;
  line-height: 1.6;
}
.dashboard-actions {
  display: flex;
  gap: 9px;
}
.dashboard-actions .btn {
  white-space: nowrap;
}
.dashboard-stats,
.payments-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.payments-stats {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 24px;
}
.metric {
  background: white;
  border: 1px solid #e9edf2;
  border-radius: 14px;
  padding: 19px;
  min-width: 0;
}
.metric small,
.metric strong,
.metric > span:last-child {
  display: block;
}
.metric small {
  font-size: 11px;
  color: #84928e;
  margin-top: 13px;
}
.metric strong {
  font-size: 24px;
  color: #1d374a;
  margin: 8px 0;
  font-variant-numeric: tabular-nums;
}
.metric > span:last-child {
  font-size: 10px;
  color: #95a39b;
}
.metric-icon,
.insight-icon {
  width: 37px;
  height: 37px;
  border-radius: 10px;
  display: grid !important;
  place-items: center;
}
.metric-icon svg,
.insight-icon svg {
  width: 19px;
}
.blue {
  color: #3765b5;
  background: #edf3ff;
}
.amber {
  color: #b68428;
  background: #fff4e1;
}
.rose {
  color: #bb756c;
  background: #fef0ed;
}
.green {
  color: #47836c;
  background: #eaf5ef;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr);
  gap: 15px;
}
.panel-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.panel-heading > svg {
  color: #91a5ad;
}
.panel-tag {
  background: #edf4ff;
  color: #305aa3;
  font-size: 11px;
  font-weight: 800;
  border-radius: 8px;
  padding: 8px 11px;
}
.sales-chart {
  height: 190px;
  display: flex;
  gap: 14px;
  align-items: stretch;
  padding: 20px 3px 5px;
  border-bottom: 1px solid #edf1ef;
}
.sales-column {
  flex: 1;
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
}
.sales-column > span {
  font-size: 9px;
  color: #82928b;
  white-space: nowrap;
}
.sales-bar-track {
  height: 130px;
  width: 100%;
  max-width: 42px;
  display: flex;
  align-items: end;
  margin: 8px 0;
  background: linear-gradient(to top, #f3f6fb 1px, transparent 1px);
  background-size: 100% 25%;
}
.sales-bar-track i {
  width: 100%;
  display: block;
  border-radius: 5px 5px 0 0;
  background: #7ca0e0;
  min-height: 2px;
}
.sales-column:last-child .sales-bar-track i {
  background: #315ea8;
}
.sales-column small {
  text-transform: capitalize;
  color: #93a19a;
  font-size: 10px;
}
.branch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
  border-bottom: 1px solid #eef1ef;
}
.branch-row:last-child {
  border: 0;
}
.branch-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #eff4fc;
  color: #3f64a6;
  border-radius: 10px;
  font-weight: 800;
}
.branch-row > div:nth-child(2) {
  flex: 1;
}
.branch-row b,
.branch-row small {
  display: block;
  font-size: 11px;
}
.branch-row small {
  color: #a1aca6;
  margin-top: 5px;
}
.branch-row strong {
  font-size: 12px;
  color: #344d43;
}
.insight-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #eef1ef;
  background: none;
  text-align: left;
  color: #314c3f;
}
.insight-row > span:nth-child(2) {
  flex: 1;
}
.insight-row b,
.insight-row small {
  display: block;
}
.insight-row b {
  font-size: 11px;
}
.insight-row small {
  font-size: 10px;
  color: #96a49b;
  margin-top: 5px;
}
.insight-row > svg {
  width: 15px;
  color: #9aa8a0;
}
.recent-activity {
  padding-top: 20px;
}
.recent-activity .activity:last-child {
  border: 0;
}
.payments-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}
.payments-intro h2 {
  font-size: 20px;
  color: #1f3d36;
  margin: 0 0 8px;
}
.payments-stats .metric small {
  margin: 0;
}
.payments-stats .metric strong {
  font-size: 23px;
}
.payments-stats + .admin-table {
  margin-top: 0;
}
@keyframes heroCrossfade {
  0%,
  38% {
    opacity: 0;
    transform: scale(1.03);
  }
  50%,
  88% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.03);
  }
}
@keyframes snowFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(14px) rotate(30deg);
  }
}
@keyframes batFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-10px) rotate(4deg);
  }
}
@keyframes cardReveal {
  from {
    opacity: 0.5;
    transform: translateX(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(0.96);
  }
}
@media (max-width: 900px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-welcome {
    align-items: start;
    flex-direction: column;
  }
}
@media (max-width: 640px) {
  .store .header .search-wrap {
    display: none;
  }
  .season-tree {
    width: 46px;
    bottom: 14%;
  }
  .season-decoration .snow,
  .halloween-decor .bat {
    opacity: 0.5;
  }
  .dashboard-welcome {
    padding: 20px;
  }
  .dashboard-actions {
    width: 100%;
  }
  .dashboard-actions .btn {
    flex: 1;
    padding: 0 8px;
    font-size: 10px;
  }
  .dashboard-stats,
  .payments-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .metric {
    padding: 14px;
  }
  .metric strong {
    font-size: 20px;
  }
  .dashboard-grid {
    gap: 10px;
  }
  .payments-intro {
    align-items: start;
    flex-direction: column;
  }
  .sales-chart {
    gap: 5px;
  }
  .sales-column > span {
    font-size: 8px;
  }
  .suggestion {
    min-height: 52px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo-second,
  .season-decoration *,
  .showcase-animate .showcase-item {
    animation: none !important;
  }
  .hero-photo-second {
    opacity: 0;
  }
}
.pill.failure {
  background: #fcece9;
  color: #a84741;
}