/* ==========================================================================
   Design tokens
   Brand colors, elevation scale, motion, touch target, focus ring, row states.
   ========================================================================== */

:root {
  --tblr-font-sans-serif: system-ui, -apple-system, "Segoe UI", sans-serif;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
  --picafresa-primary: #b62f45;
  --picafresa-primary-rgb: 182, 47, 69;
  --picafresa-primary-foreground: #ffffff;
  --picafresa-accent: #f1aeb8;
  --picafresa-accent-rgb: 241, 174, 184;
  --picafresa-accent-foreground: #000000;
  --tblr-primary: var(--picafresa-primary);
  --tblr-primary-rgb: var(--picafresa-primary-rgb);
  --tblr-primary-fg: var(--picafresa-primary-foreground);
  --tblr-primary-darken: #871c2e;
  --tblr-link-color: #871c2e;
  --tblr-link-hover-color: #6f1726;
  --tblr-focus-ring-color: color-mix(in srgb, var(--picafresa-accent) 50%, transparent);
  --app-elevation-1: 0 1px 2px rgb(18 18 23 / .06), 0 1px 3px rgb(18 18 23 / .08);
  --app-elevation-2: 0 4px 12px rgb(18 18 23 / .10);
  --app-elevation-3: 0 12px 32px rgb(18 18 23 / .14);
  --app-motion-duration: 140ms;
  --app-motion-easing: ease-out;
  --app-motion: var(--app-motion-duration) var(--app-motion-easing);
  --app-touch-target: 2.75rem;
  --app-focus-ring: 0 0 0 0.25rem var(--tblr-focus-ring-color);
  /* Interactive rows and menu items: hover, pressed, and current page. */
  --app-hover-bg: color-mix(in srgb, var(--tblr-primary) 6%, transparent);
  --app-pressed-bg: color-mix(in srgb, var(--tblr-primary) 12%, transparent);
  --app-current-bg: color-mix(in srgb, var(--tblr-primary) 12%, transparent);
}

/* ==========================================================================
   Page shells and production forms
   ========================================================================== */

body {
  height: auto;
  min-height: 100%;
  font-family: var(--tblr-font-sans-serif);
}

.app-page {
  display: block;
  padding: 0;
  background: var(--tblr-bg-surface-secondary);
}

.app-auth-page {
  min-height: calc(100vh - 4rem);
}

.auth-shell {
  width: 100%;
}

.account-form-card {
  max-width: 42rem;
}

.dependent-issuance-section {
  scroll-margin-top: 6rem;
}

.production-form-section {
  min-width: 0;
}

.production-form-grid > div {
  min-width: 0;
}

.production-form-grid .form-hint,
.production-form-grid .invalid-feedback {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Afiliado shell
   ========================================================================== */

body[data-application-shell="afiliado"] .btn,
body[data-application-shell="afiliado"] summary {
  min-height: var(--app-touch-target);
}

body[data-application-shell="afiliado"] summary {
  padding-block: 0.75rem;
  cursor: pointer;
  font-weight: 600;
}

body[data-application-shell="afiliado"] .card-header,
body[data-application-shell="afiliado"] .btn-list {
  flex-wrap: wrap;
}

body[data-application-shell="afiliado"] .card-actions {
  margin: 0;
}

body[data-application-shell="afiliado"] .card,
body[data-application-shell="afiliado"] dd,
body[data-application-shell="afiliado"] .btn {
  overflow-wrap: anywhere;
}

body[data-application-shell="afiliado"] h2[id] {
  scroll-margin-top: 6rem;
}

.member-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem 2rem;
  text-align: center;
}

.member-welcome-mark {
  color: var(--picafresa-primary);
}

.member-welcome-mark .app-icon--lg {
  width: 2.25rem;
  height: 2.25rem;
}

.member-welcome .member-welcome-title {
  margin: 0;
  font-size: clamp(2.25rem, 1.75rem + 2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.member-welcome-hello {
  font-weight: 300;
}

.member-welcome-name {
  font-weight: 800;
  color: var(--picafresa-primary);
}

.member-welcome-message {
  margin: 0;
  font-size: 1.15rem;
  color: var(--tblr-secondary-color);
}

.member-welcome-rule {
  width: 3rem;
  height: 3px;
  margin-top: 0.5rem;
  border-radius: 3px;
  background: var(--picafresa-primary);
}

.member-policy-section {
  position: relative;
}

.member-policy-heading-row {
  min-height: var(--app-touch-target);
  padding-inline-end: 7.5rem;
}

.member-policy-filter-toggle > summary {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

.member-policy-filter-toggle > summary::-webkit-details-marker {
  display: none;
}

.member-policy-heading,
.member-contact-copy {
  min-width: 0;
}

/* Not .list-unstyled: it zeroes margin-inline-start and cancels the row gutter. */
.member-policy-card-list {
  padding-inline-start: 0;
  list-style: none;
}

/* Cobertura card reads like an ID card: brand band with Plan and Número de Cobertura,
   then condensed details. Only active Coberturas get the brand color. */
.member-policy-card {
  --member-policy-card-bg: var(--picafresa-primary);
  --member-policy-card-fg: var(--picafresa-primary-foreground);
  overflow: hidden;
  border: 0;
  border-radius: 0.75rem;
  box-shadow: var(--app-elevation-2), var(--app-elevation-1);
}

.member-policy-card--inactive {
  --member-policy-card-bg: var(--tblr-gray-500, #6b7280);
  --member-policy-card-fg: #ffffff;
}

.member-policy-card-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  padding: 1rem 1.25rem 1.125rem;
  color: var(--member-policy-card-fg);
  background: linear-gradient(
    135deg,
    var(--member-policy-card-bg),
    color-mix(in srgb, var(--member-policy-card-bg) 70%, #000000)
  );
}

.member-policy-card-watermark {
  position: absolute;
  top: -0.75rem;
  right: -1rem;
  opacity: 0.15;
  pointer-events: none;
}

.member-policy-card-watermark .app-icon--xl {
  width: 7.5rem;
  height: 7.5rem;
}

.member-policy-card-head > :not(.member-policy-card-watermark) {
  position: relative;
}

.member-policy-card .member-policy-card-title {
  margin: 0;
  color: var(--member-policy-card-fg);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.member-policy-card .member-policy-card-title a,
.member-policy-card .member-policy-card-title a:hover {
  color: var(--member-policy-card-fg);
  text-decoration: none;
}

.member-policy-card .member-policy-card-title a:hover {
  text-decoration: underline;
}

.member-policy-card-head :focus-visible {
  outline-color: var(--member-policy-card-fg);
}

.member-policy-number {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  opacity: 0.95;
}

.member-policy-number .app-copy-button {
  color: var(--member-policy-card-fg);
  border-color: transparent;
  background: transparent;
  margin-block: -0.625rem;
}

.member-policy-number .app-copy-button:hover {
  background: color-mix(in srgb, var(--member-policy-card-fg) 15%, transparent);
}

.member-policy-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1rem;
}

.member-policy-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  width: 100%;
  margin: 0;
  font-size: 0.9375rem;
}

.member-policy-meta > div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.member-policy-meta dt {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--tblr-secondary-color);
}

.member-policy-meta dd {
  margin: 0;
}

.member-policy-meta dd .badge + .badge {
  margin-inline-start: 0.25rem;
}

.member-policy-card .member-policy-card-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--member-policy-card-bg) 15%, var(--tblr-bg-surface));
  background: color-mix(in srgb, var(--member-policy-card-bg) 8%, var(--tblr-bg-surface));
}

.member-policy-card-footer .btn-icon:not(.disabled) {
  background: var(--tblr-bg-surface);
}

.member-policy-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.member-policy-card-certificate {
  display: flex;
  gap: 0.5rem;
}

.member-policy-card-actions .btn {
  min-height: var(--app-touch-target);
}

.member-policy-card-actions .btn-icon {
  min-width: var(--app-touch-target);
}

.member-policy-detail-action {
  margin-inline-start: auto;
  padding-inline: 1.5rem 1.25rem;
}

.member-policy-audience,
.member-policy-recipients {
  min-width: 0;
}

.member-policy-recipients dd {
  overflow-wrap: anywhere;
}

.member-policy-certificate-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem;
}

.member-policy-detail-certificates {
  flex: 1 1 22rem;
  max-width: 28rem;
}

.member-contact-card {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  color: inherit;
  text-decoration: none;
}

a.member-contact-card:hover {
  border-color: var(--tblr-primary);
  color: inherit;
  background: color-mix(in srgb, var(--picafresa-primary) 5%, transparent);
  text-decoration: none;
}

/* ==========================================================================
   Icons (#213)
   components/icon.html paints the vendored SVG as a mask over currentColor.
   ========================================================================== */

.app-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask-image: var(--app-icon-src);
  mask-image: var(--app-icon-src);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@media (forced-colors: active) {
  .app-icon {
    forced-color-adjust: none;
  }
}

.app-icon--xs {
  width: 1rem;
  height: 1rem;
}

.app-icon--sm {
  width: 1.25rem;
  height: 1.25rem;
}

.app-icon--lg {
  width: 2rem;
  height: 2rem;
}

.app-icon--xl {
  width: 3rem;
  height: 3rem;
}

/* ==========================================================================
   Copy button (#212)
   Same touch target as every button; the icon swaps to a check on success.
   ========================================================================== */

.app-copy-button {
  min-width: var(--app-touch-target);
  min-height: var(--app-touch-target);
}

.input-group > .form-control:has(+ .app-copy-button[hidden]) {
  border-start-end-radius: var(--tblr-border-radius);
  border-end-end-radius: var(--tblr-border-radius);
}

/* ==========================================================================
   Afiliado workspace details
   ========================================================================== */

.member-refine {
  margin-bottom: 1.5rem;
}

.member-labels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem 1.5rem;
}

.member-labels dt {
  font-size: 0.875rem;
  color: var(--tblr-secondary-color);
}

.member-labels dd {
  margin: 0.25rem 0 0;
}

.member-timeline {
  padding-left: 1.5rem;
  list-style: none;
  border-left: 2px solid var(--tblr-border-color);
}

.member-timeline > li {
  padding-block: 1rem 1.5rem;
}

.member-timeline > li + li {
  border-top: 1px solid var(--tblr-border-color);
}

/* Keyboard focus outline for links and controls without their own ring. */
.app-auth-page :focus-visible,
.app-page :focus-visible {
  outline: 3px solid var(--tblr-primary);
  outline-offset: 3px;
}

/* ==========================================================================
   Brand header and Heavy theme (#207, #213)
   ========================================================================== */

.design-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.global-brand-artwork {
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.5rem;
  max-width: 3rem;
  margin-right: 0.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--tblr-border-radius);
}

.design-navbar .navbar-brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.global-brand-artwork img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The server plates a standard logo on Heavy brands; the theme attribute also
   decides it, so any Heavy render of a standard logo keeps its contrast, and an
   inverse logo shown on a Light page sits on the brand color. */
.global-brand-artwork-plate,
[data-brand-theme="heavy"] .global-brand-artwork[data-logo-variant="standard"] {
  padding: 0.375rem 0.5rem;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 8%);
}

/* A Business without its own or its Reseller's logo shows its code, like its app icon. */
.global-brand-monogram {
  min-width: 2.5rem;
  max-width: none;
  padding: 0 0.5rem;
  color: var(--picafresa-primary-foreground);
  background: var(--picafresa-primary);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

[data-brand-theme="heavy"] .global-brand-monogram {
  color: var(--picafresa-primary);
  background: var(--picafresa-primary-foreground);
}

.global-brand-preview .global-brand-monogram {
  color: var(--preview-foreground);
  background: var(--preview-primary);
}

.global-brand-preview[data-brand-preview-theme="heavy"] .global-brand-monogram {
  color: var(--preview-primary);
  background: var(--preview-foreground);
}

[data-brand-theme="light"] .global-brand-artwork[data-logo-variant="inverse"] {
  padding: 0.375rem 0.5rem;
  background: var(--picafresa-primary);
}

.global-brand-copy {
  display: grid;
  line-height: 1.1;
}

.global-brand-attribution,
.global-brand-tagline {
  margin-top: 0.2rem;
  color: var(--tblr-secondary-color);
  font-size: 0.6875rem;
  font-weight: 400;
}

@media (min-width: 1400px) {
  .global-brand-artwork {
    height: 2.75rem;
    max-width: 6rem;
  }
}

@media (max-width: 767.98px) {
  .global-brand-artwork {
    height: 2.25rem;
    max-width: 6.5rem;
    margin-right: 0.625rem;
  }
}

body[data-brand-theme="light"] .design-navbar {
  --tblr-navbar-color: var(--tblr-body-color);
}

body[data-brand-theme="light"] .design-navbar .navbar-nav:not(.shell-account-context) .nav-link {
  font-weight: 500;
}

body[data-brand-theme="light"] .design-navbar .nav-link-icon {
  color: var(--tblr-body-color);
}

body[data-brand-theme="heavy"] .design-navbar {
  --tblr-navbar-color: var(--picafresa-primary-foreground);
  --tblr-navbar-hover-color: var(--picafresa-primary-foreground);
  --tblr-navbar-active-color: var(--picafresa-primary-foreground);
  --tblr-navbar-brand-color: var(--picafresa-primary-foreground);
  --tblr-navbar-brand-hover-color: var(--picafresa-primary-foreground);
  --tblr-nav-link-icon-color: currentColor;
  --picafresa-navbar-hover-bg: color-mix(in srgb, var(--picafresa-primary-foreground) 12%, transparent);
  --picafresa-navbar-active-bg: color-mix(in srgb, var(--picafresa-primary-foreground) 20%, transparent);
  color: var(--picafresa-primary-foreground);
  background: var(--picafresa-primary) !important;
}

body[data-brand-theme="heavy"] .design-navbar .navbar-nav .nav-link:hover {
  background: var(--picafresa-navbar-hover-bg);
}

body[data-brand-theme="heavy"] .design-navbar .navbar-nav .nav-link.active,
body[data-brand-theme="heavy"] .design-navbar .navbar-nav .nav-link:active,
body[data-brand-theme="heavy"] .design-navbar .navbar-nav .nav-link.show,
body[data-brand-theme="heavy"] .design-navbar details[open] > summary.nav-link {
  background: var(--picafresa-navbar-active-bg);
}

body[data-brand-theme="heavy"] .design-navbar .navbar-brand:focus-visible,
body[data-brand-theme="heavy"] .design-navbar .navbar-toggler:focus-visible,
body[data-brand-theme="heavy"] .design-navbar .nav-link:focus-visible {
  outline: 3px solid var(--picafresa-primary-foreground);
  outline-offset: 2px;
  box-shadow: none;
}

body[data-brand-theme="heavy"] .design-navbar .navbar-brand,
body[data-brand-theme="heavy"] .design-navbar .nav-link,
body[data-brand-theme="heavy"] .design-navbar .global-brand-attribution,
body[data-brand-theme="heavy"] .design-navbar .global-brand-tagline {
  color: var(--picafresa-primary-foreground);
}

.design-navbar .account-avatar {
  color: var(--picafresa-primary-foreground);
  background: var(--picafresa-primary);
}

.design-navbar .account-meta {
  color: var(--tblr-secondary);
}

body[data-brand-theme="heavy"] .design-navbar .account-avatar {
  color: var(--picafresa-primary);
  background: var(--picafresa-primary-foreground);
}

body[data-brand-theme="heavy"] .design-navbar .account-meta {
  color: var(--picafresa-primary-foreground);
}

/* Title weight is a theme token; a brand preview sets it from its own theme. */
body[data-brand-theme="heavy"],
.global-brand-preview[data-brand-preview-theme="heavy"] {
  --app-title-weight: 700;
}

body[data-brand-theme="light"],
.global-brand-preview[data-brand-preview-theme="light"] {
  --app-title-weight: 400;
}

body[data-brand-theme] .design-navbar .navbar-brand,
body[data-brand-theme] .page-title,
body[data-brand-theme] .card-title {
  font-weight: var(--app-title-weight);
}

/* ==========================================================================
   Brand preview (Branding forms)
   ========================================================================== */

.global-brand-preview {
  overflow: hidden;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  background: var(--tblr-bg-surface);
}

.global-brand-preview-header {
  display: flex;
  min-height: 5rem;
  align-items: center;
  padding: 1rem;
  gap: 0.75rem;
}

.global-brand-preview-header > span:last-child {
  display: grid;
}

.global-brand-preview[data-brand-preview-theme="heavy"] .global-brand-preview-header {
  color: var(--preview-foreground);
  background: var(--preview-primary);
  font-weight: 700;
}

/* A static sample of common elements painted with the previewed brand, not the page's. */
.brand-preview-sample {
  --tblr-primary: var(--preview-primary);
  --tblr-primary-fg: var(--preview-foreground);
  display: grid;
  padding: 1rem;
  gap: 0.75rem;
  border-top: 1px solid var(--tblr-border-color);
  pointer-events: none;
  user-select: none;
}

.brand-preview-sample-label {
  margin: 0;
  color: var(--tblr-secondary-color);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.brand-preview-sample-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.brand-preview-link {
  white-space: nowrap;
  color: var(--preview-text);
  text-decoration: underline;
}

/* The sample card reuses the list card head and meta line; its title follows --app-title-weight. */
.brand-preview-card {
  box-shadow: var(--app-elevation-1);
}

.design-account-nav form {
  margin: 0;
}

.design-noscript-logout {
  margin-left: auto;
}

/* ==========================================================================
   Negocio shell
   ========================================================================== */

body[data-application-shell="negocio"] summary {
  min-height: var(--app-touch-target);
  cursor: pointer;
}

body[data-application-shell="negocio"] details.card > summary::after {
  width: 0.6rem;
  height: 0.6rem;
  margin-left: auto;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

body[data-application-shell="negocio"] details.card[open] > summary::after {
  transform: rotate(225deg);
}

body[data-application-shell="negocio"] .btn,
body[data-application-shell="negocio"] .dropdown-item {
  min-height: var(--app-touch-target);
  white-space: normal;
}

body[data-application-shell="negocio"] .card,
body[data-application-shell="negocio"] .nav-link {
  overflow-wrap: anywhere;
}

.business-policy-meter {
  display: block;
  width: 100%;
  height: 0.625rem;
  border: 0;
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-border-color);
}

.business-policy-meter::-webkit-meter-bar {
  height: 0.625rem;
  border: 0;
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-border-color);
  box-shadow: none;
}

.business-policy-meter::-webkit-meter-optimum-value {
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-primary);
}

.business-policy-meter::-moz-meter-bar {
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-primary);
}

/* Negocio summary header: identity and actions, then a strip of linked counts. */
.app-summary-header {
  overflow: hidden;
  border: 0;
  box-shadow: var(--app-elevation-1);
}

.app-summary-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.5rem 1.75rem;
  color: var(--tblr-white);
  background: var(--tblr-gray-dark);
}

.app-summary-header .page-title {
  color: inherit;
}

.app-summary-header-eyebrow,
.app-summary-header-meta {
  color: rgb(255 255 255 / 0.75);
}

.app-summary-header-identity {
  flex: 1 1 18rem;
  min-width: 0;
}

.app-summary-header-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.app-summary-header-actions .btn {
  justify-content: flex-start;
}

@media (max-width: 575.98px) {
  .app-summary-header-actions {
    width: 100%;
  }
}

.app-summary-header .page-title {
  font-size: 2rem;
}

.card.app-dark-header {
  overflow: hidden;
}

.card.app-dark-header > .card-header {
  color: var(--tblr-white);
  background: var(--tblr-gray-dark);
  border-bottom-color: transparent;
}

.card.app-dark-header > .card-header .card-title {
  color: inherit;
}

.card.app-dark-header > .card-header .card-subtitle {
  color: rgb(255 255 255 / 0.75);
}

.app-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tblr-border-color);
}

.app-summary-strip > li {
  position: relative;
  min-height: var(--app-touch-target);
  padding: 1rem 2.5rem 1rem 1.25rem;
  border-inline-end: 1px solid var(--tblr-border-color);
  transition: background-color var(--app-motion);
}

.app-summary-strip > li:last-child {
  border-inline-end: 0;
}

.app-summary-strip > li:hover {
  background: var(--app-hover-bg);
}

.app-summary-strip > li:active {
  background: var(--app-pressed-bg);
}

.app-summary-strip > li:has(.stretched-link:focus-visible) {
  box-shadow: inset var(--app-focus-ring);
}

.app-summary-strip .stretched-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--tblr-secondary-color);
  font-size: 0.8125rem;
  text-decoration: none;
}

.app-summary-strip .stretched-link:focus-visible {
  outline: 0;
}

.app-summary-value {
  margin: 0.25rem 0 0;
  font-size: 1.625rem;
  font-weight: var(--app-title-weight, 700);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.app-summary-value small {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--tblr-secondary-color);
}

.app-summary-strip .business-policy-meter {
  margin-top: 0.5rem;
}

.app-summary-strip .app-list-chevron {
  position: absolute;
  inset-inline-end: 1rem;
  top: 50%;
  translate: 0 -50%;
}

@media (max-width: 767.98px) {
  .app-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-summary-strip > li:nth-child(2n) {
    border-inline-end: 0;
  }

  .app-summary-strip > li:nth-child(-n + 2) {
    border-bottom: 1px solid var(--tblr-border-color);
  }
}

@media (max-width: 991.98px) {
  body[data-application-shell="negocio"] .design-navbar {
    position: static;
  }
}

/* ==========================================================================
   Design gallery and record lists
   ========================================================================== */

.design-gallery {
  width: 100%;
}

.design-gallery section[id],
.design-gallery article[id] {
  scroll-margin-top: 5rem;
}

.design-gallery form {
  display: block;
}

.design-record {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) minmax(0, 2fr);
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 1rem 0;
}

.design-record + .design-record {
  border-top: 1px solid var(--tblr-border-color);
}

.design-record dt {
  font-weight: 600;
}

.design-record dd {
  margin: 0;
}

/* ==========================================================================
   Póliza list Afiliado line and Reseller Business context
   ========================================================================== */

.policy-list-afiliado {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
}

.policy-list-afiliado dd {
  margin: 0;
}

.policy-list-afiliado dd + dt + dd::before {
  margin-right: 0.375rem;
  content: "·";
}

/* ==========================================================================
   Afiliado "Descargar app" badge (#208)
   A compact store-style badge next to "Mis datos"; on iOS it toggles a small
   popover with the Compartir → Agregar a pantalla de inicio steps.
   ========================================================================== */

.afiliado-app-install {
  position: relative;
  display: inline-flex;
}

.afiliado-app-install[hidden] {
  display: none;
}

.app-store-badge {
  display: inline-flex;
  min-height: var(--app-touch-target);
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem 0.375rem 0.75rem;
  border: 1px solid var(--tblr-dark);
  border-radius: var(--tblr-border-radius-lg);
  color: var(--tblr-light);
  background: var(--tblr-dark);
  box-shadow: var(--app-elevation-1);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow var(--app-motion), transform var(--app-motion);
}

.app-store-badge:hover {
  box-shadow: var(--app-elevation-2);
}

.app-store-badge:active {
  box-shadow: none;
  transform: translateY(1px);
}

.app-store-badge:focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
}

.app-install-popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  z-index: 1020;
  width: min(18rem, calc(100vw - 2rem));
  padding: 0.75rem 1rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-body-color);
  background: var(--tblr-bg-surface);
  box-shadow: var(--app-elevation-3);
  font-size: 0.875rem;
  text-align: left;
  transform: translateX(-50%);
}

.app-install-popover[hidden] {
  display: none;
}

@media (display-mode: standalone) {
  [data-afiliado-app-install] {
    display: none !important;
  }
}

/* ==========================================================================
   Workspace navigation (#213, #214)
   Navbar links stay on one line; "Más tareas" is a native <details> menu that
   opens as an overlay (elevation 3) at lg and inline inside the collapsed
   navbar below lg. Menu rows share the row hover/pressed/current tokens.
   ========================================================================== */

.design-navbar .navbar-nav .nav-link {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Between lg and xl the account avatar alone keeps the full navigation on one line. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .shell-account-context .account-identity {
    display: none;
  }
}

.nav-tasks {
  position: relative;
}

.nav-tasks > summary {
  list-style: none;
  cursor: pointer;
}

.nav-tasks > summary::-webkit-details-marker {
  display: none;
}

.nav-tasks-menu {
  padding: 0.25rem 0;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-body-color);
  background: var(--tblr-bg-surface);
}

.nav-tasks-group + .nav-tasks-group {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--tblr-border-color);
}

.nav-tasks-heading {
  margin: 0;
  padding: 0.5rem 1rem 0.25rem;
  color: var(--tblr-secondary-color);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.nav-tasks-menu .dropdown-item,
.account-menu-list .dropdown-item {
  display: flex;
  min-height: var(--app-touch-target);
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
  color: var(--tblr-body-color);
  white-space: normal;
  transition: background-color var(--app-motion), color var(--app-motion);
}

.nav-tasks-menu .dropdown-item:hover,
.account-menu-list .dropdown-item:hover {
  color: var(--tblr-body-color);
  background: var(--app-hover-bg);
}

.nav-tasks-menu .dropdown-item:active,
.account-menu-list .dropdown-item:active {
  background: var(--app-pressed-bg);
}

.nav-tasks-menu .dropdown-item:focus-visible,
.account-menu-list .dropdown-item:focus-visible {
  outline: 3px solid var(--tblr-primary);
  outline-offset: -3px;
}

.nav-tasks-menu .dropdown-item.active {
  color: var(--tblr-primary);
  font-weight: 600;
  background: var(--app-current-bg);
  box-shadow: inset 3px 0 0 var(--tblr-primary);
}

@media (min-width: 992px) {
  .nav-tasks-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 1030;
    width: 18rem;
    box-shadow: var(--app-elevation-3);
  }
}

/* ==========================================================================
   Buttons and form actions (#209)
   Shared affordance for every shell, on the elevation scale in :root:
   level 1 at rest, level 2 on hover, level 3 for menus and overlays.
   ========================================================================== */

.btn {
  cursor: pointer;
  /* Shell cards wrap long values anywhere; button labels only wrap between words. */
  overflow-wrap: normal;
  /* Icons are flex items, so inter-element whitespace collapses; space them here. */
  column-gap: 0.5rem;
  transition:
    background-color var(--app-motion),
    border-color var(--app-motion),
    box-shadow var(--app-motion),
    transform var(--app-motion);
}

/* Filled buttons (primary and destructive) rest on level 1 and lift on hover. */
.btn-primary,
.btn-danger {
  box-shadow: var(--app-elevation-1);
}

.btn-primary:hover,
.btn-danger:hover {
  box-shadow: var(--app-elevation-2);
}

.btn:active:not(:disabled, .disabled) {
  box-shadow: none;
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
}

.btn:disabled,
.btn.disabled {
  cursor: not-allowed;
  box-shadow: none;
}

/* One action bar per form: primary, then secondary, then Cancelar as a link. */
.form-actions {
  flex-wrap: wrap;
  align-items: center;
}

.form-actions .btn {
  min-height: var(--app-touch-target);
}


@media (max-width: 575.98px) {
  .btn {
    min-height: var(--app-touch-target);
  }

  .form-actions > .btn,
  .form-actions > a.btn {
    flex: 1 1 100%;
    white-space: normal;
  }
}

/* ==========================================================================
   Lists, linked cards and KPIs (#210)
   Compact rows on desktop, cards on mobile. Everything that navigates is one
   stretched link with the shared chevron (components/list_chevron.html, an
   icon that follows currentColor). Rows and list-group links share the
   hover/pressed tokens with the "Más tareas" menu; cards and KPI tiles share
   the elevation scale and focus ring with buttons.
   ========================================================================== */

.app-list > :not(caption) > * > * {
  padding-block: 0.5rem;
}

.app-list td {
  overflow-wrap: break-word;
}

.app-list td.app-list-wide {
  min-width: 16rem;
}

.app-list-id {
  white-space: nowrap;
  font-weight: 600;
}

.app-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.app-list-meta {
  margin: 0;
  color: var(--tblr-secondary-color);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.app-list-row {
  position: relative;
  cursor: pointer;
  transition: background-color var(--app-motion);
}

.app-list-row:hover > *,
.app-list-row:focus-within > * {
  background-color: var(--app-hover-bg);
}

.app-list-row:active > * {
  background-color: var(--app-pressed-bg);
}

.app-list-row :is(a, button, input, label, select, summary):not(.stretched-link),
.app-list-card :is(a, button, input, label, select, summary):not(.stretched-link),
.app-interactive-card :is(a, button, input, label, select, summary):not(.stretched-link) {
  position: relative;
  z-index: 2;
}

.list-group-item-action {
  min-height: var(--app-touch-target);
  transition: background-color var(--app-motion);
}

.list-group-item-action:hover,
.list-group-item-action:focus-visible {
  background-color: var(--app-hover-bg);
}

.list-group-item-action:active {
  background-color: var(--app-pressed-bg);
}

.app-list-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--tblr-secondary-color);
  transition: transform var(--app-motion), color var(--app-motion);
}

.app-list-row:hover .app-list-chevron,
.app-list-card:hover .app-list-chevron,
.app-interactive-card:hover .app-list-chevron,
.list-group-item-action:hover .app-list-chevron {
  color: var(--tblr-primary);
  transform: translateX(2px);
}

.app-list-cards {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-list-card {
  position: relative;
  min-height: var(--app-touch-target);
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
  box-shadow: var(--app-elevation-1);
  overflow-wrap: anywhere;
  transition: box-shadow var(--app-motion), background-color var(--app-motion);
}

.app-list-card:has(.stretched-link) {
  padding-right: 2rem;
  cursor: pointer;
}

.app-list-card:has(.stretched-link):hover,
.app-list-card:has(.stretched-link):focus-within {
  box-shadow: var(--app-elevation-2);
}

.app-list-card:has(.stretched-link):active {
  background: var(--app-pressed-bg);
}

.app-list-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.app-list-card-head > .app-list-chevron {
  position: absolute;
  top: 0.875rem;
  right: 0.5rem;
}

.app-list-card-title {
  margin-right: auto;
  font-weight: 600;
  overflow-wrap: normal;
  word-break: keep-all;
}

.app-list-card-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 0.75rem;
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
}

.app-list-card-fields > div {
  min-width: 0;
}

.app-list-card-fields .app-list-card-wide {
  grid-column: 1 / -1;
}

.app-list-card-fields dt {
  color: var(--tblr-secondary-color);
  font-weight: 400;
}

.app-list-card-fields dd {
  margin: 0;
}

.app-interactive-card {
  position: relative;
  box-shadow: var(--app-elevation-1);
  cursor: pointer;
  transition: box-shadow var(--app-motion), transform var(--app-motion);
}

.app-interactive-card:hover,
.app-interactive-card:focus-within {
  box-shadow: var(--app-elevation-2);
}

.app-interactive-card:has(.stretched-link:focus-visible) {
  box-shadow: var(--app-elevation-2), var(--app-focus-ring);
}

.app-interactive-card:active {
  transform: translateY(1px);
}

.app-kpi {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

a.app-kpi {
  box-shadow: var(--app-elevation-1);
  transition: box-shadow var(--app-motion), transform var(--app-motion);
}

a.app-kpi:hover,
a.app-kpi:focus-visible {
  color: inherit;
  box-shadow: var(--app-elevation-2);
  text-decoration: none;
}

a.app-kpi:focus-visible {
  outline: 0;
  box-shadow: var(--app-elevation-2), var(--app-focus-ring);
}

a.app-kpi:active {
  transform: translateY(1px);
}

a.app-kpi .subheader {
  color: var(--tblr-link-color);
}

.app-kpi:not(a) {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

.app-kpi .h1,
.app-kpi .h2 {
  font-variant-numeric: tabular-nums;
}

/* Rows with explicit actions (forms, inputs) stack into cards below lg without duplicating markup. */
@media (max-width: 991.98px) {
  .app-list-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .app-list-stack,
  .app-list-stack tbody,
  .app-list-stack tr,
  .app-list-stack td {
    display: block;
    width: 100%;
  }

  .app-list-stack tbody {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .app-list-stack tr {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface);
    box-shadow: var(--app-elevation-1);
  }

  .app-list-stack.table > :not(caption) > tr > td {
    padding: 0.25rem 0;
    border: 0;
    box-shadow: none;
  }

  .app-list-stack td[data-label]::before {
    display: block;
    color: var(--tblr-secondary-color);
    font-size: 0.8125rem;
    font-weight: 400;
    content: attr(data-label);
  }

  .app-list-stack .btn {
    min-height: var(--app-touch-target);
  }

  .app-list-stack td.app-num {
    text-align: start;
  }
}

/* ==========================================================================
   Detail pages (#232)
   Key facts lead in one dense datagrid (`dl.datagrid.app-facts`); the related
   collections below are compact `app-list` tables inside their card, each
   with a small heading and an empty line, and stack into cards below lg.
   ========================================================================== */

.app-facts {
  --tblr-datagrid-padding: 0.75rem 1.25rem;
  --tblr-datagrid-item-width: 8.5rem;
  --tblr-datagrid-title-margin-bottom: 0.125rem;
  margin: 0;
}

.app-facts dd {
  margin: 0;
  overflow-wrap: break-word;
}

.app-table-heading {
  margin: 0;
  padding: 0.75rem var(--tblr-card-cap-padding-x, 1.25rem) 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.app-table-heading:not(:first-child) {
  border-top: 1px solid var(--tblr-border-color);
}

.app-detail-text > :last-child {
  margin-bottom: 0;
}

.app-table-empty {
  margin: 0;
  padding: 0.25rem var(--tblr-card-cap-padding-x, 1.25rem) 0.75rem;
  color: var(--tblr-secondary-color);
}

/* ==========================================================================
   List filters
   The search box stays visible; every other filter lives in a native
   <details class="app-filters"> whose summary is a secondary button with an
   active-filter count. The server adds `open` while a filter is applied.
   ========================================================================== */

.app-filters > summary {
  list-style: none;
}

.app-filters > summary::-webkit-details-marker {
  display: none;
}

.app-filters-count {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.app-filters-chevron {
  display: inline-flex;
  transition: transform var(--app-motion);
}

.app-filters[open] > summary .app-filters-chevron {
  transform: rotate(180deg);
}

/* ==========================================================================
   Reseller statistics (#211)
   Built from the list, KPI and button blocks above; only the page-specific
   label/value record and the attention counter live here.
   ========================================================================== */

.statistics-record {
  grid-template-columns: minmax(0, 2fr) minmax(4rem, 1fr);
  align-items: center;
}

/* Ten numeric columns: let headers wrap so the table fits at xl without scrolling. */
.statistics-table > thead th {
  white-space: normal;
  vertical-align: bottom;
}

.statistics-attention-count {
  min-width: 3ch;
  font-size: 1.5rem;
  font-weight: 700;
}

/* ==========================================================================
   Searchable combo box (#235, #294)
   static/js/combobox.js turns a [data-combobox] choice list into a filter
   input, a listbox on elevation level 3, and removable chips. Without
   JavaScript the checkbox or radio list stays usable.
   ========================================================================== */

[data-combobox] > .form-check {
  min-height: var(--app-touch-target);
  padding-block: 0.625rem;
  cursor: pointer;
}

[data-combobox] > .form-check:hover {
  background: var(--app-hover-bg);
}

[data-combobox] > .form-check:active {
  background: var(--app-pressed-bg);
}

.app-combobox {
  display: grid;
  gap: 0.5rem;
}

.app-combobox-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-combobox-chips:empty {
  display: none;
}

.app-combobox-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--app-touch-target);
  max-width: 100%;
  padding-inline-start: 0.75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-pill);
  background: var(--app-current-bg);
}

.app-combobox-chip-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-combobox-code {
  margin-inline-start: 0.375rem;
  color: var(--tblr-secondary);
  font-size: 0.875em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.app-combobox-chip-remove {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--app-touch-target);
  height: var(--app-touch-target);
  padding: 0;
  border: 0;
  border-radius: var(--tblr-border-radius-pill);
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--app-motion);
}

.app-combobox-chip-remove:hover {
  background: var(--app-hover-bg);
}

.app-combobox-chip-remove:active {
  background: var(--app-pressed-bg);
}

.app-combobox-chip-remove:focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
}

.app-combobox-none {
  margin: 0;
  color: var(--tblr-secondary);
}

.app-combobox-field {
  position: relative;
}

.app-combobox-input {
  min-height: var(--app-touch-target);
}

.app-combobox-input:focus-visible {
  box-shadow: var(--app-focus-ring);
}

.app-combobox-listbox {
  position: absolute;
  z-index: 1000;
  inset-inline: 0;
  top: calc(100% + 0.25rem);
  max-height: 18rem;
  margin: 0;
  padding: 0.25rem 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
  box-shadow: var(--app-elevation-3);
}

.app-combobox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--app-touch-target);
  padding: 0.5rem 0.75rem;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color var(--app-motion);
}

/* A checkbox-like mark shows the selected state alongside aria-selected. */
.app-combobox-option::before {
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-sm);
  content: "";
}

.app-combobox-option[aria-selected="true"]::before {
  border-color: var(--tblr-primary);
  background: var(--tblr-primary);
  box-shadow: inset 0 0 0 2px var(--tblr-bg-surface);
}

.app-combobox-option-name {
  min-width: 0;
}

.app-combobox-option .app-combobox-code {
  margin-inline-start: auto;
}

.app-combobox-option:hover {
  background: var(--app-hover-bg);
}

.app-combobox-option.is-active {
  background: var(--app-current-bg);
  outline: 2px solid var(--tblr-focus-ring-color);
  outline-offset: -2px;
}

.app-combobox-option:active {
  background: var(--app-pressed-bg);
}

.app-combobox-empty {
  padding: 0.5rem 0.75rem;
  color: var(--tblr-secondary);
}

/* ==========================================================================
   Reduced motion: one switch for every transition and press offset above.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .nav-tasks-menu .dropdown-item,
  .account-menu-list .dropdown-item,
  .list-group-item-action,
  .app-list-row,
  .app-list-card,
  .app-list-chevron,
  .app-filters-chevron,
  .app-store-badge,
  .app-interactive-card,
  .app-summary-strip > li,
  .app-combobox-chip-remove,
  .app-combobox-option,
  a.app-kpi {
    transition: none;
  }

  .btn:active:not(:disabled, .disabled),
  .app-store-badge:active,
  .app-interactive-card:active,
  a.app-kpi:active {
    transform: none;
  }
}

/* One row per Póliza operation: action button, then its reversible/permanent badge and effect.
   Laid out by the list's own width so it also fits a narrow side card. */
.app-operation-list {
  container-type: inline-size;
}

.app-operation {
  display: grid;
  gap: 0.5rem;
  padding-block: 0.75rem;
  border-top: 1px solid var(--tblr-border-color);
}

.app-operation:first-child {
  border-top: 0;
  padding-top: 0;
}

.app-operation-action {
  min-height: var(--app-touch-target);
  width: 100%;
}

@container (min-width: 36rem) {
  .app-operation {
    grid-template-columns: 12rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
  }
}

/* Plan editor: drag CoberturaBeneficios between the Plan and its Proveedor catalog. */
.plan-editor-pane {
  height: 100%;
  min-height: 12rem;
  padding: 1rem;
  border: 1px dashed var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  background: var(--tblr-bg-surface-secondary);
  transition: background var(--app-motion), border-color var(--app-motion);
}

.plan-editor-pane.is-drop-target {
  border-color: var(--tblr-primary);
  background: var(--app-current-bg);
}

.plan-editor-pane-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}

.plan-editor-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin-bottom: .75rem;
}

.plan-editor-tools .form-control {
  flex: 1 1 12rem;
}

.plan-editor-list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-editor-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  min-height: var(--app-touch-target);
  padding: .625rem .75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
  box-shadow: var(--app-elevation-1);
  transition: box-shadow var(--app-motion), opacity var(--app-motion);
}

.plan-editor-item.is-enhanced {
  cursor: grab;
}

.plan-editor-item.is-enhanced:hover {
  box-shadow: var(--app-elevation-2);
}

.plan-editor-item.is-dragging {
  opacity: .5;
  cursor: grabbing;
}

.plan-editor-handle {
  color: var(--tblr-secondary);
  letter-spacing: -.2em;
  user-select: none;
}

.plan-editor-item-body {
  flex: 1 1 12rem;
  min-width: 0;
}

.plan-editor-item-order {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.plan-editor-item-order .form-control {
  width: 5rem;
}

.plan-editor-item-actions .btn {
  min-height: var(--app-touch-target);
  min-width: var(--app-touch-target);
}

.plan-editor-empty {
  margin: .5rem 0 0;
  color: var(--tblr-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .plan-editor-pane,
  .plan-editor-item {
    transition: none;
  }
}

.plan-editor-item.is-enhanced .form-check {
  padding-left: 0;
}

/* ==========================================================================
   Reseller sidebar shell
   A fixed Tabler vertical navbar at lg: Negocio switcher, the current Negocio's
   links, then every workspace task grouped by purpose. Dark neutral on the Light
   theme, the brand color on the Heavy theme. Below lg it collapses into a top bar.
   ========================================================================== */

.reseller-sidebar {
  --reseller-sidebar-bg: #11161d;
  --reseller-sidebar-fg: rgb(255 255 255 / 72%);
  --reseller-sidebar-strong: #fff;
  --reseller-sidebar-muted: rgb(255 255 255 / 48%);
  --reseller-sidebar-hover-bg: rgb(255 255 255 / 7%);
  --reseller-sidebar-current-bg: rgb(255 255 255 / 12%);
  --reseller-sidebar-border: rgb(255 255 255 / 10%);
  --reseller-sidebar-current-surface: #fff;
  --reseller-sidebar-current-fg: #11161d;
  --reseller-sidebar-current-icon: var(--picafresa-primary);
  --reseller-sidebar-count-bg: rgb(255 255 255 / 90%);
  --reseller-sidebar-count-fg: #11161d;
  --tblr-navbar-bg: var(--reseller-sidebar-bg);
  --tblr-navbar-color: var(--reseller-sidebar-fg);
  --tblr-navbar-hover-color: var(--reseller-sidebar-strong);
  --tblr-navbar-active-color: var(--reseller-sidebar-strong);
  --tblr-navbar-brand-color: var(--reseller-sidebar-strong);
  --tblr-navbar-brand-hover-color: var(--reseller-sidebar-strong);
  --tblr-navbar-border-color: var(--reseller-sidebar-border);
  --tblr-nav-link-icon-color: currentColor;
  z-index: 1031;
  color: var(--reseller-sidebar-fg);
  background: var(--reseller-sidebar-bg);
  font-size: 0.875rem;
}

/* Heavy: the brand color darkened toward black so white text stays readable on light brands. */
body[data-brand-theme="heavy"] .reseller-sidebar {
  --reseller-sidebar-bg: color-mix(in srgb, var(--picafresa-primary) 68%, #000);
  --reseller-sidebar-fg: rgb(255 255 255 / 88%);
  --reseller-sidebar-strong: #fff;
  --reseller-sidebar-muted: rgb(255 255 255 / 62%);
  --reseller-sidebar-hover-bg: rgb(255 255 255 / 10%);
  --reseller-sidebar-current-bg: rgb(255 255 255 / 18%);
  --reseller-sidebar-border: rgb(255 255 255 / 16%);
  --reseller-sidebar-current-fg: color-mix(in srgb, var(--picafresa-primary) 55%, #000);
  --reseller-sidebar-current-icon: var(--picafresa-primary);
  --reseller-sidebar-count-fg: color-mix(in srgb, var(--picafresa-primary) 55%, #000);
}

.reseller-sidebar .navbar-brand {
  justify-content: flex-start;
  margin-inline: 0;
  padding: 0.25rem 0.5rem;
  color: var(--reseller-sidebar-strong);
}

/* Attention counts are a quiet white pill, not a warning badge, so they don't compete with the current tab. */
.reseller-sidebar.navbar .navbar-nav .nav-link .badge {
  position: static;
  min-width: 1.375rem;
  padding: 0.125rem 0.4rem;
  border-radius: 999px;
  color: var(--reseller-sidebar-count-fg);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--reseller-sidebar-count-bg) !important;
  transform: none;
}

.reseller-sidebar .global-brand-attribution {
  color: var(--reseller-sidebar-muted);
}

/* A standard logo is drawn for light backgrounds, so it sits on a plate here. */
.reseller-sidebar .global-brand-artwork[data-logo-variant="standard"] {
  padding: 0.25rem 0.375rem;
  background: #fff;
}

.reseller-sidebar .navbar-toggler {
  min-height: var(--app-touch-target);
  border: 0;
  color: var(--reseller-sidebar-strong);
}

.reseller-sidebar .nav-link {
  display: flex;
  min-height: 2.25rem;
  align-items: center;
  gap: 0.25rem;
  margin: 1px 0;
  padding: 0.375rem 0.625rem;
  border-radius: var(--tblr-border-radius);
  color: var(--reseller-sidebar-fg);
  white-space: normal;
  transition: background-color var(--app-motion), color var(--app-motion);
}

.reseller-sidebar .nav-link:hover {
  color: var(--reseller-sidebar-strong);
  background: var(--reseller-sidebar-hover-bg);
}

.reseller-sidebar .nav-link:active {
  background: var(--reseller-sidebar-current-bg);
}

/* The current page is a solid surface tab that reads as "you are here" at a glance. */
.reseller-sidebar .nav-link.active,
.reseller-sidebar .nav-link.active:hover {
  color: var(--reseller-sidebar-current-fg);
  font-weight: 600;
  background: var(--reseller-sidebar-current-surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 18%), 0 4px 12px rgb(0 0 0 / 12%);
}

.reseller-sidebar.navbar .navbar-nav .nav-link.active .badge {
  --reseller-sidebar-count-bg: var(--reseller-sidebar-bg);
  --reseller-sidebar-count-fg: #fff;
}

.reseller-sidebar .nav-link.active .app-icon {
  color: var(--reseller-sidebar-current-icon);
}

.reseller-sidebar .nav-link:focus-visible,
.reseller-sidebar .navbar-brand:focus-visible,
.reseller-sidebar .navbar-toggler:focus-visible,
.reseller-scope > summary:focus-visible,
.reseller-scope-menu a:focus-visible {
  outline: 2px solid var(--reseller-sidebar-strong);
  outline-offset: -2px;
  box-shadow: none;
}

.reseller-sidebar-nav,
.reseller-business-context {
  width: 100%;
}

.reseller-nav-heading {
  margin: 1rem 0 0.25rem;
  padding: 0 0.625rem;
  color: var(--reseller-sidebar-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reseller-scope {
  width: 100%;
  margin: 0.75rem 0 0.5rem;
}

.reseller-scope > summary {
  display: flex;
  min-height: var(--app-touch-target);
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--reseller-sidebar-border);
  border-radius: var(--tblr-border-radius);
  color: var(--reseller-sidebar-strong);
  background: var(--reseller-sidebar-hover-bg);
  list-style: none;
  cursor: pointer;
  transition: border-color var(--app-motion), background-color var(--app-motion);
}

.reseller-scope > summary::-webkit-details-marker {
  display: none;
}

.reseller-scope > summary:hover {
  border-color: var(--reseller-sidebar-muted);
}

.reseller-scope-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reseller-scope-label small {
  display: block;
  color: var(--reseller-sidebar-muted);
  font-size: 0.6875rem;
  font-weight: 400;
}

.reseller-scope-menu {
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  border: 1px solid var(--reseller-sidebar-border);
  border-radius: var(--tblr-border-radius);
  list-style: none;
}

.reseller-scope-menu a {
  display: flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--tblr-border-radius);
  color: var(--reseller-sidebar-fg);
  text-decoration: none;
}

.reseller-scope-menu a:hover {
  color: var(--reseller-sidebar-strong);
  background: var(--reseller-sidebar-hover-bg);
}

.reseller-scope-menu small {
  color: var(--reseller-sidebar-muted);
}

.reseller-scope-menu .reseller-scope-all {
  border-top: 1px solid var(--reseller-sidebar-border);
  border-radius: 0;
  color: var(--reseller-sidebar-strong);
  font-weight: 600;
}

.reseller-business-context {
  margin-bottom: 0.25rem;
  padding: 0 0 0.5rem 0.75rem;
  border-bottom: 1px solid var(--reseller-sidebar-border);
}

.reseller-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: 3.5rem;
  border-bottom: 1px solid var(--tblr-border-color);
  background: color-mix(in srgb, var(--tblr-bg-surface) 92%, transparent);
  backdrop-filter: blur(6px);
}

.reseller-topbar .container-fluid {
  gap: 1rem;
}

.reseller-search {
  position: relative;
  flex: 0 1 26rem;
  min-width: 0;
}

.reseller-search .app-icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  color: var(--tblr-secondary);
  transform: translateY(-50%);
}

.reseller-search .form-control {
  min-height: 2.5rem;
  padding-left: 2.25rem;
}

.reseller-topbar .account-avatar {
  color: var(--picafresa-primary-foreground);
  background: var(--picafresa-primary);
}

.reseller-topbar .account-meta {
  color: var(--tblr-secondary);
}

@media (max-width: 991.98px) {
  .reseller-sidebar .container-fluid {
    flex-wrap: wrap;
  }

  .reseller-topbar {
    position: static;
  }

  .reseller-topbar .account-identity {
    display: none;
  }
}

@media (min-width: 992px) {
  .reseller-sidebar.navbar-vertical.navbar-expand-lg {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .reseller-sidebar.navbar-vertical.navbar-expand-lg .navbar-brand {
    justify-content: flex-start;
    padding: 1rem 1.25rem 0.5rem;
  }

  .reseller-sidebar.navbar-vertical .navbar-collapse {
    flex-direction: column;
    align-items: stretch;
    padding: 0 0.75rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reseller-sidebar .nav-link,
  .reseller-scope > summary {
    transition: none;
  }
}

/* ==========================================================================
   KPI ribbon (Reseller Resumen)
   One bordered strip of counts; each linked cell opens its filtered list.
   Color marks only counts that need action.
   ========================================================================== */

.app-kpi-ribbon {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  background: var(--tblr-bg-surface);
  box-shadow: var(--app-elevation-1);
  list-style: none;
}

.app-kpi-ribbon > li + li {
  border-inline-start: 1px solid var(--tblr-border-color);
}

/* Labels may wrap to two lines; values sit on a shared baseline at the bottom. */
.app-kpi-ribbon-item {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  color: var(--tblr-body-color);
}

a.app-kpi-ribbon-item {
  text-decoration: none;
  transition: background-color var(--app-motion);
}

a.app-kpi-ribbon-item:hover {
  color: var(--tblr-body-color);
  background: var(--app-hover-bg);
}

a.app-kpi-ribbon-item:active {
  background: var(--app-pressed-bg);
}

a.app-kpi-ribbon-item:focus-visible {
  outline: 3px solid var(--tblr-primary);
  outline-offset: -3px;
}

.app-kpi-ribbon-value {
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.app-kpi-ribbon-item .subheader {
  line-height: 1.3;
}

/* Counts needing action get a small status dot and a muted tint, not a full color. */
.app-kpi-ribbon-item.is-warning,
.app-kpi-ribbon-item.is-danger {
  --app-kpi-tone: var(--tblr-warning);
}

.app-kpi-ribbon-item.is-danger {
  --app-kpi-tone: var(--tblr-danger);
}

.app-kpi-ribbon-item:is(.is-warning, .is-danger) .subheader::before {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background: var(--app-kpi-tone);
  content: "";
  vertical-align: 0.05em;
}

.app-kpi-ribbon-item:is(.is-warning, .is-danger) .app-kpi-ribbon-value {
  color: color-mix(in srgb, var(--app-kpi-tone) 45%, var(--tblr-body-color));
}

.app-share {
  width: 6rem;
}

.app-activity-row {
  position: relative;
  transition: background-color var(--app-motion);
}

.app-activity-row:hover {
  background: var(--app-hover-bg);
}

@media (max-width: 991.98px) {
  .app-kpi-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-kpi-ribbon > li + li {
    border-inline-start: 0;
  }

  .app-kpi-ribbon > li:nth-child(2n) {
    border-inline-start: 1px solid var(--tblr-border-color);
  }

  .app-kpi-ribbon > li:nth-child(n + 3) {
    border-top: 1px solid var(--tblr-border-color);
  }
}

@media (prefers-reduced-motion: reduce) {
  a.app-kpi-ribbon-item,
  .app-activity-row {
    transition: none;
  }
}