/* Palace Mare — componentes agnósticos (plain CSS, sin framework)
   Requiere mare-tokens.css cargado antes. Clases con prefijo `mare-`.
   Pensado para incrustarse en HTML generado por PHP: usa sólo clases,
   nunca depende de un framework de JS. */

/* ---------- Botones ---------- */
.mare-btn {
  font-family: var(--font-base);
  font-size: var(--font-label-s-size);
  font-weight: var(--font-label-s-weight);
  line-height: 1;
  padding: 11px 22px;
  border-radius: var(--component-button-radius);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 150ms cubic-bezier(0.2,0,0,1), transform 150ms cubic-bezier(0.2,0,0,1);
}
.mare-btn:active { transform: scale(0.95); }
.mare-btn:disabled { cursor: default; opacity: 0.5; }

.mare-btn-primary { background: var(--bg-accent); color: var(--fg-on-accent); }
.mare-btn-primary:hover:not(:disabled) { background: var(--bg-accent-hover); }
.mare-btn-primary:active:not(:disabled) { background: var(--bg-accent-active); }

.mare-btn-secondary { background: transparent; color: var(--fg-accent); border: 1px solid var(--border-strong); }
.mare-btn-secondary:hover:not(:disabled) { background: var(--bg-hover); }

.mare-btn-ghost { background: transparent; color: var(--fg-accent); border: none; padding: 0; font-weight: var(--font-label-s-weight); }

.mare-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--component-icon-button-radius); justify-content: center; background: transparent; color: var(--fg-default); }
.mare-btn-icon:hover { background: var(--bg-hover); }

/* ---------- Inputs ---------- */
.mare-field { display: flex; flex-direction: column; gap: 6px; }
.mare-field label { font-size: var(--font-label-xs-size); font-weight: var(--font-label-xs-weight); color: var(--fg-weak); }
.mare-input, .mare-select {
  font-family: var(--font-base);
  font-size: var(--font-body-s-size);
  padding: 11px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--component-input-radius);
  background: var(--bg-default);
  color: var(--fg-default);
  box-sizing: border-box;
}
.mare-input:focus, .mare-select:focus { outline: none; border-color: var(--border-accent); }
.mare-input::placeholder { color: var(--fg-weak); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mare-search {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border-default); border-radius: var(--component-search-input-radius);
  padding: 10px 10px 10px 18px; background: var(--bg-default);
}
.mare-search input { flex: 1; border: none; outline: none; background: transparent; font-size: var(--font-body-s-size); color: var(--fg-default); }

/* ---------- Cards / contenedores ---------- */
.mare-card {
  border: 1px solid var(--border-default);
  border-radius: var(--component-container-m-radius);
  background: var(--bg-default);
  padding: 20px;
}
.mare-card-sm { border-radius: var(--component-container-s-radius); }

/* ---------- Tags / badges de estado ---------- */
.mare-tag {
  display: inline-flex; align-items: center;
  font-size: var(--font-body-xxs-size);
  font-weight: var(--font-label-xs-weight);
  letter-spacing: 0.6px; text-transform: uppercase;
  border-radius: var(--component-tag-radius);
  padding: 3px 10px;
}
.mare-tag-positive { background: var(--bg-positive-weak); color: var(--fg-positive); }
.mare-tag-neutral  { background: var(--bg-neutral-weak);  color: var(--fg-weak); }
.mare-tag-warning  { background: var(--bg-warning-weak);  color: var(--fg-warning); }
.mare-tag-danger   { background: var(--bg-danger-weak);   color: var(--fg-danger); }

/* ---------- Alertas / banners inline ---------- */
.mare-alert {
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--radius-lg); padding: 12px 16px;
  font-size: var(--font-body-s-size);
}
.mare-alert-info    { background: var(--bg-alternative); color: var(--fg-default); }
.mare-alert-danger  { background: var(--bg-danger-weak); color: var(--fg-danger); font-weight: var(--font-label-s-weight); }
.mare-alert-sticky  { position: sticky; top: 0; z-index: 1; box-shadow: var(--shadow-raised); }

/* ---------- Lista seleccionable (pagos) ---------- */
.mare-list-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 18px; border-top: 1px solid var(--border-default);
  cursor: pointer;
}
.mare-list-row:first-child { border-top: none; }
.mare-list-row.is-selected { background: var(--bg-accent-weak); }
.mare-checkbox {
  width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
}
.mare-checkbox.is-checked { background: var(--bg-accent); border-color: var(--bg-accent); }

/* ---------- Progreso lateral (stepper) ---------- */
.mare-step { display: flex; align-items: center; gap: 12px; min-height: 26px; }
.mare-step-dot {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; border: 1px solid var(--border-default);
  background: var(--bg-default); color: var(--fg-weak);
}
.mare-step-dot.is-active, .mare-step-dot.is-done { background: var(--bg-accent); color: var(--fg-on-accent); border-color: var(--bg-accent); }

/* ---------- Timeline de validación / timbrado ---------- */
.mare-timeline-item { display: flex; gap: 12px; }
.mare-timeline-rail { display: flex; flex-direction: column; align-items: center; width: 20px; flex: 0 0 20px; }
.mare-timeline-line { flex: 1; width: 1px; background: var(--border-default); }
@keyframes mareSpin { to { transform: rotate(360deg); } }
.mare-spin { animation: mareSpin 1s linear infinite; display: inline-block; }

/* ---------- Overline ---------- */
.mare-overline { font-size: var(--font-overline-size); letter-spacing: var(--font-overline-ls); text-transform: uppercase; color: var(--fg-weak); }