/* NEX global brand layer: Render violet across public and signed-in screens.
   Keep green, red, amber and muted gray for semantic states/actions. */
:root {
  --nex-blue: #8A05FF;
  --nex-soft: #F7F0FF;
  --nex-violet: #8A05FF;
  --nex-violet-dark: #7000D6;
  --nex-violet-soft: #F7F0FF;
  --nex-violet-border: #E4D5FF;
}

/* Primary actions use the platform brand. Secondary, danger, success and
   disabled controls keep their existing meaning and color. */
button:not(.secondary):not(.danger):not(.success):not(.warning):not(:disabled),
.button:not(.secondary):not(.danger):not(.success):not(.warning):not(:disabled) {
  border-color: var(--nex-violet);
  background: linear-gradient(135deg, var(--nex-violet), var(--nex-violet-dark));
  color: #fff;
}

button:not(.secondary):not(.danger):not(.success):not(.warning):not(:disabled):hover,
.button:not(.secondary):not(.danger):not(.success):not(.warning):not(:disabled):hover {
  border-color: var(--nex-violet-dark);
  background: var(--nex-violet-dark);
  color: #fff;
}

button:focus-visible,
.button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(138, 5, 255, .28);
  outline-offset: 2px;
}

/* Brand links and navigation accents. */
a:not(.button):not(.pill):not(.reputation-chip):not(.nav-badge):not(.notification-count) {
  color: var(--nex-violet-dark);
}

a:not(.button):not(.pill):not(.reputation-chip):not(.nav-badge):not(.notification-count):hover {
  color: var(--nex-violet);
}

.site-nav > .explore-link {
  border-color: var(--nex-violet-border);
  background: var(--nex-violet-soft);
  color: var(--nex-violet-dark);
}

.site-nav > .explore-link:hover,
.site-nav .user-menu__content a:hover {
  border-color: var(--nex-violet);
  background: #efe1ff;
  color: var(--nex-violet-dark);
}

.site-nav .user-menu__content a[href="/publicar"] {
  color: var(--nex-violet-dark);
}

/* Recolor brand accents while preserving dark text and feedback states. */
.eyebrow,
.badge,
.tag,
.chip,
.type,
.section-head h2,
.hero h1 strong,
.seller-line a,
.card .price,
.listing-info small,
.panel-grid .inquiry-card .row small a,
.listing-row .card-link,
.page-actions a:not(.button) {
  color: var(--nex-violet-dark);
}

.type,
.search-hint {
  border-color: var(--nex-violet-border);
  background: var(--nex-violet-soft);
}

.search {
  border-color: var(--nex-violet-border);
  background: linear-gradient(135deg, #FBF8FF, #F4EBFF);
}

.search input,
.search select {
  border-color: #D6B8FF;
}

.search .button,
.hero .button {
  border-color: var(--nex-violet);
  background: linear-gradient(135deg, var(--nex-violet), var(--nex-violet-dark));
  color: #fff;
  text-shadow: none;
}

.search .button:hover,
.hero .button:hover {
  background: var(--nex-violet-dark);
}

.hero-card {
  box-shadow: 12px 12px 0 var(--nex-violet);
}

.avatar {
  background: var(--nex-violet-soft);
  color: var(--nex-violet-dark);
}

.reputation {
  border-left-color: var(--nex-violet);
}

/* Listing cards and active navigation use the same violet accent. */
#explorar .grid > .card > .card-link {
  background: linear-gradient(135deg, var(--nex-violet), var(--nex-violet-dark));
  color: #fff;
}

#explorar .grid > .card > .card-link:hover {
  background: var(--nex-violet-dark);
  color: #fff;
}

nav a:not(.button):hover {
  border-color: var(--nex-violet-border);
  background: var(--nex-violet-soft);
}

nav a[href="/publicar"] {
  border-color: var(--nex-violet-border);
  background: var(--nex-violet-soft);
  color: var(--nex-violet-dark);
}

/* Form borders and focus rings across login, publishing, search and operations. */
input:focus,
textarea:focus,
select:focus,
.inquiry-reply-form textarea:focus,
.operation-data-form input:focus,
.attachment-form input:focus,
.rating-operation-form select:focus,
.rating-operation-form textarea:focus {
  border-color: var(--nex-violet);
  outline-color: rgba(138, 5, 255, .2);
  box-shadow: 0 0 0 3px rgba(138, 5, 255, .16);
}

/* Informational and active-operation accents shift to violet; completion,
   warning, error, danger and rating semantics keep their current palette. */
.operation-status {
  border-color: #D6B8FF;
  border-left-color: var(--nex-violet);
  background: var(--nex-violet-soft);
  color: #3F2361;
}

.operation-payment-section,
.operation-shipment-section {
  border-left-color: var(--nex-violet);
}

.operation-payment-section > h3,
.operation-shipment-section > h3 {
  color: var(--nex-violet-dark);
}

.inquiry-card-shell.is-active {
  border-color: var(--nex-violet);
  background: #FBF8FF;
  box-shadow: 0 7px 20px rgba(138, 5, 255, .12);
}

.inquiry-card-shell.is-active > .inquiry-card-clean > .inquiry-card-clean-header {
  background: var(--nex-violet-soft);
}

.inquiry-last-activity time {
  color: var(--nex-violet-dark);
}

.inquiry-state-pill.is-active {
  background: #EFE1FF;
  color: #5B16A6;
}

/* Keep success, error, warning, danger, closed and reputation colors semantic. */

/* Public listing detail: use the violet palette and match publishing-form
   readability for supporting information. */
.detail > .type {
  display: inline-block;
  margin-bottom: .55rem;
  padding: .4rem .65rem;
  border: 1px solid var(--nex-violet-border);
  border-radius: 999px;
  background: var(--nex-violet-soft);
  color: var(--nex-violet-dark);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.4;
}

.detail > p.muted,
.detail > .location,
.detail > .seller-line,
.detail-grid > .box > p {
  font-size: .9rem;
  line-height: 1.55;
}

.detail > p.muted,
.detail > .location,
.detail-grid > .box > p {
  color: #475569;
}

.detail > .seller-line a {
  color: var(--nex-violet-dark);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.detail-grid > .box > h2 {
  color: var(--nex-violet-dark);
  font-size: 1.75rem;
}

.detail-grid .inquiry-form label,
.detail-grid .contact-policy-hint {
  font-size: .9rem;
}

@media (max-width: 760px) {
  .detail > p.muted,
  .detail > .location,
  .detail > .seller-line,
  .detail-grid > .box > p,
  .detail-grid .inquiry-form label,
  .detail-grid .contact-policy-hint {
    font-size: 1rem;
  }
}

/* =====================================================================
   NEX UNIFIED VISUAL SYSTEM — keep cross-platform style rules here.
   Edit this section for typography, fields, buttons, warnings and cards.
   ===================================================================== */
:root {
  --nex-ink: #1F2430;
  --nex-muted: #4B5563;
  --nex-field-border: #E4D5FF;
  --nex-field-focus: #8A05FF;
  --nex-soft-violet: #F7F0FF;
  --nex-warning-bg: #FFF4E5;
}

body {
  color: var(--nex-ink);
  font-size: 16px;
  line-height: 1.55;
}

p,
li,
summary,
.page-head p,
.auth > p,
.detail-grid > .box > p,
.admin-report p {
  color: var(--nex-ink);
  font-size: 1rem;
  line-height: 1.55;
}

small,
.muted,
.password-help,
.contact-policy-hint,
.admin-report small,
.policy-help,
.file-field small {
  color: var(--nex-muted);
  font-size: .9rem;
  line-height: 1.5;
}

label,
.form-card label,
.listing-form label,
.auth label,
.admin-report label {
  color: var(--nex-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select {
  border-color: var(--nex-field-border) !important;
  background-color: #fff;
  color: var(--nex-ink) !important;
  font-size: 1rem;
  line-height: 1.45;
}

input::placeholder,
textarea::placeholder {
  color: #596273;
  opacity: 1;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--nex-violet);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
  border-color: var(--nex-field-focus) !important;
  outline-color: rgba(138, 5, 255, .22);
  box-shadow: 0 0 0 3px rgba(138, 5, 255, .15);
}

/* Password eye: keep only the icon visible, comfortably inside the field. */
.password-field {
  position: relative;
}

.password-field > input {
  padding-right: 3.25rem;
}

.password-field > .password-toggle {
  position: absolute;
  top: 50%;
  right: .45rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  padding: 0;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--nex-ink) !important;
  font-size: 1.05rem;
}

.password-field > .password-toggle:hover {
  background: transparent !important;
  color: var(--nex-violet-dark) !important;
}

/* One consistent button system: primary violet, secondary soft violet.
   Truly destructive actions outside moderation remain red. */
button:not(.secondary):not(.danger):not(.success):not(.warning):not(.password-toggle):not(:disabled),
.button:not(.secondary):not(.danger):not(.success):not(.warning):not(:disabled) {
  border-color: var(--nex-violet);
  background: linear-gradient(135deg, var(--nex-violet), var(--nex-violet-dark));
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
}

button.secondary,
.button.secondary {
  border: 1px solid var(--nex-field-border);
  background: var(--nex-soft-violet);
  color: var(--nex-violet-dark);
}

button.small,
.button.small {
  min-height: 2.5rem;
  font-size: .9rem;
}

/* Center the titles of the account and publication forms. */
.auth > h1,
.publish-page > h1 {
  text-align: center;
}

.wrap.narrow > .page-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  text-align: center;
}

.wrap.narrow > .page-head > div {
  width: 100%;
  text-align: center;
}

/* Header: make the brand and promise readable at a glance. */
.site-header .brand {
  color: var(--nex-violet-dark);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
}

.site-header .tagline {
  color: var(--nex-ink);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Listing cards: one palette for home and public-profile grids. */
#explorar .grid > .card > .type,
.wrap .grid > .card > .type {
  border: 1px solid var(--nex-field-border);
  background: var(--nex-soft-violet);
  color: var(--nex-violet-dark);
  font-size: .9rem;
  font-weight: 700;
}

#explorar .grid > .card > h3,
.wrap .grid > .card > h3 {
  color: var(--nex-ink);
  font-size: 1.1rem;
  line-height: 1.35;
}

#explorar .grid > .card > small,
.wrap .grid > .card > .location {
  color: var(--nex-muted);
  font-size: .9rem;
}

#explorar .grid > .card > .price,
.wrap .grid > .card > .price {
  color: var(--nex-violet-dark);
}

#explorar .grid > .card > .card-link {
  border-color: var(--nex-violet);
  background: linear-gradient(135deg, var(--nex-violet), var(--nex-violet-dark));
  color: #fff;
}

.wrap .grid > .card > .card-link {
  color: var(--nex-violet-dark);
  font-size: .95rem;
  font-weight: 700;
}

/* Product and service details share readable supporting text and price. */
.detail > h1 {
  color: var(--nex-ink);
}

.detail > p.muted,
.detail > .location,
.detail > .seller-line,
.detail-grid > .box > p,
.detail-grid .inquiry-form label,
.detail-grid .contact-policy-hint {
  font-size: .95rem;
  line-height: 1.55;
}

.detail-grid > .box > h2 {
  color: var(--nex-violet-dark);
}

/* Warning banners keep a pale amber surface; text is black and the edge
   follows the shared soft-violet field border. */
.notice.warning {
  border: 1px solid var(--nex-field-border);
  background: var(--nex-warning-bg);
  color: #111;
}

.notice.warning * {
  color: #111 !important;
}

/* Admin reports: clearly separate each case and group its actions. */
.admin-reports {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.admin-reports > .admin-report {
  margin: 0;
  padding: 1.1rem;
  border: 1px solid var(--nex-field-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 4px 14px rgba(31, 36, 48, .07);
}

.admin-reports .admin-report .row {
  align-items: flex-start;
  gap: .9rem;
}

.admin-reports .admin-report .row > div {
  flex: 1;
  min-width: 0;
}

.admin-reports .admin-report .row b {
  color: var(--nex-ink);
  font-size: 1rem;
  line-height: 1.45;
}

.admin-reports .admin-report .row small {
  display: block;
  margin-top: .35rem;
  font-size: .9rem;
  line-height: 1.5;
}

.admin-reports .admin-report .admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .9rem;
}

/* Pause/suspend are reversible admin actions, so they match the violet set;
   permanent delete controls elsewhere keep their red danger treatment. */
.admin-reports .admin-actions .button.danger {
  border-color: var(--nex-violet);
  background: linear-gradient(135deg, var(--nex-violet), var(--nex-violet-dark));
  color: #fff;
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .site-header .brand { font-size: 1.5rem; }
  .site-header .tagline { font-size: .9rem; }
  .admin-reports > .admin-report { padding: .9rem; }
}

/* Legacy app.css used !important on teal category pills; this central
   override keeps all product/service labels in the approved lavender style. */
#explorar .grid > .card > .type,
.wrap .grid > .card > .type,
.detail > .type {
  border: 1px solid var(--nex-field-border) !important;
  background: var(--nex-soft-violet) !important;
  color: var(--nex-violet-dark) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
}

/* Keep form controls consistently readable even where legacy page rules set
   smaller textarea/select sizes. */
form textarea,
form select {
  color: var(--nex-ink) !important;
  font-size: 1rem !important;
}

/* Listing metadata stays neutral rather than inheriting the old teal accent. */
.listing-info small {
  color: var(--nex-muted) !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
}

/* Give adjacent evidence links room to scan on moderation cards. */
.admin-report .evidence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}

.admin-report .evidence b {
  margin-right: .2rem;
}

/* Grouped publication, header, media and panel update (2026-09-27). */
:where(.card, .box, .form-card, .profile-head, .stats > div,
       .publication-card, .operation-section, .operation-flow-clean,
       .operation-payment-files, .operation-attachment-upload,
       .gallery-frame, .listing-media-manager, .listing-media-item,
       .listing-video-frame, .nex-information-panel, .nex-benefit,
       .nex-how-it-works, .search, .color-panel) {
  border-color: var(--nex-field-border);
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
}

.site-header .brand-logo {
  display: block;
  width: clamp(4rem, 6vw, 5rem);
  height: 3.5rem;
  object-fit: contain;
}

.site-header .tagline {
  display: block;
  flex: 0 1 auto;
  border-left: 1px solid var(--nex-field-border);
  padding-left: .9rem;
  color: var(--nex-ink);
  font-size: .95rem;
  font-weight: 700;
}

.site-header .welcome-message { display: none; }

.site-nav .user-menu > summary {
  display: grid;
  min-width: 2.65rem;
  min-height: 2.65rem;
  place-items: center;
  border: 1px solid var(--nex-field-border);
  border-radius: .75rem;
  background: var(--nex-soft-violet);
  color: var(--nex-violet-dark);
  font-size: 1.2rem;
  font-weight: 800;
}

.site-nav .user-menu__content {
  min-width: 11rem;
  border-color: var(--nex-field-border);
  border-radius: .8rem;
}

.user-menu__greeting {
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--nex-field-border);
  color: var(--nex-ink);
  font-weight: 700;
}

.nex-information-panel {
  width: min(100% - 2rem, 1480px);
  margin: 1.3rem auto 2rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--nex-field-border);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, #fff 0%, #fbf8ff 100%);
  box-shadow: 0 10px 30px rgba(80, 32, 130, .08);
}

.nex-information-panel__heading {
  max-width: 58rem;
  margin: 0 auto 1.6rem;
  text-align: center;
}

.nex-information-panel__heading h1 {
  margin: .35rem 0 .65rem;
  color: var(--nex-violet-dark);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.nex-information-panel__promise {
  max-width: 52rem;
  margin: 0 auto .55rem;
  color: var(--nex-ink);
  font-size: clamp(1.2rem, 2.6vw, 1.75rem);
  font-weight: 850;
  line-height: 1.3;
}

.nex-information-panel__intro {
  margin: 0;
  color: var(--nex-muted);
  font-size: 1rem;
}

.nex-information-panel__benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}

.nex-benefit {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--nex-field-border);
  border-radius: 1rem;
  background: #fff;
}

.nex-benefit__icon {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  fill: none;
  stroke: var(--nex-violet);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nex-benefit h2,
.nex-how-it-works h2 {
  margin: 0 0 .35rem;
  color: var(--nex-violet-dark);
  font-size: 1.05rem;
}

.nex-benefit p {
  margin: 0;
  color: var(--nex-ink);
  font-size: .94rem;
  line-height: 1.5;
}

.nex-how-it-works {
  margin-top: .95rem;
  padding: 1rem;
  border: 1px solid var(--nex-field-border);
  border-radius: 1rem;
  background: var(--nex-soft-violet);
}

.nex-how-it-works__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.nex-how-it-works__grid p {
  margin: 0;
  padding: .8rem;
  border: 1px solid var(--nex-field-border);
  border-radius: .75rem;
  background: #fff;
}

.nex-information-panel__disclaimer {
  margin: .85rem 0 0;
  color: #303746;
  font-size: .9rem;
  line-height: 1.5;
}

.nex-information-panel__action {
  margin-top: 1rem;
  text-align: center;
}

.listing-media-manager {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.2rem;
  border: 1px solid var(--nex-field-border);
  border-radius: 1rem;
  background: #fff;
}

.listing-media-manager > h2,
.listing-video-manager > h3 { margin: 0; color: var(--nex-violet-dark); }
.listing-media-manager > p { margin: 0; }
.listing-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.listing-media-item { min-width: 0; padding: .8rem; border: 1px solid var(--nex-field-border); border-radius: .9rem; background: #fcfaff; }
.listing-media-item > img { display: block; width: 100%; height: 12rem; object-fit: contain; border-radius: .65rem; background: #f7f4fb; }
.listing-media-actions { display: grid; gap: .75rem; margin-top: .75rem; }
.listing-media-actions form, .media-upload-form { display: grid; gap: .7rem; min-width: 0; padding: .85rem; border: 1px solid var(--nex-field-border); border-radius: .8rem; background: #fff; }
.listing-media-manager label { display: grid; gap: .45rem; }
.listing-media-manager input[type="file"] { max-width: 100%; }
.listing-media-manager .image-policy { display: flex !important; align-items: flex-start; gap: .55rem !important; }
.listing-media-manager .image-policy span { min-width: 0; }
.listing-media-manager .danger { border-color: #efbdc4 !important; background: #ffe7ea !important; color: #8f1f2d !important; }
.listing-video-manager { display: grid; gap: .7rem; padding: 1rem; border: 1px solid var(--nex-field-border); border-radius: .9rem; background: #fcfaff; }
.listing-video, .listing-video-frame video { display: block; width: 100%; max-height: 28rem; border: 1px solid var(--nex-field-border); border-radius: .8rem; background: #111; }
.listing-video-frame { max-width: 52rem; margin: 1rem auto 1.25rem; padding: .8rem; border: 1px solid var(--nex-field-border); border-radius: 1rem; background: #fff; }
.listing-video-frame small { display: block; margin-top: .45rem; color: var(--nex-muted); }
.media-preview { display: flex; flex-wrap: wrap; gap: .65rem; min-width: 0; }
.media-preview:empty { display: none; }
.media-preview-item { display: block; width: min(100%, 15rem); max-height: 13rem; object-fit: contain; border: 1px solid var(--nex-field-border); border-radius: .7rem; background: #f8f5fc; }
.media-client-error { flex-basis: 100%; margin: 0; color: #9b1c2b; font-weight: 750; }

@media (max-width: 760px) {
  .site-header__inner { flex-wrap: nowrap; gap: .45rem; padding: .45rem .6rem; }
  .site-header .brand-logo { width: 3.45rem; height: 2.9rem; }
  .site-header .tagline { flex: 1 1 auto; min-width: 0; padding: 0 .3rem; border: 0; font-size: .7rem; line-height: 1.15; }
  .site-nav { flex: 0 0 auto; flex-wrap: nowrap; gap: .3rem; margin-left: 0; }
  .site-nav > .explore-link { padding: .4rem .45rem; font-size: .76rem; }
  .site-nav .user-menu > summary { min-width: 2.45rem; min-height: 2.45rem; }
  .site-header .notification-bell { min-width: 2.45rem; min-height: 2.45rem; }
  .site-header .welcome-message { display: none; }
  .nex-information-panel { width: calc(100% - 1.1rem); margin: .7rem auto 1.2rem; padding: 1rem; border-radius: 1rem; }
  .nex-information-panel__heading { margin-bottom: 1rem; }
  .nex-information-panel__benefits, .nex-how-it-works__grid, .listing-media-grid { grid-template-columns: minmax(0, 1fr); }
  .nex-benefit { padding: .8rem; }
  .nex-benefit__icon { flex-basis: 1.9rem; width: 1.9rem; height: 1.9rem; }
  .listing-media-manager { padding: .85rem; }
  .listing-media-item > img { height: 14rem; }
  .listing-media-actions form, .media-upload-form { padding: .7rem; }
  .listing-media-manager button { width: 100%; min-height: 2.8rem; }
}