:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #070b14; color: #eef5ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, rgba(61, 128, 255, 0.2), transparent 35%), radial-gradient(circle at bottom right, rgba(41, 255, 199, 0.14), transparent 35%), #070b14; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr) 280px; gap: 16px; padding: 16px; }
.sidebar, .workspace { border: 1px solid rgba(180, 214, 255, 0.15); background: rgba(10, 18, 32, 0.76); backdrop-filter: blur(18px); border-radius: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.sidebar { padding: 16px; overflow: auto; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brand small { display: block; color: #9fb5d8; }
.orb { width: 38px; height: 38px; display: inline-block; border-radius: 999px; background: linear-gradient(135deg, #59a6ff, #35f1c7); box-shadow: 0 0 30px rgba(64, 180, 255, .7); }
nav { display: grid; gap: 8px; }
.nav-item { border: 1px solid rgba(166, 204, 255, 0.12); background: rgba(255,255,255,.04); color: #dbe9ff; border-radius: 16px; padding: 11px 12px; text-align: left; }
.nav-item.active, .nav-item:hover { background: rgba(80, 150, 255, .18); border-color: rgba(90,180,255,.5); color: white; }
.workspace { padding: 18px; overflow: auto; }
.topbar { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 16px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(24px, 3vw, 38px); margin-bottom: 6px; }
p { color: #bdd0ef; line-height: 1.45; }
.status, .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; background: rgba(44, 246, 194, .12); color: #90ffe4; border: 1px solid rgba(44, 246, 194, .24); font-size: 12px; }
.chat-panel { height: calc(100vh - 90px); display: grid; grid-template-rows: 1fr auto; gap: 14px; }
.messages { overflow: auto; display: grid; gap: 12px; align-content: start; }
.message { max-width: 850px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(173,205,255,.13); background: rgba(255,255,255,.045); }
.message.user { justify-self: end; background: rgba(82, 142, 255, .18); }
.prompt-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.prompt-form input { min-height: 52px; border-radius: 18px; border: 1px solid rgba(173,205,255,.18); background: rgba(255,255,255,.06); color: white; padding: 0 16px; outline: none; }
.prompt-form button, .panel-card button { border: 0; border-radius: 16px; background: linear-gradient(135deg, #4d91ff, #32e7c0); color: #02111e; font-weight: 800; padding: 12px 16px; margin-right: 8px; margin-top: 8px; }
.panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.panel-card, .mini-card { border-radius: 20px; border: 1px solid rgba(173,205,255,.13); background: rgba(255,255,255,.045); padding: 16px; }
.panel-card.wide { grid-column: 1 / -1; }
ul { color: #bdd0ef; padding-left: 20px; }
pre { max-height: 260px; overflow: auto; border-radius: 16px; padding: 12px; background: rgba(0,0,0,.25); color: #d7e8ff; }
.mini-card { margin-bottom: 12px; }
@media (max-width: 1100px) { .shell { grid-template-columns: 1fr; } .sidebar { min-height: auto; } .panel-grid { grid-template-columns: 1fr; } .chat-panel { height: auto; min-height: 70vh; } }

/* Bloque 04 — UDL University profunda */
select { width: 100%; min-height: 46px; border-radius: 14px; border: 1px solid rgba(173,205,255,.18); background: rgba(255,255,255,.06); color: #eef5ff; padding: 0 12px; margin: 10px 0; outline: none; }
select option { background: #101a2c; color: #eef5ff; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.button-row button { margin-right: 0; }
.hero-card { background: linear-gradient(135deg, rgba(77,145,255,.16), rgba(50,231,192,.08)); }
.result-card { border-color: rgba(44,246,194,.35); background: rgba(44,246,194,.06); }
.lesson-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lesson-card, .progress-row { border: 1px solid rgba(173,205,255,.12); border-radius: 16px; padding: 12px; background: rgba(0,0,0,.18); }
.lesson-card p { margin-bottom: 0; }
.progress-grid { display: grid; gap: 8px; }
.progress-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.progress-row span { color: #9fb5d8; font-size: 13px; }
.udl-deep .panel-card h3 { margin-bottom: 8px; }
@media (max-width: 1100px) { .lesson-grid { grid-template-columns: 1fr; } .progress-row { display: block; } }

/* Bloque 05 — WebNet / paneles globales */
.result-card pre,
.panel-card pre {
  max-height: 360px;
  overflow: auto;
}
.panel-card .button-row {
  flex-wrap: wrap;
}

/* Bloque 06 — validación final / export */
.panel-card.hero-card pre { max-height: 420px; }
.panel-grid .panel-grid { grid-column: 1 / -1; }

/* Bloque 07 — Workspace vivo */
.result-card pre,
.panel-card pre {
  max-height: 420px;
  overflow: auto;
}
.workspace .hero-card .button-row button {
  min-width: 150px;
}


/* Bloque 09 — Memory / Knowledge Deep Center */
.knowledge-deep .panel-card pre {
  max-height: 420px;
}
.knowledge-deep .result-card {
  border-color: rgba(144, 255, 228, .38);
}

/* Bloque 10 Mobile Control */
.result-card { border-style: solid; }
.panel-card pre { max-height: 420px; overflow: auto; }

/* Bloque 51 — Cara pública global de SOIA */
.public-face {
  min-height: 100vh;
  color: #edf7ff;
  background:
    radial-gradient(circle at 20% 10%, rgba(54, 214, 255, 0.26), transparent 32rem),
    radial-gradient(circle at 78% 18%, rgba(90, 72, 255, 0.28), transparent 34rem),
    radial-gradient(circle at 55% 75%, rgba(27, 219, 172, 0.18), transparent 32rem),
    linear-gradient(135deg, #040a13 0%, #071527 48%, #09111f 100%);
  overflow-x: hidden;
}

.public-face::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent 80%);
}

.public-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem clamp(1rem, 5vw, 4.5rem);
  backdrop-filter: blur(22px);
  background: rgba(4, 10, 19, 0.68);
  border-bottom: 1px solid rgba(137, 216, 255, 0.14);
}

.public-brand, .public-nav-links button, .public-footer button {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: 1.08rem;
  letter-spacing: .08em;
}

.public-nav-links {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.public-nav-links button, .public-footer button {
  padding: .62rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}

.public-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 5vw, 4.5rem) 2rem;
  align-items: center;
}

.public-eyebrow, .public-card-kicker {
  color: #73f6dd;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .75rem;
  font-weight: 800;
}

.public-hero h1 {
  max-width: 980px;
  margin: .8rem 0 1rem;
  font-size: clamp(2.8rem, 8vw, 7.4rem);
  line-height: .88;
  letter-spacing: -0.08em;
}

.public-lead {
  max-width: 790px;
  color: #d9eeff;
  font-size: clamp(1.12rem, 2vw, 1.48rem);
  line-height: 1.6;
}

.public-position {
  max-width: 760px;
  color: #a9c7dd;
  font-size: 1rem;
  line-height: 1.7;
}

.public-cta-row {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.public-cta-row.center { justify-content: center; }

.public-cta, .public-link-button {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: .9rem 1.18rem;
  color: #f6fbff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}

.public-cta.primary {
  background: linear-gradient(135deg, #43e0ff, #6d5cff 55%, #2be8b7);
  color: #03101d;
}

.public-cta.secondary {
  background: rgba(255,255,255,0.12);
}

.public-cta.ghost, .public-link-button {
  background: rgba(5, 20, 36, 0.58);
}

.public-install-status {
  color: #9cc0d8;
  font-size: .9rem;
}

.public-orbit-card {
  position: relative;
  min-height: 420px;
  border-radius: 2rem;
  padding: 2rem;
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 32px 90px rgba(0,0,0,0.35), inset 0 0 80px rgba(61, 210, 255, 0.08);
  overflow: hidden;
}

.public-orbit-card::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(117, 239, 255, 0.28);
  box-shadow: 0 0 70px rgba(70, 225, 255, 0.25);
}

.hero-orb {
  width: 10rem;
  height: 10rem;
  margin: 1rem auto 1.5rem;
  display: block;
  box-shadow: 0 0 90px rgba(52, 232, 196, 0.42);
}

.public-orbit-card h2 {
  font-size: clamp(2rem, 5vw, 4.2rem);
  text-align: center;
  margin: 0;
}

.public-orbit-card p {
  text-align: center;
  color: #c4dbee;
}

.public-mini-stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
  margin-top: 2rem;
}

.public-mini-stack span {
  padding: .78rem;
  border-radius: 1rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  font-weight: 800;
}

.public-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .9rem;
  padding: 1rem clamp(1rem, 5vw, 4.5rem) 3rem;
}

.public-metric, .public-card, .public-trust-item, .public-journey {
  background: rgba(255,255,255,0.075);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1.4rem;
  box-shadow: 0 22px 60px rgba(0,0,0,0.22);
}

.public-metric {
  padding: 1rem;
  min-height: 96px;
}

.public-metric strong {
  display: block;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  letter-spacing: -0.04em;
}

.public-metric span {
  color: #a7c4d8;
  font-size: .88rem;
}

.public-section {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1rem, 5vw, 4.5rem);
}

.public-intro {
  max-width: 1100px;
}

.public-section h2 {
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: .96;
  letter-spacing: -0.06em;
  margin: .6rem 0 1rem;
}

.public-section p {
  color: #bfd7e9;
  line-height: 1.7;
}

.public-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 0 clamp(1rem, 5vw, 4.5rem) 4rem;
}

.public-card {
  padding: 1.35rem;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.public-card h3 {
  margin: 0;
  font-size: 1.55rem;
}

.public-card p { flex: 1; }

.public-link-button {
  align-self: flex-start;
}

.public-story {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 1.2rem;
  align-items: start;
}

.public-journeys, .public-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}

.public-journey, .public-trust-item {
  padding: 1rem;
}

.public-journey strong {
  color: #73f6dd;
  font-size: 1.4rem;
}

.public-final-cta {
  text-align: center;
  margin: 0 clamp(1rem, 5vw, 4.5rem) 4rem;
  border-radius: 2rem;
  background: linear-gradient(135deg, rgba(67,224,255,0.15), rgba(109,92,255,0.16), rgba(43,232,183,0.11));
  border: 1px solid rgba(255,255,255,0.16);
}

.public-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1.2rem clamp(1rem, 5vw, 4.5rem);
  color: #9fb9cc;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.offline-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  background: radial-gradient(circle at 50% 20%, rgba(67,224,255,.2), transparent 28rem), #06111f;
  color: #edf7ff;
}

.offline-shell h1 { max-width: 760px; font-size: clamp(2rem, 5vw, 4rem); }
.offline-shell p { max-width: 720px; color: #b8d1e4; line-height: 1.7; }

@media (max-width: 1080px) {
  .public-hero, .public-story { grid-template-columns: 1fr; }
  .public-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .public-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .public-nav { align-items: flex-start; }
  .public-nav, .public-footer { flex-direction: column; }
  .public-metrics, .public-grid, .public-journeys, .public-trust-grid { grid-template-columns: 1fr; }
  .public-orbit-card { min-height: auto; }
}


/* SOIA API Center — backend owns secrets, frontend sees only redacted status */
.api-center .api-summary {
  margin: .75rem 0 0;
  color: #b8d1e4;
}

.api-error {
  margin: .75rem 0 0;
  color: #ffd1d1;
  border: 1px solid rgba(255, 128, 128, .32);
  background: rgba(255, 64, 64, .08);
  border-radius: 1rem;
  padding: .75rem .9rem;
}

.api-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .9rem;
}

.api-service-card {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  border-radius: 1.2rem;
  padding: 1rem;
  min-height: 220px;
}

.api-service-card.ok {
  border-color: rgba(91, 244, 205, .32);
  background: linear-gradient(135deg, rgba(91, 244, 205, .08), rgba(255,255,255,.045));
}

.api-service-card.pending {
  border-color: rgba(255, 215, 128, .26);
  background: linear-gradient(135deg, rgba(255, 215, 128, .07), rgba(255,255,255,.04));
}

.api-service-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .8rem;
}

.api-service-head h3 {
  margin: 0;
}

.api-service-head small {
  color: #9fb9cc;
}

.api-dot {
  width: .9rem;
  height: .9rem;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
}

.api-dot.ok {
  background: #73f6dd;
  box-shadow: 0 0 18px rgba(115, 246, 221, .55);
}

.api-dot.pending {
  background: #ffcf73;
  box-shadow: 0 0 18px rgba(255, 207, 115, .45);
}

.api-key-list {
  list-style: none;
  padding: 0;
  margin: .85rem 0;
  display: grid;
  gap: .35rem;
  color: #c5d8e8;
  font-size: .85rem;
}

.api-key-list li {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .75rem;
  padding: .42rem .55rem;
  background: rgba(0,0,0,.12);
  overflow-wrap: anywhere;
}

.api-note {
  color: #9fb9cc;
  font-size: .9rem;
}

.api-probe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}

.api-probe {
  display: grid;
  gap: .25rem;
  border-radius: 1rem;
  padding: .85rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
}

.api-probe.ok {
  border-color: rgba(91, 244, 205, .34);
}

.api-probe.pending {
  border-color: rgba(255, 128, 128, .3);
}

.api-probe small {
  color: #9fb9cc;
}

/* ROA 12 — Product shell, auth, profile, private admin and live modules */
.auth-shell, .profile-shell { padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 5vw, 4.5rem); }
.auth-card, .profile-card { max-width: 760px; margin: 0 auto; border: 1px solid rgba(173,205,255,.18); background: rgba(255,255,255,.075); backdrop-filter: blur(20px); border-radius: 28px; padding: clamp(1.2rem, 4vw, 2.4rem); box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.auth-card h1, .profile-card h1 { font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: .96; letter-spacing: -.06em; }
.auth-form { display: grid; gap: .8rem; margin: 1.4rem 0; }
.auth-form input { min-height: 52px; border-radius: 18px; border: 1px solid rgba(173,205,255,.22); background: rgba(255,255,255,.08); color: #fff; padding: 0 1rem; outline: none; }
.auth-form button { min-height: 52px; border: 0; border-radius: 18px; background: linear-gradient(135deg, #43e0ff, #6d5cff 55%, #2be8b7); color: #03101d; font-weight: 900; }
.api-error { color: #ffd0d0; background: rgba(255, 91, 91, .12); border: 1px solid rgba(255, 91, 91, .26); padding: .7rem .9rem; border-radius: 14px; }
.profile-grid { max-width: 1180px; margin: 1.2rem auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.profile-tile { border: 1px solid rgba(173,205,255,.16); background: rgba(255,255,255,.06); border-radius: 22px; padding: 1rem; }
.profile-tile.wide { grid-column: 1 / -1; }
.admin-shell { grid-template-columns: 260px minmax(0, 1fr); }
.live-module .result-card { border-color: rgba(115,246,221,.38); }
.live-module .panel-card h3 { margin-bottom: .5rem; }
@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } .admin-shell { grid-template-columns: 1fr; } }

/* Microcierre producto: módulos públicos sin JSON técnico */
.module-card,
.module-strip,
.map-preview-card {
  border: 1px solid rgba(173, 205, 255, .16);
  background: rgba(255, 255, 255, .065);
  border-radius: 22px;
  padding: 1rem;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .18);
}

.module-card h3,
.module-strip h3,
.map-preview-card h3 {
  margin: 0 0 .45rem;
}

.module-card p,
.module-strip p,
.map-preview-card p {
  color: #c9daea;
}

.module-card small {
  display: inline-flex;
  margin-top: .7rem;
  color: #92b5cc;
}

.module-empty {
  border-style: dashed;
  background: rgba(255, 255, 255, .035);
}

.module-action-card {
  background: rgba(255, 255, 255, .045);
}

.map-preview-card {
  min-height: 220px;
  position: relative;
  overflow: hidden;
}

.map-preview-card::after {
  content: '';
  position: absolute;
  inset: auto -10% -45% 30%;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67, 224, 255, .20), transparent 62%);
}

.map-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  margin-top: 1rem;
  position: relative;
  z-index: 1;
}

.map-preview-grid span {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: .55rem .7rem;
  text-align: center;
  color: #d7f3ff;
  background: rgba(0, 0, 0, .14);
}

@media (max-width: 700px) {
  .map-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.public-sentinela-card,
.sentinela-surface .sentinela-hero {
  position: relative;
  overflow: hidden;
}

.public-sentinela-card::before,
.sentinela-surface .sentinela-hero::before {
  content: '';
  position: absolute;
  inset: -40% auto auto -10%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #38bdf8) 18%, transparent);
  filter: blur(36px);
  pointer-events: none;
}

.sentinela-surface .profile-tile {
  min-height: 132px;
}

/* ROA14 — producto visible: chat real, rutas públicas y módulos propios */
.chat-public-face .public-nav,
.module-face .public-nav {
  background: rgba(4, 10, 19, 0.74);
}

.chat-page-shell {
  min-height: calc(100vh - 92px);
  display: grid;
  grid-template-columns: minmax(280px, .55fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 2.4rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
}

.chat-page-intro {
  border: 1px solid rgba(173, 205, 255, .16);
  background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
  border-radius: 2rem;
  padding: clamp(1.3rem, 4vw, 2.4rem);
  box-shadow: 0 24px 80px rgba(0,0,0,.24);
  align-self: start;
}

.chat-public-face .chat-panel {
  min-height: 72vh;
  height: auto;
  border: 1px solid rgba(173, 205, 255, .16);
  background: rgba(255, 255, 255, .065);
  border-radius: 2rem;
  padding: 1rem;
  box-shadow: 0 28px 90px rgba(0,0,0,.24);
}

.chat-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .75rem;
}

.chat-action-row button,
.map-visual-head button,
.map-search-row button {
  border: 0;
  border-radius: 999px;
  padding: .68rem .9rem;
  font-weight: 850;
  color: #03101d;
  background: linear-gradient(135deg, #43e0ff, #2be8b7);
}

.module-public-shell h1,
.chat-page-intro h1 {
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.module-feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.2rem 0;
}

.module-feature-row span {
  border: 1px solid rgba(173, 205, 255, .15);
  background: rgba(255,255,255,.075);
  border-radius: 999px;
  padding: .55rem .75rem;
  color: #dcefff;
  font-weight: 760;
}

.module-live-panel .live-module,
.module-live-panel .panel-grid {
  width: 100%;
}

.product-module-card {
  min-height: 310px;
}

.map-visual-card {
  min-height: 540px;
}

.map-visual-head,
.map-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  z-index: 2;
}

.map-search-row {
  margin: 1rem 0;
}

.map-search-row input {
  flex: 1;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(173,205,255,.18);
  background: rgba(0,0,0,.18);
  color: #fff;
  padding: 0 1rem;
  outline: none;
}

.map-canvas {
  position: relative;
  z-index: 1;
  min-height: 270px;
  margin: 1rem 0;
  border-radius: 1.6rem;
  overflow: hidden;
  border: 1px solid rgba(173, 205, 255, .17);
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    radial-gradient(circle at 22% 28%, rgba(67,224,255,.34), transparent 15rem),
    radial-gradient(circle at 74% 67%, rgba(43,232,183,.24), transparent 13rem),
    rgba(2, 12, 22, .72);
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.map-pin {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.13);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 0 38px rgba(67,224,255,.38);
}

.main-pin { left: 18%; top: 26%; }
.second-pin { right: 20%; bottom: 20%; }

.map-route-line {
  position: absolute;
  left: 27%;
  right: 28%;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(67,224,255,.9), rgba(43,232,183,.86));
  transform: rotate(18deg);
  box-shadow: 0 0 28px rgba(67,224,255,.35);
}

.map-location-hint {
  position: relative;
  z-index: 2;
  color: #d8efff;
}

@media (max-width: 980px) {
  .chat-page-shell { grid-template-columns: 1fr; }
  .map-visual-head, .map-search-row { flex-direction: column; align-items: stretch; }
}

.product-modules-grid {
  scroll-margin-top: 7rem;
}

/* ROA14.2 — pantallas oficiales de producto, no manuales */
.official-screen {
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 12%, rgba(67, 224, 255, .18), transparent 28rem),
    radial-gradient(circle at 85% 8%, rgba(43, 232, 183, .13), transparent 24rem),
    #030813;
}

.official-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(1rem, 4vw, 2rem);
  padding: clamp(2.2rem, 6vw, 5rem);
  align-items: end;
}

.official-hero h1 {
  margin: .35rem 0 .75rem;
  font-size: clamp(2.7rem, 7vw, 7rem);
  line-height: .86;
  letter-spacing: -.075em;
}

.official-tabs,
.official-mini-row,
.official-form-actions,
.social-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.official-tabs { margin-top: 1.2rem; }

.official-tabs button,
.social-actions button,
.official-form-actions button,
.official-card button,
.official-empty button,
.video-play {
  border: 1px solid rgba(173, 205, 255, .16);
  border-radius: 999px;
  padding: .65rem .9rem;
  color: #eaf7ff;
  background: rgba(255, 255, 255, .08);
  font-weight: 800;
}

.official-action-panel,
.official-card,
.official-empty,
.social-card,
.market-item-card,
.channel-room-card,
.official-form,
.map-visual-stage {
  border: 1px solid rgba(173, 205, 255, .16);
  background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045));
  box-shadow: 0 24px 90px rgba(0, 0, 0, .24);
  border-radius: 1.8rem;
}

.official-action-panel {
  display: grid;
  gap: .75rem;
  padding: 1rem;
}

.official-result {
  margin: 0 clamp(1rem, 5vw, 5rem) 1rem;
  border: 1px solid rgba(43, 232, 183, .25);
  background: rgba(43, 232, 183, .09);
  color: #dffff5;
  border-radius: 1.2rem;
  padding: .9rem 1rem;
  font-weight: 800;
}

.official-layout,
.map-official-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(1rem, 3vw, 1.8rem);
  padding: 0 clamp(1rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem);
}

.official-main-column,
.official-side-column {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.official-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.official-card,
.official-empty,
.social-card,
.market-item-card,
.channel-room-card {
  padding: 1.1rem;
}

.official-card h3,
.official-empty h3,
.social-card h3,
.market-item-card h3,
.channel-room-card h3 { margin: 0 0 .55rem; }

.official-card p,
.official-empty p,
.social-card p,
.market-item-card p,
.channel-room-card p { color: #d2e8f5; }

.official-form {
  display: grid;
  gap: .8rem;
  padding: 1rem;
}

.official-form input,
.official-form textarea,
.official-form select,
.official-search input,
.official-search select,
.official-search textarea {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(173, 205, 255, .18);
  color: #fff;
  background: rgba(0, 0, 0, .22);
  padding: .85rem 1rem;
  outline: none;
}

.official-form textarea { min-height: 104px; resize: vertical; }

.official-search {
  display: flex;
  gap: .7rem;
  align-items: stretch;
}

.official-search button,
.official-form button[type="submit"] {
  border: 0;
  border-radius: 999px;
  padding: .7rem 1rem;
  color: #03101d;
  background: linear-gradient(135deg, #43e0ff, #2be8b7);
  font-weight: 900;
}

.stories-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .8rem;
}

.story-bubble {
  min-height: 98px;
  border-radius: 1.5rem;
  border: 1px solid rgba(173, 205, 255, .16);
  background: radial-gradient(circle at top, rgba(67, 224, 255, .18), rgba(255,255,255,.06));
  display: grid;
  place-items: end start;
  padding: .9rem;
  font-weight: 900;
}

.social-card-head {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  color: #eaf7ff;
}

.video-surface {
  position: relative;
  min-height: 210px;
  margin: .85rem 0;
  border-radius: 1.4rem;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 25%, rgba(67, 224, 255, .23), transparent 14rem),
    radial-gradient(circle at 70% 70%, rgba(43, 232, 183, .20), transparent 12rem),
    rgba(0, 0, 0, .28);
  border: 1px solid rgba(173, 205, 255, .15);
}

.video-surface span {
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: #eaf7ff;
  font-weight: 900;
}

.price-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: .45rem .75rem;
  margin-bottom: .8rem;
  background: rgba(43, 232, 183, .12);
  color: #dffff5;
}

.map-visual-stage { padding: 1rem; }
.floating-search { position: relative; z-index: 3; margin-bottom: 1rem; }
.map-canvas-official { min-height: 480px; }
.map-results { max-height: 680px; overflow: auto; }

.official-result-card pre { display: none; }

.builder-grid ul,
.project-card ul {
  margin: .75rem 0;
  padding-left: 1.1rem;
  color: #d2e8f5;
}

@media (max-width: 980px) {
  .official-hero,
  .official-layout,
  .map-official-layout { grid-template-columns: 1fr; }
  .official-search { flex-direction: column; }
}

/* ROA14.3 real interaction/media/map/livekit closure */
.official-tabs button.active {
  border-color: rgba(67, 224, 255, .72);
  background: rgba(67, 224, 255, .16);
  color: #f4fdff;
  box-shadow: 0 0 0 1px rgba(43, 232, 183, .22), 0 18px 38px rgba(0, 0, 0, .22);
}

.video-surface-real {
  overflow: hidden;
  align-items: stretch;
  justify-items: stretch;
  min-height: 260px;
}

.video-surface-real video,
.video-surface-real img,
.post-image-preview,
.mapbox-real-canvas img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.video-meta {
  position: absolute;
  inset: auto 1rem 1rem 1rem;
  border-radius: 1rem;
  padding: .75rem .9rem;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(14px);
  display: grid;
  gap: .2rem;
}

.video-meta span {
  position: static;
  color: #d2e8f5;
  font-weight: 700;
}

.video-empty-state {
  padding: 1.2rem;
  text-align: center;
}

.video-empty-state p {
  max-width: 34rem;
}

.market-location,
.map-location-hint {
  font-size: .93rem;
  opacity: .9;
}

.room-console {
  border-color: rgba(67, 224, 255, .22);
}

.active-room-console {
  background: linear-gradient(160deg, rgba(43, 232, 183, .12), rgba(67, 224, 255, .08)), rgba(255, 255, 255, .06);
}

.room-message-list {
  display: grid;
  gap: .45rem;
  margin-top: .8rem;
}

.room-message-list p {
  margin: 0;
  padding: .55rem .7rem;
  border-radius: .9rem;
  background: rgba(255, 255, 255, .07);
}

.radio-console,
.route-result-card {
  border: 1px solid rgba(173, 205, 255, .14);
  border-radius: 1.4rem;
  padding: 1rem;
  background: rgba(255, 255, 255, .055);
}

.mapbox-real-canvas {
  padding: 0;
  overflow: hidden;
  display: block;
  position: relative;
  background: rgba(0, 0, 0, .24);
}

.mapbox-real-canvas img {
  min-height: 480px;
}

.map-source-pill {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  border-radius: 999px;
  padding: .45rem .75rem;
  background: rgba(0, 0, 0, .5);
  color: #eaf7ff;
  font-weight: 900;
  backdrop-filter: blur(14px);
}

.admin-workspace {
  overflow: auto;
}

.admin-summary-grid,
.admin-content-grid,
.admin-list-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.admin-content-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.admin-content-form {
  display: grid;
  gap: .7rem;
}

.admin-content-form input,
.admin-content-form select,
.admin-content-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1rem;
  padding: .8rem .9rem;
  background: rgba(255, 255, 255, .08);
  color: inherit;
}

.admin-content-form textarea {
  min-height: 96px;
  resize: vertical;
}

.admin-count-card strong {
  display: inline-flex;
  min-width: 2.8rem;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .12);
  font-size: 1.35rem;
}

.official-result.ok {
  border-color: rgba(100, 255, 194, .35);
}

.official-result.error {
  border-color: rgba(255, 120, 120, .35);
}

.skeleton-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.5rem;
  padding: 1.1rem;
  background: rgba(255,255,255,.06);
  min-height: 150px;
  display: grid;
  gap: .75rem;
  align-content: center;
  overflow: hidden;
}

.skeleton-line {
  display: block;
  height: .85rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.2), rgba(255,255,255,.08));
  background-size: 180% 100%;
  animation: soiaSkeleton 1.15s ease-in-out infinite;
}
.skeleton-line.short { width: 38%; }
.skeleton-line.medium { width: 62%; }
.skeleton-line.long { width: 90%; }
@keyframes soiaSkeleton { from { background-position: 180% 0; } to { background-position: -180% 0; } }

.inline-action-form,
.official-search {
  display: flex;
  gap: .65rem;
  align-items: stretch;
  flex-wrap: wrap;
  margin: .85rem 0;
}

.inline-action-form input,
.official-search input,
.udl-exercise-form textarea {
  min-width: min(100%, 260px);
  flex: 1;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 1rem;
  padding: .82rem 1rem;
  background: rgba(255,255,255,.08);
  color: inherit;
}

.comment-list,
.room-message-list {
  display: grid;
  gap: .45rem;
  margin-top: .75rem;
  padding: .8rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.055);
}

.article-reader { margin-bottom: 1rem; }
.article-meta { opacity: .72; font-size: .92rem; }

.message.typing p::after {
  content: '';
  display: inline-block;
  width: 1.1rem;
  animation: soiaTyping 1s steps(4, end) infinite;
}
@keyframes soiaTyping { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%,100% { content: '...'; } }

.mapbox-live-stage {
  width: 100%;
  min-height: 520px;
  border-radius: 1.8rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(8,12,22,.55);
  position: relative;
  z-index: 1;
}

.mapbox-live-stage + .map-canvas,
.mapbox-live-stage + .map-static-card {
  margin-top: 1rem;
}

.world-globe-card { overflow: hidden; }
.world-globe-stage {
  min-height: 280px;
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at 50% 35%, rgba(93,233,255,.16), rgba(11,18,35,.55) 62%);
  overflow: hidden;
}

.admin-moderation-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: .45rem;
  align-items: center;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.admin-moderation-row button { padding: .45rem .65rem; }

@media (max-width: 820px) {
  .admin-moderation-row { grid-template-columns: 1fr; }
  .mapbox-live-stage { min-height: 380px; }
}

.admin-moderation-row {
  grid-template-columns: minmax(180px, 1fr) repeat(6, auto);
}

button.danger,
.danger {
  border-color: rgba(255, 112, 112, .45) !important;
}

button.danger.ghost {
  background: rgba(255, 112, 112, .08);
}

.admin-preview-card img,
.admin-preview-card video {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 1.25rem;
  margin: .75rem 0;
  border: 1px solid rgba(255,255,255,.12);
}

.admin-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.udl-lesson-screen {
  border-color: rgba(147, 197, 253, .28);
}

.lesson-steps {
  display: grid;
  gap: .8rem;
  margin: 1rem 0;
}

.lesson-steps section {
  padding: .95rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.class-course-selector {
  opacity: .98;
}

@media (max-width: 820px) {
  .admin-moderation-row {
    grid-template-columns: 1fr;
  }
  .admin-preview-head {
    flex-direction: column;
  }
}

.profile-edit-form,
.admin-edit-card,
.story-detail-card {
  width: min(100%, 960px);
  margin: 1rem 0;
}

.form-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.profile-edit-form label,
.admin-edit-card label {
  display: grid;
  gap: .35rem;
  font-size: .9rem;
  color: var(--muted);
}

.profile-edit-form input,
.profile-edit-form textarea,
.profile-edit-form select,
.admin-edit-card input,
.admin-edit-card textarea,
.admin-edit-card select {
  width: 100%;
}

.real-stories-row .story-bubble {
  min-width: 150px;
  min-height: 92px;
  display: grid;
  align-content: center;
  justify-items: start;
  text-align: left;
}

.real-stories-row .story-bubble small {
  max-width: 190px;
  opacity: .78;
  line-height: 1.25;
}

.story-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.mapbox-live-stage + .map-canvas {
  margin-top: .75rem;
}

.route-result-card p + p {
  opacity: .78;
  margin-top: .35rem;
}

@media (max-width: 720px) {
  .form-grid.two { grid-template-columns: 1fr; }
  .story-detail-head { flex-direction: column; align-items: stretch; }
}

/* ROA16 — Producto visible premium: capa unificada de jerarquía, guía y continuidad */
.premium-ecosystem-preview,
.premium-experience-rail,
.official-premium-body {
  position: relative;
  z-index: 1;
}

.premium-ecosystem-preview {
  margin: 0 clamp(1rem, 5vw, 4.5rem) 3rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 2rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045)),
    radial-gradient(circle at 12% 20%, rgba(115,246,221,.16), transparent 24rem),
    radial-gradient(circle at 88% 0%, rgba(109,92,255,.18), transparent 22rem);
  box-shadow: 0 26px 80px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(22px);
}

.premium-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .85rem;
  margin: 1.25rem 0;
}

.premium-stat-pill {
  min-height: 112px;
  padding: 1rem;
  border-radius: 1.3rem;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.premium-stat-pill strong {
  display: block;
  font-size: clamp(1.6rem, 4vw, 3rem);
  letter-spacing: -.05em;
  line-height: 1;
}

.premium-stat-pill span,
.premium-stat-pill small {
  display: block;
  color: #aac8dd;
  margin-top: .3rem;
}

.premium-module-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .7rem;
}

.premium-module-strip button {
  text-align: left;
  padding: .95rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1.1rem;
  color: #edf7ff;
  background: rgba(7, 20, 34, .62);
  min-height: 92px;
}

.premium-module-strip button:hover,
.chat-premium-tools button:hover,
.official-tabs button:hover {
  transform: translateY(-1px);
  border-color: rgba(115,246,221,.44);
  background: rgba(67,224,255,.13);
}

.premium-module-strip strong,
.premium-module-strip span {
  display: block;
}

.premium-module-strip span {
  color: #9fbed6;
  font-size: .82rem;
  margin-top: .35rem;
}

.premium-experience-rail {
  display: grid;
  grid-template-columns: 1.08fr .92fr .8fr;
  gap: .9rem;
  margin: 0 clamp(1rem, 5vw, 4.5rem) 1.2rem;
}

.admin-workspace .premium-experience-rail,
.profile-shell .premium-experience-rail {
  margin-inline: 0;
}

.premium-rail-card {
  padding: 1rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045)),
    radial-gradient(circle at 0% 0%, rgba(115,246,221,.11), transparent 16rem);
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  min-height: 148px;
}

.premium-rail-card h2,
.premium-rail-card h3 {
  margin: .45rem 0 .55rem;
  letter-spacing: -.03em;
}

.premium-rail-card p {
  margin-bottom: 0;
  color: #c1d8eb;
}

.premium-step-line,
.premium-proof-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .6rem;
}

.premium-step-line span,
.premium-proof-list span {
  padding: .46rem .62rem;
  border-radius: 999px;
  color: #eaf8ff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.11);
  font-size: .84rem;
}

.official-premium-body {
  display: grid;
  gap: 1.15rem;
}

.chat-premium-layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.chat-premium-tools {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1.4rem;
  background: rgba(255,255,255,.07);
  padding: 1rem;
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
  align-self: stretch;
}

.chat-premium-tools h3 {
  margin: .55rem 0 .45rem;
  font-size: 1.4rem;
}

.chat-premium-tools button {
  width: 100%;
  margin-top: .55rem;
  padding: .85rem 1rem;
  text-align: left;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 1rem;
  color: #edf7ff;
  background: rgba(7, 20, 34, .62);
}

.chat-public-face .chat-panel {
  min-height: 68vh;
  height: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.45rem;
  background: rgba(255,255,255,.055);
  padding: .9rem;
  box-shadow: 0 24px 70px rgba(0,0,0,.2);
}

.chat-public-face .messages {
  max-height: 64vh;
  padding-right: .25rem;
}

.official-screen .official-hero {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.official-card,
.profile-card,
.profile-tile,
.admin-content-grid form,
.admin-edit-card,
.admin-preview-card {
  box-shadow: 0 18px 55px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}

.profile-shell,
.chat-page-shell {
  padding-bottom: 2rem;
}

.profile-edit-form {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1.4rem;
  background: rgba(255,255,255,.07);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.admin-shell .premium-rail-card {
  background: linear-gradient(145deg, rgba(67,224,255,.10), rgba(255,255,255,.045));
}

@media (max-width: 1180px) {
  .premium-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .premium-module-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .premium-experience-rail,
  .chat-premium-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .premium-ecosystem-preview,
  .premium-experience-rail { margin-inline: .8rem; }
  .premium-kpi-grid,
  .premium-module-strip { grid-template-columns: 1fr; }
  .premium-rail-card,
  .premium-stat-pill { min-height: auto; }
  .chat-premium-tools { order: 2; }
  .chat-public-face .messages { max-height: 58vh; }
  .public-hero h1 { letter-spacing: -.05em; }
}

/* ROA16.2 — integración premium por pantalla, sin nuevas rutas ni arquitectura paralela */
.market-item-premium-card {
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(160px, auto) 1fr;
  gap: 0;
  padding: 0;
}

.market-card-body {
  display: grid;
  gap: .72rem;
  padding: 1rem;
}

.market-media {
  width: 100%;
  border-radius: 1.15rem;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
}

.market-media-card {
  min-height: 165px;
  max-height: 220px;
  border-radius: 1.25rem 1.25rem .75rem .75rem;
}

.market-media-detail {
  min-height: 190px;
  max-height: 300px;
}

.market-media-placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  gap: .35rem;
}

.market-media-placeholder strong {
  max-width: 90%;
}

.market-trust-strip,
.radio-presence-grid,
.udl-path-steps,
.map-layer-picker,
.admin-control-board {
  display: grid;
  gap: .65rem;
}

.market-trust-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.market-trust-strip span,
.radio-presence-grid span,
.map-layer-picker button,
.udl-path-steps span {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem;
  padding: .72rem .78rem;
  background: rgba(255,255,255,.065);
}

.market-trust-strip small,
.radio-presence-grid small {
  display: block;
  opacity: .72;
  margin-bottom: .15rem;
}

.market-detail-premium {
  display: grid;
  gap: .8rem;
}

.market-vertical-details {
  display: grid;
  gap: .45rem;
  padding: .75rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
}

.stacked-actions {
  align-items: stretch;
}

.radio-room-console {
  min-height: 280px;
}

.radio-room-live {
  padding: 1.05rem;
}

.radio-room-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}

.ptt-orb {
  width: 104px;
  min-height: 104px;
  border-radius: 999px;
  white-space: normal;
  text-align: center;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 22px 55px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16);
}

.ptt-orb.is-live {
  transform: scale(1.04);
}

.radio-presence-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.radio-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .8rem 0;
}

.radio-status-strip span {
  padding: .48rem .68rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.radio-message-list {
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: .45rem;
  margin-top: .8rem;
}

.radio-message-list p {
  border-radius: .9rem;
  padding: .62rem .72rem;
  background: rgba(255,255,255,.06);
}

.map-layer-picker {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: .65rem 0;
}

.map-layer-picker button.active,
.udl-path-steps span.active {
  border-color: rgba(255,255,255,.32);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.route-result-card .social-actions {
  margin-top: .75rem;
}

.udl-learning-dashboard {
  display: grid;
  grid-template-columns: 1.25fr .9fr .9fr;
  gap: 1rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  margin: 1rem 0;
}

.udl-path-steps {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: .8rem;
}

.udl-library-labs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.admin-control-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1rem 0;
}

.admin-control-card {
  min-height: 210px;
}

@media (max-width: 980px) {
  .market-trust-strip,
  .radio-presence-grid,
  .map-layer-picker,
  .udl-learning-dashboard,
  .udl-path-steps,
  .admin-control-board {
    grid-template-columns: 1fr;
  }
  .radio-room-header { grid-template-columns: 1fr; }
  .ptt-orb { width: 100%; min-height: 86px; border-radius: 1.35rem; }
  .udl-library-labs { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .market-item-premium-card,
  .market-detail-premium,
  .radio-room-console,
  .udl-learning-dashboard,
  .admin-control-board {
    border-radius: 1rem;
  }
  .market-card-body,
  .radio-room-live { padding: .8rem; }
  .official-hero { gap: .8rem; }
}

.ptt-orb {
  touch-action: none;
  user-select: none;
}

.ptt-orb.is-live {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 18px 44px rgba(0,0,0,.28);
}

.market-vertical-fields {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.market-vertical-fields fieldset {
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: .8rem;
  display: grid;
  gap: .55rem;
  background: rgba(255,255,255,.04);
}

.market-vertical-fields legend {
  padding: 0 .35rem;
  font-weight: 800;
}

.market-detail-fields {
  display: grid;
  gap: .25rem;
  padding: .75rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
}

.udl-tab-panel,
.builder-tab-panel {
  animation: softIn .18s ease-out;
}

@keyframes softIn {
  from { opacity: .68; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .market-vertical-fields { grid-template-columns: 1fr; }
}

/* ROA17 — Home pública corporativa premium: portada de marca, no panel interno */
.roa17-public-home {
  background:
    radial-gradient(circle at 12% 8%, rgba(89, 218, 255, .30), transparent 30rem),
    radial-gradient(circle at 92% 10%, rgba(167, 122, 255, .26), transparent 34rem),
    radial-gradient(circle at 48% 62%, rgba(63, 238, 198, .16), transparent 30rem),
    linear-gradient(135deg, #03070f 0%, #071426 46%, #050b17 100%);
}

.roa17-public-home .public-nav {
  background: rgba(3, 7, 15, .72);
  box-shadow: 0 14px 48px rgba(0, 0, 0, .22);
}

.roa17-hero {
  min-height: min(860px, calc(100vh - 70px));
  padding-top: clamp(4rem, 9vw, 8rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.roa17-hero .hero-copy {
  position: relative;
  z-index: 1;
}

.roa17-hero h1 {
  max-width: 1080px;
  font-size: clamp(3.05rem, 8.6vw, 8.4rem);
  letter-spacing: -.09em;
  text-wrap: balance;
}

.roa17-hero .public-lead,
.roa17-hero .public-position {
  max-width: 840px;
}

.roa17-orbit-card {
  isolation: isolate;
  transform: translateY(-.5rem);
}

.roa17-orbit-card::after {
  content: '';
  position: absolute;
  inset: 18% -26% -28% 42%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 62%);
  filter: blur(8px);
  z-index: -1;
}

.orbit-ring-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 1.7rem;
}

.orbit-ring-list span,
.module-preview-line {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.075);
  border-radius: 999px;
  padding: .66rem .8rem;
  color: #dff7ff;
  text-align: center;
  font-weight: 800;
}

.roa17-signal-row {
  margin-top: -2.4rem;
  position: relative;
  z-index: 2;
}

.roa17-signal-row .public-metric {
  backdrop-filter: blur(18px);
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
}

.roa17-identity-section {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: clamp(1rem, 4vw, 2.5rem);
  align-items: stretch;
}

.identity-proof-grid,
.how-steps-grid,
.curated-highlight-grid {
  display: grid;
  gap: .9rem;
}

.identity-proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.identity-proof-card,
.how-step-card,
.curated-highlight-card,
.chat-preview-card {
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045)),
    radial-gradient(circle at 0% 0%, rgba(115,246,221,.10), transparent 16rem);
  border-radius: 1.45rem;
  padding: 1.1rem;
  box-shadow: 0 22px 68px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}

.identity-proof-card strong,
.how-step-card strong {
  display: inline-flex;
  margin-bottom: .55rem;
  color: #73f6dd;
  font-size: 1.1rem;
}

.roa17-ecosystem-preview .public-intro h2 {
  font-size: clamp(2.1rem, 5.2vw, 5.1rem);
  line-height: .94;
  letter-spacing: -.065em;
}

.ecosystem-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ecosystem-strip button {
  min-height: 142px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ecosystem-strip small {
  color: #73f6dd;
  font-weight: 800;
  letter-spacing: .02em;
}

.roa17-module-grid .public-card {
  min-height: 340px;
  position: relative;
  overflow: hidden;
}

.roa17-module-grid .public-card::before {
  content: '';
  position: absolute;
  inset: auto -22% -38% 28%;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(67,224,255,.13), transparent 65%);
  pointer-events: none;
}

.roa17-module-grid .public-card > * {
  position: relative;
  z-index: 1;
}

.module-preview-line {
  display: inline-flex;
  align-self: flex-start;
  padding: .45rem .65rem;
  font-size: .78rem;
  color: #dff7ff;
}

.how-it-works-section {
  padding-top: clamp(2rem, 5vw, 4.5rem);
}

.how-steps-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.2rem;
}

.how-step-card {
  min-height: 220px;
}

.how-step-card h3,
.curated-highlight-card h3 {
  margin-bottom: .5rem;
}

.chat-gateway-section {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(320px, 1.18fr);
  gap: clamp(1rem, 4vw, 2.3rem);
  align-items: center;
}

.chat-preview-card {
  display: grid;
  gap: .8rem;
  min-height: 300px;
  align-content: center;
  background:
    linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.048)),
    radial-gradient(circle at 78% 18%, rgba(109,92,255,.18), transparent 20rem);
}

.chat-preview-message {
  max-width: 86%;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(5, 20, 36, .58);
  border-radius: 1.2rem;
  padding: .9rem 1rem;
}

.chat-preview-message.user {
  justify-self: end;
}

.chat-preview-message.soia {
  justify-self: start;
  border-color: rgba(115,246,221,.26);
}

.chat-preview-message p {
  margin-bottom: 0;
}

.curated-highlight-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1rem;
}

.curated-highlight-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
}

.curated-highlight-card p {
  flex: 1;
}

.roa17-sentinela-story {
  margin-inline: clamp(1rem, 5vw, 4.5rem);
  border-radius: 2.2rem;
  background:
    linear-gradient(135deg, rgba(67,224,255,.14), rgba(255,255,255,.055)),
    radial-gradient(circle at 85% 10%, rgba(115,246,221,.16), transparent 26rem);
  border: 1px solid rgba(255,255,255,.15);
}

.roa17-final-cta {
  overflow: hidden;
}

.corporate-footer {
  align-items: flex-start;
  padding-block: 1.6rem;
}

.footer-brand-block {
  display: grid;
  gap: .35rem;
  max-width: 620px;
}

.footer-brand-block strong {
  color: #edf7ff;
  letter-spacing: .08em;
}

.footer-brand-block small,
.footer-brand-block span {
  color: #9fb9cc;
}

.footer-link-grid {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 1180px) {
  .roa17-identity-section,
  .chat-gateway-section { grid-template-columns: 1fr; }
  .identity-proof-grid,
  .how-steps-grid,
  .ecosystem-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .roa17-hero { min-height: auto; }
  .roa17-signal-row { margin-top: 0; }
  .identity-proof-grid,
  .how-steps-grid,
  .curated-highlight-grid,
  .ecosystem-strip,
  .orbit-ring-list { grid-template-columns: 1fr; }
  .roa17-module-grid .public-card { min-height: auto; }
  .chat-preview-message { max-width: 100%; }
  .footer-link-grid { justify-content: flex-start; }
}

/* ROA18 — Chat IA fullscreen, tipografía premium y pantallas limpias por módulo */
:root {
  --soia-page-max: 1480px;
  --soia-reading: clamp(1rem, .96rem + .22vw, 1.15rem);
  --soia-title-weight: 900;
  --soia-card-radius: 1.75rem;
}

html {
  font-size: 16.5px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  line-height: 1.58;
}

button,
input,
textarea,
select {
  font: inherit;
}

textarea {
  color: #f4fbff;
  outline: none;
}

h1,
h2,
h3 {
  font-weight: var(--soia-title-weight);
  letter-spacing: -.055em;
  text-wrap: balance;
}

p,
li,
small,
span {
  text-wrap: pretty;
}

p,
.public-lead,
.official-card p,
.social-card p,
.market-item-card p,
.channel-room-card p,
.profile-tile p {
  font-size: var(--soia-reading);
  line-height: 1.64;
}

.public-eyebrow,
.public-card-kicker,
.badge,
.status {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
}

.public-cta,
.official-tabs button,
.social-actions button,
.official-form-actions button,
.official-card button,
.official-empty button,
.prompt-form button {
  min-height: 46px;
  font-weight: 900;
  letter-spacing: -.01em;
}

.roa18-chat-face {
  background:
    radial-gradient(circle at 12% 8%, rgba(92, 222, 255, .26), transparent 34rem),
    radial-gradient(circle at 88% 2%, rgba(125, 101, 255, .24), transparent 36rem),
    linear-gradient(135deg, #030813 0%, #071426 52%, #040a13 100%);
}

.chat-fullscreen-shell {
  min-height: calc(100vh - 74px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  width: min(var(--soia-page-max), calc(100% - clamp(1.2rem, 5vw, 5rem)));
  margin: 0 auto;
  padding: clamp(1.4rem, 3.5vw, 3rem) 0 clamp(1.8rem, 4vw, 3.5rem);
}

.chat-fullscreen-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
}

.chat-fullscreen-head h1 {
  margin: .2rem 0 .55rem;
  font-size: clamp(3.2rem, 8vw, 7.8rem);
  line-height: .88;
}

.chat-fullscreen-head .public-lead {
  max-width: 900px;
  margin-bottom: 0;
  color: #cfe8f8;
}

.chat-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: flex-end;
}

.chat-fullscreen-layout {
  min-height: min(78vh, 850px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: clamp(1rem, 2vw, 1.35rem);
  align-items: stretch;
}

.chat-public-face .chat-fullscreen-panel,
.chat-fullscreen-panel {
  min-height: min(78vh, 850px);
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1rem;
  border-radius: 2rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.052)),
    radial-gradient(circle at 18% 0%, rgba(115,246,221,.10), transparent 22rem);
  box-shadow: 0 34px 110px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}

.chat-thread-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
  padding-bottom: .9rem;
}

.chat-thread-header h2 {
  margin: .25rem 0 0;
  font-size: clamp(1.45rem, 2.8vw, 2.45rem);
}

.chat-thread-status {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: flex-end;
}

.chat-thread-status span {
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.07);
  color: #dff7ff;
  border-radius: 999px;
  padding: .48rem .7rem;
  font-size: .82rem;
  font-weight: 850;
}

.chat-public-face .messages,
.chat-conversation {
  max-height: none;
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: .95rem;
  padding: .2rem .25rem .2rem 0;
  align-content: start;
}

.message.chat-message {
  width: min(100%, 920px);
  max-width: none;
  border-radius: 1.35rem;
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}

.message.chat-message.soia {
  justify-self: start;
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.052)),
    radial-gradient(circle at 0% 0%, rgba(115,246,221,.10), transparent 14rem);
}

.message.chat-message.user {
  justify-self: end;
  width: min(92%, 760px);
  background: rgba(82,142,255,.19);
}

.message-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .45rem;
}

.message-label span {
  color: #94bdd1;
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.message.chat-message p {
  margin-bottom: 0;
  color: #e5f4ff;
  font-size: clamp(1rem, .96rem + .2vw, 1.16rem);
}

.chat-composer {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: end;
  border-top: 1px solid rgba(255,255,255,.09);
  padding-top: .9rem;
}

.chat-composer textarea {
  width: 100%;
  min-height: 66px;
  max-height: 180px;
  resize: vertical;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(3, 12, 24, .58);
  padding: 1rem 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.chat-composer button {
  min-height: 66px;
  border-radius: 1.25rem;
  margin: 0;
  padding-inline: 1.35rem;
}

.chat-fullscreen-layout .chat-premium-tools {
  min-height: 100%;
  position: sticky;
  top: 6rem;
  align-self: start;
  border-radius: 1.55rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.042)),
    radial-gradient(circle at 0% 0%, rgba(109,92,255,.13), transparent 18rem);
}

.chat-fullscreen-layout .chat-premium-tools h3 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.02;
}

.roa18-screen {
  background:
    radial-gradient(circle at 14% 8%, rgba(67,224,255,.18), transparent 30rem),
    radial-gradient(circle at 90% 10%, rgba(115,246,221,.11), transparent 26rem),
    linear-gradient(135deg, #030813 0%, #061322 100%);
}

.roa18-module-hero {
  width: min(var(--soia-page-max), 100%);
  margin: 0 auto;
  padding-top: clamp(2.4rem, 5vw, 4.5rem);
  padding-bottom: clamp(1.6rem, 3.5vw, 2.8rem);
}

.official-hero-copy h1,
.official-udl .official-hero h1,
.official-builder .official-hero h1 {
  font-size: clamp(3.1rem, 7.8vw, 7.2rem);
  line-height: .86;
}

.roa18-action-panel {
  align-self: stretch;
  justify-content: end;
  background:
    linear-gradient(150deg, rgba(255,255,255,.11), rgba(255,255,255,.048)),
    radial-gradient(circle at 100% 0%, rgba(115,246,221,.12), transparent 18rem);
}

.roa18-screen .premium-experience-rail,
.official-udl .premium-experience-rail,
.official-builder .premium-experience-rail {
  width: min(var(--soia-page-max), calc(100% - clamp(1rem, 5vw, 5rem)));
  margin-left: auto;
  margin-right: auto;
}

.roa18-screen .official-layout,
.official-udl .official-layout,
.official-builder .official-layout {
  width: min(var(--soia-page-max), calc(100% - clamp(1rem, 5vw, 5rem)));
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

.roa18-screen .official-card,
.roa18-screen .official-empty,
.roa18-screen .social-card,
.roa18-screen .market-item-card,
.roa18-screen .channel-room-card,
.official-udl .official-card,
.official-builder .official-card,
.roa18-profile-screen .profile-card,
.roa18-profile-screen .profile-tile,
.roa18-admin-screen .panel-card,
.roa18-admin-screen .official-card {
  border-radius: var(--soia-card-radius);
}

.roa18-world-screen .official-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
}

.roa18-world-screen .social-grid {
  grid-template-columns: 1fr;
}

.roa18-world-screen .social-card {
  min-height: 230px;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.roa18-world-screen .stories-row {
  gap: .8rem;
  overflow-x: auto;
  padding-bottom: .2rem;
}

.roa18-world-screen .story-bubble {
  min-width: 210px;
  min-height: 126px;
}

.roa18-market-screen .official-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
}

.roa18-market-screen .market-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.roa18-market-screen .market-item-premium-card {
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.roa18-market-screen .market-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.roa18-market-screen .market-card-body .social-actions {
  margin-top: auto;
}

.roa18-market-screen .market-detail-premium {
  position: sticky;
  top: 6rem;
}

.roa18-channels-screen .official-layout {
  grid-template-columns: minmax(0, .9fr) minmax(360px, .75fr);
}

.roa18-channels-screen .channels-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.roa18-channels-screen .radio-room-console {
  min-height: 360px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.052)),
    radial-gradient(circle at 12% 0%, rgba(67,224,255,.12), transparent 18rem);
}

.roa18-map-screen .map-official-layout {
  width: min(var(--soia-page-max), calc(100% - clamp(1rem, 5vw, 5rem)));
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}

.roa18-map-screen .map-visual-stage,
.roa18-map-screen .mapbox-live-stage,
.roa18-map-screen .map-canvas-official {
  min-height: min(76vh, 780px);
}

.roa18-map-screen .map-results {
  max-height: min(76vh, 780px);
  overflow: auto;
}

.roa18-udl-screen .official-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .65fr);
}

.roa18-udl-screen .udl-lesson-screen,
.roa18-udl-screen .class-card {
  min-height: 360px;
}

.roa18-builder-screen .official-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.roa18-builder-screen .builder-grid {
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

.roa18-builder-screen .project-card {
  min-height: 330px;
}

.roa18-profile-screen .profile-shell {
  width: min(var(--soia-page-max), calc(100% - clamp(1rem, 5vw, 5rem)));
  margin: 0 auto;
  display: grid;
  gap: 1.15rem;
  padding-left: 0;
  padding-right: 0;
}

.roa18-profile-screen .profile-card {
  max-width: none;
  margin: 0;
  min-height: 300px;
  display: grid;
  align-content: end;
}

.roa18-profile-screen .profile-grid {
  max-width: none;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.roa18-profile-screen .profile-tile.wide {
  grid-column: 1 / -1;
}

.roa18-admin-screen {
  gap: 1rem;
  padding: 1rem;
}

.roa18-admin-screen .admin-workspace {
  border-radius: 1.9rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.04)),
    radial-gradient(circle at 82% 0%, rgba(67,224,255,.12), transparent 22rem);
}

.roa18-admin-screen .topbar h1 {
  font-size: clamp(2.1rem, 5vw, 4.8rem);
  line-height: .92;
}

.roa18-admin-screen .admin-summary-grid,
.roa18-admin-screen .admin-content-grid,
.roa18-admin-screen .admin-list-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

@media (max-width: 1180px) {
  .chat-fullscreen-head,
  .chat-fullscreen-layout,
  .roa18-world-screen .official-layout,
  .roa18-market-screen .official-layout,
  .roa18-channels-screen .official-layout,
  .roa18-map-screen .map-official-layout,
  .roa18-udl-screen .official-layout,
  .roa18-builder-screen .official-layout {
    grid-template-columns: 1fr;
  }
  .chat-head-actions {
    justify-content: flex-start;
  }
  .chat-fullscreen-layout .chat-premium-tools,
  .roa18-market-screen .market-detail-premium {
    position: static;
  }
}

@media (max-width: 720px) {
  html { font-size: 15.5px; }
  .chat-fullscreen-shell {
    width: calc(100% - 1rem);
    padding-top: 1rem;
  }
  .chat-fullscreen-head h1 {
    font-size: clamp(2.65rem, 14vw, 4rem);
  }
  .chat-thread-header,
  .chat-composer {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .chat-composer button {
    width: 100%;
  }
  .roa18-screen .official-layout,
  .official-udl .official-layout,
  .official-builder .official-layout,
  .roa18-map-screen .map-official-layout,
  .roa18-profile-screen .profile-shell {
    width: calc(100% - 1rem);
  }
  .roa18-module-hero {
    padding-inline: .8rem;
  }
  .chat-fullscreen-layout,
  .chat-public-face .chat-fullscreen-panel,
  .chat-fullscreen-panel,
  .roa18-map-screen .map-visual-stage,
  .roa18-map-screen .mapbox-live-stage,
  .roa18-map-screen .map-canvas-official {
    min-height: 68vh;
  }
}

/* ROA18.2 — cierre visual real: chat como superficie principal y módulos con identidad propia */
:root {
  --soia-display: clamp(3.6rem, 7.6vw, 8rem);
  --soia-headline: clamp(2.2rem, 5vw, 5.2rem);
  --soia-subhead: clamp(1.35rem, 2.5vw, 2.4rem);
  --soia-body: clamp(1rem, .95rem + .24vw, 1.18rem);
  --soia-small: clamp(.82rem, .78rem + .12vw, .94rem);
}

body,
.public-face,
.official-screen,
.chat-public-face {
  font-size: var(--soia-body);
}

h1 { font-size: var(--soia-display); }
h2 { font-size: var(--soia-headline); }
h3 { font-size: var(--soia-subhead); }

.public-face p,
.official-screen p,
.chat-public-face p,
.official-form input,
.official-form textarea,
.official-form select,
.prompt-form textarea {
  line-height: 1.7;
}

.roa18-2-chat-face {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(67,224,255,.2), transparent 34rem),
    radial-gradient(circle at 88% 12%, rgba(115,246,221,.14), transparent 30rem),
    linear-gradient(135deg, #020711 0%, #06111e 56%, #02060d 100%);
}

.roa18-2-chat-face .public-nav {
  min-height: 64px;
  padding-block: .72rem;
  background: rgba(2, 7, 17, .8);
}

.chat-app-shell {
  height: calc(100vh - 64px);
  width: min(1760px, calc(100% - clamp(.8rem, 2vw, 2rem)));
  margin: 0 auto;
  padding: clamp(.65rem, 1.4vw, 1.15rem) 0 clamp(.8rem, 1.6vw, 1.2rem);
  display: grid;
  grid-template-columns: minmax(80px, 260px) minmax(0, 1fr);
  gap: clamp(.65rem, 1.5vw, 1.1rem);
}

.chat-session-rail {
  min-height: 0;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 1.45rem;
  padding: .9rem;
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 70px rgba(0,0,0,.22);
  display: grid;
  grid-auto-rows: max-content;
  gap: .85rem;
  overflow: auto;
}

.chat-rail-brand,
.chat-rail-section button {
  width: 100%;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.055);
  color: #f2fbff;
  border-radius: 1rem;
  padding: .78rem .9rem;
  text-align: left;
}

.chat-rail-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: 1.08rem;
  letter-spacing: -.02em;
}

.mini-orb { width: 28px; height: 28px; }

.chat-rail-section {
  display: grid;
  gap: .45rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.chat-rail-section small {
  color: #8fb3c8;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 900;
  font-size: var(--soia-small);
}

.chat-rail-section.compact button,
.chat-rail-routes button {
  min-height: 42px;
  padding: .65rem .72rem;
}

.chat-rail-primary {
  color: #03101d !important;
  background: linear-gradient(135deg, #43e0ff, #2be8b7) !important;
  font-weight: 950;
}

.chat-main-surface {
  min-height: 0;
  display: grid;
}

.roa18-2-chat-face .chat-panel,
.roa18-2-chat-face .chat-fullscreen-panel {
  min-height: 0;
  height: 100%;
  border-radius: 1.55rem;
  padding: clamp(.9rem, 1.8vw, 1.35rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
    radial-gradient(circle at 50% 0%, rgba(67,224,255,.11), transparent 28rem);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 28px 95px rgba(0,0,0,.26);
}

.roa18-2-chat-face .chat-thread-header {
  align-items: center;
  padding-bottom: .7rem;
}

.roa18-2-chat-face .chat-thread-header h2 {
  font-size: clamp(1.25rem, 2.2vw, 2.1rem);
  letter-spacing: -.045em;
}

.roa18-2-chat-face .chat-thread-header .public-eyebrow {
  font-size: .68rem;
}

.roa18-2-chat-face .chat-conversation {
  padding: clamp(.55rem, 1.2vw, 1rem) max(1rem, 6vw);
  align-content: start;
  gap: 1.05rem;
  scroll-padding-bottom: 8rem;
}

.roa18-2-chat-face .message.chat-message {
  width: min(100%, 980px);
  padding: clamp(1rem, 1.7vw, 1.35rem) clamp(1rem, 1.9vw, 1.55rem);
  border-radius: 1.25rem;
  font-size: var(--soia-body);
}

.roa18-2-chat-face .message.chat-message.user {
  width: min(78%, 780px);
}

.roa18-2-chat-face .message.chat-message.soia {
  width: min(94%, 1050px);
}

.roa18-2-chat-face .chat-composer {
  width: min(1120px, 100% - 2rem);
  margin: 0 auto;
  padding: .8rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.55rem;
  background: rgba(2, 10, 22, .86);
  box-shadow: 0 20px 70px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
  position: sticky;
  bottom: .9rem;
}

.roa18-2-chat-face .chat-composer textarea {
  min-height: 70px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: .8rem .9rem;
  font-size: clamp(1.03rem, 1vw + .8rem, 1.22rem);
}

.roa18-2-chat-face .chat-composer button {
  min-height: 58px;
  min-width: 118px;
  border-radius: 1.15rem;
}

.roa18-2-chat-face .chat-premium-tools,
.roa18-2-chat-face .chat-fullscreen-head,
.roa18-2-chat-face .public-footer {
  display: none !important;
}

/* Identidad visual por módulo: ya no se siente como una sola plantilla repetida */
.roa18-world-screen {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,96,174,.16), transparent 28rem),
    radial-gradient(circle at 80% 20%, rgba(67,224,255,.12), transparent 30rem),
    linear-gradient(135deg, #050713 0%, #10101f 100%);
}

.roa18-world-screen .world-editorial-layout {
  grid-template-columns: minmax(0, 740px) minmax(360px, 1fr);
  align-items: start;
}

.roa18-world-screen .world-feed-column {
  max-width: 760px;
  margin-inline: auto;
}

.roa18-world-screen .social-grid {
  gap: 1.2rem;
}

.roa18-world-screen .social-card {
  border-radius: 2rem;
  background: rgba(255,255,255,.07);
  box-shadow: 0 22px 70px rgba(0,0,0,.22);
}

.roa18-market-screen {
  background:
    radial-gradient(circle at 14% 0%, rgba(43,232,183,.16), transparent 32rem),
    radial-gradient(circle at 90% 12%, rgba(255,205,92,.11), transparent 30rem),
    linear-gradient(135deg, #04100e 0%, #071522 100%);
}

.roa18-market-screen .market-storefront-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 470px);
  gap: clamp(1.2rem, 2.8vw, 2.2rem);
}

.roa18-market-screen .market-storefront-main {
  display: grid;
  gap: 1.1rem;
}

.roa18-market-screen .market-grid {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.05rem;
}

.roa18-market-screen .market-publish-form {
  border-radius: 1.6rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.13);
}

.market-dynamic-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
}

.market-active-fieldset {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 1.2rem;
  padding: .95rem;
  background: rgba(2,12,24,.35);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .7rem;
}

.market-active-fieldset legend {
  padding: 0 .45rem;
  color: #73f6dd;
  font-weight: 900;
  letter-spacing: .04em;
}

.market-vitrine-card {
  background: linear-gradient(145deg, rgba(43,232,183,.1), rgba(255,255,255,.045));
}

.roa18-channels-screen {
  background:
    radial-gradient(circle at 50% 0%, rgba(67,224,255,.16), transparent 34rem),
    radial-gradient(circle at 12% 24%, rgba(109,92,255,.12), transparent 30rem),
    linear-gradient(135deg, #030814 0%, #071020 100%);
}

.roa18-channels-screen .channels-radio-layout {
  grid-template-columns: minmax(380px, .85fr) minmax(0, 1.15fr);
  align-items: start;
}

.roa18-channels-screen .radio-room-console,
.roa18-channels-screen .channel-room-card {
  border-radius: 2rem;
}

.roa18-map-screen {
  background:
    radial-gradient(circle at 20% 0%, rgba(54,255,196,.13), transparent 34rem),
    linear-gradient(135deg, #020812 0%, #03111b 100%);
}

.roa18-map-screen .map-official-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.roa18-map-screen .map-visual-stage,
.roa18-map-screen .mapbox-live-stage,
.roa18-map-screen .map-canvas-official {
  min-height: calc(100vh - 250px);
  border-radius: 2rem;
}

.roa18-udl-screen {
  background:
    radial-gradient(circle at 18% 4%, rgba(164,121,255,.16), transparent 30rem),
    radial-gradient(circle at 84% 18%, rgba(67,224,255,.1), transparent 30rem),
    linear-gradient(135deg, #070716 0%, #0a1321 100%);
}

.roa18-udl-screen .udl-campus-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
}

.roa18-udl-screen .udl-class-column .official-card,
.roa18-udl-screen .udl-lesson-screen,
.roa18-udl-screen .class-card {
  border-radius: 2rem;
  min-height: 420px;
}

.roa18-builder-screen {
  background:
    radial-gradient(circle at 16% 0%, rgba(255,181,92,.14), transparent 32rem),
    radial-gradient(circle at 82% 16%, rgba(67,224,255,.12), transparent 30rem),
    linear-gradient(135deg, #100a04 0%, #08121f 100%);
}

.roa18-builder-screen .builder-studio-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 360px);
}

.roa18-builder-screen .builder-workbench-column .official-form,
.roa18-builder-screen .project-card {
  border-radius: 2rem;
  min-height: 360px;
}

.roa18-profile-screen {
  background:
    radial-gradient(circle at 14% 0%, rgba(67,224,255,.14), transparent 30rem),
    linear-gradient(135deg, #050a14 0%, #071322 100%);
}

.roa18-admin-screen {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,96,96,.11), transparent 28rem),
    linear-gradient(135deg, #07080d 0%, #101523 100%);
}

@media (max-width: 1100px) {
  .chat-app-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 64px);
  }
  .chat-session-rail {
    display: flex;
    overflow-x: auto;
    min-height: auto;
    border-radius: 1.2rem;
  }
  .chat-rail-section {
    min-width: 180px;
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,.08);
    padding-top: 0;
    padding-left: .8rem;
  }
  .roa18-2-chat-face .chat-fullscreen-panel { min-height: 78vh; }
  .roa18-world-screen .world-editorial-layout,
  .roa18-market-screen .market-storefront-layout,
  .roa18-channels-screen .channels-radio-layout,
  .roa18-map-screen .map-official-layout,
  .roa18-udl-screen .udl-campus-layout,
  .roa18-builder-screen .builder-studio-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .chat-app-shell { width: calc(100% - .6rem); }
  .roa18-2-chat-face .public-nav { position: sticky; }
  .chat-session-rail { padding: .55rem; gap: .55rem; }
  .chat-rail-section { min-width: 150px; }
  .roa18-2-chat-face .chat-conversation { padding: .4rem .25rem; }
  .roa18-2-chat-face .message.chat-message.user,
  .roa18-2-chat-face .message.chat-message.soia { width: 100%; }
  .roa18-2-chat-face .chat-composer {
    width: 100%;
    grid-template-columns: 1fr;
    bottom: .3rem;
  }
  .market-active-fieldset { grid-template-columns: 1fr; }
}