/* Accounts and contact reveals in the samples (public/js/acc.js, config/accounts.php): log-in buttons in the header, contact "chips",
   opened contacts, sample paging, modals, the log-in and sign-up pages. On top of the UI Kit and app.css, colours from the product palette. */

/* ---------- top bar: log in and sign up / counter and log out ---------- */
.topbar__acc { display: inline-flex; align-items: center; gap: 14px; height: 36px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.16); white-space: nowrap; }
.topbar__acc a, .topbar__acc button { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.78); font: inherit; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.topbar__acc a:hover, .topbar__acc button:hover { color: #fff; }
.topbar__acc form { display: contents; }
.topbar__acc a.topbar__reg { color: var(--accent); font-weight: 650; }
.topbar__acc a.topbar__reg:hover { color: #fff; }
.topbar__used, .topbar__me { display: inline-flex; align-items: center; gap: 6px; }
.topbar__acc a.topbar__me:hover span { text-decoration: underline; text-underline-offset: 2px; }
.topbar__used b { color: #fff; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 800; }
.topbar__me span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.topbar__acc svg { width: 14px; height: 14px; flex: none; }
/* short of space — first the update date goes, then the user name */
@media (max-width: 1280px) { .topbar__links .topbar__upd { display: none; } }
@media (max-width: 1100px) { .topbar__me { display: none !important; } }

/* ---------- account button in the header (next to the cart) and its menu ---------- */
.accbtn { color: var(--ink); }
.accbtn.is-in { background: var(--brand-tint); color: var(--brand-ink); }
.accbtn.is-in::after { content: ""; position: absolute; right: 7px; bottom: 7px; width: 8px; height: 8px; background: var(--ok, #1F8A5B); box-shadow: 0 0 0 2px var(--bg, #fff); }
.accmenu { position: relative; flex-shrink: 0; }
.accmenu__m { top: calc(100% + 8px); width: 280px; }
.accmenu__who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 4px; min-width: 0; }
.accmenu__who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accmenu__who small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accmenu__used { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; font-size: 13.5px; }
.accmenu__used b { font-variant-numeric: tabular-nums; }
.accmenu__used small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.accmenu__bar { display: block; height: 4px; background: var(--brand-tint); }
.accmenu__bar i { display: block; height: 100%; background: var(--brand); transition: width .3s ease; }
.accmenu form { margin: 0; }
/* narrow phone: the account button moves to the mobile menu so as not to crowd the cart and the purchase */
@container (max-width: 380px) { .hdr .accbtn, .hdr .accmenu { display: none; } }

/* ---------- mobile menu ---------- */
.drawer-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer-acc .btn { justify-content: center; }
.drawer-acc--in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-bottom: 4px; }
.drawer-acc__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.drawer-acc__who > svg { width: 20px; height: 20px; flex: none; color: var(--brand); }
.drawer-acc__who > span { display: flex; flex-direction: column; min-width: 0; }
.drawer-acc__who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-acc__who small { font-size: 12.5px; color: var(--muted); }
.drawer-acc form { margin: 0; }
.drawer-acc--in .drawer-acc__cab { grid-column: 1 / -1; }

/* ---------- contact "chips" in the sample: visible part + dots, an eye, a click opens the contacts ---------- */
.table--co { min-width: 940px; }
.table--co col.c-co { width: 29%; } .table--co col.c-city { width: 13%; } .table--co col.c-ph { width: 18%; }
.table--co col.c-web { width: 22%; } .table--co col.c-soc { width: 12%; }
.contacts-cell { align-items: flex-start; }
.cchip {
  position: relative; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 24px; margin: 0;
  padding: 2px 5px 2px 6px; border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent); background: var(--paper, #F6F8FB);
  color: var(--ink); font: 500 12px/1.35 var(--mono); letter-spacing: 0; text-align: left; cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.cchip__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cchip__dots { color: var(--muted); letter-spacing: -1px; }
.cchip__ic { width: 13px; height: 13px; flex: none; color: var(--muted); }
.cchip__eye { width: 13px; height: 13px; flex: none; margin-left: 1px; color: var(--brand); opacity: .75; transition: opacity .15s ease, transform .15s ease; }
.cchip:hover, .cchip:focus-visible { background: var(--brand-tint); border-style: solid; border-color: var(--brand); }
.cchip:hover .cchip__eye, .cchip:focus-visible .cchip__eye { opacity: 1; transform: scale(1.12); }
.cchip:focus-visible, .netsbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cchip:active { box-shadow: inset 0 0 0 1px var(--brand); }
/* the "Show contacts" hint — above the chip, inside the table */
.cchip::after, .netsbtn::after {
  content: attr(data-hint); position: absolute; z-index: 5; left: 0; bottom: calc(100% + 6px);
  padding: 5px 9px; background: var(--ink); color: #fff; font: 600 12px/1.3 var(--font, Manrope, sans-serif); white-space: nowrap;
  pointer-events: none; display: none;
}
.cchip:hover::after, .cchip:focus-visible::after, .netsbtn:hover::after, .netsbtn:focus-visible::after { display: block; animation: tip-in .15s ease both; }
.netsbtn::after { left: auto; right: 0; }
.netsbtn { position: relative; display: inline-flex; padding: 3px; margin: -3px; border: 1px dashed transparent; background: none; cursor: pointer; }
.netsbtn:hover { border-color: var(--brand); background: var(--brand-tint); }
.netsbtn .net.tip::before, .netsbtn .net.tip::after { display: none !important; }
.netsbtn .nets { pointer-events: none; }
/* request in progress */
tr.is-revealing .cchip, tr.is-revealing .netsbtn { cursor: progress; }
tr.is-revealing .cchip__eye { animation: acc-pulse .8s ease-in-out infinite; }
@keyframes acc-pulse { 50% { opacity: .2; } }

/* ---------- opened contacts: real links ---------- */
.copen { display: inline-flex; align-items: flex-start; gap: 5px; max-width: 100%; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.copen svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--brand); }
.copen:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.copen--tel { font-family: var(--mono); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
a.net { text-decoration: none; }
a.net:hover { filter: brightness(1.12); }
tr.is-open td { background-color: #F5FAF7; }
tr.is-open .who small.opened { display: block; margin-top: 5px; }
tr.just-opened td { animation: acc-flash 1.2s ease; }
@keyframes acc-flash { from { background-color: var(--brand-tint); } }

/* ---------- sample paging ---------- */
.sample .tablescroll { transition: opacity .15s ease; }
.sample.is-loading .tablescroll { opacity: .45; pointer-events: none; }
.sample.is-loading { position: relative; }
.sample.is-loading::after { content: ""; position: absolute; left: 50%; top: 120px; width: 28px; height: 28px; margin-left: -14px;
  border: 3px solid var(--brand-tint); border-top-color: var(--brand); border-radius: 50%; animation: acc-spin .7s linear infinite; }
@keyframes acc-spin { to { transform: rotate(360deg); } }
.spager { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line-2); }
.spager[hidden], .spager__end[hidden] { display: none; }
.spager__info { font: 500 12.5px var(--mono); color: var(--muted); white-space: nowrap; }
.spager__list { flex-wrap: wrap; justify-content: flex-end; }
.spager__list button, .spager__list span {
  min-width: 36px; height: 36px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13.5px; font-weight: 600; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
}
.spager__list button:hover { border-color: var(--ink); }
.spager__list button:disabled { opacity: .4; cursor: default; }
.spager__list .is-current { background: var(--brand); border-color: var(--brand); color: var(--brand-on); cursor: default; }
.spager__list .gap { border: 0; background: none; color: var(--muted); min-width: 16px; padding: 0; cursor: default; }
.spager__list svg { width: 15px; height: 15px; }
.spager__more { display: none; }
.spager__end { display: flex; align-items: center; gap: 14px; padding: 14px; border-top: 1px solid var(--line-2); background: var(--brand-tint); }
.spager__end .tile-ic { background: #fff; }
.spager__end-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.spager__end-t b { color: var(--ink); font-size: 14.5px; }
.spager__end .btn { flex: none; }
@media (max-width: 640px) {
  .spager__list { display: none; }
  .spager__more { display: inline-flex; width: 100%; justify-content: center; }
  .spager__info { order: 2; width: 100%; text-align: center; }
  .spager__end { flex-wrap: wrap; }
  .spager__end .btn { width: 100%; justify-content: center; }
}
.table__foot .lockline svg { color: var(--brand); }

/* ---------- reveal modals ---------- */
.revealm { max-width: 520px; }
.revealm .modal__body p + p { margin-top: 10px; }
.revealm__buy { margin-top: 4px; color: var(--muted); }
.revealm__buy a { color: var(--brand-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- log in and sign up ---------- */
.authwrap { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 360px); gap: 32px; justify-content: center; align-items: start; }
@media (max-width: 900px) { .authwrap { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; } }
.authform { gap: 18px; }
.authform__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.authform__link { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.authform__alt { font-size: 14px; color: var(--ink-soft); text-align: center; }
.authform__alt a { color: var(--brand-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.authform .alert a { color: inherit; font-weight: 700; text-decoration: underline; }
.pwd .input { border-right: 0; }
.pwd__eye { cursor: pointer; padding: 0 12px; background: #fff; color: var(--muted); }
.pwd__eye:hover, .pwd__eye.is-on { color: var(--brand); }
.pwd__eye svg { width: 17px; height: 17px; }
.pwd:focus-within .input, .pwd:focus-within .pwd__eye { border-color: var(--brand); }
.hp { position: absolute; left: -10000px; top: auto; }
.check.is-error .check__box { border-color: var(--danger); }

/* ---------- my account: orders and files (resources/views/cabinet/*) ---------- */
.cab { min-width: 0; }
.cabme { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 320px) auto; align-items: center; gap: 14px 22px; }
.cabme__ic { display: grid; place-items: center; width: 48px; height: 48px; background: var(--brand-tint); color: var(--brand-ink); }
.cabme__ic svg { width: 22px; height: 22px; }
.cabme__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cabme__who b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabme__who small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabme__used { display: flex; flex-direction: column; gap: 6px; font-size: 14px; min-width: 0; }
.cabme__used b { font-variant-numeric: tabular-nums; }
.cabme__used small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.cabme__out { margin: 0; }
@media (max-width: 860px) {
  .cabme { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cabme__used { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 420px) { .cabme__out .btn { padding-left: 10px; padding-right: 10px; } }

.cablist { display: grid; gap: 10px; }
.cabrow { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto minmax(0, 240px) 18px; align-items: center; gap: 10px 20px; padding: 16px 18px; color: inherit; text-decoration: none; }
.cabrow:hover { border-color: var(--brand); }
.cabrow__no { display: flex; flex-direction: column; gap: 3px; }
.cabrow__no small, .cabrow__items small { font-size: 12.5px; color: var(--muted); }
.cabrow__items { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; font-weight: 600; }
.cabrow__items > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.cabrow__items small { font-weight: 500; }
.cabrow__st { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.cabrow__go svg { width: 16px; height: 16px; color: var(--muted); }
@media (max-width: 860px) {
  .cabrow { grid-template-columns: minmax(0, 1fr) auto; }
  .cabrow__items { grid-column: 1 / -1; grid-row: 2; }
  .cabrow__st { grid-column: 1 / -1; justify-content: flex-start; }
  .cabrow__go { display: none; }
}

.cabhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.cabitems { display: grid; gap: 14px; }
.cabitem__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 18px; }
.cabitem__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.cabitem__t b { font-size: 16px; }
.cabitem__t small { font-size: 13px; color: var(--muted); }
.cabitem__files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cabitem__size { margin-left: 4px; font-weight: 500; opacity: .78; font-variant-numeric: tabular-nums; }
.cabitem__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
.cabitem__facts span { display: inline-flex; align-items: center; gap: 6px; }
.cabitem__facts svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.cabitem__wait { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.cabitem__wait svg { width: 16px; height: 16px; flex: none; }
.cabitem__wait--err { color: var(--danger); }
.cabitem__wait--muted { color: var(--muted); }
.cabsum { margin-top: 12px; font-size: 13px; }
.cabsum summary { cursor: pointer; color: var(--muted); width: max-content; max-width: 100%; }
.cabsum summary:hover { color: var(--ink); }
.cabsum__dl { display: grid; gap: 2px 0; margin-top: 8px; }
.cabsum__dl dt { color: var(--ink-soft); overflow-wrap: anywhere; margin-top: 6px; }
.cabsum__dl dd { margin: 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; word-break: break-all; }
.cabspin { display: inline-block; width: 16px; height: 16px; flex: none; margin-top: 1px; border: 2px solid var(--brand); border-right-color: transparent; animation: spin .7s linear infinite; }
.cabinfo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .cabinfo { grid-template-columns: minmax(0, 1fr); } }
.cabinfo .dl { grid-template-columns: max-content minmax(0, 1fr); }
.cabinfo .dl dd { overflow-wrap: anywhere; }
@media (max-width: 420px) { .cabinfo .dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .cabinfo .dl dd { margin-bottom: 8px; } }
.cabcons { display: grid; gap: 10px; font-size: 14px; }
.cabcons li { display: flex; gap: 9px; align-items: flex-start; }
.cabcons svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--muted); }
.cabcons li.is-on svg { color: var(--ok, #1F8A5B); }
.cabcons a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- checkout: the log-in step for a guest and the test-mode notice ---------- */
.cogate { display: flex; flex-direction: column; gap: 14px; }
.cogate__ic { display: grid; place-items: center; width: 52px; height: 52px; background: var(--brand-tint); color: var(--brand-ink); }
.cogate__ic svg { width: 24px; height: 24px; }
.cogate h2 { font-size: 22px; letter-spacing: -0.02em; }
.cogate p { color: var(--ink-soft); }
.cogate__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cogate__list { display: grid; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.cogate__list li { display: flex; gap: 8px; align-items: flex-start; }
.cogate__list svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ok, #1F8A5B); }
.cotest { border: 1px dashed var(--warn); }
/* artículo del pedido: ruta del territorio («España › Madrid») y tres números (tiendas, e-mails y teléfonos únicos) */
.cabitem__path { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cabitem__t small.cabitem__nums { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cabitem__main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }

/* Administración: ficha del pedido (enlace de pago, estado, cliente, nota) */
.admorder__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 820px) { .admorder__grid { grid-template-columns: minmax(0, 1fr); } }
.admorder__item + .admorder__item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, #E3E8EF); }
.admorder .input, .admorder .textarea { width: 100%; }
.admorder form .text-xs { overflow-wrap: anywhere; }
.cabpay .btn { white-space: normal; }