/* MOCATEHNO — cuenta de cliente: panel, formularios, tablas y página de éxito.
   Cargado desde extension/mocatehno/.../template/account/*.twig y common/success.twig. */

/* --- layout: barra lateral + contenido --- */
.mk-acct { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 22px; align-items: start; }
.mk-acct-side { position: sticky; top: 16px; border: 1px solid var(--nb-line, #EAEAEA); border-radius: 6px; background: #fff; overflow: hidden; }
.mk-acct-user { padding: 16px; background: #342924; color: #fff; display: flex; align-items: center; gap: 12px; }
.mk-acct-avatar {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
  background: var(--nb-orange, #FF7700); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.mk-acct-user-name { font-weight: 800; font-size: 15px; line-height: 1.25; word-break: break-word; }
.mk-acct-user-mail { font-size: 12px; opacity: .75; word-break: break-all; }
.mk-acct-group { border-top: 1px solid var(--nb-line, #EAEAEA); padding: 12px 0 8px; }
.mk-acct-group:first-of-type { border-top: 0; }
.mk-acct-group-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--nb-muted, #777); padding: 0 16px 6px; }
.mk-acct-nav { list-style: none; margin: 0; padding: 0; }
.mk-acct-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; font-size: 14px; color: var(--nb-ink, #222);
  text-decoration: none; border-left: 3px solid transparent;
}
.mk-acct-nav a i { font-size: 15px; color: var(--nb-muted, #777); width: 18px; text-align: center; }
.mk-acct-nav a:hover { background: #fbf6f2; color: var(--nb-orange, #FF7700); }
.mk-acct-nav a:hover i { color: var(--nb-orange, #FF7700); }
.mk-acct-nav .is-active > a { background: #fff3e8; border-left-color: var(--nb-orange, #FF7700); color: var(--nb-orange, #FF7700); font-weight: 700; }
.mk-acct-nav .is-active > a i { color: var(--nb-orange, #FF7700); }
.mk-acct-logout { border-top: 1px solid var(--nb-line, #EAEAEA); padding: 10px 16px 14px; }
.mk-acct-logout a { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #c0392b; text-decoration: none; }
.mk-acct-logout a:hover { text-decoration: none; }

.mk-acct-main { min-width: 0; }
.mk-acct-card { border: 1px solid var(--nb-line, #EAEAEA); border-radius: 6px; background: #fff; padding: 20px; }
.mk-acct-card + .mk-acct-card { margin-top: 16px; }
.mk-acct-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.mk-acct-sub { font-size: 14px; color: var(--nb-muted, #777); margin-bottom: 18px; }
.mk-acct-legend { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--nb-muted, #777); margin-bottom: 12px; }

/* --- avisos --- */
.mk-alert { display: flex; align-items: flex-start; gap: 10px; border-radius: 6px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px; }
.mk-alert-ok { background: #eaf7ee; border: 1px solid #bfe3c9; color: #1d6b33; }
.mk-alert-err { background: #fdecea; border: 1px solid #f5c2bd; color: #a3271b; }

/* --- mosaico del resumen --- */
.mk-acct-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-acct-tile {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--nb-line, #EAEAEA); border-radius: 6px; padding: 14px;
  background: #fff; color: var(--nb-ink, #222); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mk-acct-tile:hover { border-color: var(--nb-orange, #FF7700); box-shadow: 0 6px 16px rgba(0,0,0,.06); transform: translateY(-1px); }
.mk-acct-tile i { font-size: 20px; color: var(--nb-orange, #FF7700); flex: 0 0 34px; width: 34px; height: 34px; border-radius: 6px; background: #fff3e8; display: inline-flex; align-items: center; justify-content: center; }
.mk-acct-tile-text { min-width: 0; }
.mk-acct-tile-title { display: block; font-weight: 700; font-size: 14px; }
.mk-acct-tile-desc { display: block; font-size: 12px; color: var(--nb-muted, #777); }

/* --- formularios --- */
.mk-acct-form { display: flex; flex-direction: column; gap: 14px; }
.mk-acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mk-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mk-field > span.label-text { font-size: 13px; font-weight: 700; }
.mk-field-wide { grid-column: 1 / -1; }
.mk-acct-form .mk-input,
.mk-acct-form select.mk-input,
.mk-acct-form textarea.mk-input {
  width: 100%; max-width: none;
  border: 1px solid var(--nb-line, #EAEAEA); border-radius: 4px; background: #fff;
  height: 42px; font-size: 14px; padding: 0 12px;
}
.mk-acct-form textarea.mk-input { height: auto; padding: 10px 12px; }
.mk-acct-form .invalid-feedback { color: #c0392b; font-size: 12px; }
.mk-acct-form .invalid-feedback:not(.d-block) { display: none; }
.mk-choice { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 3px 0; }
.mk-choice input { accent-color: var(--nb-orange, #FF7700); width: 16px; height: 16px; }
.mk-choice-row { display: flex; flex-wrap: wrap; gap: 18px; }
.mk-acct-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 4px; }
.mk-acct-actions .mk-acct-back { margin-right: auto; }
.mk-acct-actions .btn { min-height: 42px; height: 42px; }

/* interruptor del boletín */
.mk-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.mk-switch input { -webkit-appearance: none; appearance: none; width: 46px; height: 26px; border-radius: 999px; background: #d8d8d8; position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.mk-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.mk-switch input:checked { background: var(--nb-orange, #FF7700); }
.mk-switch input:checked::after { left: 23px; }

/* --- tablas --- */
.mk-acct-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mk-acct-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mk-acct-table th, .mk-acct-table td { padding: 11px 12px; border-bottom: 1px solid var(--nb-line, #EAEAEA); text-align: left; vertical-align: middle; }
.mk-acct-table thead th { background: #faf9f8; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--nb-muted, #777); white-space: nowrap; }
.mk-acct-table tbody tr:hover { background: #fcfbfa; }
.mk-acct-table .mk-num { text-align: right; white-space: nowrap; }
.mk-acct-table .mk-act { text-align: right; white-space: nowrap; }
.mk-acct-table a { color: var(--nb-ink, #222); text-decoration: none; font-weight: 600; }
.mk-acct-table a:hover { color: var(--nb-orange, #FF7700); }
.mk-acct-table img { border: 1px solid var(--nb-line, #EAEAEA); border-radius: 4px; }
.mk-acct-table .mk-price-old { color: var(--nb-muted, #777); font-size: 13px; }
/* Precio de oferta en rojo (lista de deseos) */
.mk-acct-table .mk-price-new { color: #e0243b; }

.mk-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #f1efed; font-size: 12px; font-weight: 700; color: #4a4340; white-space: nowrap; }

.mk-ico-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 4px; border: 1px solid var(--nb-line, #EAEAEA);
  background: #fff; color: var(--nb-ink, #222); font-size: 14px; cursor: pointer; padding: 0;
}
.mk-ico-btn:hover { border-color: var(--nb-orange, #FF7700); color: var(--nb-orange, #FF7700); }
.mk-ico-btn.mk-ico-danger:hover { border-color: #c0392b; color: #c0392b; }
.mk-ico-form { display: inline-flex; gap: 6px; margin: 0; }

.mk-acct-empty { text-align: center; padding: 32px 12px; color: var(--nb-muted, #777); }
.mk-acct-empty i { font-size: 34px; color: #d9d4d0; display: block; margin-bottom: 10px; }
.mk-acct-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 13px; color: var(--nb-muted, #777); }
.mk-acct-foot .pagination { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.mk-acct-foot .page-item > a, .mk-acct-foot .page-item > span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--nb-line, #EAEAEA); border-left-width: 0; background: #fff;
  color: var(--nb-ink, #222); font-weight: 700; font-size: 13px; text-decoration: none;
}
.mk-acct-foot .page-item:first-child > a, .mk-acct-foot .page-item:first-child > span { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.mk-acct-foot .page-item:last-child > a, .mk-acct-foot .page-item:last-child > span { border-radius: 0 4px 4px 0; }
.mk-acct-foot .page-item.active > a, .mk-acct-foot .page-item.active > span, .mk-acct-foot .page-item > a:hover {
  background: var(--nb-orange, #FF7700); border-color: var(--nb-orange, #FF7700); color: #fff;
}

/* pedido: bloques de direcciones y totales */
.mk-acct-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mk-acct-box { border: 1px solid var(--nb-line, #EAEAEA); border-radius: 6px; padding: 14px; font-size: 14px; line-height: 1.6; }
.mk-acct-box h3 { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--nb-muted, #777); margin-bottom: 8px; }

/* --- página de éxito (registro, pedido, etc.) --- */
.mk-done { display: flex; justify-content: center; }
.mk-done-card { max-width: 680px; width: 100%; text-align: center; border: 1px solid var(--nb-line, #EAEAEA); border-radius: 8px; background: #fff; padding: 40px 28px; box-shadow: 0 10px 30px rgba(0,0,0,.05); }
.mk-done-icon {
  width: 82px; height: 82px; border-radius: 50%; margin: 0 auto 18px;
  background: #eaf7ee; color: #1d9d4b; font-size: 42px;
  display: flex; align-items: center; justify-content: center;
}
.mk-done-card h1 { font-size: 27px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.mk-done-lead { font-size: 15px; color: #555; line-height: 1.65; margin-bottom: 6px; }
.mk-done-text { font-size: 14px; color: var(--nb-muted, #777); line-height: 1.65; }
.mk-done-text a { color: var(--nb-orange, #FF7700); }
.mk-done-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.mk-done-actions .btn { min-height: 46px; height: 46px; padding-inline: 26px; font-size: 15px; }
.mk-done-hint { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--nb-line, #EAEAEA); font-size: 13px; color: var(--nb-muted, #777); }
.mk-done-hint a { color: var(--nb-ink, #222); font-weight: 700; }
.mk-done-hint a:hover { color: var(--nb-orange, #FF7700); }

@media (max-width: 991px) {
  .mk-acct { grid-template-columns: 1fr; }
  .mk-acct-side { position: static; }
  .mk-acct-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mk-acct-tiles, .mk-acct-grid, .mk-acct-cols { grid-template-columns: 1fr; }
  .mk-acct-card { padding: 16px; }
  .mk-done-card { padding: 28px 18px; }
  .mk-done-actions .btn { width: 100%; }
  .mk-acct-actions { justify-content: stretch; }
  .mk-acct-actions .btn { flex: 1 1 100%; }
}

/* Lista de deseos en móvil: la barra lateral de la cuenta se apila encima del
   contenido (<=991px) y el cliente aterriza en el menú de "Mi cuenta" en vez de
   en sus productos guardados. En esta página se oculta el menú lateral. */
@media (max-width: 991px) {
  .mk-acct-wish .mk-acct-side { display: none; }
}

/* Lista de deseos: tarjetas en móvil en lugar de la tabla de 6 columnas
   (imagen + datos arriba, botón de carrito ancho y papelera redonda abajo). */
.mk-wish-cards { display: none; list-style: none; margin: 0; padding: 0; }
.mk-wish-card {
  border: 1px solid var(--nb-line, #EAEAEA); border-radius: 8px; background: #fff;
  padding: 14px; display: flex; flex-direction: column; gap: 14px;
}
.mk-wish-card + .mk-wish-card { margin-top: 12px; }
.mk-wish-top { display: flex; gap: 14px; align-items: flex-start; }
.mk-wish-thumb {
  flex: 0 0 84px; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--nb-line, #EAEAEA); border-radius: 6px; background: #fff; overflow: hidden;
}
.mk-wish-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mk-wish-info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.mk-wish-name { font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--nb-ink, #222); text-decoration: none; overflow-wrap: anywhere; }
.mk-wish-name:hover { color: var(--nb-orange, #FF7700); }
.mk-wish-model { font-size: 13px; color: var(--nb-muted, #777); overflow-wrap: anywhere; }
.mk-wish-stock { font-size: 13px; font-weight: 700; color: var(--nb-muted, #777); }
.mk-wish-stock.is-in { color: #1d9d4b; }
.mk-wish-price { font-size: 20px; font-weight: 800; color: var(--nb-ink, #222); margin-top: 2px; }
.mk-wish-price .mk-wish-special { color: #e0243b; }
.mk-wish-price .mk-price-old { color: var(--nb-muted, #777); font-size: 14px; font-weight: 600; margin-left: 4px; }
.mk-wish-foot { display: flex; align-items: center; gap: 10px; }
.mk-wish-cart {
  flex: 1 1 auto; min-height: 46px; height: 46px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px;
}
.mk-wish-del {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--nb-line, #EAEAEA); background: #fff; color: var(--nb-ink, #222);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; padding: 0;
}
.mk-wish-del { border-color: #e0243b; background: #e0243b; color: #fff; }
.mk-wish-del:hover { border-color: #c0392b; background: #c0392b; color: #fff; }
.mk-wish-cart.mk-busy, .mk-wish-del.mk-busy { opacity: .6; pointer-events: none; }

/* Lista de deseos: las acciones eran dos iconos grises sobre blanco y no se
   distinguían. Se pintan con los colores del tema (carrito naranja, quitar en
   rojo) sólo dentro de #wishlist para no tocar el resto de la cuenta. */
#wishlist .mk-ico-btn {
  border-color: var(--nb-orange, #FF7700); background: var(--nb-orange, #FF7700); color: #fff;
}
#wishlist .mk-ico-btn:hover { border-color: #e06800; background: #e06800; color: #fff; }
#wishlist .mk-ico-btn.mk-ico-danger { border-color: #e0243b; background: #e0243b; color: #fff; }
#wishlist .mk-ico-btn.mk-ico-danger:hover { border-color: #c0392b; background: #c0392b; color: #fff; }
#wishlist .mk-ico-btn.mk-busy { opacity: .6; pointer-events: none; }
/* Un poco de color en la tabla: cabecera con filete naranja y stock en verde. */
#wishlist .mk-acct-table thead th { border-bottom: 2px solid var(--nb-orange, #FF7700); }
#wishlist .mk-acct-table td.mk-wish-stock { font-weight: 700; }

@media (max-width: 767px) {
  [data-nb-wish-list] .mk-acct-table { display: none; }
  [data-nb-wish-list] .mk-wish-cards { display: block; }
  [data-nb-wish-list] { overflow-x: visible; }
}