/* ==========================================================================
   ARREGLAMIHOGAR — Área de clientes (octubre de 2026)

   La cuenta de cada cliente y el panel de la empresa. Las páginas las pinta
   PHP (area-clientes/) dentro del marco de la web, así que heredan base,
   components y layout; aquí va solo lo propio.

   Todo empieza por «ac-». Ver area-clientes/inc/piezas.php.
   ========================================================================== */

/* --- Lo general ------------------------------------------------------------ */

.ac-corona { padding-block: clamp(2.75rem, 1.7rem + 4.2vw, 5.25rem); }
.ac-corona .crown__title { margin-top: var(--s-3); }

.ac-bay { padding-block: clamp(2rem, 1.2rem + 3.2vw, 4rem) clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem); }

.ac-estrecho { max-width: calc(34rem + 2 * var(--edge)); }

.ac-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  color: var(--ink-900);
}

.ac-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.25;
  color: var(--ink-900);
}

.ac-h4 {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--wine-700);
}

.ac-suave { color: var(--text-soft); }
.ac-suave strong { color: var(--ink-900); font-weight: 600; }

.ac-vacio { color: var(--text-mute); font-size: var(--t-sm); }

.ac-ico {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--brass-700);
}

.ac-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ac-botones { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Un botón que se lee como un enlace: para «mandarme otro código» o
   «cerrar sesión», que son envíos pero no la acción principal. */
.ac-enlace {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--wine-600);
  text-decoration: underline;
  text-decoration-color: var(--brass-400);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  cursor: pointer;
  transition: color var(--t-fast) var(--out-quart), text-decoration-color var(--t-fast) var(--out-quart);
}
.ac-enlace:hover { color: var(--wine-800); text-decoration-color: var(--brass-600); }
.ac-enlace--suave { font-weight: 400; color: var(--text-mute); }
.ac-enlace--mal { color: var(--wine-500); font-weight: 500; }
.ac-enlace--claro { color: var(--stone-200); text-decoration-color: oklch(0.885 0.044 82 / 0.5); }
.ac-enlace--claro:hover { color: var(--stone-50); }

.ac-en-linea { display: inline; }

/* --- Avisos ---------------------------------------------------------------- */

.ac-aviso {
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-left: 3px solid var(--brass-500);
  border-radius: var(--r-sm);
  box-shadow: var(--lift-1);
  animation: acAviso 360ms var(--out-expo) both;
}
.ac-aviso--mal { border-left-color: var(--wine-500); background: var(--wine-100); }
.ac-aviso a { color: var(--wine-600); font-weight: 600; }
.ac-aviso strong { font-weight: 600; }

@keyframes acAviso {
  from { opacity: 0; transform: translateY(-6px); }
}

/* --- Entrar ---------------------------------------------------------------- */

.ac-entrada {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}

@media (min-width: 940px) {
  .ac-entrada { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-9); }
  .ac-entrada .ac-tarjeta-form { position: sticky; top: calc(var(--head-h) + var(--s-5)); }
}

.ac-entrada__texto .ac-h2 { margin-bottom: var(--s-5); }

.ac-ventajas { list-style: none; padding: 0; }

.ac-ventaja {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--hairline-soft);
}
.ac-ventaja:last-child { border-bottom: 1px solid var(--hairline-soft); }
.ac-ventaja .ac-ico { margin-top: 0.1rem; }
.ac-ventaja strong { display: block; font-weight: 600; color: var(--ink-900); }
.ac-ventaja span span { display: block; margin-top: 0.2rem; color: var(--text-soft); font-size: var(--t-sm); }

.ac-tarjeta-form { gap: var(--s-5); }

.ac-form-cab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.ac-form-cab > .ac-ico {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.65rem;
  background: var(--stone-100);
  border: 1px solid var(--hairline-soft);
  border-radius: 50%;
}
.ac-form-cab .ac-suave { margin-top: var(--s-2); font-size: var(--t-sm); }

/* El código: grande, separado y con las cifras del mismo ancho, para leerlo
   del correo y copiarlo sin perderse. */
.ac-codigo {
  font-size: var(--t-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.42em;
  text-align: center;
  padding-block: 0.8rem;
}
.ac-codigo::placeholder { letter-spacing: 0.42em; }

.ac-otra {
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  color: var(--text-soft);
  text-align: center;
}
.ac-otra p { margin-bottom: var(--s-2); }
.ac-otra > span { margin-inline: var(--s-2); color: var(--text-mute); }

.ac-regalo {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: oklch(0.885 0.044 82 / 0.28);
  border: 1px solid oklch(0.720 0.078 78 / 0.45);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--ink-800);
}
.ac-regalo strong { font-weight: 600; color: var(--wine-700); }

/* --- La cuenta ------------------------------------------------------------- */

.ac-seccion + .ac-seccion,
.ac-seccion + .ac-datos { margin-top: clamp(3rem, 2.2rem + 3vw, 4.5rem); }
.ac-seccion > .ac-h2 { margin-bottom: var(--s-5); }

.ac-obras { display: grid; gap: var(--s-5); }

.ac-obra {
  display: grid;
  gap: var(--s-5) var(--s-7);
  padding: clamp(1.25rem, 0.6rem + 2.6vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  box-shadow: var(--lift-2);
}

@media (min-width: 900px) {
  .ac-obra { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
  .ac-obra__cab { grid-column: 1 / -1; }
  .ac-obra--sueltos .ac-docs { grid-column: 1 / -1; }
}

.ac-obra__plan {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-700);
}
.ac-obra__tit {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.2;
  color: var(--ink-900);
}
.ac-obra__dir { margin-top: var(--s-2); color: var(--text-mute); font-size: var(--t-sm); }
.ac-obra__docs .ac-h4 { margin-bottom: var(--s-3); }

/* La garantía: las dos fechas, una barra con lo que ha corrido y lo que
   queda dicho en palabras. */
.ac-garantia {
  padding: var(--s-5);
  background: var(--stone-100);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
}

.ac-garantia__fechas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.ac-garantia__fechas p:last-child { text-align: right; }
.ac-garantia__fechas span {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}
.ac-garantia__fechas strong {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-md);
  line-height: 1.25;
  color: var(--ink-900);
}

.ac-garantia__barra {
  height: 6px;
  margin-top: var(--s-4);
  background: var(--stone-300);
  border-radius: 3px;
  overflow: hidden;
}
.ac-garantia__barra span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brass-500), var(--brass-700));
  transform-origin: left center;
  transform: scaleX(var(--hecho, 0));
  animation: acBarra 900ms var(--out-expo) both;
}

@keyframes acBarra {
  from { transform: scaleX(0); }
}

.ac-garantia__estado {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  margin-top: var(--s-4);
  color: var(--text-soft);
}
.ac-garantia__estado .ac-ico { width: 1.25rem; height: 1.25rem; }
.ac-garantia__estado strong { font-weight: 600; color: var(--ink-900); }
.ac-garantia__nota { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--text-mute); }

.ac-garantia--espera .ac-garantia__estado { margin-top: 0; }
.ac-garantia--vencida .ac-garantia__barra span { background: var(--ink-400); }
.ac-garantia--vencida .ac-garantia__estado .ac-ico { color: var(--ink-400); }

/* Los documentos. */
.ac-docs { list-style: none; padding: 0; display: grid; gap: var(--s-3); }

.ac-doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--out-quart), box-shadow var(--t-mid) var(--out-quart);
}
.ac-doc:hover { border-color: var(--brass-400); box-shadow: var(--lift-1); }

.ac-doc__tapa {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 3.25rem;
  background: var(--stone-100);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
}
.ac-doc__tapa .ac-ico { width: 1.35rem; height: 1.35rem; }

/* El Pasaporte con su tapa de siempre: burdeos y el sello en latón. */
.ac-doc--pasaporte { border-color: oklch(0.720 0.078 78 / 0.55); background: linear-gradient(100deg, oklch(0.885 0.044 82 / 0.22), var(--surface) 60%); }
.ac-doc--pasaporte .ac-doc__tapa {
  background: linear-gradient(160deg, var(--wine-700), var(--wine-900));
  border-color: var(--wine-800);
  box-shadow: inset 0 0 0 3px var(--wine-800), inset 0 0 0 4px oklch(0.720 0.078 78 / 0.55);
}
.ac-doc--pasaporte .ac-doc__tapa .ac-ico { color: var(--brass-400); }

.ac-doc--pendiente { border-style: dashed; background: transparent; }
.ac-doc--pendiente:hover { border-color: var(--hairline); box-shadow: none; }
.ac-doc--pendiente .ac-doc__tit { color: var(--text-soft); }
.ac-doc--pendiente .ac-doc__tapa { opacity: 0.6; }

.ac-doc__txt { min-width: 0; }
.ac-doc__tit { display: block; font-weight: 600; color: var(--ink-900); overflow-wrap: anywhere; }
.ac-doc__meta { display: block; margin-top: 0.15rem; font-size: var(--t-xs); color: var(--text-mute); }

.ac-doc__acts { display: flex; gap: var(--s-2); align-items: center; }

.ac-doc__baja {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--wine-600);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  transition: border-color var(--t-fast) var(--out-quart), color var(--t-fast) var(--out-quart);
}
.ac-doc__baja:hover { border-color: var(--brass-500); color: var(--wine-800); }
.ac-doc__baja .ac-ico { width: 1.15rem; height: 1.15rem; color: currentColor; }

@media (max-width: 520px) {
  .ac-doc { grid-template-columns: auto minmax(0, 1fr); }
  .ac-doc__acts { grid-column: 1 / -1; justify-content: flex-end; }
}

/* --- Ventajas: el ticket y el saldo --------------------------------------- */

.ac-ventajas-rejilla { display: grid; gap: var(--s-5); align-items: start; }

@media (min-width: 900px) {
  .ac-ventajas-rejilla { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.ac-tickets { display: grid; gap: var(--s-5); }

/* El ticket, recortado como un vale: la cara con el importe y el talón con
   el código, separados por una línea de puntos con dos muescas. */
.ac-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "cara talon" "cond cond";
  filter: drop-shadow(0 14px 30px oklch(0.185 0.055 18 / 0.16));
}

.ac-ticket__cara,
.ac-ticket__talon {
  position: relative;
  padding: clamp(1.25rem, 0.8rem + 1.8vw, 1.9rem);
  color: var(--stone-200);
  background:
    radial-gradient(120% 140% at 0% 0%, oklch(0.395 0.125 20 / 0.55), transparent 60%),
    var(--wine-800);
}

/* Las muescas son recortes de verdad (mask), no círculos pintados del color
   del fondo: así la sombra del vale las rodea y se ven sobre cualquier fondo,
   también el blanco de la ficha del panel. Cada mitad lleva media muesca en
   sus dos esquinas de la línea de puntos. */
.ac-ticket__cara {
  grid-area: cara;
  border-radius: var(--r-md) 0 0 var(--r-md);
  --muesca:
    radial-gradient(circle at 100% 0, #0000 0.8rem, #000 calc(0.8rem + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 0.8rem, #000 calc(0.8rem + 0.5px)) bottom / 100% 51% no-repeat;
  -webkit-mask: var(--muesca);
  mask: var(--muesca);
}

.ac-ticket__talon {
  grid-area: talon;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  border-left: 2px dashed oklch(0.810 0.062 80 / 0.45);
  background: var(--wine-800);
  --muesca:
    radial-gradient(circle at 0 0, #0000 0.8rem, #000 calc(0.8rem + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 0.8rem, #000 calc(0.8rem + 0.5px)) bottom / 100% 51% no-repeat;
  -webkit-mask: var(--muesca);
  mask: var(--muesca);
}

.ac-ticket__tit {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--brass-400);
}
.ac-ticket__imp {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  line-height: 1;
  color: var(--stone-50);
  font-variant-numeric: lining-nums;
}
.ac-ticket__para { margin-top: var(--s-2); color: var(--stone-300); font-size: var(--t-sm); }

.ac-ticket__lbl {
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--stone-400);
}
.ac-ticket__cod {
  margin-top: var(--s-2);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--brass-300);
  font-variant-numeric: tabular-nums;
  user-select: all;
  white-space: nowrap;
}
.ac-ticket__est { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--stone-300); }

.ac-ticket__cond {
  grid-area: cond;
  margin-top: var(--s-3);
  padding-inline: var(--s-2);
  font-size: var(--t-xs);
  color: var(--text-mute);
}

/* Usado o caducado: el mismo vale, apagado y con su sello. */
.ac-ticket--usado,
.ac-ticket--caducado { filter: none; }
.ac-ticket--usado .ac-ticket__cara,
.ac-ticket--usado .ac-ticket__talon,
.ac-ticket--caducado .ac-ticket__cara,
.ac-ticket--caducado .ac-ticket__talon {
  background: var(--stone-200);
  color: var(--ink-500);
  border-left-color: var(--stone-400);
}
.ac-ticket--usado .ac-ticket__cara,
.ac-ticket--caducado .ac-ticket__cara { border-left: 0; }
.ac-ticket--usado .ac-ticket__imp,
.ac-ticket--caducado .ac-ticket__imp { color: var(--ink-500); text-decoration: line-through; text-decoration-thickness: 2px; }
.ac-ticket--usado :is(.ac-ticket__tit, .ac-ticket__cod, .ac-ticket__para, .ac-ticket__lbl, .ac-ticket__est),
.ac-ticket--caducado :is(.ac-ticket__tit, .ac-ticket__cod, .ac-ticket__para, .ac-ticket__lbl, .ac-ticket__est) { color: var(--ink-500); }

.ac-ticket__sello {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  padding: 0.2rem 0.55rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--wine-500);
  border: 2px solid currentColor;
  border-radius: var(--r-sm);
  transform: rotate(-7deg);
}

/* Estrecho, el talón pasa debajo. Se mide la caja del ticket y no la
   pantalla: en la ficha del panel va en una columna de 330 px aunque la
   pantalla sea de escritorio, y ahí el código se partía en dos. */
.ac-tickets,
.ac-g-ticket { container-type: inline-size; }

@container (max-width: 30rem) {
  .ac-ticket { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cara" "talon" "cond"; }
  .ac-ticket__cara {
    border-radius: var(--r-md) var(--r-md) 0 0;
    --muesca:
      radial-gradient(circle at 0 100%, #0000 0.8rem, #000 calc(0.8rem + 0.5px)) left / 51% 100% no-repeat,
      radial-gradient(circle at 100% 100%, #0000 0.8rem, #000 calc(0.8rem + 0.5px)) right / 51% 100% no-repeat;
  }
  .ac-ticket__talon {
    border-radius: 0 0 var(--r-md) var(--r-md);
    border-left: 0;
    border-top: 2px dashed oklch(0.810 0.062 80 / 0.45);
    --muesca:
      radial-gradient(circle at 0 0, #0000 0.8rem, #000 calc(0.8rem + 0.5px)) left / 51% 100% no-repeat,
      radial-gradient(circle at 100% 0, #0000 0.8rem, #000 calc(0.8rem + 0.5px)) right / 51% 100% no-repeat;
  }
  .ac-ticket--usado .ac-ticket__talon,
  .ac-ticket--caducado .ac-ticket__talon { border-top-color: var(--stone-400); }
}

/* El saldo de la tienda. */
.ac-saldo {
  padding: clamp(1.25rem, 0.8rem + 1.8vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  box-shadow: var(--lift-2);
}
.ac-saldo__lbl {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--wine-700);
}
.ac-saldo__lbl .ac-ico { width: 1.25rem; height: 1.25rem; }
.ac-saldo__cifra {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  line-height: 1.05;
  color: var(--wine-700);
  font-variant-numeric: lining-nums;
}
.ac-saldo__txt { margin-top: var(--s-3); color: var(--text-soft); font-size: var(--t-sm); }
.ac-saldo .ac-vacio { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline-soft); }

.ac-movs { list-style: none; padding: 0; margin-top: var(--s-4); border-top: 1px solid var(--hairline-soft); }
.ac-mov {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--s-3);
  align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--hairline-soft);
  font-size: var(--t-sm);
}
.ac-mov__fecha { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.ac-mov__que { color: var(--ink-800); min-width: 0; }
.ac-mov__det { display: block; font-size: var(--t-xs); color: var(--text-mute); }
.ac-mov__cifra { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brass-700); white-space: nowrap; }
.ac-mov--canje .ac-mov__cifra { color: var(--wine-600); }

/* Sin obra todavía: lo que va a haber aquí. */
.ac-futuro {
  padding: clamp(1.5rem, 0.9rem + 2.6vw, 2.5rem);
  background: var(--stone-100);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
}
.ac-futuro__lista {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-5);
  margin-block: var(--s-5) var(--s-6);
}
@media (min-width: 760px) {
  .ac-futuro__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ac-futuro__lista li { display: grid; gap: var(--s-3); align-content: start; }
.ac-futuro__lista .ac-ico { width: 1.75rem; height: 1.75rem; }
.ac-futuro__lista strong { display: block; margin-bottom: 0.25rem; font-weight: 600; color: var(--ink-900); }
.ac-futuro__lista span { color: var(--text-soft); font-size: var(--t-sm); }

/* Los datos. */
.ac-datos { padding-top: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem); border-top: 1px solid var(--hairline); }
.ac-datos > .ac-h2 { margin-bottom: var(--s-5); }
.ac-datos__form { max-width: 46rem; }
.ac-fijo { padding-block: 0.4rem; color: var(--ink-900); }
.ac-fijo span { display: block; margin-top: 0.2rem; font-size: var(--t-xs); color: var(--text-mute); }
.ac-fijo a { color: var(--wine-600); }
.ac-datos__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: center;
  margin-top: var(--s-7);
}
.ac-nota-baja { font-size: var(--t-sm); color: var(--wine-600); }

/* ==========================================================================
   El panel de la empresa
   ========================================================================== */

/* Sin la barra de llamar ni el botón de WhatsApp: en el panel estorban. */
.ac-gestion .atajo,
.ac-gestion .wa-dot { display: none !important; }

.ac-g-barra { background: var(--wine-900); color: var(--stone-200); }
.ac-g-barra__in {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  align-items: center;
  padding-block: var(--s-4);
}
.ac-g-barra__tit { font-family: var(--font-display); font-size: var(--t-md); line-height: 1.15; color: var(--stone-50); }
.ac-g-barra__tit span {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-text);
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-400);
}

.ac-g-web {
  font-size: var(--t-xs);
  color: var(--stone-400);
  text-decoration: underline;
  text-decoration-color: oklch(0.885 0.044 82 / 0.35);
  text-underline-offset: 0.22em;
}
.ac-g-web:hover { color: var(--stone-50); }

.ac-g-menu { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); flex: 1 1 auto; }
.ac-g-menu__a {
  padding-block: 0.3rem;
  font-size: var(--t-sm);
  color: var(--stone-300);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--out-quart), border-color var(--t-fast) var(--out-quart);
}
.ac-g-menu__a:hover { color: var(--stone-50); }
.ac-g-menu__a[aria-current="page"] { color: var(--stone-50); border-bottom-color: var(--brass-400); }

.ac-g-salir { display: flex; gap: var(--s-3); align-items: center; font-size: var(--t-sm); }
.ac-g-quien { color: var(--stone-400); font-size: var(--t-xs); }

.ac-g-cuerpo { padding-block: clamp(1.75rem, 1.2rem + 2.2vw, 3rem) clamp(3rem, 2rem + 4vw, 5.5rem); }

.ac-g-intro { max-width: 60ch; margin-bottom: var(--s-6); }

.ac-g-cab {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  margin-bottom: var(--s-5);
}
.ac-g-cab > .ac-h2 { margin-right: auto; }
.ac-g-cab--sec { margin-bottom: var(--s-4); }

.ac-g-busca { display: flex; gap: var(--s-2); flex: 1 1 22rem; max-width: 34rem; }
.ac-g-busca .f__in { padding-block: 0.6rem; }

.ac-g-cifras {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}
.ac-g-cifras li {
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
}
.ac-g-cifras span {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}
.ac-g-cifras strong {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-xl);
  color: var(--ink-900);
}
.ac-g-cifras em { font-style: normal; font-size: var(--t-sm); color: var(--text-soft); }

/* La lista de clientes: una fila por cuenta, que entera es el enlace. */
.ac-g-lista { list-style: none; padding: 0; border-top: 1px solid var(--hairline); }
.ac-g-lista > li { border-bottom: 1px solid var(--hairline); }
.ac-g-lista > .ac-vacio { padding-block: var(--s-5); }

.ac-g-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-5);
  align-items: center;
  padding: var(--s-4) var(--s-3);
  color: inherit;
  transition: background-color var(--t-fast) var(--out-quart);
}
.ac-g-fila:hover { background: var(--surface); }
.ac-g-fila__quien { grid-column: 1; min-width: 0; }
.ac-g-fila__quien strong { font-weight: 600; color: var(--ink-900); margin-right: var(--s-2); }
.ac-g-fila__quien > span:last-child { display: block; margin-top: 0.15rem; font-size: var(--t-sm); color: var(--text-mute); overflow-wrap: anywhere; }
.ac-g-fila__dato { display: none; font-size: var(--t-sm); color: var(--ink-800); font-variant-numeric: tabular-nums; }
.ac-g-fila__dato span {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}
.ac-g-fila__ir { grid-column: 2; grid-row: 1; width: 1.1rem; height: 1.1rem; color: var(--brass-700); }

@media (min-width: 820px) {
  .ac-g-fila { grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(0, 1fr)) auto; }
  .ac-g-fila__dato { display: block; }
  .ac-g-fila__ir { grid-column: auto; grid-row: auto; }
}

.ac-chapa {
  display: inline-block;
  margin-right: var(--s-2);
  padding: 0.1rem 0.5rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-700);
  background: var(--stone-200);
  border-radius: 999px;
  vertical-align: 0.1em;
}
.ac-chapa--mal { color: var(--wine-700); background: var(--wine-100); }

/* La ficha de un cliente: obras a la izquierda; tickets, tienda y datos al
   lado. En el móvil, todo seguido. */
.ac-g-volver { margin-bottom: var(--s-4); font-size: var(--t-sm); }
.ac-g-volver a { color: var(--wine-600); }
.ac-g-ficha-cab { margin-bottom: var(--s-7); }
.ac-g-ficha-cab .ac-h2 { margin-bottom: var(--s-2); }
.ac-g-ficha-cab .ac-chapa { margin-bottom: var(--s-2); }
.ac-g-ficha-cab a { color: var(--wine-600); }

.ac-g-ficha { display: grid; gap: var(--s-8); align-items: start; }

@media (min-width: 1120px) {
  .ac-g-ficha { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s-7); }
  .ac-g-ficha .ac-obra { grid-template-columns: minmax(0, 1fr); }
}

.ac-g-ficha__lado > .ac-seccion + .ac-seccion { margin-top: var(--s-7); }
.ac-g-ficha__main > .ac-seccion + .ac-seccion { margin-top: var(--s-7); }
.ac-g-ficha .ac-obra + .ac-obra { margin-top: var(--s-5); }
.ac-g-ficha .ac-ticket__imp { font-size: var(--t-3xl); }

.ac-g-notas {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-700);
  background: oklch(0.885 0.044 82 / 0.22);
  border-radius: var(--r-sm);
}

/* Los formularios del panel van plegados: la ficha se lee primero y se
   edita después. */
.ac-g-plegable { margin-top: var(--s-4); }
.ac-g-plegable > summary {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--wine-600);
  cursor: pointer;
  list-style: none;
}
.ac-g-plegable > summary::-webkit-details-marker { display: none; }
.ac-g-plegable > summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--brass-700);
  border: 1px solid var(--brass-400);
  border-radius: 50%;
  transition: transform var(--t-mid) var(--out-expo);
}
.ac-g-plegable[open] > summary::before { transform: rotate(45deg); }

.ac-g-plegable--caja {
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-md);
}
.ac-g-plegable--caja[open] { border-style: solid; }

.ac-g-form-in { margin-top: var(--s-4); }
.ac-g-form-in .f__in { padding-block: 0.7rem; }
.ac-g-form { max-width: 48rem; }

.ac-archivo { padding-block: 0.65rem; }
.ac-archivo::file-selector-button {
  margin-right: var(--s-3);
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--wine-700);
  background: var(--stone-100);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.ac-g-ticket + .ac-g-ticket { margin-top: var(--s-5); }
.ac-g-ticket__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--s-2);
  padding-inline: var(--s-2);
}
.ac-g-ticket__acts .ac-g-plegable { margin-top: 0; flex: 1 1 100%; }
.ac-g-ticket__acts > .ac-en-linea:last-child { margin-left: auto; font-size: var(--t-sm); }

.ac-saldo--g { box-shadow: none; }
.ac-mov .ac-en-linea .ac-enlace { text-decoration: none; font-size: var(--t-md); line-height: 1; }

.ac-g-borrar { margin-top: var(--s-4); text-align: right; font-size: var(--t-sm); }

.ac-g-peligro {
  padding: var(--s-5);
  border: 1px solid var(--wine-200);
  border-radius: var(--r-md);
  background: oklch(0.950 0.016 20 / 0.5);
}
.ac-g-peligro .ac-suave { margin-block: var(--s-3) var(--s-4); font-size: var(--t-sm); }
.ac-g-peligro__form { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; }
.ac-g-peligro__form .f { flex: 1 1 12rem; }
.ac-g-peligro__btn { --btn-fg: var(--wine-600); --btn-edge: var(--wine-200); }

/* El registro. */
.ac-g-reg { list-style: none; padding: 0; border-top: 1px solid var(--hairline); }
.ac-g-reg li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem var(--s-5);
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--hairline-soft);
  font-size: var(--t-sm);
}
.ac-g-reg__cuando { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.ac-g-reg__que a { color: var(--wine-600); }
.ac-g-reg__quien { color: var(--text-mute); font-size: var(--t-xs); }

@media (min-width: 820px) {
  .ac-g-reg li { grid-template-columns: 9.5rem minmax(0, 1fr) auto; align-items: baseline; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-aviso,
  .ac-garantia__barra span { animation: none; }
}