/* Plumazo · demo. Tokens del sistema de diseño Nexo: Verde (claro, predeterminado) y Carbón (oscuro). */
:root {
  --bg: #f8f8f3; --surface: #ffffff; --surface-alt: #eef2e9; --border: #dce3d9; --field: #7d8a83;
  --text: #1d3a30; --muted: #56665d; --acento: #3a5f2b; --acento-hover: #1d3a30; --acento-fondo: #e3eedb;
  --acento-fuerte: #1d3a30; --primario: #1d3a30; --primario-texto: #ffffff; --primario-hover: #2b4a2c;
  --lima: #d5f88a; --lima-texto: #1d3a30; --banda: #1d3a30; --banda-texto: #eaf2e6; --foco: #4a7633;
  --ok-fg: #14684f; --ok-bg: #ddf2e8; --dif-fg: #7f5300; --dif-bg: #fbefd3; --err-fg: #a3302a; --err-bg: #fbe4e2;
  --info-fg: #1f5aa6; --info-bg: #e3edfb; --neutro-fg: #56665d; --neutro-bg: #eef2e9;
  --sombra: 0 1px 2px rgba(29, 58, 48, .06), 0 8px 24px rgba(29, 58, 48, .06);
  --sombra-lg: 0 20px 60px rgba(0, 0, 0, .25);
  --radio-sm: 4px; --radio-md: 8px; --radio-lg: 14px;
  --font: "Inter", "Segoe UI", system-ui, Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme="carbon"] {
  --bg: #141716; --surface: #1b1f1d; --surface-alt: #232825; --border: #343a37; --field: #6e7772;
  --text: #e4e8e5; --muted: #a2aaa5; --acento: #bcd99a; --acento-hover: #d9ecc2; --acento-fondo: #252d22;
  --acento-fuerte: #d9ecc2; --primario: #c8e3a0; --primario-texto: #141716; --primario-hover: #d6ecb8;
  --lima: #c8e3a0; --lima-texto: #141716; --banda: #0f1211; --banda-texto: #e4e8e5; --foco: #bcd99a;
  --ok-fg: #7fd1b0; --ok-bg: #17302a; --dif-fg: #e3bb6a; --dif-bg: #33291b; --err-fg: #f09a92; --err-bg: #3a2224;
  --info-fg: #93b9ee; --info-bg: #1b2a40; --neutro-fg: #a2aaa5; --neutro-bg: #232825;
  --sombra: none; --sombra-lg: 0 0 0 1px #343a37, 0 16px 40px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); }
a { color: var(--acento); text-underline-offset: 2px; }
a:hover { color: var(--acento-hover); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.icono { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Franja de demo */
.franja-demo { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px;
  background: var(--banda); color: var(--banda-texto); font-size: 13px; text-align: center; }
.franja-demo b { font-weight: 600; }
.pastilla-lima { background: var(--lima); color: var(--lima-texto); border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: 12px; }

/* Barra superior */
.barra { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.marca { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.marca-icono { width: 36px; height: 36px; border-radius: var(--radio-md); background: var(--primario); color: var(--primario-texto);
  display: flex; align-items: center; justify-content: center; }
.marca b { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.marca small { display: block; color: var(--muted); font-size: 12px; }
.btn-icono { width: 40px; height: 40px; border-radius: var(--radio-md); border: 1px solid var(--border); background: var(--surface);
  color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-icono:hover { background: var(--surface-alt); }

/* Disposición */
.cuerpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 100px); }
.menu { padding: 20px 12px; border-right: 1px solid var(--border); background: var(--surface); }
.menu p { margin: 0 8px 8px; }
.menu ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.menu button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0;
  border-radius: var(--radio-md); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.menu button:hover { background: var(--surface-alt); }
.menu button[aria-current="page"] { background: var(--acento-fondo); color: var(--acento-fuerte); font-weight: 500; }
.contenido { padding: 28px 32px 48px; max-width: 1180px; width: 100%; }

/* Tipografía */
.kicker { font-size: 11px; line-height: 1.3; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); margin: 0; }
h1 { font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; margin: 4px 0 6px; }
h2 { font-size: 15px; line-height: 1.3; font-weight: 500; margin: 0; }
.lead { color: var(--muted); margin: 0 0 20px; max-width: 70ch; }
.ayuda, .meta { font-size: 12px; color: var(--muted); margin: 0; }

/* Tarjetas y rejillas */
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tarjeta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radio-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta.destacada { box-shadow: var(--sombra); }
.tarjeta-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tarjeta-cab h2 { margin-right: auto; }

/* Controles */
label { font-size: 12px; font-weight: 500; }
.campo { display: flex; flex-direction: column; gap: 4px; }
textarea, input[type="text"], select { width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--field); border-radius: var(--radio-md); padding: 10px 12px; }
textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px;
  border-radius: var(--radio-md); border: 1px solid transparent; font: 500 14px/1 var(--font); cursor: pointer; text-decoration: none; }
.btn-primario { background: var(--primario); color: var(--primario-texto); }
.btn-primario:hover { background: var(--primario-hover); }
.btn-contorno { background: transparent; color: var(--acento); border-color: var(--acento); }
.btn-contorno:hover { background: var(--acento-fondo); }
.btn-fantasma { background: transparent; color: var(--text); border-color: var(--border); }
.btn-fantasma:hover { background: var(--surface-alt); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.segmentado { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-alt); border-radius: var(--radio-md); }
.segmentado button { min-height: 34px; padding: 0 12px; white-space: nowrap; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 500 13px var(--font); cursor: pointer; }
.segmentado button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }

/* Estados (siempre texto + punto) */
.estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ok { color: var(--ok-fg); background: var(--ok-bg); } .dif { color: var(--dif-fg); background: var(--dif-bg); }
.err { color: var(--err-fg); background: var(--err-bg); } .info { color: var(--info-fg); background: var(--info-bg); }
.neutro { color: var(--neutro-fg); background: var(--neutro-bg); }
.aviso { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radio-md); font-size: 13px; }
.aviso .icono { margin-top: 1px; }

/* Responder */
.hilo { display: flex; flex-direction: column; gap: 10px; }
.mensaje { display: flex; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--acento-fondo); color: var(--acento-fuerte);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none; }
.mensaje p { margin: 2px 0 0; }
mark { background: var(--dif-bg); color: var(--dif-fg); border-radius: 3px; padding: 0 2px; }
.revision { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.revision > div { background: var(--surface-alt); border-radius: var(--radio-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.respuesta { white-space: pre-wrap; background: var(--surface-alt); border-radius: var(--radio-md); padding: 12px 14px; margin: 0; font: inherit; }
.entra { animation: entra .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Speech */
.notas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.notas li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radio-md); background: var(--surface-alt); }
.notas li span:first-child { margin-right: auto; }
.cifras { display: flex; gap: 16px; flex-wrap: wrap; }
.cifra { font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.teleprompter { position: fixed; inset: 0; z-index: 50; background: rgba(15, 18, 17, .92); display: flex; flex-direction: column; }
.teleprompter-cab { display: flex; align-items: center; gap: 12px; padding: 16px 24px; color: #e4e8e5; }
.teleprompter-cab span { margin-right: auto; }
.teleprompter-ventana { flex: 1; overflow: hidden; position: relative; mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.teleprompter-texto { position: absolute; left: 50%; width: min(760px, 90vw); transform: translate(-50%, 70vh); color: #fff;
  font-size: clamp(24px, 3.6vw, 40px); line-height: 1.5; font-weight: 500; white-space: pre-wrap; }

/* Extensión */
.extension { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.popup { width: 360px; height: 600px; border-radius: var(--radio-lg); border: 1px solid var(--border); background: var(--bg);
  box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; position: relative; }
.popup header { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; }
.popup header .marca-icono { width: 40px; height: 40px; }
.popup header div { flex: 1; }
.popup header h2 { font-size: 18px; }
.pasos { list-style: none; margin: 0; padding: 0 16px 8px; display: flex; justify-content: space-between; }
.pasos li { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.pasos li span { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--field); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.pasos li.activo { color: var(--text); } .pasos li.activo span { border-color: var(--acento); background: var(--acento-fondo); }
.pasos li.hecho span { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
.progreso { height: 4px; margin: 0 16px 12px; border-radius: 999px; background: var(--border); overflow: hidden; }
.progreso i { display: block; height: 100%; background: var(--primario); border-radius: 999px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.popup-cuerpo { flex: 1; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.popup footer { padding: 12px 16px 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.popup footer .btn { width: 100%; }
.esqueleto { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--surface-alt), var(--border), var(--surface-alt)); background-size: 300% 100%; animation: brillo 1.3s linear infinite; }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.lista-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-simple li { display: flex; gap: 10px; align-items: flex-start; }
.circulo { width: 32px; height: 32px; border-radius: 50%; background: var(--acento-fondo); color: var(--acento-fuerte); display: flex; align-items: center; justify-content: center; flex: none; }
.circulo .icono { width: 16px; height: 16px; }
.toast { position: absolute; left: 16px; right: 16px; bottom: 120px; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13px; box-shadow: var(--sombra-lg); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Celular: el menú se vuelve una tira superior */
@media (max-width: 860px) {
  .cuerpo { grid-template-columns: 1fr; }
  .menu { border-right: 0; border-bottom: 1px solid var(--border); padding: 8px 12px; overflow-x: auto; }
  .menu p { display: none; }
  .menu ul { flex-direction: row; margin: 0; }
  .menu button { white-space: nowrap; }
  .contenido { padding: 20px 16px 40px; }
  .rejilla, .revision, .extension { grid-template-columns: 1fr; }
  .popup { width: 100%; max-width: 360px; }
  .barra { padding: 10px 16px; }
  .marca small { display: none; }
}