/* =========================================================
   MI CUENTA (portal del cliente)
   ========================================================= */

.ac { width: 100%; padding: 32px 0 72px; color: var(--text); }
.ac-wrap {
  width: min(var(--site-max, 1400px), calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.ac-side {
  position: sticky; top: 90px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: calc(var(--radius, 12px) + 2px); padding: 18px;
}
.ac-user { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.ac-user div { min-width: 0; display: grid; }
.ac-user small { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; }
.ac-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: var(--primary-text, #fff); font-weight: 800; }
.ac-side nav { display: grid; gap: 2px; }
.ac-side nav a, .ac-side nav button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .15s, transform .15s;
}
.ac-side nav a:hover, .ac-side nav button:hover { background: var(--bg-soft); transform: translateX(3px); }
.ac-side nav a.is-active { background: var(--primary); color: var(--primary-text, #fff); }
.ac-side nav button { color: #b42318; margin-top: 8px; }

.ac-content { display: grid; gap: 20px; min-width: 0; animation: authIn .45s ease both; }
.ac-head h2, .ac-hero h2 { margin: 0 0 4px; font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -.02em; }
.ac-head p, .ac-hero p { margin: 0; color: var(--text-soft); }
.ac-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 24px; border-radius: calc(var(--radius, 12px) + 2px); background: var(--footer-bg, #111); color: var(--footer-fg, #fff); }
.ac-hero p { color: inherit; opacity: .8; }

.ac-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.ac-stats article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 12px); padding: 16px; display: grid; gap: 4px; transition: transform .2s, box-shadow .2s; }
.ac-stats article:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.ac-stats span { font-size: .78rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .06em; }
.ac-stats strong { font-size: 1.4rem; }

.ac-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ac-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ac-card { background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius, 12px) + 2px); padding: 20px; display: grid; gap: 12px; align-content: start; }
.ac-card header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ac-card h3 { margin: 0; font-size: 1.02rem; }
.ac-card p { margin: 0; }
.ac-card header a { font-size: .85rem; font-weight: 700; color: var(--primary); }
.ac-addr.is-main { border-color: var(--primary); }
.ac-danger { border-color: #f4b8b3; }
.ac-fav img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--bg-soft); border-radius: 8px; }

.ac-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ac-empty { color: var(--text-soft); padding: 12px 0; }
.ac-back { font-weight: 700; color: var(--primary); text-decoration: none; }

.ac-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.ac-filters input, .ac-filters select { padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius, 10px); background: var(--surface); color: var(--text); font: inherit; }
.ac-filters input { flex: 1 1 260px; }

.ac-list { display: grid; gap: 10px; }
.ac-order { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius, 12px); background: var(--surface); color: inherit; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.ac-order:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.ac-order__thumbs { display: flex; }
.ac-order__thumbs img, .ac-order__thumbs i, .ac-item img, .ac-item i { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--bg-soft); border: 2px solid var(--surface); }
.ac-order__thumbs > * + * { margin-left: -14px; }
.ac-order__main { display: grid; min-width: 0; }
.ac-order__main small { color: var(--text-soft); }
.ac-order__side { display: grid; justify-items: end; gap: 4px; }

.ac-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--bg-soft); border: 1px solid var(--border); }
.ac-badge.is-ok { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.ac-badge.is-warn { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.ac-badge.is-info { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }
.ac-badge.is-bad { background: #fef3f2; color: #b42318; border-color: #fecdca; }

.ac-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ac-item div { display: grid; min-width: 0; }
.ac-item small { color: var(--text-soft); }
.ac-totals { margin: 0; display: grid; gap: 6px; }
.ac-totals div { display: flex; justify-content: space-between; }
.ac-totals dt, .ac-totals dd { margin: 0; }
.ac-totals .is-total { font-size: 1.15rem; font-weight: 800; padding-top: 8px; border-top: 1px solid var(--border); }

.ac-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--border); display: grid; gap: 14px; }
.ac-timeline li { position: relative; display: grid; }
.ac-timeline li::before { content: ""; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--surface); }
.ac-timeline small { color: var(--text-soft); }

.ac-offer { margin-top: 18px; padding: 18px; border: 1px dashed var(--primary); border-radius: var(--radius, 12px); display: flex; gap: 14px; justify-content: space-between; align-items: center; flex-wrap: wrap; }

.ac-heart { position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: grid; place-items: center; font-size: 1.1rem; transition: transform .18s; }
.ac-heart:hover { transform: scale(1.12); }
.ac-heart.is-on { color: #e11d48; }

@media (max-width: 900px) {
  .ac-wrap { grid-template-columns: 1fr; }
  .ac-side { position: static; }
  .ac-side nav { grid-auto-flow: column; overflow-x: auto; }
  .ac-side nav a, .ac-side nav button { white-space: nowrap; width: auto; }
  .ac-grid { grid-template-columns: 1fr; }
  .ac-order { grid-template-columns: 1fr auto; }
  .ac-order__thumbs { display: none; }
}